@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.2

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

@@ -1,3 +1,74 @@
+import "core-js/modules/es.array.reduce.js";
+import cssVarsParser from "./cssVarsParser";
+
+/**
+ * Builds lookup keys for CSS variables that are injected by addAugmentationToVars.
+ *
+ * For each augmentable palette entry this returns keys for `dark`, `light`, and
+ * `contrastText`, e.g. `--sg-palette-primary-dark`.
+ * @param vars Theme vars object to inspect.
+ * @param cssVarsPrefix Optional CSS variable prefix.
+ * @returns Flat list of CSS variable lookup keys.
+ */
+function getAugmentedPaletteLookupKeys(vars, cssVarsPrefix = 'sg') {
+  if (!vars.palette) return [];
+  const prefix = cssVarsPrefix ? `${cssVarsPrefix}-` : '';
+  const keys = [];
+  Object.keys(vars.palette).forEach(key => {
+    // @ts-expect-error - We are sure about the type here
+    const paletteEntry = vars.palette[key];
+    if (paletteEntry && typeof paletteEntry === 'object' && paletteEntry.main) {
+      const base = `--${prefix}palette-${key}`;
+      keys.push(`${base}-dark`, `${base}-light`, `${base}-contrastText`);
+    }
+  });
+  return keys;
+}
+
+/**
+ * Merges refreshed augmented palette CSS variables into the original CSS map.
+ *
+ * The original `cssInput` was generated before palette augmentation, so `dark`,
+ * `light`, and `contrastText` entries derived from augmented vars must be
+ * regenerated and merged back in.
+ * @param cssInput Original CSS variables map from the parser result.
+ * @param varsInput Original vars object, used to determine which palette keys are augmentable.
+ * @param vars Augmented vars object containing the updated palette values.
+ * @param cssVarsPrefix Prefix used to build CSS variable names.
+ * @returns CSS map with augmented palette keys overwritten by fresh values.
+ */
+function addAugmentationToCss(cssInput, varsInput, vars, cssVarsPrefix) {
+  // Re-parse the augmented vars so we can derive up-to-date css variable values.
+  const {
+    css: augmentedCss
+  } = cssVarsParser(vars, {
+    prefix: cssVarsPrefix
+  });
+
+  // Only copy keys that are introduced/overwritten by color augmentation.
+  // This keeps all non-augmented entries from the original parser result untouched.
+  const augmentedPaletteLookupKeys = getAugmentedPaletteLookupKeys(varsInput, cssVarsPrefix);
+  const augmentedPaletteCss = augmentedPaletteLookupKeys.reduce((acc, key) => {
+    if (key in augmentedCss) {
+      acc[key] = augmentedCss[key];
+    }
+    return acc;
+  }, {});
+  return {
+    ...cssInput,
+    ...augmentedPaletteCss
+  };
+}
+
+/**
+ * Extends palette entries that provide a `main` color with derived variants.
+ *
+ * For each matching palette entry, this injects `light`, `dark`, and
+ * `contrastText` so downstream theme consumers can rely on a complete color set.
+ * @param vars Theme vars object to augment.
+ * @param theme Base theme utilities used to derive color variants.
+ * @returns A new vars object with augmented palette entries.
+ */
 function addAugmentationToVars(vars, theme) {
   if (!vars.palette) return vars;
   const augmentedPalette = {
@@ -12,7 +83,9 @@ function addAugmentationToVars(vars, theme) {
         ...paletteEntry,
         // Inject css color-mix function to create light and dark variants of the main color
         light: theme.lighten(paletteEntry.main),
-        dark: theme.darken(paletteEntry.main)
+        dark: theme.darken(paletteEntry.main),
+        // Inject contrast text color based on the main color
+        contrastText: theme.contrastColor(paletteEntry.main)
       };
     }
   });
@@ -26,19 +99,24 @@ function addAugmentationToVars(vars, theme) {
  * Augments the CSS variables for the color palette by adding light and dark variants for each color.
  * @param cssParserReturn The result from the CSS variables parser.
  * @param theme The base theme object, which includes the palette and the lighten/darken functions.
+ * @param cssVarsPrefix Prefix used for CSS variable names.
  * @returns An object containing the augmented CSS variables.
  */
-export default function cssVarsColorAugmentation(cssParserReturn, theme) {
+export default function cssVarsColorAugmentation(cssParserReturn, theme, cssVarsPrefix) {
   const {
     vars: varsInput,
-    varsWithDefaults: varsWithDefaultsInput,
+    css: cssInput,
     ...rest
   } = cssParserReturn;
+
+  // vars and varsWithDefaults need augmentation because both are consumed by the theme layer.
   const vars = addAugmentationToVars(varsInput, theme);
-  const varsWithDefaults = addAugmentationToVars(varsWithDefaultsInput, theme);
+
+  // cssInput was produced before augmentation, so merge refreshed augmented keys back in.
+  const css = addAugmentationToCss(cssInput, varsInput, vars, cssVarsPrefix);
   return {
     ...rest,
-    vars,
-    varsWithDefaults
+    css,
+    vars: varsInput
   };
 }

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;AA4HH,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;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"}

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

@@ -85,7 +85,7 @@ const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
  */
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
-    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex', 'fontSize', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'fontWeightBold'].some(prop => keys[keys.length - 1] === prop)) {
       // CSS property that are unitless
       return value;
     }

package/styles/theme/createTheme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}

package/styles/theme/createTheme/index.js

@@ -4,6 +4,7 @@ import createBreakpoints from "./createBreakpoints";
 import createSpacing from "./createSpacing";
 import transitions from "./transitions";
 import zIndex from "./zIndex";
+import layout from "./layout";
 import createThemeFromColorScheme from "./createThemeFromColorScheme";
 import createCssVarsForColorSchemeThemes from "./createCssVarsForColorSchemeThemes";
 import applyStyles from "./applyStyles";
@@ -50,8 +51,6 @@ export const createTheme = (options = {}) => {
   const currentTheme = colorSchemes[defaultColorScheme] ?? colorSchemes.light;
   const breakpoints = createBreakpoints();
   const spacing = createSpacing();
-
-  // @ts-expect-error applyStyles is added to the theme object after its creation
   const theme = {
     ...currentTheme,
     ...cssVarsTheme,
@@ -60,6 +59,7 @@ export const createTheme = (options = {}) => {
     spacing,
     transitions,
     zIndex,
+    layout,
     colorSchemes,
     getColorSchemeSelector,
     setActiveColorScheme,

package/styles/theme/createTheme/layout.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Runtime layout dimensions exposed as global CSS variables.
+ *
+ * These are NOT design tokens and are not generated by the theme's CSS-variable pipeline.
+ * The `--safe-area-inset-*` variables are set at runtime by `updatePageInsets` based on the
+ * device page insets.
+ *
+ * This node only maps theme properties to those existing variables (`var(--...)`), so consumers
+ * can read `theme.layout.*` instead of hardcoding the variable names.
+ */
+export interface SafeArea {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+}
+export interface Layout {
+    /** Device safe-area insets (`--safe-area-inset-*`). */
+    safeArea: SafeArea;
+}
+declare const layout: Layout;
+export default layout;
+//# sourceMappingURL=layout.d.ts.map

package/styles/theme/createTheme/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,MAAM;IACrB,uDAAuD;IACvD,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,MAOb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/styles/theme/createTheme/layout.js

@@ -0,0 +1,20 @@
+/**
+ * Runtime layout dimensions exposed as global CSS variables.
+ *
+ * These are NOT design tokens and are not generated by the theme's CSS-variable pipeline.
+ * The `--safe-area-inset-*` variables are set at runtime by `updatePageInsets` based on the
+ * device page insets.
+ *
+ * This node only maps theme properties to those existing variables (`var(--...)`), so consumers
+ * can read `theme.layout.*` instead of hardcoding the variable names.
+ */
+
+const layout = {
+  safeArea: {
+    top: 'var(--safe-area-inset-top)',
+    bottom: 'var(--safe-area-inset-bottom)',
+    left: 'var(--safe-area-inset-left)',
+    right: 'var(--safe-area-inset-right)'
+  }
+};
+export default layout;

package/styles/theme/createTheme/transitions.d.ts

@@ -39,6 +39,10 @@ export interface Duration {
    * Recommended when something is leaving screen
    */
   leavingScreen: number;
+  /**
+   * How long a toast stays visible before auto-dismissing
+   */
+  toast: number;
 }
 
 export const duration: Duration;

package/styles/theme/createTheme/transitions.js

@@ -27,7 +27,9 @@ export const duration = {
   // recommended when something is entering screen
   enteringScreen: 225,
   // recommended when something is leaving screen
-  leavingScreen: 195
+  leavingScreen: 195,
+  // how long a toast stays visible before auto-dismissing
+  toast: 5000
 };
 
 /**

package/styles/theme/createTheme/types.d.ts

@@ -1,10 +1,11 @@
 import type { PaletteOptions, Palette } from './createPalette';
 import type { Typography, TypographyOptions } from './createTypography';
-import type { Components, ComponentsOptions, ComponentVars } from './createComponents';
+import type { ComponentsOptions, ComponentVars, Components } from './createComponents';
 import type { Breakpoints } from './createBreakpoints';
 import type { Spacing } from './createSpacing';
 import type { Transitions } from './transitions';
 import type { ZIndex } from './zIndex';
+import type { Layout } from './layout';
 import type { ApplyStyles } from './applyStyles';
 import type { GetColorSchemeSelector, ActiveColorSchemeSwitcher } from './helpers';
 import type { CreateCssVarsForColorSchemeThemesReturnValue } from './createCssVarsForColorSchemeThemes';
@@ -87,7 +88,7 @@ export interface BaseTheme {
     /**
      * Component specific styling tokes.
      */
-    components: Components;
+    components: ComponentVars;
     shape: Shape;
     /**
      * Pre-defined shadow styles for different elevation levels, following Material Design guidelines.
@@ -115,6 +116,12 @@ export interface BaseTheme {
      * @returns A string representing the darkened color.
      */
     darken(color: string, coefficient?: number | string): string;
+    /**
+     * Calculates a contrast color (either black or white) based on the lightness of the input color.
+     * @param color The color to evaluate.
+     * @returns A string representing the contrast color (either black or white) for the input color.
+     */
+    contrastColor(color: string): string;
 }
 export interface Theme extends BaseTheme {
     /**
@@ -137,6 +144,12 @@ export interface Theme extends BaseTheme {
      * Reference to z-index values for multiple components.
      */
     zIndex: ZIndex;
+    /**
+     * Mappings to runtime layout CSS variables (safe-area insets).
+     * The values are `var(--...)` references to variables updated at runtime elsewhere in the app;
+     * this node does not generate any new CSS variables.
+     */
+    layout: Layout;
     /**
      * An object that contains the CSS variable references for the theme properties.
      * It has the same structure as the theme, but the values are CSS variable references
@@ -165,12 +178,26 @@ export interface Theme extends BaseTheme {
      */
     applyStyles: ApplyStyles<ColorSchemeName>;
 }
+/**
+ * A single fully-resolved color-scheme theme. Identical to {@link BaseTheme} except that its
+ * `components` keep the nested `vars` level (the raw per-scheme token defaults produced by
+ * `createComponents`), whereas the flattened `BaseTheme['components']` shape is only produced for
+ * the final merged theme.
+ */
+export type ColorSchemeTheme = Omit<BaseTheme, 'components'> & {
+    components: Components;
+};
 /**
  * A record of themes for each color scheme. Each key is a color scheme name (e.g., 'light', 'dark'),
- * and the value is a theme object that contains e.g. the palette and typography for that color scheme.
+ * and the value is a fully-resolved color-scheme theme ({@link ColorSchemeTheme}).
  */
-export type ColorSchemeThemes = Record<ColorSchemeName, BaseTheme>;
-export type ThemeInternal = Theme & Pick<CreateCssVarsForColorSchemeThemesReturnValue, 'generateStyleSheets'> & {
+export type ColorSchemeThemes = Record<ColorSchemeName, ColorSchemeTheme>;
+export type ThemeInternal = Omit<Theme, 'colorSchemes'> & {
+    /**
+     * Internal runtime map of fully resolved color-scheme themes.
+     */
+    colorSchemes: ColorSchemeThemes;
+} & Pick<CreateCssVarsForColorSchemeThemesReturnValue, 'generateStyleSheets'> & {
     /**
      * Function that generates a CSS selector string for a given color scheme.
      */

package/styles/theme/createTheme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AACnF,OAAO,KAAK,EAAE,4CAA4C,EAAE,MAAM,qCAAqC,CAAC;AACxG,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,QAAA,MAAM,YAAY,4BAA6B,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,QAAA,MAAM,aAAa,4BAA6B,CAAC;AAEjD,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,KAAK,WAAW,CAAC,CAAC,IAChB,CAAC,SAAS,MAAM,GACZ;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAER;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC,CAAC;AAEvG,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;IACrC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,iBAAiB,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3D;;;;;OAKG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9D;;;;;;OAMG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;IACrC;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG;QAAE,UAAU,EAAE,aAAa,CAAA;KAAC,CAAC;IACnE;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACvE;;;;;;;;;;;;OAYG;IACH,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;AAElE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,4CAA4C,EAAE,qBAAqB,CAAC,GAAG;IAC9G;;OAEG;IACH,sBAAsB,EAAE,sBAAsB,CAAC;IAC/C;;OAEG;IACH,oBAAoB,EAAE,yBAAyB,CAAC;CACjD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/types.js

@@ -7,8 +7,15 @@ const selectorTypes = ['data', 'class'];
  * dynamically based on user preference or system settings.
  */
 
+/**
+ * A single fully-resolved color-scheme theme. Identical to {@link BaseTheme} except that its
+ * `components` keep the nested `vars` level (the raw per-scheme token defaults produced by
+ * `createComponents`), whereas the flattened `BaseTheme['components']` shape is only produced for
+ * the final merged theme.
+ */
+
 /**
  * A record of themes for each color scheme. Each key is a color scheme name (e.g., 'light', 'dark'),
- * and the value is a theme object that contains e.g. the palette and typography for that color scheme.
+ * and the value is a fully-resolved color-scheme theme ({@link ColorSchemeTheme}).
  */
 export {};

package/styles/theme/hocs/index.d.ts

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

package/styles/theme/hocs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hocs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/styles/theme/hocs/index.js

@@ -0,0 +1 @@
+export { withTheme } from "./withTheme";

package/styles/theme/hocs/withTheme.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react';
+import type { Theme } from '../createTheme';
+/**
+ * Props injected by the `withTheme` HOC.
+ */
+export interface WithThemeProps {
+    /** The active styling theme (same object returned by `useTheme()`). */
+    theme: Theme;
+}
+/**
+ * Injects the styling theme as a `theme` prop into the wrapped component.
+ *
+ * Intended for legacy class components that cannot use the `useTheme` hook.
+ * For function components, prefer the `useTheme` hook instead.
+ *
+ * @param WrappedComponent The component to inject the theme into.
+ * @returns The wrapped component with `theme` supplied automatically.
+ */
+export declare function withTheme<P extends WithThemeProps>(WrappedComponent: ComponentType<P>): ComponentType<Omit<P, keyof WithThemeProps>>;
+export default withTheme;
+//# sourceMappingURL=withTheme.d.ts.map

package/styles/theme/hocs/withTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hocs/withTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,uEAAuE;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAChD,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,GACjC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAe9C;AAED,eAAe,SAAS,CAAC"}

package/styles/theme/hocs/withTheme.js

@@ -0,0 +1,33 @@
+import useTheme from "../hooks/useTheme";
+
+/**
+ * Props injected by the `withTheme` HOC.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Injects the styling theme as a `theme` prop into the wrapped component.
+ *
+ * Intended for legacy class components that cannot use the `useTheme` hook.
+ * For function components, prefer the `useTheme` hook instead.
+ *
+ * @param WrappedComponent The component to inject the theme into.
+ * @returns The wrapped component with `theme` supplied automatically.
+ */
+export function withTheme(WrappedComponent) {
+  /**
+   * The actual HOC.
+   * @param props The component props.
+   * @returns The wrapped component with the theme injected.
+   */
+  const WithTheme = props => {
+    const theme = useTheme();
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      ...props,
+      theme: theme
+    });
+  };
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  WithTheme.displayName = `WithTheme(${displayName})`;
+  return WithTheme;
+}
+export default withTheme;

package/styles/theme/index.d.ts

@@ -2,4 +2,5 @@ export { default as ThemeProvider } from './providers/ThemeProvider';
 export { createTheme } from './createTheme';
 export type { Theme, Breakpoint, PaletteColorsWithMain } from './createTheme';
 export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, } from './hooks';
+export { withTheme, type WithThemeProps } from './hocs';
 //# sourceMappingURL=index.d.ts.map

package/styles/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC"}

package/styles/theme/index.js

@@ -1,3 +1,4 @@
 export { default as ThemeProvider } from "./providers/ThemeProvider";
 export { createTheme } from "./createTheme";
-export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme } from "./hooks";
+export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme } from "./hooks";
+export { withTheme } from "./hocs";

package/styles/theme/providers/ActiveBreakpointProvider.d.ts

@@ -4,6 +4,6 @@ export declare const ActiveBreakpointContext: React.Context<Breakpoint | undefin
 type ActiveBreakpointProviderProps = {
     children: React.ReactNode;
 };
-declare const _default: React.MemoExoticComponent<({ children }: ActiveBreakpointProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children }: ActiveBreakpointProviderProps) => React.JSX.Element>;
 export default _default;
 //# sourceMappingURL=ActiveBreakpointProvider.d.ts.map

package/styles/theme/providers/ThemeProvider.d.ts

@@ -3,11 +3,11 @@ export interface ColorSchemeContextValue {
     /**
      * The current color scheme (e.g., 'light' or 'dark')
      */
-    mode: ColorSchemeName;
+    mode: ColorSchemeName | null;
     /**
      * Function to update the color scheme
      */
-    setMode: React.Dispatch<React.SetStateAction<ColorSchemeName>>;
+    setMode: React.Dispatch<React.SetStateAction<ColorSchemeName | null>>;
 }
 export declare const ThemeContext: import("react").Context<Theme>;
 export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextValue>;
@@ -18,6 +18,6 @@ type ThemeProviderProps = {
     theme: ThemeInternal;
     children: React.ReactNode;
 };
-declare const _default: import("react").MemoExoticComponent<({ children, theme, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ children, theme, }: ThemeProviderProps) => import("react").JSX.Element>;
 export default _default;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/styles/theme/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,kDAG7B,CAAC;AAwCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtCE,kBAAkB;AAwCrB,wBAAmC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,kDAG7B,CAAC;AAwCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtCE,kBAAkB;AAwCrB,wBAAmC"}

package/styles/theme/providers/ThemeProvider.js

@@ -1,6 +1,8 @@
 import { createContext, memo, useMemo, useLayoutEffect } from 'react';
 import useLocalStorage from '@shopgate/engage/core/hooks/useLocalStorage';
 import { GlobalStyles } from '@shopgate/engage/styles';
+import { IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE } from '@shopgate/engage/admin-preview/constants';
+import { FrontendSettingsPreviewBridge } from '@shopgate/engage/admin-preview/components';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ThemeContext = /*#__PURE__*/createContext({});
@@ -28,20 +30,16 @@ const ThemeProvider = ({
     theme.setActiveColorScheme(activeColorScheme);
   }, [activeColorScheme, theme]);
   const styleSheets = useMemo(() => theme.generateStyleSheets(), [theme]);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error The input theme contains more properties than exposed to the Theme type
-    _jsx(ColorSchemeContext.Provider, {
-      value: colorSchemeContextValue,
-      children: /*#__PURE__*/_jsxs(ThemeContext.Provider, {
-        value: theme,
-        children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
-          children: children
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: styleSheets
-        })]
-      })
-    })
-  );
+  return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+    value: colorSchemeContextValue,
+    children: [IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE && /*#__PURE__*/_jsx(FrontendSettingsPreviewBridge, {}), /*#__PURE__*/_jsxs(ThemeContext.Provider, {
+      value: theme,
+      children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
+        children: children
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheets
+      })]
+    })]
+  });
 };
 export default /*#__PURE__*/memo(ThemeProvider);

package/tracking/components/CookieConsentModal/index.js

@@ -2,24 +2,21 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Link, ConditionalWrapper } from '@shopgate/engage/components';
-import { appConfig, themeConfig } from '@shopgate/engage';
+import { Grid, I18n, Button, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { appConfig } from '@shopgate/engage';
 import connect from "./connector";
 import cookieImage from "./tracking-opt-in.svg";
 import { svgToDataUrl } from "../../../core";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   modalContent: {
     width: '100%'
   },
   modalLayout: {
-    backgroundColor: colors.lightOverlay
+    backgroundColor: theme.palette.background.surface
   },
   container: {
-    backgroundColor: colors.lightOverlay,
+    backgroundColor: theme.palette.background.surface,
     padding: '30px',
     justifyContent: 'center',
     display: 'flex',
@@ -27,8 +24,6 @@ const useStyles = makeStyles()(theme => ({
     textAlign: 'center'
   },
   title: {
-    fontWeight: 'bold',
-    fontSize: '1.35rem',
     paddingTop: '30px',
     paddingBottom: '30px'
   },
@@ -135,10 +130,15 @@ const CookieConsentModal = ({
           className: cx(classes.image, 'cookie-consent-modal__image'),
           alt: "",
           "aria-hidden": "true"
-        }), /*#__PURE__*/_jsx(I18n.Text, {
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "div",
+          fontWeight: "bold",
           className: cx(classes.title, 'cookie-consent-modal__title'),
-          string: modalTitle || 'cookieConsentModal.title',
-          id: "cookieConsentDialogTitle"
+          id: "cookieConsentDialogTitle",
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: modalTitle || 'cookieConsentModal.title'
+          })
         }), /*#__PURE__*/_jsx(I18n.Text, {
           string: modalMessage || 'cookieConsentModal.message',
           className: cx('cookie-consent-modal__message'),

package/tracking/components/PrivacySettings/index.js

@@ -6,7 +6,7 @@ import { appConfig } from '@shopgate/engage';
 import { i18n } from '@shopgate/engage/core/helpers';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     marginTop: '20px'
   },
@@ -28,7 +28,7 @@ const useStyles = makeStyles()({
     flexDirection: 'column'
   },
   link: {
-    color: 'var(--color-secondary)',
+    color: theme.palette.secondary.main,
     textDecoration: 'underline'
   },
   switchWrapper: {
@@ -38,10 +38,10 @@ const useStyles = makeStyles()({
     justifyContent: 'space-between'
   },
   title: {
-    fontWeight: 'bold',
+    fontWeight: theme.typography.fontWeightBold,
     display: 'block'
   }
-});
+}));
 
 /**
  * The PrivacySettings component.

package/tracking/selectors/cookieConsent.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
 import { appConfig } from '@shopgate/engage';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { appSupportsCookieConsent } from '@shopgate/engage/core/helpers';
 const {
   cookieConsent: {
@@ -30,7 +30,7 @@ export const getCookieSettingsState = state => state?.tracking?.cookieSettings |
  * or by app/feature settings
  */
 export const getIsCookieConsentHandled = createSelector(getCookieSettingsState, settingsState => {
-  if (!isCookieConsentActivated || !appSupportsCookieConsent() || IS_PAGE_PREVIEW_ACTIVE) {
+  if (!isCookieConsentActivated || !appSupportsCookieConsent() || isAdminPreviewActive()) {
     return true;
   }
   return settingsState?.comfortCookiesAccepted !== null || settingsState?.statisticsCookiesAccepted !== null;

package/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
+    "types": ["jest"],
 
     "strict": true,
     "isolatedModules": true,