import r from "react";
import o from "../../../../../../../../_virtual/index9.js";
import y from "../../../../../../../../_virtual/index8.js";
import w from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/map.js";
import S from "../../../../../../lodash-es@4.17.21/node_modules/lodash-es/merge.js";
import { isValidHex as C } from "../../helpers/color.js";
import "../common/Alpha.js";
import "../common/Checkboard.js";
import { EditableInput as v } from "../common/EditableInput.js";
import "../common/Hue.js";
import "../common/Raised.js";
import "../common/Saturation.js";
import { ColorWrap as E } from "../common/ColorWrap.js";
import F from "../common/Swatch.js";
var n = function(t) {
  var h = t.onChange, x = t.onSwatchHover, g = t.hex, c = t.colors, f = t.width, l = t.triangle, p = t.styles, m = p === void 0 ? {} : p, d = t.className, b = d === void 0 ? "" : d, e = y(S({
    default: {
      card: {
        width: f,
        background: "#fff",
        border: "0 solid rgba(0,0,0,0.25)",
        boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
        borderRadius: "4px",
        position: "relative"
      },
      body: {
        padding: "15px 9px 9px 15px"
      },
      label: {
        fontSize: "18px",
        color: "#fff"
      },
      triangle: {
        width: "0px",
        height: "0px",
        borderStyle: "solid",
        borderWidth: "0 9px 10px 9px",
        borderColor: "transparent transparent #fff transparent",
        position: "absolute"
      },
      triangleShadow: {
        width: "0px",
        height: "0px",
        borderStyle: "solid",
        borderWidth: "0 9px 10px 9px",
        borderColor: "transparent transparent rgba(0,0,0,.1) transparent",
        position: "absolute"
      },
      hash: {
        background: "#F0F0F0",
        height: "30px",
        width: "30px",
        borderRadius: "4px 0 0 4px",
        float: "left",
        color: "#98A1A4",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      },
      input: {
        width: "100px",
        fontSize: "14px",
        color: "#666",
        border: "0px",
        outline: "none",
        height: "28px",
        boxShadow: "inset 0 0 0 1px #F0F0F0",
        boxSizing: "content-box",
        borderRadius: "0 4px 4px 0",
        float: "left",
        paddingLeft: "8px"
      },
      swatch: {
        width: "30px",
        height: "30px",
        float: "left",
        borderRadius: "4px",
        margin: "0 6px 6px 0"
      },
      clear: {
        clear: "both"
      }
    },
    "hide-triangle": {
      triangle: {
        display: "none"
      },
      triangleShadow: {
        display: "none"
      }
    },
    "top-left-triangle": {
      triangle: {
        top: "-10px",
        left: "12px"
      },
      triangleShadow: {
        top: "-11px",
        left: "12px"
      }
    },
    "top-right-triangle": {
      triangle: {
        top: "-10px",
        right: "12px"
      },
      triangleShadow: {
        top: "-11px",
        right: "12px"
      }
    }
  }, m), {
    "hide-triangle": l === "hide",
    "top-left-triangle": l === "top-left",
    "top-right-triangle": l === "top-right"
  }), s = function(i, u) {
    C(i) && h({
      hex: i,
      source: "hex"
    }, u);
  };
  return r.createElement(
    "div",
    { style: e.card, className: "twitter-picker " + b },
    r.createElement("div", { style: e.triangleShadow }),
    r.createElement("div", { style: e.triangle }),
    r.createElement(
      "div",
      { style: e.body },
      w(c, function(a, i) {
        return r.createElement(F, {
          key: i,
          color: a,
          hex: a,
          style: e.swatch,
          onClick: s,
          onHover: x,
          focusStyle: {
            boxShadow: "0 0 4px " + a
          }
        });
      }),
      r.createElement(
        "div",
        { style: e.hash },
        "#"
      ),
      r.createElement(v, {
        label: null,
        style: { input: e.input },
        value: g.replace("#", ""),
        onChange: s
      }),
      r.createElement("div", { style: e.clear })
    )
  );
};
n.propTypes = {
  width: o.oneOfType([o.string, o.number]),
  triangle: o.oneOf(["hide", "top-left", "top-right"]),
  colors: o.arrayOf(o.string),
  styles: o.object
};
n.defaultProps = {
  width: 276,
  colors: ["#FF6900", "#FCB900", "#7BDCB5", "#00D084", "#8ED1FC", "#0693E3", "#ABB8C3", "#EB144C", "#F78DA7", "#9900EF"],
  triangle: "top-left",
  styles: {}
};
E(n);
export {
  n as Twitter
};
//# sourceMappingURL=Twitter.js.map
