pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.2

package/dist/Theme/chakra/componentStyles.d.ts

@@ -1,5 +1,37 @@
 import { ComponentStyleConfig, StyleFunctionProps } from "@chakra-ui/react";
+declare const $alertFg: {
+    variable: string;
+    reference: string;
+};
+declare const $alertBg: {
+    variable: string;
+    reference: string;
+};
 export declare const componentStyles: {
+    Alert: {
+        baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+        }> | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+            }>;
+        } | undefined;
+        variants?: {
+            solid: ({ theme, colorScheme }: StyleFunctionProps) => {
+                container: {
+                    [$alertBg.variable]: string;
+                    [$alertFg.variable]: string;
+                };
+            };
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: "solid" | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("title" | "container" | "icon" | "spinner" | "description")[];
+    };
     Checkbox: ComponentStyleConfig;
     Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Input: ComponentStyleConfig;
@@ -13,19 +45,19 @@ export declare const componentStyles: {
     Drawer: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -33,7 +65,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
     };
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -82,19 +114,19 @@ export declare const componentStyles: {
     Modal: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -102,7 +134,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
     };
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -114,12 +146,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -127,12 +159,12 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+        parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
     };
     Slider: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             thumb: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
             };
         }) | undefined;
@@ -190,14 +222,14 @@ export declare const componentStyles: {
             enclosed: ({ theme }: StyleFunctionProps) => {
                 tab: {
                     _selected: {
-                        [x: string]: any;
+                        [x: string]: string;
                     };
                 };
             };
             "enclosed-colored": ({ theme }: StyleFunctionProps) => {
                 tab: {
                     _selected: {
-                        [x: string]: any;
+                        [x: string]: string;
                     };
                 };
             };
@@ -212,20 +244,20 @@ export declare const componentStyles: {
     Avatar: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             badge: {
-                [x: string]: any;
+                [x: string]: string;
             };
             container: {
-                [x: string]: any;
+                [x: string]: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -233,9 +265,10 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+        parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;
     CloseButton: import("@chakra-ui/react").ComponentSingleStyleConfig;
 };
+export {};

package/dist/Theme/chakra/componentStyles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentStyles = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
+const anatomy_1 = require("@chakra-ui/anatomy");
 const react_1 = require("@chakra-ui/react");
 const Button_styles_1 = require("../../Components/Button/Button.styles");
 const Checkbox_styles_1 = require("../../Components/Checkbox/Checkbox.styles");
@@ -30,14 +32,12 @@ const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a
 const Badge = {
     variants: {
         solid: ({ theme, colorScheme = "gray" }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
-            const bg = swatch === null || swatch === void 0 ? void 0 : swatch[500];
-            const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#fff";
-            const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000";
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            const bg = swatch[500];
             return {
                 bg,
-                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, white, black) : swatch === null || swatch === void 0 ? void 0 : swatch[800],
+                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, palette.white, palette.black) : swatch[800],
             };
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
@@ -45,11 +45,11 @@ const Badge = {
         // it always takes the light-mode branch. Applied to our mode-reversed dark scales, that
         // branch's fixed rung pair (100/800) measures 4.06 in dark mode, just under AA.
         subtle: ({ theme, colorScheme = "gray" }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
-            const bg = (_e = swatch === null || swatch === void 0 ? void 0 : swatch[100]) !== null && _e !== void 0 ? _e : swatch === null || swatch === void 0 ? void 0 : swatch[50];
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            const bg = swatch[100];
             if (!isHexColor(bg))
-                return { bg, color: swatch === null || swatch === void 0 ? void 0 : swatch[800] };
+                return { bg, color: swatch[800] };
             // accentTextOnCanvas keeps brand hue by trying this scale's own rungs first, but some
             // narrow-gamut hues (e.g. yellow) don't reach far enough at either end to clear AA against
             // every bg they can land on in dark mode (measured 4.42 for a reversed-yellow badge) — its
@@ -59,9 +59,7 @@ const Badge = {
             const accent = (0, accentText_1.accentTextOnCanvas)(swatch, bg);
             if ((0, color_1.contrastRatio)(accent, bg) >= 4.5)
                 return { bg, color: accent };
-            const white = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.white) !== null && _g !== void 0 ? _g : "#fff";
-            const black = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.black) !== null && _j !== void 0 ? _j : "#000";
-            return { bg, color: (0, accentText_1.onFilled)(bg, white, black) };
+            return { bg, color: (0, accentText_1.onFilled)(bg, palette.white, palette.black) };
         },
     },
     defaultProps: {
@@ -75,16 +73,35 @@ const Badge = {
 // unfixed.
 const FormError = {
     baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d;
         // `icon` (FormErrorIcon) shares the same AA gap as `text` — both must be fixed together or
         // the icon stays on Chakra's raw `red.500`.
-        const color = (0, accentText_1.accentTextOnCanvas)((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.red, (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+        const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+        const color = (0, accentText_1.accentTextOnCanvas)(palette.red, palette.backgroundColor.main);
         return {
             text: { color },
             icon: { color },
         };
     },
 };
+const $alertFg = (0, react_1.cssVar)("alert-fg");
+const $alertBg = (0, react_1.cssVar)("alert-bg");
+const { defineMultiStyleConfig: defineAlertStyles, definePartsStyle: defineAlertParts } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.alertAnatomy.keys);
+const Alert = defineAlertStyles({
+    variants: {
+        solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const bg = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme)[500];
+            if (!isHexColor(bg))
+                return { container: {} };
+            return {
+                container: {
+                    [$alertBg.variable]: bg,
+                    [$alertFg.variable]: (0, accentText_1.onFilled)(bg, palette.white, palette.black),
+                },
+            };
+        }),
+    },
+});
 const $tooltipBg = (0, react_1.cssVar)("tooltip-bg");
 const $tooltipFg = (0, react_1.cssVar)("tooltip-fg");
 /**
@@ -98,13 +115,10 @@ const $tooltipFg = (0, react_1.cssVar)("tooltip-fg");
  * deliberately never remaps, so they stay a stable dark-bg/white-text pair in both modes.
  */
 const Tooltip = {
-    baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d;
-        return ({
-            [$tooltipBg.variable]: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black) !== null && _b !== void 0 ? _b : "colors.gray.700",
-            [$tooltipFg.variable]: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white) !== null && _d !== void 0 ? _d : "colors.whiteAlpha.900",
-        });
-    },
+    baseStyle: ({ theme }) => ({
+        [$tooltipBg.variable]: theme.colors.black,
+        [$tooltipFg.variable]: theme.colors.white,
+    }),
 };
 const $skeletonStart = (0, react_1.cssVar)("skeleton-start-color");
 const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
@@ -118,15 +132,12 @@ const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
  * prop still wins via that mechanism, this only supplies the default the base style already owns.
  */
 const Skeleton = {
-    baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d, _e, _f;
-        return ({
-            [$skeletonStart.variable]: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[100]) !== null && _c !== void 0 ? _c : "colors.gray.100",
-            [$skeletonEnd.variable]: (_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : "colors.gray.400",
-            background: $skeletonStart.reference,
-            borderColor: $skeletonEnd.reference,
-        });
-    },
+    baseStyle: ({ theme }) => ({
+        [$skeletonStart.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[100],
+        [$skeletonEnd.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[300],
+        background: $skeletonStart.reference,
+        borderColor: $skeletonEnd.reference,
+    }),
 };
 // Chakra's `extendTheme` does not REPLACE a component's stock baseStyle when ours is also a
 // function — it calls BOTH and deep-merges the two returned plain objects, key by key. Chakra's
@@ -142,12 +153,9 @@ const Skeleton = {
 // behavior directly rather than only the function output).
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const swatch = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme];
-        const fill = (_b = swatch === null || swatch === void 0 ? void 0 : swatch[500]) !== null && _b !== void 0 ? _b : (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500];
-        const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#ffffff";
-        const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000000";
-        const dot = (0, accentText_1.onFilled)(fill, white, black);
+        const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+        const fill = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme)[500];
+        const dot = (0, accentText_1.onFilled)(fill, palette.white, palette.black);
         // A browser probe found the checked radio's hover repeating its own resting `fill` —
         // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
         // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;
@@ -156,7 +164,7 @@ const Radio = {
         const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
         return {
             control: {
-                borderColor: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.boxborder) === null || _k === void 0 ? void 0 : _k[500],
+                borderColor: palette.boxborder[500],
                 _checked: {
                     bg: `${fill} !important`,
                     borderColor: `${fill} !important`,
@@ -190,16 +198,17 @@ const $closeButtonBg = (0, react_1.cssVar)("close-button-bg");
  */
 const CloseButton = {
     baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d, _e;
-        const dark = (0, accentText_1.isDarkCanvas)((_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
-        const alpha = dark ? (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.whiteAlpha : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blackAlpha;
+        const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+        const dark = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main);
+        const alpha = (0, paletteFromTheme_1.scaleFor)(palette, dark ? "whiteAlpha" : "blackAlpha");
         return {
-            _hover: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[200] },
-            _active: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[300] },
+            _hover: { [$closeButtonBg.variable]: alpha[200] },
+            _active: { [$closeButtonBg.variable]: alpha[300] },
         };
     },
 };
 exports.componentStyles = {
+    Alert,
     Checkbox: Checkbox_styles_1.Checkbox,
     Radio,
     Input: TextInput_styles_1.Input,

package/dist/Theme/chakra/paletteFromTheme.d.ts

@@ -0,0 +1,10 @@
+import type { ColorScale, PaletteProps } from "../tokens/types";
+/** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
+export declare const paletteOf: (theme: {
+    colors?: unknown;
+}) => PaletteProps;
+/**
+ * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
+ * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
+ */
+export declare const scaleFor: (palette: PaletteProps, colorScheme: string) => ColorScale;

package/dist/Theme/chakra/paletteFromTheme.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleFor = exports.paletteOf = void 0;
+const assertPalette_1 = require("../assertPalette");
+/** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
+const paletteOf = (theme) => (0, assertPalette_1.assertPixelizePalette)(theme);
+exports.paletteOf = paletteOf;
+const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
+/**
+ * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
+ * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
+ */
+const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+exports.scaleFor = scaleFor;

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -115,6 +115,11 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
     (0, react_1.useLayoutEffect)(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
+    // Chakra's ColorModeProvider re-writes color-scheme in a passive effect, after the layout
+    // effect above, and forcedLightColorModeManager pins it to "light". Re-assert after it.
+    (0, react_1.useEffect)(() => {
+        document.documentElement.style.colorScheme = resolvedMode;
+    }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
     // invalidate the context value on every render of the consuming app. Written in a layout
     // effect, not during render — a render-phase write is unsafe under StrictMode's double

package/dist/Theme/testing/testPalette.d.ts

@@ -0,0 +1,16 @@
+import type { PaletteProps, ResolvedColorMode, ThemeName } from "../tokens/types";
+/** Any depth: a token may be partially overridden, never partially defined. */
+export type DeepPartial<T> = T extends string ? T : {
+    [K in keyof T]?: DeepPartial<T[K]>;
+};
+export type PaletteOverrides = DeepPartial<PaletteProps>;
+export type TestPaletteOptions = {
+    brand?: ThemeName;
+    mode?: ResolvedColorMode;
+    overrides?: PaletteOverrides;
+};
+/** A complete palette for tests. Overrides layer onto a real brand, never replace a group. */
+export declare const testPalette: (options?: TestPaletteOptions) => PaletteProps;
+export declare const testTheme: (options?: TestPaletteOptions) => {
+    colors: PaletteProps;
+};

package/dist/Theme/testing/testPalette.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testTheme = exports.testPalette = void 0;
+const brands_1 = require("../tokens/brands");
+const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const deepMerge = (base, patch) => {
+    if (!isPlainObject(base) || !isPlainObject(patch))
+        return patch;
+    const out = { ...base };
+    for (const [key, value] of Object.entries(patch))
+        out[key] = deepMerge(base[key], value);
+    return out;
+};
+/** A complete palette for tests. Overrides layer onto a real brand, never replace a group. */
+const testPalette = (options = {}) => {
+    const { brand = "lavender", mode = "light", overrides = {} } = options;
+    const base = mode === "dark" ? brands_1.darkPalettes[brand] : brands_1.lightPalettes[brand];
+    return deepMerge(base, overrides);
+};
+exports.testPalette = testPalette;
+const testTheme = (options = {}) => ({
+    colors: (0, exports.testPalette)(options),
+});
+exports.testTheme = testTheme;