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

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

@@ -7,6 +7,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
+    fontSize: theme.typography.body2.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     marginTop: 1,
     wordBreak: ['keep-all', 'break-word'],

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

@@ -17,7 +17,6 @@ const useStyles = makeStyles()((theme, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    background: theme.palette.background.surface,
     height: '100%'
   },
   itemDetails: {

package/product/components/ProductGrid/components/Layout/index.js

@@ -11,9 +11,23 @@ const useStyles = makeStyles()((theme, {
     ':not(:empty)': {
       marginTop: 16
     },
-    display: 'grid',
-    gridGap: '0 16px',
-    gridTemplateColumns: `repeat(${columns}, 1fr)`
+    ...(columns <= 2 ? {
+      rowGap: 16,
+      '& > *': {
+        padding: '0px 8px',
+        width: `${100 / columns}%`,
+        [`&:nth-of-type(${columns}n)`]: {
+          paddingRight: 0
+        },
+        [`&:nth-of-type(${columns}n+1)`]: {
+          paddingLeft: 0
+        }
+      }
+    } : {
+      display: 'grid',
+      gridGap: 16,
+      gridTemplateColumns: `repeat(${columns}, 1fr)`
+    })
   }
 }));
 

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

@@ -0,0 +1,2 @@
+export const WIDGET_ID: "@shopgate/engage/product/ProductGrid";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductGrid/constants.js"],"names":[],"mappings":"AAAA,wBAAyB,sCAAsC,CAAC"}

package/product/components/ProductGrid/constants.js

@@ -0,0 +1 @@
+export const WIDGET_ID = '@shopgate/engage/product/ProductGrid';

package/product/components/ProductGrid/hooks.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Resolves the number of product columns for the ProductGrid, keyed by the
+ * active breakpoint.
+ *
+ * Precedence:
+ * - Once the app settings are hydrated from a source (admin sync / jsonp), they
+ *   are authoritative everywhere.
+ * - Before hydration, when the grid is rendered outside a page-builder widget
+ *   (Category / Search / legacy Products widget), the single legacy
+ *   `useWidgetSettings` scalar is honored flat across all breakpoints. This
+ *   reproduces the old theme grid and preserves the merchant's configured value.
+ * - Otherwise (inside a widget, pre-hydration) the built-in responsive default
+ *   from the app settings is used ({ xs: 2, md: 4 }), so the inherited legacy
+ *   `columns: 2` default no longer pins tablet to 2.
+ * @returns The resolved number of columns for the active breakpoint.
+ */
+export declare const useProductGridColumns: () => number;
+//# sourceMappingURL=hooks.d.ts.map

package/product/components/ProductGrid/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductGrid/hooks.ts"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAwBxC,CAAC"}

package/product/components/ProductGrid/hooks.js

@@ -0,0 +1,49 @@
+import { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { WidgetContext } from '@shopgate/engage/page/components/Widgets/WidgetContext';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import { getAreAppSettingsHydrated, getProductGridColumns } from '@shopgate/engage/settings/selectors/appSettings';
+import { WIDGET_ID } from "./constants";
+
+/**
+ * Resolves the number of product columns for the ProductGrid, keyed by the
+ * active breakpoint.
+ *
+ * Precedence:
+ * - Once the app settings are hydrated from a source (admin sync / jsonp), they
+ *   are authoritative everywhere.
+ * - Before hydration, when the grid is rendered outside a page-builder widget
+ *   (Category / Search / legacy Products widget), the single legacy
+ *   `useWidgetSettings` scalar is honored flat across all breakpoints. This
+ *   reproduces the old theme grid and preserves the merchant's configured value.
+ * - Otherwise (inside a widget, pre-hydration) the built-in responsive default
+ *   from the app settings is used ({ xs: 2, md: 4 }), so the inherited legacy
+ *   `columns: 2` default no longer pins tablet to 2.
+ * @returns The resolved number of columns for the active breakpoint.
+ */
+export const useProductGridColumns = () => {
+  // Widget-scope detection: the WidgetContext carries a `code` only when the
+  // grid renders inside a page-builder widget (WidgetProvider).
+  const {
+    code: widgetCode
+  } = useContext(WidgetContext);
+  const isInsideWidget = Boolean(widgetCode);
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  // The built-in default { xs: 2, md: 4 } until hydrated, the source value after.
+  const appSettingsColumns = useSelector(getProductGridColumns);
+  const {
+    columns: legacyColumns
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const breakpoints = useMemo(() => {
+    // Only special case: pre-hydration, outside a widget, honor the legacy
+    // scalar flat across every breakpoint.
+    if (!areAppSettingsHydrated && !isInsideWidget && typeof legacyColumns === 'number') {
+      return {
+        xs: legacyColumns
+      };
+    }
+    return appSettingsColumns;
+  }, [areAppSettingsHydrated, isInsideWidget, legacyColumns, appSettingsColumns]);
+  return useResponsiveValue(breakpoints);
+};

package/product/components/ProductGrid/index.js

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { ViewContext, InfiniteContainer, LoadingIndicator } from '@shopgate/engage/components';
 import { ProductListTypeProvider } from '@shopgate/engage/product';
 import { ITEMS_PER_LOAD } from '@shopgate/engage/core/constants';
-import { useResponsiveValue } from '@shopgate/engage/styles';
 import Iterator from "./components/Iterator";
 import Layout from "./components/Layout";
+import { useProductGridColumns } from "./hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const WIDGET_ID = '@shopgate/engage/product/ProductGrid';
+export { WIDGET_ID } from "./constants";
 
 /**
  * The Product Grid component.
@@ -46,10 +46,7 @@ const ProductGrid = ({
   const {
     getContentRef
   } = useContext(ViewContext);
-  const columns = useResponsiveValue({
-    xs: 2,
-    md: 4
-  });
+  const columns = useProductGridColumns();
   if (!infiniteLoad) {
     return /*#__PURE__*/_jsx(Layout, {
       columns: columns,

package/product/components/ProductGrid/spec.js

@@ -23,6 +23,9 @@ jest.mock('@shopgate/engage/components', () => {
 jest.mock("./components/Iterator", () => function Iterator() {
   return null;
 });
+jest.mock("./hooks", () => ({
+  useProductGridColumns: jest.fn(() => 2)
+}));
 jest.mock('@shopgate/engage/product', () => ({
   ProductListTypeProvider: ({
     children

package/product/components/ProductList/components/Layout/index.js

@@ -1,34 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  list: {
-    background: theme.palette.background.surface
-  }
-}));
 
 /**
  * The Product List Layout component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Layout = ({
   children
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(List, {
-    className: cx(classes.list, 'engage__product__product-list'),
-    itemScope: true,
-    itemType: "http://schema.org/ItemList",
-    "data-test-id": "productList",
-    children: children
-  });
-};
+}) => /*#__PURE__*/_jsx(List, {
+  className: "engage__product__product-list",
+  itemScope: true,
+  itemType: "http://schema.org/ItemList",
+  "data-test-id": "productList",
+  children: children
+});
 Layout.defaultProps = {
   children: null
 };

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

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAalC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAW5D,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAqBlC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAW5D,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/settings/reducers/appSettings.js

@@ -19,6 +19,14 @@ export const DEFAULT_APP_SETTINGS = {
         borderEnabled: true
       }
     }
+  },
+  productList: {
+    grid: {
+      columns: {
+        xs: 2,
+        md: 4
+      }
+    }
   }
 };
 

package/settings/selectors/appSettings.d.ts

@@ -41,4 +41,12 @@ export declare const getTabBarSettings: ((state: AppSettingsState) => {
 }> & {
     clearCache: () => void;
 };
+/**
+ * Selects the ProductGrid columns setting (keyed by breakpoint).
+ */
+export declare const getProductGridColumns: ((state: AppSettingsState) => Partial<Record<import("../../styles/theme").Breakpoint, number>>) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => Partial<Record<import("../../styles/theme").Breakpoint, number>>, {
+    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"}

package/settings/selectors/appSettings.js

@@ -20,4 +20,9 @@ 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.productList.grid.columns);

package/settings/types/appSettings.d.ts

@@ -1,8 +1,28 @@
+import type { Breakpoint } from '@shopgate/engage/styles/theme';
 export interface AppSettingsState {
     settings: {
         appSettings: AppSettingsSlice;
     };
 }
+/**
+ * Number of product columns to render, keyed by breakpoint. Partial: any unset
+ * breakpoint cascades down to the next smaller defined value (see
+ * useResponsiveValue).
+ */
+export type ProductColumns = Partial<Record<Breakpoint, number>>;
+/**
+ * Settings for the ProductGrid list type.
+ */
+export interface ProductGridSettings {
+    columns: ProductColumns;
+}
+/**
+ * Settings for the various product-list types. Add a key and its own settings
+ * interface per future type (e.g. slider).
+ */
+export interface ProductListSettings {
+    grid: ProductGridSettings;
+}
 export interface AppSettings {
     navigation: {
         tabBar: {
@@ -15,6 +35,7 @@ export interface AppSettings {
             };
         };
     };
+    productList: ProductListSettings;
 }
 /**
  * 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,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE;QACR,WAAW,EAAE,gBAAgB,CAAC;KAC/B,CAAC;CACH;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,mBAAmB,CAAC;CAC3B;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;IACD,WAAW,EAAE,mBAAmB,CAAC;CAClC;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB"}

package/styles/helpers/index.d.ts

@@ -4,6 +4,7 @@ export { setPageContentWidth } from "./setPageContentWidth";
 export { setViewportHeight } from "./setViewportHeight";
 export { toggleBodyScroll } from "./toggleBodyScroll";
 export { loadCustomStyles } from "./loadCustomStyles";
+export { loadThemeCss } from "./loadThemeCss";
 export * from "./color";
 export { responsiveMediaQuery } from "../../components/ResponsiveContainer/mediaQuery";
 export { responsiveCondition } from "../../components/ResponsiveContainer/condition";

package/styles/helpers/index.js

@@ -6,6 +6,7 @@ export { setViewportHeight } from "./setViewportHeight";
 export { toggleBodyScroll } from "./toggleBodyScroll";
 export { initCSSCustomProps, initCSSCustomPropsFallback } from "./initCSSCustomProperties";
 export { loadCustomStyles } from "./loadCustomStyles";
+export { loadThemeCss } from "./loadThemeCss";
 export * from "./color";
 export { responsiveMediaQuery } from "../../components/ResponsiveContainer/mediaQuery";
 export { responsiveCondition } from "../../components/ResponsiveContainer/condition";

package/styles/helpers/loadThemeCss.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Loads the theme css file. It overrides the css custom properties that are generated during
+ * theme initialization, so it has to win the cascade against them - see `insertLinkTag` for how
+ * that order is established.
+ *
+ * A link applies at its position in the dom rather than at the time it finished loading, so the
+ * timeout below only decides how long app start waits - never which styles win.
+ *
+ * Resolves when the file loaded, when it failed, or when REQUEST_TIMEOUT elapsed - it never
+ * rejects, since the file is not guaranteed to exist and must not be able to block app start.
+ * @returns A promise that resolves once the file settled.
+ */
+export declare const loadThemeCss: () => Promise<void>;
+//# sourceMappingURL=loadThemeCss.d.ts.map

package/styles/helpers/loadThemeCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadThemeCss.d.ts","sourceRoot":"","sources":["../../../styles/helpers/loadThemeCss.ts"],"names":[],"mappings":"AAgCA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAgF1C,CAAC"}

package/styles/helpers/loadThemeCss.js

@@ -0,0 +1,112 @@
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+import { appConfig } from '@shopgate/engage';
+const REQUEST_TIMEOUT = 3000;
+const LINK_TAG_ID = 'theme-css';
+const INSERTION_POINT_SELECTOR = 'meta[name="theme-css-insertion-point"]';
+
+/**
+ * Inserts the link at the theme css insertion point, which the html template declares between the
+ * emotion insertion point and the preview one. That position is what makes the cascade order
+ * structural rather than incidental: every tss style is pinned above it, and the admin preview
+ * pins its style tag to the anchor below it.
+ *
+ * Falls back to appending when the meta is absent - a head without the anchor still yields the
+ * desired order for anything that was already inserted, it just no longer guarantees it.
+ * @param linkTag The link tag to insert.
+ */
+const insertLinkTag = linkTag => {
+  const insertionPoint = document.querySelector(INSERTION_POINT_SELECTOR);
+  if (!insertionPoint) {
+    document.head.appendChild(linkTag);
+    return;
+  }
+  insertionPoint.parentNode?.insertBefore(linkTag, insertionPoint.nextSibling);
+};
+
+/**
+ * Loads the theme css file. It overrides the css custom properties that are generated during
+ * theme initialization, so it has to win the cascade against them - see `insertLinkTag` for how
+ * that order is established.
+ *
+ * A link applies at its position in the dom rather than at the time it finished loading, so the
+ * timeout below only decides how long app start waits - never which styles win.
+ *
+ * Resolves when the file loaded, when it failed, or when REQUEST_TIMEOUT elapsed - it never
+ * rejects, since the file is not guaranteed to exist and must not be able to block app start.
+ * @returns A promise that resolves once the file settled.
+ */
+export const loadThemeCss = () => new Promise(resolve => {
+  const {
+    themeCssUrl: href
+  } = appConfig;
+  if (!href) {
+    resolve();
+    return;
+  }
+  let settled = false;
+  let timeout;
+
+  /**
+   * Resolves the promise once, whichever of load / error / timeout comes first.
+   */
+  const settle = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    clearTimeout(timeout);
+    resolve();
+  };
+
+  /**
+   * Starts the fallback that keeps app start from waiting on a stalled request. The link is
+   * deliberately left in place when the timeout hits: it still applies once it eventually loads,
+   * it just no longer holds up app start.
+   */
+  const startTimeoutFallback = () => {
+    timeout = setTimeout(() => {
+      withScope(scope => {
+        scope.setLevel(SentrySeverity.Warning);
+        scope.setExtra('themeCssUrl', href);
+        scope.setExtra('timeout', REQUEST_TIMEOUT);
+        captureMessage('Fetching theme css took too long');
+      });
+      settle();
+    }, REQUEST_TIMEOUT);
+  };
+  const existingTag = document.querySelector(`#${LINK_TAG_ID}`);
+  if (existingTag) {
+    // Already loaded
+    if (existingTag.sheet) {
+      resolve();
+      return;
+    }
+
+    // Still loading - a stalled request must not leave the promise pending, so arm the timeout
+    // here too rather than relying on the load / error events alone.
+    existingTag.addEventListener('load', settle, {
+      once: true
+    });
+    existingTag.addEventListener('error', settle, {
+      once: true
+    });
+    startTimeoutFallback();
+    return;
+  }
+  const linkTag = document.createElement('link');
+  linkTag.rel = 'stylesheet';
+  linkTag.type = 'text/css';
+  linkTag.href = href;
+  linkTag.id = LINK_TAG_ID;
+  linkTag.onload = settle;
+  linkTag.onerror = () => {
+    withScope(scope => {
+      scope.setLevel(SentrySeverity.Error);
+      scope.setExtra('themeCssUrl', href);
+      captureMessage('Fetching theme css failed');
+    });
+    settle();
+  };
+  insertLinkTag(linkTag);
+  startTimeoutFallback();
+});

package/styles/index.d.ts

@@ -1,4 +1,4 @@
 export * from './helpers';
-export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
+export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ColorSchemeName, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
 export { makeStyles, withStyles, useStyles, css, cx, tss, GlobalStyles, injectGlobal, keyframes, } from './tss';
 //# sourceMappingURL=index.d.ts.map

package/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}

package/styles/reset/root.js

@@ -38,7 +38,7 @@ injectGlobal({
     WebkitOverflowScrolling: 'touch',
     WebkitUserSelect: hasWebBridge() ? 'inherit' : 'none',
     userSelect: hasWebBridge() ? 'inherit' : 'none',
-    color: 'var(--color-text-high-emphasis)'
+    color: 'var(--sg-palette-text-primary, var(--color-text-high-emphasis))'
   },
   '[data-pattern]': {
     height: '100% !important'

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createDefaultThemeOptions/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAO,YA6G3C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createDefaultThemeOptions/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAO,YAuH3C,CAAC"}

package/styles/theme/createDefaultThemeOptions/index.js

@@ -1,7 +1,8 @@
 import { getCSSCustomProp } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/engage';
 const {
-  colors
+  colors,
+  settings
 } = themeConfig;
 
 /**
@@ -66,6 +67,11 @@ export const createDefaultThemeOptions = () => ({
             background: getCSSCustomProp('--color-button-cta') || getCSSCustomProp('--color-primary')
           }
         },
+        badge: {
+          vars: {
+            background: getCSSCustomProp('--color-secondary')
+          }
+        },
         snackbar: {
           vars: {
             background: '#323232'
@@ -88,6 +94,11 @@ export const createDefaultThemeOptions = () => ({
             badgeLeft: 'var(--tab-bar-item-badge-left, calc(50% + 20px))'
           }
         },
+        appBar: {
+          vars: {
+            background: settings?.['@shopgate/engage/components/AppBar']?.background || '#FFF'
+          }
+        },
         ratingStars: {
           vars: {
             filled: `var(--rating-stars-filled, ${getCSSCustomProp('--color-primary')})`,

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

@@ -131,6 +131,17 @@ export declare const componentsSchema: {
             readonly color: "";
         };
     };
+    readonly appBar: {
+        readonly vars: {
+            readonly background: "";
+            readonly color: "";
+        };
+    };
+    readonly badge: {
+        readonly vars: {
+            readonly background: "";
+        };
+    };
     readonly discountBadge: {
         readonly vars: {
             readonly background: "";
@@ -231,6 +242,17 @@ export declare const componentsDefaults: {
             color: (t: Theme) => string;
         };
     };
+    appBar: {
+        vars: {
+            background: string;
+            color: (t: Theme) => string;
+        };
+    };
+    badge: {
+        vars: {
+            background: (t: Theme) => string;
+        };
+    };
     discountBadge: {
         vars: {
             background: string;

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

@@ -1 +1 @@
-{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/createComponents.types.js

@@ -119,6 +119,17 @@ export const componentsSchema = {
       color: ''
     }
   },
+  appBar: {
+    vars: {
+      background: '',
+      color: ''
+    }
+  },
+  badge: {
+    vars: {
+      background: ''
+    }
+  },
   discountBadge: {
     vars: {
       background: ''
@@ -217,7 +228,18 @@ export const componentsDefaults = {
   ctaButton: {
     vars: {
       background: t => t.palette.primary.main,
-      color: t => t.palette.primary.contrastText
+      color: t => t.contrastColor('var(--sg-components-ctaButton-background)')
+    }
+  },
+  appBar: {
+    vars: {
+      background: '#FFFFFF',
+      color: t => t.contrastColor('var(--sg-components-appBar-background)')
+    }
+  },
+  badge: {
+    vars: {
+      background: t => t.palette.secondary.main
     }
   },
   discountBadge: {

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

@@ -1 +1 @@
-{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CA0G9C"}
+{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CA6G9C"}

package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.js

@@ -40,7 +40,10 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
     }), rest, cssVarPrefix);
 
     // Resolve component token values to actual CSS variable references
-    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, vars));
+    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, {
+      ...rest,
+      ...vars
+    }));
     const {
       css: componentsCss,
       vars: componentsVars,

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

@@ -1,5 +1,6 @@
 import { type ThemeOptions, type ThemeInternal } from './types';
 export type { Theme, BaseTheme, ThemeInternal, ThemeOptions, Breakpoint, ColorSchemeName, ColorSchemeSelectorType, PaletteColorsWithMain, } from './types';
+export { COLOR_SCHEME_NAMES } from './types';
 /**
  * Creates a theme object for the ThemeProvider.
  * @param options The theme options.

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":"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"}
+{"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,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}