@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/development/reducers/settings.d.ts

@@ -0,0 +1,17 @@
+import type { Reducer, UnknownAction } from 'redux';
+import type { DevelopmentSettingsAction } from '../action-creators/settings';
+import type { DevelopmentSettingsState } from '../types';
+type SettingsAction = DevelopmentSettingsAction | UnknownAction;
+/**
+ * The state the development settings start out with.
+ */
+export declare const DEFAULT_DEVELOPMENT_SETTINGS: DevelopmentSettingsState;
+/**
+ * The reducer for all development tools settings related states.
+ * @param state The application state.
+ * @param action The redux action.
+ * @returns The new state.
+ */
+declare const settingsReducer: Reducer<DevelopmentSettingsState, SettingsAction>;
+export default settingsReducer;
+//# sourceMappingURL=settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../development/reducers/settings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,cAAc,GAAG,yBAAyB,GAAG,aAAa,CAAC;AAchE;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,wBAK1C,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,eAAe,EAAE,OAAO,CAAC,wBAAwB,EAAE,cAAc,CAsCrE,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/development/reducers/settings.js

@@ -1,51 +1,64 @@
+import "core-js/modules/es.array.includes.js";
 import { produce } from 'immer';
 import { isDev } from '@shopgate/engage/core/helpers';
-import { DEVELOPMENT_TOOLS_TOGGLE_INSETS, DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT, DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW } from "../constants";
+import { DEVELOPMENT_TOOLS_TOGGLE_INSETS, DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT, DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW, DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION } from "../constants";
+const HANDLED_ACTION_TYPES = [DEVELOPMENT_TOOLS_TOGGLE_INSETS, DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT, DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW, DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION];
+
+// Narrowing in one place, since `UnknownAction` types `type` as a plain string and would keep the
+// switch below from discriminating the union on its own.
+const isSettingsAction = action => HANDLED_ACTION_TYPES.includes(action.type);
 
 /**
- * @typedef {Object} DevToolsSettingsState
- * @property {boolean} showInsets
- * @property {boolean} showInsetHighlight
+ * The state the development settings start out with.
  */
-
-/** @type DevToolsSettingsState */
-const initialState = {
+export const DEFAULT_DEVELOPMENT_SETTINGS = {
   showInsets: null,
   showInsetHighlight: false,
-  cms2PreviewEnabled: false
+  cms2PreviewEnabled: false,
+  colorSchemeSelectionEnabled: false
 };
 
 /**
  * The reducer for all development tools settings related states.
- * @param {Object} state The application state.
- * @param {Object} action The redux action.
- * @returns {Object}
+ * @param state The application state.
+ * @param action The redux action.
+ * @returns The new state.
  */
-export default function settingsReducer(state = initialState, action = {}) {
-  const producer = produce(/** @param {DevToolsSettingsState} draft The draft */draft => {
-    switch (action.type) {
-      case DEVELOPMENT_TOOLS_TOGGLE_INSETS:
-        {
-          if (isDev) {
-            draft.showInsets = action.visible;
-          }
-          break;
+const settingsReducer = (state = DEFAULT_DEVELOPMENT_SETTINGS, action = {
+  type: ''
+}) => produce(state, draft => {
+  if (!isSettingsAction(action)) {
+    return;
+  }
+  switch (action.type) {
+    case DEVELOPMENT_TOOLS_TOGGLE_INSETS:
+      {
+        if (isDev) {
+          draft.showInsets = action.visible;
         }
-      case DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT:
-        {
-          if (isDev) {
-            draft.showInsetHighlight = action.visible;
-          }
-          break;
+        break;
+      }
+    case DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT:
+      {
+        if (isDev) {
+          draft.showInsetHighlight = action.visible;
         }
-      case DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW:
-        {
-          draft.cms2PreviewEnabled = action.enabled;
-          break;
+        break;
+      }
+    case DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW:
+      {
+        draft.cms2PreviewEnabled = action.enabled;
+        break;
+      }
+    case DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION:
+      {
+        if (isDev) {
+          draft.colorSchemeSelectionEnabled = action.enabled;
         }
-      default:
         break;
-    }
-  });
-  return producer(state);
-}
+      }
+    default:
+      break;
+  }
+});
+export default settingsReducer;

package/development/reducers/storage.d.ts

@@ -0,0 +1,17 @@
+import type { Reducer, UnknownAction } from 'redux';
+import type { DevelopmentStorageAction } from '../action-creators/storage';
+import type { DevelopmentStorageState } from '../types';
+type StorageAction = DevelopmentStorageAction | UnknownAction;
+/**
+ * The state the development storage starts out with.
+ */
+export declare const DEFAULT_DEVELOPMENT_STORAGE: DevelopmentStorageState;
+/**
+ * The reducer for all developer tools storage related states.
+ * @param state The application state.
+ * @param action The redux action.
+ * @returns The new state.
+ */
+declare const storageReducer: Reducer<DevelopmentStorageState, StorageAction>;
+export default storageReducer;
+//# sourceMappingURL=storage.d.ts.map

package/development/reducers/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../development/reducers/storage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,KAAK,aAAa,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAO9D;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,uBAIzC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,cAAc,EAAE,OAAO,CAAC,uBAAuB,EAAE,aAAa,CAiBlE,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/development/reducers/storage.js

@@ -1,14 +1,14 @@
 import { produce } from 'immer';
 import { isDev } from '@shopgate/engage/core/helpers';
 import { DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE } from "../constants";
+// Narrowing in one place, since `UnknownAction` types `type` as a plain string and would keep the
+// switch below from discriminating the union on its own.
+const isStorageAction = action => action.type === DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE;
 
 /**
- * @typedef {Object} DevToolsStorageState
- * @property {Object} statusBarStyle
+ * The state the development storage starts out with.
  */
-
-/** @type DevToolsStorageState */
-const initialState = {
+export const DEFAULT_DEVELOPMENT_STORAGE = {
   statusBarStyle: {
     styles: {}
   }
@@ -16,24 +16,24 @@ const initialState = {
 
 /**
  * The reducer for all developer tools storage related states.
- * @param {Object} state The application state.
- * @param {Object} action The redux action.
- * @returns {Object}
+ * @param state The application state.
+ * @param action The redux action.
+ * @returns The new state.
  */
-export default function storageReducer(state = initialState, action = {}) {
-  const producer = produce(/** @param {DevToolsStorageState} draft The draft */draft => {
-    if (!isDev) {
-      return;
-    }
-    switch (action.type) {
-      case DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE:
-        {
-          draft.statusBarStyle = action.style;
-          break;
-        }
-      default:
+const storageReducer = (state = DEFAULT_DEVELOPMENT_STORAGE, action = {
+  type: ''
+}) => produce(state, draft => {
+  if (!isDev || !isStorageAction(action)) {
+    return;
+  }
+  switch (action.type) {
+    case DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE:
+      {
+        draft.statusBarStyle = action.style;
         break;
-    }
-  });
-  return producer(state);
-}
+      }
+    default:
+      break;
+  }
+});
+export default storageReducer;

package/development/selectors/index.d.ts

@@ -0,0 +1,3 @@
+export * from './settings';
+export * from './storage';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/selectors/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/development/selectors/settings.d.ts

@@ -0,0 +1,52 @@
+import type { DevelopmentSettingsState, DevelopmentState } from '../types';
+/**
+ * Creates a selector to determine if development mode is enabled.
+ */
+export declare const getIsDev: ((state: DevelopmentState) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Creates a selector to determine if the simulated iOS insets are supposed to be shown.
+ */
+export declare const getAreInsetsVisible: ((state: DevelopmentState) => boolean | null) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: DevelopmentSettingsState) => boolean | null, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Creates a selector to determine if the inset highlight is visible.
+ */
+export declare const getIsInsetHighlightVisible: ((state: DevelopmentState) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: DevelopmentSettingsState) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Creates a selector to check if simulated safe area insets are supposed to be injected.
+ */
+export declare const getAreSimulatedInsetsInjected: ((state: DevelopmentState) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: boolean | null) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Creates a selector to determine if the CMS2 preview is enabled.
+ */
+export declare const getIsCMS2PreviewEnabled: ((state: DevelopmentState) => boolean) & import("reselect").OutputSelectorFields<(args_0: DevelopmentSettingsState) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Creates a selector to determine if a color scheme may be selected without the app settings
+ * allowing it. Development only - in production the merchant's appearance setting is the only
+ * thing that may enable it.
+ */
+export declare const getIsColorSchemeSelectionEnabled: ((state: DevelopmentState) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: DevelopmentSettingsState) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+//# sourceMappingURL=settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../development/selectors/settings.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAc3E;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;CAGpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;CAQ/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAQtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAoBzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gCAAgC;;;;CAQ5C,CAAC"}

package/development/selectors/settings.js

@@ -1,24 +1,25 @@
 import { createSelector } from 'reselect';
 import MobileDetect from 'mobile-detect';
 import { isDev as isDevelopment, hasSGJavaScriptBridge } from '@shopgate/engage/core/helpers';
+import { DEFAULT_DEVELOPMENT_SETTINGS } from "../reducers/settings";
 const md = new MobileDetect(navigator.userAgent);
 
 /**
- * Retrieves the development settings state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The development settings state.
+ * Retrieves the development settings state from the store. Falls back to the defaults when the
+ * slice is not present - the theme provider reads these on every render, including in tests and
+ * hosts that do not register the development reducers.
+ * @param state The current application state.
+ * @returns The development settings state.
  */
-const getState = state => state.development.settings;
+const getState = state => state?.development?.settings ?? DEFAULT_DEVELOPMENT_SETTINGS;
 
 /**
  * Creates a selector to determine if development mode is enabled.
- * @type {(state: any) => boolean}
  */
-export const getIsDev = createSelector(() => isDevelopment);
+export const getIsDev = createSelector(_state => isDevelopment, isDev => isDev);
 
 /**
  * Creates a selector to determine if the simulated iOS insets are supposed to be shown.
- * @type {(state: any) => boolean}
  */
 export const getAreInsetsVisible = createSelector(getIsDev, getState, (isDev, settings) => {
   if (!isDev) {
@@ -29,7 +30,6 @@ export const getAreInsetsVisible = createSelector(getIsDev, getState, (isDev, se
 
 /**
  * Creates a selector to determine if the inset highlight is visible.
- * @type {(state: any) => boolean}
  */
 export const getIsInsetHighlightVisible = createSelector(getIsDev, getState, (isDev, settings) => {
   if (!isDev) {
@@ -40,7 +40,6 @@ export const getIsInsetHighlightVisible = createSelector(getIsDev, getState, (is
 
 /**
  * Creates a selector to check if simulated safe area insets are supposed to be injected.
- * @type {(state: any) => boolean}
  */
 export const getAreSimulatedInsetsInjected = createSelector(getIsDev, getAreInsetsVisible, (isDev, insetsVisible) => {
   // No insets injected if the app is not in development mode.
@@ -64,6 +63,17 @@ export const getAreSimulatedInsetsInjected = createSelector(getIsDev, getAreInse
 
 /**
  * Creates a selector to determine if the CMS2 preview is enabled.
- * @type {(state: any) => boolean}
  */
-export const getIsCMS2PreviewEnabled = createSelector(getState, settings => !!settings.cms2PreviewEnabled);
+export const getIsCMS2PreviewEnabled = createSelector(getState, settings => !!settings.cms2PreviewEnabled);
+
+/**
+ * Creates a selector to determine if a color scheme may be selected without the app settings
+ * allowing it. Development only - in production the merchant's appearance setting is the only
+ * thing that may enable it.
+ */
+export const getIsColorSchemeSelectionEnabled = createSelector(getIsDev, getState, (isDev, settings) => {
+  if (!isDev) {
+    return false;
+  }
+  return !!settings.colorSchemeSelectionEnabled;
+});

package/development/selectors/storage.d.ts

@@ -0,0 +1,10 @@
+import type { DevelopmentState, DevelopmentStorageState } from '../types';
+/**
+ * Creates a selector that returns the current status bar style object from the storage.
+ */
+export declare const getStatusBarStyleStorage: ((state: DevelopmentState) => import("../types").StatusBarStyle) & import("reselect").OutputSelectorFields<(args_0: DevelopmentStorageState) => import("../types").StatusBarStyle, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+//# sourceMappingURL=storage.d.ts.map

package/development/selectors/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../development/selectors/storage.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAW1E;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;CAGpC,CAAC"}

package/development/selectors/storage.js

@@ -1,26 +1,14 @@
 import { createSelector } from 'reselect';
-
-/**
- * Retrieves the development storage state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The development storage state.
- */
-const getState = state => state.development.storage;
-
-/**
- * @typedef {Object} StatusBarStyleStyles
- * @property {string} statusBarBackground Current background color of the app bar
- */
-
+import { DEFAULT_DEVELOPMENT_STORAGE } from "../reducers/storage";
 /**
- * @typedef {Object} StatusBarStyle
- * @property {boolean} isDefault Whether the style is the default one which was initially applied
- * @property {"light"|"dark"} statusBarStyle The status style for the iOS status bar
- * @property {StatusBarStyleStyles} styles Additional styles for the status bar
+ * Retrieves the development storage state from the store. Falls back to the defaults when the
+ * slice is not present, for the same reason the settings selectors do.
+ * @param state The current application state.
+ * @returns The development storage state.
  */
+const getState = state => state?.development?.storage ?? DEFAULT_DEVELOPMENT_STORAGE;
 
 /**
  * Creates a selector that returns the current status bar style object from the storage.
- * @type {(state: any) => StatusBarStyle}
  */
 export const getStatusBarStyleStorage = createSelector(getState, state => state.statusBarStyle);

package/development/streams/index.d.ts

@@ -0,0 +1,2 @@
+export * from './insets';
+//# sourceMappingURL=index.d.ts.map

package/development/streams/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/streams/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/development/streams/insets.d.ts

@@ -0,0 +1,8 @@
+import type { DevelopmentSettingsAction } from '../action-creators/settings';
+/**
+ * Gets triggered after the simulated page insets were updated.
+ */
+export declare const simulatedPageInsetsDidUpdate$: import("rxjs/Observable").Observable<{
+    action: DevelopmentSettingsAction;
+}>;
+//# sourceMappingURL=insets.d.ts.map

package/development/streams/insets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insets.d.ts","sourceRoot":"","sources":["../../../development/streams/insets.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAE7E;;GAEG;AACH,eAAO,MAAM,6BAA6B;YACT,yBAAyB;EACN,CAAC"}

package/development/streams/insets.js

@@ -1,9 +1,7 @@
 import { main$ } from '@shopgate/engage/core/streams';
 import { DEVELOPMENT_TOOLS_TOGGLE_INSETS } from "../constants";
-
 /**
- * Gets triggered after the simulated page insets were updated
- * @type {Observable}
+ * Gets triggered after the simulated page insets were updated.
  */
 export const simulatedPageInsetsDidUpdate$ = main$.filter(({
   action

package/development/subscriptions/index.d.ts

@@ -0,0 +1,15 @@
+import { appWillStart$ } from '@shopgate/engage/core/streams';
+/**
+ * The subset of the subscription helpers this module uses.
+ */
+interface SubscriptionContext {
+    dispatch: (action: unknown) => void;
+}
+type Subscribe = (stream: typeof appWillStart$, callback: (context: SubscriptionContext) => void) => void;
+/**
+ * Development subscriptions.
+ * @param subscribe The subscribe function.
+ */
+export default function development(subscribe: Subscribe): void;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/development/subscriptions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/subscriptions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAK9D;;GAEG;AACH,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,KAAK,SAAS,GAAG,CACf,MAAM,EAAE,OAAO,aAAa,EAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,KAC7C,IAAI,CAAC;AAEV;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,SAAS,EAAE,SAAS,QAQvD"}

package/development/subscriptions/index.js

@@ -3,8 +3,12 @@ import { UIEvents } from '@shopgate/engage/core/events';
 import { updateStatusBarStyleStorage } from '@shopgate/engage/development/action-creators';
 
 /**
- * Development subscriptions
- * @param {Function} subscribe The subscribe function
+ * The subset of the subscription helpers this module uses.
+ */
+
+/**
+ * Development subscriptions.
+ * @param subscribe The subscribe function.
  */
 export default function development(subscribe) {
   subscribe(appWillStart$, ({

package/development/types/development.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Additional styles the app sends along with a status bar style update.
+ */
+export interface StatusBarStyleStyles {
+    /**
+     * Current background color of the app bar.
+     */
+    statusBarBackground?: string;
+}
+/**
+ * The status bar style the app last reported through the `devInternalUpdateStatusBarStyle` event.
+ */
+export interface StatusBarStyle {
+    /**
+     * Whether the style is the default one which was initially applied.
+     */
+    isDefault?: boolean;
+    /**
+     * The status style for the iOS status bar.
+     */
+    statusBarStyle?: 'light' | 'dark' | 'none';
+    /**
+     * Additional styles for the status bar.
+     */
+    styles?: StatusBarStyleStyles;
+}
+/**
+ * Settings the development tools maintain. Everything but the CMS 2.0 preview is development only -
+ * the reducer refuses to write those outside a development build.
+ */
+export interface DevelopmentSettingsState {
+    /**
+     * Whether simulated iOS safe area insets are shown. `null` while nobody decided, which lets
+     * simulated iOS devices default to showing them.
+     */
+    showInsets: boolean | null;
+    /**
+     * Whether the simulated safe area insets are highlighted.
+     */
+    showInsetHighlight: boolean;
+    /**
+     * Whether the CMS 2.0 preview is enabled.
+     */
+    cms2PreviewEnabled: boolean;
+    /**
+     * Whether a color scheme may be selected without the app settings allowing it.
+     */
+    colorSchemeSelectionEnabled: boolean;
+}
+/**
+ * Values the development tools store for inspection rather than to drive behaviour.
+ */
+export interface DevelopmentStorageState {
+    /**
+     * The status bar style the app last reported.
+     */
+    statusBarStyle: StatusBarStyle;
+}
+/**
+ * The slice of the application state the development selectors read from.
+ */
+export interface DevelopmentState {
+    development: {
+        settings: DevelopmentSettingsState;
+        storage: DevelopmentStorageState;
+    };
+}
+//# sourceMappingURL=development.d.ts.map

package/development/types/development.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"development.d.ts","sourceRoot":"","sources":["../../../development/types/development.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,2BAA2B,EAAE,OAAO,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,cAAc,EAAE,cAAc,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE;QACX,QAAQ,EAAE,wBAAwB,CAAC;QACnC,OAAO,EAAE,uBAAuB,CAAC;KAClC,CAAC;CACH"}

package/development/types/development.js

@@ -0,0 +1 @@
+export {};

package/development/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { DevelopmentSettingsState, DevelopmentState, DevelopmentStorageState, StatusBarStyle, StatusBarStyleStyles, } from './development';
+//# sourceMappingURL=index.d.ts.map

package/development/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/development/types/index.js

@@ -0,0 +1 @@
+export {};

package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
@@ -29,20 +29,10 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = dispatch => ({
   toggle: productId => dispatch(toggleFavoriteWithListChooser(productId))
 });
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   root: {
-    '&&': {
-      margin: '0 0px 16px 16px',
-      backgroundColor: theme.palette.background.surface,
-      border: `1px solid ${theme.palette.primary.main}`,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0
-    }
-  },
-  ripple: {
-    padding: '8px 16px'
+    margin: '0 0 16px 16px',
+    textTransform: 'none'
   }
 }));
 
@@ -70,10 +60,10 @@ const FavoriteButtonWide = ({
   if (!appConfig.hasFavorites) {
     return null;
   }
-  return /*#__PURE__*/_jsx(RippleButton, {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "outlined",
+    color: "primary",
     className: classes.root,
-    rippleClassName: classes.ripple,
-    type: "primary",
     onClick: () => toggle(productId),
     children: i18n.text(label)
   });

package/favorites/components/Item/Item.d.ts

@@ -40,11 +40,11 @@ declare const _default: import("react-redux").ConnectedComponent<{
         quantity: number;
     };
 }, {
+    product: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     historyPush: (...args: any[]) => any;
     quantity?: number | null | undefined;
     notes?: string | null | undefined;
     listId: string;
-    product: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     isBaseProduct?: boolean | null | undefined;

package/favorites/components/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA2KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAnKD,YAAY"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA0KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlKD,YAAY"}

package/favorites/components/Item/Item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { MODAL_VARIANT_SELECT } from '@shopgate/pwa-ui-shared/Dialog/constants';
 import { ProductImage, ITEM_PATH, PriceInfo, isBaseProduct as isBaseProductSelector, isProductOrderable, hasProductVariants, ProductListEntryProvider } from '@shopgate/engage/product';
-import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, getThemeSettings, i18n } from '@shopgate/engage/core';
+import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, i18n } from '@shopgate/engage/core';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { Link, TextLink, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeIsRopeProductOrderable, getPreferredLocation, StockInfoLists } from '@shopgate/engage/locations';
@@ -153,9 +153,6 @@ const FavoriteItem = ({
     classes,
     cx
   } = useStyles();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
@@ -267,7 +264,7 @@ const FavoriteItem = ({
           children: /*#__PURE__*/_jsx(ProductImage, {
             className: cx('engage__favorites__item__image'),
             src: product.featuredImageBaseUrl,
-            resolutions: gridResolutions
+            context: "list"
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: cx(classes.infoContainer, 'engage__favorites__item__info-container'),