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

package/styles/theme/providers/ThemeProvider.js

@@ -1,27 +1,47 @@
-import React, { createContext, memo } from 'react';
-import PropTypes from 'prop-types';
+import { createContext, memo, useMemo, useLayoutEffect } from 'react';
+import useLocalStorage from '@shopgate/engage/core/hooks/useLocalStorage';
+import { GlobalStyles } from '@shopgate/engage/styles';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
-
-/** @typedef {import('../index').Theme} Theme */
-
-/** @type {import('react').Context<Theme>} */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ThemeContext = /*#__PURE__*/createContext();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ThemeContext = /*#__PURE__*/createContext({});
+export const ColorSchemeContext = /*#__PURE__*/createContext({
+  mode: 'light',
+  setMode: () => ''
+});
 
 /**
  * The ThemeProvider component provides the theme context to its children.
- * @param {Object} props The component props
- * @param {Theme} props.theme The theme object to provide
- * @param {React.ReactNode} props.children The children to render within the provider
- * @returns {JSX.Element} The ThemeProvider component
  */
 const ThemeProvider = ({
   children,
   theme
-}) => /*#__PURE__*/_jsx(ThemeContext.Provider, {
-  value: theme,
-  children: /*#__PURE__*/_jsx(ActiveBreakpointProvider, {
-    children: children
-  })
-});
+}) => {
+  const [activeColorScheme, setActiveColorScheme] = useLocalStorage('persistedColorScheme', {
+    initialValue: theme.defaultColorScheme
+  });
+  const colorSchemeContextValue = useMemo(() => ({
+    mode: activeColorScheme,
+    setMode: setActiveColorScheme
+  }), [activeColorScheme, setActiveColorScheme]);
+  useLayoutEffect(() => {
+    if (!activeColorScheme) return;
+    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
+    _jsx(ColorSchemeContext.Provider, {
+      value: colorSchemeContextValue,
+      children: /*#__PURE__*/_jsxs(ThemeContext.Provider, {
+        value: theme,
+        children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
+          children: children
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: styleSheets
+        })]
+      })
+    })
+  );
+};
 export default /*#__PURE__*/memo(ThemeProvider);

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/styles/theme/providers/index.js

@@ -0,0 +1,2 @@
+export { default as ActiveBreakpointProvider } from "./ActiveBreakpointProvider";
+export { default as ThemeProvider } from "./ThemeProvider";

package/styles/theme/utils/color.d.ts

@@ -0,0 +1,211 @@
+import Color from 'color';
+type ColorType = 'hex' | 'rgb' | 'hsl' | 'array' | 'object';
+type ColorInstance = InstanceType<typeof Color>;
+/**
+ * Determines if a value is a valid color string.
+ * @param value The value to check.
+ * @returns Whether the value is a valid color string or not.
+ */
+export declare const isColor: (value: unknown) => boolean;
+/**
+ * Calculates the contrast ratio between two colors
+ * @param color The source color.
+ * @param color2 The color to compare against the source color - usually a
+ * dark text color.
+ * @param [background='#fff'] Optional background color which is used for source colors
+ * with alpha channel.
+ * @returns Contrast value
+ * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+export declare const getContrastRatio: (color: string, color2: string, background?: string) => number;
+/**
+ * Converts a passed color to a hex(a) color
+ * @param color The color to convert.
+ * @param returnType The type of return value to create. Defaults to 'hex'.
+ * @returns The desired color value
+ */
+export declare const toHex: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | number[];
+/**
+ * Converts a passed color to an RGB color
+ * @param color The color to convert.
+ * @param returnType The type of return value to create. Defaults to 'rgb'.
+ * @returns The desired color value
+ */
+export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | number[];
+/**
+ * Converts a passed color to an HSL color
+ * @param color The color to convert.
+ * @param returnType The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | number[];
+/**
+ * Adds hsl lightness to a color
+ * @param color The color to modify.
+ * @param value The hsl lightness value to add.
+ * @param type The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export declare const addLightness: (color: ColorInstance, value: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | number[];
+/**
+ * Lightens a color by a given offset
+ * @param color The color to modify.
+ * @param totalOffset The total offset to lighten the color by.
+ * @param type The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export declare const lighten: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | number[];
+/**
+ * Darkens a color by a given offset
+ * @param color The color to modify.
+ * @param totalOffset The total offset to darken the color by.
+ * @param type The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export declare const darken: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | ArrayLike<number> | {
+    [key: string]: any;
+}> | number[];
+export {};
+//# sourceMappingURL=color.d.ts.map

package/styles/theme/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../styles/theme/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,YAWrC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,mBAAmB,WAYpB,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,aAAa,EACpB,OAAO,MAAM,EACb,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACkC,CAAC;AAC5D;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACsC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACqC,CAAC"}

package/styles/theme/utils/color.js

@@ -0,0 +1,112 @@
+import Color from 'color';
+/**
+ * Determines if a value is a valid color string.
+ * @param value The value to check.
+ * @returns Whether the value is a valid color string or not.
+ */
+export const isColor = value => {
+  if (typeof value !== 'string') {
+    return false;
+  }
+  try {
+    Color(value);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Calculates the contrast ratio between two colors
+ * @param color The source color.
+ * @param color2 The color to compare against the source color - usually a
+ * dark text color.
+ * @param [background='#fff'] Optional background color which is used for source colors
+ * with alpha channel.
+ * @returns Contrast value
+ * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+export const getContrastRatio = (color, color2, background = '#fff') => {
+  let source = Color(color);
+
+  // @ts-expect-error - We are sure about the type here
+  if (source.valpha < 1) {
+    // Special handling for transparent colors -> simulate how the color would look on white bg
+    // @ts-expect-error - We are sure about the type here
+    source = source.mix(Color(background), 1 - source.valpha);
+  }
+  return source.contrast(Color(color2));
+};
+
+/**
+ * Creates the return value for a color function - controlled by the type parameter
+ * @param color The Color instance to convert.
+ * @param type The type of return value to create.
+ * @returns The return value
+ */
+const createReturnValue = (color, type) => {
+  if (type === 'array') return color.array();
+
+  // @ts-expect-error - We are sure about the type here
+  const hasAlpha = color.valpha < 1;
+  if (type === 'hex') {
+    return hasAlpha ? color.hexa() : color.hex();
+  }
+  if (type === 'rgb') {
+    return color.rgb().toString();
+  }
+  if (type === 'hsl') {
+    return color.hsl().toString();
+  }
+  return color;
+};
+
+/**
+ * Converts a passed color to a hex(a) color
+ * @param color The color to convert.
+ * @param returnType The type of return value to create. Defaults to 'hex'.
+ * @returns The desired color value
+ */
+export const toHex = (color, returnType = 'hex') => createReturnValue(Color(color).rgb(), returnType);
+
+/**
+ * Converts a passed color to an RGB color
+ * @param color The color to convert.
+ * @param returnType The type of return value to create. Defaults to 'rgb'.
+ * @returns The desired color value
+ */
+export const toRgb = (color, returnType = 'rgb') => createReturnValue(Color(color).rgb(), returnType);
+
+/**
+ * Converts a passed color to an HSL color
+ * @param color The color to convert.
+ * @param returnType The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export const toHsl = (color, returnType = 'hsl') => createReturnValue(Color(color).hsl(), returnType);
+
+/**
+ * Adds hsl lightness to a color
+ * @param color The color to modify.
+ * @param value The hsl lightness value to add.
+ * @param type The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export const addLightness = (color, value, type = 'hsl') => createReturnValue(Color(color).lightness(value), type);
+/**
+ * Lightens a color by a given offset
+ * @param color The color to modify.
+ * @param totalOffset The total offset to lighten the color by.
+ * @param type The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export const lighten = (color, totalOffset, type = 'hsl') => createReturnValue(Color(color).lighten(totalOffset), type);
+
+/**
+ * Darkens a color by a given offset
+ * @param color The color to modify.
+ * @param totalOffset The total offset to darken the color by.
+ * @param type The type of return value to create. Defaults to 'hsl'.
+ * @returns The desired color value
+ */
+export const darken = (color, totalOffset, type = 'hsl') => createReturnValue(Color(color).darken(totalOffset), type);

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

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

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

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

package/styles/theme/utils/index.js

@@ -0,0 +1 @@
+export * from "./color";

package/styles/tss/index.d.ts

@@ -0,0 +1,64 @@
+import { type EmotionCache } from '@emotion/cache';
+import { type Interpolation } from '@emotion/serialize';
+export { GlobalStyles, keyframes } from 'tss-react';
+export declare const CLASS_PREFIX = "sg";
+export declare const emotionCache: EmotionCache;
+/**
+ * Injects global CSS rules into the application.
+ *
+ * This is a programmatic alternative to the `GlobalStyles` component from `@shopgate/engage/styles`,
+ * allowing global styles to be defined outside of React components.
+ * It should be avoided when possible in favor of `GlobalStyles` for better integration with React's
+ * rendering lifecycle.
+ *
+ * Styles are applied as written (e.g. `body`, `*`, `.class`).
+ *
+ * @param args Styles to apply globally
+ * @example
+ * injectGlobal({
+ *   body: { margin: 0 }
+ * });
+ */
+export declare const injectGlobal: (...args: (TemplateStringsArray | Interpolation<unknown>)[]) => void;
+export declare const tss: import("tss-react").Tss<Record<string, unknown>, Record<never, unknown>, never, Record<string, unknown>, never>;
+export declare const makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
+    name?: string | Record<string, unknown> | undefined;
+    uniqId?: string | undefined;
+} | undefined) => <RuleName_2 extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName_2, import("tss-react").CSSObject> | ((theme: import("@shopgate/engage/styles").Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName_2, import("tss-react").CSSObject>)) => (params: Params, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<RuleName_2, string>;
+    theme: import("@shopgate/engage/styles").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+}, withStyles: {
+    <C extends keyof import("tss-react/tools/ReactHTML").JSXIntrinsicElements | import("tss-react/tools/ReactComponent").ReactComponent<any>, Props extends C extends import("tss-react/tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("tss-react/tools/ReactHTML").JSXIntrinsicElements ? import("tss-react/tools/ReactHTML").ReactHTML[C] extends import("tss-react/tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
+        classes?: Partial<infer ClassNameByRuleName> | undefined;
+    } ? { [RuleName in keyof ClassNameByRuleName]?: import("tss-react").CSSObject | undefined; } & {
+        [mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("tss-react").CSSObject | undefined; };
+    } : {
+        root: import("tss-react").CSSObject;
+    } & {
+        [mediaQuery: `@media${string}`]: {
+            root: import("tss-react").CSSObject;
+        };
+    }>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
+        [mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: import("tss-react").CSSObject | undefined; };
+    }) | ((theme: import("@shopgate/engage/styles").Theme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
+        name?: string | Record<string, unknown> | undefined;
+        uniqId?: string | undefined;
+    } | undefined): C extends keyof import("tss-react/tools/ReactHTML").JSXIntrinsicElements ? import("tss-react/tools/ReactHTML").ReactHTML[C] : C;
+    getClasses: <Classes>(props: {
+        className?: string | undefined;
+        classes?: Classes | undefined;
+    }) => Classes extends Record<string, unknown> ? Classes extends Partial<Record<infer K, any>> ? Record<K, string> : Classes : {
+        root: string;
+    };
+}, useStyles: () => {
+    theme: import("@shopgate/engage/styles").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export declare const cx: import("tss-react").Cx, css: import("tss-react").Css;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/tss/index.ts"],"names":[],"mappings":"AAAA,OAAoB,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAmB,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMzE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMpD,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC,eAAO,MAAM,YAAY,cAoBvB,CAAC;AAYH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,GACvB,GAAG,MAAM,CAAC,oBAAoB,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,SAI3D,CAAC;AAEF,eAAO,MAAQ,GAAG,iHAIhB,CAAC;AAGH,eAAO,MAAQ,UAAU;QAEV,CAAC;UAIV,CAAC;;;cAE+b,CAAC;;;;;;GAR5a,UAAU;;;;;;;;;;;;;;YAtBiB,CAAC;cAIpD,CAAC;;;iBAQF,CAAC;eAAyC,CAAC;;;;GAUN,SAAS;;;;CAG9C,CAAC;AAEH,eAAO,MAAQ,EAAE,0BAAE,GAAG,yBAEpB,CAAC"}

package/styles/tss/index.js

@@ -1,21 +1,80 @@
 import createCache from '@emotion/cache';
+import { serializeStyles } from '@emotion/serialize';
 import { createMakeAndWithStyles, createTss } from 'tss-react';
+import { createCssAndCx } from 'tss-react/cssAndCx';
 import { useTheme } from '@shopgate/engage/styles';
 export { GlobalStyles, keyframes } from 'tss-react';
+const insertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+export const CLASS_PREFIX = 'sg';
 export const emotionCache = createCache({
   // All tss-react styles will be prefixed with `.tss-*` instead of `.css-*`
-  key: 'tss'
+  key: CLASS_PREFIX,
+  /**
+   * We define a custom Emotion insertion point to control the order in which
+   * TSS (Emotion-based) styles are injected into the document.
+   *
+   * This is required because the application is in a transition phase from
+   * glamor to tss-react. Both libraries generate CSS classes with equal
+   * specificity (single class selectors), so the final applied styles depend
+   * on stylesheet injection order.
+   *
+   * By inserting Emotion styles at a deterministic position (typically before
+   * glamor styles), we ensure that legacy glamor className overrides continue
+   * to work as expected during the migration.
+   *
+   * Without this, TSS styles may be injected later and unintentionally override
+   * existing glamor-based styles, leading to visual regressions.
+   */
+  insertionPoint
 });
+
+// eslint-disable-next-line consistent-return
+function insertWithoutScoping(cache, serialized) {
+  if (cache.inserted[serialized.name] === undefined) {
+    return cache.insert('', serialized, cache.sheet, true);
+  }
+}
+
+/**
+ * Injects global CSS rules into the application.
+ *
+ * This is a programmatic alternative to the `GlobalStyles` component from `@shopgate/engage/styles`,
+ * allowing global styles to be defined outside of React components.
+ * It should be avoided when possible in favor of `GlobalStyles` for better integration with React's
+ * rendering lifecycle.
+ *
+ * Styles are applied as written (e.g. `body`, `*`, `.class`).
+ *
+ * @param args Styles to apply globally
+ * @example
+ * injectGlobal({
+ *   body: { margin: 0 }
+ * });
+ */
+export const injectGlobal = (...args) => {
+  const serialized = serializeStyles(args, emotionCache.registered);
+  insertWithoutScoping(emotionCache, serialized);
+};
 export const {
   tss
 } = createTss({
-  useContext: useTheme
+  // @ts-expect-error - We are sure about the type here
+  useContext: useTheme,
+  cache: emotionCache
 });
 
 // Create makeStyles and withStyles functions for tss-react package
 export const {
   makeStyles,
-  withStyles
+  withStyles,
+  useStyles
 } = createMakeAndWithStyles({
-  useTheme
+  useTheme,
+  cache: emotionCache
+});
+export const {
+  cx,
+  css
+} = createCssAndCx({
+  cache: emotionCache
 });