@ikas/core 1.0.8 → 1.0.9

package/dist/index91.js

@@ -1,186 +1,80 @@
 import t from "react";
-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);
+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"
+      }
     }
-  }
-  return function(e, p, r) {
-    return p && o(e.prototype, p), r && o(e, r), e;
+  }, H)), R = function($, j) {
+    return D({ hex: $, source: "hex" }, j);
   };
-})();
-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(
+  return t.createElement(
+    "div",
+    { style: b.picker, className: "swatches-picker " + P },
+    t.createElement(
+      q,
+      null,
+      t.createElement(
         "div",
-        { style: n.picker, className: "photoshop-picker " + f },
+        { style: b.overflow },
         t.createElement(
           "div",
-          { 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
-                })
-              )
-            )
-          )
+          { 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 })
         )
-      );
-    }
-  }]), e;
-})(t.Component);
-a.propTypes = {
-  header: l.string,
-  styles: l.object
+      )
+    )
+  );
+};
+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 */
 };
-a.defaultProps = {
-  header: "Color Picker",
+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"]],
   styles: {}
 };
-b(a);
+z(C);
 export {
-  a as Photoshop
+  C as Swatches
 };

package/dist/index92.cjs

@@ -1 +1 @@
-"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;
+"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;

package/dist/index92.js

@@ -1,171 +1,173 @@
-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",
+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,
         background: "#fff",
+        border: "0 solid rgba(0,0,0,0.25)",
+        boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
         borderRadius: "4px",
-        boxShadow: "0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"
+        position: "relative"
       },
-      saturation: {
-        width: "100%",
-        paddingBottom: "75%",
-        position: "relative",
-        overflow: "hidden"
+      body: {
+        padding: "15px 9px 9px 15px"
       },
-      Saturation: {
-        radius: "3px",
-        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
+      label: {
+        fontSize: "18px",
+        color: "#fff"
       },
-      controls: {
-        display: "flex"
+      triangle: {
+        width: "0px",
+        height: "0px",
+        borderStyle: "solid",
+        borderWidth: "0 9px 10px 9px",
+        borderColor: "transparent transparent #fff transparent",
+        position: "absolute"
       },
-      sliders: {
-        padding: "4px 0",
-        flex: "1"
+      triangleShadow: {
+        width: "0px",
+        height: "0px",
+        borderStyle: "solid",
+        borderWidth: "0 9px 10px 9px",
+        borderColor: "transparent transparent rgba(0,0,0,.1) transparent",
+        position: "absolute"
       },
-      color: {
-        width: "24px",
-        height: "24px",
-        position: "relative",
-        marginTop: "4px",
-        marginLeft: "4px",
-        borderRadius: "3px"
+      hash: {
+        background: "#F0F0F0",
+        height: "30px",
+        width: "30px",
+        borderRadius: "4px 0 0 4px",
+        float: "left",
+        color: "#98A1A4",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
       },
-      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)"
+      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"
       },
-      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)"
+      swatch: {
+        width: "30px",
+        height: "30px",
+        float: "left",
+        borderRadius: "4px",
+        margin: "0 6px 6px 0"
       },
-      alpha: {
-        position: "relative",
-        height: "10px",
-        marginTop: "4px",
-        overflow: "hidden"
+      clear: {
+        clear: "both"
+      }
+    },
+    "hide-triangle": {
+      triangle: {
+        display: "none"
       },
-      Alpha: {
-        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"
       }
-    }, m),
-    disableAlpha: {
-      color: {
-        height: "10px"
+    },
+    "top-left-triangle": {
+      triangle: {
+        top: "-10px",
+        left: "12px"
       },
-      hue: {
-        height: "10px"
+      triangleShadow: {
+        top: "-11px",
+        left: "12px"
+      }
+    },
+    "top-right-triangle": {
+      triangle: {
+        top: "-10px",
+        right: "12px"
       },
-      alpha: {
-        display: "none"
+      triangleShadow: {
+        top: "-11px",
+        right: "12px"
       }
     }
-  }, m), { disableAlpha: h });
-  return t.createElement(
+  }, 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: 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(
+    { style: e.card, className: "twitter-picker " + b },
+    r.createElement("div", { style: e.triangleShadow }),
+    r.createElement("div", { style: e.triangle }),
+    r.createElement(
       "div",
-      { style: r.controls, className: "flexbox-fix" },
-      t.createElement(
+      { 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: 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
-          })
-        )
+        { style: e.hash },
+        "#"
       ),
-      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
-    })
+      r.createElement(v, {
+        label: null,
+        style: { input: e.input },
+        value: g.replace("#", ""),
+        onChange: s
+      }),
+      r.createElement("div", { style: e.clear })
+    )
   );
 };
 n.propTypes = {
-  disableAlpha: i.bool,
-  width: i.oneOfType([i.string, i.number]),
-  styles: i.object
+  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 = {
-  disableAlpha: !1,
-  width: 200,
-  styles: {},
-  presetColors: ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]
+  width: 276,
+  colors: ["#FF6900", "#FCB900", "#7BDCB5", "#00D084", "#8ED1FC", "#0693E3", "#ABB8C3", "#EB144C", "#F78DA7", "#9900EF"],
+  triangle: "top-left",
+  styles: {}
 };
-k(n);
+E(n);
 export {
-  n as Sketch
+  n as Twitter
 };

package/dist/index93.cjs

@@ -1 +1 @@
-"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;
+"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;