import t from "react";
import r from "../../../../../../../../_virtual/index9.js";
import y from "../../../../../../../../_virtual/index8.js";
import v from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import { getContrastingColor as C, isValidHex as w } from "../../helpers/color.js";
import "../common/Alpha.js";
import { Checkboard as S } from "../common/Checkboard.js";
import { EditableInput as E } from "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import { ColorWrap as k } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { BlockSwatches as R } from "./BlockSwatches.js";
var i = function(e) {
  var s = e.onChange, c = e.onSwatchHover, o = e.hex, m = e.colors, h = e.width, x = e.triangle, n = e.styles, g = n === void 0 ? {} : n, l = e.className, b = l === void 0 ? "" : l, f = o === "transparent", p = function(d, u) {
    w(d) && s({
      hex: d,
      source: "hex"
    }, u);
  }, a = y(v({
    default: {
      card: {
        width: h,
        background: "#fff",
        boxShadow: "0 1px rgba(0,0,0,.1)",
        borderRadius: "6px",
        position: "relative"
      },
      head: {
        height: "110px",
        background: o,
        borderRadius: "6px 6px 0 0",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative"
      },
      body: {
        padding: "10px"
      },
      label: {
        fontSize: "18px",
        color: C(o),
        position: "relative"
      },
      triangle: {
        width: "0px",
        height: "0px",
        borderStyle: "solid",
        borderWidth: "0 10px 10px 10px",
        borderColor: "transparent transparent " + o + " transparent",
        position: "absolute",
        top: "-10px",
        left: "50%",
        marginLeft: "-10px"
      },
      input: {
        width: "100%",
        fontSize: "12px",
        color: "#666",
        border: "0px",
        outline: "none",
        height: "22px",
        boxShadow: "inset 0 0 0 1px #ddd",
        borderRadius: "4px",
        padding: "0 7px",
        boxSizing: "border-box"
      }
    },
    "hide-triangle": {
      triangle: {
        display: "none"
      }
    }
  }, g), { "hide-triangle": x === "hide" });
  return t.createElement(
    "div",
    { style: a.card, className: "block-picker " + b },
    t.createElement("div", { style: a.triangle }),
    t.createElement(
      "div",
      { style: a.head },
      f && t.createElement(S, { borderRadius: "6px 6px 0 0" }),
      t.createElement(
        "div",
        { style: a.label },
        o
      )
    ),
    t.createElement(
      "div",
      { style: a.body },
      t.createElement(R, { colors: m, onClick: p, onSwatchHover: c }),
      t.createElement(E, {
        style: { input: a.input },
        value: o,
        onChange: p
      })
    )
  );
};
i.propTypes = {
  width: r.oneOfType([r.string, r.number]),
  colors: r.arrayOf(r.string),
  triangle: r.oneOf(["top", "hide"]),
  styles: r.object
};
i.defaultProps = {
  width: 170,
  colors: ["#D9E3F0", "#F47373", "#697689", "#37D67A", "#2CCCE4", "#555555", "#dce775", "#ff8a65", "#ba68c8"],
  triangle: "top",
  styles: {}
};
k(i);
export {
  i as Block
};
//# sourceMappingURL=Block.js.map
