import t from "react";
import i from "../../../../../../../../_virtual/index7.js";
import y from "../../../../../../../../_virtual/index9.js";
import E 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 A } from "../common/Hue.js";
import "../common/Raised.js";
import { Saturation as S } from "../common/Saturation.js";
import { ColorWrap as k } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { SketchFields as F } from "./SketchFields.js";
import { SketchPresetColors as B } from "./SketchPresetColors.js";
var H = Object.assign || function(p) {
  for (var e = 1; e < arguments.length; e++) {
    var o = arguments[e];
    for (var a in o)
      Object.prototype.hasOwnProperty.call(o, a) && (p[a] = o[a]);
  }
  return p;
}, n = function(e) {
  var o = e.width, a = e.rgb, x = e.hex, g = e.hsv, l = e.hsl, s = e.onChange, b = e.onSwatchHover, h = e.disableAlpha, u = e.presetColors, v = e.renderers, d = e.styles, m = d === void 0 ? {} : d, c = e.className, f = c === void 0 ? "" : c, r = y(E({
    default: H({
      picker: {
        width: o,
        padding: "10px 10px 0",
        boxSizing: "initial",
        background: "#fff",
        borderRadius: "4px",
        boxShadow: "0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"
      },
      saturation: {
        width: "100%",
        paddingBottom: "75%",
        position: "relative",
        overflow: "hidden"
      },
      Saturation: {
        radius: "3px",
        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
      },
      controls: {
        display: "flex"
      },
      sliders: {
        padding: "4px 0",
        flex: "1"
      },
      color: {
        width: "24px",
        height: "24px",
        position: "relative",
        marginTop: "4px",
        marginLeft: "4px",
        borderRadius: "3px"
      },
      activeColor: {
        absolute: "0px 0px 0px 0px",
        borderRadius: "2px",
        background: "rgba(" + a.r + "," + a.g + "," + a.b + "," + a.a + ")",
        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
      },
      hue: {
        position: "relative",
        height: "10px",
        overflow: "hidden"
      },
      Hue: {
        radius: "2px",
        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
      },
      alpha: {
        position: "relative",
        height: "10px",
        marginTop: "4px",
        overflow: "hidden"
      },
      Alpha: {
        radius: "2px",
        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
      }
    }, m),
    disableAlpha: {
      color: {
        height: "10px"
      },
      hue: {
        height: "10px"
      },
      alpha: {
        display: "none"
      }
    }
  }, m), { disableAlpha: h });
  return t.createElement(
    "div",
    { style: r.picker, className: "sketch-picker " + f },
    t.createElement(
      "div",
      { style: r.saturation },
      t.createElement(S, {
        style: r.Saturation,
        hsl: l,
        hsv: g,
        onChange: s
      })
    ),
    t.createElement(
      "div",
      { style: r.controls, className: "flexbox-fix" },
      t.createElement(
        "div",
        { style: r.sliders },
        t.createElement(
          "div",
          { style: r.hue },
          t.createElement(A, {
            style: r.Hue,
            hsl: l,
            onChange: s
          })
        ),
        t.createElement(
          "div",
          { style: r.alpha },
          t.createElement(w, {
            style: r.Alpha,
            rgb: a,
            hsl: l,
            renderers: v,
            onChange: s
          })
        )
      ),
      t.createElement(
        "div",
        { style: r.color },
        t.createElement(C, null),
        t.createElement("div", { style: r.activeColor })
      )
    ),
    t.createElement(F, {
      rgb: a,
      hsl: l,
      hex: x,
      onChange: s,
      disableAlpha: h
    }),
    t.createElement(B, {
      colors: u,
      onClick: s,
      onSwatchHover: b
    })
  );
};
n.propTypes = {
  disableAlpha: i.bool,
  width: i.oneOfType([i.string, i.number]),
  styles: i.object
};
n.defaultProps = {
  disableAlpha: !1,
  width: 200,
  styles: {},
  presetColors: ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]
};
k(n);
export {
  n as Sketch
};
//# sourceMappingURL=Sketch.js.map
