import t from "react";
import s from "../../../../../../../../_virtual/index5.js";
import { getContrastingColor as d } 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 m from "../common/Swatch.js";
import h from "../../../../../../../../_virtual/CheckIcon.js";
var E = function(o) {
  var r = o.color, e = o.onClick, a = e === void 0 ? function() {
  } : e, l = o.onSwatchHover, i = o.first, n = o.last, p = o.active, c = s({
    default: {
      color: {
        width: "40px",
        height: "24px",
        cursor: "pointer",
        background: r,
        marginBottom: "1px"
      },
      check: {
        color: d(r),
        marginLeft: "8px",
        display: "none"
      }
    },
    first: {
      color: {
        overflow: "hidden",
        borderRadius: "2px 2px 0 0"
      }
    },
    last: {
      color: {
        overflow: "hidden",
        borderRadius: "0 0 2px 2px"
      }
    },
    active: {
      check: {
        display: "block"
      }
    },
    "color-#FFFFFF": {
      color: {
        boxShadow: "inset 0 0 0 1px #ddd"
      },
      check: {
        color: "#333"
      }
    },
    transparent: {
      check: {
        color: "#333"
      }
    }
  }, {
    first: i,
    last: n,
    active: p,
    "color-#FFFFFF": r === "#FFFFFF",
    transparent: r === "transparent"
  });
  return t.createElement(
    m,
    {
      color: r,
      style: c.color,
      onClick: a,
      onHover: l,
      focusStyle: { boxShadow: "0 0 4px " + r }
    },
    t.createElement(
      "div",
      { style: c.check },
      t.createElement(h, null)
    )
  );
};
export {
  E as SwatchesColor,
  E as default
};
//# sourceMappingURL=SwatchesColor.js.map
