@reltio/components 1.4.2262 → 1.4.2264

package/AttributeVerificationStatus/helpers.js

@@ -1,10 +1,10 @@
 import i18n from 'ui-i18n';
 import { InputVerificationAttribute } from '@reltio/mdm-sdk';
 import { EmptyStub } from '../EmptyStub';
-import VerificationInvalidIcon from '../icons/VerificationInvalidIcon';
-import VerificationValidIcon from '../icons/VerificationValidIcon';
-import VerificationOutdatedIcon from '../icons/VerificationOutdatedIcon';
-import VerificationMaybeIcon from '../icons/VerificationMaybeIcon';
+import VerificationInvalidIcon from '../icons/VerificationInvalid';
+import VerificationValidIcon from '../icons/VerificationValid';
+import VerificationOutdatedIcon from '../icons/VerificationOutdated';
+import VerificationMaybeIcon from '../icons/VerificationMaybe';
 import { VerificationStatus } from '../contexts/AttributesVerificationContext/helpers';
 export var getIconByVerificationStatus = function (verificationStatus) {
     switch (verificationStatus) {

package/BarChart/BarChart.js

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import { useTheme } from '@mui/material/styles';
 import { Bar, Rectangle, BarChart as BarChartWidget, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 import { ChartTooltip } from '../ChartTooltip';
 import { useClickableChartStyle } from '../hooks/useClickableChartStyle';
@@ -28,7 +29,8 @@ import { useDynamicYAxisWidth } from '../hooks/useDynamicYAxisWidth';
 import { getBarChartSettings } from './helpers';
 export var BarChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
-    var _c = getBarChartSettings(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
+    var theme = useTheme();
+    var _c = getBarChartSettings(options, theme.palette.primary.main), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
     var _d = useDynamicYAxisWidth({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
     var onBarClick = onItemClick && (function (_a) {
         var group = _a.group;

package/BarChart/helpers.d.ts

@@ -9,5 +9,5 @@ type BarChartSettings = {
     cartesianGrid: Omit<CartesianGridProps, 'ref'>;
     tooltip: TooltipProps<number, string>;
 };
-export declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions) => BarChartSettings;
+export declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions, barColor: string) => BarChartSettings;
 export {};

package/BarChart/helpers.js

@@ -1,5 +1,5 @@
 import { formatNumberAsMetric } from '@reltio/mdm-sdk';
-export var getBarChartSettings = function (_a) {
+export var getBarChartSettings = function (_a, barColor) {
     var margin = _a.margin, isHorizontal = _a.isHorizontal, isLabelRotated = _a.isLabelRotated;
     return {
         barChart: {
@@ -9,7 +9,7 @@ export var getBarChartSettings = function (_a) {
         },
         bar: {
             dataKey: 'value',
-            fill: isHorizontal ? '#9FC3FF' : '#0072CE'
+            fill: barColor
         },
         xAxis: {
             type: isHorizontal ? 'number' : 'category',

package/CollaborationItem/components/RepliedComment/styles.js

@@ -1,10 +1,11 @@
 import { makeStyles } from '@mui/styles';
+import { alpha } from '@mui/material/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     root: {
         display: 'flex',
         padding: '8px',
         borderRadius: '4px',
-        backgroundColor: 'rgba(0,114,206,0.06)'
+        backgroundColor: alpha(theme.palette.primary.main, 0.06)
     },
     avatar: {
         marginRight: '8px'

package/CollaborationItem/components/SendMessageArea/styles.js

@@ -1,11 +1,12 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
+import { alpha } from '@mui/material/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: function (_a) {
         var isEditing = _a.isEditing;
         return ({
             padding: isEditing ? '6px 6px 6px 0' : ' 6px 6px 6px 8px',
             borderRadius: '4px',
-            backgroundColor: isEditing ? 'transparent' : 'rgba(0,114,206,0.06)'
+            backgroundColor: isEditing ? 'transparent' : alpha(theme.palette.primary.main, 0.06)
         });
     },
     textField: function (_a) {
@@ -33,4 +34,4 @@ export var useStyles = makeStyles({
             marginLeft: '8px'
         }
     }
-});
+}); });

package/EmptyState/EmptyState.js

@@ -31,7 +31,7 @@ export var EmptyState = function (_a) {
     var styles = useStyles();
     var showButton = access && buttonTitle;
     return (React.createElement("div", { className: classnames(styles.root, styles["root_".concat(variant)]) },
-        React.createElement(LogoRenderer, { className: styles["".concat(variant)] }),
+        React.createElement(LogoRenderer, { className: classnames(styles.logo, styles[variant]) }),
         React.createElement("div", { className: styles.textBox },
             React.createElement(Typography, { variant: "h5", classes: { h5: styles.text } }, text),
             secondaryText && (React.createElement(Typography, { variant: "subtitle1", classes: { subtitle1: styles.secondaryText } }, secondaryText))),

package/EmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "embedded" | "root_small" | "full" | "textBox" | "secondaryText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "embedded" | "root_small" | "logo" | "full" | "textBox" | "secondaryText">;

package/EmptyState/styles.js

@@ -35,6 +35,9 @@ export var useStyles = makeStyles(function (theme) { return ({
         }
     },
     root_small: {},
+    logo: {
+        color: theme.palette.primary.main
+    },
     small: {
         width: '88px',
         height: '88px'

package/FileDropZone/FileDropZone.module.css.js

@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.FileDropZone-root--9QbaV{cursor:pointer}.FileDropZone-active--FUwfs{background-color:rgba(0,114,206,.12)}`;
+    style.innerHTML = `.FileDropZone-root--9QbaV{cursor:pointer}.FileDropZone-active--FUwfs{background-color:color-mix(in srgb,var(--mui-palette-primary-main) 12%,transparent)}`;
     head.appendChild(style);
 }
 export default styles;

package/ImageActionsOverlay/styles.js

@@ -1,5 +1,6 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
+import { alpha } from '@mui/material/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     overlay: {
         position: 'absolute',
         top: 0,
@@ -16,7 +17,7 @@ export var useStyles = makeStyles(function () { return ({
         userSelect: 'none'
     },
     selected: {
-        backgroundColor: 'rgba(0,114,206,0.6)'
+        backgroundColor: alpha(theme.palette.primary.main, 0.6)
     },
     selectionMode: {
         cursor: 'pointer',

package/ImageAttributesLineEditor/styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         width: '100%'
     },
@@ -20,7 +20,7 @@ export var useStyles = makeStyles(function () { return ({
             width: imageWidth,
             height: imageHeight,
             cursor: 'pointer',
-            border: '1px dashed #0072CE',
+            border: "1px dashed ".concat(theme.palette.primary.main),
             boxSizing: 'border-box',
             marginRight: imageMargin,
             display: 'flex',

package/ReltioMap/components/EntityMarker/EntityMarker.js

@@ -23,26 +23,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { pathEq } from 'ramda';
 import { AdvancedMarker } from '@vis.gl/react-google-maps';
+import { lighten, useTheme } from '@mui/material/styles';
 import { ProfileCard } from '../../../ProfileCard';
 import { Popper } from '../../../Popper';
 import { debounce, svg2Url } from '@reltio/mdm-sdk';
 import { EntityMarkerContext } from '../../../contexts/EntityMarkerContext';
-import { MARKER } from './icons/marker.inline.svg';
-import { HOVERED_MARKER } from './icons/marker-hover.inline.svg';
+import { createMarker } from './icons/marker.inline.svg';
+import { createHoveredMarker } from './icons/marker-hover.inline.svg';
 import { useStyles } from './styles';
 var HIDE_DEBOUNCE_INTERVAL = 50;
 var MARKER_HEIGHT = 32;
 var MARKER_CARD_MARGIN = 8;
-var hoveredMarkerIcon = svg2Url(HOVERED_MARKER);
-var markerIcon = svg2Url(MARKER);
+var MARKER_LIGHTEN = 0.3;
 var EntityMarker = function (_a) {
     var _b;
     var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, disabled = _a.disabled, otherProps = __rest(_a, ["marker", "onClick", "clusterer", "disabled"]);
     var styles = useStyles();
+    var theme = useTheme();
     var _c = useState(false), hovered = _c[0], setHovered = _c[1];
     var activeEntityUri = useContext(EntityMarkerContext).activeEntityUri;
     var isActive = pathEq(['entity', 'uri'], activeEntityUri, marker);
     var position = useMemo(function () { return ({ lat: marker.point.lat, lng: marker.point.lng }); }, [marker.point]);
+    var markerColor = useMemo(function () { return lighten(theme.palette.primary.main, MARKER_LIGHTEN); }, [theme.palette.primary.main]);
+    var markerIcon = useMemo(function () { return svg2Url(createMarker(markerColor)); }, [markerColor]);
+    var hoveredMarkerIcon = useMemo(function () { return svg2Url(createHoveredMarker(markerColor)); }, [markerColor]);
     var setHoveredDebounced = useCallback(debounce(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
     var onMouseOver = useCallback(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
     var onMouseOut = useCallback(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);

package/ReltioMap/components/EntityMarker/EntityMarker.spec.js

@@ -48,13 +48,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createTheme, lighten, ThemeProvider } from '@mui/material/styles';
 import { svg2Url } from '@reltio/mdm-sdk';
+import { theme as reltioTheme } from '../../../constants';
 import EntityMarker from './EntityMarker';
 import { EntityMarkerContext } from '../../../contexts/EntityMarkerContext';
-import { HOVERED_MARKER } from './icons/marker-hover.inline.svg';
-import { MARKER } from './icons/marker.inline.svg';
+import { createHoveredMarker } from './icons/marker-hover.inline.svg';
+import { createMarker } from './icons/marker.inline.svg';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: jest.fn(function (fn, _delay) { return jest.requireActual('@reltio/mdm-sdk').debounce(fn, 0); }) })); });
+var muiTheme = createTheme(reltioTheme);
 jest.mock('@vis.gl/react-google-maps', function () {
     // The only reason why all the mock stuff inlcuding 'requre' inside the jest.mock is that
     // mocks with forwardRef doesn't work outside (in beforeEach/beforeAll)
@@ -73,8 +76,9 @@ jest.mock('@vis.gl/react-google-maps', function () {
     AdvancedMarker.displayName = 'AdvancedMarker';
     return __assign(__assign({}, jest.requireActual('@vis.gl/react-google-maps')), { AdvancedMarker: AdvancedMarker });
 });
-var hoveredMarkerIcon = svg2Url(HOVERED_MARKER);
-var markerIcon = svg2Url(MARKER);
+var markerColor = lighten(muiTheme.palette.primary.main, 0.3);
+var hoveredMarkerIcon = svg2Url(createHoveredMarker(markerColor));
+var markerIcon = svg2Url(createMarker(markerColor));
 describe('EntityMarker', function () {
     var mockMarker = {
         id: 'someId',
@@ -90,7 +94,8 @@ describe('EntityMarker', function () {
         if (contextValue === void 0) { contextValue = {}; }
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children));
+            return (React.createElement(ThemeProvider, { theme: muiTheme },
+                React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children)));
         };
         return render(React.createElement(EntityMarkerContext.Provider, { value: contextValue },
             React.createElement(EntityMarker, __assign({}, props))), { wrapper: Providers });

package/ReltioMap/components/EntityMarker/icons/marker-hover.inline.svg.d.ts

@@ -1 +1 @@
-export declare const HOVERED_MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large (hover)</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large-(hover)\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.32\" cx=\"11\" cy=\"28.5\" rx=\"6\" ry=\"4.66666667\"></ellipse>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n        <path d=\"M20,2 L20,20 L14.755,20 L14.6905172,20.0815309 C14.3562717,20.5012516 14.0578656,20.8886742 13.7817711,21.2616986 L13.5786724,21.5390469 C11.92787,23.8181606 11.079024,25.6311217 11.0052669,27.2674145 L11.0052669,27.2674145 L11,27.5 L10.9968324,27.3203844 C10.9285422,25.3781621 9.75347502,23.1598866 7.22124201,20.0010865 L2,20 L2,2 L20,2 Z\" id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-3)\"></path>\n    </g>\n</svg>";
+export declare const createHoveredMarker: (color: string) => string;

package/ReltioMap/components/EntityMarker/icons/marker-hover.inline.svg.js

@@ -1 +1 @@
-export var HOVERED_MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large (hover)</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large-(hover)\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.32\" cx=\"11\" cy=\"28.5\" rx=\"6\" ry=\"4.66666667\"></ellipse>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n        <path d=\"M20,2 L20,20 L14.755,20 L14.6905172,20.0815309 C14.3562717,20.5012516 14.0578656,20.8886742 13.7817711,21.2616986 L13.5786724,21.5390469 C11.92787,23.8181606 11.079024,25.6311217 11.0052669,27.2674145 L11.0052669,27.2674145 L11,27.5 L10.9968324,27.3203844 C10.9285422,25.3781621 9.75347502,23.1598866 7.22124201,20.0010865 L2,20 L2,2 L20,2 Z\" id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-3)\"></path>\n    </g>\n</svg>";
+export var createHoveredMarker = function (color) { return "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large (hover)</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large-(hover)\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.32\" cx=\"11\" cy=\"28.5\" rx=\"6\" ry=\"4.66666667\"></ellipse>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"".concat(color, "\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n        <path d=\"M20,2 L20,20 L14.755,20 L14.6905172,20.0815309 C14.3562717,20.5012516 14.0578656,20.8886742 13.7817711,21.2616986 L13.5786724,21.5390469 C11.92787,23.8181606 11.079024,25.6311217 11.0052669,27.2674145 L11.0052669,27.2674145 L11,27.5 L10.9968324,27.3203844 C10.9285422,25.3781621 9.75347502,23.1598866 7.22124201,20.0010865 L2,20 L2,2 L20,2 Z\" id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-3)\"></path>\n    </g>\n</svg>"); };

package/ReltioMap/components/EntityMarker/icons/marker.inline.svg.d.ts

@@ -1 +1 @@
-export declare const MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M20,1 C20.5522847,1 21,1.44771525 21,2 L21,20 C21,20.5522847 20.5522847,21 20,21 L15.2374606,21.0021908 C14.9306693,21.3935449 14.6510143,21.7632851 14.3885453,22.1256523 C12.8309725,24.2760522 12,26.0137017 12,27.5 C12,28.0522847 11.5522847,28.5 11,28.5 C10.4477153,28.5 10,28.0522847 10,27.5 C10,25.7886708 8.84033182,23.6810997 6.73798027,21.0014567 L2,21 C1.44771525,21 1,20.5522847 1,20 L1,2 C1,1.44771525 1.44771525,1 2,1 L20,1 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.12\" cx=\"11\" cy=\"28.5\" rx=\"4.5\" ry=\"3.5\"></ellipse>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"Path-3\" fill=\"#FFFFFF\"></path>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n    </g>\n</svg>";
+export declare const createMarker: (color: string) => string;

package/ReltioMap/components/EntityMarker/icons/marker.inline.svg.js

@@ -1 +1 @@
-export var MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M20,1 C20.5522847,1 21,1.44771525 21,2 L21,20 C21,20.5522847 20.5522847,21 20,21 L15.2374606,21.0021908 C14.9306693,21.3935449 14.6510143,21.7632851 14.3885453,22.1256523 C12.8309725,24.2760522 12,26.0137017 12,27.5 C12,28.0522847 11.5522847,28.5 11,28.5 C10.4477153,28.5 10,28.0522847 10,27.5 C10,25.7886708 8.84033182,23.6810997 6.73798027,21.0014567 L2,21 C1.44771525,21 1,20.5522847 1,20 L1,2 C1,1.44771525 1.44771525,1 2,1 L20,1 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.12\" cx=\"11\" cy=\"28.5\" rx=\"4.5\" ry=\"3.5\"></ellipse>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"Path-3\" fill=\"#FFFFFF\"></path>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n    </g>\n</svg>";
+export var createMarker = function (color) { return "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M20,1 C20.5522847,1 21,1.44771525 21,2 L21,20 C21,20.5522847 20.5522847,21 20,21 L15.2374606,21.0021908 C14.9306693,21.3935449 14.6510143,21.7632851 14.3885453,22.1256523 C12.8309725,24.2760522 12,26.0137017 12,27.5 C12,28.0522847 11.5522847,28.5 11,28.5 C10.4477153,28.5 10,28.0522847 10,27.5 C10,25.7886708 8.84033182,23.6810997 6.73798027,21.0014567 L2,21 C1.44771525,21 1,20.5522847 1,20 L1,2 C1,1.44771525 1.44771525,1 2,1 L20,1 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.12\" cx=\"11\" cy=\"28.5\" rx=\"4.5\" ry=\"3.5\"></ellipse>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"Path-3\" fill=\"#FFFFFF\"></path>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"".concat(color, "\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n    </g>\n</svg>"); };

package/ResizablePanes/styles.js

@@ -1,5 +1,6 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
+import { alpha } from '@mui/material/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     container: {
         position: 'relative'
     },
@@ -31,7 +32,7 @@ export var useStyles = makeStyles(function () { return ({
             },
             '&:not($disabled):hover': {
                 cursor: 'ns-resize',
-                backgroundImage: 'linear-gradient(rgba(0, 114, 206, 0), rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1))',
+                backgroundImage: "linear-gradient(".concat(alpha(theme.palette.primary.main, 0), ", ").concat(alpha(theme.palette.primary.main, 0.35), ", ").concat(theme.palette.primary.main, ")"),
                 backgroundSize: '100% 3px'
             }
         },
@@ -48,7 +49,7 @@ export var useStyles = makeStyles(function () { return ({
             },
             '&:not($disabled):hover': {
                 cursor: 'ew-resize',
-                backgroundImage: 'linear-gradient(to left, rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1), rgba(0, 114, 206, 0.35))',
+                backgroundImage: "linear-gradient(to left, ".concat(alpha(theme.palette.primary.main, 0.35), ", ").concat(theme.palette.primary.main, ", ").concat(alpha(theme.palette.primary.main, 0.35), ")"),
                 backgroundSize: '3px 100%'
             }
         }

package/SidePanelEmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"text" | "root" | "textBox" | "secondaryText" | "logo">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"text" | "root" | "logo" | "textBox" | "secondaryText">;

package/SidePanelEmptyState/styles.js

@@ -15,7 +15,8 @@ export var useStyles = makeStyles(function (theme) { return ({
     },
     logo: {
         width: '190px',
-        height: '190px'
+        height: '190px',
+        color: theme.palette.primary.main
     },
     textBox: {
         display: 'flex',

package/TableWithBars/components/NumberCellValueRenderer/styles.js

@@ -22,7 +22,7 @@ export var useStyles = makeStyles(function (theme) { return ({
         height: '20px',
         '&>div': {
             opacity: 1,
-            backgroundColor: '#0072CE'
+            backgroundColor: theme.palette.primary.main
         }
     },
     loadCaption: {

package/UploadImageDialog/components/TargetBox/TargetBox.module.css.js

@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.TargetBox-root--T8Dyg{padding:36px 0 29px}.TargetBox-icon--qfl13{height:190px;margin-bottom:24px;pointer-events:none;width:190px}.TargetBox-title--zQaNU{color:var(--mui-palette-text-primary);font-size:20px;font-weight:500;line-height:24px;margin-bottom:8px}.TargetBox-description--Jyqo5{color:var(--mui-palette-text-secondary);font-size:14px;line-height:16px;margin-bottom:24px}`;
+    style.innerHTML = `.TargetBox-root--T8Dyg{padding:36px 0 29px}.TargetBox-icon--qfl13{color:var(--mui-palette-primary-main);height:190px;margin-bottom:24px;pointer-events:none;width:190px}.TargetBox-title--zQaNU{color:var(--mui-palette-text-primary);font-size:20px;font-weight:500;line-height:24px;margin-bottom:8px}.TargetBox-description--Jyqo5{color:var(--mui-palette-text-secondary);font-size:14px;line-height:16px;margin-bottom:24px}`;
     head.appendChild(style);
 }
 export default styles;

package/cjs/AttributeVerificationStatus/helpers.js

@@ -7,22 +7,22 @@ exports.getTooltipTitleByVerificationStatus = exports.getIconByVerificationStatu
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var EmptyStub_1 = require("../EmptyStub");
-var VerificationInvalidIcon_1 = __importDefault(require("../icons/VerificationInvalidIcon"));
-var VerificationValidIcon_1 = __importDefault(require("../icons/VerificationValidIcon"));
-var VerificationOutdatedIcon_1 = __importDefault(require("../icons/VerificationOutdatedIcon"));
-var VerificationMaybeIcon_1 = __importDefault(require("../icons/VerificationMaybeIcon"));
+var VerificationInvalid_1 = __importDefault(require("../icons/VerificationInvalid"));
+var VerificationValid_1 = __importDefault(require("../icons/VerificationValid"));
+var VerificationOutdated_1 = __importDefault(require("../icons/VerificationOutdated"));
+var VerificationMaybe_1 = __importDefault(require("../icons/VerificationMaybe"));
 var helpers_1 = require("../contexts/AttributesVerificationContext/helpers");
 var getIconByVerificationStatus = function (verificationStatus) {
     switch (verificationStatus) {
         case helpers_1.VerificationStatus.VALID:
-            return VerificationValidIcon_1.default;
+            return VerificationValid_1.default;
         case helpers_1.VerificationStatus.INVALID:
-            return VerificationInvalidIcon_1.default;
+            return VerificationInvalid_1.default;
         case helpers_1.VerificationStatus.OUTDATED:
-            return VerificationOutdatedIcon_1.default;
+            return VerificationOutdated_1.default;
         case helpers_1.VerificationStatus.MAYBE:
         case helpers_1.VerificationStatus.ACCEPT_ALL:
-            return VerificationMaybeIcon_1.default;
+            return VerificationMaybe_1.default;
         default:
             return EmptyStub_1.EmptyStub;
     }

package/cjs/BarChart/BarChart.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BarChart = void 0;
 var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
 var recharts_1 = require("recharts");
 var ChartTooltip_1 = require("../ChartTooltip");
 var useClickableChartStyle_1 = require("../hooks/useClickableChartStyle");
@@ -34,7 +35,8 @@ var useDynamicYAxisWidth_1 = require("../hooks/useDynamicYAxisWidth");
 var helpers_1 = require("./helpers");
 var BarChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
-    var _c = (0, helpers_1.getBarChartSettings)(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
+    var theme = (0, styles_1.useTheme)();
+    var _c = (0, helpers_1.getBarChartSettings)(options, theme.palette.primary.main), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
     var _d = (0, useDynamicYAxisWidth_1.useDynamicYAxisWidth)({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
     var onBarClick = onItemClick && (function (_a) {
         var group = _a.group;

package/cjs/BarChart/helpers.d.ts

@@ -9,5 +9,5 @@ type BarChartSettings = {
     cartesianGrid: Omit<CartesianGridProps, 'ref'>;
     tooltip: TooltipProps<number, string>;
 };
-export declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions) => BarChartSettings;
+export declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions, barColor: string) => BarChartSettings;
 export {};

package/cjs/BarChart/helpers.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBarChartSettings = void 0;
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var getBarChartSettings = function (_a) {
+var getBarChartSettings = function (_a, barColor) {
     var margin = _a.margin, isHorizontal = _a.isHorizontal, isLabelRotated = _a.isLabelRotated;
     return {
         barChart: {
@@ -12,7 +12,7 @@ var getBarChartSettings = function (_a) {
         },
         bar: {
             dataKey: 'value',
-            fill: isHorizontal ? '#9FC3FF' : '#0072CE'
+            fill: barColor
         },
         xAxis: {
             type: isHorizontal ? 'number' : 'category',

package/cjs/CollaborationItem/components/RepliedComment/styles.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
+var styles_2 = require("@mui/material/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: {
         display: 'flex',
         padding: '8px',
         borderRadius: '4px',
-        backgroundColor: 'rgba(0,114,206,0.06)'
+        backgroundColor: (0, styles_2.alpha)(theme.palette.primary.main, 0.06)
     },
     avatar: {
         marginRight: '8px'

package/cjs/CollaborationItem/components/SendMessageArea/styles.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)({
+var styles_2 = require("@mui/material/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: function (_a) {
         var isEditing = _a.isEditing;
         return ({
             padding: isEditing ? '6px 6px 6px 0' : ' 6px 6px 6px 8px',
             borderRadius: '4px',
-            backgroundColor: isEditing ? 'transparent' : 'rgba(0,114,206,0.06)'
+            backgroundColor: isEditing ? 'transparent' : (0, styles_2.alpha)(theme.palette.primary.main, 0.06)
         });
     },
     textField: function (_a) {
@@ -36,4 +37,4 @@ exports.useStyles = (0, styles_1.makeStyles)({
             marginLeft: '8px'
         }
     }
-});
+}); });

package/cjs/EmptyState/EmptyState.js

@@ -37,7 +37,7 @@ var EmptyState = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var showButton = access && buttonTitle;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, styles["root_".concat(variant)]) },
-        react_1.default.createElement(LogoRenderer, { className: styles["".concat(variant)] }),
+        react_1.default.createElement(LogoRenderer, { className: (0, classnames_1.default)(styles.logo, styles[variant]) }),
         react_1.default.createElement("div", { className: styles.textBox },
             react_1.default.createElement(Typography_1.default, { variant: "h5", classes: { h5: styles.text } }, text),
             secondaryText && (react_1.default.createElement(Typography_1.default, { variant: "subtitle1", classes: { subtitle1: styles.secondaryText } }, secondaryText))),

package/cjs/EmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "embedded" | "root_small" | "full" | "textBox" | "secondaryText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "embedded" | "root_small" | "logo" | "full" | "textBox" | "secondaryText">;

package/cjs/EmptyState/styles.js

@@ -38,6 +38,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         }
     },
     root_small: {},
+    logo: {
+        color: theme.palette.primary.main
+    },
     small: {
         width: '88px',
         height: '88px'

package/cjs/FileDropZone/FileDropZone.module.css.js

@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.FileDropZone-root--9QbaV{cursor:pointer}.FileDropZone-active--FUwfs{background-color:rgba(0,114,206,.12)}`;
+    style.innerHTML = `.FileDropZone-root--9QbaV{cursor:pointer}.FileDropZone-active--FUwfs{background-color:color-mix(in srgb,var(--mui-palette-primary-main) 12%,transparent)}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/cjs/ImageActionsOverlay/styles.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+var styles_2 = require("@mui/material/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     overlay: {
         position: 'absolute',
         top: 0,
@@ -19,7 +20,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         userSelect: 'none'
     },
     selected: {
-        backgroundColor: 'rgba(0,114,206,0.6)'
+        backgroundColor: (0, styles_2.alpha)(theme.palette.primary.main, 0.6)
     },
     selectionMode: {
         cursor: 'pointer',

package/cjs/ImageAttributesLineEditor/styles.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: {
         width: '100%'
     },
@@ -23,7 +23,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             width: imageWidth,
             height: imageHeight,
             cursor: 'pointer',
-            border: '1px dashed #0072CE',
+            border: "1px dashed ".concat(theme.palette.primary.main),
             boxSizing: 'border-box',
             marginRight: imageMargin,
             display: 'flex',

package/cjs/ReltioMap/components/EntityMarker/EntityMarker.js

@@ -48,26 +48,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
 var react_google_maps_1 = require("@vis.gl/react-google-maps");
+var styles_1 = require("@mui/material/styles");
 var ProfileCard_1 = require("../../../ProfileCard");
 var Popper_1 = require("../../../Popper");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var EntityMarkerContext_1 = require("../../../contexts/EntityMarkerContext");
 var marker_inline_svg_1 = require("./icons/marker.inline.svg");
 var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
-var styles_1 = require("./styles");
+var styles_2 = require("./styles");
 var HIDE_DEBOUNCE_INTERVAL = 50;
 var MARKER_HEIGHT = 32;
 var MARKER_CARD_MARGIN = 8;
-var hoveredMarkerIcon = (0, mdm_sdk_1.svg2Url)(marker_hover_inline_svg_1.HOVERED_MARKER);
-var markerIcon = (0, mdm_sdk_1.svg2Url)(marker_inline_svg_1.MARKER);
+var MARKER_LIGHTEN = 0.3;
 var EntityMarker = function (_a) {
     var _b;
     var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, disabled = _a.disabled, otherProps = __rest(_a, ["marker", "onClick", "clusterer", "disabled"]);
-    var styles = (0, styles_1.useStyles)();
+    var styles = (0, styles_2.useStyles)();
+    var theme = (0, styles_1.useTheme)();
     var _c = (0, react_1.useState)(false), hovered = _c[0], setHovered = _c[1];
     var activeEntityUri = (0, react_1.useContext)(EntityMarkerContext_1.EntityMarkerContext).activeEntityUri;
     var isActive = (0, ramda_1.pathEq)(['entity', 'uri'], activeEntityUri, marker);
     var position = (0, react_1.useMemo)(function () { return ({ lat: marker.point.lat, lng: marker.point.lng }); }, [marker.point]);
+    var markerColor = (0, react_1.useMemo)(function () { return (0, styles_1.lighten)(theme.palette.primary.main, MARKER_LIGHTEN); }, [theme.palette.primary.main]);
+    var markerIcon = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.svg2Url)((0, marker_inline_svg_1.createMarker)(markerColor)); }, [markerColor]);
+    var hoveredMarkerIcon = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.svg2Url)((0, marker_hover_inline_svg_1.createHoveredMarker)(markerColor)); }, [markerColor]);
     var setHoveredDebounced = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
     var onMouseOver = (0, react_1.useCallback)(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
     var onMouseOut = (0, react_1.useCallback)(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);