import n from "react";
import g from "../../../../../../../../_virtual/index8.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as a } from "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import "../../../../../../tinycolor2@1.6.0/node_modules/tinycolor2/esm/tinycolor.js";
import "../common/Swatch.js";
var E = function(o) {
  var p = o.hex, l = o.rgb, r = o.onChange, e = g({
    default: {
      fields: {
        display: "flex",
        paddingBottom: "6px",
        paddingRight: "5px",
        position: "relative"
      },
      active: {
        position: "absolute",
        top: "6px",
        left: "5px",
        height: "9px",
        width: "9px",
        background: p
      },
      HEXwrap: {
        flex: "6",
        position: "relative"
      },
      HEXinput: {
        width: "80%",
        padding: "0px",
        paddingLeft: "20%",
        border: "none",
        outline: "none",
        background: "none",
        fontSize: "12px",
        color: "#333",
        height: "16px"
      },
      HEXlabel: {
        display: "none"
      },
      RGBwrap: {
        flex: "3",
        position: "relative"
      },
      RGBinput: {
        width: "70%",
        padding: "0px",
        paddingLeft: "30%",
        border: "none",
        outline: "none",
        background: "none",
        fontSize: "12px",
        color: "#333",
        height: "16px"
      },
      RGBlabel: {
        position: "absolute",
        top: "3px",
        left: "0px",
        lineHeight: "16px",
        textTransform: "uppercase",
        fontSize: "12px",
        color: "#999"
      }
    }
  }), i = function(t, b) {
    t.r || t.g || t.b ? r({
      r: t.r || l.r,
      g: t.g || l.g,
      b: t.b || l.b,
      source: "rgb"
    }, b) : r({
      hex: t.hex,
      source: "hex"
    }, b);
  };
  return n.createElement(
    "div",
    { style: e.fields, className: "flexbox-fix" },
    n.createElement("div", { style: e.active }),
    n.createElement(a, {
      style: { wrap: e.HEXwrap, input: e.HEXinput, label: e.HEXlabel },
      label: "hex",
      value: p,
      onChange: i
    }),
    n.createElement(a, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "r",
      value: l.r,
      onChange: i
    }),
    n.createElement(a, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "g",
      value: l.g,
      onChange: i
    }),
    n.createElement(a, {
      style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
      label: "b",
      value: l.b,
      onChange: i
    })
  );
};
export {
  E as CompactFields,
  E as default
};
//# sourceMappingURL=CompactFields.js.map
