@midscene/visualizer 1.0.1-beta-20251110055007.0 → 1.0.1-beta-20251110130223.0

package/dist/es/component/blackboard/index.css

@@ -31,3 +31,11 @@
   width: 100%;
 }
 
+[data-theme="dark"] .blackboard .footer, [data-theme="dark"] .blackboard .bottom-tip-item {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .blackboard-main-content canvas {
+  border-color: rgba(255, 255, 255, .12);
+}
+

package/dist/es/component/blackboard/index.mjs

@@ -5,7 +5,7 @@ import { Application, Container, Graphics, Rectangle, Sprite, Text, Texture } fr
 import { useEffect, useMemo, useRef, useState } from "react";
 import { colorForName, highlightColorForType } from "../../utils/color.mjs";
 import "./index.css";
-import { DropShadowFilter } from "pixi-filters";
+import { DropShadowFilter, GlowFilter } from "pixi-filters";
 const itemFillAlpha = 0.4;
 const highlightAlpha = 0.4;
 const pointRadius = 10;
@@ -72,6 +72,9 @@ const Blackboard = (props)=>{
     const elementMarkContainer = useMemo(()=>new Container(), []);
     const [hoverElement, setHoverElement] = useState(null);
     const pixiBgRef = useRef(void 0);
+    const animationFrameRef = useRef(null);
+    const highlightGraphicsRef = useRef([]);
+    const glowFiltersRef = useRef([]);
     const backgroundVisible = true;
     const elementsVisible = true;
     useEffect(()=>{
@@ -98,6 +101,10 @@ const Blackboard = (props)=>{
         })());
         return ()=>{
             console.log('will destroy');
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
             try {
                 app.destroy(true, {
                     children: true,
@@ -168,18 +175,54 @@ const Blackboard = (props)=>{
         elementMarkContainer.removeChildren();
         highlightContainer.eventMode = 'passive';
         elementMarkContainer.eventMode = 'passive';
+        highlightGraphicsRef.current = [];
+        glowFiltersRef.current = [];
         if (highlightRect) {
             const [graphics] = rectMarkForItem(highlightRect, 'Search Area', 'searchArea');
             highlightContainer.addChild(graphics);
         }
         if (highlightElements.length) highlightElements.forEach((element)=>{
             const { rect, content, id } = element;
-            const [graphics] = rectMarkForItem(rect, content, 'highlight');
-            highlightContainer.addChild(graphics);
+            const items = rectMarkForItem(rect, content, 'highlight');
+            const graphics = items[0];
+            const glowFilter = new GlowFilter({
+                distance: 30,
+                outerStrength: 3,
+                innerStrength: 0,
+                color: 0xfd5907,
+                quality: 0.5
+            });
+            const existingFilters = graphics.filters;
+            if (Array.isArray(existingFilters)) graphics.filters = [
+                ...existingFilters,
+                glowFilter
+            ];
+            else if (existingFilters) graphics.filters = [
+                existingFilters,
+                glowFilter
+            ];
+            else graphics.filters = [
+                glowFilter
+            ];
+            items.forEach((item)=>highlightContainer.addChild(item));
+            highlightGraphicsRef.current.push(graphics);
+            glowFiltersRef.current.push(glowFilter);
         });
         if (null == highlightPoints ? void 0 : highlightPoints.length) highlightPoints.forEach((point)=>{
             const graphics = pointMarkForItem(point, 'highlightPoint');
+            const glowFilter = new GlowFilter({
+                distance: 25,
+                outerStrength: 2.5,
+                innerStrength: 0,
+                color: 0xfd5907,
+                quality: 0.5
+            });
+            graphics.filters = [
+                glowFilter
+            ];
             highlightContainer.addChild(graphics);
+            highlightGraphicsRef.current.push(graphics);
+            glowFiltersRef.current.push(glowFilter);
         });
         elementMarkContainer.visible = elementsVisible;
         return {
@@ -193,6 +236,46 @@ const Blackboard = (props)=>{
         highlightRect,
         highlightPoints
     ]);
+    useEffect(()=>{
+        if (!appInitialed || 0 === highlightGraphicsRef.current.length) return void console.log('Animation skipped:', {
+            appInitialed,
+            graphicsCount: highlightGraphicsRef.current.length
+        });
+        console.log('Starting pulsing animation for', highlightGraphicsRef.current.length, 'graphics');
+        const graphicsToAnimate = highlightGraphicsRef.current;
+        const glowFilters = glowFiltersRef.current;
+        const pulseDuration = 1200;
+        const minAlpha = 0.4;
+        const maxAlpha = 1.0;
+        const minGlowStrength = 2.0;
+        const maxGlowStrength = 5.0;
+        const startTime = performance.now();
+        const animate = ()=>{
+            const elapsed = performance.now() - startTime;
+            const progress = elapsed % pulseDuration / pulseDuration;
+            const sineValue = Math.sin(progress * Math.PI * 2);
+            const normalizedSine = (sineValue + 1) / 2;
+            const alpha = minAlpha + normalizedSine * (maxAlpha - minAlpha);
+            const glowStrength = minGlowStrength + normalizedSine * (maxGlowStrength - minGlowStrength);
+            graphicsToAnimate.forEach((graphics, index)=>{
+                graphics.alpha = alpha;
+                if (glowFilters[index]) glowFilters[index].outerStrength = glowStrength;
+            });
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+        animate();
+        return ()=>{
+            console.log('Stopping pulsing animation');
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    }, [
+        appInitialed,
+        highlightElements,
+        highlightPoints
+    ]);
     let bottomTipA = null;
     if (1 === highlightElementRects.length) bottomTipA = /*#__PURE__*/ jsx("div", {
         className: "bottom-tip",

package/dist/es/component/env-config-reminder/index.css

@@ -20,3 +20,11 @@
   font-size: 14px;
 }
 
+[data-theme="dark"] .env-config-reminder {
+  background: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .env-config-reminder .reminder-text {
+  color: rgba(255, 255, 255, .85);
+}
+

package/dist/es/component/history-selector/index.css

@@ -133,3 +133,35 @@
   padding: 40px 20px;
 }
 
+[data-theme="dark"] .history-selector .history-timestamp, [data-theme="dark"] .history-selector .history-path {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .history-selector .history-description {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .history-selector .history-no-items {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .history-selector .history-item:hover {
+  background: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .history-selector .history-item .history-clear-icon {
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .history-selector .history-item .history-clear-icon:hover {
+  border-color: #40a9ff;
+}
+
+[data-theme="dark"] .history-selector .history-load-more {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .history-selector .history-load-more:hover {
+  color: #40a9ff;
+}
+

package/dist/es/component/logo/index.mjs

@@ -1,9 +1,31 @@
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import "./index.css";
 const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
+const LogoUrlLight = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_light.png';
+const LogoUrlDark = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_dark.png';
 const Logo = (param)=>{
     let { hideLogo = false } = param;
+    const [isDark, setIsDark] = useState(false);
+    useEffect(()=>{
+        const checkTheme = ()=>{
+            var _document_querySelector;
+            const theme = null == (_document_querySelector = document.querySelector('[data-theme]')) ? void 0 : _document_querySelector.getAttribute('data-theme');
+            setIsDark('dark' === theme);
+        };
+        checkTheme();
+        const observer = new MutationObserver(checkTheme);
+        const target = document.querySelector('[data-theme]') || document.documentElement;
+        observer.observe(target, {
+            attributes: true,
+            attributeFilter: [
+                'data-theme'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
     if (hideLogo) return null;
+    const logoSrc = isDark ? LogoUrlDark : LogoUrlLight;
     return /*#__PURE__*/ jsx("div", {
         className: "logo",
         children: /*#__PURE__*/ jsx("a", {
@@ -12,7 +34,7 @@ const Logo = (param)=>{
             rel: "noreferrer",
             children: /*#__PURE__*/ jsx("img", {
                 alt: "Midscene_logo",
-                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png"
+                src: logoSrc
             })
         })
     });

package/dist/es/component/player/index.css

@@ -183,3 +183,28 @@
   display: flex;
 }
 
+[data-theme="dark"] .player-container {
+  background: #141414;
+  border-color: #141414;
+}
+
+[data-theme="dark"] .player-container[data-fit-mode="height"] {
+  background: #1f1f1f;
+}
+
+[data-theme="dark"] .player-container[data-fit-mode="height"] .canvas-container {
+  background-color: #141414;
+}
+
+[data-theme="dark"] .player-container .canvas-container {
+  background-color: #1f1f1f;
+}
+
+[data-theme="dark"] .player-container .player-tools, [data-theme="dark"] .player-container .player-tools .ant-spin, [data-theme="dark"] .player-container .player-tools .status-icon svg {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .player-container .player-tools .status-icon:hover {
+  background: rgba(255, 255, 255, .08);
+}
+

package/dist/es/component/player/index.mjs

@@ -9,7 +9,6 @@ import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined }
 import { Dropdown, Spin, Switch, Tooltip, message } from "antd";
 import global_perspective from "../../icons/global-perspective.mjs";
 import player_setting from "../../icons/player-setting.mjs";
-import show_marker from "../../icons/show-marker.mjs";
 import { useBlackboardPreference } from "../../store/store.mjs";
 import { getTextureFromCache, loadTexture } from "../../utils/pixi-loader.mjs";
 import { rectMarkForItem } from "../blackboard/index.mjs";
@@ -133,19 +132,13 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = useState('');
     const [subTitleText, setSubTitleText] = useState('');
-    const { autoZoom, setAutoZoom, elementsVisible, setElementsVisible } = useBlackboardPreference();
+    const { autoZoom, setAutoZoom } = useBlackboardPreference();
     useEffect(()=>{
         if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
     }, [
         null == props ? void 0 : props.autoZoom,
         setAutoZoom
     ]);
-    useEffect(()=>{
-        if ((null == props ? void 0 : props.elementsVisible) !== void 0) setElementsVisible(props.elementsVisible);
-    }, [
-        null == props ? void 0 : props.elementsVisible,
-        setElementsVisible
-    ]);
     const scripts = null == props ? void 0 : props.replayScripts;
     const imageWidth = (null == props ? void 0 : props.imageWidth) || 1920;
     const imageHeight = (null == props ? void 0 : props.imageHeight) || 1080;
@@ -168,12 +161,6 @@ function Player(props) {
         container.zIndex = LAYER_ORDER_INSIGHT;
         return container;
     }, []);
-    useEffect(()=>{
-        insightMarkContainer.visible = elementsVisible;
-    }, [
-        elementsVisible,
-        insightMarkContainer
-    ]);
     const basicCameraState = {
         left: 0,
         top: 0,
@@ -802,59 +789,6 @@ function Player(props) {
                                                     })
                                                 ]
                                             })
-                                        },
-                                        {
-                                            key: 'elementsVisible',
-                                            style: {
-                                                height: '39px',
-                                                margin: 0,
-                                                padding: '0 12px'
-                                            },
-                                            label: /*#__PURE__*/ jsxs("div", {
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    width: '100%',
-                                                    height: '39px'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        style: {
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: '4px'
-                                                        },
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(show_marker, {
-                                                                style: {
-                                                                    width: '16px',
-                                                                    height: '16px'
-                                                                }
-                                                            }),
-                                                            /*#__PURE__*/ jsx("span", {
-                                                                style: {
-                                                                    fontSize: '12px',
-                                                                    marginRight: '16px'
-                                                                },
-                                                                children: "Show element markers"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Switch, {
-                                                        size: "small",
-                                                        checked: elementsVisible,
-                                                        onChange: (checked)=>{
-                                                            setElementsVisible(checked);
-                                                            triggerReplay();
-                                                        },
-                                                        onClick: (_, e)=>{
-                                                            var _e_stopPropagation;
-                                                            return null == e ? void 0 : null == (_e_stopPropagation = e.stopPropagation) ? void 0 : _e_stopPropagation.call(e);
-                                                        }
-                                                    })
-                                                ]
-                                            })
                                         }
                                     ]
                                 },

package/dist/es/component/playground/index.css

@@ -32,6 +32,15 @@
   overflow: scroll;
 }
 
+[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .result-wrapper pre {
+  color: rgba(255, 255, 255, .85);
+  background: #141414;
+}
+
 .prompt-input-wrapper {
   width: 100%;
 }
@@ -423,6 +432,49 @@
   color: #2b83ff;
 }
 
+[data-theme="dark"] .prompt-input .tip-button {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .tip-button.active {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper:hover, [data-theme="dark"] .prompt-input .prompt-textarea-wrapper.focused {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item:hover {
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .dropdown-content {
+  background-color: #1f1f1f;
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .prompt-input .param-label {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .prompt-input .error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .prompt-input .send-button-text {
+  color: #2b83ff;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;

package/dist/es/component/playground-result/index.css

@@ -32,3 +32,12 @@
   overflow: scroll;
 }
 
+[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .result-wrapper pre {
+  color: rgba(255, 255, 255, .85);
+  background: #141414;
+}
+

package/dist/es/component/prompt-input/index.css

@@ -389,3 +389,46 @@
   color: #2b83ff;
 }
 
+[data-theme="dark"] .prompt-input .tip-button {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .tip-button.active {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper:hover, [data-theme="dark"] .prompt-input .prompt-textarea-wrapper.focused {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item:hover {
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .dropdown-content {
+  background-color: #1f1f1f;
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .prompt-input .param-label {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .prompt-input .error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .prompt-input .send-button-text {
+  color: #2b83ff;
+}
+

package/dist/es/component/universal-playground/index.css

@@ -339,3 +339,72 @@
   text-decoration: underline;
 }
 
+[data-theme="dark"] .universal-playground .error-hint {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .status-indicator {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.error {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .operation-label {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .alert-message {
+  color: rgba(255, 255, 255, .85);
+  background-color: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-icon-wrapper {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content .operation-title {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer .status-text {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .results-info {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-title {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-details {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.error {
+  color: #ff4d4f;
+}
+

package/dist/es/components/screenshot-viewer/index.css

@@ -168,3 +168,51 @@
   color: #999;
 }
 
+[data-theme="dark"] .screenshot-viewer.offline, [data-theme="dark"] .screenshot-viewer.loading, [data-theme="dark"] .screenshot-viewer.error {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container {
+  background: #141414;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  color: rgba(255, 255, 255, .45);
+}
+

package/dist/es/icons/global-perspective.mjs

@@ -8,7 +8,7 @@ const SvgGlobalPerspective = (props)=>/*#__PURE__*/ jsx("svg", {
         viewBox: "0 0 16 16",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
-            fill: "#333",
+            fill: "currentColor",
             d: "M1.333 13v-2.5a.667.667 0 0 1 1.334 0V13c0 .184.149.333.333.333h2.5a.667.667 0 0 1 0 1.334H3c-.92 0-1.667-.746-1.667-1.667m12 0v-2.5a.667.667 0 0 1 1.334 0V13c0 .92-.746 1.667-1.667 1.667h-2.5a.667.667 0 0 1 0-1.334H13a.333.333 0 0 0 .333-.333m-12-7.5V3c0-.92.747-1.667 1.667-1.667h2.5a.667.667 0 0 1 0 1.334H3A.333.333 0 0 0 2.667 3v2.5a.667.667 0 0 1-1.334 0m12 0V3A.333.333 0 0 0 13 2.667h-2.5a.667.667 0 0 1 0-1.334H13c.92 0 1.667.747 1.667 1.667v2.5a.667.667 0 0 1-1.334 0M5.667 10.333h4.666V5.667H5.667zm6 .167c0 .644-.523 1.167-1.167 1.167h-5A1.167 1.167 0 0 1 4.333 10.5v-5c0-.644.523-1.167 1.167-1.167h5c.644 0 1.167.523 1.167 1.167z"
         })
     });

package/dist/es/icons/history.mjs

@@ -9,7 +9,7 @@ const SvgHistory = (props)=>/*#__PURE__*/ jsxs("svg", {
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
-                stroke: "#000",
+                stroke: "currentColor",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 strokeOpacity: 0.85,
@@ -17,7 +17,7 @@ const SvgHistory = (props)=>/*#__PURE__*/ jsxs("svg", {
                 d: "M6.63 9.021c-2.862 6.126 2.197 10.501 6.063 10.501a7 7 0 1 0-6.063-10.5"
             }),
             /*#__PURE__*/ jsx("path", {
-                stroke: "#000",
+                stroke: "currentColor",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 strokeOpacity: 0.85,

package/dist/es/icons/magnifying-glass.mjs

@@ -9,7 +9,7 @@ const SvgMagnifyingGlass = (props)=>/*#__PURE__*/ jsxs("svg", {
         ...props,
         children: [
             /*#__PURE__*/ jsxs("g", {
-                stroke: "#000",
+                stroke: "currentColor",
                 strokeLinejoin: "round",
                 strokeOpacity: 0.65,
                 strokeWidth: 1.5,

package/dist/es/icons/player-setting.mjs

@@ -9,13 +9,13 @@ const SvgPlayerSetting = (props)=>/*#__PURE__*/ jsxs("svg", {
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
-                stroke: "#333",
+                stroke: "currentColor",
                 strokeLinejoin: "round",
                 strokeWidth: 1.333,
                 d: "M11.333 13.667 14.667 8l-3.334-5.667H4.667L1.333 8l3.334 5.667z"
             }),
             /*#__PURE__*/ jsx("path", {
-                stroke: "#333",
+                stroke: "currentColor",
                 strokeLinejoin: "round",
                 strokeWidth: 1.333,
                 d: "M8 9.667a1.667 1.667 0 1 0 0-3.334 1.667 1.667 0 0 0 0 3.334Z"