import a from "react";
import r from "../../../../../../../../_virtual/index6.js";
import C from "../../../../../../../../_virtual/index5.js";
import v from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/map.js";
import b from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import { red as x, pink as z, purple as k, deepPurple as N, indigo as H, blue as P, lightBlue as T, cyan as B, teal as E, green as G, lightGreen as O, lime as R, yellow as W, amber as $, orange as j, deepOrange as L, brown as q, blueGrey as A } from "../../../../../../material-colors@1.2.6/node_modules/material-colors/dist/colors.es2015.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 { ColorWrap as D } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import F from "./CircleSwatch.js";
var t = function(e) {
  var n = e.width, p = e.onChange, m = e.onSwatchHover, s = e.colors, d = e.hex, h = e.circleSize, c = e.styles, g = c === void 0 ? {} : c, o = e.circleSpacing, l = e.className, u = l === void 0 ? "" : l, S = C(b({
    default: {
      card: {
        width: n,
        display: "flex",
        flexWrap: "wrap",
        marginRight: -o,
        marginBottom: -o
      }
    }
  }, g)), y = function(f, w) {
    return p({ hex: f, source: "hex" }, w);
  };
  return a.createElement(
    "div",
    { style: S.card, className: "circle-picker " + u },
    v(s, function(i) {
      return a.createElement(F, {
        key: i,
        color: i,
        onClick: y,
        onSwatchHover: m,
        active: d === i.toLowerCase(),
        circleSize: h,
        circleSpacing: o
      });
    })
  );
};
t.propTypes = {
  width: r.oneOfType([r.string, r.number]),
  circleSize: r.number,
  circleSpacing: r.number,
  styles: r.object
};
t.defaultProps = {
  width: 252,
  circleSize: 28,
  circleSpacing: 14,
  colors: [x[500], z[500], k[500], N[500], H[500], P[500], T[500], B[500], E[500], G[500], O[500], R[500], W[500], $[500], j[500], L[500], q[500], A[500]],
  styles: {}
};
D(t);
export {
  t as Circle
};
//# sourceMappingURL=Circle.js.map
