@envive-ai/react-toolkit-v3 0.3.5

package/dist/CSSVariablesEditor/hooks/useGetCssVariablesOptions.cjs

@@ -0,0 +1,120 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_colors = require('../../components-v3/tokens/colors/colors.cjs');
+const require_aspectRatio = require('../../components-v3/tokens/aspectRatio/aspectRatio.cjs');
+const require_theme = require('../../components-v3/tokens/theme/theme.cjs');
+let react = require("react");
+
+//#region src/components/CSSVariablesEditor/hooks/useGetCssVariablesOptions.ts
+const useGetCssVariablesOptions = () => {
+	return {
+		aspectRatioOptions: (0, react.useMemo)(() => [{
+			label: "Square",
+			value: require_aspectRatio.AspectRatio.SQUARE
+		}, {
+			label: "Portrait",
+			value: require_aspectRatio.AspectRatio.PORTRAIT
+		}], []),
+		themeOptions: (0, react.useMemo)(() => [
+			{
+				label: "Standard",
+				value: require_theme.Theme.STANDARD
+			},
+			{
+				label: "Modern",
+				value: require_theme.Theme.MODERN
+			},
+			{
+				label: "Minimal",
+				value: require_theme.Theme.MINIMAL
+			}
+		], []),
+		lightButtonBackgroundOptions: (0, react.useMemo)(() => [
+			{
+				label: "Background Secondary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundSecondary})`
+			},
+			{
+				label: "Background Tertiary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundTertiary})`
+			},
+			{
+				label: "Background Light",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundLight})`
+			},
+			{
+				label: "Background Primary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundPrimary})`
+			}
+		], []),
+		lightButtonIconOptions: (0, react.useMemo)(() => [
+			{
+				label: "Background Secondary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundSecondary})`
+			},
+			{
+				label: "Background Tertiary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundTertiary})`
+			},
+			{
+				label: "Background Light",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundLight})`
+			},
+			{
+				label: "Background Dark",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundDark})`
+			},
+			{
+				label: "Background Primary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundPrimary})`
+			},
+			{
+				label: "Accent Primary",
+				value: `var(--${require_colors.ColorsNamesVars.AccentPrimary})`
+			},
+			{
+				label: "Accent Secondary",
+				value: `var(--${require_colors.ColorsNamesVars.AccentSecondary})`
+			}
+		], []),
+		darkButtonBackgroundOptions: (0, react.useMemo)(() => [{
+			label: "Background Dark",
+			value: `var(--${require_colors.ColorsNamesVars.BackgroundDark})`
+		}, {
+			label: "Background Primary",
+			value: `var(--${require_colors.ColorsNamesVars.BackgroundPrimary})`
+		}], []),
+		darkButtonIconOptions: (0, react.useMemo)(() => [
+			{
+				label: "Background Secondary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundSecondary})`
+			},
+			{
+				label: "Background Tertiary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundTertiary})`
+			},
+			{
+				label: "Background Light",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundLight})`
+			},
+			{
+				label: "Background Dark",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundDark})`
+			},
+			{
+				label: "Background Primary",
+				value: `var(--${require_colors.ColorsNamesVars.BackgroundPrimary})`
+			},
+			{
+				label: "Accent Primary",
+				value: `var(--${require_colors.ColorsNamesVars.AccentPrimary})`
+			},
+			{
+				label: "Accent Secondary",
+				value: `var(--${require_colors.ColorsNamesVars.AccentSecondary})`
+			}
+		], [])
+	};
+};
+
+//#endregion
+exports.useGetCssVariablesOptions = useGetCssVariablesOptions;

package/dist/CSSVariablesEditor/hooks/useGetCssVariablesOptions.js

@@ -0,0 +1,119 @@
+import { ColorsNamesVars } from "../../components-v3/tokens/colors/colors.js";
+import { AspectRatio } from "../../components-v3/tokens/aspectRatio/aspectRatio.js";
+import { Theme } from "../../components-v3/tokens/theme/theme.js";
+import { useMemo } from "react";
+
+//#region src/components/CSSVariablesEditor/hooks/useGetCssVariablesOptions.ts
+const useGetCssVariablesOptions = () => {
+	return {
+		aspectRatioOptions: useMemo(() => [{
+			label: "Square",
+			value: AspectRatio.SQUARE
+		}, {
+			label: "Portrait",
+			value: AspectRatio.PORTRAIT
+		}], []),
+		themeOptions: useMemo(() => [
+			{
+				label: "Standard",
+				value: Theme.STANDARD
+			},
+			{
+				label: "Modern",
+				value: Theme.MODERN
+			},
+			{
+				label: "Minimal",
+				value: Theme.MINIMAL
+			}
+		], []),
+		lightButtonBackgroundOptions: useMemo(() => [
+			{
+				label: "Background Secondary",
+				value: `var(--${ColorsNamesVars.BackgroundSecondary})`
+			},
+			{
+				label: "Background Tertiary",
+				value: `var(--${ColorsNamesVars.BackgroundTertiary})`
+			},
+			{
+				label: "Background Light",
+				value: `var(--${ColorsNamesVars.BackgroundLight})`
+			},
+			{
+				label: "Background Primary",
+				value: `var(--${ColorsNamesVars.BackgroundPrimary})`
+			}
+		], []),
+		lightButtonIconOptions: useMemo(() => [
+			{
+				label: "Background Secondary",
+				value: `var(--${ColorsNamesVars.BackgroundSecondary})`
+			},
+			{
+				label: "Background Tertiary",
+				value: `var(--${ColorsNamesVars.BackgroundTertiary})`
+			},
+			{
+				label: "Background Light",
+				value: `var(--${ColorsNamesVars.BackgroundLight})`
+			},
+			{
+				label: "Background Dark",
+				value: `var(--${ColorsNamesVars.BackgroundDark})`
+			},
+			{
+				label: "Background Primary",
+				value: `var(--${ColorsNamesVars.BackgroundPrimary})`
+			},
+			{
+				label: "Accent Primary",
+				value: `var(--${ColorsNamesVars.AccentPrimary})`
+			},
+			{
+				label: "Accent Secondary",
+				value: `var(--${ColorsNamesVars.AccentSecondary})`
+			}
+		], []),
+		darkButtonBackgroundOptions: useMemo(() => [{
+			label: "Background Dark",
+			value: `var(--${ColorsNamesVars.BackgroundDark})`
+		}, {
+			label: "Background Primary",
+			value: `var(--${ColorsNamesVars.BackgroundPrimary})`
+		}], []),
+		darkButtonIconOptions: useMemo(() => [
+			{
+				label: "Background Secondary",
+				value: `var(--${ColorsNamesVars.BackgroundSecondary})`
+			},
+			{
+				label: "Background Tertiary",
+				value: `var(--${ColorsNamesVars.BackgroundTertiary})`
+			},
+			{
+				label: "Background Light",
+				value: `var(--${ColorsNamesVars.BackgroundLight})`
+			},
+			{
+				label: "Background Dark",
+				value: `var(--${ColorsNamesVars.BackgroundDark})`
+			},
+			{
+				label: "Background Primary",
+				value: `var(--${ColorsNamesVars.BackgroundPrimary})`
+			},
+			{
+				label: "Accent Primary",
+				value: `var(--${ColorsNamesVars.AccentPrimary})`
+			},
+			{
+				label: "Accent Secondary",
+				value: `var(--${ColorsNamesVars.AccentSecondary})`
+			}
+		], [])
+	};
+};
+
+//#endregion
+export { useGetCssVariablesOptions };

package/dist/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.cjs

@@ -0,0 +1,165 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_colorsConfig = require('../../components-v3/src/models/colorsConfig.cjs');
+const require_utils = require('../../DesignTokens/components/utils.cjs');
+let react = require("react");
+
+//#region src/components/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.ts
+const defaultMerchantTest = {
+	devApiKey: "242fa4217b8b3db70e3a20f9740430afd87033d8f0b15e608ec8c42d5409094b",
+	domains: ["semantic-colors-test.com"],
+	name: "semantic-colors-test",
+	prodApiKey: "242fa4217b8b3db70e3a20f9740430afd87033d8f0b15e608ec8c42d5409094b"
+};
+const standardColors = {
+	[require_colorsConfig.ColorNames.TextPrimary]: "#021414",
+	[require_colorsConfig.ColorNames.TextSecondary]: "#666666",
+	[require_colorsConfig.ColorNames.TextAccent]: "#478D87",
+	[require_colorsConfig.ColorNames.TextLink]: "#042E2C",
+	[require_colorsConfig.ColorNames.TextLight]: "#FFFFFF",
+	[require_colorsConfig.ColorNames.BackgroundPrimary]: "#1F5F51",
+	[require_colorsConfig.ColorNames.BackgroundSecondary]: "#F9F6EA",
+	[require_colorsConfig.ColorNames.BackgroundSecondaryDark]: "#EEECDD",
+	[require_colorsConfig.ColorNames.BackgroundTertiary]: "#EEECDD",
+	[require_colorsConfig.ColorNames.BackgroundDark]: "#021414",
+	[require_colorsConfig.ColorNames.BackgroundLight]: "#FFFFFF",
+	[require_colorsConfig.ColorNames.BackgroundSaturated]: "#FFFFFF",
+	[require_colorsConfig.ColorNames.BorderLight]: "#E6E7E7",
+	[require_colorsConfig.ColorNames.BorderMedium]: "#B3B8B8",
+	[require_colorsConfig.ColorNames.BorderDark]: "#021414",
+	[require_colorsConfig.ColorNames.AccentPrimary]: "#1F5F51",
+	[require_colorsConfig.ColorNames.AccentSecondary]: "#AE8659"
+};
+const getSpiffyColors = () => {
+	return {
+		[require_colorsConfig.ColorNames.TextPrimary]: require_utils.getCSSVariable("--spiffy-colors-text-primary") || require_utils.getCSSVariable("--envive-colors-text-primary"),
+		[require_colorsConfig.ColorNames.TextSecondary]: require_utils.getCSSVariable("--spiffy-colors-text-secondary") || require_utils.getCSSVariable("--envive-colors-text-secondary"),
+		[require_colorsConfig.ColorNames.TextAccent]: require_utils.getCSSVariable("--spiffy-colors-text-accent") || require_utils.getCSSVariable("--envive-colors-text-accent"),
+		[require_colorsConfig.ColorNames.TextLink]: require_utils.getCSSVariable("--spiffy-colors-text-link") || require_utils.getCSSVariable("--envive-colors-text-link"),
+		[require_colorsConfig.ColorNames.TextLight]: require_utils.getCSSVariable("--spiffy-colors-text-light") || require_utils.getCSSVariable("--envive-colors-text-light"),
+		[require_colorsConfig.ColorNames.BackgroundPrimary]: require_utils.getCSSVariable("--spiffy-colors-background-primary") || require_utils.getCSSVariable("--envive-colors-background-primary"),
+		[require_colorsConfig.ColorNames.BackgroundSecondary]: require_utils.getCSSVariable("--spiffy-colors-background-secondary") || require_utils.getCSSVariable("--envive-colors-background-secondary"),
+		[require_colorsConfig.ColorNames.BackgroundSecondaryDark]: require_utils.getCSSVariable("--spiffy-colors-background-secondary-dark") || require_utils.getCSSVariable("--envive-colors-background-secondary-dark"),
+		[require_colorsConfig.ColorNames.BackgroundTertiary]: require_utils.getCSSVariable("--spiffy-colors-background-tertiary") || require_utils.getCSSVariable("--envive-colors-background-tertiary"),
+		[require_colorsConfig.ColorNames.BackgroundDark]: require_utils.getCSSVariable("--spiffy-colors-background-dark") || require_utils.getCSSVariable("--envive-colors-background-dark"),
+		[require_colorsConfig.ColorNames.BackgroundLight]: require_utils.getCSSVariable("--spiffy-colors-background-light") || require_utils.getCSSVariable("--envive-colors-background-light"),
+		[require_colorsConfig.ColorNames.BackgroundSaturated]: require_utils.getCSSVariable("--spiffy-colors-background-saturated") || require_utils.getCSSVariable("--envive-colors-background-saturated"),
+		[require_colorsConfig.ColorNames.BorderLight]: require_utils.getCSSVariable("--spiffy-colors-border-light") || require_utils.getCSSVariable("--envive-colors-border-light"),
+		[require_colorsConfig.ColorNames.BorderMedium]: require_utils.getCSSVariable("--spiffy-colors-border-medium") || require_utils.getCSSVariable("--envive-colors-border-medium"),
+		[require_colorsConfig.ColorNames.BorderDark]: require_utils.getCSSVariable("--spiffy-colors-border-dark") || require_utils.getCSSVariable("--envive-colors-border-dark"),
+		[require_colorsConfig.ColorNames.AccentPrimary]: require_utils.getCSSVariable("--spiffy-colors-accent-primary") || require_utils.getCSSVariable("--envive-colors-accent-primary"),
+		[require_colorsConfig.ColorNames.AccentSecondary]: require_utils.getCSSVariable("--spiffy-colors-accent-secondary") || require_utils.getCSSVariable("--envive-colors-accent-secondary")
+	};
+};
+const areColorMappingsEqual = (a, b) => {
+	for (const key in require_colorsConfig.ColorNames) if (Object.prototype.hasOwnProperty.call(require_colorsConfig.ColorNames, key)) {
+		const colorKey = require_colorsConfig.ColorNames[key];
+		if (a[colorKey] !== b[colorKey]) return false;
+	}
+	return true;
+};
+const useGetCurrentMerchantColors = (selectedMerchant) => {
+	const [currentColors, setCurrentColors] = (0, react.useState)(() => {
+		if (selectedMerchant === defaultMerchantTest.name) return standardColors;
+		return getSpiffyColors();
+	});
+	(0, react.useEffect)(() => {
+		if (selectedMerchant === defaultMerchantTest.name) {
+			setCurrentColors((prev) => {
+				if (areColorMappingsEqual(prev, standardColors)) return prev;
+				return standardColors;
+			});
+			return () => {};
+		}
+		const initialColors = getSpiffyColors();
+		let lastDetectedColors = initialColors;
+		let stableColorCount = 0;
+		const requiredStableReads = 2;
+		const updateColors = () => {
+			const colors = getSpiffyColors();
+			if (areColorMappingsEqual(lastDetectedColors, colors)) {
+				stableColorCount += 1;
+				if (stableColorCount >= requiredStableReads) setCurrentColors((prev) => {
+					if (areColorMappingsEqual(prev, colors)) return prev;
+					return colors;
+				});
+			} else {
+				lastDetectedColors = colors;
+				stableColorCount = 1;
+				if (!areColorMappingsEqual(initialColors, colors)) setCurrentColors((prev) => {
+					if (areColorMappingsEqual(prev, colors)) return prev;
+					return colors;
+				});
+			}
+		};
+		let timeout2;
+		let timeout3;
+		let timeout4;
+		let timeout5;
+		let intervalId;
+		let headObserver;
+		const timeout1 = setTimeout(() => {
+			updateColors();
+			timeout2 = setTimeout(updateColors, 100);
+			timeout3 = setTimeout(updateColors, 300);
+			timeout4 = setTimeout(updateColors, 600);
+			timeout5 = setTimeout(updateColors, 1e3);
+		}, 300);
+		const lateTimeout = setTimeout(updateColors, 1500);
+		const observer = new MutationObserver(() => {
+			requestAnimationFrame(() => {
+				setTimeout(updateColors, 10);
+			});
+		});
+		if (typeof document !== "undefined") {
+			observer.observe(document.head, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["style"],
+				characterData: true
+			});
+			observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["style", "class"],
+				subtree: false
+			});
+			const observeStyleElements = () => {
+				document.querySelectorAll("style").forEach((style) => {
+					observer.observe(style, {
+						childList: true,
+						characterData: true,
+						subtree: true,
+						attributes: true
+					});
+				});
+			};
+			observeStyleElements();
+			headObserver = new MutationObserver(() => {
+				observeStyleElements();
+				updateColors();
+			});
+			headObserver.observe(document.head, {
+				childList: true,
+				subtree: false
+			});
+			intervalId = setInterval(() => {
+				updateColors();
+			}, 300);
+		}
+		return () => {
+			if (timeout1) clearTimeout(timeout1);
+			if (timeout2) clearTimeout(timeout2);
+			if (timeout3) clearTimeout(timeout3);
+			if (timeout4) clearTimeout(timeout4);
+			if (timeout5) clearTimeout(timeout5);
+			clearTimeout(lateTimeout);
+			if (intervalId) clearInterval(intervalId);
+			observer.disconnect();
+			if (headObserver) headObserver.disconnect();
+		};
+	}, [selectedMerchant]);
+	return currentColors;
+};
+
+//#endregion
+exports.useGetCurrentMerchantColors = useGetCurrentMerchantColors;

package/dist/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.js

@@ -0,0 +1,164 @@
+import { ColorNames } from "../../components-v3/src/models/colorsConfig.js";
+import { getCSSVariable } from "../../DesignTokens/components/utils.js";
+import { useEffect, useState } from "react";
+
+//#region src/components/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.ts
+const defaultMerchantTest = {
+	devApiKey: "242fa4217b8b3db70e3a20f9740430afd87033d8f0b15e608ec8c42d5409094b",
+	domains: ["semantic-colors-test.com"],
+	name: "semantic-colors-test",
+	prodApiKey: "242fa4217b8b3db70e3a20f9740430afd87033d8f0b15e608ec8c42d5409094b"
+};
+const standardColors = {
+	[ColorNames.TextPrimary]: "#021414",
+	[ColorNames.TextSecondary]: "#666666",
+	[ColorNames.TextAccent]: "#478D87",
+	[ColorNames.TextLink]: "#042E2C",
+	[ColorNames.TextLight]: "#FFFFFF",
+	[ColorNames.BackgroundPrimary]: "#1F5F51",
+	[ColorNames.BackgroundSecondary]: "#F9F6EA",
+	[ColorNames.BackgroundSecondaryDark]: "#EEECDD",
+	[ColorNames.BackgroundTertiary]: "#EEECDD",
+	[ColorNames.BackgroundDark]: "#021414",
+	[ColorNames.BackgroundLight]: "#FFFFFF",
+	[ColorNames.BackgroundSaturated]: "#FFFFFF",
+	[ColorNames.BorderLight]: "#E6E7E7",
+	[ColorNames.BorderMedium]: "#B3B8B8",
+	[ColorNames.BorderDark]: "#021414",
+	[ColorNames.AccentPrimary]: "#1F5F51",
+	[ColorNames.AccentSecondary]: "#AE8659"
+};
+const getSpiffyColors = () => {
+	return {
+		[ColorNames.TextPrimary]: getCSSVariable("--spiffy-colors-text-primary") || getCSSVariable("--envive-colors-text-primary"),
+		[ColorNames.TextSecondary]: getCSSVariable("--spiffy-colors-text-secondary") || getCSSVariable("--envive-colors-text-secondary"),
+		[ColorNames.TextAccent]: getCSSVariable("--spiffy-colors-text-accent") || getCSSVariable("--envive-colors-text-accent"),
+		[ColorNames.TextLink]: getCSSVariable("--spiffy-colors-text-link") || getCSSVariable("--envive-colors-text-link"),
+		[ColorNames.TextLight]: getCSSVariable("--spiffy-colors-text-light") || getCSSVariable("--envive-colors-text-light"),
+		[ColorNames.BackgroundPrimary]: getCSSVariable("--spiffy-colors-background-primary") || getCSSVariable("--envive-colors-background-primary"),
+		[ColorNames.BackgroundSecondary]: getCSSVariable("--spiffy-colors-background-secondary") || getCSSVariable("--envive-colors-background-secondary"),
+		[ColorNames.BackgroundSecondaryDark]: getCSSVariable("--spiffy-colors-background-secondary-dark") || getCSSVariable("--envive-colors-background-secondary-dark"),
+		[ColorNames.BackgroundTertiary]: getCSSVariable("--spiffy-colors-background-tertiary") || getCSSVariable("--envive-colors-background-tertiary"),
+		[ColorNames.BackgroundDark]: getCSSVariable("--spiffy-colors-background-dark") || getCSSVariable("--envive-colors-background-dark"),
+		[ColorNames.BackgroundLight]: getCSSVariable("--spiffy-colors-background-light") || getCSSVariable("--envive-colors-background-light"),
+		[ColorNames.BackgroundSaturated]: getCSSVariable("--spiffy-colors-background-saturated") || getCSSVariable("--envive-colors-background-saturated"),
+		[ColorNames.BorderLight]: getCSSVariable("--spiffy-colors-border-light") || getCSSVariable("--envive-colors-border-light"),
+		[ColorNames.BorderMedium]: getCSSVariable("--spiffy-colors-border-medium") || getCSSVariable("--envive-colors-border-medium"),
+		[ColorNames.BorderDark]: getCSSVariable("--spiffy-colors-border-dark") || getCSSVariable("--envive-colors-border-dark"),
+		[ColorNames.AccentPrimary]: getCSSVariable("--spiffy-colors-accent-primary") || getCSSVariable("--envive-colors-accent-primary"),
+		[ColorNames.AccentSecondary]: getCSSVariable("--spiffy-colors-accent-secondary") || getCSSVariable("--envive-colors-accent-secondary")
+	};
+};
+const areColorMappingsEqual = (a, b) => {
+	for (const key in ColorNames) if (Object.prototype.hasOwnProperty.call(ColorNames, key)) {
+		const colorKey = ColorNames[key];
+		if (a[colorKey] !== b[colorKey]) return false;
+	}
+	return true;
+};
+const useGetCurrentMerchantColors = (selectedMerchant) => {
+	const [currentColors, setCurrentColors] = useState(() => {
+		if (selectedMerchant === defaultMerchantTest.name) return standardColors;
+		return getSpiffyColors();
+	});
+	useEffect(() => {
+		if (selectedMerchant === defaultMerchantTest.name) {
+			setCurrentColors((prev) => {
+				if (areColorMappingsEqual(prev, standardColors)) return prev;
+				return standardColors;
+			});
+			return () => {};
+		}
+		const initialColors = getSpiffyColors();
+		let lastDetectedColors = initialColors;
+		let stableColorCount = 0;
+		const requiredStableReads = 2;
+		const updateColors = () => {
+			const colors = getSpiffyColors();
+			if (areColorMappingsEqual(lastDetectedColors, colors)) {
+				stableColorCount += 1;
+				if (stableColorCount >= requiredStableReads) setCurrentColors((prev) => {
+					if (areColorMappingsEqual(prev, colors)) return prev;
+					return colors;
+				});
+			} else {
+				lastDetectedColors = colors;
+				stableColorCount = 1;
+				if (!areColorMappingsEqual(initialColors, colors)) setCurrentColors((prev) => {
+					if (areColorMappingsEqual(prev, colors)) return prev;
+					return colors;
+				});
+			}
+		};
+		let timeout2;
+		let timeout3;
+		let timeout4;
+		let timeout5;
+		let intervalId;
+		let headObserver;
+		const timeout1 = setTimeout(() => {
+			updateColors();
+			timeout2 = setTimeout(updateColors, 100);
+			timeout3 = setTimeout(updateColors, 300);
+			timeout4 = setTimeout(updateColors, 600);
+			timeout5 = setTimeout(updateColors, 1e3);
+		}, 300);
+		const lateTimeout = setTimeout(updateColors, 1500);
+		const observer = new MutationObserver(() => {
+			requestAnimationFrame(() => {
+				setTimeout(updateColors, 10);
+			});
+		});
+		if (typeof document !== "undefined") {
+			observer.observe(document.head, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["style"],
+				characterData: true
+			});
+			observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["style", "class"],
+				subtree: false
+			});
+			const observeStyleElements = () => {
+				document.querySelectorAll("style").forEach((style) => {
+					observer.observe(style, {
+						childList: true,
+						characterData: true,
+						subtree: true,
+						attributes: true
+					});
+				});
+			};
+			observeStyleElements();
+			headObserver = new MutationObserver(() => {
+				observeStyleElements();
+				updateColors();
+			});
+			headObserver.observe(document.head, {
+				childList: true,
+				subtree: false
+			});
+			intervalId = setInterval(() => {
+				updateColors();
+			}, 300);
+		}
+		return () => {
+			if (timeout1) clearTimeout(timeout1);
+			if (timeout2) clearTimeout(timeout2);
+			if (timeout3) clearTimeout(timeout3);
+			if (timeout4) clearTimeout(timeout4);
+			if (timeout5) clearTimeout(timeout5);
+			clearTimeout(lateTimeout);
+			if (intervalId) clearInterval(intervalId);
+			observer.disconnect();
+			if (headObserver) headObserver.disconnect();
+		};
+	}, [selectedMerchant]);
+	return currentColors;
+};
+
+//#endregion
+export { useGetCurrentMerchantColors };