import l from "react";
import a from "../../../../../../../../_virtual/index7.js";
import x from "../../../../../../../../_virtual/index9.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 d from "../common/Swatch.js";
var h = Object.assign || function(i) {
  for (var e = 1; e < arguments.length; e++) {
    var r = arguments[e];
    for (var o in r)
      Object.prototype.hasOwnProperty.call(r, o) && (i[o] = r[o]);
  }
  return i;
}, u = function(e) {
  var r = e.colors, o = e.onClick, c = o === void 0 ? function() {
  } : o, m = e.onSwatchHover, p = x({
    default: {
      colors: {
        margin: "0 -10px",
        padding: "10px 0 0 10px",
        borderTop: "1px solid #eee",
        display: "flex",
        flexWrap: "wrap",
        position: "relative"
      },
      swatchWrap: {
        width: "16px",
        height: "16px",
        margin: "0 10px 10px 0"
      },
      swatch: {
        borderRadius: "3px",
        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15)"
      }
    },
    "no-presets": {
      colors: {
        display: "none"
      }
    }
  }, {
    "no-presets": !r || !r.length
  }), f = function(t, s) {
    c({
      hex: t,
      source: "hex"
    }, s);
  };
  return l.createElement(
    "div",
    { style: p.colors, className: "flexbox-fix" },
    r.map(function(n) {
      var t = typeof n == "string" ? { color: n } : n, s = "" + t.color + (t.title || "");
      return l.createElement(
        "div",
        { key: s, style: p.swatchWrap },
        l.createElement(d, h({}, t, {
          style: p.swatch,
          onClick: f,
          onHover: m,
          focusStyle: {
            boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px " + t.color
          }
        }))
      );
    })
  );
};
u.propTypes = {
  colors: a.arrayOf(a.oneOfType([a.string, a.shape({
    color: a.string,
    title: a.string
  })])).isRequired
};
export {
  u as SketchPresetColors,
  u as default
};
//# sourceMappingURL=SketchPresetColors.js.map
