import t from "react";
import b from "../../../../../../../../_virtual/index8.js";
import g from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import { isValidHex as c } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as o } from "../common/EditableInput.js";
import "../common/Hue.js";
import { Raised as u } from "../common/Raised.js";
import "../common/Saturation.js";
import { ColorWrap as f } from "../common/ColorWrap.js";
import "../common/Swatch.js";
var y = function(r) {
  var p = r.onChange, n = r.hex, i = r.rgb, s = r.styles, m = s === void 0 ? {} : s, x = r.className, h = x === void 0 ? "" : x, e = b(g({
    default: {
      material: {
        width: "98px",
        height: "98px",
        padding: "16px",
        fontFamily: "Roboto"
      },
      HEXwrap: {
        position: "relative"
      },
      HEXinput: {
        width: "100%",
        marginTop: "12px",
        fontSize: "15px",
        color: "#333",
        padding: "0px",
        border: "0px",
        borderBottom: "2px solid " + n,
        outline: "none",
        height: "30px"
      },
      HEXlabel: {
        position: "absolute",
        top: "0px",
        left: "0px",
        fontSize: "11px",
        color: "#999999",
        textTransform: "capitalize"
      },
      Hex: {
        style: {}
      },
      RGBwrap: {
        position: "relative"
      },
      RGBinput: {
        width: "100%",
        marginTop: "12px",
        fontSize: "15px",
        color: "#333",
        padding: "0px",
        border: "0px",
        borderBottom: "1px solid #eee",
        outline: "none",
        height: "30px"
      },
      RGBlabel: {
        position: "absolute",
        top: "0px",
        left: "0px",
        fontSize: "11px",
        color: "#999999",
        textTransform: "capitalize"
      },
      split: {
        display: "flex",
        marginRight: "-10px",
        paddingTop: "11px"
      },
      third: {
        flex: "1",
        paddingRight: "10px"
      }
    }
  }, m)), a = function(l, d) {
    l.hex ? c(l.hex) && p({
      hex: l.hex,
      source: "hex"
    }, d) : (l.r || l.g || l.b) && p({
      r: l.r || i.r,
      g: l.g || i.g,
      b: l.b || i.b,
      source: "rgb"
    }, d);
  };
  return t.createElement(
    u,
    { styles: m },
    t.createElement(
      "div",
      { style: e.material, className: "material-picker " + h },
      t.createElement(o, {
        style: { wrap: e.HEXwrap, input: e.HEXinput, label: e.HEXlabel },
        label: "hex",
        value: n,
        onChange: a
      }),
      t.createElement(
        "div",
        { style: e.split, className: "flexbox-fix" },
        t.createElement(
          "div",
          { style: e.third },
          t.createElement(o, {
            style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
            label: "r",
            value: i.r,
            onChange: a
          })
        ),
        t.createElement(
          "div",
          { style: e.third },
          t.createElement(o, {
            style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
            label: "g",
            value: i.g,
            onChange: a
          })
        ),
        t.createElement(
          "div",
          { style: e.third },
          t.createElement(o, {
            style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
            label: "b",
            value: i.b,
            onChange: a
          })
        )
      )
    )
  );
};
f(y);
export {
  y as Material
};
//# sourceMappingURL=Material.js.map
