@elementor/editor-editing-panel 3.33.0-101 → 3.33.0-103

package/dist/index.mjs

@@ -5655,7 +5655,7 @@ function useResetStyleValueProps() {
 }
 
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
-import { createTransformer as createTransformer6, styleTransformersRegistry as styleTransformersRegistry3 } from "@elementor/editor-canvas";
+import { createTransformer as createTransformer7, styleTransformersRegistry as styleTransformersRegistry3 } from "@elementor/editor-canvas";
 
 // src/styles-inheritance/consts.ts
 var excludePropTypeTransformers = /* @__PURE__ */ new Set([
@@ -5775,6 +5775,30 @@ var backgroundOverlayTransformer = createTransformer5((values) => {
   return /* @__PURE__ */ React100.createElement(Stack22, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React100.createElement(Stack22, { key: index }, item)));
 });
 
+// src/styles-inheritance/transformers/color-transformer.tsx
+import * as React101 from "react";
+import { createTransformer as createTransformer6 } from "@elementor/editor-canvas";
+import { Stack as Stack23, styled as styled8, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+function isValidCSSColor(value) {
+  if (!value.trim()) {
+    return false;
+  }
+  return CSS.supports("color", value.trim());
+}
+var StyledColorIndicator = styled8(UnstableColorIndicator2)(({ theme }) => ({
+  width: "1em",
+  height: "1em",
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  outline: `1px solid ${theme.palette.action.disabled}`,
+  flexShrink: 0
+}));
+var colorTransformer = createTransformer6((value) => {
+  if (!isValidCSSColor(value)) {
+    return value;
+  }
+  return /* @__PURE__ */ React101.createElement(Stack23, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React101.createElement("span", null, value));
+});
+
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
 function initStylesInheritanceTransformers() {
   const originalStyleTransformers = styleTransformersRegistry3.all();
@@ -5785,13 +5809,14 @@ function initStylesInheritanceTransformers() {
     stylesInheritanceTransformersRegistry.register(propType, transformer);
   });
   stylesInheritanceTransformersRegistry.registerFallback(
-    createTransformer6((value) => {
+    createTransformer7((value) => {
       return value;
     })
   );
   registerCustomTransformers();
 }
 function registerCustomTransformers() {
+  stylesInheritanceTransformersRegistry.register("color", colorTransformer);
   stylesInheritanceTransformersRegistry.register("background-color-overlay", backgroundColorOverlayTransformer);
   stylesInheritanceTransformersRegistry.register(
     "background-gradient-overlay",