import e from "react";
import m, { l as S } from "../../../../../../../../_virtual/index5.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 "../../../../../../tinycolor2@1.6.0/node_modules/tinycolor2/esm/tinycolor.js";
import p from "../common/Swatch.js";
var i = function(t) {
  var o = t.color, l = t.onClick, n = t.onSwatchHover, s = t.hover, h = t.active, a = t.circleSize, c = t.circleSpacing, r = m({
    default: {
      swatch: {
        width: a,
        height: a,
        marginRight: c,
        marginBottom: c,
        transform: "scale(1)",
        transition: "100ms transform ease"
      },
      Swatch: {
        borderRadius: "50%",
        background: "transparent",
        boxShadow: "inset 0 0 0 " + (a / 2 + 1) + "px " + o,
        transition: "100ms box-shadow ease"
      }
    },
    hover: {
      swatch: {
        transform: "scale(1.2)"
      }
    },
    active: {
      Swatch: {
        boxShadow: "inset 0 0 0 3px " + o
      }
    }
  }, { hover: s, active: h });
  return e.createElement(
    "div",
    { style: r.swatch },
    e.createElement(p, {
      style: r.Swatch,
      color: o,
      onClick: l,
      onHover: n,
      focusStyle: { boxShadow: r.Swatch.boxShadow + ", 0 0 5px " + o }
    })
  );
};
i.defaultProps = {
  circleSize: 28,
  circleSpacing: 14
};
const H = S.handleHover(i);
export {
  i as CircleSwatch,
  H as default
};
//# sourceMappingURL=CircleSwatch.js.map
