@shopgate/engage 7.31.6 → 7.32.0-beta.10

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

@@ -1,4 +1,14 @@
-declare const shadows: readonly ["none", string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
+/**
+ * The elevations the admin offers. Offset, blur and spread are not configurable — a shop picks
+ * one of these presets so the surfaces stay visually consistent, and only the color is free.
+ */
+export type ShadowSize = 'none' | 'low' | 'medium' | 'strong';
+export declare const SHADOW_COLOR_VAR = "--sg-palette-shadow";
+declare const shadows: readonly ["none", ...string[]];
 export type Shadows = typeof shadows;
+/**
+ * The finished shadow for each size the admin offers, for a single `theme.shadowSizes[size]` lookup.
+ */
+export declare const shadowSizes: Record<ShadowSize, string>;
 export default shadows;
 //# sourceMappingURL=shadows.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAaA,QAAA,MAAM,OAAO,mNA0BH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC,eAAe,OAAO,CAAC"}
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AA+D9D,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,QAAA,MAAM,OAAO,gCAMH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC;;GAEG;AACH,eAAO,MAAM,WAAW,EAEnB,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAEhC,eAAe,OAAO,CAAC"}

package/styles/theme/createTheme/shadows.js

@@ -1,10 +1,44 @@
-const shadowKeyUmbraOpacity = 0.2;
-const shadowKeyPenumbraOpacity = 0.14;
-const shadowAmbientShadowOpacity = 0.12;
-function createShadow(...px) {
-  return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
-}
+// Share of the shadow color each of the three layers is drawn with, in percent.
+const shadowKeyUmbraPercent = 20;
+const shadowKeyPenumbraPercent = 14;
+const shadowAmbientShadowPercent = 12;
+
+/**
+ * The elevations the admin offers. Offset, blur and spread are not configurable — a shop picks
+ * one of these presets so the surfaces stay visually consistent, and only the color is free.
+ */
+
+/**
+ * Elevation from the scale below used for each shadow size the admin offers. Keeping the mapping
+ * next to the scale means a size never introduces geometry of its own.
+ */
+const SHADOW_SIZE_ELEVATIONS = {
+  none: 0,
+  low: 2,
+  medium: 4,
+  strong: 8
+};
 
+// Offset-x, offset-y, blur and spread of the three layers that make up one elevation, starting at
+// elevation 1 (elevation 0 draws no shadow at all).
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
-const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
+const elevationGeometries = [[0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0], [0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0], [0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0], [0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0], [0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0], [0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0], [0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1], [0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2], [0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2], [0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3], [0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3], [0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4], [0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4], [0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4], [0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5], [0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5], [0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5], [0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6], [0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6], [0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7], [0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7], [0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7], [0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8], [0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8]];
+
+/**
+ * Builds one elevation from its geometry.
+ * @param px The twelve lengths of the elevation's three layers.
+ * @param renderColor Renders the color of a layer from the share of the shadow color it is drawn
+ * with, in percent.
+ * @returns A box-shadow value.
+ */
+function createShadow(px, renderColor) {
+  const layer = (offset, percent) => `${px[offset]}px ${px[offset + 1]}px ${px[offset + 2]}px ${px[offset + 3]}px ` + `${renderColor(percent)}`;
+  return [layer(0, shadowKeyUmbraPercent), layer(4, shadowKeyPenumbraPercent), layer(8, shadowAmbientShadowPercent)].join(',');
+}
+export const SHADOW_COLOR_VAR = '--sg-palette-shadow';
+const shadows = ['none'].concat(elevationGeometries.map(geometry => createShadow(geometry, percent => `rgb(from var(${SHADOW_COLOR_VAR}) r g b / ${percent / 100})`)));
+/**
+ * The finished shadow for each size the admin offers, for a single `theme.shadowSizes[size]` lookup.
+ */
+export const shadowSizes = Object.fromEntries(Object.entries(SHADOW_SIZE_ELEVATIONS).map(([size, elevation]) => [size, shadows[elevation]]));
 export default shadows;

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

@@ -39,6 +39,10 @@ export interface Duration {
    * Recommended when something is leaving screen
    */
   leavingScreen: number;
+  /**
+   * How long a toast stays visible before auto-dismissing
+   */
+  toast: number;
 }
 
 export const duration: Duration;

package/styles/theme/createTheme/transitions.js

@@ -27,7 +27,9 @@ export const duration = {
   // recommended when something is entering screen
   enteringScreen: 225,
   // recommended when something is leaving screen
-  leavingScreen: 195
+  leavingScreen: 195,
+  // how long a toast stays visible before auto-dismissing
+  toast: 5000
 };
 
 /**

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

@@ -1,19 +1,25 @@
 import type { PaletteOptions, Palette } from './createPalette';
 import type { Typography, TypographyOptions } from './createTypography';
-import type { Components, ComponentsOptions, ComponentVars } from './createComponents';
+import type { ComponentsOptions, ComponentVars, Components } from './createComponents';
 import type { Breakpoints } from './createBreakpoints';
 import type { Spacing } from './createSpacing';
 import type { Transitions } from './transitions';
 import type { ZIndex } from './zIndex';
+import type { Layout } from './layout';
 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';
+import type { Shadows, ShadowSize } from './shadows';
 export type { Breakpoint } from './createBreakpoints';
 export type { PaletteColorsWithMain } from './createPalette';
-declare const colorSchemes: readonly ["light", "dark"];
-export type ColorSchemeName = (typeof colorSchemes)[number];
+export declare const COLOR_SCHEME_NAMES: readonly ["light", "dark"];
+export type ColorSchemeName = (typeof COLOR_SCHEME_NAMES)[number];
+export declare const COLOR_SCHEME_SYSTEM = "system";
+/**
+ * A selectable color scheme: one the theme provides, or `system` to follow the operating system.
+ */
+export type ColorSchemeMode = ColorSchemeName | typeof COLOR_SCHEME_SYSTEM;
 declare const selectorTypes: readonly ["data", "class"];
 export type ColorSchemeSelectorType = (typeof selectorTypes)[number];
 type DeepPartial<T> = T extends object ? {
@@ -27,7 +33,8 @@ type DeepPartial<T> = T extends object ? {
 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.
+     * The color scheme to fall back to when the configured mode resolves to a scheme this theme does
+     * not style. The scheme the app starts in comes from the app settings.
      * @default 'light'
      */
     defaultColorScheme?: ColorSchemeName;
@@ -87,12 +94,16 @@ export interface BaseTheme {
     /**
      * Component specific styling tokes.
      */
-    components: Components;
+    components: ComponentVars;
     shape: Shape;
     /**
      * Pre-defined shadow styles for different elevation levels, following Material Design guidelines.
      */
     shadows: Shadows;
+    /**
+     * The finished box-shadow size (`none` | `low` | `medium` | `strong`)
+     */
+    shadowSizes: Record<ShadowSize, string>;
     /**
      * Adds an alpha value to a color, returning a new color string with the applied alpha.
      * @param color The color to modify.
@@ -115,10 +126,17 @@ export interface BaseTheme {
      * @returns A string representing the darkened color.
      */
     darken(color: string, coefficient?: number | string): string;
+    /**
+     * Calculates a contrast color (either black or white) based on the lightness of the input color.
+     * @param color The color to evaluate.
+     * @returns A string representing the contrast color (either black or white) for the input color.
+     */
+    contrastColor(color: string): string;
 }
 export interface Theme extends BaseTheme {
     /**
-     * The default color scheme to use when the user has not specified a preference.
+     * The color scheme to fall back to when the configured mode resolves to a scheme this theme does
+     * not style. The scheme the app starts in comes from the app settings.
      */
     defaultColorScheme?: ColorSchemeName;
     /**
@@ -137,6 +155,12 @@ export interface Theme extends BaseTheme {
      * Reference to z-index values for multiple components.
      */
     zIndex: ZIndex;
+    /**
+     * Mappings to runtime layout CSS variables (safe-area insets).
+     * The values are `var(--...)` references to variables updated at runtime elsewhere in the app;
+     * this node does not generate any new CSS variables.
+     */
+    layout: Layout;
     /**
      * 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
@@ -165,12 +189,26 @@ export interface Theme extends BaseTheme {
      */
     applyStyles: ApplyStyles<ColorSchemeName>;
 }
+/**
+ * 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.
+ */
+export type ColorSchemeTheme = Omit<BaseTheme, 'components'> & {
+    components: Components;
+};
 /**
  * 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 type ColorSchemeThemes = Record<ColorSchemeName, BaseTheme>;
-export type ThemeInternal = Theme & Pick<CreateCssVarsForColorSchemeThemesReturnValue, 'generateStyleSheets'> & {
+export type ColorSchemeThemes = Record<ColorSchemeName, ColorSchemeTheme>;
+export type ThemeInternal = Omit<Theme, 'colorSchemes'> & {
+    /**
+     * Internal runtime map of fully resolved color-scheme themes.
+     */
+    colorSchemes: ColorSchemeThemes;
+} & Pick<CreateCssVarsForColorSchemeThemesReturnValue, 'generateStyleSheets'> & {
     /**
      * Function that generates a CSS selector string for a given color scheme.
      */

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

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

@@ -1,4 +1,10 @@
-const colorSchemes = ['light', 'dark'];
+export const COLOR_SCHEME_NAMES = ['light', 'dark'];
+export const COLOR_SCHEME_SYSTEM = 'system';
+
+/**
+ * A selectable color scheme: one the theme provides, or `system` to follow the operating system.
+ */
+
 const selectorTypes = ['data', 'class'];
 
 /**
@@ -8,7 +14,13 @@ const selectorTypes = ['data', 'class'];
  */
 
 /**
- * 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.
+ * 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.
  */
-export {};
+
+/**
+ * A record of themes for each color scheme. Each key is a color scheme name (e.g., 'light', 'dark'),
+ * and the value is a fully-resolved color-scheme theme ({@link ColorSchemeTheme}).
+ */

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/hooks/useColorScheme.d.ts

@@ -1,7 +1,8 @@
 /**
- * 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.
+ * Provides access to the color scheme context.
+ * @returns The color scheme context value, containing the current `mode`, a `setMode` function to
+ * update it, and the `modes` that can be set.
  */
-declare const useColorScheme: () => import("../providers/ThemeProvider").ColorSchemeContextValue;
+declare const useColorScheme: () => import("..").ColorSchemeContextValue;
 export default useColorScheme;
 //# sourceMappingURL=useColorScheme.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useColorScheme.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,QAAA,MAAM,cAAc,4CAAuC,CAAC;AAE5D,eAAe,cAAc,CAAC"}

package/styles/theme/hooks/useColorScheme.js

@@ -1,9 +1,10 @@
 import { useContext } from 'react';
-import { ColorSchemeContext } from "../providers/ThemeProvider";
+import { ColorSchemeContext } from "../providers/ColorSchemeContext";
 
 /**
- * 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.
+ * Provides access to the color scheme context.
+ * @returns The color scheme context value, containing the current `mode`, a `setMode` function to
+ * update it, and the `modes` that can be set.
  */
 const useColorScheme = () => useContext(ColorSchemeContext);
 export default useColorScheme;

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

@@ -1,4 +1,11 @@
 import { type Theme } from '..';
+/**
+ * React hook to check if a media query matches the current viewport. Independent of the theme
+ * context, so it can be used by the provider that establishes it.
+ * @param query A media query string, e.g. '(min-width: 600px)'
+ * @returns Returns true if the media query matches, false otherwise.
+ */
+export declare const useMatchMedia: (query: string) => boolean;
 /**
  * @callback ThemeFn
  * @param {Theme} theme The current theme object.

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

@@ -1 +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"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,IAAI,CAAC;AAEhC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAoB7C,CAAC;AAEF;;;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

@@ -2,12 +2,12 @@ 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'.
+ * React hook to check if a media query matches the current viewport. Independent of the theme
+ * context, so it can be used by the provider that establishes it.
  * @param query A media query string, e.g. '(min-width: 600px)'
  * @returns Returns true if the media query matches, false otherwise.
  */
-const useMediaQueryInternal = query => {
+export const useMatchMedia = query => {
   const [match, setMatch] = useState(() => window.matchMedia(query).matches);
   useEffect(() => {
     const queryList = window.matchMedia(query);
@@ -60,9 +60,9 @@ const useMediaQueryInternal = query => {
 const useMediaQuery = queryInput => {
   const theme = useTheme();
   let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  // Remove the '@media' prefix if it exists, as useMediaQueryInternal expects a plain media query.
+  // Remove the '@media' prefix if it exists, as useMatchMedia expects a plain media query.
   query = query.replace(/^@media( ?)/m, '');
-  const match = useMediaQueryInternal(query);
+  const match = useMatchMedia(query);
   return match;
 };
 export default useMediaQuery;

package/styles/theme/hooks/useTheme.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from "../providers/ThemeProvider";
+import { ThemeContext } from "../providers/ThemeContext";
 
 /**
  * Returns the theme object.

package/styles/theme/index.d.ts

@@ -1,5 +1,9 @@
 export { default as ThemeProvider } from './providers/ThemeProvider';
 export { createTheme } from './createTheme';
-export type { Theme, Breakpoint, PaletteColorsWithMain } from './createTheme';
+export { type ShadowSize } from './createTheme/shadows';
+export type { Variant as TypographyVariant } from './createTheme/createTypography';
+export type { Theme, Breakpoint, PaletteColorsWithMain, ColorSchemeName, ColorSchemeMode, } from './createTheme';
 export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, } from './hooks';
+export { withTheme, type WithThemeProps } from './hocs';
+export type { ColorSchemeContextValue } from './providers/ColorSchemeContext';
 //# 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,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnF,YAAY,EACV,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,GAC3E,MAAM,eAAe,CAAC;AACvB,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;AACxD,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,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/ColorSchemeContext.d.ts

@@ -0,0 +1,40 @@
+import { type ColorSchemeMode, type ColorSchemeName } from '../createTheme';
+/**
+ * A new mode, or an updater that receives the effective one. Null clears the visitor's pick.
+ */
+export type SetColorSchemeMode = ColorSchemeMode | null | ((current: ColorSchemeMode) => ColorSchemeMode | null);
+export interface ColorSchemeContextValue {
+    /**
+     * The mode in effect: the one the visitor picked, or the configured default while they picked
+     * none.
+     */
+    mode: ColorSchemeMode;
+    /**
+     * The mode that applies while the visitor picked none, as configured within the app settings.
+     */
+    defaultMode: ColorSchemeMode;
+    /**
+     * The color scheme that is applied - the mode resolved against the operating system and the
+     * configured default. Components style against this one.
+     */
+    activeColorScheme: ColorSchemeName | null;
+    /**
+     * Whether visitors may pick a color scheme themselves. False while the app settings configure a
+     * binding color scheme, in which case a stored pick is ignored. Always true in development
+     * builds, which have no app settings to configure. A picker should render only where this is
+     * true.
+     */
+    canSelectColorScheme: boolean;
+    /**
+     * Updates the color scheme. Setting null clears the visitor's pick, so the configured default
+     * applies again. Takes effect only while `canSelectColorScheme` is true.
+     */
+    setMode: (value: SetColorSchemeMode) => void;
+    /**
+     * Everything that can be set: the color schemes the active theme styles, plus 'system'. Passing
+     * anything else to setMode has no effect.
+     */
+    modes: ColorSchemeMode[];
+}
+export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextValue>;
+//# sourceMappingURL=ColorSchemeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeContext.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ColorSchemeContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC1B,eAAe,GACf,IAAI,GACJ,CAAC,CAAC,OAAO,EAAE,eAAe,KAAK,eAAe,GAAG,IAAI,CAAC,CAAC;AAE3D,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC;IAC7B;;;OAGG;IACH,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,kDAO7B,CAAC"}

package/styles/theme/providers/ColorSchemeContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+/**
+ * A new mode, or an updater that receives the effective one. Null clears the visitor's pick.
+ */
+
+export const ColorSchemeContext = /*#__PURE__*/createContext({
+  mode: 'light',
+  defaultMode: 'light',
+  activeColorScheme: 'light',
+  canSelectColorScheme: false,
+  setMode: () => undefined,
+  modes: ['light']
+});

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

@@ -0,0 +1,3 @@
+import { type Theme } from '../createTheme';
+export declare const ThemeContext: import("react").Context<Theme>;
+//# sourceMappingURL=ThemeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,YAAY,gCAAqC,CAAC"}

package/styles/theme/providers/ThemeContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ThemeContext = /*#__PURE__*/createContext({});

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

@@ -1,16 +1,6 @@
-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>>;
-}
-export declare const ThemeContext: import("react").Context<Theme>;
-export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextValue>;
+import { type ThemeInternal } from '../createTheme';
+export { ColorSchemeContext, type ColorSchemeContextValue } from './ColorSchemeContext';
+export { ThemeContext } from './ThemeContext';
 type ThemeProviderProps = {
     /**
      * The theme object to provide to the context.
@@ -18,6 +8,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":"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"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACgB,KAAK,aAAa,EACxC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuH9C,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFArHE,kBAAkB;AAuHrB,wBAAmC"}