@envive-ai/react-toolkit-v3 0.3.5

package/dist/CSSVariablesEditor/hooks/useGetDefaultCssVariables.js

@@ -0,0 +1,422 @@
+import { ColorNames } from "../../components-v3/src/models/colorsConfig.js";
+import { ButtonColorsVars, ColorsNamesVars } from "../../components-v3/tokens/colors/colors.js";
+import { FontSizeCSSVar, fontSize } from "../../components-v3/tokens/typography/fontSize.js";
+import { FontWeightCSSVar, fontWeight } from "../../components-v3/tokens/typography/fontWeight.js";
+import { LineHeightCSSVar, convertLineHeightToPercentage, lineHeight } from "../../components-v3/tokens/typography/lineHeight.js";
+import { LetterSpacingCSSVar, letterSpacing } from "../../components-v3/tokens/typography/letterSpacing.js";
+import { FontFamily, FontFamilyCSSVar } from "../../components-v3/tokens/typography/fontFamily.js";
+import { BorderRadiusCSSVar } from "../../components-v3/tokens/radius/radius.js";
+import { AspectRatio, AspectRatioCSSVar } from "../../components-v3/tokens/aspectRatio/aspectRatio.js";
+import { Theme, ThemeCSSVar } from "../../components-v3/tokens/theme/theme.js";
+import { useGetCssVariablesOptions } from "./useGetCssVariablesOptions.js";
+import { useMemo } from "react";
+
+//#region src/components/CSSVariablesEditor/hooks/useGetDefaultCssVariables.ts
+const useGetDefaultCssVariables = ({ defaultMerchantColors }) => {
+	const { aspectRatioOptions, themeOptions, lightButtonBackgroundOptions, lightButtonIconOptions, darkButtonBackgroundOptions, darkButtonIconOptions } = useGetCssVariablesOptions();
+	return { cssVariables: useMemo(() => [
+		{
+			key: "color-text-primary",
+			name: "Text Primary",
+			variable: ColorsNamesVars.TextPrimary,
+			defaultValue: defaultMerchantColors[ColorNames.TextPrimary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-text-secondary",
+			name: "Text Secondary",
+			variable: ColorsNamesVars.TextSecondary,
+			defaultValue: defaultMerchantColors[ColorNames.TextSecondary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-text-accent",
+			name: "Text Accent",
+			variable: ColorsNamesVars.TextAccent,
+			defaultValue: defaultMerchantColors[ColorNames.TextAccent],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-text-link",
+			name: "Text Link",
+			variable: ColorsNamesVars.TextLink,
+			defaultValue: defaultMerchantColors[ColorNames.TextLink],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-text-light",
+			name: "Text Light",
+			variable: ColorsNamesVars.TextLight,
+			defaultValue: defaultMerchantColors[ColorNames.TextLight],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-background-primary",
+			name: "Background Primary",
+			variable: ColorsNamesVars.BackgroundPrimary,
+			defaultValue: defaultMerchantColors[ColorNames.BackgroundPrimary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-background-secondary",
+			name: "Background Secondary",
+			variable: ColorsNamesVars.BackgroundSecondary,
+			defaultValue: defaultMerchantColors[ColorNames.BackgroundSecondary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-background-tertiary",
+			name: "Background Tertiary",
+			variable: ColorsNamesVars.BackgroundTertiary,
+			defaultValue: defaultMerchantColors[ColorNames.BackgroundTertiary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-background-dark",
+			name: "Background Dark",
+			variable: ColorsNamesVars.BackgroundDark,
+			defaultValue: defaultMerchantColors[ColorNames.BackgroundDark],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-background-light",
+			name: "Background Light",
+			variable: ColorsNamesVars.BackgroundLight,
+			defaultValue: defaultMerchantColors[ColorNames.BackgroundLight],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-border-light",
+			name: "Border Light",
+			variable: ColorsNamesVars.BorderLight,
+			defaultValue: defaultMerchantColors[ColorNames.BorderLight],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-border-medium",
+			name: "Border Medium",
+			variable: ColorsNamesVars.BorderMedium,
+			defaultValue: defaultMerchantColors[ColorNames.BorderMedium],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-border-dark",
+			name: "Border Dark",
+			variable: ColorsNamesVars.BorderDark,
+			defaultValue: defaultMerchantColors[ColorNames.BorderDark],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-accent-primary",
+			name: "Accent Primary",
+			variable: ColorsNamesVars.AccentPrimary,
+			defaultValue: defaultMerchantColors[ColorNames.AccentPrimary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-accent-secondary",
+			name: "Accent Secondary",
+			variable: ColorsNamesVars.AccentSecondary,
+			defaultValue: defaultMerchantColors[ColorNames.AccentSecondary],
+			category: "Colors",
+			isColor: true
+		},
+		{
+			key: "color-button-light-background",
+			name: "Light Button Background Color",
+			variable: ButtonColorsVars.LightButtonBackgroundColor,
+			defaultValue: `var(--${ColorsNamesVars.BackgroundSecondary})`,
+			category: "Prompt Button Colors",
+			options: lightButtonBackgroundOptions
+		},
+		{
+			key: "color-button-light-icon",
+			name: "Light Button Icon Color",
+			variable: ButtonColorsVars.LightButtonIconColor,
+			defaultValue: `var(--${ColorsNamesVars.AccentPrimary})`,
+			category: "Prompt Button Colors",
+			options: lightButtonIconOptions
+		},
+		{
+			key: "color-button-dark-background",
+			name: "Dark Button Background Color",
+			variable: ButtonColorsVars.DarkButtonBackgroundColor,
+			defaultValue: `var(--${ColorsNamesVars.BackgroundDark})`,
+			category: "Prompt Button Colors",
+			options: darkButtonBackgroundOptions
+		},
+		{
+			key: "color-button-dark-icon",
+			name: "Dark Button Icon Color",
+			variable: ButtonColorsVars.DarkButtonIconColor,
+			defaultValue: `var(--${ColorsNamesVars.AccentPrimary})`,
+			category: "Prompt Button Colors",
+			options: darkButtonIconOptions
+		},
+		{
+			key: "font-size-t1",
+			name: "Font Size T1",
+			variable: FontSizeCSSVar.T1,
+			defaultValue: fontSize.t1,
+			category: "Typography"
+		},
+		{
+			key: "font-size-t2",
+			name: "Font Size T2",
+			variable: FontSizeCSSVar.T2,
+			defaultValue: fontSize.t2,
+			category: "Typography"
+		},
+		{
+			key: "font-size-t3",
+			name: "Font Size T3",
+			variable: FontSizeCSSVar.T3,
+			defaultValue: fontSize.t3,
+			category: "Typography"
+		},
+		{
+			key: "font-size-h1",
+			name: "Font Size H1",
+			variable: FontSizeCSSVar.H1,
+			defaultValue: fontSize.h1,
+			category: "Typography"
+		},
+		{
+			key: "font-size-h2",
+			name: "Font Size H2",
+			variable: FontSizeCSSVar.H2,
+			defaultValue: fontSize.h2,
+			category: "Typography"
+		},
+		{
+			key: "font-size-h3",
+			name: "Font Size H3",
+			variable: FontSizeCSSVar.H3,
+			defaultValue: fontSize.h3,
+			category: "Typography"
+		},
+		{
+			key: "font-size-b1",
+			name: "Font Size B1",
+			variable: FontSizeCSSVar.B1,
+			defaultValue: fontSize.b1,
+			category: "Typography"
+		},
+		{
+			key: "font-size-b2",
+			name: "Font Size B2",
+			variable: FontSizeCSSVar.B2,
+			defaultValue: fontSize.b2,
+			category: "Typography"
+		},
+		{
+			key: "font-size-b3",
+			name: "Font Size B3",
+			variable: FontSizeCSSVar.B3,
+			defaultValue: fontSize.b3,
+			category: "Typography"
+		},
+		{
+			key: "font-size-b4",
+			name: "Font Size B4",
+			variable: FontSizeCSSVar.B4,
+			defaultValue: fontSize.b4,
+			category: "Typography"
+		},
+		{
+			key: "font-size-b5",
+			name: "Font Size B5",
+			variable: FontSizeCSSVar.B5,
+			defaultValue: fontSize.b5,
+			category: "Typography"
+		},
+		{
+			key: "font-size-l1",
+			name: "Font Size L1",
+			variable: FontSizeCSSVar.L1,
+			defaultValue: fontSize.l1,
+			category: "Typography"
+		},
+		{
+			key: "font-size-l2",
+			name: "Font Size L2",
+			variable: FontSizeCSSVar.L2,
+			defaultValue: fontSize.l2,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-rg",
+			name: "Font Weight Regular",
+			variable: FontWeightCSSVar.RG,
+			defaultValue: fontWeight.rg,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-md",
+			name: "Font Weight Medium",
+			variable: FontWeightCSSVar.MD,
+			defaultValue: fontWeight.md,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-sb",
+			name: "Font Weight Semi Bold",
+			variable: FontWeightCSSVar.SB,
+			defaultValue: fontWeight.sb,
+			category: "Typography"
+		},
+		{
+			key: "line-height-124",
+			name: "Line Height 124%",
+			variable: LineHeightCSSVar.LineHeight124,
+			defaultValue: convertLineHeightToPercentage(lineHeight[124]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-120",
+			name: "Line Height 120%",
+			variable: LineHeightCSSVar.LineHeight120,
+			defaultValue: convertLineHeightToPercentage(lineHeight[120]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-118",
+			name: "Line Height 118%",
+			variable: LineHeightCSSVar.LineHeight118,
+			defaultValue: convertLineHeightToPercentage(lineHeight[118]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-116",
+			name: "Line Height 116%",
+			variable: LineHeightCSSVar.LineHeight116,
+			defaultValue: convertLineHeightToPercentage(lineHeight[116]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-114",
+			name: "Line Height 114%",
+			variable: LineHeightCSSVar.LineHeight114,
+			defaultValue: convertLineHeightToPercentage(lineHeight[114]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-148",
+			name: "Line Height 148%",
+			variable: LineHeightCSSVar.LineHeight148,
+			defaultValue: convertLineHeightToPercentage(lineHeight[148]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-140",
+			name: "Line Height 140%",
+			variable: LineHeightCSSVar.LineHeight140,
+			defaultValue: convertLineHeightToPercentage(lineHeight[140]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-128",
+			name: "Line Height 128%",
+			variable: LineHeightCSSVar.LineHeight128,
+			defaultValue: convertLineHeightToPercentage(lineHeight[128]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-130",
+			name: "Line Height 130%",
+			variable: LineHeightCSSVar.LineHeight130,
+			defaultValue: convertLineHeightToPercentage(lineHeight[130]),
+			category: "Typography"
+		},
+		{
+			key: "line-height-133",
+			name: "Line Height 133%",
+			variable: LineHeightCSSVar.LineHeight133,
+			defaultValue: convertLineHeightToPercentage(lineHeight[133]),
+			category: "Typography"
+		},
+		{
+			key: "letter-spacing-tight-0",
+			name: "Letter Spacing Tight 0",
+			variable: LetterSpacingCSSVar.Tight0,
+			defaultValue: letterSpacing["tight-0"],
+			category: "Typography"
+		},
+		{
+			key: "letter-spacing-wide-1",
+			name: "Letter Spacing Wide 1",
+			variable: LetterSpacingCSSVar.Wide1,
+			defaultValue: letterSpacing["wide-1"],
+			category: "Typography"
+		},
+		{
+			key: "font-family-title",
+			name: "Font Family Title",
+			variable: FontFamilyCSSVar.Title,
+			defaultValue: FontFamily.Poppins,
+			category: "Typography"
+		},
+		{
+			key: "font-family-header",
+			name: "Font Family Header",
+			variable: FontFamilyCSSVar.Header,
+			defaultValue: FontFamily.Poppins,
+			category: "Typography"
+		},
+		{
+			key: "font-family-body",
+			name: "Font Family Body",
+			variable: FontFamilyCSSVar.Body,
+			defaultValue: FontFamily.InterVariable,
+			category: "Typography"
+		},
+		{
+			key: "border-radius-global-custom",
+			name: "Border Radius Global Custom",
+			variable: BorderRadiusCSSVar.GlobalCustom,
+			defaultValue: "8px",
+			category: "Border Radius"
+		},
+		{
+			key: "aspect-ratio-global-custom",
+			name: "Aspect Ratio Global Custom",
+			variable: AspectRatioCSSVar.GlobalCustom,
+			defaultValue: AspectRatio.SQUARE,
+			category: "Aspect Ratio",
+			options: aspectRatioOptions
+		},
+		{
+			key: "theme-global-custom",
+			name: "Theme Global Custom",
+			variable: ThemeCSSVar.GlobalCustom,
+			defaultValue: Theme.STANDARD,
+			category: "Theme",
+			options: themeOptions
+		}
+	], [
+		aspectRatioOptions,
+		themeOptions,
+		lightButtonBackgroundOptions,
+		lightButtonIconOptions,
+		darkButtonBackgroundOptions,
+		darkButtonIconOptions,
+		defaultMerchantColors
+	]) };
+};
+
+//#endregion
+export { useGetDefaultCssVariables };

package/dist/CSSVariablesEditor/hooks/useHandleCssVariablesState.cjs

@@ -0,0 +1,55 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_functions = require('../utils/functions.cjs');
+const require_useHandleUpdateCssVars = require('./useHandleUpdateCssVars.cjs');
+let react = require("react");
+
+//#region src/components/CSSVariablesEditor/hooks/useHandleCssVariablesState.ts
+const useHandleCssVariablesState = (cssVariables) => {
+	const { updateCSSVariables } = require_useHandleUpdateCssVars.useHandleUpdateCssVars();
+	const [values, setValues] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		const initial = {};
+		cssVariables.forEach(({ key, variable, defaultValue, isColor, options }) => {
+			initial[key] = require_functions.getInitialValue(variable, defaultValue, isColor, Array.isArray(options) && options.length > 0);
+		});
+		setValues(initial);
+	}, [cssVariables]);
+	const handleChange = (key, value) => {
+		setValues((prev) => {
+			const next = {
+				...prev,
+				[key]: value
+			};
+			updateCSSVariables(next);
+			return next;
+		});
+	};
+	const handleReset = (key, defaultValue) => {
+		setValues((prev) => {
+			const next = {
+				...prev,
+				[key]: defaultValue
+			};
+			updateCSSVariables(next);
+			return next;
+		});
+	};
+	const handleResetAll = () => {
+		const resetValues = {};
+		cssVariables.forEach(({ key, defaultValue }) => {
+			resetValues[key] = defaultValue;
+		});
+		updateCSSVariables(resetValues);
+		setValues(resetValues);
+	};
+	return {
+		values,
+		handleChange,
+		handleReset,
+		handleResetAll,
+		groupedVariables: require_functions.groupVariablesByCategory(cssVariables)
+	};
+};
+
+//#endregion
+exports.useHandleCssVariablesState = useHandleCssVariablesState;

package/dist/CSSVariablesEditor/hooks/useHandleCssVariablesState.js

@@ -0,0 +1,54 @@
+import { getInitialValue, groupVariablesByCategory } from "../utils/functions.js";
+import { useHandleUpdateCssVars } from "./useHandleUpdateCssVars.js";
+import { useEffect, useState } from "react";
+
+//#region src/components/CSSVariablesEditor/hooks/useHandleCssVariablesState.ts
+const useHandleCssVariablesState = (cssVariables) => {
+	const { updateCSSVariables } = useHandleUpdateCssVars();
+	const [values, setValues] = useState({});
+	useEffect(() => {
+		const initial = {};
+		cssVariables.forEach(({ key, variable, defaultValue, isColor, options }) => {
+			initial[key] = getInitialValue(variable, defaultValue, isColor, Array.isArray(options) && options.length > 0);
+		});
+		setValues(initial);
+	}, [cssVariables]);
+	const handleChange = (key, value) => {
+		setValues((prev) => {
+			const next = {
+				...prev,
+				[key]: value
+			};
+			updateCSSVariables(next);
+			return next;
+		});
+	};
+	const handleReset = (key, defaultValue) => {
+		setValues((prev) => {
+			const next = {
+				...prev,
+				[key]: defaultValue
+			};
+			updateCSSVariables(next);
+			return next;
+		});
+	};
+	const handleResetAll = () => {
+		const resetValues = {};
+		cssVariables.forEach(({ key, defaultValue }) => {
+			resetValues[key] = defaultValue;
+		});
+		updateCSSVariables(resetValues);
+		setValues(resetValues);
+	};
+	return {
+		values,
+		handleChange,
+		handleReset,
+		handleResetAll,
+		groupedVariables: groupVariablesByCategory(cssVariables)
+	};
+};
+
+//#endregion
+export { useHandleCssVariablesState };

package/dist/CSSVariablesEditor/hooks/useHandleUpdateCssVars.cjs

@@ -0,0 +1,103 @@
+const require_colors = require('../../components-v3/tokens/colors/colors.cjs');
+const require_fontSize = require('../../components-v3/tokens/typography/fontSize.cjs');
+const require_fontWeight = require('../../components-v3/tokens/typography/fontWeight.cjs');
+const require_lineHeight = require('../../components-v3/tokens/typography/lineHeight.cjs');
+const require_letterSpacing = require('../../components-v3/tokens/typography/letterSpacing.cjs');
+const require_fontFamily = require('../../components-v3/tokens/typography/fontFamily.cjs');
+const require_radius = require('../../components-v3/tokens/radius/radius.cjs');
+const require_aspectRatio = require('../../components-v3/tokens/aspectRatio/aspectRatio.cjs');
+const require_theme = require('../../components-v3/tokens/theme/theme.cjs');
+
+//#region src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts
+const useHandleUpdateCssVars = () => {
+	const getCssVariablesStyleContent = (variables) => `
+    * {
+
+        /* Typography */
+        --${require_fontSize.FontSizeCSSVar.T1}: ${variables["font-size-t1"]} !important;
+        --${require_fontSize.FontSizeCSSVar.T2}: ${variables["font-size-t2"]} !important;
+        --${require_fontSize.FontSizeCSSVar.T3}: ${variables["font-size-t3"]} !important;
+        --${require_fontSize.FontSizeCSSVar.H1}: ${variables["font-size-h1"]} !important;
+        --${require_fontSize.FontSizeCSSVar.H2}: ${variables["font-size-h2"]} !important;
+        --${require_fontSize.FontSizeCSSVar.H3}: ${variables["font-size-h3"]} !important;
+        --${require_fontSize.FontSizeCSSVar.B1}: ${variables["font-size-b1"]} !important;
+        --${require_fontSize.FontSizeCSSVar.B2}: ${variables["font-size-b2"]} !important;
+        --${require_fontSize.FontSizeCSSVar.B3}: ${variables["font-size-b3"]} !important;
+        --${require_fontSize.FontSizeCSSVar.B4}: ${variables["font-size-b4"]} !important;
+        --${require_fontSize.FontSizeCSSVar.B5}: ${variables["font-size-b5"]} !important;
+        --${require_fontSize.FontSizeCSSVar.L1}: ${variables["font-size-l1"]} !important;
+        --${require_fontSize.FontSizeCSSVar.L2}: ${variables["font-size-l2"]} !important;
+
+        --${require_fontWeight.FontWeightCSSVar.RG}: ${variables["font-weight-rg"]} !important;
+        --${require_fontWeight.FontWeightCSSVar.MD}: ${variables["font-weight-md"]} !important;
+        --${require_fontWeight.FontWeightCSSVar.SB}: ${variables["font-weight-sb"]} !important;
+
+        --${require_lineHeight.LineHeightCSSVar.LineHeight124}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-124"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight120}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-120"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight118}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-118"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight116}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-116"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight114}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-114"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight148}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-148"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight140}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-140"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight128}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-128"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight130}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-130"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.LineHeight133}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-133"])} !important;
+
+        --${require_letterSpacing.LetterSpacingCSSVar.Tight0}: ${variables["letter-spacing-tight-0"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.Wide1}: ${variables["letter-spacing-wide-1"]} !important;
+
+        --${require_fontFamily.FontFamilyCSSVar.Title}: ${variables["font-family-title"]} !important;
+        --${require_fontFamily.FontFamilyCSSVar.Header}: ${variables["font-family-header"]} !important;
+        --${require_fontFamily.FontFamilyCSSVar.Body}: ${variables["font-family-body"]} !important;
+
+        /* Colors */
+        --${require_colors.ColorsNamesVars.TextPrimary}: ${variables["color-text-primary"]} !important;
+        --${require_colors.ColorsNamesVars.TextSecondary}: ${variables["color-text-secondary"]} !important;
+        --${require_colors.ColorsNamesVars.TextAccent}: ${variables["color-text-accent"]} !important;
+        --${require_colors.ColorsNamesVars.TextLink}: ${variables["color-text-link"]} !important;
+        --${require_colors.ColorsNamesVars.TextLight}: ${variables["color-text-light"]} !important;
+        --${require_colors.ColorsNamesVars.BackgroundPrimary}: ${variables["color-background-primary"]} !important;
+        --${require_colors.ColorsNamesVars.BackgroundSecondary}: ${variables["color-background-secondary"]} !important;
+        --${require_colors.ColorsNamesVars.BackgroundTertiary}: ${variables["color-background-tertiary"]} !important;
+        --${require_colors.ColorsNamesVars.BackgroundDark}: ${variables["color-background-dark"]} !important;
+        --${require_colors.ColorsNamesVars.BackgroundLight}: ${variables["color-background-light"]} !important;
+        --${require_colors.ColorsNamesVars.BorderLight}: ${variables["color-border-light"]} !important;
+        --${require_colors.ColorsNamesVars.BorderMedium}: ${variables["color-border-medium"]} !important;
+        --${require_colors.ColorsNamesVars.BorderDark}: ${variables["color-border-dark"]} !important;
+        --${require_colors.ColorsNamesVars.AccentPrimary}: ${variables["color-accent-primary"]} !important;
+        --${require_colors.ColorsNamesVars.AccentSecondary}: ${variables["color-accent-secondary"]} !important;
+
+
+        /* Button Colors */
+        --${require_colors.ButtonColorsVars.LightButtonBackgroundColor}: ${variables["color-button-light-background"]} !important;
+        --${require_colors.ButtonColorsVars.LightButtonIconColor}: ${variables["color-button-light-icon"]} !important;
+        --${require_colors.ButtonColorsVars.DarkButtonBackgroundColor}: ${variables["color-button-dark-background"]} !important;
+        --${require_colors.ButtonColorsVars.DarkButtonIconColor}: ${variables["color-button-dark-icon"]} !important;
+
+        /* Border Radius */
+        --${require_radius.BorderRadiusCSSVar.GlobalCustom}: ${variables["border-radius-global-custom"]} !important;
+
+        /* Aspect Ratio */
+        --${require_aspectRatio.AspectRatioCSSVar.GlobalCustom}: ${require_aspectRatio.convertAspectRatioNameToStyle(variables["aspect-ratio-global-custom"])} !important;
+
+        /* Theme */
+        --${require_theme.ThemeCSSVar.GlobalCustom}: ${variables["theme-global-custom"]} !important;
+    }
+`;
+	const updateCSSVariables = (variables) => {
+		const styleId = "merchant-css-config-edited";
+		let styleTag = document.getElementById(styleId);
+		if (styleTag) styleTag.innerHTML = getCssVariablesStyleContent(variables);
+		else {
+			styleTag = document.createElement("style");
+			styleTag.id = styleId;
+			styleTag.innerHTML = getCssVariablesStyleContent(variables);
+			document.head.appendChild(styleTag);
+			document.getElementById("merchant-css-config")?.remove();
+		}
+	};
+	return { updateCSSVariables };
+};
+
+//#endregion
+exports.useHandleUpdateCssVars = useHandleUpdateCssVars;