import a from "react";
import d from "../../../../../../../../_virtual/index8.js";
import { isValidHex as h } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as r } from "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import "../common/Swatch.js";
var M = function(n) {
  var p = n.onChange, t = n.rgb, o = n.hsl, b = n.hex, g = n.disableAlpha, e = d({
    default: {
      fields: {
        display: "flex",
        paddingTop: "4px"
      },
      single: {
        flex: "1",
        paddingLeft: "6px"
      },
      alpha: {
        flex: "1",
        paddingLeft: "6px"
      },
      double: {
        flex: "2"
      },
      input: {
        width: "80%",
        padding: "4px 10% 3px",
        border: "none",
        boxShadow: "inset 0 0 0 1px #ccc",
        fontSize: "11px"
      },
      label: {
        display: "block",
        textAlign: "center",
        fontSize: "11px",
        color: "#222",
        paddingTop: "3px",
        paddingBottom: "4px",
        textTransform: "capitalize"
      }
    },
    disableAlpha: {
      alpha: {
        display: "none"
      }
    }
  }, { disableAlpha: g }), i = function(l, s) {
    l.hex ? h(l.hex) && p({
      hex: l.hex,
      source: "hex"
    }, s) : l.r || l.g || l.b ? p({
      r: l.r || t.r,
      g: l.g || t.g,
      b: l.b || t.b,
      a: t.a,
      source: "rgb"
    }, s) : l.a && (l.a < 0 ? l.a = 0 : l.a > 100 && (l.a = 100), l.a /= 100, p({
      h: o.h,
      s: o.s,
      l: o.l,
      a: l.a,
      source: "rgb"
    }, s));
  };
  return a.createElement(
    "div",
    { style: e.fields, className: "flexbox-fix" },
    a.createElement(
      "div",
      { style: e.double },
      a.createElement(r, {
        style: { input: e.input, label: e.label },
        label: "hex",
        value: b.replace("#", ""),
        onChange: i
      })
    ),
    a.createElement(
      "div",
      { style: e.single },
      a.createElement(r, {
        style: { input: e.input, label: e.label },
        label: "r",
        value: t.r,
        onChange: i,
        dragLabel: "true",
        dragMax: "255"
      })
    ),
    a.createElement(
      "div",
      { style: e.single },
      a.createElement(r, {
        style: { input: e.input, label: e.label },
        label: "g",
        value: t.g,
        onChange: i,
        dragLabel: "true",
        dragMax: "255"
      })
    ),
    a.createElement(
      "div",
      { style: e.single },
      a.createElement(r, {
        style: { input: e.input, label: e.label },
        label: "b",
        value: t.b,
        onChange: i,
        dragLabel: "true",
        dragMax: "255"
      })
    ),
    a.createElement(
      "div",
      { style: e.alpha },
      a.createElement(r, {
        style: { input: e.input, label: e.label },
        label: "a",
        value: Math.round(t.a * 100),
        onChange: i,
        dragLabel: "true",
        dragMax: "100"
      })
    )
  );
};
export {
  M as SketchFields,
  M as default
};
//# sourceMappingURL=SketchFields.js.map
