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

package/development/action-creators/settings.js

@@ -1,31 +1,42 @@
-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";
 
 /**
  * Toggles the simulation of iOS safe area insets.
- * @param {boolean} visible Whether the insets should be visible or not.
- * @returns {Object} The action object.
+ * @param visible Whether the insets should be visible or not.
+ * @returns The action object.
  */
 export const toggleInsets = (visible = true) => ({
   type: DEVELOPMENT_TOOLS_TOGGLE_INSETS,
   visible
 });
-
 /**
  * Toggles the highlighting of the simulated iOS safe area insets.
- * @param {boolean} visible Whether the insets should be visible or not.
- * @returns {Object} The action object.
+ * @param visible Whether the insets should be visible or not.
+ * @returns The action object.
  */
 export const toggleInsetHighlight = (visible = true) => ({
   type: DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT,
   visible
 });
-
 /**
  * Toggles the CMS 2.0 preview mode.
- * @param {boolean} enabled Whether the CMS 2.0 preview should be enabled or not.
- * @returns {Object} The action object.
+ * @param enabled Whether the CMS 2.0 preview should be enabled or not.
+ * @returns The action object.
  */
 export const toggleCms2Preview = (enabled = true) => ({
   type: DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW,
   enabled
-});
+});
+/**
+ * Toggles whether a color scheme can be selected without the app settings allowing it.
+ * @param enabled Whether the selection should be enabled or not.
+ * @returns The action object.
+ */
+export const toggleColorSchemeSelection = (enabled = true) => ({
+  type: DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION,
+  enabled
+});
+
+/**
+ * Every action the development settings reducer handles.
+ */

package/development/action-creators/storage.d.ts

@@ -0,0 +1,17 @@
+import type { StatusBarStyle } from '../types';
+/**
+ * Updates the status bar style storage where latest payload from the updateNavigationBarStyle
+ * app event is stored.
+ * @param style The event payload.
+ * @returns The action object.
+ */
+export declare const updateStatusBarStyleStorage: (style?: StatusBarStyle) => {
+    readonly type: "DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE";
+    readonly style: StatusBarStyle;
+};
+export type UpdateStatusBarStyleStorageAction = ReturnType<typeof updateStatusBarStyleStorage>;
+/**
+ * Every action the development storage reducer handles.
+ */
+export type DevelopmentStorageAction = UpdateStatusBarStyleStorageAction;
+//# sourceMappingURL=storage.d.ts.map

package/development/action-creators/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../development/action-creators/storage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,GAAI,QAAO,cAAmB;;;CAG3D,CAAC;AAEZ,MAAM,MAAM,iCAAiC,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,iCAAiC,CAAC"}

package/development/action-creators/storage.js

@@ -1,12 +1,15 @@
 import { DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE } from "../constants";
-
 /**
  * Updates the status bar style storage where latest payload from the updateNavigationBarStyle
  * app event is stored.
- * @param {boolean} style The event payload
- * @returns {Object} The action object.
+ * @param style The event payload.
+ * @returns The action object.
  */
 export const updateStatusBarStyleStorage = (style = {}) => ({
   type: DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE,
   style
-});
+});
+
+/**
+ * Every action the development storage reducer handles.
+ */

package/development/components/ClientInformation/ClientInformation.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders the client information, and reveals the development settings on a long press.
+ */
+declare const ClientInformation: () => import("react").JSX.Element | null;
+export default ClientInformation;
+//# sourceMappingURL=ClientInformation.d.ts.map

package/development/components/ClientInformation/ClientInformation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientInformation.d.ts","sourceRoot":"","sources":["../../../../development/components/ClientInformation/ClientInformation.tsx"],"names":[],"mappings":"AAsCA;;GAEG;AACH,QAAA,MAAM,iBAAiB,0CAoDtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/development/components/ClientInformation/ClientInformation.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { Typography } from '@shopgate/engage/components';
@@ -27,8 +27,11 @@ const useStyles = makeStyles()(theme => ({
 }));
 
 /**
- * @param {Object} props The component props.
- * @returns {JSX.Element}
+ * The client information the app reports about itself.
+ */
+
+/**
+ * Renders the client information, and reveals the development settings on a long press.
  */
 const ClientInformation = () => {
   const {
@@ -38,7 +41,7 @@ const ClientInformation = () => {
   const [deviceIdVisible, setDeviceIdVisible] = useState(false);
   const [developmentSettingsVisible, setDevelopmentSettingsVisible] = useState(false);
 
-  // Press handler to show the device ID
+  // Press handler to show the device ID.
   const longPressAttrs = useLongPress(() => {
     if (!deviceIdVisible) {
       setDeviceIdVisible(true);

package/development/components/ClientInformation/actions.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Enable debug logging.
+ * @returns A redux thunk.
+ */
+export declare const enableDebugLogging: () => () => void;
+//# sourceMappingURL=actions.d.ts.map

package/development/components/ClientInformation/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../development/components/ClientInformation/actions.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,kBAG9B,CAAC"}

package/development/components/ClientInformation/actions.js

@@ -3,7 +3,7 @@ import { setDebugLoggingEnabled } from '@shopgate/engage/core/commands';
 
 /**
  * Enable debug logging.
- * @return {Function} A redux thunk.
+ * @returns A redux thunk.
  */
 export const enableDebugLogging = () => () => {
   setDebugLoggingEnabled();

package/development/components/ClientInformation/index.d.ts

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

package/development/components/ClientInformation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../development/components/ClientInformation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts

@@ -0,0 +1,16 @@
+export interface DevelopmentSettingsProps {
+    /**
+     * Whether the drawer is open.
+     */
+    isOpen: boolean;
+    /**
+     * The function to call when the drawer should be closed.
+     */
+    onClose: () => void;
+}
+/**
+ * Development settings component.
+ */
+declare const DevelopmentSettings: ({ isOpen, onClose, }: DevelopmentSettingsProps) => import("react").JSX.Element | null;
+export default DevelopmentSettings;
+//# sourceMappingURL=DevelopmentSettings.d.ts.map

package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevelopmentSettings.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentSettings/DevelopmentSettings.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,QAAA,MAAM,mBAAmB,GAAI,sBAG1B,wBAAwB,uCA2D1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -1,30 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { SheetDrawer, RippleButton } from '@shopgate/engage/components';
+import { SheetDrawer } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getEnabledCMSVersion } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
-import { getIsCMS2PreviewEnabled } from "../../selectors";
-import { toggleCms2Preview } from "../../action-creators";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { getIsCMS2PreviewEnabled, getIsColorSchemeSelectionEnabled, getIsDev } from "../../selectors";
+import { toggleCms2Preview, toggleColorSchemeSelection } from "../../action-creators";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     padding: theme.spacing(2, 2, 4),
     display: 'flex',
-    justifyContent: 'center'
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(2)
   },
   button: {
     fontWeight: theme.typography.fontWeightRegular
   }
 }));
-
 /**
  * Development settings component.
- * @param {Object} props The component props.
- * @param {boolean} props.isOpen Whether the drawer is open.
- * @param {Function} props.onClose The function to call when the drawer should be closed.
- * @returns {JSX.Element}
  */
 const DevelopmentSettings = ({
   isOpen,
@@ -37,30 +33,47 @@ const DevelopmentSettings = ({
   const enabledCMSVersion = useSelector(getEnabledCMSVersion);
   const enableCms2ForAllShoppers = useSelector(getEnableCms2ForAllShoppers);
   const isCMS2PreviewEnabled = useSelector(getIsCMS2PreviewEnabled);
+  const isDev = useSelector(getIsDev);
+  const isColorSchemeSelectionEnabled = useSelector(getIsColorSchemeSelectionEnabled);
 
   // No need to show the preview toggle if CMS 2.0 is not available for the merchant or if it's
   // already enabled for all shoppers.
-  if (enableCms2ForAllShoppers || enabledCMSVersion === 'v1') {
+  const showCms2PreviewToggle = !enableCms2ForAllShoppers && enabledCMSVersion !== 'v1';
+  if (!showCms2PreviewToggle && !isDev) {
     return null;
   }
-  return /*#__PURE__*/_jsx(SheetDrawer, {
-    title: " ",
-    isOpen: isOpen,
-    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`
+
+  /**
+   * Closes the drawer before dispatching, so the action does not re-render behind the closing
+   * animation.
+   * @param action The action to dispatch.
+   */
+  const closeAndDispatch = action => {
+    onClose();
+    setTimeout(() => {
+      dispatch(action);
+    }, 300);
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error - SheetDrawer is not typed yet
+    _jsx(SheetDrawer, {
+      title: " ",
+      isOpen: isOpen,
+      onClose: onClose,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classes.container,
+        children: [showCms2PreviewToggle && /*#__PURE__*/_jsx(Button, {
+          className: classes.button,
+          onClick: () => closeAndDispatch(toggleCms2Preview(!isCMS2PreviewEnabled)),
+          children: `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`
+        }), isDev && /*#__PURE__*/_jsx(Button, {
+          className: classes.button,
+          onClick: () => closeAndDispatch(toggleColorSchemeSelection(!isColorSchemeSelectionEnabled)),
+          children: `${isColorSchemeSelectionEnabled ? 'Disable' : 'Enable'} Color Scheme Selection`
+        })]
       })
     })
-  });
+  );
 };
 export default DevelopmentSettings;

package/development/components/DevelopmentSettings/index.d.ts

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

package/development/components/DevelopmentSettings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentSettings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}

package/development/components/DevelopmentTools/DevelopmentTools.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface DevelopmentToolsProps {
+    /**
+     * The child components.
+     */
+    children: ReactNode;
+}
+declare const _default: import("react").MemoExoticComponent<({ children }: DevelopmentToolsProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=DevelopmentTools.d.ts.map

package/development/components/DevelopmentTools/DevelopmentTools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevelopmentTools.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentTools/DevelopmentTools.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;2EAKuC,qBAAqB;AAkB7D,wBAAsC"}

package/development/components/DevelopmentTools/DevelopmentTools.js

@@ -1,21 +1,21 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
+import { memo } from 'react';
 import { isDev } from '@shopgate/engage/core/helpers';
 import Shortcuts from "./Shortcuts";
 import SimulatedInsets from "../SimulatedInsets";
-
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Provides development tools for the app.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child components.
- * @returns {JSX.Element}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DevelopmentTools = ({
   children
 }) => {
   if (!isDev) {
-    return children;
+    // Wrapped rather than returned directly: children can be an array, which a component may not
+    // return under the React 17 types.
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Shortcuts, {}), /*#__PURE__*/_jsx(SimulatedInsets, {

package/development/components/DevelopmentTools/Shortcuts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The Shortcuts component maps shortcuts to actions in development mode.
+ */
+declare const Shortcuts: () => null;
+export default Shortcuts;
+//# sourceMappingURL=Shortcuts.d.ts.map

package/development/components/DevelopmentTools/Shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentTools/Shortcuts.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,QAAA,MAAM,SAAS,YASd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/development/components/DevelopmentTools/Shortcuts.js

@@ -5,7 +5,6 @@ import { useShortcut } from "./hooks";
 
 /**
  * The Shortcuts component maps shortcuts to actions in development mode.
- * @returns {JSX.Element}
  */
 const Shortcuts = () => {
   const dispatch = useDispatch();

package/development/components/DevelopmentTools/hooks.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook to handle a single keyboard shortcut.
+ * Supports both 'cmd' (meta) and 'ctrl' keys explicitly.
+ * @param shortcut Shortcut string using mac-style notation, e.g. 'cmd+i'.
+ * @param callback Function to call when the shortcut is triggered.
+ */
+export declare function useShortcut(shortcut: string, callback: (event: KeyboardEvent) => void): void;
+//# sourceMappingURL=hooks.d.ts.map

package/development/components/DevelopmentTools/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentTools/hooks.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,QAoCrF"}

package/development/components/DevelopmentTools/hooks.js

@@ -4,9 +4,8 @@ import { useEffect, useCallback } from 'react';
 /**
  * Hook to handle a single keyboard shortcut.
  * Supports both 'cmd' (meta) and 'ctrl' keys explicitly.
- *
- * @param {string} shortcut - Shortcut string using mac-style notation, e.g. 'cmd+i'.
- * @param {Function} callback - Function to call when the shortcut is triggered.
+ * @param shortcut Shortcut string using mac-style notation, e.g. 'cmd+i'.
+ * @param callback Function to call when the shortcut is triggered.
  */
 export function useShortcut(shortcut, callback) {
   const normalizeShortcut = useCallback(() => shortcut.toLowerCase().split('+').map(k => k.trim()).sort().join('+'), [shortcut]);

package/development/components/DevelopmentTools/index.d.ts

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

package/development/components/DevelopmentTools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}

package/development/components/SimulatedInsets/SimulatedInsetBottom.d.ts

@@ -0,0 +1,7 @@
+import type { SimulatedInsetProps } from './types';
+/**
+ * Renders a simulated iOS bottom inset in development.
+ */
+declare const SimulatedInsetBottom: ({ highlightInset, onClick, ...props }: SimulatedInsetProps) => import("react").JSX.Element;
+export default SimulatedInsetBottom;
+//# sourceMappingURL=SimulatedInsetBottom.d.ts.map

package/development/components/SimulatedInsets/SimulatedInsetBottom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatedInsetBottom.d.ts","sourceRoot":"","sources":["../../../../development/components/SimulatedInsets/SimulatedInsetBottom.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA4BnD;;GAEG;AACH,QAAA,MAAM,oBAAoB,GAAI,uCAI3B,mBAAmB,gCAiBrB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -1,5 +1,4 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -30,10 +29,6 @@ const useStyles = makeStyles()(theme => ({
 
 /**
  * Renders a simulated iOS bottom inset in development.
- * @param {Object} props The component props.
- * @param {boolean} props.highlightInset Whether the inset is highlighted.
- * @param {Function} props.onClick The function to call when the inset is clicked.
- * @returns {JSX.Element}
  */
 const SimulatedInsetBottom = ({
   highlightInset,

package/development/components/SimulatedInsets/SimulatedInsetTop.d.ts

@@ -0,0 +1,7 @@
+import type { SimulatedInsetProps } from './types';
+/**
+ * Renders a simulated iOS top inset in development.
+ */
+declare const SimulatedInsetTop: ({ highlightInset, onClick, ...props }: SimulatedInsetProps) => import("react").JSX.Element;
+export default SimulatedInsetTop;
+//# sourceMappingURL=SimulatedInsetTop.d.ts.map

package/development/components/SimulatedInsets/SimulatedInsetTop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatedInsetTop.d.ts","sourceRoot":"","sources":["../../../../development/components/SimulatedInsets/SimulatedInsetTop.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAuDnD;;GAEG;AACH,QAAA,MAAM,iBAAiB,GAAI,uCAIxB,mBAAmB,gCAuCrB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getStatusBarStyleStorage } from '@shopgate/engage/development/selectors';
@@ -47,7 +46,7 @@ const useStyles = makeStyles()(theme => ({
 
 /**
  * Creates a human readable time string to mimic the iOS clock.
- * @returns {string} The current time in a human readable format.
+ * @returns The current time in a human readable format.
  */
 const getTime = () => {
   const now = new Date();
@@ -59,10 +58,6 @@ const getTime = () => {
 
 /**
  * Renders a simulated iOS top inset in development.
- * @param {Object} props The component props.
- * @param {boolean} props.highlightInset Whether the inset is highlighted.
- * @param {Function} props.onClick The function to call when the inset is clicked.
- * @returns {JSX.Element}
  */
 const SimulatedInsetTop = ({
   highlightInset,

package/development/components/SimulatedInsets/SimulatedInsets.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface SimulatedInsetsProps {
+    /**
+     * The child components.
+     */
+    children: ReactNode;
+}
+/**
+ * Simulates iOS insets in development mode.
+ */
+declare const SimulatedInsets: ({ children }: SimulatedInsetsProps) => import("react").JSX.Element;
+export default SimulatedInsets;
+//# sourceMappingURL=SimulatedInsets.d.ts.map

package/development/components/SimulatedInsets/SimulatedInsets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatedInsets.d.ts","sourceRoot":"","sources":["../../../../development/components/SimulatedInsets/SimulatedInsets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,QAAA,MAAM,eAAe,GAAI,cAAc,oBAAoB,gCAiC1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/development/components/SimulatedInsets/SimulatedInsets.js

@@ -1,19 +1,14 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
 import { useLongPress } from '@shopgate/engage/core/hooks';
 import { getAreSimulatedInsetsInjected, getIsInsetHighlightVisible } from '@shopgate/engage/development/selectors';
 import { toggleInsetHighlight, toggleInsets } from '@shopgate/engage/development/action-creators';
 import SimulatedInsetTop from "./SimulatedInsetTop";
 import SimulatedInsetBottom from "./SimulatedInsetBottom";
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Simulates iOS insets in development mode.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child components.
- * @returns {JSX.Element}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SimulatedInsets = ({
   children
 }) => {

package/development/components/SimulatedInsets/index.d.ts

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

package/development/components/SimulatedInsets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../development/components/SimulatedInsets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/development/components/SimulatedInsets/types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * Props shared by the simulated top and bottom insets.
+ */
+export interface SimulatedInsetProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the inset is highlighted.
+     */
+    highlightInset: boolean;
+    /**
+     * The function to call when the inset is clicked.
+     */
+    onClick: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../development/components/SimulatedInsets/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/development/components/SimulatedInsets/types.js

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

package/development/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DevelopmentTools } from './DevelopmentTools';
+export { default as ClientInformation } from './ClientInformation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/development/constants/actionTypes.d.ts

@@ -0,0 +1,6 @@
+export declare const DEVELOPMENT_TOOLS_TOGGLE_INSETS = "DEVELOPMENT_TOOLS_TOGGLE_INSETS";
+export declare const DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT = "DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT";
+export declare const DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE = "DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE";
+export declare const DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW = "DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW";
+export declare const DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION = "DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION";
+//# sourceMappingURL=actionTypes.d.ts.map

package/development/constants/actionTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionTypes.d.ts","sourceRoot":"","sources":["../../../development/constants/actionTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,+BAA+B,oCAAoC,CAAC;AACjF,eAAO,MAAM,wCAAwC,6CAA6C,CAAC;AAEnG,eAAO,MAAM,iDAAiD,sDAAsD,CAAC;AAErH,eAAO,MAAM,qCAAqC,0CAA0C,CAAC;AAE7F,eAAO,MAAM,+CAA+C,oDAAoD,CAAC"}

package/development/constants/actionTypes.js

@@ -1,4 +1,5 @@
 export const DEVELOPMENT_TOOLS_TOGGLE_INSETS = 'DEVELOPMENT_TOOLS_TOGGLE_INSETS';
 export const DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT = 'DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT';
 export const DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE = 'DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE';
-export const DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW = 'DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW';
+export const DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW = 'DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW';
+export const DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION = 'DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION';

package/development/constants/index.d.ts

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

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

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

package/development/reducers/index.d.ts

@@ -0,0 +1,24 @@
+declare const _default: import("redux").Reducer<{
+    settings: import("../types").DevelopmentSettingsState;
+    storage: import("../types").DevelopmentStorageState;
+}, import("redux").UnknownAction | {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_INSETS";
+    readonly visible: boolean;
+} | {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT";
+    readonly visible: boolean;
+} | {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW";
+    readonly enabled: boolean;
+} | {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION";
+    readonly enabled: boolean;
+} | {
+    readonly type: "DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE";
+    readonly style: import("../types").StatusBarStyle;
+}, Partial<{
+    settings: import("../types").DevelopmentSettingsState | undefined;
+    storage: import("../types").DevelopmentStorageState | undefined;
+}>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,wBAGG"}