"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("prop-types"),t=require("@material-ui/icons/CheckRounded"),i=require("@material-ui/core"),o=require("classnames"),a=require("chroma-js"),n=require("react/jsx-runtime");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(e),d=s(r),l=s(t),u=s(o),p=s(a),h=i.makeStyles({container:{position:"relative",cursor:"pointer",width:"16px",height:"16px",borderRadius:"2px",display:"flex",justifyContent:"center",alignItems:"center","&:hover":{border:"1px solid white"}},containerSelected:{border:"1px solid white","& $squareCheck":{visibility:"visible"}},transparentContainer:{position:"relative",border:"1px solid #C4C4C4;",backgroundImage:"url(".concat("/static/media/39f55985e0da1489ad22264208b0493d.svg",")"),backgroundSize:"cover",backgroundPosition:"center","&::before":{content:'""',position:"absolute",display:"block",width:"100%",height:"2px",background:"#FF0000",transform:"rotate(135deg)",borderRadius:"2px"}},squareCheck:{width:"16px",height:"16px",color:"white",visibility:"hidden",zIndex:2}});function b(e){var r,t=e.color,i=e.isSelected,o=e.onClick,a=h();return n.jsx("div",{"data-testid":"".concat("ColorSquare","_color_").concat(t,"_selected_").concat(i),className:u.default(a.container,(r={},c.default(r,a.transparentContainer,0===p.default(t).alpha()),c.default(r,a.containerSelected,i),r)),style:{backgroundColor:t},onClick:o,children:n.jsx(l.default,{fontSize:"small",className:a.squareCheck})})}b.propTypes={color:d.default.string.isRequired,isSelected:d.default.bool.isRequired,onClick:d.default.func.isRequired},module.exports=b;
//# sourceMappingURL=ColorSquare.js.map
