@majoo-ui/react 2.0.1 → 2.1.0-rc.0

package/components/colorPicker/components/ColorMap.esm.js

@@ -0,0 +1,1188 @@
+import 'react';
+import img from '../assets/img_colormap.gif.esm.js';
+import { styled } from '../../../config/stitches.config.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Container = styled('div', {
+  userSelect: 'none',
+  margin: 'auto',
+  width: 236
+});
+const listGray = ['#DDDDDD', '#B2B2B2', '#808080', '#5F5F5F', '#333333', '#1C1C1C', '#080808', '#EAEAEA', '#C0C0C0', '#969696', '#777777', '#4D4D4D', '#292929', '#111111'];
+function ColorMap({
+  onClick,
+  onMouseOver,
+  onMouseOut
+}) {
+  function handleMouseOut(e) {
+    onMouseOut && onMouseOut(e);
+  }
+  function handleClick(hex) {
+    onClick && onClick({
+      hex
+    });
+  }
+  function handleMouseOver(hex) {
+    onMouseOut && onMouseOver(hex);
+  }
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx("img", {
+      style: {
+        marginRight: 2
+      },
+      src: img,
+      alt: "color-map",
+      useMap: "#colormap"
+    }), /*#__PURE__*/jsxs("map", {
+      id: "colormap",
+      name: "colormap",
+      onMouseOut: handleMouseOut,
+      children: [/*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,0,72,4,72,15,63,19,54,15,54,4",
+        onClick: () => handleClick('#003366'),
+        onMouseOver: () => handleMouseOver('#003366'),
+        alt: "#003366"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,0,90,4,90,15,81,19,72,15,72,4",
+        onClick: () => handleClick('#336699'),
+        onMouseOver: () => handleMouseOver('#336699'),
+        alt: "#336699"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,0,108,4,108,15,99,19,90,15,90,4",
+        onClick: () => handleClick('#3366CC'),
+        onMouseOver: () => handleMouseOver('#3366CC'),
+        alt: "#3366CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,0,126,4,126,15,117,19,108,15,108,4",
+        onClick: () => handleClick('#003399'),
+        onMouseOver: () => handleMouseOver('#003399'),
+        alt: "#003399"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,0,144,4,144,15,135,19,126,15,126,4",
+        onClick: () => handleClick('#000099'),
+        onMouseOver: () => handleMouseOver('#000099'),
+        alt: "#000099"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,0,162,4,162,15,153,19,144,15,144,4",
+        onClick: () => handleClick('#0000CC'),
+        onMouseOver: () => handleMouseOver('#0000CC'),
+        alt: "#0000CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,0,180,4,180,15,171,19,162,15,162,4",
+        onClick: () => handleClick('#000066'),
+        onMouseOver: () => handleMouseOver('#000066'),
+        alt: "#000066"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "54,15,63,19,63,30,54,34,45,30,45,19",
+        onClick: () => handleClick('#006666'),
+        onMouseOver: () => handleMouseOver('#006666'),
+        alt: "#006666"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "72,15,81,19,81,30,72,34,63,30,63,19",
+        onClick: () => handleClick('#006699'),
+        onMouseOver: () => handleMouseOver('#006699'),
+        alt: "#006699"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "90,15,99,19,99,30,90,34,81,30,81,19",
+        onClick: () => handleClick('#0099CC'),
+        onMouseOver: () => handleMouseOver('#0099CC'),
+        alt: "#0099CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "108,15,117,19,117,30,108,34,99,30,99,19",
+        onClick: () => handleClick('#0066CC'),
+        onMouseOver: () => handleMouseOver('#0066CC'),
+        alt: "#0066CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "126,15,135,19,135,30,126,34,117,30,117,19",
+        onClick: () => handleClick('#0033CC'),
+        onMouseOver: () => handleMouseOver('#0033CC'),
+        alt: "#0033CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "144,15,153,19,153,30,144,34,135,30,135,19",
+        onClick: () => handleClick('#0000FF'),
+        onMouseOver: () => handleMouseOver('#0000FF'),
+        alt: "#0000FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "162,15,171,19,171,30,162,34,153,30,153,19",
+        onClick: () => handleClick('#3333FF'),
+        onMouseOver: () => handleMouseOver('#3333FF'),
+        alt: "#3333FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "180,15,189,19,189,30,180,34,171,30,171,19",
+        onClick: () => handleClick('#333399'),
+        onMouseOver: () => handleMouseOver('#333399'),
+        alt: "#333399"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "45,30,54,34,54,45,45,49,36,45,36,34",
+        onClick: () => handleClick('#669999'),
+        onMouseOver: () => handleMouseOver('#669999'),
+        alt: "#669999"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,30,72,34,72,45,63,49,54,45,54,34",
+        onClick: () => handleClick('#009999'),
+        onMouseOver: () => handleMouseOver('#009999'),
+        alt: "#009999"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,30,90,34,90,45,81,49,72,45,72,34",
+        onClick: () => handleClick('#33CCCC'),
+        onMouseOver: () => handleMouseOver('#33CCCC'),
+        alt: "#33CCCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,30,108,34,108,45,99,49,90,45,90,34",
+        onClick: () => handleClick('#00CCFF'),
+        onMouseOver: () => handleMouseOver('#00CCFF'),
+        alt: "#00CCFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,30,126,34,126,45,117,49,108,45,108,34",
+        onClick: () => handleClick('#0099FF'),
+        onMouseOver: () => handleMouseOver('#0099FF'),
+        alt: "#0099FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,30,144,34,144,45,135,49,126,45,126,34",
+        onClick: () => handleClick('#0066FF'),
+        onMouseOver: () => handleMouseOver('#0066FF'),
+        alt: "#0066FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,30,162,34,162,45,153,49,144,45,144,34",
+        onClick: () => handleClick('#3366FF'),
+        onMouseOver: () => handleMouseOver('#3366FF'),
+        alt: "#3366FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,30,180,34,180,45,171,49,162,45,162,34",
+        onClick: () => handleClick('#3333CC'),
+        onMouseOver: () => handleMouseOver('#3333CC'),
+        alt: "#3333CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "189,30,198,34,198,45,189,49,180,45,180,34",
+        onClick: () => handleClick('#666699'),
+        onMouseOver: () => handleMouseOver('#666699'),
+        alt: "#666699"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "36,45,45,49,45,60,36,64,27,60,27,49",
+        onClick: () => handleClick('#339966'),
+        onMouseOver: () => handleMouseOver('#339966'),
+        alt: "#339966"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "54,45,63,49,63,60,54,64,45,60,45,49",
+        onClick: () => handleClick('#00CC99'),
+        onMouseOver: () => handleMouseOver('#00CC99'),
+        alt: "#00CC99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "72,45,81,49,81,60,72,64,63,60,63,49",
+        onClick: () => handleClick('#00FFCC'),
+        onMouseOver: () => handleMouseOver('#00FFCC'),
+        alt: "#00FFCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "90,45,99,49,99,60,90,64,81,60,81,49",
+        onClick: () => handleClick('#00FFFF'),
+        onMouseOver: () => handleMouseOver('#00FFFF'),
+        alt: "#00FFFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "108,45,117,49,117,60,108,64,99,60,99,49",
+        onClick: () => handleClick('#33CCFF'),
+        onMouseOver: () => handleMouseOver('#33CCFF'),
+        alt: "#33CCFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "126,45,135,49,135,60,126,64,117,60,117,49",
+        onClick: () => handleClick('#3399FF'),
+        onMouseOver: () => handleMouseOver('#3399FF'),
+        alt: "#3399FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "144,45,153,49,153,60,144,64,135,60,135,49",
+        onClick: () => handleClick('#6699FF'),
+        onMouseOver: () => handleMouseOver('#6699FF'),
+        alt: "#6699FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "162,45,171,49,171,60,162,64,153,60,153,49",
+        onClick: () => handleClick('#6666FF'),
+        onMouseOver: () => handleMouseOver('#6666FF'),
+        alt: "#6666FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "180,45,189,49,189,60,180,64,171,60,171,49",
+        onClick: () => handleClick('#6600FF'),
+        onMouseOver: () => handleMouseOver('#6600FF'),
+        alt: "#6600FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "198,45,207,49,207,60,198,64,189,60,189,49",
+        onClick: () => handleClick('#6600CC'),
+        onMouseOver: () => handleMouseOver('#6600CC'),
+        alt: "#6600CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "27,60,36,64,36,75,27,79,18,75,18,64",
+        onClick: () => handleClick('#339933'),
+        onMouseOver: () => handleMouseOver('#339933'),
+        alt: "#339933"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "45,60,54,64,54,75,45,79,36,75,36,64",
+        onClick: () => handleClick('#00CC66'),
+        onMouseOver: () => handleMouseOver('#00CC66'),
+        alt: "#00CC66"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,60,72,64,72,75,63,79,54,75,54,64",
+        onClick: () => handleClick('#00FF99'),
+        onMouseOver: () => handleMouseOver('#00FF99'),
+        alt: "#00FF99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,60,90,64,90,75,81,79,72,75,72,64",
+        onClick: () => handleClick('#66FFCC'),
+        onMouseOver: () => handleMouseOver('#66FFCC'),
+        alt: "#66FFCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,60,108,64,108,75,99,79,90,75,90,64",
+        onClick: () => handleClick('#66FFFF'),
+        onMouseOver: () => handleMouseOver('#66FFFF'),
+        alt: "#66FFFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,60,126,64,126,75,117,79,108,75,108,64",
+        onClick: () => handleClick('#66CCFF'),
+        onMouseOver: () => handleMouseOver('#66CCFF'),
+        alt: "#66CCFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,60,144,64,144,75,135,79,126,75,126,64",
+        onClick: () => handleClick('#99CCFF'),
+        onMouseOver: () => handleMouseOver('#99CCFF'),
+        alt: "#99CCFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,60,162,64,162,75,153,79,144,75,144,64",
+        onClick: () => handleClick('#9999FF'),
+        onMouseOver: () => handleMouseOver('#9999FF'),
+        alt: "#9999FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,60,180,64,180,75,171,79,162,75,162,64",
+        onClick: () => handleClick('#9966FF'),
+        onMouseOver: () => handleMouseOver('#9966FF'),
+        alt: "#9966FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "189,60,198,64,198,75,189,79,180,75,180,64",
+        onClick: () => handleClick('#9933FF'),
+        onMouseOver: () => handleMouseOver('#9933FF'),
+        alt: "#9933FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "207,60,216,64,216,75,207,79,198,75,198,64",
+        onClick: () => handleClick('#9900FF'),
+        onMouseOver: () => handleMouseOver('#9900FF'),
+        alt: "#9900FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "18,75,27,79,27,90,18,94,9,90,9,79",
+        onClick: () => handleClick('#006600'),
+        onMouseOver: () => handleMouseOver('#006600'),
+        alt: "#006600"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "36,75,45,79,45,90,36,94,27,90,27,79",
+        onClick: () => handleClick('#00CC00'),
+        onMouseOver: () => handleMouseOver('#00CC00'),
+        alt: "#00CC00"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "54,75,63,79,63,90,54,94,45,90,45,79",
+        onClick: () => handleClick('#00FF00'),
+        onMouseOver: () => handleMouseOver('#00FF00'),
+        alt: "#00FF00"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "72,75,81,79,81,90,72,94,63,90,63,79",
+        onClick: () => handleClick('#66FF99'),
+        onMouseOver: () => handleMouseOver('#66FF99'),
+        alt: "#66FF99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "90,75,99,79,99,90,90,94,81,90,81,79",
+        onClick: () => handleClick('#99FFCC'),
+        onMouseOver: () => handleMouseOver('#99FFCC'),
+        alt: "#99FFCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "108,75,117,79,117,90,108,94,99,90,99,79",
+        onClick: () => handleClick('#CCFFFF'),
+        onMouseOver: () => handleMouseOver('#CCFFFF'),
+        alt: "#CCFFFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "126,75,135,79,135,90,126,94,117,90,117,79",
+        onClick: () => handleClick('#CCCCFF'),
+        onMouseOver: () => handleMouseOver('#CCCCFF'),
+        alt: "#CCCCFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "144,75,153,79,153,90,144,94,135,90,135,79",
+        onClick: () => handleClick('#CC99FF'),
+        onMouseOver: () => handleMouseOver('#CC99FF'),
+        alt: "#CC99FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "162,75,171,79,171,90,162,94,153,90,153,79",
+        onClick: () => handleClick('#CC66FF'),
+        onMouseOver: () => handleMouseOver('#CC66FF'),
+        alt: "#CC66FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "180,75,189,79,189,90,180,94,171,90,171,79",
+        onClick: () => handleClick('#CC33FF'),
+        onMouseOver: () => handleMouseOver('#CC33FF'),
+        alt: "#CC33FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "198,75,207,79,207,90,198,94,189,90,189,79",
+        onClick: () => handleClick('#CC00FF'),
+        onMouseOver: () => handleMouseOver('#CC00FF'),
+        alt: "#CC00FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "216,75,225,79,225,90,216,94,207,90,207,79",
+        onClick: () => handleClick('#9900CC'),
+        onMouseOver: () => handleMouseOver('#9900CC'),
+        alt: "#9900CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "9,90,18,94,18,105,9,109,0,105,0,94",
+        onClick: () => handleClick('#003300'),
+        onMouseOver: () => handleMouseOver('#003300'),
+        alt: "#003300"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "27,90,36,94,36,105,27,109,18,105,18,94",
+        onClick: () => handleClick('#009933'),
+        onMouseOver: () => handleMouseOver('#009933'),
+        alt: "#009933"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "45,90,54,94,54,105,45,109,36,105,36,94",
+        onClick: () => handleClick('#33CC33'),
+        onMouseOver: () => handleMouseOver('#33CC33'),
+        alt: "#33CC33"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,90,72,94,72,105,63,109,54,105,54,94",
+        onClick: () => handleClick('#66FF66'),
+        onMouseOver: () => handleMouseOver('#66FF66'),
+        alt: "#66FF66"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,90,90,94,90,105,81,109,72,105,72,94",
+        onClick: () => handleClick('#99FF99'),
+        onMouseOver: () => handleMouseOver('#99FF99'),
+        alt: "#99FF99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,90,108,94,108,105,99,109,90,105,90,94",
+        onClick: () => handleClick('#CCFFCC'),
+        onMouseOver: () => handleMouseOver('#CCFFCC'),
+        alt: "#CCFFCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,90,126,94,126,105,117,109,108,105,108,94",
+        onClick: () => handleClick('#FFFFFF'),
+        onMouseOver: () => handleMouseOver('#FFFFFF'),
+        alt: "#FFFFFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,90,144,94,144,105,135,109,126,105,126,94",
+        onClick: () => handleClick('#FFCCFF'),
+        onMouseOver: () => handleMouseOver('#FFCCFF'),
+        alt: "#FFCCFF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,90,162,94,162,105,153,109,144,105,144,94",
+        onClick: () => handleClick('#FF99FF'),
+        onMouseOver: () => handleMouseOver('#FF99FF'),
+        alt: "#FF99FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,90,180,94,180,105,171,109,162,105,162,94",
+        onClick: () => handleClick('#FF66FF'),
+        onMouseOver: () => handleMouseOver('#FF66FF'),
+        alt: "#FF66FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "189,90,198,94,198,105,189,109,180,105,180,94",
+        onClick: () => handleClick('#FF00FF'),
+        onMouseOver: () => handleMouseOver('#FF00FF'),
+        alt: "#FF00FF"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "207,90,216,94,216,105,207,109,198,105,198,94",
+        onClick: () => handleClick('#CC00CC'),
+        onMouseOver: () => handleMouseOver('#CC00CC'),
+        alt: "#CC00CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "225,90,234,94,234,105,225,109,216,105,216,94",
+        onClick: () => handleClick('#660066'),
+        onMouseOver: () => handleMouseOver('#660066'),
+        alt: "#660066"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "18,105,27,109,27,120,18,124,9,120,9,109",
+        onClick: () => handleClick('#336600'),
+        onMouseOver: () => handleMouseOver('#336600'),
+        alt: "#336600"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "36,105,45,109,45,120,36,124,27,120,27,109",
+        onClick: () => handleClick('#009900'),
+        onMouseOver: () => handleMouseOver('#009900'),
+        alt: "#009900"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "54,105,63,109,63,120,54,124,45,120,45,109",
+        onClick: () => handleClick('#66FF33'),
+        onMouseOver: () => handleMouseOver('#66FF33'),
+        alt: "#66FF33"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "72,105,81,109,81,120,72,124,63,120,63,109",
+        onClick: () => handleClick('#99FF66'),
+        onMouseOver: () => handleMouseOver('#99FF66'),
+        alt: "#99FF66"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "90,105,99,109,99,120,90,124,81,120,81,109",
+        onClick: () => handleClick('#CCFF99'),
+        onMouseOver: () => handleMouseOver('#CCFF99'),
+        alt: "#CCFF99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "108,105,117,109,117,120,108,124,99,120,99,109",
+        onClick: () => handleClick('#FFFFCC'),
+        onMouseOver: () => handleMouseOver('#FFFFCC'),
+        alt: "#FFFFCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "126,105,135,109,135,120,126,124,117,120,117,109",
+        onClick: () => handleClick('#FFCCCC'),
+        onMouseOver: () => handleMouseOver('#FFCCCC'),
+        alt: "#FFCCCC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "144,105,153,109,153,120,144,124,135,120,135,109",
+        onClick: () => handleClick('#FF99CC'),
+        onMouseOver: () => handleMouseOver('#FF99CC'),
+        alt: "#FF99CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "162,105,171,109,171,120,162,124,153,120,153,109",
+        onClick: () => handleClick('#FF66CC'),
+        onMouseOver: () => handleMouseOver('#FF66CC'),
+        alt: "#FF66CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "180,105,189,109,189,120,180,124,171,120,171,109",
+        onClick: () => handleClick('#FF33CC'),
+        onMouseOver: () => handleMouseOver('#FF33CC'),
+        alt: "#FF33CC"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "198,105,207,109,207,120,198,124,189,120,189,109",
+        onClick: () => handleClick('#CC0099'),
+        onMouseOver: () => handleMouseOver('#CC0099'),
+        alt: "#CC0099"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "216,105,225,109,225,120,216,124,207,120,207,109",
+        onClick: () => handleClick('#993399'),
+        onMouseOver: () => handleMouseOver('#993399'),
+        alt: "#993399"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "27,120,36,124,36,135,27,139,18,135,18,124",
+        onClick: () => handleClick('#333300'),
+        onMouseOver: () => handleMouseOver('#333300'),
+        alt: "#333300"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "45,120,54,124,54,135,45,139,36,135,36,124",
+        onClick: () => handleClick('#669900'),
+        onMouseOver: () => handleMouseOver('#669900'),
+        alt: "#669900"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,120,72,124,72,135,63,139,54,135,54,124",
+        onClick: () => handleClick('#99FF33'),
+        onMouseOver: () => handleMouseOver('#99FF33'),
+        alt: "#99FF33"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,120,90,124,90,135,81,139,72,135,72,124",
+        onClick: () => handleClick('#CCFF66'),
+        onMouseOver: () => handleMouseOver('#CCFF66'),
+        alt: "#CCFF66"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,120,108,124,108,135,99,139,90,135,90,124",
+        onClick: () => handleClick('#FFFF99'),
+        onMouseOver: () => handleMouseOver('#FFFF99'),
+        alt: "#FFFF99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,120,126,124,126,135,117,139,108,135,108,124",
+        onClick: () => handleClick('#FFCC99'),
+        onMouseOver: () => handleMouseOver('#FFCC99'),
+        alt: "#FFCC99"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,120,144,124,144,135,135,139,126,135,126,124",
+        onClick: () => handleClick('#FF9999'),
+        onMouseOver: () => handleMouseOver('#FF9999'),
+        alt: "#FF9999"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,120,162,124,162,135,153,139,144,135,144,124",
+        onClick: () => handleClick('#FF6699'),
+        onMouseOver: () => handleMouseOver('#FF6699'),
+        alt: "#FF6699"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,120,180,124,180,135,171,139,162,135,162,124",
+        onClick: () => handleClick('#FF3399'),
+        onMouseOver: () => handleMouseOver('#FF3399'),
+        alt: "#FF3399"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "189,120,198,124,198,135,189,139,180,135,180,124",
+        onClick: () => handleClick('#CC3399'),
+        onMouseOver: () => handleMouseOver('#CC3399'),
+        alt: "#CC3399"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "207,120,216,124,216,135,207,139,198,135,198,124",
+        onClick: () => handleClick('#990099'),
+        onMouseOver: () => handleMouseOver('#990099'),
+        alt: "#990099"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "36,135,45,139,45,150,36,154,27,150,27,139",
+        onClick: () => handleClick('#666633'),
+        onMouseOver: () => handleMouseOver('#666633'),
+        alt: "#666633"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "54,135,63,139,63,150,54,154,45,150,45,139",
+        onClick: () => handleClick('#99CC00'),
+        onMouseOver: () => handleMouseOver('#99CC00'),
+        alt: "#99CC00"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "72,135,81,139,81,150,72,154,63,150,63,139",
+        onClick: () => handleClick('#CCFF33'),
+        onMouseOver: () => handleMouseOver('#CCFF33'),
+        alt: "#CCFF33"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "90,135,99,139,99,150,90,154,81,150,81,139",
+        onClick: () => handleClick('#FFFF66'),
+        onMouseOver: () => handleMouseOver('#FFFF66'),
+        alt: "#FFFF66"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "108,135,117,139,117,150,108,154,99,150,99,139",
+        onClick: () => handleClick('#FFCC66'),
+        onMouseOver: () => handleMouseOver('#FFCC66'),
+        alt: "#FFCC66"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "126,135,135,139,135,150,126,154,117,150,117,139",
+        onClick: () => handleClick('#FF9966'),
+        onMouseOver: () => handleMouseOver('#FF9966'),
+        alt: "#FF9966"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "144,135,153,139,153,150,144,154,135,150,135,139",
+        onClick: () => handleClick('#FF6666'),
+        onMouseOver: () => handleMouseOver('#FF6666'),
+        alt: "#FF6666"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "162,135,171,139,171,150,162,154,153,150,153,139",
+        onClick: () => handleClick('#FF0066'),
+        onMouseOver: () => handleMouseOver('#FF0066'),
+        alt: "#FF0066"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "180,135,189,139,189,150,180,154,171,150,171,139",
+        onClick: () => handleClick('#CC6699'),
+        onMouseOver: () => handleMouseOver('#CC6699'),
+        alt: "#CC6699"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "198,135,207,139,207,150,198,154,189,150,189,139",
+        onClick: () => handleClick('#993366'),
+        onMouseOver: () => handleMouseOver('#993366'),
+        alt: "#993366"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "45,150,54,154,54,165,45,169,36,165,36,154",
+        onClick: () => handleClick('#999966'),
+        onMouseOver: () => handleMouseOver('#999966'),
+        alt: "#999966"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,150,72,154,72,165,63,169,54,165,54,154",
+        onClick: () => handleClick('#CCCC00'),
+        onMouseOver: () => handleMouseOver('#CCCC00'),
+        alt: "#CCCC00"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,150,90,154,90,165,81,169,72,165,72,154",
+        onClick: () => handleClick('#FFFF00'),
+        onMouseOver: () => handleMouseOver('#FFFF00'),
+        alt: "#FFFF00"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,150,108,154,108,165,99,169,90,165,90,154",
+        onClick: () => handleClick('#FFCC00'),
+        onMouseOver: () => handleMouseOver('#FFCC00'),
+        alt: "#FFCC00"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,150,126,154,126,165,117,169,108,165,108,154",
+        onClick: () => handleClick('#FF9933'),
+        onMouseOver: () => handleMouseOver('#FF9933'),
+        alt: "#FF9933"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,150,144,154,144,165,135,169,126,165,126,154",
+        onClick: () => handleClick('#FF6600'),
+        onMouseOver: () => handleMouseOver('#FF6600'),
+        alt: "#FF6600"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,150,162,154,162,165,153,169,144,165,144,154",
+        onClick: () => handleClick('#FF5050'),
+        onMouseOver: () => handleMouseOver('#FF5050'),
+        alt: "#FF5050"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,150,180,154,180,165,171,169,162,165,162,154",
+        onClick: () => handleClick('#CC0066'),
+        onMouseOver: () => handleMouseOver('#CC0066'),
+        alt: "#CC0066"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "189,150,198,154,198,165,189,169,180,165,180,154",
+        onClick: () => handleClick('#660033'),
+        onMouseOver: () => handleMouseOver('#660033'),
+        alt: "#660033"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "54,165,63,169,63,180,54,184,45,180,45,169",
+        onClick: () => handleClick('#996633'),
+        onMouseOver: () => handleMouseOver('#996633'),
+        alt: "#996633"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "72,165,81,169,81,180,72,184,63,180,63,169",
+        onClick: () => handleClick('#CC9900'),
+        onMouseOver: () => handleMouseOver('#CC9900'),
+        alt: "#CC9900"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "90,165,99,169,99,180,90,184,81,180,81,169",
+        onClick: () => handleClick('#FF9900'),
+        onMouseOver: () => handleMouseOver('#FF9900'),
+        alt: "#FF9900"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "108,165,117,169,117,180,108,184,99,180,99,169",
+        onClick: () => handleClick('#CC6600'),
+        onMouseOver: () => handleMouseOver('#CC6600'),
+        alt: "#CC6600"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "126,165,135,169,135,180,126,184,117,180,117,169",
+        onClick: () => handleClick('#FF3300'),
+        onMouseOver: () => handleMouseOver('#FF3300'),
+        alt: "#FF3300"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "144,165,153,169,153,180,144,184,135,180,135,169",
+        onClick: () => handleClick('#FF0000'),
+        onMouseOver: () => handleMouseOver('#FF0000'),
+        alt: "#FF0000"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "162,165,171,169,171,180,162,184,153,180,153,169",
+        onClick: () => handleClick('#CC0000'),
+        onMouseOver: () => handleMouseOver('#CC0000'),
+        alt: "#CC0000"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "180,165,189,169,189,180,180,184,171,180,171,169",
+        onClick: () => handleClick('#990033'),
+        onMouseOver: () => handleMouseOver('#990033'),
+        alt: "#990033"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "63,180,72,184,72,195,63,199,54,195,54,184",
+        onClick: () => handleClick('#663300'),
+        onMouseOver: () => handleMouseOver('#663300'),
+        alt: "#663300"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "81,180,90,184,90,195,81,199,72,195,72,184",
+        onClick: () => handleClick('#996600'),
+        onMouseOver: () => handleMouseOver('#996600'),
+        alt: "#996600"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "99,180,108,184,108,195,99,199,90,195,90,184",
+        onClick: () => handleClick('#CC3300'),
+        onMouseOver: () => handleMouseOver('#CC3300'),
+        alt: "#CC3300"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "117,180,126,184,126,195,117,199,108,195,108,184",
+        onClick: () => handleClick('#993300'),
+        onMouseOver: () => handleMouseOver('#993300'),
+        alt: "#993300"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "135,180,144,184,144,195,135,199,126,195,126,184",
+        onClick: () => handleClick('#990000'),
+        onMouseOver: () => handleMouseOver('#990000'),
+        alt: "#990000"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "153,180,162,184,162,195,153,199,144,195,144,184",
+        onClick: () => handleClick('#800000'),
+        onMouseOver: () => handleMouseOver('#800000'),
+        alt: "#800000"
+      }), /*#__PURE__*/jsx("area", {
+        style: {
+          cursor: 'pointer'
+        },
+        shape: "poly",
+        coords: "171,180,180,184,180,195,171,199,162,195,162,184",
+        onClick: () => handleClick('#993333'),
+        onMouseOver: () => handleMouseOver('#993333'),
+        alt: "#993333"
+      })]
+    })]
+  });
+}
+
+export { ColorMap as default, listGray };