import e from "react";
import i from "../../../../../../../../_virtual/index7.js";
import f from "../../../../../../../../_virtual/index9.js";
import u from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import "../common/EditableInput.js";
import { Hue as b } from "../common/Hue.js";
import "../common/Raised.js";
import { Saturation as y } from "../common/Saturation.js";
import { ColorWrap as v } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { GooglePointerCircle as w } from "./GooglePointerCircle.js";
import { GooglePointer as E } from "./GooglePointer.js";
import { GoogleFields as C } from "./GoogleFields.js";
var l = function(t) {
  var h = t.width, a = t.onChange, r = t.rgb, p = t.hsl, d = t.hsv, m = t.hex, g = t.header, s = t.styles, x = s === void 0 ? {} : s, n = t.className, c = n === void 0 ? "" : n, o = f(u({
    default: {
      picker: {
        width: h,
        background: "#fff",
        border: "1px solid #dfe1e5",
        boxSizing: "initial",
        display: "flex",
        flexWrap: "wrap",
        borderRadius: "8px 8px 0px 0px"
      },
      head: {
        height: "57px",
        width: "100%",
        paddingTop: "16px",
        paddingBottom: "16px",
        paddingLeft: "16px",
        fontSize: "20px",
        boxSizing: "border-box",
        fontFamily: "Roboto-Regular,HelveticaNeue,Arial,sans-serif"
      },
      saturation: {
        width: "70%",
        padding: "0px",
        position: "relative",
        overflow: "hidden"
      },
      swatch: {
        width: "30%",
        height: "228px",
        padding: "0px",
        background: "rgba(" + r.r + ", " + r.g + ", " + r.b + ", 1)",
        position: "relative",
        overflow: "hidden"
      },
      body: {
        margin: "auto",
        width: "95%"
      },
      controls: {
        display: "flex",
        boxSizing: "border-box",
        height: "52px",
        paddingTop: "22px"
      },
      color: {
        width: "32px"
      },
      hue: {
        height: "8px",
        position: "relative",
        margin: "0px 16px 0px 16px",
        width: "100%"
      },
      Hue: {
        radius: "2px"
      }
    }
  }, x));
  return e.createElement(
    "div",
    { style: o.picker, className: "google-picker " + c },
    e.createElement(
      "div",
      { style: o.head },
      g
    ),
    e.createElement("div", { style: o.swatch }),
    e.createElement(
      "div",
      { style: o.saturation },
      e.createElement(y, {
        hsl: p,
        hsv: d,
        pointer: w,
        onChange: a
      })
    ),
    e.createElement(
      "div",
      { style: o.body },
      e.createElement(
        "div",
        { style: o.controls, className: "flexbox-fix" },
        e.createElement(
          "div",
          { style: o.hue },
          e.createElement(b, {
            style: o.Hue,
            hsl: p,
            radius: "4px",
            pointer: E,
            onChange: a
          })
        )
      ),
      e.createElement(C, {
        rgb: r,
        hsl: p,
        hex: m,
        hsv: d,
        onChange: a
      })
    )
  );
};
l.propTypes = {
  width: i.oneOfType([i.string, i.number]),
  styles: i.object,
  header: i.string
};
l.defaultProps = {
  width: 652,
  styles: {},
  header: "Color picker"
};
v(l);
export {
  l as Google
};
//# sourceMappingURL=Google.js.map
