import t from "react";
import e from "../../../../../../../../_virtual/index7.js";
import B from "../../../../../../../../_virtual/index9.js";
import W from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/map.js";
import Y from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import { red as o, pink as a, purple as i, deepPurple as l, indigo as n, blue as s, lightBlue as p, cyan as m, teal as c, green as S, lightGreen as h, lime as d, yellow as g, amber as y, orange as u, deepOrange as f, brown as w, blueGrey as v } 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 { Raised as q } from "../common/Raised.js";
import "../common/Saturation.js";
import { ColorWrap as z } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { SwatchesGroup as A } from "./SwatchesGroup.js";
var C = function(r) {
  var O = r.width, k = r.height, D = r.onChange, N = r.onSwatchHover, T = r.colors, G = r.hex, E = r.styles, H = E === void 0 ? {} : E, F = r.className, P = F === void 0 ? "" : F, b = B(Y({
    default: {
      picker: {
        width: O,
        height: k
      },
      overflow: {
        height: k,
        overflowY: "scroll"
      },
      body: {
        padding: "16px 0 6px 16px"
      },
      clear: {
        clear: "both"
      }
    }
  }, H)), R = function($, j) {
    return D({ hex: $, source: "hex" }, j);
  };
  return t.createElement(
    "div",
    { style: b.picker, className: "swatches-picker " + P },
    t.createElement(
      q,
      null,
      t.createElement(
        "div",
        { style: b.overflow },
        t.createElement(
          "div",
          { style: b.body },
          W(T, function(x) {
            return t.createElement(A, {
              key: x.toString(),
              group: x,
              active: G,
              onClick: R,
              onSwatchHover: N
            });
          }),
          t.createElement("div", { style: b.clear })
        )
      )
    )
  );
};
C.propTypes = {
  width: e.oneOfType([e.string, e.number]),
  height: e.oneOfType([e.string, e.number]),
  colors: e.arrayOf(e.arrayOf(e.string)),
  styles: e.object
  /* eslint-disable max-len */
};
C.defaultProps = {
  width: 320,
  height: 240,
  colors: [[o[900], o[700], o[500], o[300], o[100]], [a[900], a[700], a[500], a[300], a[100]], [i[900], i[700], i[500], i[300], i[100]], [l[900], l[700], l[500], l[300], l[100]], [n[900], n[700], n[500], n[300], n[100]], [s[900], s[700], s[500], s[300], s[100]], [p[900], p[700], p[500], p[300], p[100]], [m[900], m[700], m[500], m[300], m[100]], [c[900], c[700], c[500], c[300], c[100]], ["#194D33", S[700], S[500], S[300], S[100]], [h[900], h[700], h[500], h[300], h[100]], [d[900], d[700], d[500], d[300], d[100]], [g[900], g[700], g[500], g[300], g[100]], [y[900], y[700], y[500], y[300], y[100]], [u[900], u[700], u[500], u[300], u[100]], [f[900], f[700], f[500], f[300], f[100]], [w[900], w[700], w[500], w[300], w[100]], [v[900], v[700], v[500], v[300], v[100]], ["#000000", "#525252", "#969696", "#D9D9D9", "#FFFFFF"]],
  styles: {}
};
z(C);
export {
  C as Swatches
};
//# sourceMappingURL=Swatches.js.map
