@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.1

package/styles/theme/createTheme/types.d.ts

@@ -0,0 +1,183 @@
+import type { PaletteOptions, Palette } from './createPalette';
+import type { Typography, TypographyOptions } from './createTypography';
+import type { Components, ComponentsOptions, ComponentVars } from './createComponents';
+import type { Breakpoints } from './createBreakpoints';
+import type { Spacing } from './createSpacing';
+import type { Transitions } from './transitions';
+import type { ZIndex } from './zIndex';
+import type { ApplyStyles } from './applyStyles';
+import type { GetColorSchemeSelector, ActiveColorSchemeSwitcher } from './helpers';
+import type { CreateCssVarsForColorSchemeThemesReturnValue } from './createCssVarsForColorSchemeThemes';
+import type { Shape, ShapeOptions } from './createShape';
+import type { Shadows } from './shadows';
+export type { Breakpoint } from './createBreakpoints';
+export type { PaletteColorsWithMain } from './createPalette';
+declare const colorSchemes: readonly ["light", "dark"];
+export type ColorSchemeName = (typeof colorSchemes)[number];
+declare const selectorTypes: readonly ["data", "class"];
+export type ColorSchemeSelectorType = (typeof selectorTypes)[number];
+type DeepPartial<T> = T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+/**
+ * Available options for creating a color scheme object. Color schemes can be used to generate
+ * multiple themes with different color palettes and typography, which can be switched
+ * dynamically based on user preference or system settings.
+ */
+export type ColorSchemeOptions = Pick<ThemeOptions, 'palette' | 'typography' | 'components' | 'shape'>;
+export interface ThemeOptions {
+    /**
+     * The default color scheme to use when the user has not specified a preference.
+     * @default 'light'
+     */
+    defaultColorScheme?: ColorSchemeName;
+    /**
+     * The type of selector to use for applying color schemes. Possible values are 'data' for
+     * data attributes (e.g., `data-color-scheme="dark"`) and 'class' for CSS classes
+     * (e.g., `class="dark"`).
+     * @default 'data'
+     */
+    colorSchemeSelector?: ColorSchemeSelectorType;
+    /**
+     * Prefix for the generated CSS variables. For example, if the prefix is 'sg', a theme property
+     * like `palette.primary.main` will generate a CSS variable `--sg-palette-primary-main`.
+     * @default 'sg'
+     */
+    cssVarPrefix?: string;
+    /**
+     * The palette defines the theme colors.
+     */
+    palette?: DeepPartial<PaletteOptions>;
+    /**
+     * Font styles for multiple typography variants.
+     */
+    typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+    shape?: ShapeOptions;
+    /**
+     * The color schemes to generate themes for. Each key is a color scheme name (e.g., 'light', 'dark'),
+     * and the value is an object that can contain palette and typography options specific to that color scheme.
+     * If a color scheme is not provided, it will inherit from the default scheme.
+     * @example
+     * colorSchemes: {
+     *   light: {
+     *     palette: { mode: 'light', primary: { main: '#000000' } },
+     *     typography: { fontSize: 14 }
+     *   },
+     *   dark: {
+     *     palette: { mode: 'dark', primary: { main: '#ffffff' } },
+     *     typography: { fontSize: 14 }
+     *   }
+     * }
+     */
+    colorSchemes?: Record<ColorSchemeName, DeepPartial<ColorSchemeOptions>>;
+    /**
+     *  Component specific styling tokes.
+     */
+    components?: ComponentsOptions;
+}
+export interface BaseTheme {
+    /**
+     * The palette defines the theme colors.
+     */
+    palette: Palette;
+    /**
+     * Font styles for multiple typography variants.
+     */
+    typography: Typography;
+    /**
+     * Component specific styling tokes.
+     */
+    components: Components;
+    shape: Shape;
+    /**
+     * Pre-defined shadow styles for different elevation levels, following Material Design guidelines.
+     */
+    shadows: Shadows;
+    /**
+     * Adds an alpha value to a color, returning a new color string with the applied alpha.
+     * @param color The color to modify.
+     * @param coefficient The alpha coefficient to apply, either a number or a string representing a CSS calculation.
+     * @returns A string representing the color with the applied alpha value.
+     */
+    alpha(color: string, coefficient: number | string): string;
+    /**
+     * Lightens a color by a given coefficient, returning a new color string with the applied lightening.
+     * @param color The color to modify.
+     * @param coefficient The coefficient to apply, either a number or a string representing a CSS calculation.
+     * @returns A string representing the lightened color.
+     */
+    lighten(color: string, coefficient?: number | string): string;
+    /**
+     * Darkens a color by a given coefficient, returning a new color string with the applied darkening.
+     * @param color The color to modify.
+     * @param coefficient The coefficient to apply, either a number or a string representing a CSS calculation.
+     * Defaults to `0.2` if not provided.
+     * @returns A string representing the darkened color.
+     */
+    darken(color: string, coefficient?: number | string): string;
+}
+export interface Theme extends BaseTheme {
+    /**
+     * The default color scheme to use when the user has not specified a preference.
+     */
+    defaultColorScheme?: ColorSchemeName;
+    /**
+     * API to simplify the use of media queries.
+     */
+    breakpoints: Breakpoints;
+    /**
+     * Use the spacing function to create consistent spacing.
+     */
+    spacing: Spacing;
+    /**
+     * API to simplify the creation of transitions
+     */
+    transitions: Transitions;
+    /**
+     * Reference to z-index values for multiple components.
+     */
+    zIndex: ZIndex;
+    /**
+     * An object that contains the CSS variable references for the theme properties.
+     * It has the same structure as the theme, but the values are CSS variable references
+     * (e.g., `var(--sg-palette-primary-main)`) instead of actual color values.
+     */
+    vars: Omit<BaseTheme, 'components'> & {
+        components: ComponentVars;
+    };
+    /**
+     * 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.
+     */
+    colorSchemes: Record<ColorSchemeName, DeepPartial<ColorSchemeOptions>>;
+    /**
+     * Function that generates a CSS selector string for a given color scheme.
+     * The browser applies the given styles only when the specified color scheme is active.
+     * @example
+     * makeStyles()(theme => ({
+     *   root: {
+     *     color: theme.palette.primary.main,
+     *     ...theme.applyStyles('dark', {
+     *       color: theme.palette.secondary.main,
+     *     }),
+     *   },
+     * }))
+     */
+    applyStyles: ApplyStyles<ColorSchemeName>;
+}
+/**
+ * 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.
+ */
+export type ColorSchemeThemes = Record<ColorSchemeName, BaseTheme>;
+export type ThemeInternal = Theme & Pick<CreateCssVarsForColorSchemeThemesReturnValue, 'generateStyleSheets'> & {
+    /**
+     * Function that generates a CSS selector string for a given color scheme.
+     */
+    getColorSchemeSelector: GetColorSchemeSelector;
+    /**
+     * Function that switches the color scheme by the corresponding selector type.
+     */
+    setActiveColorScheme: ActiveColorSchemeSwitcher;
+};
+//# sourceMappingURL=types.d.ts.map

package/styles/theme/createTheme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/types.js

@@ -0,0 +1,14 @@
+const colorSchemes = ['light', 'dark'];
+const selectorTypes = ['data', 'class'];
+
+/**
+ * Available options for creating a color scheme object. Color schemes can be used to generate
+ * multiple themes with different color palettes and typography, which can be switched
+ * dynamically based on user preference or system settings.
+ */
+
+/**
+ * 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.
+ */
+export {};

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

@@ -2,3 +2,5 @@ export { default as useActiveBreakpoint } from './useActiveBreakpoint';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useResponsiveValue } from './useResponsiveValue';
 export { default as useTheme } from './useTheme';
+export { default as useColorScheme } from './useColorScheme';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/styles/theme/hooks/index.js

@@ -1,4 +1,5 @@
 export { default as useActiveBreakpoint } from "./useActiveBreakpoint";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useResponsiveValue } from "./useResponsiveValue";
-export { default as useTheme } from "./useTheme";
+export { default as useTheme } from "./useTheme";
+export { default as useColorScheme } from "./useColorScheme";

package/styles/theme/hooks/useActiveBreakpoint.d.ts

@@ -1,8 +1,6 @@
-import { Breakpoint } from '..';
-
 /**
  * Returns the active breakpoint for the current window size.
- *
+ * @returns The name of the active breakpoint, or `null` if no breakpoint is active.
  * @example
  * ```js
  * import React from 'react';
@@ -15,4 +13,6 @@ import { Breakpoint } from '..';
  * }
  * ```
  */
-export default function useActiveBreakpoint(): Breakpoint;
+declare const useActiveBreakpoint: () => import("..").Breakpoint | undefined;
+export default useActiveBreakpoint;
+//# sourceMappingURL=useActiveBreakpoint.d.ts.map

package/styles/theme/hooks/useActiveBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveBreakpoint.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useActiveBreakpoint.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,mBAAmB,2CAA4C,CAAC;AAEtE,eAAe,mBAAmB,CAAC"}

package/styles/theme/hooks/useActiveBreakpoint.js

@@ -1,9 +1,20 @@
 import { useContext } from 'react';
 import { ActiveBreakpointContext } from "../providers/ActiveBreakpointProvider";
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Returns the active breakpoint for the current window size.
+ * @returns The name of the active breakpoint, or `null` if no breakpoint is active.
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useActiveBreakpoint } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const activeBreakpoint = useActiveBreakpoint();
+ *
+ *   return (<span>{`active breakpoint: ${activeBreakpoint}`}</span>)
+ * }
+ * ```
  */
 const useActiveBreakpoint = () => useContext(ActiveBreakpointContext);
 export default useActiveBreakpoint;

package/styles/theme/hooks/useColorScheme.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns the currently selected color scheme and a function to update it.
+ * @returns An object containing the current color scheme and a function to update it.
+ */
+declare const useColorScheme: () => import("../providers/ThemeProvider").ColorSchemeContextValue;
+export default useColorScheme;
+//# sourceMappingURL=useColorScheme.d.ts.map

package/styles/theme/hooks/useColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useColorScheme.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,QAAA,MAAM,cAAc,oEAAuC,CAAC;AAE5D,eAAe,cAAc,CAAC"}

package/styles/theme/hooks/useColorScheme.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ColorSchemeContext } from "../providers/ThemeProvider";
+
+/**
+ * Returns the currently selected color scheme and a function to update it.
+ * @returns An object containing the current color scheme and a function to update it.
+ */
+const useColorScheme = () => useContext(ColorSchemeContext);
+export default useColorScheme;

package/styles/theme/hooks/useMediaQuery.d.ts

@@ -1,21 +1,21 @@
-import { Theme } from '..';
-
+import { type Theme } from '..';
+/**
+ * @callback ThemeFn
+ * @param {Theme} theme The current theme object.
+ */
 /**
  * Creates a media query hook that can be used to check if a media query matches the current
  * viewport.
- * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
+ * @param queryInput The media query string or a function that receives the theme
  * and returns a media query string.
- * @returns {boolean} Returns true if the media query matches, false otherwise.
- *
+ * @returns Returns true if the media query matches, false otherwise.
  * @example Use the useTheme hook to get access to the breakpoint helper functions:
  * ```js
  * import React from 'react';
  * import { useTheme, useMediaQuery } from '@shopgate/engage/styles';
- *
  * export default function MyComponent() {
  *   const theme = useTheme();
  *   const matches = useMediaQuery(theme.breakpoints.up('sm'));
- *
  *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
  * }
  *```
@@ -30,4 +30,6 @@ import { Theme } from '..';
  *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
  * }
  */
-export default function useMediaQuery(queryInput: string | ((theme: Theme) => string)): boolean;
+declare const useMediaQuery: (queryInput: string | ((theme: Theme) => string)) => boolean;
+export default useMediaQuery;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/styles/theme/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,IAAI,CAAC;AA8BhC;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,aAAa,GAAI,YAAY,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,KAAG,OASxE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/styles/theme/hooks/useMediaQuery.js

@@ -1,12 +1,11 @@
 import "core-js/modules/es.string.replace.js";
 import { useState, useEffect } from 'react';
 import useTheme from "./useTheme";
-
 /**
  * React hook to check if a media query matches the current viewport.
  * Doesn't accept media query strings that start with '@media'.
- * @param {string} query A media query string, e.g. '(min-width: 600px)'
- * @returns {boolean} Returns true if the media query matches, false otherwise.
+ * @param query A media query string, e.g. '(min-width: 600px)'
+ * @returns Returns true if the media query matches, false otherwise.
  */
 const useMediaQueryInternal = query => {
   const [match, setMatch] = useState(() => window.matchMedia(query).matches);
@@ -26,10 +25,6 @@ const useMediaQueryInternal = query => {
   return match;
 };
 
-/**
- * @typedef {import('./useTheme').Theme} Theme
- */
-
 /**
  * @callback ThemeFn
  * @param {Theme} theme The current theme object.
@@ -38,9 +33,29 @@ const useMediaQueryInternal = query => {
 /**
  * Creates a media query hook that can be used to check if a media query matches the current
  * viewport.
- * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
+ * @param queryInput The media query string or a function that receives the theme
  * and returns a media query string.
- * @returns {boolean} Returns true if the media query matches, false otherwise.
+ * @returns Returns true if the media query matches, false otherwise.
+ * @example Use the useTheme hook to get access to the breakpoint helper functions:
+ * ```js
+ * import React from 'react';
+ * import { useTheme, useMediaQuery } from '@shopgate/engage/styles';
+ * export default function MyComponent() {
+ *   const theme = useTheme();
+ *   const matches = useMediaQuery(theme.breakpoints.up('sm'));
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ *```
+ * @example Alternatively, you can use a callback function, accepting the theme as a first argument:
+ * ```js
+ * import React from 'react';
+ * import { useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
  */
 const useMediaQuery = queryInput => {
   const theme = useTheme();

package/styles/theme/hooks/useResponsiveValue.d.ts

@@ -1,12 +1,12 @@
-import { Breakpoint } from '..';
-
+import type { Breakpoint } from '../createTheme';
 type BreakpointValueMap<T> = Partial<Record<Breakpoint, T>>;
-
 /**
  * Returns the value for the current breakpoint based on the provided responsive values object.
  * It is also responsive to window resizing and returning the appropriate value according to the
  * new window size.
  * @param values The responsive values object
+ * @returns The value for the current breakpoint, or `undefined` if no value is found for
+ * the current breakpoint or any smaller breakpoint.
  * @example
  * ```js
  * import React from 'react';
@@ -22,6 +22,6 @@ type BreakpointValueMap<T> = Partial<Record<Breakpoint, T>>;
  * }
  * ```
  */
-export default function useResponsiveValue<const T extends BreakpointValueMap<any>>(
-  values: T
-): T[keyof T];
+declare const useResponsiveValue: <const T extends BreakpointValueMap<unknown>>(values: T) => T[keyof T] | undefined;
+export default useResponsiveValue;
+//# sourceMappingURL=useResponsiveValue.d.ts.map

package/styles/theme/hooks/useResponsiveValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,KAAK,kBAAkB,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,kBAAkB,GAAI,KAAK,CAAC,CAAC,SAAS,kBAAkB,CAAC,OAAO,CAAC,EACrE,QAAQ,CAAC,KACR,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,SAmBf,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/styles/theme/hooks/useResponsiveValue.js

@@ -1,7 +1,27 @@
 import useTheme from "./useTheme";
 import useActiveBreakpoint from "./useActiveBreakpoint";
-
-// eslint-disable-next-line require-jsdoc
+/**
+ * Returns the value for the current breakpoint based on the provided responsive values object.
+ * It is also responsive to window resizing and returning the appropriate value according to the
+ * new window size.
+ * @param values The responsive values object
+ * @returns The value for the current breakpoint, or `undefined` if no value is found for
+ * the current breakpoint or any smaller breakpoint.
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useResponsiveValue } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const flexDir = useResponsiveValue({
+ *     xs: "column",
+ *     lg: "row"
+ *   });
+ *
+ *   return (<span style={{ display: 'flex', flexDirection: flexDir }} />)
+ * }
+ * ```
+ */
 const useResponsiveValue = values => {
   const theme = useTheme();
   const active = useActiveBreakpoint();

package/styles/theme/hooks/useTheme.d.ts

@@ -1,8 +1,7 @@
-import { type Theme } from '..';
-
-export type { Theme } from '..';
-
 /**
  * Returns the theme object.
+ * @returns The theme object.
  */
-export default function useTheme<T = Theme>(): T;
+declare const useTheme: () => import("..").Theme;
+export default useTheme;
+//# sourceMappingURL=useTheme.d.ts.map

package/styles/theme/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useTheme.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,QAAA,MAAM,QAAQ,0BAAiC,CAAC;AAEhD,eAAe,QAAQ,CAAC"}

package/styles/theme/hooks/useTheme.js

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { ThemeContext } from "../providers/ThemeProvider";
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Returns the theme object.
+ * @returns The theme object.
  */
 const useTheme = () => useContext(ThemeContext);
 export default useTheme;

package/styles/theme/index.d.ts

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

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

@@ -0,0 +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"}

package/styles/theme/index.js

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

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

@@ -1,21 +1,9 @@
-import { ReactNode, JSX, Context } from 'react';
-import { Breakpoint } from '..';
-
-/**
- * React Context for current active breakpoint.
- */
-export const ActiveBreakpointContext: Context<Breakpoint | undefined>;
-
-/**
- * Props for the ActiveBreakpointProvider.
- */
-export interface ActiveBreakpointProviderProps {
-  children: ReactNode;
-}
-
-/**
- * Provides the current active breakpoint to child components.
- */
-declare function ActiveBreakpointProvider(props: ActiveBreakpointProviderProps): JSX.Element;
-
-export default ActiveBreakpointProvider;
+import React from 'react';
+import { type Breakpoint } from '..';
+export declare const ActiveBreakpointContext: React.Context<Breakpoint | undefined>;
+type ActiveBreakpointProviderProps = {
+    children: React.ReactNode;
+};
+declare const _default: React.MemoExoticComponent<({ children }: ActiveBreakpointProviderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=ActiveBreakpointProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveBreakpointProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ActiveBreakpointProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAEN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,IAAI,CAAC;AAErC,eAAO,MAAM,uBAAuB,uCAA0D,CAAC;AAkD/F,KAAK,6BAA6B,GAAG;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;iEA9C8C,6BAA6B;AAgD7E,wBAA8C"}

package/styles/theme/providers/ActiveBreakpointProvider.js

@@ -1,20 +1,12 @@
 import "core-js/modules/es.string.replace.js";
-import React, { createContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext, useEffect, useState, memo } from 'react';
 import { useTheme } from '@shopgate/engage/styles';
-
-/**
- * @typedef {import('..').Breakpoint} Breakpoint
- */
-
-/** @type {import('react').Context<Breakpoint>} */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ActiveBreakpointContext = /*#__PURE__*/createContext(undefined);
+export const ActiveBreakpointContext = /*#__PURE__*/createContext('');
 
 /**
- * @param {Object} props The component props
- * @param {React.ReactNode} props.children The children to render within the provider
- * @returns {JSX.Element} The ActiveBreakpointProvider component
+ * Provides the current active breakpoint to child components.
+ * @returns The ActiveBreakpointProvider component
  */
 const ActiveBreakpointProvider = ({
   children
@@ -25,15 +17,12 @@ const ActiveBreakpointProvider = ({
   const breakpoints = [].concat(theme.breakpoints.keys).reverse();
 
   /**
-   * Retrieve the initial breakpoint based on the current window size.
-   * @returns {Breakpoint|undefined} The initial breakpoint based on the current window size.
+   * Returns the initial active breakpoint based on the current window size.
    */
   const getInitialBreakpoint = () => {
     if (typeof window === 'undefined') return undefined;
     return breakpoints.find(bp => window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m, '')).matches);
   };
-
-  /** @type {[Breakpoint, React.Dispatch<React.SetStateAction<Breakpoint>>]} */
   const [active, setActive] = useState(getInitialBreakpoint);
   useEffect(() => {
     if (typeof window === 'undefined') return undefined;
@@ -63,4 +52,4 @@ const ActiveBreakpointProvider = ({
     children: children
   });
 };
-export default ActiveBreakpointProvider;
+export default /*#__PURE__*/memo(ActiveBreakpointProvider);

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

@@ -1,18 +1,23 @@
-import { Theme } from '..';
-
-export const ThemeContext: React.Context<Theme>;
-
-export interface ThemeProviderProps<Theme = Theme> {
-  children: React.ReactNode;
-  /**
-   * The theme object to provide to the context.
-   */
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+import { type Theme, type ThemeInternal, type ColorSchemeName } from '../createTheme';
+export interface ColorSchemeContextValue {
+    /**
+     * The current color scheme (e.g., 'light' or 'dark')
+     */
+    mode: ColorSchemeName;
+    /**
+     * Function to update the color scheme
+     */
+    setMode: React.Dispatch<React.SetStateAction<ColorSchemeName>>;
 }
-
-/**
- * The ThemeProvider component provides the theme context to its children.
- */
-export default function ThemeProvider<T = Theme>(
-  props: ThemeProviderProps<T>
-): React.ReactElement<ThemeProviderProps<T>>;
+export declare const ThemeContext: import("react").Context<Theme>;
+export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextValue>;
+type ThemeProviderProps = {
+    /**
+     * The theme object to provide to the context.
+     */
+    theme: ThemeInternal;
+    children: React.ReactNode;
+};
+declare const _default: import("react").MemoExoticComponent<({ children, theme, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAMA,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;AAwCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtCE,kBAAkB;AAwCrB,wBAAmC"}