@ikas/core 1.0.6 → 1.0.8

package/dist/index91.js

@@ -1,80 +1,186 @@
 import t from "react";
-import e from "./index161.js";
-import B from "./index151.js";
-import W from "./index165.js";
-import Y from "./index162.js";
-import { red as o, pink as a, purple as i, deepPurple as l, indigo as n, blue as s, lightBlue as p, cyan as m, teal as c, green as S, lightGreen as h, lime as d, yellow as g, amber as y, orange as u, deepOrange as f, brown as w, blueGrey as v } from "./index166.js";
-import "./index152.js";
-import "./index153.js";
-import "./index154.js";
-import "./index155.js";
-import { Raised as q } from "./index156.js";
-import "./index157.js";
-import { ColorWrap as z } from "./index158.js";
-import "./index159.js";
-import { SwatchesGroup as A } from "./index184.js";
-var C = function(r) {
-  var O = r.width, k = r.height, D = r.onChange, N = r.onSwatchHover, T = r.colors, G = r.hex, E = r.styles, H = E === void 0 ? {} : E, F = r.className, P = F === void 0 ? "" : F, b = B(Y({
-    default: {
-      picker: {
-        width: O,
-        height: k
-      },
-      overflow: {
-        height: k,
-        overflowY: "scroll"
-      },
-      body: {
-        padding: "16px 0 6px 16px"
-      },
-      clear: {
-        clear: "both"
-      }
+import l from "./index153.js";
+import m from "./index143.js";
+import d from "./index154.js";
+import "./index144.js";
+import "./index145.js";
+import "./index146.js";
+import { Hue as u } from "./index147.js";
+import "./index148.js";
+import { Saturation as x } from "./index149.js";
+import { ColorWrap as b } from "./index150.js";
+import "./index151.js";
+import { PhotoshopPicker as y } from "./index167.js";
+import { PhotoshopPointerCircle as g } from "./index168.js";
+import { PhotoshopPointerCircle as v } from "./index169.js";
+import { PhotoshopButton as h } from "./index170.js";
+import { PhotoshopPreviews as w } from "./index171.js";
+var P = /* @__PURE__ */ (function() {
+  function o(e, p) {
+    for (var r = 0; r < p.length; r++) {
+      var i = p[r];
+      i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, i.key, i);
     }
-  }, H)), R = function($, j) {
-    return D({ hex: $, source: "hex" }, j);
+  }
+  return function(e, p, r) {
+    return p && o(e.prototype, p), r && o(e, r), e;
   };
-  return t.createElement(
-    "div",
-    { style: b.picker, className: "swatches-picker " + P },
-    t.createElement(
-      q,
-      null,
-      t.createElement(
+})();
+function E(o, e) {
+  if (!(o instanceof e))
+    throw new TypeError("Cannot call a class as a function");
+}
+function _(o, e) {
+  if (!o)
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e && (typeof e == "object" || typeof e == "function") ? e : o;
+}
+function C(o, e) {
+  if (typeof e != "function" && e !== null)
+    throw new TypeError("Super expression must either be null or a function, not " + typeof e);
+  o.prototype = Object.create(e && e.prototype, { constructor: { value: o, enumerable: !1, writable: !0, configurable: !0 } }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(o, e) : o.__proto__ = e);
+}
+var a = (function(o) {
+  C(e, o);
+  function e(p) {
+    E(this, e);
+    var r = _(this, (e.__proto__ || Object.getPrototypeOf(e)).call(this));
+    return r.state = {
+      currentColor: p.hex
+    }, r;
+  }
+  return P(e, [{
+    key: "render",
+    value: function() {
+      var r = this.props, i = r.styles, c = i === void 0 ? {} : i, s = r.className, f = s === void 0 ? "" : s, n = m(d({
+        default: {
+          picker: {
+            background: "#DCDCDC",
+            borderRadius: "4px",
+            boxShadow: "0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)",
+            boxSizing: "initial",
+            width: "513px"
+          },
+          head: {
+            backgroundImage: "linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)",
+            borderBottom: "1px solid #B1B1B1",
+            boxShadow: "inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)",
+            height: "23px",
+            lineHeight: "24px",
+            borderRadius: "4px 4px 0 0",
+            fontSize: "13px",
+            color: "#4D4D4D",
+            textAlign: "center"
+          },
+          body: {
+            padding: "15px 15px 0",
+            display: "flex"
+          },
+          saturation: {
+            width: "256px",
+            height: "256px",
+            position: "relative",
+            border: "2px solid #B3B3B3",
+            borderBottom: "2px solid #F0F0F0",
+            overflow: "hidden"
+          },
+          hue: {
+            position: "relative",
+            height: "256px",
+            width: "19px",
+            marginLeft: "10px",
+            border: "2px solid #B3B3B3",
+            borderBottom: "2px solid #F0F0F0"
+          },
+          controls: {
+            width: "180px",
+            marginLeft: "10px"
+          },
+          top: {
+            display: "flex"
+          },
+          previews: {
+            width: "60px"
+          },
+          actions: {
+            flex: "1",
+            marginLeft: "20px"
+          }
+        }
+      }, c));
+      return t.createElement(
         "div",
-        { style: b.overflow },
+        { style: n.picker, className: "photoshop-picker " + f },
         t.createElement(
           "div",
-          { style: b.body },
-          W(T, function(x) {
-            return t.createElement(A, {
-              key: x.toString(),
-              group: x,
-              active: G,
-              onClick: R,
-              onSwatchHover: N
-            });
-          }),
-          t.createElement("div", { style: b.clear })
+          { style: n.head },
+          this.props.header
+        ),
+        t.createElement(
+          "div",
+          { style: n.body, className: "flexbox-fix" },
+          t.createElement(
+            "div",
+            { style: n.saturation },
+            t.createElement(x, {
+              hsl: this.props.hsl,
+              hsv: this.props.hsv,
+              pointer: g,
+              onChange: this.props.onChange
+            })
+          ),
+          t.createElement(
+            "div",
+            { style: n.hue },
+            t.createElement(u, {
+              direction: "vertical",
+              hsl: this.props.hsl,
+              pointer: v,
+              onChange: this.props.onChange
+            })
+          ),
+          t.createElement(
+            "div",
+            { style: n.controls },
+            t.createElement(
+              "div",
+              { style: n.top, className: "flexbox-fix" },
+              t.createElement(
+                "div",
+                { style: n.previews },
+                t.createElement(w, {
+                  rgb: this.props.rgb,
+                  currentColor: this.state.currentColor
+                })
+              ),
+              t.createElement(
+                "div",
+                { style: n.actions },
+                t.createElement(h, { label: "OK", onClick: this.props.onAccept, active: !0 }),
+                t.createElement(h, { label: "Cancel", onClick: this.props.onCancel }),
+                t.createElement(y, {
+                  onChange: this.props.onChange,
+                  rgb: this.props.rgb,
+                  hsv: this.props.hsv,
+                  hex: this.props.hex
+                })
+              )
+            )
+          )
         )
-      )
-    )
-  );
-};
-C.propTypes = {
-  width: e.oneOfType([e.string, e.number]),
-  height: e.oneOfType([e.string, e.number]),
-  colors: e.arrayOf(e.arrayOf(e.string)),
-  styles: e.object
-  /* eslint-disable max-len */
+      );
+    }
+  }]), e;
+})(t.Component);
+a.propTypes = {
+  header: l.string,
+  styles: l.object
 };
-C.defaultProps = {
-  width: 320,
-  height: 240,
-  colors: [[o[900], o[700], o[500], o[300], o[100]], [a[900], a[700], a[500], a[300], a[100]], [i[900], i[700], i[500], i[300], i[100]], [l[900], l[700], l[500], l[300], l[100]], [n[900], n[700], n[500], n[300], n[100]], [s[900], s[700], s[500], s[300], s[100]], [p[900], p[700], p[500], p[300], p[100]], [m[900], m[700], m[500], m[300], m[100]], [c[900], c[700], c[500], c[300], c[100]], ["#194D33", S[700], S[500], S[300], S[100]], [h[900], h[700], h[500], h[300], h[100]], [d[900], d[700], d[500], d[300], d[100]], [g[900], g[700], g[500], g[300], g[100]], [y[900], y[700], y[500], y[300], y[100]], [u[900], u[700], u[500], u[300], u[100]], [f[900], f[700], f[500], f[300], f[100]], [w[900], w[700], w[500], w[300], w[100]], [v[900], v[700], v[500], v[300], v[100]], ["#000000", "#525252", "#969696", "#D9D9D9", "#FFFFFF"]],
+a.defaultProps = {
+  header: "Color Picker",
   styles: {}
 };
-z(C);
+b(a);
 export {
-  C as Swatches
+  a as Photoshop
 };

package/dist/index92.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),o=require("./index161.cjs"),w=require("./index151.cjs"),S=require("./index165.cjs"),m=require("./index162.cjs"),v=require("./index163.cjs");require("./index152.cjs");require("./index153.cjs");const C=require("./index154.cjs");require("./index155.cjs");require("./index156.cjs");require("./index157.cjs");const q=require("./index158.cjs"),E=require("./index159.cjs");var n=function(e){var h=e.onChange,x=e.onSwatchHover,c=e.hex,g=e.colors,u=e.width,l=e.triangle,p=e.styles,f=p===void 0?{}:p,d=e.className,b=d===void 0?"":d,t=w.default(m({default:{card:{width:u,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"}}},f),{"hide-triangle":l==="hide","top-left-triangle":l==="top-left","top-right-triangle":l==="top-right"}),s=function(i,y){v.isValidHex(i)&&h({hex:i,source:"hex"},y)};return r.createElement("div",{style:t.card,className:"twitter-picker "+b},r.createElement("div",{style:t.triangleShadow}),r.createElement("div",{style:t.triangle}),r.createElement("div",{style:t.body},S(g,function(a,i){return r.createElement(E.default,{key:i,color:a,hex:a,style:t.swatch,onClick:s,onHover:x,focusStyle:{boxShadow:"0 0 4px "+a}})}),r.createElement("div",{style:t.hash},"#"),r.createElement(C.EditableInput,{label:null,style:{input:t.input},value:c.replace("#",""),onChange:s}),r.createElement("div",{style:t.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:{}};q.ColorWrap(n);exports.Twitter=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=require("./index153.cjs"),E=require("./index143.cjs"),C=require("./index154.cjs"),S=require("./index144.cjs"),w=require("./index145.cjs");require("./index146.cjs");const A=require("./index147.cjs");require("./index148.cjs");const f=require("./index149.cjs"),k=require("./index150.cjs");require("./index151.cjs");const q=require("./index172.cjs"),F=require("./index173.cjs");var B=Object.assign||function(p){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var a in s)Object.prototype.hasOwnProperty.call(s,a)&&(p[a]=s[a])}return p},n=function(e){var s=e.width,a=e.rgb,x=e.hex,g=e.hsv,l=e.hsl,i=e.onChange,b=e.onSwatchHover,h=e.disableAlpha,v=e.presetColors,m=e.renderers,d=e.styles,c=d===void 0?{}:d,u=e.className,y=u===void 0?"":u,r=E.default(C({default:B({picker:{width:s,padding:"10px 10px 0",boxSizing:"initial",background:"#fff",borderRadius:"4px",boxShadow:"0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"},saturation:{width:"100%",paddingBottom:"75%",position:"relative",overflow:"hidden"},Saturation:{radius:"3px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},controls:{display:"flex"},sliders:{padding:"4px 0",flex:"1"},color:{width:"24px",height:"24px",position:"relative",marginTop:"4px",marginLeft:"4px",borderRadius:"3px"},activeColor:{absolute:"0px 0px 0px 0px",borderRadius:"2px",background:"rgba("+a.r+","+a.g+","+a.b+","+a.a+")",boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},hue:{position:"relative",height:"10px",overflow:"hidden"},Hue:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},alpha:{position:"relative",height:"10px",marginTop:"4px",overflow:"hidden"},Alpha:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"}},c),disableAlpha:{color:{height:"10px"},hue:{height:"10px"},alpha:{display:"none"}}},c),{disableAlpha:h});return t.createElement("div",{style:r.picker,className:"sketch-picker "+y},t.createElement("div",{style:r.saturation},t.createElement(f.Saturation,{style:r.Saturation,hsl:l,hsv:g,onChange:i})),t.createElement("div",{style:r.controls,className:"flexbox-fix"},t.createElement("div",{style:r.sliders},t.createElement("div",{style:r.hue},t.createElement(A.Hue,{style:r.Hue,hsl:l,onChange:i})),t.createElement("div",{style:r.alpha},t.createElement(S.Alpha,{style:r.Alpha,rgb:a,hsl:l,renderers:m,onChange:i}))),t.createElement("div",{style:r.color},t.createElement(w.Checkboard,null),t.createElement("div",{style:r.activeColor}))),t.createElement(q.SketchFields,{rgb:a,hsl:l,hex:x,onChange:i,disableAlpha:h}),t.createElement(F.SketchPresetColors,{colors:v,onClick:i,onSwatchHover:b}))};n.propTypes={disableAlpha:o.bool,width:o.oneOfType([o.string,o.number]),styles:o.object};n.defaultProps={disableAlpha:!1,width:200,styles:{},presetColors:["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"]};k.ColorWrap(n);exports.Sketch=n;

package/dist/index92.js

@@ -1,173 +1,171 @@
-import r from "react";
-import o from "./index161.js";
-import y from "./index151.js";
-import w from "./index165.js";
-import S from "./index162.js";
-import { isValidHex as C } from "./index163.js";
-import "./index152.js";
-import "./index153.js";
-import { EditableInput as v } from "./index154.js";
-import "./index155.js";
-import "./index156.js";
-import "./index157.js";
-import { ColorWrap as E } from "./index158.js";
-import F from "./index159.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,
+import t from "react";
+import i from "./index153.js";
+import y from "./index143.js";
+import E from "./index154.js";
+import { Alpha as w } from "./index144.js";
+import { Checkboard as C } from "./index145.js";
+import "./index146.js";
+import { Hue as A } from "./index147.js";
+import "./index148.js";
+import { Saturation as S } from "./index149.js";
+import { ColorWrap as k } from "./index150.js";
+import "./index151.js";
+import { SketchFields as F } from "./index172.js";
+import { SketchPresetColors as B } from "./index173.js";
+var H = Object.assign || function(p) {
+  for (var e = 1; e < arguments.length; e++) {
+    var o = arguments[e];
+    for (var a in o)
+      Object.prototype.hasOwnProperty.call(o, a) && (p[a] = o[a]);
+  }
+  return p;
+}, n = function(e) {
+  var o = e.width, a = e.rgb, x = e.hex, g = e.hsv, l = e.hsl, s = e.onChange, b = e.onSwatchHover, h = e.disableAlpha, u = e.presetColors, v = e.renderers, d = e.styles, m = d === void 0 ? {} : d, c = e.className, f = c === void 0 ? "" : c, r = y(E({
+    default: H({
+      picker: {
+        width: o,
+        padding: "10px 10px 0",
+        boxSizing: "initial",
         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"
+        boxShadow: "0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"
       },
-      body: {
-        padding: "15px 9px 9px 15px"
+      saturation: {
+        width: "100%",
+        paddingBottom: "75%",
+        position: "relative",
+        overflow: "hidden"
       },
-      label: {
-        fontSize: "18px",
-        color: "#fff"
+      Saturation: {
+        radius: "3px",
+        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
       },
-      triangle: {
-        width: "0px",
-        height: "0px",
-        borderStyle: "solid",
-        borderWidth: "0 9px 10px 9px",
-        borderColor: "transparent transparent #fff transparent",
-        position: "absolute"
+      controls: {
+        display: "flex"
       },
-      triangleShadow: {
-        width: "0px",
-        height: "0px",
-        borderStyle: "solid",
-        borderWidth: "0 9px 10px 9px",
-        borderColor: "transparent transparent rgba(0,0,0,.1) transparent",
-        position: "absolute"
+      sliders: {
+        padding: "4px 0",
+        flex: "1"
       },
-      hash: {
-        background: "#F0F0F0",
-        height: "30px",
-        width: "30px",
-        borderRadius: "4px 0 0 4px",
-        float: "left",
-        color: "#98A1A4",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
+      color: {
+        width: "24px",
+        height: "24px",
+        position: "relative",
+        marginTop: "4px",
+        marginLeft: "4px",
+        borderRadius: "3px"
       },
-      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"
+      activeColor: {
+        absolute: "0px 0px 0px 0px",
+        borderRadius: "2px",
+        background: "rgba(" + a.r + "," + a.g + "," + a.b + "," + a.a + ")",
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
       },
-      swatch: {
-        width: "30px",
-        height: "30px",
-        float: "left",
-        borderRadius: "4px",
-        margin: "0 6px 6px 0"
+      hue: {
+        position: "relative",
+        height: "10px",
+        overflow: "hidden"
       },
-      clear: {
-        clear: "both"
-      }
-    },
-    "hide-triangle": {
-      triangle: {
-        display: "none"
+      Hue: {
+        radius: "2px",
+        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
       },
-      triangleShadow: {
-        display: "none"
-      }
-    },
-    "top-left-triangle": {
-      triangle: {
-        top: "-10px",
-        left: "12px"
+      alpha: {
+        position: "relative",
+        height: "10px",
+        marginTop: "4px",
+        overflow: "hidden"
       },
-      triangleShadow: {
-        top: "-11px",
-        left: "12px"
+      Alpha: {
+        radius: "2px",
+        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
       }
-    },
-    "top-right-triangle": {
-      triangle: {
-        top: "-10px",
-        right: "12px"
+    }, m),
+    disableAlpha: {
+      color: {
+        height: "10px"
+      },
+      hue: {
+        height: "10px"
       },
-      triangleShadow: {
-        top: "-11px",
-        right: "12px"
+      alpha: {
+        display: "none"
       }
     }
-  }, 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(
+  }, m), { disableAlpha: h });
+  return t.createElement(
     "div",
-    { style: e.card, className: "twitter-picker " + b },
-    r.createElement("div", { style: e.triangleShadow }),
-    r.createElement("div", { style: e.triangle }),
-    r.createElement(
+    { style: r.picker, className: "sketch-picker " + f },
+    t.createElement(
+      "div",
+      { style: r.saturation },
+      t.createElement(S, {
+        style: r.Saturation,
+        hsl: l,
+        hsv: g,
+        onChange: s
+      })
+    ),
+    t.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(
+      { style: r.controls, className: "flexbox-fix" },
+      t.createElement(
         "div",
-        { style: e.hash },
-        "#"
+        { style: r.sliders },
+        t.createElement(
+          "div",
+          { style: r.hue },
+          t.createElement(A, {
+            style: r.Hue,
+            hsl: l,
+            onChange: s
+          })
+        ),
+        t.createElement(
+          "div",
+          { style: r.alpha },
+          t.createElement(w, {
+            style: r.Alpha,
+            rgb: a,
+            hsl: l,
+            renderers: v,
+            onChange: s
+          })
+        )
       ),
-      r.createElement(v, {
-        label: null,
-        style: { input: e.input },
-        value: g.replace("#", ""),
-        onChange: s
-      }),
-      r.createElement("div", { style: e.clear })
-    )
+      t.createElement(
+        "div",
+        { style: r.color },
+        t.createElement(C, null),
+        t.createElement("div", { style: r.activeColor })
+      )
+    ),
+    t.createElement(F, {
+      rgb: a,
+      hsl: l,
+      hex: x,
+      onChange: s,
+      disableAlpha: h
+    }),
+    t.createElement(B, {
+      colors: u,
+      onClick: s,
+      onSwatchHover: b
+    })
   );
 };
 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
+  disableAlpha: i.bool,
+  width: i.oneOfType([i.string, i.number]),
+  styles: i.object
 };
 n.defaultProps = {
-  width: 276,
-  colors: ["#FF6900", "#FCB900", "#7BDCB5", "#00D084", "#8ED1FC", "#0693E3", "#ABB8C3", "#EB144C", "#F78DA7", "#9900EF"],
-  triangle: "top-left",
-  styles: {}
+  disableAlpha: !1,
+  width: 200,
+  styles: {},
+  presetColors: ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]
 };
-E(n);
+k(n);
 export {
-  n as Twitter
+  n as Sketch
 };

package/dist/index93.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),i=require("./index161.cjs"),b=require("./index151.cjs"),y=require("./index162.cjs");require("./index152.cjs");require("./index153.cjs");require("./index154.cjs");const m=require("./index155.cjs");require("./index156.cjs");const v=require("./index157.cjs"),f=require("./index158.cjs");require("./index159.cjs");const w=require("./index185.cjs"),q=require("./index186.cjs"),C=require("./index187.cjs");var a=function(t){var h=t.width,n=t.onChange,o=t.rgb,l=t.hsl,s=t.hsv,c=t.hex,g=t.header,d=t.styles,u=d===void 0?{}:d,p=t.className,x=p===void 0?"":p,r=b.default(y({default:{picker:{width:h,background:"#fff",border:"1px solid #dfe1e5",boxSizing:"initial",display:"flex",flexWrap:"wrap",borderRadius:"8px 8px 0px 0px"},head:{height:"57px",width:"100%",paddingTop:"16px",paddingBottom:"16px",paddingLeft:"16px",fontSize:"20px",boxSizing:"border-box",fontFamily:"Roboto-Regular,HelveticaNeue,Arial,sans-serif"},saturation:{width:"70%",padding:"0px",position:"relative",overflow:"hidden"},swatch:{width:"30%",height:"228px",padding:"0px",background:"rgba("+o.r+", "+o.g+", "+o.b+", 1)",position:"relative",overflow:"hidden"},body:{margin:"auto",width:"95%"},controls:{display:"flex",boxSizing:"border-box",height:"52px",paddingTop:"22px"},color:{width:"32px"},hue:{height:"8px",position:"relative",margin:"0px 16px 0px 16px",width:"100%"},Hue:{radius:"2px"}}},u));return e.createElement("div",{style:r.picker,className:"google-picker "+x},e.createElement("div",{style:r.head},g),e.createElement("div",{style:r.swatch}),e.createElement("div",{style:r.saturation},e.createElement(v.Saturation,{hsl:l,hsv:s,pointer:w.GooglePointerCircle,onChange:n})),e.createElement("div",{style:r.body},e.createElement("div",{style:r.controls,className:"flexbox-fix"},e.createElement("div",{style:r.hue},e.createElement(m.Hue,{style:r.Hue,hsl:l,radius:"4px",pointer:q.GooglePointer,onChange:n}))),e.createElement(C.GoogleFields,{rgb:o,hsl:l,hex:c,hsv:s,onChange:n})))};a.propTypes={width:i.oneOfType([i.string,i.number]),styles:i.object,header:i.string};a.defaultProps={width:652,styles:{},header:"Color picker"};f.ColorWrap(a);exports.Google=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),d=require("./index153.cjs"),p=require("./index143.cjs"),h=require("./index154.cjs");require("./index144.cjs");require("./index145.cjs");require("./index146.cjs");const q=require("./index147.cjs");require("./index148.cjs");require("./index149.cjs");const y=require("./index150.cjs");require("./index151.cjs");const S=require("./index174.cjs"),m=require("./index175.cjs");var s=function(e){var i=e.hsl,l=e.onChange,o=e.pointer,n=e.styles,u=n===void 0?{}:n,a=e.className,c=a===void 0?"":a,t=p.default(h({default:{hue:{height:"12px",position:"relative"},Hue:{radius:"2px"}}},u));return r.createElement("div",{style:t.wrap||{},className:"slider-picker "+c},r.createElement("div",{style:t.hue},r.createElement(q.Hue,{style:t.Hue,hsl:i,pointer:o,onChange:l})),r.createElement("div",{style:t.swatches},r.createElement(S.SliderSwatches,{hsl:i,onClick:l})))};s.propTypes={styles:d.object};s.defaultProps={pointer:m.SliderPointer,styles:{}};y.ColorWrap(s);exports.Slider=s;