import t from "react";
import c from "../../../../../../../../_virtual/index6.js";
import d from "../../../../../../../../_virtual/index5.js";
import h 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 u } from "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import { ColorWrap as f } from "../common/ColorWrap.js";
import "../common/Swatch.js";
import { SliderSwatches as y } from "./SliderSwatches.js";
import { SliderPointer as S } from "./SliderPointer.js";
var o = function(e) {
  var s = e.hsl, i = e.onChange, p = e.pointer, l = e.styles, a = l === void 0 ? {} : l, m = e.className, n = m === void 0 ? "" : m, r = d(h({
    default: {
      hue: {
        height: "12px",
        position: "relative"
      },
      Hue: {
        radius: "2px"
      }
    }
  }, a));
  return t.createElement(
    "div",
    { style: r.wrap || {}, className: "slider-picker " + n },
    t.createElement(
      "div",
      { style: r.hue },
      t.createElement(u, {
        style: r.Hue,
        hsl: s,
        pointer: p,
        onChange: i
      })
    ),
    t.createElement(
      "div",
      { style: r.swatches },
      t.createElement(y, { hsl: s, onClick: i })
    )
  );
};
o.propTypes = {
  styles: c.object
};
o.defaultProps = {
  pointer: S,
  styles: {}
};
f(o);
export {
  o as Slider
};
//# sourceMappingURL=Slider.js.map
