@qn-pandora/pandora-component 5.1.1 → 5.1.3

package/es/components/FileResumable/style.css

@@ -62,7 +62,7 @@
   text-align: center;
 }
 .ant-upload.ant-upload-select-picture-card:hover {
-  border-color: #7a869a;
+  border-color: #436bff;
 }
 .ant-upload-disabled.ant-upload.ant-upload-select-picture-card:hover {
   border-color: #e5e5e5;
@@ -83,7 +83,7 @@
   padding: 16px 0;
 }
 .ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) {
-  border-color: #555f73;
+  border-color: #2e4dd9;
 }
 .ant-upload.ant-upload-drag.ant-upload-disabled {
   cursor: not-allowed;
@@ -97,13 +97,13 @@
   vertical-align: middle;
 }
 .ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
-  border-color: #9ca0a6;
+  border-color: #6b90ff;
 }
 .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
   margin-bottom: 20px;
 }
 .ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
-  color: #9ca0a6;
+  color: #6b90ff;
   font-size: 48px;
 }
 .ant-upload.ant-upload-drag p.ant-upload-text {
@@ -223,7 +223,7 @@
   font-size: 14px;
 }
 .ant-upload-list-item:hover .ant-upload-list-item-info {
-  background-color: rgba(44, 109, 210, 0.05);
+  background-color: rgba(67, 107, 255, 0.05);
 }
 .ant-upload-list-item:hover .ant-upload-list-item-card-actions-btn {
   opacity: 1;
@@ -651,7 +651,7 @@
   text-align: right;
 }
 .pandora-sdk-file-resumable-run-container .pandora-sdk-file-resumable-run-container-icon {
-  color: #2c6dd2;
+  color: #436bff;
   cursor: pointer;
   font-size: 14px;
   margin: 0 6px;
@@ -667,12 +667,12 @@
   color: #bfbfbf;
 }
 .downloadIcon {
-  color: #2c6dd2;
+  color: #436bff;
   cursor: pointer;
   font-size: 20px;
 }
 .pandora-sdk-file-resumable:hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
 }
 .pandora-sdk-file-resumable-img-container {
   background: #ffffff;

package/es/components/FlameGraph/customTooltip.d.ts

@@ -0,0 +1,22 @@
+declare function defaultLabel(d: any): string;
+export declare function defaultFlamegraphTooltip(): {
+    (): void;
+    show(d: any): any;
+    hide(): any;
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's textContent.
+     *
+     * Cannot be combined with tip.html().
+     */
+    text(_: any): typeof defaultLabel | any;
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's innerHTML.
+     *
+     * Cannot be combined with tip.text().
+     *
+     * @deprecated prefer tip.text().
+     */
+    html(_: any): typeof defaultLabel | any;
+    destroy(): void;
+};
+export {};

package/es/components/FlameGraph/customTooltip.js

@@ -0,0 +1,91 @@
+/**
+ * 库里面copy 出来，修改了 tooltip 的展示内容
+ * https://github.com/spiermar/d3-flame-graph/blob/master/src/tooltip.js
+ */
+import * as d3 from 'd3';
+function defaultLabel(d) {
+    if (d.data.name === 'root') {
+        return "\n    <div>\n      <span>Name:" + d.data.name + "</span>\n    </div>";
+    }
+    var percentofParent = d.parent
+        ? ((d.value / d.parent.value) * 100).toFixed(2)
+        : 100;
+    var siblingPercentage = d.data.depthPercentage.toFixed(2);
+    return "\n  <div>\n    <span>Name:" + d.data.name + "</span><br/>\n    <span>File:" + d.data.source.file + "</span><br/>\n    <span>Line:" + d.data.source.line + "</span><br/>\n    <span>" + siblingPercentage + "% of all  " + percentofParent + "% of parent</span>\n  </div>";
+}
+export function defaultFlamegraphTooltip() {
+    var rootElement = d3.select('body');
+    var tooltip = null;
+    // Function to get HTML content from data.
+    var html = defaultLabel;
+    // Function to get text content from data.
+    var text = defaultLabel;
+    // Whether to use d3's .html() to set content, otherwise use .text().
+    var contentIsHTML = true;
+    function tip() {
+        tooltip = rootElement
+            .append('div')
+            .style('display', 'none')
+            .style('position', 'absolute')
+            .style('opacity', 0)
+            .style('pointer-events', 'none')
+            .style('z-index', 2000)
+            .attr('class', 'd3-flame-graph-tip');
+    }
+    tip.show = function (d) {
+        tooltip
+            .style('display', 'block')
+            .style('left', event.pageX + 5 + 'px')
+            .style('top', event.pageY + 5 + 'px')
+            .transition()
+            .duration(200)
+            .style('opacity', 1)
+            .style('pointer-events', 'all');
+        if (contentIsHTML) {
+            tooltip.html(html(d));
+        }
+        else {
+            tooltip.text(text(d));
+        }
+        return tip;
+    };
+    tip.hide = function () {
+        tooltip
+            .style('display', 'none')
+            .transition()
+            .duration(200)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        return tip;
+    };
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's textContent.
+     *
+     * Cannot be combined with tip.html().
+     */
+    tip.text = function (_) {
+        if (!arguments.length)
+            return text;
+        text = _;
+        contentIsHTML = false;
+        return tip;
+    };
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's innerHTML.
+     *
+     * Cannot be combined with tip.text().
+     *
+     * @deprecated prefer tip.text().
+     */
+    tip.html = function (_) {
+        if (!arguments.length)
+            return html;
+        html = _;
+        contentIsHTML = true;
+        return tip;
+    };
+    tip.destroy = function () {
+        tooltip.remove();
+    };
+    return tip;
+}

package/es/components/FlameGraph/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import 'd3-flame-graph/dist/d3-flamegraph.css';
+export interface IFlameGraphData {
+    name: string;
+    count: number;
+    source?: IKeyValues;
+    children?: IFlameGraphData[];
+}
+declare const FlameGraph: ({ data, width, height, depth, searchFilters }: {
+    data: IFlameGraphData;
+    width: number;
+    height?: number | undefined;
+    depth?: number | undefined;
+    searchFilters?: IKeyValues<any>[] | undefined;
+}) => React.JSX.Element;
+export default FlameGraph;

package/es/components/FlameGraph/index.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { flamegraph } from 'd3-flame-graph';
+import * as d3 from 'd3';
+import 'd3-flame-graph/dist/d3-flamegraph.css';
+import { defaultFlamegraphTooltip } from './customTooltip';
+import { SDK_PREFIX } from '../../constants/style';
+var CELL_HEIGHT = 24;
+var MIN_HEIGHT = 300;
+var DEFAULT_OPACITY = 0.8;
+var FlameGraph = function (_a) {
+    var data = _a.data, width = _a.width, height = _a.height, depth = _a.depth, searchFilters = _a.searchFilters;
+    var flameGraphRef = useRef(null);
+    var flameGraphInstance = useRef(null); // 存储 flamegraph 实例
+    var svgRef = useRef(null); // 存储 flamegraph 实例
+    var currentNodeRef = useRef(null);
+    var colorFunction = function (d) {
+        return d.data.color;
+    };
+    var flameHeight = useMemo(function () {
+        if (height)
+            return height;
+        if (depth) {
+            return depth * CELL_HEIGHT;
+        }
+        return MIN_HEIGHT;
+    }, [height, depth]);
+    useEffect(function () {
+        if (flameGraphInstance.current && svgRef.current) {
+            flameGraphInstance.current.width(width).height(flameHeight);
+            svgRef.current
+                .select('svg')
+                .attr('width', width)
+                .attr('height', flameHeight);
+        }
+    }, [width, flameHeight]);
+    useEffect(function () {
+        if (!data || !flameGraphRef.current)
+            return;
+        if (!flameGraphInstance.current) {
+            var flame = flamegraph()
+                .width(width)
+                .height(flameHeight)
+                .cellHeight(CELL_HEIGHT)
+                .transitionDuration(750)
+                .inverted(true);
+            var tip = defaultFlamegraphTooltip();
+            flame.tooltip(tip);
+            flame.setColorMapper(colorFunction);
+            flame.onClick(function (d) {
+                var preCurrentNode = currentNodeRef.current;
+                if (preCurrentNode && d === preCurrentNode) {
+                    // 如果点击的是当前节点，回调到root）
+                    if (preCurrentNode.parent) {
+                        flameGraphInstance.current.resetZoom();
+                    }
+                }
+                else {
+                    // 否则，进入子节点
+                    currentNodeRef.current = d;
+                }
+            });
+            flameGraphInstance.current = flame;
+        }
+        // 渲染火焰图到指定的 DOM 元素
+        svgRef.current = d3
+            .select(flameGraphRef.current)
+            .datum(data)
+            .call(flameGraphInstance.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+    useEffect(function () {
+        if (svgRef.current && searchFilters) {
+            svgRef.current.selectAll('rect').style('opacity', function (d) {
+                // 清空选中的值后，图名都需要恢复
+                if (searchFilters.length === 0)
+                    return DEFAULT_OPACITY;
+                var matchCount = 0;
+                searchFilters.forEach(function (item) {
+                    if (item.field === 'method' && d.data.name === item.value[0]) {
+                        matchCount += 1;
+                    }
+                    else if (item.field === 'file' &&
+                        d.data.source.file === item.value[0]) {
+                        matchCount += 1;
+                    }
+                });
+                if (matchCount === searchFilters.length) {
+                    return DEFAULT_OPACITY;
+                }
+                return 0.2;
+            });
+        }
+    }, [searchFilters]);
+    return (React.createElement("div", { ref: flameGraphRef, className: SDK_PREFIX + "-flame-graph-wrapper" }));
+};
+export default FlameGraph;

package/es/components/FlameGraph/style.css

@@ -0,0 +1,8 @@
+.pandora-sdk-flame-graph-wrapper :global .d3-flame-graph-label {
+  padding: 4px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  cursor: pointer;
+  overflow: hidden;
+}

package/es/components/FlameGraph/style.less

@@ -0,0 +1,14 @@
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-flame-graph-wrapper {
+  :global {
+    .d3-flame-graph-label {
+      padding: 4px 8px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 11px;
+      cursor: pointer;
+      overflow: hidden;
+    }
+  }
+}

package/es/components/Input/style.css

@@ -47,7 +47,7 @@
   text-overflow: ellipsis;
 }
 .ant-input-affix-wrapper:hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-right-width: 1px;
 }
 .ant-input-rtl .ant-input-affix-wrapper:hover {
@@ -56,9 +56,9 @@
 }
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
-  border-color: #9ca0a6;
-  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
-          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+  border-color: #6b90ff;
+  -webkit-box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+          box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
   border-right-width: 1px;
   outline: 0;
 }
@@ -124,7 +124,7 @@ textarea.ant-input-affix-wrapper {
   direction: rtl;
 }
 .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-right-width: 1px;
   z-index: 1;
 }
@@ -352,7 +352,7 @@ textarea.ant-input-affix-wrapper {
   text-overflow: ellipsis;
 }
 .ant-input:hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-right-width: 1px;
 }
 .ant-input-rtl .ant-input:hover {
@@ -361,9 +361,9 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input:focus,
 .ant-input-focused {
-  border-color: #9ca0a6;
-  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
-          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+  border-color: #6b90ff;
+  -webkit-box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+          box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
   border-right-width: 1px;
   outline: 0;
 }
@@ -517,7 +517,7 @@ textarea.ant-input {
 }
 .ant-input-group-addon .ant-select-open .ant-select-selector,
 .ant-input-group-addon .ant-select-focused .ant-select-selector {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-input-group-addon .ant-cascader-picker {
   margin: -9px -12px;
@@ -830,11 +830,11 @@ textarea.ant-input {
 }
 .ant-input-search .ant-input:hover,
 .ant-input-search .ant-input:focus {
-  border-color: #2c6dd2;
+  border-color: #436bff;
 }
 .ant-input-search .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),
 .ant-input-search .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary) {
-  border-left-color: #2c6dd2;
+  border-left-color: #436bff;
 }
 .ant-input-search .ant-input-affix-wrapper {
   border-radius: 0;
@@ -939,11 +939,11 @@ textarea.ant-input {
 }
 .ant-input-search-rtl .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover,
 .ant-input-search-rtl .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover {
-  border-left-color: #2c6dd2;
+  border-left-color: #436bff;
 }
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper:hover,
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper-focused {
-  border-right-color: #2c6dd2;
+  border-right-color: #436bff;
 }
 .ant-input-search-rtl > .ant-input-group > .ant-input-group-addon:last-child {
   right: -1px;

package/es/components/Menu/Option.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import type { IMenuProps } from './index';
 export interface IOption {
     key: string;

package/es/components/Menu/Option.js

@@ -9,11 +9,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import * as React from 'react';
+import React from 'react';
 import { Menu as BaseMenu } from 'antd';
 import { SDK_PREFIX } from '../../constants/style';
 var Item = BaseMenu.Item, SubMenu = BaseMenu.SubMenu;
 export default function Option(option) {
+    var handleTitleClick = function (e, option) {
+        var _a;
+        if (option.url || option.internalUrl) {
+            (_a = option.onMenuClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
+            return;
+        }
+        if (option.weburl) {
+            window.open(option.weburl, option.target || '_blank');
+        }
+    };
     if (!option.children) {
         if (option.weburl) {
             return (React.createElement(Item, { key: option.key },
@@ -21,9 +31,7 @@ export default function Option(option) {
         }
         return React.createElement(Item, { key: option.key }, option.text);
     }
-    return (React.createElement(SubMenu, { key: option.key, title: option.text, popupClassName: option.popupClassName, 
-        // 如果子菜单也有url时，点击触发menu的点击回调函数
-        onTitleClick: function (e) { var _a; return option.url && ((_a = option.onMenuClick) === null || _a === void 0 ? void 0 : _a.call(option, e)); } }, option.children.map(function (item) {
+    return (React.createElement(SubMenu, { key: option.key, title: option.text, popupClassName: option.popupClassName, onTitleClick: function (e) { return handleTitleClick(e, option); } }, option.children.map(function (item) {
         return Option(__assign(__assign({}, item), { onMenuClick: option.onMenuClick }));
     })));
 }

package/es/components/Menu/style.css

@@ -68,8 +68,8 @@
   content: '';
 }
 .ant-menu.ant-menu-root:focus-visible {
-  -webkit-box-shadow: 0 0 0 2px #c0c6cc;
-          box-shadow: 0 0 0 2px #c0c6cc;
+  -webkit-box-shadow: 0 0 0 2px #e6eeff;
+          box-shadow: 0 0 0 2px #e6eeff;
 }
 .ant-menu ul,
 .ant-menu ol {
@@ -110,7 +110,7 @@
   transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 .ant-menu-submenu-selected {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-item:active,
 .ant-menu-submenu-title:active {
@@ -129,7 +129,7 @@
   color: #7a869a;
 }
 .ant-menu-item a:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-item a::before {
   position: absolute;
@@ -144,7 +144,7 @@
   color: #7a869a;
 }
 .ant-menu-item > .ant-badge a:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-item-divider {
   overflow: hidden;
@@ -166,11 +166,11 @@
   background-color: transparent;
 }
 .ant-menu-item-selected {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-item-selected a,
 .ant-menu-item-selected a:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: rgba(255, 255, 255, 0.1);
@@ -268,8 +268,8 @@
 }
 .ant-menu-item:not(.ant-menu-item-disabled):focus-visible,
 .ant-menu-submenu-title:not(.ant-menu-item-disabled):focus-visible {
-  -webkit-box-shadow: 0 0 0 2px #c0c6cc;
-          box-shadow: 0 0 0 2px #c0c6cc;
+  -webkit-box-shadow: 0 0 0 2px #e6eeff;
+          box-shadow: 0 0 0 2px #e6eeff;
 }
 .ant-menu > .ant-menu-item-divider {
   margin: 1px 0;
@@ -351,7 +351,7 @@
 }
 .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon,
 .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-inline-collapsed .ant-menu-submenu-arrow::before,
 .ant-menu-submenu-inline .ant-menu-submenu-arrow::before {
@@ -381,7 +381,7 @@
 .ant-menu-vertical .ant-menu-submenu-selected,
 .ant-menu-vertical-left .ant-menu-submenu-selected,
 .ant-menu-vertical-right .ant-menu-submenu-selected {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-horizontal {
   line-height: 46px;
@@ -404,7 +404,7 @@
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open,
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after,
@@ -414,7 +414,7 @@
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after,
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after,
 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
-  border-bottom: 2px solid #2c6dd2;
+  border-bottom: 2px solid #436bff;
 }
 .ant-menu-horizontal > .ant-menu-item,
 .ant-menu-horizontal > .ant-menu-submenu {
@@ -441,13 +441,13 @@
   color: #7a869a;
 }
 .ant-menu-horizontal > .ant-menu-item a:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-horizontal > .ant-menu-item a::before {
   bottom: -2px;
 }
 .ant-menu-horizontal > .ant-menu-item-selected a {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu-horizontal::after {
   display: block;
@@ -469,7 +469,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  border-right: 3px solid #2c6dd2;
+  border-right: 3px solid #436bff;
   -webkit-transform: scaleY(0.0001);
           transform: scaleY(0.0001);
   opacity: 0;
@@ -706,22 +706,22 @@
 .ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
 .ant-menu-light .ant-menu-submenu-active,
 .ant-menu-light .ant-menu-submenu-title:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-menu.ant-menu-root:focus-visible {
-  -webkit-box-shadow: 0 0 0 2px #555f73;
-          box-shadow: 0 0 0 2px #555f73;
+  -webkit-box-shadow: 0 0 0 2px #2e4dd9;
+          box-shadow: 0 0 0 2px #2e4dd9;
 }
 .ant-menu-dark .ant-menu-item:focus-visible,
 .ant-menu-dark .ant-menu-submenu-title:focus-visible {
-  -webkit-box-shadow: 0 0 0 2px #555f73;
-          box-shadow: 0 0 0 2px #555f73;
+  -webkit-box-shadow: 0 0 0 2px #2e4dd9;
+          box-shadow: 0 0 0 2px #2e4dd9;
 }
 .ant-menu.ant-menu-dark,
 .ant-menu-dark .ant-menu-sub,
 .ant-menu.ant-menu-dark .ant-menu-sub {
   color: #ffffff;
-  background: #2c6dd2;
+  background: #436bff;
 }
 .ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow,
 .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow,
@@ -752,7 +752,7 @@
   top: 0;
   margin-top: 0;
   padding: 0 20px;
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-bottom: 0;
 }
 .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {

package/es/components/Modal/style.css

@@ -217,7 +217,7 @@
   color: #f0a818;
 }
 .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-modal-confirm-success .ant-modal-confirm-body > .anticon {
   color: #20c997;

package/es/components/NameExplainTooltip/style.css

@@ -5,5 +5,5 @@
 }
 .pandora-sdk-name-explain-icon:hover,
 .pandora-sdk-name-explain-icon .ant-tooltip-open {
-  color: #2c6dd2;
+  color: #436bff;
 }

package/es/components/OptionList/InlineOptionList/style.css

@@ -139,5 +139,5 @@
   margin-right: 12px;
 }
 .pandora-sdk-popover-inline-list .pandora-sdk-popover-inline-item i {
-  color: #2c6dd2;
+  color: #436bff;
 }

package/es/components/OptionList/OptionItem/style.css

@@ -291,7 +291,7 @@
   text-align: right;
 }
 .pandora-sdk-item {
-  color: #2c6dd2;
+  color: #436bff;
   cursor: pointer;
 }
 .pandora-sdk-item > .anticon {
@@ -306,7 +306,7 @@
   color: #bfbfbf;
 }
 .pandora-sdk-item.pandora-sdk-active {
-  background: rgba(44, 109, 210, 0.05);
+  background: rgba(67, 107, 255, 0.05);
 }
 .pandora-sdk-item a {
   color: inherit;

package/es/components/OptionList/PopoverOptionList/style.css

@@ -354,7 +354,7 @@
 .pandora-sdk-popover-item {
   display: inline-block;
   line-height: 18px;
-  color: #2c6dd2;
+  color: #436bff;
   vertical-align: middle;
   cursor: pointer;
 }
@@ -371,8 +371,8 @@
   padding: 0 16px;
 }
 .pandora-sdk-popover-list .pandora-sdk-item:hover {
-  background: rgba(44, 109, 210, 0.05);
-  color: #2c6dd2;
+  background: rgba(67, 107, 255, 0.05);
+  color: #436bff;
 }
 .pandora-sdk-popover-list .pandora-sdk-item.pandora-sdk-disabled {
   color: #bfbfbf;