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

package/styles/theme/createTheme/types.js

@@ -7,8 +7,15 @@ const selectorTypes = ['data', 'class'];
  * dynamically based on user preference or system settings.
  */
 
+/**
+ * A single fully-resolved color-scheme theme. Identical to {@link BaseTheme} except that its
+ * `components` keep the nested `vars` level (the raw per-scheme token defaults produced by
+ * `createComponents`), whereas the flattened `BaseTheme['components']` shape is only produced for
+ * the final merged theme.
+ */
+
 /**
  * A record of themes for each color scheme. Each key is a color scheme name (e.g., 'light', 'dark'),
- * and the value is a theme object that contains e.g. the palette and typography for that color scheme.
+ * and the value is a fully-resolved color-scheme theme ({@link ColorSchemeTheme}).
  */
 export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hocs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/styles/theme/hocs/index.js

@@ -0,0 +1 @@
+export { withTheme } from "./withTheme";

package/styles/theme/hocs/withTheme.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react';
+import type { Theme } from '../createTheme';
+/**
+ * Props injected by the `withTheme` HOC.
+ */
+export interface WithThemeProps {
+    /** The active styling theme (same object returned by `useTheme()`). */
+    theme: Theme;
+}
+/**
+ * Injects the styling theme as a `theme` prop into the wrapped component.
+ *
+ * Intended for legacy class components that cannot use the `useTheme` hook.
+ * For function components, prefer the `useTheme` hook instead.
+ *
+ * @param WrappedComponent The component to inject the theme into.
+ * @returns The wrapped component with `theme` supplied automatically.
+ */
+export declare function withTheme<P extends WithThemeProps>(WrappedComponent: ComponentType<P>): ComponentType<Omit<P, keyof WithThemeProps>>;
+export default withTheme;
+//# sourceMappingURL=withTheme.d.ts.map

package/styles/theme/hocs/withTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hocs/withTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,uEAAuE;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAChD,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,GACjC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAe9C;AAED,eAAe,SAAS,CAAC"}

package/styles/theme/hocs/withTheme.js

@@ -0,0 +1,33 @@
+import useTheme from "../hooks/useTheme";
+
+/**
+ * Props injected by the `withTheme` HOC.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Injects the styling theme as a `theme` prop into the wrapped component.
+ *
+ * Intended for legacy class components that cannot use the `useTheme` hook.
+ * For function components, prefer the `useTheme` hook instead.
+ *
+ * @param WrappedComponent The component to inject the theme into.
+ * @returns The wrapped component with `theme` supplied automatically.
+ */
+export function withTheme(WrappedComponent) {
+  /**
+   * The actual HOC.
+   * @param props The component props.
+   * @returns The wrapped component with the theme injected.
+   */
+  const WithTheme = props => {
+    const theme = useTheme();
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      ...props,
+      theme: theme
+    });
+  };
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  WithTheme.displayName = `WithTheme(${displayName})`;
+  return WithTheme;
+}
+export default withTheme;

package/styles/theme/index.d.ts

@@ -2,4 +2,5 @@ export { default as ThemeProvider } from './providers/ThemeProvider';
 export { createTheme } from './createTheme';
 export type { Theme, Breakpoint, PaletteColorsWithMain } from './createTheme';
 export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, } from './hooks';
+export { withTheme, type WithThemeProps } from './hocs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC"}

package/styles/theme/index.js

@@ -1,3 +1,4 @@
 export { default as ThemeProvider } from "./providers/ThemeProvider";
 export { createTheme } from "./createTheme";
-export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme } from "./hooks";
+export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme } from "./hooks";
+export { withTheme } from "./hocs";

package/styles/theme/providers/ActiveBreakpointProvider.d.ts

@@ -4,6 +4,6 @@ export declare const ActiveBreakpointContext: React.Context<Breakpoint | undefin
 type ActiveBreakpointProviderProps = {
     children: React.ReactNode;
 };
-declare const _default: React.MemoExoticComponent<({ children }: ActiveBreakpointProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children }: ActiveBreakpointProviderProps) => React.JSX.Element>;
 export default _default;
 //# sourceMappingURL=ActiveBreakpointProvider.d.ts.map

package/styles/theme/providers/ThemeProvider.d.ts

@@ -3,11 +3,11 @@ export interface ColorSchemeContextValue {
     /**
      * The current color scheme (e.g., 'light' or 'dark')
      */
-    mode: ColorSchemeName;
+    mode: ColorSchemeName | null;
     /**
      * Function to update the color scheme
      */
-    setMode: React.Dispatch<React.SetStateAction<ColorSchemeName>>;
+    setMode: React.Dispatch<React.SetStateAction<ColorSchemeName | null>>;
 }
 export declare const ThemeContext: import("react").Context<Theme>;
 export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextValue>;
@@ -18,6 +18,6 @@ type ThemeProviderProps = {
     theme: ThemeInternal;
     children: React.ReactNode;
 };
-declare const _default: import("react").MemoExoticComponent<({ children, theme, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ children, theme, }: ThemeProviderProps) => import("react").JSX.Element>;
 export default _default;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/styles/theme/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,kDAG7B,CAAC;AAyCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAvCE,kBAAkB;AAyCrB,wBAAmC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,kDAG7B,CAAC;AAwCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtCE,kBAAkB;AAwCrB,wBAAmC"}

package/styles/theme/providers/ThemeProvider.js

@@ -30,20 +30,16 @@ const ThemeProvider = ({
     theme.setActiveColorScheme(activeColorScheme);
   }, [activeColorScheme, theme]);
   const styleSheets = useMemo(() => theme.generateStyleSheets(), [theme]);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error The input theme contains more properties than exposed to the Theme type
-    _jsxs(ColorSchemeContext.Provider, {
-      value: colorSchemeContextValue,
-      children: [IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE && /*#__PURE__*/_jsx(FrontendSettingsPreviewBridge, {}), /*#__PURE__*/_jsxs(ThemeContext.Provider, {
-        value: theme,
-        children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
-          children: children
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: styleSheets
-        })]
+  return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+    value: colorSchemeContextValue,
+    children: [IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE && /*#__PURE__*/_jsx(FrontendSettingsPreviewBridge, {}), /*#__PURE__*/_jsxs(ThemeContext.Provider, {
+      value: theme,
+      children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
+        children: children
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheets
       })]
-    })
-  );
+    })]
+  });
 };
 export default /*#__PURE__*/memo(ThemeProvider);