import e from"@babel/runtime/helpers/defineProperty";import r from"prop-types";import o from"@material-ui/icons/CheckRounded";import{makeStyles as i}from"@material-ui/core";import t from"classnames";import a from"chroma-js";import{jsx as n}from"react/jsx-runtime";var c=i({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 s(r){var i,s=r.color,d=r.isSelected,l=r.onClick,p=c();return n("div",{"data-testid":"".concat("ColorSquare","_color_").concat(s,"_selected_").concat(d),className:t(p.container,(i={},e(i,p.transparentContainer,0===a(s).alpha()),e(i,p.containerSelected,d),i)),style:{backgroundColor:s},onClick:l,children:n(o,{fontSize:"small",className:p.squareCheck})})}s.propTypes={color:r.string.isRequired,isSelected:r.bool.isRequired,onClick:r.func.isRequired};export{s as default};
