import e from "react";
import o from "../../../../../../../../_virtual/index6.js";
import y from "../../../../../../../../_virtual/index5.js";
import v from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import { Alpha as w } from "../common/Alpha.js";
import { Checkboard as C } from "../common/Checkboard.js";
import "../common/EditableInput.js";
import { Hue as E } from "../common/Hue.js";
import "../common/Raised.js";
import { Saturation as A } from "../common/Saturation.js";
import { ColorWrap as S } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { ChromeFields as k } from "./ChromeFields.js";
import { ChromePointer as m } from "./ChromePointer.js";
import { ChromePointerCircle as N } from "./ChromePointerCircle.js";
var s = function(r) {
  var x = r.width, i = r.onChange, p = r.disableAlpha, a = r.rgb, l = r.hsl, c = r.hsv, g = r.hex, n = r.renderers, d = r.styles, b = d === void 0 ? {} : d, h = r.className, u = h === void 0 ? "" : h, f = r.defaultView, t = y(v({
    default: {
      picker: {
        width: x,
        background: "#fff",
        borderRadius: "2px",
        boxShadow: "0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)",
        boxSizing: "initial",
        fontFamily: "Menlo"
      },
      saturation: {
        width: "100%",
        paddingBottom: "55%",
        position: "relative",
        borderRadius: "2px 2px 0 0",
        overflow: "hidden"
      },
      Saturation: {
        radius: "2px 2px 0 0"
      },
      body: {
        padding: "16px 16px 12px"
      },
      controls: {
        display: "flex"
      },
      color: {
        width: "32px"
      },
      swatch: {
        marginTop: "6px",
        width: "16px",
        height: "16px",
        borderRadius: "8px",
        position: "relative",
        overflow: "hidden"
      },
      active: {
        absolute: "0px 0px 0px 0px",
        borderRadius: "8px",
        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)",
        background: "rgba(" + a.r + ", " + a.g + ", " + a.b + ", " + a.a + ")",
        zIndex: "2"
      },
      toggles: {
        flex: "1"
      },
      hue: {
        height: "10px",
        position: "relative",
        marginBottom: "8px"
      },
      Hue: {
        radius: "2px"
      },
      alpha: {
        height: "10px",
        position: "relative"
      },
      Alpha: {
        radius: "2px"
      }
    },
    disableAlpha: {
      color: {
        width: "22px"
      },
      alpha: {
        display: "none"
      },
      hue: {
        marginBottom: "0px"
      },
      swatch: {
        width: "10px",
        height: "10px",
        marginTop: "0px"
      }
    }
  }, b), { disableAlpha: p });
  return e.createElement(
    "div",
    { style: t.picker, className: "chrome-picker " + u },
    e.createElement(
      "div",
      { style: t.saturation },
      e.createElement(A, {
        style: t.Saturation,
        hsl: l,
        hsv: c,
        pointer: N,
        onChange: i
      })
    ),
    e.createElement(
      "div",
      { style: t.body },
      e.createElement(
        "div",
        { style: t.controls, className: "flexbox-fix" },
        e.createElement(
          "div",
          { style: t.color },
          e.createElement(
            "div",
            { style: t.swatch },
            e.createElement("div", { style: t.active }),
            e.createElement(C, { renderers: n })
          )
        ),
        e.createElement(
          "div",
          { style: t.toggles },
          e.createElement(
            "div",
            { style: t.hue },
            e.createElement(E, {
              style: t.Hue,
              hsl: l,
              pointer: m,
              onChange: i
            })
          ),
          e.createElement(
            "div",
            { style: t.alpha },
            e.createElement(w, {
              style: t.Alpha,
              rgb: a,
              hsl: l,
              pointer: m,
              renderers: n,
              onChange: i
            })
          )
        )
      ),
      e.createElement(k, {
        rgb: a,
        hsl: l,
        hex: g,
        view: f,
        onChange: i,
        disableAlpha: p
      })
    )
  );
};
s.propTypes = {
  width: o.oneOfType([o.string, o.number]),
  disableAlpha: o.bool,
  styles: o.object,
  defaultView: o.oneOf(["hex", "rgb", "hsl"])
};
s.defaultProps = {
  width: 225,
  disableAlpha: !1,
  styles: {}
};
const G = S(s);
export {
  s as Chrome,
  G as default
};
//# sourceMappingURL=Chrome.js.map
