@shopgate/engage 7.32.0-beta.8 → 7.32.0-beta.9

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,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,GAC1D,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"}
+{"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/providers/ColorSchemeContext.d.ts

@@ -1,19 +1,40 @@
-import { type Dispatch, type SetStateAction } from 'react';
-import { type ColorSchemeName } from '../createTheme';
+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 current color scheme (e.g., 'light' or 'dark')
+     * The mode in effect: the one the visitor picked, or the configured default while they picked
+     * none.
      */
-    mode: ColorSchemeName | null;
+    mode: ColorSchemeMode;
     /**
-     * Function to update the color scheme
+     * The mode that applies while the visitor picked none, as configured within the app settings.
      */
-    setMode: Dispatch<SetStateAction<ColorSchemeName | null>>;
+    defaultMode: ColorSchemeMode;
     /**
-     * The modes the active theme actually provides. Only these can be set - passing anything else
-     * to setMode has no effect.
+     * The color scheme that is applied - the mode resolved against the operating system and the
+     * configured default. Components style against this one.
      */
-    modes: ColorSchemeName[];
+    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

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeContext.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ColorSchemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D;;;OAGG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,kDAI7B,CAAC"}
+{"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

@@ -1,6 +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,6 +1,6 @@
-import { type Theme, type ThemeInternal } from '../createTheme';
+import { type ThemeInternal } from '../createTheme';
 export { ColorSchemeContext, type ColorSchemeContextValue } from './ColorSchemeContext';
-export declare const ThemeContext: import("react").Context<Theme>;
+export { ThemeContext } from './ThemeContext';
 type ThemeProviderProps = {
     /**
      * The theme object to provide to the context.

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":"AAUA,OAAO,EACL,KAAK,KAAK,EAAE,KAAK,aAAa,EAC/B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAExF,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAwE/D,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtEE,kBAAkB;AAwErB,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"}

package/styles/theme/providers/ThemeProvider.js

@@ -1,15 +1,22 @@
 import "core-js/modules/es.array.includes.js";
-import { createContext, memo, useCallback, useMemo, useLayoutEffect } from 'react';
+import { memo, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { useSelector } from 'react-redux';
 import useLocalStorage from '@shopgate/engage/core/hooks/useLocalStorage';
 import { logger } from '@shopgate/engage/core/helpers';
 import { GlobalStyles } from '@shopgate/engage/styles';
 import { isFrontendSettingsAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { FrontendSettingsPreviewBridge } from '@shopgate/engage/admin-preview/components';
+// Imported via its module path rather than a settings barrel, to keep this module out of an import
+// cycle - the settings types reach back into the "styles/theme" barrel, which exports this file.
+import { getCanSelectColorScheme, getDefaultColorSchemeMode } from '@shopgate/engage/settings/selectors/appSettings';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
 import { ColorSchemeContext } from "./ColorSchemeContext";
+import { ThemeContext } from "./ThemeContext";
+import { useMatchMedia } from "../hooks/useMediaQuery";
+import { COLOR_SCHEME_SYSTEM } from "../createTheme";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { ColorSchemeContext } from "./ColorSchemeContext";
-export const ThemeContext = /*#__PURE__*/createContext({});
+export { ThemeContext } from "./ThemeContext";
 
 /**
  * The ThemeProvider component provides the theme context to its children.
@@ -19,36 +26,71 @@ const ThemeProvider = ({
   theme
 }) => {
   // The color schemes the active theme actually provides. createTheme() can be configured with only
-  // a subset of the possible schemes (it defaults to just `light`), so `modes` and the validation
+  // a subset of the possible schemes (it defaults to just `light`), so this list and the validation
   // below are derived from the resolved theme rather than the full COLOR_SCHEME_NAMES tuple.
   // Otherwise the provider could expose and accept a scheme (e.g. `dark`) the theme doesn't style,
   // and setActiveColorScheme would flip the root selector to an unstyled scheme.
-  const modes = useMemo(() => Object.keys(theme.colorSchemes), [theme]);
-  const [activeColorScheme, setActiveColorScheme] = useLocalStorage('persistedColorScheme', {
-    initialValue: theme.defaultColorScheme,
+  const colorSchemes = useMemo(() => Object.keys(theme.colorSchemes), [theme]);
+  const defaultMode = useSelector(getDefaultColorSchemeMode);
+  const isColorSchemeSelectable = useSelector(getCanSelectColorScheme);
+
+  // Whether the merchant lets visitors choose. A binding `light` or `dark` rules a pick out, so one
+  // left over from when selecting still was allowed does not keep overriding it. Development builds
+  // have no app settings to configure at all, so both schemes stay reachable there.
+  const canSelectColorScheme = isColorSchemeSelectable || process.env.NODE_ENV === 'development';
+  const prefersDarkColorScheme = useMatchMedia('(prefers-color-scheme: dark)');
+  const systemColorScheme = prefersDarkColorScheme ? 'dark' : 'light';
+  const [pickedMode, setPersistedMode] = useLocalStorage('persistedColorScheme', {
     // The frontend settings preview runs the app in an iframe on the shop origin. Persisting the
     // color scheme there would write the admin's preview choice into the visitor's own storage and
     // outlive the preview, so the scheme is kept in memory only while previewing.
     persist: !isFrontendSettingsAdminPreviewActive()
   });
 
+  // The preview forces a scheme through the same setter to show the admin either appearance, which
+  // has to work regardless of what the previewed settings configure. It stays out of
+  // `canSelectColorScheme`, so the previewed shop offers a picker exactly where visitors get one.
+  const isPickApplied = canSelectColorScheme || isFrontendSettingsAdminPreviewActive();
+
+  // The mode the visitor picked wins where it applies, otherwise the configured one does. Resolving
+  // that on every render rather than seeding the storage with it keeps `system` following the
+  // operating system and lets the preview apply the merchant's edits live.
+  const mode = isPickApplied && pickedMode || defaultMode;
+  const resolvedColorScheme = useMemo(() => mode === COLOR_SCHEME_SYSTEM ? systemColorScheme : mode, [mode, systemColorScheme]);
+  const isSupportedColorScheme = colorSchemes.includes(resolvedColorScheme);
+  const activeColorScheme = isSupportedColorScheme ? resolvedColorScheme : theme.defaultColorScheme ?? null;
+  useEffect(() => {
+    if (isSupportedColorScheme) return;
+    logger.warn(`ThemeProvider: "${resolvedColorScheme}" is not a supported color scheme.`);
+  }, [isSupportedColorScheme, resolvedColorScheme]);
+
+  // What a picker can offer and what setMode accepts. 'system' is not a scheme the theme styles -
+  // it resolves to one above - so it is added here rather than derived from the theme.
+  const modes = useMemo(() => [].concat(colorSchemes, [COLOR_SCHEME_SYSTEM]), [colorSchemes]);
+
   // Wraps the raw storage setter, so an unsupported mode is rejected before it is persisted.
-  // Setting null is allowed and clears the stored preference.
+  // Setting null is allowed and clears the stored preference, which returns to the configured one.
   const setMode = useCallback(value => {
-    setActiveColorScheme(currentColorScheme => {
-      const nextColorScheme = typeof value === 'function' ? value(currentColorScheme) : value;
-      if (nextColorScheme !== null && !modes.includes(nextColorScheme)) {
-        logger.warn(`ThemeProvider: "${nextColorScheme}" is not a supported color scheme.`);
-        return currentColorScheme;
+    setPersistedMode(currentMode => {
+      // An updater is resolved the same way `mode` is, so it sees what the context exposes rather
+      // than the storage behind it - which holds no value yet, or one that is currently ignored.
+      const effectiveMode = isPickApplied && currentMode || defaultMode;
+      const nextMode = typeof value === 'function' ? value(effectiveMode) : value;
+      if (nextMode !== null && !modes.includes(nextMode)) {
+        logger.warn(`ThemeProvider: "${nextMode}" is not a supported color scheme.`);
+        return currentMode;
       }
-      return nextColorScheme;
+      return nextMode;
     });
-  }, [modes, setActiveColorScheme]);
+  }, [defaultMode, isPickApplied, modes, setPersistedMode]);
   const colorSchemeContextValue = useMemo(() => ({
-    mode: activeColorScheme,
+    mode,
+    defaultMode,
+    activeColorScheme,
+    canSelectColorScheme,
     setMode,
     modes
-  }), [activeColorScheme, modes, setMode]);
+  }), [mode, defaultMode, activeColorScheme, canSelectColorScheme, modes, setMode]);
   useLayoutEffect(() => {
     if (!activeColorScheme) return;
     theme.setActiveColorScheme(activeColorScheme);

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

@@ -24,7 +24,7 @@ export declare const getContrastRatio: (color: string, color2: string, backgroun
  * @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> | {
+export declare const toHex: (color: ColorInstance, returnType?: ColorType) => 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 | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -48,14 +48,14 @@ export declare const toHex: (color: ColorInstance, returnType?: ColorType) => st
     [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> | {
+export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => 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 | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -79,14 +79,14 @@ export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => st
     [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> | {
+export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => 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 | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -110,7 +110,7 @@ export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Adds hsl lightness to a color
  * @param color The color to modify.
@@ -118,7 +118,7 @@ export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => st
  * @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> | {
+export declare const addLightness: (color: ColorInstance, value: number, type?: ColorType) => 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 | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -142,7 +142,7 @@ export declare const addLightness: (color: ColorInstance, value: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Lightens a color by a given offset
  * @param color The color to modify.
@@ -150,7 +150,7 @@ export declare const addLightness: (color: ColorInstance, value: number, type?:
  * @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> | {
+export declare const lighten: (color: ColorInstance, totalOffset: number, type?: ColorType) => 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 | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -174,7 +174,7 @@ export declare const lighten: (color: ColorInstance, totalOffset: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Darkens a color by a given offset
  * @param color The color to modify.
@@ -182,7 +182,7 @@ export declare const lighten: (color: ColorInstance, totalOffset: number, type?:
  * @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> | {
+export declare const darken: (color: ColorInstance, totalOffset: number, type?: ColorType) => 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 | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -206,6 +206,6 @@ export declare const darken: (color: ColorInstance, totalOffset: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 export {};
 //# sourceMappingURL=color.d.ts.map

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,aAAa,EACpB,OAAO,MAAM,EACb,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACkC,CAAC;AAC5D;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACsC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACqC,CAAC"}