@hello-pangea/color-picker/dist/color-picker.cjs.js

React color pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var React = require('react');
var debounce = require('lodash/debounce');
var isEqual = require('lodash/isEqual');
var each = require('lodash/each');
var tinycolor = require('tinycolor2');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var merge = require('lodash/merge');

const simpleCheckForValidColor = data => {
  const keysToCheck = ["r", "g", "b", "a", "h", "s", "l", "v"];
  let checked = 0;
  let passed = 0;
  each(keysToCheck, letter => {
    if (data[letter]) {
      checked += 1;
      if (!isNaN(data[letter])) {
        passed += 1;
      }
      if (letter === "s" || letter === "l") {
        const percentPatt = /^\d+%$/;
        if (percentPatt.test(data[letter])) {
          passed += 1;
        }
      }
    }
  });
  return checked === passed ? data : false;
};
const toState = (data, oldHue) => {
  const color = data.hex ? tinycolor(data.hex) : tinycolor(data);
  const hsl = color.toHsl();
  const hsv = color.toHsv();
  const rgb = color.toRgb();
  const hex = color.toHex();
  if (hsl.s === 0) {
    hsl.h = oldHue || 0;
    hsv.h = oldHue || 0;
  }
  const transparent = hex === "000000" && rgb.a === 0;
  return {
    hsl,
    hex: transparent ? "transparent" : `#${hex}`,
    rgb,
    hsv,
    oldHue: data.h || oldHue || hsl.h,
    source: data.source
  };
};
const isValidHex = hex => {
  if (hex === "transparent") {
    return true;
  }
  const lh = String(hex).charAt(0) === "#" ? 1 : 0;
  return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
};
const getContrastingColor = data => {
  if (!data) {
    return "#fff";
  }
  const col = toState(data);
  if (col.hex === "transparent") {
    return "rgba(0,0,0,0.4)";
  }
  const yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
  return yiq >= 128 ? "#000" : "#fff";
};
const isvalidColorString = (string, type) => {
  const stringWithoutDegree = string.replace("°", "");
  return tinycolor(`${type} (${stringWithoutDegree})`)._ok;
};

const ColorContext = React.createContext(undefined);
function ColorProvider(_ref) {
  let {
    children,
    onChangeComplete,
    onChange,
    onSwatchHover,
    color: passedColor,
    defaultColor = {
      h: 250,
      s: 0.5,
      l: 0.2,
      a: 1
    }
  } = _ref;
  const [colors, setColors] = React.useState({
    ...toState(passedColor ?? defaultColor, 0)
  });
  const passedColorRef = React.useRef(passedColor);
  if (!isEqual(passedColorRef.current, passedColor)) {
    passedColorRef.current = passedColor;
  }
  React.useEffect(() => {
    if (passedColor) {
      setColors({
        ...toState(passedColor, 0)
      });
    }
  }, [passedColorRef.current]);
  const handler = (fn, data, event) => fn(data, event);
  const debouncedChangeHandler = React.useMemo(() => debounce(handler, 100), []);
  function changeColor(newColor, event) {
    const isValidColor = simpleCheckForValidColor(newColor);
    if (isValidColor) {
      const newColors = toState(newColor, (typeof newColor !== "string" && "h" in newColor ? newColor.h : undefined) || colors.oldHue);
      setColors(newColors);
      onChangeComplete && debouncedChangeHandler(onChangeComplete, newColors, event);
      onChange && onChange(newColors, event);
    }
  }
  function handleSwatchHover(data, event) {
    const isValidColor = simpleCheckForValidColor(data);
    if (isValidColor) {
      const newColors = toState(data, (typeof data !== "string" && "h" in data ? data.h : undefined) || colors.oldHue);
      onSwatchHover && onSwatchHover(newColors, event);
    }
  }
  return React.createElement(ColorContext.Provider, {
    value: {
      colors: colors,
      changeColor: changeColor,
      onSwatchHover: onSwatchHover ? handleSwatchHover : undefined
    }
  }, children);
}
const useColor = () => React.useContext(ColorContext);
const withColorProvider = Component => props => React.createElement(ColorProvider, props, React.createElement(Component, props));

const calculateChange$2 = (e, hsl, direction, initialA, container) => {
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  const x = typeof e.pageX === "number" ? e.pageX : e.touches[0].pageX;
  const y = typeof e.pageY === "number" ? e.pageY : e.touches[0].pageY;
  const left = x - (container.getBoundingClientRect().left + window.pageXOffset);
  const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
  if (direction === "vertical") {
    let a;
    if (top < 0) {
      a = 0;
    } else if (top > containerHeight) {
      a = 1;
    } else {
      a = Math.round(top * 100 / containerHeight) / 100;
    }
    if (hsl.a !== a) {
      return {
        h: hsl.h,
        s: hsl.s,
        l: hsl.l,
        a,
        source: "rgb"
      };
    }
  } else {
    let a;
    if (left < 0) {
      a = 0;
    } else if (left > containerWidth) {
      a = 1;
    } else {
      a = Math.round(left * 100 / containerWidth) / 100;
    }
    if (initialA !== a) {
      return {
        h: hsl.h,
        s: hsl.s,
        l: hsl.l,
        a,
        source: "rgb"
      };
    }
  }
  return null;
};

const checkboardCache = {};
const render = (c1, c2, size, serverCanvas) => {
  if (typeof document === "undefined" && !serverCanvas) {
    return null;
  }
  const canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
  canvas.width = size * 2;
  canvas.height = size * 2;
  const ctx = canvas.getContext("2d");
  if (!ctx) {
    return null;
  }
  ctx.fillStyle = c1;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = c2;
  ctx.fillRect(0, 0, size, size);
  ctx.translate(size, size);
  ctx.fillRect(0, 0, size, size);
  return canvas.toDataURL();
};
const get = (c1, c2, size, serverCanvas) => {
  const key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`;
  if (checkboardCache[key]) {
    return checkboardCache[key];
  }
  const checkboard = render(c1, c2, size, serverCanvas);
  checkboardCache[key] = checkboard;
  return checkboard;
};

function Checkboard(_ref) {
  let {
    white = "transparent",
    grey = "rgba(0,0,0,.08)",
    size = 8,
    renderers = {},
    borderRadius,
    boxShadow,
    children
  } = _ref;
  const styles = {
    grid: {
      borderRadius,
      boxShadow,
      position: "absolute",
      inset: "0px",
      background: `url(${get(white, grey, size, renderers.canvas)}) center left`
    }
  };
  return React.isValidElement(children) ? React.cloneElement(children, {
    ...children.props,
    style: {
      ...children.props.style,
      ...styles.grid
    }
  }) : React.createElement("div", {
    style: styles.grid
  });
}

let Alpha$1 = class Alpha extends (React.PureComponent || React.Component) {
  constructor() {
    super(...arguments);
    _defineProperty(this, "handleChange", e => {
      const change = calculateChange$2(e, this.props.hsl, this.props.direction, this.props.a, this.container);
      change && typeof this.props.onChange === "function" && this.props.onChange(change, e);
    });
    _defineProperty(this, "handleMouseDown", e => {
      this.handleChange(e);
      window.addEventListener("mousemove", this.handleChange);
      window.addEventListener("mouseup", this.handleMouseUp);
    });
    _defineProperty(this, "handleMouseUp", () => {
      this.unbindEventListeners();
    });
    _defineProperty(this, "unbindEventListeners", () => {
      window.removeEventListener("mousemove", this.handleChange);
      window.removeEventListener("mouseup", this.handleMouseUp);
    });
  }
  componentWillUnmount() {
    this.unbindEventListeners();
  }
  render() {
    const rgb = this.props.rgb;
    const styles = merge({
      alpha: {
        position: "absolute",
        inset: "0px",
        borderRadius: this.props.radius
      },
      checkboard: {
        position: "absolute",
        inset: "0px",
        overflow: "hidden",
        borderRadius: this.props.radius
      },
      gradient: {
        position: "absolute",
        inset: "0px",
        background: this.props.direction === "vertical" ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
            rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
           rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
        boxShadow: this.props.shadow,
        borderRadius: this.props.radius
      },
      container: {
        position: "relative",
        height: "100%",
        margin: "0 3px"
      },
      pointer: {
        position: "absolute",
        left: this.props.direction === "vertical" ? 0 : `${rgb.a * 100}%`,
        top: this.props.direction === "vertical" ? `${rgb.a * 100}%` : undefined
      },
      slider: {
        width: "4px",
        borderRadius: "1px",
        height: "8px",
        boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
        background: "#fff",
        marginTop: "1px",
        transform: "translateX(-2px)"
      }
    }, this.props.style);
    return React.createElement("div", {
      style: styles.alpha
    }, React.createElement("div", {
      style: styles.checkboard
    }, React.createElement(Checkboard, {
      renderers: this.props.renderers
    })), React.createElement("div", {
      style: styles.gradient
    }), React.createElement("div", {
      style: styles.container,
      ref: container => this.container = container,
      onMouseDown: this.handleMouseDown,
      onTouchMove: this.handleChange,
      onTouchStart: this.handleChange
    }, React.createElement("div", {
      style: styles.pointer
    }, this.props.pointer ? React.createElement(this.props.pointer, this.props) : React.createElement("div", {
      style: styles.slider
    }))));
  }
};
var Alpha$2 = Alpha$1;

const ColorWrap = Picker => {
  function ColorPicker(_ref) {
    let {
      onSwatchHover,
      onChangeComplete,
      color,
      defaultColor
    } = _ref;
    const {
      colors,
      changeColor
    } = useColor();
    return React.createElement(ColorProvider, {
      color: color,
      defaultColor: defaultColor,
      onChangeComplete: onChangeComplete,
      onSwatchHover: onSwatchHover
    }, React.createElement(Picker, _extends({}, colors, {
      onChange: changeColor
    })));
  }
  return withColorProvider(ColorPicker);
};
var ColorWrap$1 = ColorWrap;

const DEFAULT_ARROW_OFFSET = 1;
const UP_KEY_CODE = 38;
const DOWN_KEY_CODE = 40;
const VALID_KEY_CODES = [UP_KEY_CODE, DOWN_KEY_CODE];
const isValidKeyCode = keyCode => VALID_KEY_CODES.indexOf(keyCode) > -1;
const getNumberValue = value => Number(String(value).replace(/%/g, ""));
let idCounter = 1;
class EditableInput extends (React.PureComponent || React.Component) {
  constructor(props) {
    super();
    _defineProperty(this, "handleBlur", () => {
      if (this.state.blurValue) {
        this.setState({
          value: this.state.blurValue,
          blurValue: null
        });
      }
    });
    _defineProperty(this, "handleChange", e => {
      this.setUpdatedValue(e.target.value, e);
    });
    _defineProperty(this, "handleKeyDown", e => {
      const value = getNumberValue(e.target.value);
      if (!isNaN(value) && isValidKeyCode(e.keyCode)) {
        const offset = this.getArrowOffset();
        const updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
        this.setUpdatedValue(updatedValue, e);
      }
    });
    _defineProperty(this, "handleDrag", e => {
      if (this.props.dragLabel) {
        const newValue = Math.round(this.props.value + e.movementX);
        if (newValue >= 0 && newValue <= this.props.dragMax) {
          this.props.onChange && this.props.onChange(this.getValueObjectWithLabel(newValue), e);
        }
      }
    });
    _defineProperty(this, "handleMouseDown", e => {
      if (this.props.dragLabel) {
        e.preventDefault();
        this.handleDrag(e);
        window.addEventListener("mousemove", this.handleDrag);
        window.addEventListener("mouseup", this.handleMouseUp);
      }
    });
    _defineProperty(this, "handleMouseUp", () => {
      this.unbindEventListeners();
    });
    _defineProperty(this, "unbindEventListeners", () => {
      window.removeEventListener("mousemove", this.handleDrag);
      window.removeEventListener("mouseup", this.handleMouseUp);
    });
    this.state = {
      value: String(props.value).toUpperCase(),
      blurValue: String(props.value).toUpperCase()
    };
    this.inputId = `rc-editable-input-${idCounter++}`;
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
      if (this.input === document.activeElement) {
        this.setState({
          blurValue: String(this.props.value).toUpperCase()
        });
      } else {
        this.setState({
          value: String(this.props.value).toUpperCase(),
          blurValue: !this.state.blurValue && String(this.props.value).toUpperCase()
        });
      }
    }
  }
  componentWillUnmount() {
    this.unbindEventListeners();
  }
  getValueObjectWithLabel(value) {
    return {
      [this.props.label]: value
    };
  }
  getArrowOffset() {
    return this.props.arrowOffset || DEFAULT_ARROW_OFFSET;
  }
  setUpdatedValue(value, e) {
    const onChangeValue = this.props.label ? this.getValueObjectWithLabel(value) : value;
    this.props.onChange && this.props.onChange(onChangeValue, e);
    this.setState({
      value
    });
  }
  render() {
    const styles = {
      wrap: {
        position: "relative"
      },
      input: this.props.style && this.props.style.input ? this.props.style.input : {},
      label: {
        cursor: this.props["dragLabel-true"] ? "ew-resize" : undefined
      }
    };
    if (this.props.style && this.props.style.wrap) {
      styles.wrap = {
        ...styles.wrap,
        ...this.props.style.wrap
      };
    }
    if (this.props.style && this.props.style.label) {
      styles.label = {
        ...styles.label,
        ...this.props.style.label
      };
    }
    return React.createElement("div", {
      style: styles.wrap
    }, React.createElement("input", {
      id: this.inputId,
      style: styles.input,
      ref: input => this.input = input,
      value: this.state.value,
      onKeyDown: this.handleKeyDown,
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      placeholder: this.props.placeholder,
      spellCheck: "false"
    }), this.props.label && !this.props.hideLabel ? React.createElement("label", {
      htmlFor: this.inputId,
      style: styles.label,
      onMouseDown: this.handleMouseDown
    }, this.props.label) : null);
  }
}
var EditableInput$1 = EditableInput;

const calculateChange$1 = (e, direction, hsl, container) => {
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  const x = typeof e.pageX === "number" ? e.pageX : e.touches[0].pageX;
  const y = typeof e.pageY === "number" ? e.pageY : e.touches[0].pageY;
  const left = x - (container.getBoundingClientRect().left + window.pageXOffset);
  const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
  if (direction === "vertical") {
    let h;
    if (top < 0) {
      h = 359;
    } else if (top > containerHeight) {
      h = 0;
    } else {
      const percent = -(top * 100 / containerHeight) + 100;
      h = 360 * percent / 100;
    }
    if (hsl.h !== h) {
      return {
        h,
        s: hsl.s,
        l: hsl.l,
        a: hsl.a,
        source: "hsl"
      };
    }
  } else {
    let h;
    if (left < 0) {
      h = 0;
    } else if (left > containerWidth) {
      h = 359;
    } else {
      const percent = left * 100 / containerWidth;
      h = 360 * percent / 100;
    }
    if (hsl.h !== h) {
      return {
        h,
        s: hsl.s,
        l: hsl.l,
        a: hsl.a,
        source: "hsl"
      };
    }
  }
  return null;
};

let Hue$1 = class Hue extends (React.PureComponent || React.Component) {
  constructor() {
    super(...arguments);
    _defineProperty(this, "handleChange", e => {
      const change = calculateChange$1(e, this.props.direction, this.props.hsl, this.container);
      change && typeof this.props.onChange === "function" && this.props.onChange(change, e);
    });
    _defineProperty(this, "handleMouseDown", e => {
      this.handleChange(e);
      window.addEventListener("mousemove", this.handleChange);
      window.addEventListener("mouseup", this.handleMouseUp);
    });
    _defineProperty(this, "handleMouseUp", () => {
      this.unbindEventListeners();
    });
  }
  componentWillUnmount() {
    this.unbindEventListeners();
  }
  unbindEventListeners() {
    window.removeEventListener("mousemove", this.handleChange);
    window.removeEventListener("mouseup", this.handleMouseUp);
  }
  render() {
    const {
      direction = "horizontal"
    } = this.props;
    const styles = {
      hue: {
        position: "absolute",
        inset: "0px",
        borderRadius: this.props.radius,
        boxShadow: this.props.shadow
      },
      container: {
        padding: "0 2px",
        position: "relative",
        height: "100%",
        borderRadius: this.props.radius
      },
      pointer: {
        position: "absolute",
        left: direction === "vertical" ? "0px" : `${this.props.hsl.h * 100 / 360}%`,
        top: direction === "vertical" ? `${-(this.props.hsl.h * 100 / 360) + 100}%` : undefined
      },
      slider: {
        marginTop: "1px",
        width: "4px",
        borderRadius: "1px",
        height: "8px",
        boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
        background: "#fff",
        transform: "translateX(-2px)"
      }
    };
    return React.createElement("div", {
      style: styles.hue
    }, React.createElement("div", {
      className: `hue-${direction}`,
      style: styles.container,
      ref: container => this.container = container,
      onMouseDown: this.handleMouseDown,
      onTouchMove: this.handleChange,
      onTouchStart: this.handleChange
    }, React.createElement("style", null, `
            .hue-horizontal {
              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to right, #f00 0%, #ff0
                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }

            .hue-vertical {
              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }
          `), React.createElement("div", {
      style: styles.pointer
    }, this.props.pointer ? React.createElement(this.props.pointer, this.props) : React.createElement("div", {
      style: styles.slider
    }))));
  }
};
var Hue$2 = Hue$1;

function Raised(_ref) {
  let {
    zDepth = 1,
    radius = 2,
    background = "#fff",
    children,
    styles: passedStyles = {}
  } = _ref;
  const styles = merge({
    wrap: {
      position: "relative",
      display: "inline-block"
    },
    content: {
      position: "relative"
    },
    bg: {
      position: "absolute",
      inset: "0px",
      boxShadow: zDepth === 1 ? "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)" : `0 ${zDepth}px ${zDepth * 4}px rgba(0,0,0,.24)`,
      borderRadius: radius,
      background
    }
  }, passedStyles);
  return React.createElement("div", {
    style: styles.wrap
  }, React.createElement("div", {
    style: styles.bg
  }), React.createElement("div", {
    style: styles.content
  }, children));
}

function calculateChange(e, hsl, container) {
  const {
    width: containerWidth,
    height: containerHeight
  } = container.getBoundingClientRect();
  const x = typeof e.pageX === "number" ? e.pageX : e.touches[0].pageX;
  const y = typeof e.pageY === "number" ? e.pageY : e.touches[0].pageY;
  let left = x - (container.getBoundingClientRect().left + window.pageXOffset);
  let top = y - (container.getBoundingClientRect().top + window.pageYOffset);
  if (left < 0) {
    left = 0;
  } else if (left > containerWidth) {
    left = containerWidth;
  }
  if (top < 0) {
    top = 0;
  } else if (top > containerHeight) {
    top = containerHeight;
  }
  const saturation = left / containerWidth;
  const bright = 1 - top / containerHeight;
  return {
    h: hsl.h,
    s: saturation,
    v: bright,
    a: hsl.a,
    source: "hsv"
  };
}

function Saturation(_ref) {
  let {
    hsl,
    hsv,
    pointer,
    onChange,
    shadow,
    radius,
    style
  } = _ref;
  const ref = React.useRef(null);
  React.useEffect(() => {
    return () => {
      unbindEventListeners();
    };
  }, []);
  function handleChange(event) {
    if (onChange) {
      onChange(calculateChange(event, hsl, ref.current), event);
    }
  }
  function handleMouseDown(event) {
    handleChange(event);
    if (ref.current) {
      ref.current.addEventListener("mousemove", handleChange);
      ref.current.addEventListener("mouseup", handleMouseUp);
    }
  }
  function handleMouseUp() {
    unbindEventListeners();
  }
  function unbindEventListeners() {
    if (ref.current) {
      ref.current.removeEventListener("mousemove", handleChange);
      ref.current.removeEventListener("mouseup", handleMouseUp);
    }
  }
  const {
    color,
    white,
    black,
    pointer: stylePointer,
    circle
  } = style || {};
  let styles = {
    color: {
      position: "absolute",
      inset: "0px",
      background: `hsl(${hsl.h},100%, 50%)`,
      borderRadius: radius
    },
    white: {
      position: "absolute",
      inset: "0px",
      borderRadius: radius
    },
    black: {
      position: "absolute",
      inset: "0px",
      boxShadow: shadow,
      borderRadius: radius
    },
    pointer: {
      position: "absolute",
      top: `${-(hsv.v * 100) + 100}%`,
      left: `${hsv.s * 100}%`,
      cursor: "default"
    },
    circle: {
      width: "4px",
      height: "4px",
      boxShadow: `0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
            0 0 1px 2px rgba(0,0,0,.4)`,
      borderRadius: "50%",
      cursor: "hand",
      transform: "translate(-2px, -2px)"
    }
  };
  if (style) {
    styles = merge(styles, {
      color,
      white,
      black,
      stylePointer,
      circle
    });
  }
  return React.createElement("div", {
    style: styles.color,
    ref: ref,
    onMouseDown: handleMouseDown,
    onTouchMove: handleChange,
    onTouchStart: handleChange
  }, React.createElement("style", null, `
          .saturation-white {
            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
          }
          .saturation-black {
            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
            background: linear-gradient(to top, #000, rgba(0,0,0,0));
          }
        `), React.createElement("div", {
    style: styles.white,
    className: "saturation-white"
  }, React.createElement("div", {
    style: styles.black,
    className: "saturation-black"
  }), React.createElement("div", {
    style: styles.pointer
  }, pointer ? pointer : React.createElement("div", {
    style: styles.circle
  }))));
}

const handleFocus = function (Component) {
  let Span = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "span";
  return class Focus extends React.Component {
    constructor() {
      super(...arguments);
      _defineProperty(this, "state", {
        focus: false
      });
      _defineProperty(this, "handleFocus", () => this.setState({
        focus: true
      }));
      _defineProperty(this, "handleBlur", () => this.setState({
        focus: false
      }));
    }
    render() {
      return React.createElement(Span, {
        onFocus: this.handleFocus,
        onBlur: this.handleBlur
      }, React.createElement(Component, _extends({}, this.props, this.state)));
    }
  };
};

const ENTER = 13;
const Swatch = _ref => {
  let {
    color,
    style,
    onClick = () => {},
    title = color,
    children,
    focus,
    focusStyle = {}
  } = _ref;
  const {
    onSwatchHover
  } = useColor();
  const transparent = color === "transparent";
  const styles = {
    swatch: {
      background: color,
      height: "100%",
      width: "100%",
      cursor: "pointer",
      position: "relative",
      outline: "none",
      ...style,
      ...(focus ? focusStyle : {})
    }
  };
  const handleClick = e => onClick(color, e);
  const handleKeyDown = e => e.keyCode === ENTER && onClick(color, e);
  return React.createElement("div", {
    style: styles.swatch,
    onClick: handleClick,
    title: title,
    tabIndex: 0,
    onKeyDown: handleKeyDown,
    onMouseOver: event => {
      onSwatchHover && onSwatchHover(color, event);
    }
  }, children, transparent && React.createElement(Checkboard, {
    borderRadius: styles.swatch.borderRadius,
    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)"
  }));
};
var Swatch$1 = handleFocus(Swatch);

function AlphaPointer(_ref) {
  let {
    direction
  } = _ref;
  const styles = {
    picker: {
      width: "18px",
      height: "18px",
      borderRadius: "50%",
      transform: direction === "vertical" ? "translate(-3px, -9px)" : "translate(-9px, -1px)",
      backgroundColor: "rgb(248, 248, 248)",
      boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.37)"
    }
  };
  return React.createElement("div", {
    style: styles.picker
  });
}

function AlphaPicker(_ref) {
  let {
    width = "316px",
    height = "16px",
    direction = "horizontal",
    style,
    renderers,
    pointer = AlphaPointer,
    className = ""
  } = _ref;
  const {
    colors: currentColors,
    changeColor
  } = useColor();
  const {
    hsl,
    rgb
  } = currentColors;
  const styles = {
    picker: {
      position: "relative",
      width,
      height
    },
    alpha: {
      borderRadius: "2px",
      ...style
    }
  };
  return React.createElement("div", {
    style: styles.picker,
    className: `alpha-picker ${className}`
  }, React.createElement(Alpha$2, _extends({}, styles.alpha, {
    rgb: rgb,
    hsl: hsl,
    pointer: pointer,
    renderers: renderers,
    onChange: changeColor,
    direction: direction
  })));
}
var Alpha = withColorProvider(AlphaPicker);

const BlockSwatches = _ref => {
  let {
    colors,
    onClick
  } = _ref;
  const styles = {
    swatches: {
      marginRight: "-10px"
    },
    swatch: {
      width: "22px",
      height: "22px",
      float: "left",
      marginRight: "10px",
      marginBottom: "10px",
      borderRadius: "4px"
    },
    clear: {
      clear: "both"
    }
  };
  return React.createElement("div", {
    style: styles.swatches
  }, colors.map(c => React.createElement(Swatch$1, {
    key: c,
    color: c,
    style: styles.swatch,
    onClick: onClick,
    focusStyle: {
      boxShadow: `0 0 4px ${c}`
    }
  })), React.createElement("div", {
    style: styles.clear
  }));
};
var BlockSwatches$1 = BlockSwatches;

const Block = _ref => {
  let {
    colors = ["#D9E3F0", "#F47373", "#697689", "#37D67A", "#2CCCE4", "#555555", "#dce775", "#ff8a65", "#ba68c8"],
    width = 170,
    triangle = "top",
    styles: passedStyles = {},
    className = ""
  } = _ref;
  const {
    colors: currentColors,
    changeColor
  } = useColor();
  const {
    hex
  } = currentColors;
  const transparent = hex === "transparent";
  const handleChange = (hexCode, e) => {
    isValidHex(hexCode) && changeColor({
      hex: hexCode,
      source: "hex"
    }, e);
  };
  const styles = merge({
    card: {
      width,
      background: "#fff",
      boxShadow: "0 1px rgba(0,0,0,.1)",
      borderRadius: "6px",
      position: "relative"
    },
    head: {
      height: "110px",
      background: hex,
      borderRadius: "6px 6px 0 0",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      position: "relative"
    },
    body: {
      padding: "10px"
    },
    label: {
      fontSize: "18px",
      color: getContrastingColor(hex),
      position: "relative"
    },
    triangle: {
      width: "0px",
      height: "0px",
      borderStyle: "solid",
      borderWidth: "0 10px 10px 10px",
      borderColor: `transparent transparent ${hex} transparent`,
      position: "absolute",
      top: "-10px",
      left: "50%",
      marginLeft: "-10px",
      display: triangle === "hide" ? "none" : undefined
    },
    input: {
      width: "100%",
      fontSize: "12px",
      color: "#666",
      border: "0px",
      outline: "none",
      height: "22px",
      boxShadow: "inset 0 0 0 1px #ddd",
      borderRadius: "4px",
      padding: "0 7px",
      boxSizing: "border-box"
    }
  }, passedStyles);
  return React.createElement("div", {
    style: styles.card,
    className: `block-picker ${className}`
  }, React.createElement("div", {
    style: styles.triangle
  }), React.createElement("div", {
    style: styles.head
  }, transparent && React.createElement(Checkboard, {
    borderRadius: "6px 6px 0 0"
  }), React.createElement("div", {
    style: styles.label
  }, hex)), React.createElement("div", {
    style: styles.body
  }, React.createElement(BlockSwatches$1, {
    colors: colors,
    onClick: handleChange
  }), React.createElement(EditableInput$1, {
    style: {
      input: styles.input
    },
    value: hex,
    onChange: handleChange
  })));
};
var Block$1 = withColorProvider(Block);

var UnfoldMoreHorizontalIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDE4LjE3TDguODMsMTVMNy40MiwxNi40MUwxMiwyMUwxNi41OSwxNi40MUwxNS4xNywxNU0xMiw1LjgzTDE1LjE3LDlMMTYuNTgsNy41OUwxMiwzTDcuNDEsNy41OUw4LjgzLDlMMTIsNS44M1oiIC8+PC9zdmc+';

function ChromeFields(_ref) {
  let {
    view: defaultView = "hex",
    ...props
  } = _ref;
  const [view, setView] = React.useState(defaultView);
  React.useEffect(() => {
    if (props.hsl.a !== 1 && defaultView === "hex") {
      setView("rgb");
    }
  }, []);
  React.useEffect(() => {
    if (props.hsl.a !== 1 && view === "hex") {
      setView("rgb");
    }
  }, [props]);
  function toggleViews() {
    if (view === "hex") {
      setView("rgb");
    } else if (view === "rgb") {
      setView("hsl");
    } else if (view === "hsl") {
      if (props.hsl.a === 1) {
        setView("hex");
      } else {
        setView("rgb");
      }
    }
  }
  function handleChange(data, e) {
    if (data.hex) {
      isValidHex(data.hex) && props.onChange({
        hex: data.hex,
        source: "hex"
      }, e);
    } else if (data.r || data.g || data.b) {
      props.onChange({
        r: data.r || props.rgb.r,
        g: data.g || props.rgb.g,
        b: data.b || props.rgb.b,
        source: "rgb"
      }, e);
    } else if (data.a) {
      if (data.a < 0) {
        data.a = 0;
      } else if (data.a > 1) {
        data.a = 1;
      }
      props.onChange({
        h: props.hsl.h,
        s: props.hsl.s,
        l: props.hsl.l,
        a: Math.round(data.a * 100) / 100,
        source: "rgb"
      }, e);
    } else if (data.h || data.s || data.l) {
      if (typeof data.s === "string" && data.s.includes("%")) {
        data.s = data.s.replace("%", "");
      }
      if (typeof data.l === "string" && data.l.includes("%")) {
        data.l = data.l.replace("%", "");
      }

      if (data.s == 1) {
        data.s = 0.01;
      } else if (data.l == 1) {
        data.l = 0.01;
      }
      props.onChange({
        h: data.h || props.hsl.h,
        s: Number(data.s !== undefined ? data.s : props.hsl.s),
        l: Number(data.l !== undefined ? data.l : props.hsl.l),
        source: "hsl"
      }, e);
    }
  }
  function showHighlight(e) {
    e.currentTarget.style.background = "#eee";
  }
  function hideHighlight(e) {
    e.currentTarget.style.background = "transparent";
  }
  const styles = {
    wrap: {
      paddingTop: "16px",
      display: "flex"
    },
    fields: {
      flex: "1",
      display: "flex",
      marginLeft: "-6px"
    },
    field: {
      paddingLeft: "6px",
      width: "100%"
    },
    alpha: {
      paddingLeft: "6px",
      width: "100%",
      display: props.disableAlpha ? "none" : undefined
    },
    toggle: {
      width: "32px",
      textAlign: "right",
      position: "relative"
    },
    icon: {
      marginRight: "-4px",
      marginTop: "12px",
      cursor: "pointer",
      position: "relative"
    },
    iconHighlight: {
      position: "absolute",
      width: "24px",
      height: "28px",
      background: "#eee",
      borderRadius: "4px",
      top: "10px",
      left: "12px",
      display: "none"
    },
    input: {
      fontSize: "11px",
      color: "#333",
      width: "100%",
      borderRadius: "2px",
      border: "none",
      boxShadow: "inset 0 0 0 1px #dadada",
      height: "21px",
      textAlign: "center"
    },
    label: {
      textTransform: "uppercase",
      fontSize: "11px",
      lineHeight: "11px",
      color: "#969696",
      textAlign: "center",
      display: "block",
      marginTop: "12px"
    },
    svg: {
      fill: "#333",
      width: "24px",
      height: "24px",
      border: "1px transparent solid",
      borderRadius: "5px"
    }
  };
  let fields;
  if (view === "hex") {
    fields = React.createElement("div", {
      style: styles.fields,
      className: "flexbox-fix"
    }, React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "hex",
      value: props.hex,
      onChange: handleChange
    })));
  } else if (view === "rgb") {
    fields = React.createElement("div", {
      style: styles.fields,
      className: "flexbox-fix"
    }, React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "r",
      value: props.rgb.r,
      onChange: handleChange
    })), React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "g",
      value: props.rgb.g,
      onChange: handleChange
    })), React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "b",
      value: props.rgb.b,
      onChange: handleChange
    })), React.createElement("div", {
      style: styles.alpha
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "a",
      value: props.rgb.a,
      arrowOffset: 0.01,
      onChange: handleChange
    })));
  } else if (view === "hsl") {
    fields = React.createElement("div", {
      style: styles.fields,
      className: "flexbox-fix"
    }, React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "h",
      value: Math.round(props.hsl.h),
      onChange: handleChange
    })), React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "s",
      value: `${Math.round(props.hsl.s * 100)}%`,
      onChange: handleChange
    })), React.createElement("div", {
      style: styles.field
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "l",
      value: `${Math.round(props.hsl.l * 100)}%`,
      onChange: handleChange
    })), React.createElement("div", {
      style: styles.alpha
    }, React.createElement(EditableInput$1, {
      style: {
        input: styles.input,
        label: styles.label
      },
      label: "a",
      value: props.hsl.a,
      arrowOffset: 0.01,
      onChange: handleChange
    })));
  }
  return React.createElement("div", {
    style: styles.wrap,
    className: "flexbox-fix"
  }, fields, React.createElement("div", {
    style: styles.toggle
  }, React.createElement("div", {
    style: styles.icon,
    onClick: toggleViews
  }, React.createElement("img", {
    width: "24",
    height: "24",
    onMouseOver: showHighlight,
    onMouseEnter: showHighlight,
    onMouseOut: hideHighlight,
    src: UnfoldMoreHorizontalIcon
  }))));
}

function ChromePointer() {
  return React.createElement("div", {
    style: {
      width: "12px",
      height: "12px",
      borderRadius: "6px",
      transform: "translate(-6px, -1px)",
      backgroundColor: "rgb(248, 248, 248)",
      boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.37)"
    }
  });
}

function ChromePointerCircle() {
  return React.createElement("div", {
    style: {
      width: "12px",
      height: "12px",
      borderRadius: "6px",
      boxShadow: "inset 0 0 0 1px #fff",
      transform: "translate(-6px, -6px)"
    }
  });
}

const Chrome = _ref => {
  let {
    width = 225,
    disableAlpha = false,
    renderers,
    styles: passedStyles = {},
    className = "",
    defaultView
  } = _ref;
  const {
    colors,
    changeColor
  } = useColor();
  const {
    rgb,
    hex,
    hsl,
    hsv
  } = colors;
  const styles = merge({
    picker: {
      width,
      background: "#fff",
      borderRadius: "2px",
      boxShadow: "0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)",
      boxSizing: "initial",
      fontFamily: "Menlo"
    },
    saturation: {
      width: "100%",
      paddingBottom: "55%",
      position: "relative",
      borderRadius: "2px 2px 0 0",
      overflow: "hidden"
    },
    Saturation: {
      borderRadius: "2px 2px 0 0"
    },
    body: {
      padding: "16px 16px 12px"
    },
    controls: {
      display: "flex"
    },
    color: {
      width: disableAlpha ? "22px" : "32px"
    },
    swatch: {
      marginTop: disableAlpha ? "0px" : "6px",
      width: disableAlpha ? "10px" : "16px",
      height: disableAlpha ? "10px" : "16px",
      borderRadius: "8px",
      position: "relative",
      overflow: "hidden"
    },
    active: {
      position: "absolute",
      inset: "0px",
      borderRadius: "8px",
      boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)",
      background: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`,
      zIndex: "2"
    },
    toggles: {
      flex: "1"
    },
    hue: {
      height: "10px",
      position: "relative",
      marginBottom: disableAlpha ? "0px" : "8px"
    },
    Hue: {
      borderRadius: "2px"
    },
    alpha: {
      height: "10px",
      position: "relative",
      display: disableAlpha ? "none" : undefined
    },
    Alpha: {
      borderRadius: "2px"
    }
  }, passedStyles);
  return React.createElement("div", {
    style: styles.picker,
    className: `chrome-picker ${className}`
  }, React.createElement("div", {
    style: styles.saturation
  }, React.createElement(Saturation, {
    style: styles.Saturation,
    hsl: hsl,
    hsv: hsv,
    pointer: React.createElement(ChromePointerCircle, null),
    onChange: changeColor
  })), React.createElement("div", {
    style: styles.body
  }, React.createElement("div", {
    style: styles.controls,
    className: "flexbox-fix"
  }, React.createElement("div", {
    style: styles.color
  }, React.createElement("div", {
    style: styles.swatch
  }, React.createElement("div", {
    style: styles.active
  }), React.createElement(Checkboard, {
    renderers: renderers
  }))), React.createElement("div", {
    style: styles.toggles
  }, React.createElement("div", {
    style: styles.hue
  }, React.createElement(Hue$2, {
    style: styles.Hue,
    hsl: hsl,
    pointer: ChromePointer,
    onChange: changeColor
  })), React.createElement("div", {
    style: styles.alpha
  }, React.createElement(Alpha$2, {
    style: styles.Alpha,
    rgb: rgb,
    hsl: hsl,
    pointer: ChromePointer,
    renderers: renderers,
    onChange: changeColor
  })))), React.createElement(ChromeFields, {
    rgb: rgb,
    hsl: hsl,
    hex: hex,
    view: defaultView,
    onChange: changeColor
  })));
};
var Chrome$1 = withColorProvider(Chrome);

const withHover = Component => props => {
  const [hover, setHover] = React.useState(false);
  return React.createElement("div", {
    onMouseOver: () => {
      setHover(true);
    },
    onMouseOut: () => {
      setHover(false);
    }
  }, React.createElement(Component, _extends({}, props, {
    hover: hover
  })));
};

const CircleSwatch = _ref => {
  let {
    color,
    onClick,
    hover,
    active,
    circleSize = 28,
    circleSpacing = 14
  } = _ref;
  const styles = {
    swatch: {
      width: circleSize,
      height: circleSize,
      marginRight: circleSpacing,
      marginBottom: circleSpacing,
      transform: "scale(1)",
      transition: "100ms transform ease"
    },
    Swatch: {
      borderRadius: "50%",
      background: "transparent",
      boxShadow: active ? `inset 0 0 0 3px ${color}` : `inset 0 0 0 ${circleSize / 2 + 1}px ${color}`,
      transition: "100ms box-shadow ease",
      transform: hover ? "scale(1.2)" : undefined
    }
  };
  return React.createElement("div", {
    style: styles.swatch
  }, React.createElement(Swatch$1, {
    style: styles.Swatch,
    color: color,
    onClick: onClick,
    focusStyle: {
      boxShadow: `${styles.Swatch.boxShadow}, 0 0 5px ${color}`
    }
  }));
};
var CircleSwatch$1 = withHover(CircleSwatch);

function Circle(_ref) {
  let {
    width = 252,
    colors = ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#607D8B"],
    circleSize = 28,
    styles: passedStyles = {},
    circleSpacing = 14,
    className = ""
  } = _ref;
  const {
    colors: currentColors,
    changeColor
  } = useColor();
  const {
    hex
  } = currentColors;
  const styles = merge({
    card: {
      width,
      display: "flex",
      flexWrap: "wrap",
      marginRight: -circleSpacing,
      marginBottom: -circleSpacing
    }
  }, passedStyles);
  const handleChange = (hexCode, e) => changeColor({
    hex: hexCode,
    source: "hex"
  }, e);
  return React.createElement("div", {
    style: styles.card,
    className: `circle-picker ${className}`
  }, colors.map(c => React.createElement(CircleSwatch$1, {
    key: c,
    color: c,
    onClick: handleChange,
    active: hex === c.toLowerCase(),
    circleSize: circleSize,
    circleSpacing: circleSpacing
  })));
}
var Circle$1 = withColorProvider(Circle);

function CompactColor(_ref) {
  let {
    color,
    onClick = () => {},
    active
  } = _ref;
  const styles = {
    color: {
      background: color,
      width: "15px",
      height: "15px",
      float: "left",
      marginRight: "5px",
      marginBottom: "5px",
      position: "relative",
      cursor: "pointer",
      boxShadow: color === "#FFFFFF" ? "inset 0 0 0 1px #ddd" : undefined
    },
    dot: {
      position: "absolute",
      inset: "5px",
      background: color === "#FFFFFF" ? "#000" : color === "transparent" ? "#000" : getContrastingColor(color),
      borderRadius: "50%",
      opacity: active ? 1 : 0
    }
  };
  return React.createElement(Swatch$1, {
    style: styles.color,
    color: color,
    onClick: onClick,
    focusStyle: {
      boxShadow: `0 0 4px ${color}`
    }
  }, React.createElement("div", {
    style: styles.dot
  }));
}

function CompactFields(_ref) {
  let {
    hex,
    rgb,
    onChange
  } = _ref;
  const styles = {
    fields: {
      display: "flex",
      paddingBottom: "6px",
      paddingRight: "5px",
      position: "relative"
    },
    active: {
      position: "absolute",
      top: "6px",
      left: "5px",
      height: "9px",
      width: "9px",
      background: hex
    },
    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"
    }
  };
  const handleChange = (data, e) => {
    if (data.r || data.g || data.b) {
      onChange({
        r: data.r || rgb.r,
        g: data.g || rgb.g,
        b: data.b || rgb.b,
        source: "rgb"
      }, e);
    } else {
      onChange({
        hex: data.hex,
        source: "hex"
      }, e);
    }
  };
  return React.createElement("div", {
    style: styles.fields,
    className: "flexbox-fix"
  }, React.createElement("div", {
    style: styles.active
  }), React.createElement(EditableInput$1, {
    style: {
      wrap: styles.HEXwrap,
      input: styles.HEXinput,
      label: styles.HEXlabel
    },
    label: "hex",
    value: hex,
    onChange: handleChange
  }), React.createElement(EditableInput$1, {
    style: {
      wrap: styles.RGBwrap,
      input: styles.RGBinput,
      label: styles.RGBlabel
    },
    label: "r",
    value: rgb.r,
    onChange: handleChange
  }), React.createElement(EditableInput$1, {
    style: {
      wrap: styles.RGBwrap,
      input: styles.RGBinput,
      label: styles.RGBlabel
    },
    label: "g",
    value: rgb.g,
    onChange: handleChange
  }), React.createElement(EditableInput$1, {
    style: {
      wrap: styles.RGBwrap,
      input: styles.RGBinput,
      label: styles.RGBlabel
    },
    label: "b",
    value: rgb.b,
    onChange: handleChange
  }));
}

function Compact(_ref) {
  let {
    colors = ["#4D4D4D", "#999999", "#FFFFFF", "#F44E3B", "#FE9200", "#FCDC00", "#DBDF00", "#A4DD00", "#68CCCA", "#73D8FF", "#AEA1FF", "#FDA1FF", "#333333", "#808080", "#cccccc", "#D33115", "#E27300", "#FCC400", "#B0BC00", "#68BC00", "#16A5A5", "#009CE0", "#7B64FF", "#FA28FF", "#000000", "#666666", "#B3B3B3", "#9F0500", "#C45100", "#FB9E00", "#808900", "#194D33", "#0C797D", "#0062B1", "#653294", "#AB149E"],
    styles: passedStyles = {},
    className = ""
  } = _ref;
  const {
    colors: currentColors,
    changeColor
  } = useColor();
  const {
    rgb,
    hex
  } = currentColors;
  const styles = merge({
    Compact: {
      background: "#f6f6f6",
      borderRadius: "4px"
    },
    compact: {
      paddingTop: "5px",
      paddingLeft: "5px",
      boxSizing: "initial",
      width: "240px"
    },
    clear: {
      clear: "both"
    }
  }, passedStyles);
  const handleChange = (data, e) => {
    if (data.hex) {
      isValidHex(data.hex) && changeColor({
        hex: data.hex,
        source: "hex"
      }, e);
    } else {
      changeColor(data, e);
    }
  };
  return React.createElement(Raised, {
    styles: passedStyles
  }, React.createElement("div", {
    style: styles.compact,
    className: `compact-picker ${className}`
  }, React.createElement("div", null, colors.map(c => React.createElement(CompactColor, {
    key: c,
    color: c,
    active: c.toLowerCase() === hex,
    onClick: handleChange
  })), React.createElement("div", {
    style: styles.clear
  })), React.createElement(CompactFields, {
    hex: hex,
    rgb: rgb,
    onChange: handleChange
  })));
}
var Compact$1 = withColorProvider(Compact);

function GithubSwatch(_ref) {
  let {
    hover,
    color,
    onClick
  } = _ref;
  const hoverSwatch = {
    position: "relative",
    zIndex: "2",
    outline: "2px solid #fff",
    boxShadow: "0 0 5px 2px rgba(0,0,0,0.25)"
  };
  const styles = {
    swatch: {
      width: "25px",
      height: "25px",
      fontSize: "0"
    }
  };
  if (hover) {
    styles.swatch = {
      ...styles.swatch,
      ...hoverSwatch
    };
  }
  return React.createElement("div", {
    style: styles.swatch
  }, React.createElement(Swatch$1, {
    color: color,
    onClick: onClick,
    focusStyle: hoverSwatch
  }));
}
var GithubSwatch$1 = withHover(GithubSwatch);

function Github(_ref) {
  let {
    width = 200,
    colors = ["#B80000", "#DB3E00", "#FCCB00", "#008B02", "#006B76", "#1273DE", "#004DCF", "#5300EB", "#EB9694", "#FAD0C3", "#FEF3BD", "#C1E1C5", "#BEDADC", "#C4DEF6", "#BED3F3", "#D4C4FB"],
    triangle = "top-left",
    styles: passedStyles = {},
    className = ""
  } = _ref;
  const {
    changeColor
  } = useColor();
  const styles = merge({
    card: {
      width,
      background: "#fff",
      border: "1px solid rgba(0,0,0,0.2)",
      boxShadow: "0 3px 12px rgba(0,0,0,0.15)",
      borderRadius: "4px",
      position: "relative",
      padding: "5px",
      display: "flex",
      flexWrap: "wrap"
    },
    triangle: {
      position: "absolute",
      border: "7px solid transparent",
      borderBottomColor: "#fff",
      display: triangle === "hide" ? "none" : undefined,
      top: triangle === "top-left" || triangle === "top-right" ? "-14px" : "37px",
      left: triangle === "top-left" || triangle === "bottom-left" ? "10px" : undefined,
      right: triangle === "top-right" || triangle === "bottom-right" ? "10px" : undefined,
      transform: triangle === "bottom-left" || triangle === "bottom-right" ? "rotate(180deg)" : undefined
    },
    triangleShadow: {
      position: "absol