@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/core/hocs/withRoute.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { RouteContext } from '@shopgate/pwa-common/context';
 
@@ -8,6 +7,7 @@ import { RouteContext } from '@shopgate/pwa-common/context';
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = (context, prop) => {
   if (!prop) {
     return context;
@@ -32,7 +32,12 @@ export function withRoute(WrappedComponent, options = {}) {
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithRoute = props => /*#__PURE__*/React.createElement(RouteContext.Consumer, null, routeContext => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, getInjectedProps(routeContext, options.prop), props)));
+  const WithRoute = props => /*#__PURE__*/_jsx(RouteContext.Consumer, {
+    children: routeContext => /*#__PURE__*/_jsx(WrappedComponent, {
+      ...getInjectedProps(routeContext, options.prop),
+      ...props
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithRoute.displayName = `WithRoute(${displayName})`;
   return WithRoute;

package/core/hocs/withTheme.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ThemeContext } from '@shopgate/pwa-common/context';
 
@@ -8,6 +7,7 @@ import { ThemeContext } from '@shopgate/pwa-common/context';
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = (context, prop) => {
   if (!prop) {
     return context;
@@ -71,13 +71,18 @@ export function withTheme(WrappedComponent, options = {}) {
    * @param {Object} props The component props.
    * @returns {JSX.Element}
    */
-  const WithTheme = props => /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, ({
-    contexts,
-    ...themeContext
-  }) =>
-  /*#__PURE__*/
-  // The contexts are left out in favor of other HOCs.
-  React.createElement(WrappedComponent, _extends({}, getInjectedProps(themeContext, options.prop), props)));
+  const WithTheme = props => /*#__PURE__*/_jsx(ThemeContext.Consumer, {
+    children: ({
+      contexts,
+      ...themeContext
+    }) =>
+    /*#__PURE__*/
+    // The contexts are left out in favor of other HOCs.
+    _jsx(WrappedComponent, {
+      ...getInjectedProps(themeContext, options.prop),
+      ...props
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithTheme.displayName = `WithTheme(${displayName})`;
   return WithTheme;

package/core/hocs/withThemeResources.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useThemeResources, useThemeComponents, useThemeWidgets } from '@shopgate/engage/core/hooks';
 
@@ -8,11 +7,13 @@ import { useThemeResources, useThemeComponents, useThemeWidgets } from '@shopgat
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
  * @returns {React.FC<any>}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const withThemeResources = WrappedComponent => function ThemeResourcesWrapper(props) {
   const themeResources = useThemeResources();
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
+    ...props,
     themeResources: themeResources
-  }));
+  });
 };
 
 /**
@@ -23,9 +24,10 @@ export const withThemeResources = WrappedComponent => function ThemeResourcesWra
  */
 export const withThemeComponents = WrappedComponent => function ThemeResourcesWrapper(props) {
   const themeComponents = useThemeComponents();
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
+    ...props,
     themeComponents: themeComponents
-  }));
+  });
 };
 
 /**
@@ -42,7 +44,8 @@ export const withThemeWidgets = (WrappedComponent, options = {}) => function The
     version = 'v1'
   } = options;
   const themeWidgets = useThemeWidgets(version);
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
+    ...props,
     themeWidgets: themeWidgets
-  }));
+  });
 };

package/core/hocs/withWidgetSettings.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useWidgetSettings } from "../hooks/useWidgetSettings";
 
@@ -11,6 +10,7 @@ import { useWidgetSettings } from "../hooks/useWidgetSettings";
  * @param {number|undefined} [index] The optional index of the widget.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function withWidgetSettings(WrappedComponent, widgetId, index) {
   /**
    * The actual HOC.
@@ -19,9 +19,10 @@ export function withWidgetSettings(WrappedComponent, widgetId, index) {
    */
   const WithWidgetSettings = props => {
     const settings = useWidgetSettings(widgetId, index);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-      widgetSettings: settings
-    }, props));
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      widgetSettings: settings,
+      ...props
+    });
   };
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithWidgetSettings.displayName = `WithWidgetSettings(${displayName})`;

package/core/hocs/withWidgetStyles.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useWidgetStyles } from "../hooks/useWidgetStyles";
 
@@ -9,6 +8,7 @@ import { useWidgetStyles } from "../hooks/useWidgetStyles";
  * @param {number|undefined} [index] The optional index of the widget.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function withWidgetStyles(WrappedComponent, widgetId, index) {
   /**
    * The actual HOC.
@@ -17,9 +17,10 @@ export function withWidgetStyles(WrappedComponent, widgetId, index) {
    */
   const WithWidgetStyles = props => {
     const styles = useWidgetStyles(widgetId, index);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-      widgetStyles: styles
-    }, props));
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      widgetStyles: styles,
+      ...props
+    });
   };
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithWidgetStyles.displayName = `WithWidgetStyles(${displayName})`;

package/core/hooks/events/appEvents.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Additional options for app event hooks.
+ */
+export interface AppEventOptions {
+  /**
+   * When false, no listener is registered.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * When true, the callback is removed after first call.
+   * @default false
+   */
+  once?: boolean;
+}
+
+/**
+ * Extended options for return-from-background hook.
+ */
+export interface ReturnFromBackgroundOptions extends AppEventOptions {
+  /**
+   * If true, requires a new background event to re-arm before firing again.
+   * If false, remains armed until disabled or unmounted.
+   * @default true
+   */
+  resetAfterFire?: boolean;
+}
+
+/**
+ * Registers a callback for a given event from the Shopgate app event bus.
+ *
+ * Automatically unsubscribes on unmount. Can optionally run only once.
+ *
+ * @param name The event name to subscribe to.
+ * @param callback The function to call when the event fires.
+ * @param options Additional options.
+ */
+export declare function useAppEvent(
+  name: string,
+  callback: () => void,
+  options?: AppEventOptions
+): void;
+
+/**
+ * Registers a callback that fires when the app will enter foreground.
+ *
+ * Automatically unsubscribes on unmount.
+ *
+ * @param callback The callback to run when entering foreground.
+ * @param options Additional options.
+ */
+export declare function useAppEventOnEnterForeground(
+  callback: () => void,
+  options?: AppEventOptions
+): void;
+
+/**
+ * Registers a callback that fires when the app did enter background.
+ *
+ * Automatically unsubscribes on unmount.
+ *
+ * @param callback The callback to run when entering background.
+ * @param options Additional options.
+ */
+export declare function useAppEventOnDidEnterBackground(
+  callback: () => void,
+  options?: AppEventOptions
+): void;
+
+/**
+ * Invokes a callback only after the app was first sent to background and then
+ * returns to the foreground — i.e. a complete background → foreground cycle.
+ *
+ * Common use case: user leaves the app to open system settings and returns, so you
+ * can re-check permissions or refresh data.
+ *
+ * @param callback The callback to run after returning from background.
+ * @param options Additional options.
+ */
+export declare function useAppEventOnReturnFromBackground(
+  callback: () => void,
+  options?: ReturnFromBackgroundOptions
+): void;

package/core/hooks/events/appEvents.js

@@ -0,0 +1,125 @@
+import { useEffect, useRef } from 'react';
+import { APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND } from '@shopgate/engage/core/constants';
+import { event } from '@shopgate/engage/core/classes';
+
+/**
+ * Returns a stable reference to the given callback, preserving the same function identity
+ * across renders, while still always calling the latest version of the callback.
+ *
+ * Useful when passing callbacks into event listeners or effects so they don't re-subscribe
+ * on every render but still access up-to-date props/state.
+ *
+ * @param {Function} fn The callback function whose latest version should be retained.
+ * @returns {Function} A stable function reference that always invokes the latest callback.
+ */
+function useStableCallback(fn) {
+  const ref = useRef(fn);
+  ref.current = fn;
+  const stable = useRef((...args) => ref.current?.(...args));
+  return stable.current;
+}
+/**
+ * Registers a callback for a given event from the Shopgate app event bus.
+ *
+ * Automatically unsubscribes on unmount. Can optionally run only once.
+ *
+ * @param {string} name The event name to subscribe to.
+ * @param {Function} callback The function to call when the event fires.
+ * @param {Object} [options] Additional options.
+ * @param {boolean} [options.enabled=true] When false, no listener is registered.
+ * @param {boolean} [options.once=false] When true, the callback is removed after first call.
+ */
+export function useAppEvent(name, callback, options = {}) {
+  const {
+    enabled = true,
+    once = false
+  } = options;
+  const latest = useStableCallback(callback);
+  useEffect(() => {
+    if (!enabled) return undefined;
+    // eslint-disable-next-line require-jsdoc
+    const handler = () => {
+      latest();
+      if (once) event.removeCallback(name, handler);
+    };
+    event.addCallback(name, handler);
+    return () => event.removeCallback(name, handler);
+  }, [name, enabled, once, latest]);
+}
+
+/**
+ * Registers a callback that fires when the app will enter foreground
+ * (`applicationWillEnterForeground`).
+ *
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
+ *
+ * @param {Function} callback The callback to run when entering foreground.
+ * @param {Object} [options] Additional options.
+ * @param {boolean} [options.enabled=true] When false, the listener is not registered.
+ * @param {boolean} [options.once=false] Remove after first call.
+ */
+export function useAppEventOnEnterForeground(callback, options) {
+  useAppEvent(APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, callback, options);
+}
+
+/**
+ * Registers a callback that fires when the app did enter background
+ * (`applicationDidEnterBackground`).
+ ** Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
+ *
+ * @param {Function} callback The callback to run when entering background.
+ * @param {Object} [options] Additional options.
+ * @param {boolean} [options.enabled=true] When false, the listener is not registered.
+ * @param {boolean} [options.once=false] Remove after first call.
+ */
+export function useAppEventOnDidEnterBackground(callback, options) {
+  useAppEvent(APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND, callback, options);
+}
+
+/**
+ * Invokes a callback only after the app was first sent to background and then
+ * returns to the foreground — i.e. a complete background → foreground cycle.
+ *
+ * Common use case: user leaves the app to open system settings and returns, so you
+ * can re-check permissions or refresh data.
+ *
+ * Internally, this subscribes to both background and foreground events:
+ * - Arms itself when entering background
+ * - Fires on next foreground if armed
+ *
+ * @param {Function} callback The callback to run after returning from background.
+ * @param {Object} [options] Additional options.
+ * @param {boolean} [options.enabled=true] When false, no listener behavior is active.
+ * @param {boolean} [options.once=false] When true, callback fires only for the first cycle.
+ * @param {boolean} [options.resetAfterFire=true]
+ *        If true, requires a new background event to re-arm before firing again.
+ *        If false, remains armed until disabled or unmounted.
+ */
+export function useAppEventOnReturnFromBackground(callback, options = {}) {
+  const {
+    enabled = true,
+    once = false,
+    resetAfterFire = true
+  } = options;
+  const armedRef = useRef(false);
+  const firedOnceRef = useRef(false);
+  const latest = useStableCallback(callback);
+  useAppEventOnDidEnterBackground(() => {
+    if (!enabled) return;
+    if (once && firedOnceRef.current) return;
+    armedRef.current = true;
+  }, {
+    enabled
+  });
+  useAppEventOnEnterForeground(() => {
+    if (!enabled) return;
+    if (once && firedOnceRef.current) return;
+    if (armedRef.current) {
+      latest();
+      if (once) firedOnceRef.current = true;
+      if (resetAfterFire) armedRef.current = false;
+    }
+  }, {
+    enabled
+  });
+}

package/core/hooks/events/index.js

@@ -1,3 +1,4 @@
+export * from "./appEvents";
 export { default as usePressHandler } from "./usePressHandler";
 export { default as useLongPress } from "./useLongPress";
 export { default as useScrollDirectionChange } from "./useScrollDirectionChange";

package/core/hooks/index.js

@@ -14,4 +14,5 @@ export { useWidgetStyles } from "./useWidgetStyles";
 export { useThemeResources, useThemeComponents, useThemeWidgets } from "./useThemeResources";
 export * from "./html";
 export { usePrevious } from "./usePrevious";
+export { default as useLocalStorage } from "./useLocalStorage";
 export { useResponsiveValue } from '@shopgate/engage/components/ResponsiveContainer/hooks';

package/core/hooks/useLocalStorage.d.ts

@@ -0,0 +1,8 @@
+  /**
+   * Custom hook to manage and persist state in localStorage.
+   * @param key The key under which the value is stored in localStorage.
+   * @returns A tuple containing the stored value and a function to update it.
+   */
+  export default function useLocalStorage<T = any>(
+    key: string
+  ): [T | null, (value: T) => void];

package/core/hooks/useLocalStorage.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react';
+import { appConfig } from '@shopgate/engage';
+const {
+  appId
+} = appConfig;
+
+/**
+ * Custom hook to manage and persist state in localStorage.
+ * @param {string} key The key under which the value is stored in localStorage.
+ * @returns {[any, Function]} A tuple containing the stored value and a function to update it.
+ */
+export default function useLocalStorage(key) {
+  const readValue = useCallback(() => {
+    try {
+      return JSON.parse(window.localStorage.getItem(`${appId}_${key}`));
+    } catch (error) {
+      return null;
+    }
+  }, [key]);
+  const [storedValue, setStoredValue] = useState(readValue);
+
+  /**
+   * Sets a new value both in state and in localStorage.
+   * @param {any} value The new value to store.
+   */
+  const setValue = useCallback(value => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(`${appId}_${key}`, JSON.stringify(value));
+    } catch (error) {
+      //
+    }
+  }, [key]);
+  useEffect(() => {
+    setValue(readValue());
+  }, [readValue, setValue]);
+  return [storedValue, setValue];
+}

package/core/providers/AppProvider.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import appConfig from '@shopgate/pwa-common/helpers/config';
@@ -8,35 +10,40 @@ import AppContext from "../contexts/AppContext";
 /**
  * The AppProvider component.
  */
-class AppProvider extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function AppProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Sets the isVisible state to TRUE.
      */
-    this.setVisible = () => {
-      this.setIsVisible(true);
+    _this.setVisible = () => {
+      _this.setIsVisible(true);
     };
     /**
      * Sets the isVisible state to TRUE.
      */
-    this.setHidden = () => {
-      this.setIsVisible(false);
+    _this.setHidden = () => {
+      _this.setIsVisible(false);
     };
-    this.state = {
+    _this.state = {
       isVisible: true
     };
-    event.addCallback(APP_EVENT_VIEW_WILL_APPEAR, this.setVisible);
-    event.addCallback(APP_EVENT_VIEW_WILL_DISAPPEAR, this.setHidden);
+    event.addCallback(APP_EVENT_VIEW_WILL_APPEAR, _this.setVisible);
+    event.addCallback(APP_EVENT_VIEW_WILL_DISAPPEAR, _this.setHidden);
+    return _this;
   }
 
   /**
    * Removes the event listeners when the component unmounts.
    */
-  componentWillUnmount() {
+  _inheritsLoose(AppProvider, _Component);
+  var _proto = AppProvider.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     event.removeCallback(APP_EVENT_VIEW_WILL_APPEAR, this.setVisible);
     event.removeCallback(APP_EVENT_VIEW_WILL_DISAPPEAR, this.setHidden);
   }
@@ -44,20 +51,13 @@ class AppProvider extends Component {
   /**
    * Returns the context value to be passed to consumers.
    * @returns {Object}
-   */
-  get provided() {
-    return {
-      appConfig,
-      isVisible: this.state.isVisible,
-      setIsVisible: this.setIsVisible
-    };
-  }
+   */;
   /**
    * Sets the isVisible state. It indicates if Engage is visible,
    * or another WebView is presented to the user.
    * @param {boolean} value The new value
    */
-  setIsVisible(value) {
+  _proto.setIsVisible = function setIsVisible(value) {
     this.setState({
       isVisible: value
     });
@@ -65,11 +65,22 @@ class AppProvider extends Component {
 
   /**
    * @returns {JSX}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement(AppContext.Provider, {
-      value: this.provided
-    }, this.props.children);
-  }
-}
+   */;
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(AppContext.Provider, {
+      value: this.provided,
+      children: this.props.children
+    });
+  };
+  return _createClass(AppProvider, [{
+    key: "provided",
+    get: function () {
+      return {
+        appConfig,
+        isVisible: this.state.isVisible,
+        setIsVisible: this.setIsVisible
+      };
+    }
+  }]);
+}(Component);
 export default AppProvider;

package/core/providers/ThemeResourcesProvider.js

@@ -26,6 +26,7 @@ import { ThemeResourcesContext } from "../contexts";
  * @param {React.ReactNode} props.children The component children.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ThemeResourcesProvider = ({
   widgets,
   components,
@@ -36,11 +37,13 @@ const ThemeResourcesProvider = ({
     widgets,
     components
   }), [components, widgets]);
-  return /*#__PURE__*/React.createElement(ThemeResourcesContext.Provider, {
-    value: value
-  }, legacyThemeAPI ? /*#__PURE__*/React.createElement(LegacyThemeContext.Provider, {
-    value: legacyThemeAPI
-  }, children) : children);
+  return /*#__PURE__*/_jsx(ThemeResourcesContext.Provider, {
+    value: value,
+    children: legacyThemeAPI ? /*#__PURE__*/_jsx(LegacyThemeContext.Provider, {
+      value: legacyThemeAPI,
+      children: children
+    }) : children
+  });
 };
 ThemeResourcesProvider.defaultProps = {
   legacyThemeAPI: null

package/development/components/ClientInformation/ClientInformation.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useLongPress } from '@shopgate/engage/core/hooks';
 import { getClientInformation } from '@shopgate/engage/core/selectors';
 import DevelopmentSettings from "../DevelopmentSettings";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     position: 'relative',
@@ -56,17 +56,22 @@ const ClientInformation = () => {
   if (!codebaseVersion) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx('ui-shared__client-information', classes.root)
-  }, longPressAttrs, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("p", {
-    className: classes.unselectable
-  }, `App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/React.createElement("br", null), `Lib Version: ${libVersion}`), deviceIdVisible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: classes.deviceId
-  }, `Device ID: ${deviceId ?? ''}`), /*#__PURE__*/React.createElement(DevelopmentSettings, {
-    isOpen: developmentSettingsVisible,
-    onClose: () => setDevelopmentSettingsVisible(false)
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx('ui-shared__client-information', classes.root),
+    ...longPressAttrs,
+    "aria-hidden": true,
+    children: [/*#__PURE__*/_jsxs("p", {
+      className: classes.unselectable,
+      children: [`App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/_jsx("br", {}), `Lib Version: ${libVersion}`]
+    }), deviceIdVisible && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: classes.deviceId,
+        children: `Device ID: ${deviceId ?? ''}`
+      }), /*#__PURE__*/_jsx(DevelopmentSettings, {
+        isOpen: developmentSettingsVisible,
+        onClose: () => setDevelopmentSettingsVisible(false)
+      })]
+    })]
+  });
 };
 export default ClientInformation;

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -6,6 +6,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { getEnabledCMSVersion, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
 import { getIsCMS2PreviewEnabled } from "../../selectors";
 import { toggleCms2Preview } from "../../action-creators";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     padding: theme.spacing(2, 2, 4),
@@ -41,21 +42,24 @@ const DevelopmentSettings = ({
   if (enableCms2ForAllShoppers || enabledCMSVersion === 'v1') {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SheetDrawer, {
+  return /*#__PURE__*/_jsx(SheetDrawer, {
     title: " ",
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.container
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: classes.button,
-    type: "simple",
-    onClick: () => {
-      onClose();
-      setTimeout(() => {
-        dispatch(toggleCms2Preview(!isCMS2PreviewEnabled));
-      }, 300);
-    }
-  }, `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`)));
+    onClose: onClose,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.container,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        className: classes.button,
+        type: "simple",
+        onClick: () => {
+          onClose();
+          setTimeout(() => {
+            dispatch(toggleCms2Preview(!isCMS2PreviewEnabled));
+          }, 300);
+        },
+        children: `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`
+      })
+    })
+  });
 };
 export default DevelopmentSettings;