import o from "react";
import c from "../../../../../../../../_virtual/index6.js";
import g from "../../../../../../../../_virtual/index5.js";
import u 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 { isValidHex as D } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import "../common/EditableInput.js";
import "../common/Hue.js";
import { Raised as E } from "../common/Raised.js";
import "../common/Saturation.js";
import { ColorWrap as B } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { CompactColor as v } from "./CompactColor.js";
import { CompactFields as A } from "./CompactFields.js";
var m = function(e) {
  var p = e.onChange, d = e.onSwatchHover, f = e.colors, i = e.hex, h = e.rgb, l = e.styles, s = l === void 0 ? {} : l, n = e.className, x = n === void 0 ? "" : n, a = g(y({
    default: {
      Compact: {
        background: "#f6f6f6",
        radius: "4px"
      },
      compact: {
        paddingTop: "5px",
        paddingLeft: "5px",
        boxSizing: "initial",
        width: "240px"
      },
      clear: {
        clear: "both"
      }
    }
  }, s)), C = function(t, F) {
    t.hex ? D(t.hex) && p({
      hex: t.hex,
      source: "hex"
    }, F) : p(t, F);
  };
  return o.createElement(
    E,
    { style: a.Compact, styles: s },
    o.createElement(
      "div",
      { style: a.compact, className: "compact-picker " + x },
      o.createElement(
        "div",
        null,
        u(f, function(r) {
          return o.createElement(v, {
            key: r,
            color: r,
            active: r.toLowerCase() === i,
            onClick: C,
            onSwatchHover: d
          });
        }),
        o.createElement("div", { style: a.clear })
      ),
      o.createElement(A, { hex: i, rgb: h, onChange: C })
    )
  );
};
m.propTypes = {
  colors: c.arrayOf(c.string),
  styles: c.object
};
m.defaultProps = {
  colors: ["#4D4D4D", "#999999", "#FFFFFF", "#F44E3B", "#FE9200", "#FCDC00", "#DBDF00", "#A4DD00", "#68CCCA", "#73D8FF", "#AEA1FF", "#FDA1FF", "#333333", "#808080", "#cccccc", "#D33115", "#E27300", "#FCC400", "#B0BC00", "#68BC00", "#16A5A5", "#009CE0", "#7B64FF", "#FA28FF", "#000000", "#666666", "#B3B3B3", "#9F0500", "#C45100", "#FB9E00", "#808900", "#194D33", "#0C797D", "#0062B1", "#653294", "#AB149E"],
  styles: {}
};
B(m);
export {
  m as Compact
};
//# sourceMappingURL=Compact.js.map
