@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/core/providers/ThemeResourcesProvider.d.ts

@@ -0,0 +1,56 @@
+export default ThemeResourcesProvider;
+export type ThemeComponentMap = import("../contexts/ThemeResourcesContext").ThemeComponentMap;
+export type Widgets = {
+    /**
+     * All available widgets for Widget API v1
+     */
+    v1: ThemeComponentMap;
+    /**
+     * All available widgets for Widget API v2
+     */
+    v2: ThemeComponentMap;
+};
+/**
+ * @typedef {import('../contexts/ThemeResourcesContext').ThemeComponentMap} ThemeComponentMap
+ */
+/**
+ * @typedef {Object} Widgets
+ * @property {ThemeComponentMap} v1 All available widgets for Widget API v1
+ * @property {ThemeComponentMap} v2 All available widgets for Widget API v2
+ */
+/**
+ * ThemeResourcesProvider component.
+ * @param {Object} props The component props.
+ * @param {Widgets} props.widgets Mapping object with all available widget components for the
+ * theme. Key is the widget code, value is the widget component.
+ * @param {ThemeComponentMap} props.components Object with shared theme components. Can be used by
+ * extensions the get unified visual presentation.
+ * @param {ThemeComponentMap} [props.legacyThemeAPI] Object with shared theme components. Can be
+ * used by extensions the get unified visual presentation.
+ * Kept for backward compatibility with existing extensions which use the deprecated `ThemeContext`.
+ * @param {React.ReactNode} props.children The component children.
+ * @returns {JSX.Element}
+ */
+declare function ThemeResourcesProvider({ widgets, components, legacyThemeAPI, children, }: {
+    widgets: Widgets;
+    components: ThemeComponentMap;
+    legacyThemeAPI?: import("../contexts/ThemeResourcesContext").ThemeComponentMap | undefined;
+    children: React.ReactNode;
+}): JSX.Element;
+declare namespace ThemeResourcesProvider {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let components: PropTypes.Validator<{
+            [x: string]: PropTypes.ReactComponentLike | null | undefined;
+        }>;
+        let widgets: PropTypes.Validator<NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>>;
+        let legacyThemeAPI: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+    }
+    namespace defaultProps {
+        let legacyThemeAPI_1: null;
+        export { legacyThemeAPI_1 as legacyThemeAPI };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ThemeResourcesProvider.d.ts.map

package/core/providers/ThemeResourcesProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeResourcesProvider.d.ts","sourceRoot":"","sources":["../../../core/providers/ThemeResourcesProvider.jsx"],"names":[],"mappings":";gCAMa,OAAO,mCAAmC,EAAE,iBAAiB;;;;;QAK5D,iBAAiB;;;;QACjB,iBAAiB;;AAP/B;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;;GAYG;AACH,4FAVG;IAAuB,OAAO,EAAtB,OAAO;IAEkB,UAAU,EAAnC,iBAAiB;IAES,cAAc;IAGjB,QAAQ,EAA/B,KAAK,CAAC,SAAS;CACvB,GAAU,GAAG,CAAC,OAAO,CAuBvB;;;;;;;;;;;;;;;kBAjD8B,OAAO;sBAChB,YAAY"}

package/core/providers/index.d.ts

@@ -0,0 +1,7 @@
+export { default as LoadingProvider } from "@shopgate/pwa-common/providers/loading";
+export { default as LoadingContext } from "@shopgate/pwa-common/providers/loading/context";
+export { default as ToastProvider } from "@shopgate/pwa-common/providers/toast";
+export { default as ToastContext } from "@shopgate/pwa-common/providers/toast/context";
+export { default as AppProvider } from "./AppProvider";
+export { default as ThemeResourcesProvider } from "./ThemeResourcesProvider";
+//# sourceMappingURL=index.d.ts.map

package/core/providers/index.d.ts.map

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

package/core/router/helpers.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Performs the PUSH navigation action.
+ * @param {Object} params The history params.
+ */
+export function push(params: Object): void;
+/**
+ * Performs the POP navigation action.
+ */
+export function pop(): void;
+/**
+ * Performs the REPLACE navigation action.
+ * @param {Object} params The history params.
+ */
+export function replace(params: Object): void;
+/**
+ * Performs the RESET navigation action.
+ * @param {Object} params The history params.
+ */
+export function reset(): void;
+/**
+ * Performs the UPDATE navigation action.
+ * @param {Object} state The meta state to add to a existing route.
+ * @param {string} [routeId] The ID of the route to update.
+ */
+export function update(state: Object, routeId?: string): void;
+export const NAVIGATION_PUSH: "navigation.push";
+export const NAVIGATION_POP: "navigation.pop";
+export const NAVIGATION_REPLACE: "navigation.replace";
+export const NAVIGATION_RESET: "navigation.reset";
+//# sourceMappingURL=helpers.d.ts.map

package/core/router/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../core/router/helpers.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH,6BAFW,MAAM,QAIhB;AAED;;GAEG;AACH,4BAEC;AAED;;;GAGG;AACH,gCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,8BAEC;AAED;;;;GAIG;AACH,8BAHW,MAAM,YACN,MAAM,QAIhB;AA3CD,8BAA+B,iBAAiB,CAAC;AACjD,6BAA8B,gBAAgB,CAAC;AAC/C,iCAAkC,oBAAoB,CAAC;AACvD,+BAAgC,kBAAkB,CAAC"}

package/core/selectors/app.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Checks if the app webview is currently visible
+ * @param {Object} state The application state.
+ * @returns {boolean}
+ */
+export const getIsAppWebViewVisible: ((state: Object) => any) & import("reselect").OutputSelectorFields<(args_0: Object) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+//# sourceMappingURL=app.d.ts.map

package/core/selectors/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../core/selectors/app.js"],"names":[],"mappings":"AASA;;;;GAIG;AACH;;;;EAGE"}

package/core/selectors/index.d.ts

@@ -0,0 +1,11 @@
+export * from "../config/config.selectors";
+export * from "./app";
+export * from "@shopgate/pwa-common/selectors/client";
+export * from "@shopgate/pwa-common/selectors/router";
+export * from "@shopgate/pwa-common/selectors/history";
+export * from "@shopgate/pwa-common/selectors/url";
+export * from "@shopgate/pwa-common/selectors/menu";
+export * from "@shopgate/pwa-common/selectors/modal";
+export { getState as getShopSettingsState, makeGetShopSettingByKey, makeGetShopSettings, getProductImagePlaceholder, getCategoryImagePlaceholder, getFavicon, getNumberOfAddressLines, getGoogleSiteVerificationCode, getRegistrationMode, getWishlistItemQuantityEnabled, getWishlistItemNotesEnabled, getShowWishlistItemsCountBadge, getLoadWishlistOnAppStartEnabled, getEnableCms2ForAllShoppers } from "./shopSettings";
+export { getIsLocationBasedShopping, getFulfillmentSchedulingEnabled, getRestrictMultiLocationOrders, getDefaultCurrency, getEnableWebIndexing, getProductShowAlternativeLocation, getProductListShowInventory, getEnabledCMSVersion } from "./merchantSettings";
+//# sourceMappingURL=index.d.ts.map

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

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

package/core/selectors/merchantSettings.d.ts

@@ -0,0 +1,21 @@
+export const getIsLocationBasedShopping: Function;
+export const getSubstitutionPreferencesEnabled: Function;
+export const getMerchantCustomerAttributes: Function;
+export const getFulfillmentSchedulingEnabled: Function;
+export const getRestrictMultiLocationOrders: Function;
+export const getDefaultCurrency: Function;
+export const getEnableWebIndexing: Function;
+export const getProductShowAlternativeLocation: Function;
+export const getProductListShowInventory: Function;
+/**
+ * Selector that retrieves the enabled CMS version.
+ * @type {(state: RootState) => "v1" | "v2" | "both"}
+ */
+export const getEnabledCMSVersion: (state: RootState) => "v1" | "v2" | "both";
+/**
+ * Retrieves the merchantSettings state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The locations state.
+ */
+export function getState(state: Object): Object;
+//# sourceMappingURL=merchantSettings.d.ts.map

package/core/selectors/merchantSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merchantSettings.d.ts","sourceRoot":"","sources":["../../../core/selectors/merchantSettings.js"],"names":[],"mappings":"AAgCA,kDAGE;AAEF,yDAGE;AAEF,qDAGE;AAEF,uDAGE;AAEF,sDAGE;AAEF,0CAEE;AAEF,4CAGE;AAEF,yDAGE;AAEF,mDAGE;AAEF;;;GAGG;AACH,mCAFU,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,GAAG,IAAI,GAAG,MAAM,CAKlD;AArEF;;;;GAIG;AACH,gCAHW,MAAM,GACL,MAAM,CAE+C"}

package/core/selectors/shopSettings.d.ts

@@ -0,0 +1,54 @@
+export function getState(state: Object): Object;
+export function makeGetShopSettingByKey(key: string, fallback?: any): Function;
+export function makeGetShopSettings(keys?: any[]): Function;
+/** Selects the current wishlist mode */
+export const getWishlistMode: Function;
+/**
+ * Selects the placeholder image for products
+ */
+export const getProductImagePlaceholder: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the placeholder image for products
+ */
+export const getCategoryImagePlaceholder: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the placeholder image for products
+ */
+export const getFavicon: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the number of address lines for registration / address forms
+ */
+export const getNumberOfAddressLines: Function;
+export const getGoogleSiteVerificationCode: Function;
+export const getShowCategoryImages: Function;
+/**
+ * Creates a selector to retrieve the current active registration mode.
+ * When the selector returns "simple" the form will not contain any address related fields.
+ */
+export const getRegistrationMode: Function;
+export const getWishlistItemQuantityEnabled: Function;
+export const getWishlistItemNotesEnabled: Function;
+export const getLoadWishlistOnAppStartEnabled: Function;
+export const getShowWishlistItemsCountBadge: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selector that determines if CMS 2 is enabled for all shoppers.
+ * @type {(state: RootState) => boolean}
+ */
+export const getEnableCms2ForAllShoppers: (state: RootState) => boolean;
+//# sourceMappingURL=shopSettings.d.ts.map

package/core/selectors/shopSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shopSettings.d.ts","sourceRoot":"","sources":["../../../core/selectors/shopSettings.js"],"names":[],"mappings":"AAyBO,gCAHI,MAAM,GACL,MAAM,CAEkD;AAQ7D,6CAJI,MAAM,aACN,GAAC,YAMX;AAOM,4DAmBN;AAED,wCAAwC;AACxC,uCAGE;AAIF;;GAEG;AACH;;;;EAGE;AAEF;;GAEG;AACH;;;;EAGE;AACF;;GAEG;AACH;;;;EAGE;AAEF;;GAEG;AACH,+CAGE;AAEF,qDAGE;AAEF,6CAGE;AAEF;;;GAGG;AACH,2CAGE;AAEF,sDAGE;AAEF,mDAGE;AAEF,wDAGE;AAEF;;;;EAQE;AAEF;;;GAGG;AACH,0CAFU,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAKrC"}

package/core/selectors/shopSettings.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.array.reduce.js";
 import { createSelector } from 'reselect';
 import { WISHLIST_MODE_PERSIST_ON_ADD, SHOP_SETTING_WISHLIST_MODE, SHOP_SETTING_IMAGES, SHOP_SETTING_IMAGES_PRODUCT_PLACEHOLDER, SHOP_SETTING_IMAGES_CATEGORY_PLACEHOLDER, SHOP_SETTING_IMAGES_FAVICON, SHOP_SETTING_NUMBER_OF_ADDRESS_LINES, SHOP_SETTING_GOOGLE_SITE_VERIFICATION_CODE, SHOP_SETTINGS_SHOW_CATEGORY_IMAGES, SHOP_SETTING_REGISTRATION_MODE, SHOP_SETTING_REGISTRATION_MODE_EXTENDED, SHOP_SETTING_LOAD_WISHLIST_ON_APP_START_ENABLED, SHOP_SETTING_WISHLIST_ITEM_QUANTITY_ENABLED, SHOP_SETTING_WISHLIST_ITEM_NOTES_ENABLED, SHOP_SETTING_SHOW_WISHLIST_ITEMS_COUNT_BADGE, SHOP_SETTING_ENABLE_CMS_2_FOR_ALL_SHOPPERS } from "../constants/shopSettings";

package/core/streams/app.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gets triggered when the app is supposed to be reloaded
+ * @type {Observable}
+ */
+export const reloadApp$: Observable<any>;
+import { Observable } from 'rxjs/Observable';
+//# sourceMappingURL=app.d.ts.map

package/core/streams/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../core/streams/app.js"],"names":[],"mappings":"AASA;;;GAGG;AACH,yCAsBK;2BAnCsB,iBAAiB"}

package/core/streams/appPermissions.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Gets triggered when a permission status was received from the app.
+ * @type {Observable}
+ */
+export const appPermissionStatusReceived$: Observable;
+/**
+ * Gets triggered when a push permission status was received from the app.
+ * @type {Observable}
+ */
+export const appPermissionStatusPushReceived$: Observable;
+/**
+ * Gets triggered when a camera permission status was received from the app.
+ * @type {Observable}
+ */
+export const appPermissionStatusCameraReceived$: Observable;
+/**
+ * Gets triggered when a location permission status was received from the app.
+ * @type {Observable}
+ */
+export const appPermissionStatusLocationReceived$: Observable;
+/**
+ * Gets triggered when a phone permission status was received from the app.
+ * @type {Observable}
+ */
+export const appPermissionStatusPhoneReceived$: Observable;
+/**
+ * Gets triggered when a backgroundAppRefresh permission status was received from the app.
+ * @type {Observable}
+ */
+export const appPermissionStatusBackgroundAppRefreshReceived$: Observable;
+//# sourceMappingURL=appPermissions.d.ts.map

package/core/streams/appPermissions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appPermissions.d.ts","sourceRoot":"","sources":["../../../core/streams/appPermissions.js"],"names":[],"mappings":"AAUA;;;GAGG;AACH,2CAFU,UAAU,CAGsD;AAE1E;;;GAGG;AACH,+CAFU,UAAU,CAGkD;AAEtE;;;GAGG;AACH,iDAFU,UAAU,CAGoD;AAExE;;;GAGG;AACH,mDAFU,UAAU,CAGsD;AAE1E;;;GAGG;AACH,gDAFU,UAAU,CAGmD;AAEvE;;;GAGG;AACH,+DAFU,UAAU,CAGoE"}

package/core/streams/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./app";
+export * from "./appPermissions";
+export * from "./optIns";
+export * from "@shopgate/pwa-common/streams/main";
+export * from "@shopgate/pwa-common/streams/error";
+export * from "@shopgate/pwa-common/streams/view";
+export * from "@shopgate/pwa-common/streams/app";
+export * from "@shopgate/pwa-common/streams/client";
+export * from "@shopgate/pwa-common/streams/router";
+//# sourceMappingURL=index.d.ts.map

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

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

package/core/streams/optIns.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Gets triggered when a SOFT_OPT_IN_SHOWN action was dispatched
+ * @type {Observable}
+ */
+export const softOptInShown$: Observable;
+/**
+ * Gets triggered when a SOFT_OPT_IN_SELECTED action was dispatched
+ * @type {Observable}
+ */
+export const softOptInSelected$: Observable;
+/**
+ * Gets triggered when a HARD_OPT_IN_SHOWN action was dispatched
+ * @type {Observable}
+ */
+export const hardOptInShown$: Observable;
+/**
+ * Gets triggered when a HARD_OPT_IN_SELECTED action was dispatched
+ * @type {Observable}
+ */
+export const hardOptInSelected$: Observable;
+//# sourceMappingURL=optIns.d.ts.map

package/core/streams/optIns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"optIns.d.ts","sourceRoot":"","sources":["../../../core/streams/optIns.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH,8BAFU,UAAU,CAGyC;AAE7D;;;GAGG;AACH,iCAFU,UAAU,CAG4C;AAEhE;;;GAGG;AACH,8BAFU,UAAU,CAGyC;AAE7D;;;GAGG;AACH,iCAFU,UAAU,CAG4C"}

package/core/validation/index.d.ts

@@ -0,0 +1,3 @@
+export { validate } from "./validation";
+export { useValidation } from "./validation.hooks";
+//# sourceMappingURL=index.d.ts.map

package/core/validation/index.d.ts.map

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

package/core/validation/validation.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @param {Object} values The values to validate.
+ * @param {Object} constraints The constraints.
+ * @returns {{ valid: boolean, validationErrors: Object }}
+ */
+export function validate(values: Object, constraints: Object): {
+    valid: boolean;
+    validationErrors: Object;
+};
+//# sourceMappingURL=validation.d.ts.map

package/core/validation/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../core/validation/validation.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,iCAJW,MAAM,eACN,MAAM,GACJ;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAoCxD"}

package/core/validation/validation.hooks.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @param {Object} constraints The rules.
+ * @returns {{ valid: ?boolean, validationErrors: ?Object, validate: Function }}
+ */
+export function useValidation(constraints: Object): {
+    valid: boolean | null;
+    validationErrors: Object | null;
+    validate: Function;
+};
+//# sourceMappingURL=validation.hooks.d.ts.map

package/core/validation/validation.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.hooks.d.ts","sourceRoot":"","sources":["../../../core/validation/validation.hooks.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH,2CAHW,MAAM,GACJ;IAAE,KAAK,EAAG,OAAO,OAAA,CAAC;IAAC,gBAAgB,EAAG,MAAM,OAAA,CAAC;IAAC,QAAQ,WAAU;CAAE,CAgC9E"}

package/development/components/DevelopmentTools/hooks.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { useEffect, useCallback } from 'react';
 
 /**

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const classes = {
-  container: css({
+const useStyles = makeStyles()({
+  container: {
     position: 'fixed',
     bottom: 0,
     display: 'flex',
@@ -15,19 +14,19 @@ const classes = {
     zIndex: 10000000,
     pointerEvents: 'auto',
     transition: 'background 0.2s ease'
-  }),
-  containerHighlight: css({
+  },
+  containerHighlight: {
     background: 'rgba(255, 0, 0, 0.7)'
-  }),
-  handle: css({
+  },
+  handle: {
     width: 120,
     height: 3,
     borderRadius: 3,
     background: 'rgba(0, 0, 0, 0.4)',
     border: '1px solid rgba(255, 255, 255, 0.5)',
     boxSizing: 'content-box'
-  })
-};
+  }
+});
 
 /**
  * Renders a simulated iOS bottom inset in development.
@@ -41,9 +40,13 @@ const SimulatedInsetBottom = ({
   onClick,
   ...props
 }) => {
-  const containerClasses = useMemo(() => classNames(classes.container, {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const containerClasses = useMemo(() => cx(classes.container, {
     [classes.containerHighlight]: highlightInset
-  }), [highlightInset]);
+  }), [highlightInset, classes.container, classes.containerHighlight, cx]);
   return /*#__PURE__*/_jsx("div", {
     "aria-hidden": true,
     role: "presentation",

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -1,12 +1,11 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useSelector } from 'react-redux';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getStatusBarStyleStorage } from '@shopgate/engage/development/selectors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const classes = {
-  container: css({
+const useStyles = makeStyles()({
+  container: {
     position: 'fixed',
     top: 0,
     display: 'flex',
@@ -18,33 +17,33 @@ const classes = {
     pointerEvents: 'auto',
     transition: 'background 0.2s ease',
     fontSize: '16px'
-  }),
-  containerHighlight: css({
+  },
+  containerHighlight: {
     background: 'rgba(255, 0, 0, 0.7)'
-  }),
-  styleLight: css({
+  },
+  styleLight: {
     color: 'white'
-  }),
-  styleDark: css({
+  },
+  styleDark: {
     color: 'black'
-  }),
-  styleNone: css({
+  },
+  styleNone: {
     color: 'transparent'
-  }),
-  info: css({
+  },
+  info: {
     flex: 1,
     textAlign: 'center',
     fontWeight: 500
-  }),
-  notch: css({
+  },
+  notch: {
     flex: 1,
     background: 'black',
     height: 'calc(var(--safe-area-inset-top) - 16px)',
     maxWidth: 150,
     borderRadius: 16,
     border: '1px solid rgba(255, 255, 255, 0.5)'
-  })
-};
+  }
+});
 
 /**
  * Creates a human readable time string to mimic the iOS clock.
@@ -70,6 +69,10 @@ const SimulatedInsetTop = ({
   onClick,
   ...props
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   // State to hold the current time string for the status bar
   const [time, setTime] = useState(getTime());
 
@@ -83,16 +86,16 @@ const SimulatedInsetTop = ({
   const {
     statusBarStyle
   } = useSelector(getStatusBarStyleStorage);
-  const containerClasses = useMemo(() => classNames(classes.container, {
+  const containerClasses = useMemo(() => cx(classes.container, {
     [classes.containerHighlight]: highlightInset,
     [classes.styleDark]: statusBarStyle === 'dark',
     [classes.styleLight]: statusBarStyle === 'light',
     [classes.styleNone]: statusBarStyle === 'none'
-  }), [highlightInset, statusBarStyle]);
+  }), [highlightInset, statusBarStyle, classes, cx]);
   return /*#__PURE__*/_jsxs("div", {
     "aria-hidden": true,
     role: "presentation",
-    className: classNames(containerClasses),
+    className: containerClasses,
     ...props,
     onClick: onClick,
     children: [/*#__PURE__*/_jsx("div", {

package/favorites/components/CommentDialog/CommentDialog.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=CommentDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentDialog.d.ts","sourceRoot":"","sources":["../../../../favorites/components/CommentDialog/CommentDialog.jsx"],"names":[],"mappings":";;kBAEO,OAAO"}

package/favorites/components/CommentDialog/CommentDialog.js

@@ -1,15 +1,15 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getCommentDialogSettings } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import { i18n, usePrevious } from '@shopgate/engage/core';
-import { Dialog, TextField } from '@shopgate/engage/components';
+import { Dialog, TextField, I18n } from '@shopgate/engage/components';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y';
 import { closeFavoritesCommentDialog } from '@shopgate/pwa-common-commerce/favorites/action-creators';
 import { themeName } from '@shopgate/pwa-common/helpers/config';
 import { updateFavorite } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
-import I18n from '@shopgate/pwa-common/components/I18n';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isIos = themeName.includes('ios');
 
@@ -31,22 +31,22 @@ const mapDispatchToProps = dispatch => ({
     dispatch(updateFavorite(productId, listId, quantity, notes));
   }
 });
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     display: 'flex',
     flexDirection: 'column'
-  }),
-  input: css({
+  },
+  input: {
     textAlign: 'left',
     fontSize: '1rem'
-  }).toString(),
-  characterCount: css({
+  },
+  characterCount: {
     textAlign: 'right',
     marginTop: -16,
     fontSize: '0.875rem',
     color: 'var(--color-text-medium-emphasis)'
-  }).toString()
-};
+  }
+});
 const MAX_CHARACTER_COUNT = 250;
 
 /**
@@ -58,6 +58,9 @@ const CommentDialog = ({
   close,
   updateFavoriteItem
 }) => {
+  const {
+    classes
+  } = useStyles();
   const isVisible = !!settings;
   const {
     productId,
@@ -121,7 +124,7 @@ const CommentDialog = ({
       confirm: i18n.text('favorites.comment_modal.confirm')
     },
     children: /*#__PURE__*/_jsxs("div", {
-      className: styles.root,
+      className: classes.root,
       children: [/*#__PURE__*/_jsx(TextField, {
         name: "name",
         ...(isIos ? {
@@ -131,12 +134,12 @@ const CommentDialog = ({
         }),
         onChange: handleChange,
         value: value,
-        className: styles.input,
+        className: classes.input,
         attributes: attributes,
         multiLine: true,
         tabIndex: 0
       }), /*#__PURE__*/_jsx(I18n.Text, {
-        className: styles.characterCount,
+        className: classes.characterCount,
         string: "favorites.comment_modal.characterCount",
         "aria-hidden": true,
         params: {

package/favorites/components/CommentDialog/index.d.ts

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

package/favorites/components/CommentDialog/index.d.ts.map

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