import e from "react";
import p from "../../../../../../../../_virtual/index8.js";
import { getContrastingColor as l } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import d from "../common/Swatch.js";
var k = function(t) {
  var o = t.color, r = t.onClick, i = r === void 0 ? function() {
  } : r, c = t.onSwatchHover, n = t.active, a = p({
    default: {
      color: {
        background: o,
        width: "15px",
        height: "15px",
        float: "left",
        marginRight: "5px",
        marginBottom: "5px",
        position: "relative",
        cursor: "pointer"
      },
      dot: {
        absolute: "5px 5px 5px 5px",
        background: l(o),
        borderRadius: "50%",
        opacity: "0"
      }
    },
    active: {
      dot: {
        opacity: "1"
      }
    },
    "color-#FFFFFF": {
      color: {
        boxShadow: "inset 0 0 0 1px #ddd"
      },
      dot: {
        background: "#000"
      }
    },
    transparent: {
      dot: {
        background: "#000"
      }
    }
  }, { active: n, "color-#FFFFFF": o === "#FFFFFF", transparent: o === "transparent" });
  return e.createElement(
    d,
    {
      style: a.color,
      color: o,
      onClick: i,
      onHover: c,
      focusStyle: { boxShadow: "0 0 4px " + o }
    },
    e.createElement("div", { style: a.dot })
  );
};
export {
  k as CompactColor,
  k as default
};
//# sourceMappingURL=CompactColor.js.map
