@mirohq/design-system-icons 1.45.1-reactdismissablelayer.0 → 1.45.1

package/dist/main.js

@@ -4,26 +4,52 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 var designSystemUseLocalStorage = require('@mirohq/design-system-use-local-storage');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
-var designSystemUtils = require('@mirohq/design-system-utils');
 
-const StyledIcon = designSystemStitches.styled(designSystemPrimitive.Primitive.svg, {
+const BaseStyledIcon = designSystemStitches.styled(designSystemPrimitive.Primitive.svg, {
   display: "inline-flex",
   verticalAlign: "text-bottom",
   forcedColorAdjust: "auto",
   variants: {
     ...designSystemBaseIcon.styles,
-    color: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.colors, "color"),
-    debug: {
-      true: {
-        color: "#06D834 !important"
-      },
-      false: {}
-    }
+    color: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.colors, "color")
   }
 });
 
+const DEBUG_COLOR = "#06D834";
+const DEBUG_STORAGE_KEY = "MIRO_DS_DEBUG_ICON";
+function isDebugFlagEnabled(debugProp) {
+  var _a;
+  if (debugProp === true) return true;
+  if (typeof window === "undefined") return false;
+  try {
+    return JSON.parse((_a = window.localStorage.getItem(DEBUG_STORAGE_KEY)) != null ? _a : "false") === true;
+  } catch {
+    return false;
+  }
+}
+const StyledIcon = react.forwardRef(
+  ({ debug, ...props }, forwardedRef) => {
+    const internalRef = react.useRef(null);
+    react.useLayoutEffect(() => {
+      const el = internalRef.current;
+      if (el == null || !isDebugFlagEnabled(debug)) return;
+      el.style.setProperty("color", DEBUG_COLOR, "important");
+      el.style.setProperty("fill", DEBUG_COLOR, "important");
+      return () => {
+        el.style.removeProperty("color");
+        el.style.removeProperty("fill");
+      };
+    }, [debug]);
+    return react.createElement(BaseStyledIcon, {
+      ...props,
+      ref: designSystemUtils.mergeRefs([internalRef, forwardedRef])
+    });
+  }
+);
+
 const IconActivitySparkle = react.forwardRef(
   ({ size = "medium", ...props }, forwardRef2) => {
     const [debug] = designSystemUseLocalStorage.useLocalStorage("DEBUG_ICON", false);