├── .gitignore
├── LICENSE
├── README.org
├── client
    ├── package.json
    ├── rollup.config.js
    ├── src
    │   └── index.js
    ├── static
    │   └── index.html
    └── yarn.lock
├── color-picker.html
├── screenshots
    └── webkit-color-picker.gif
├── webkit-color-picker.el
└── webkit-color-picker.org


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Compiled
 2 | *.elc
 3 | 
 4 | # Packaging
 5 | .cask
 6 | 
 7 | # Backup files
 8 | *~
 9 | 
10 | # Undo-tree save-files
11 | *.~undo-tree
12 | 
13 | /client/node_modules
14 | /client/build
15 | /client/yarn-error.log
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Ozan Sener
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.org:
--------------------------------------------------------------------------------
 1 | #+AUTHOR: Ozan Sener
 2 | * webkit-color-picker
 3 | 
 4 | Small experiment with embedded a Webkit widgets in a childframe. Requires Emacs 26 compiled with [[https://www.gnu.org/software/emacs/manual/html_node/emacs/Embedded-WebKit-Widgets.html][embedded Webkit Widget support]].
 5 | 
 6 | webkit-color-picker is available on [[https://melpa.org/][MELPA]]. Example configuration using [[https://github.com/jwiegley/use-package][use-package]]:
 7 | 
 8 | #+BEGIN_SRC emacs-lisp
 9 |   (use-package webkit-color-picker
10 |     :ensure t
11 |     :bind (("C-c C-p" . webkit-color-picker-show)))
12 | #+END_SRC
13 | 
14 | ** Screenshot
15 | [[file:./screenshots/webkit-color-picker.gif]]
16 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "emacs-webkit-color-picker",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "browse": "browser-sync start --s --ss static --ss build --index static/index-dev.html --files static/*.html,build/*.js --no-notify",
 8 |     "build:js": "rollup -c",
 9 |     "build:html": "sed -e 's/app\\.js/app.min.js/' static/index.html | html-inline -b build -o ../color-picker.html",
10 |     "build": "npm run build:js && npm run build:html",
11 |     "start": "rollup -c -w"
12 |   },
13 |   "devDependencies": {
14 |     "babel-core": "^6.26.0",
15 |     "babel-plugin-external-helpers": "^6.22.0",
16 |     "babel-preset-env": "^1.6.1",
17 |     "babel-preset-react": "^6.24.1",
18 |     "babel-preset-stage-0": "^6.24.1",
19 |     "browser-sync": "^2.23.6",
20 |     "html-inline": "^1.2.0",
21 |     "rollup": "0.52.0",
22 |     "rollup-plugin-alias": "^1.4.0",
23 |     "rollup-plugin-babel": "^3.0.3",
24 |     "rollup-plugin-browsersync": "^0.2.6",
25 |     "rollup-plugin-commonjs": "8.2.6",
26 |     "rollup-plugin-node-globals": "1.1.0",
27 |     "rollup-plugin-node-resolve": "3.0.0",
28 |     "rollup-plugin-replace": "2.0.0",
29 |     "rollup-plugin-uglify": "2.0.1",
30 |     "rollup-watch": "4.3.1"
31 |   },
32 |   "dependencies": {
33 |     "preact": "^8.2.7",
34 |     "preact-compat": "^3.18.0",
35 |     "react-color": "https://github.com/casesandberg/react-color",
36 |     "tinycolor2": "^1.4.1"
37 |   },
38 |   "resolutions": {
39 |     "prop-types": "15.6.0",
40 |     "loose-envify": "1.3.1",
41 |     "object-assign": "4.1.1"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/client/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | 
 3 | import alias from "rollup-plugin-alias";
 4 | import babel from "rollup-plugin-babel";
 5 | import cjs from "rollup-plugin-commonjs";
 6 | import globals from "rollup-plugin-node-globals";
 7 | import replace from "rollup-plugin-replace";
 8 | import resolve from "rollup-plugin-node-resolve";
 9 | import uglify from "rollup-plugin-uglify";
10 | import browsersync from "rollup-plugin-browsersync";
11 | 
12 | const production = !process.env.ROLLUP_WATCH;
13 | 
14 | const devPlugins = !production ? [browsersync({ server: "build" })] : [];
15 | const prodPlugins = production ? [uglify()] : [];
16 | 
17 | export default {
18 |   input: "src/index.js",
19 |   output: {
20 |     name: "colorpicker",
21 |     file: production ? "build/app.min.js" : "build/app.js",
22 |     format: "iife",
23 |     sourcemap: true
24 |   },
25 |   plugins: [
26 |     alias({
27 |       react: path.resolve(
28 |         __dirname,
29 |         "node_modules",
30 |         "preact-compat",
31 |         "dist",
32 |         "preact-compat.es.js"
33 |       ),
34 |       "react-dom": path.resolve(
35 |         __dirname,
36 |         "node_modules",
37 |         "preact-compat",
38 |         "dist",
39 |         "preact-compat.es.js"
40 |       ),
41 |       "create-react-class": path.resolve(
42 |         __dirname,
43 |         "node_modules",
44 |         "preact-compat",
45 |         "lib",
46 |         "create-react-class.js"
47 |       )
48 |     }),
49 |     resolve({
50 |       browser: true,
51 |       main: true
52 |     }),
53 |     cjs({
54 |       exclude: ["node_modules/process-es6/**", "node_modules/react-color/**"],
55 |       include: [
56 |         "node_modules/fbjs/**",
57 |         "node_modules/object-assign/**",
58 |         "node_modules/reactcss/**",
59 |         "node_modules/lodash/**",
60 |         "node_modules/tinycolor2/**",
61 |         "node_modules/prop-types/**"
62 |       ],
63 |       namedExports: {
64 |         "node_modules/react/index.js": [
65 |           "Component",
66 |           "PureComponent",
67 |           "Children",
68 |           "createElement"
69 |         ]
70 |       }
71 |     }),
72 |     globals(),
73 |     replace({
74 |       "process.env.NODE_ENV": JSON.stringify(
75 |         production ? "production" : "development"
76 |       )
77 |     }),
78 |     babel({
79 |       babelrc: false,
80 |       presets: [
81 |         [
82 |           "env",
83 |           {
84 |             modules: false,
85 |             loose: true
86 |             // targets: { safari: 11 }
87 |           }
88 |         ],
89 |         "stage-0",
90 |         "react"
91 |       ],
92 |       plugins: ["external-helpers"]
93 |     }),
94 |     ...devPlugins,
95 |     ...prodPlugins
96 |   ]
97 | };
98 | 


--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import ReactDOM from "react-dom";
 3 | import SketchPicker from "react-color/src/components/sketch/Sketch";
 4 | import tinycolor from "tinycolor2";
 5 | 
 6 | function toState(input) {
 7 |   const color = tinycolor(input);
 8 | 
 9 |   return {
10 |     format: color.getFormat() || "hex",
11 |     color: color.toRgb()
12 |   };
13 | }
14 | 
15 | export default class ColorPicker extends Component {
16 |   state = toState(window.selectedColor);
17 | 
18 |   componentDidMount() {
19 |     Object.defineProperty(window, "selectedColor", {
20 |       get: () => {
21 |         const color = tinycolor(this.state.color);
22 | 
23 |         switch (this.state.format) {
24 |           case "hsl":
25 |             return color.toHslString();
26 |           case "hex8":
27 |             return color.toHex8String();
28 |           case "prgb":
29 |             return color.toPercentageRgbString();
30 |           case "rgb":
31 |             return color.toRgbString();
32 |           default:
33 |             return color.getAlpha() === 1
34 |               ? color.toHexString()
35 |               : color.toRgbString();
36 |         }
37 |       },
38 |       set: color => this.setState(toState(color))
39 |     });
40 |   }
41 | 
42 |   setColor = color => this.setState({ color: color.rgb });
43 | 
44 |   render() {
45 |     return (
46 |       <SketchPicker
47 |         className="picker"
48 |         width={300}
49 |         presetColors={[]}
50 |         color={this.state.color}
51 |         onChangeComplete={this.setColor}
52 |       />
53 |     );
54 |   }
55 | }
56 | 
57 | ReactDOM.render(<ColorPicker />, document.getElementById("root"));
58 | 


--------------------------------------------------------------------------------
/client/static/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |   </head>
 7 |   <body style="margin: 12px;">
 8 |     <noscript>
 9 |       You need to enable JavaScript to run this app.
10 |     </noscript>
11 |     <div id="root"></div>
12 |     <script src="app.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/color-picker.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |   </head>
 7 |   <body style="margin: 12px;">
 8 |     <noscript>
 9 |       You need to enable JavaScript to run this app.
10 |     </noscript>
11 |     <div id="root"></div>
12 |     <script>var colorpicker=function(){"use strict";var e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}var o=r,a=n;function i(t){if(o===setTimeout)return setTimeout(t,0);if((o===r||!o)&&setTimeout)return o=setTimeout,setTimeout(t,0);try{return o(t,0)}catch(e){try{return o.call(null,t,0)}catch(e){return o.call(this,t,0)}}}"function"==typeof e.setTimeout&&(o=setTimeout),"function"==typeof e.clearTimeout&&(a=clearTimeout);var u,s=[],l=!1,c=-1;function f(){l&&u&&(l=!1,u.length?s=u.concat(s):c=-1,s.length&&p())}function p(){if(!l){var e=i(f);l=!0;for(var t=s.length;t;){for(u=s,s=[];++c<t;)u&&u[c].run();c=-1,t=s.length}u=null,l=!1,function(t){if(a===clearTimeout)return clearTimeout(t);if((a===n||!a)&&clearTimeout)return a=clearTimeout,clearTimeout(t);try{a(t)}catch(e){try{return a.call(null,t)}catch(e){return a.call(this,t)}}}(e)}}function h(e,t){this.fun=e,this.array=t}h.prototype.run=function(){this.fun.apply(null,this.array)};function t(){}var d=t,v=t,b=t,g=t,y=t,m=t,_=t;var w=e.performance||{},x=w.now||w.mozNow||w.msNow||w.oNow||w.webkitNow||function(){return(new Date).getTime()};var C=new Date;var j={nextTick:function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];s.push(new h(e,t)),1!==s.length||l||i(p)},title:"browser",browser:!0,env:{},argv:[],version:"",versions:{},on:d,addListener:v,once:b,off:g,removeListener:y,removeAllListeners:m,emit:_,binding:function(e){throw new Error("process.binding is not supported")},cwd:function(){return"/"},chdir:function(e){throw new Error("process.chdir is not supported")},umask:function(){return 0},hrtime:function(e){var t=.001*x.call(w),r=Math.floor(t),n=Math.floor(t%1*1e9);return e&&(r-=e[0],(n-=e[1])<0&&(r--,n+=1e9)),[r,n]},platform:"browser",release:{},config:{},uptime:function(){return(new Date-C)/1e3}},S="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function O(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function k(e,t){return e(t={exports:{}},t.exports),t.exports}function A(e){return function(){return e}}var E=function(){};E.thatReturns=A,E.thatReturnsFalse=A(!1),E.thatReturnsTrue=A(!0),E.thatReturnsNull=A(null),E.thatReturnsThis=function(){return this},E.thatReturnsArgument=function(e){return e};var M=E;var P=function(e,t,r,n,o,a,i,u){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,n,o,a,i,u],c=0;(s=new Error(t.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}},T=Object.getOwnPropertySymbols,R=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(e){n[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}})()&&Object.assign;var L="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",W="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},U=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},F=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},H=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},B=k(function(e){e.exports=function(){function e(e,t,r,n,o,a){a!==L&&P(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=M,r.PropTypes=r}()});var z={},I=[],V=[];function $(e,t){var r,n,o,a,i=V;for(a=arguments.length;2<a--;)I.push(arguments[a]);for(t&&null!=t.children&&(I.length||I.push(t.children),delete t.children);I.length;)if((n=I.pop())&&void 0!==n.pop)for(a=n.length;a--;)I.push(n[a]);else"boolean"==typeof n&&(n=null),(o="function"!=typeof e)&&(null==n?n="":"number"==typeof n?n=String(n):"string"!=typeof n&&(o=!1)),o&&r?i[i.length-1]+=n:i===V?i=[n]:i.push(n),r=o;var u=new function(){};return u.nodeName=e,u.children=i,u.attributes=null==t?void 0:t,u.key=null==t?void 0:t.key,void 0!==z.vnode&&z.vnode(u),u}function q(e,t){for(var r in t)e[r]=t[r];return e}var X="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout;var Y=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,G=[];function K(e){!e._dirty&&(e._dirty=!0)&&1==G.push(e)&&(z.debounceRendering||X)(Z)}function Z(){var e,t=G;for(G=[];e=t.pop();)e._dirty&&be(e)}function J(e,t){return e.normalizedNodeName===t||e.nodeName.toLowerCase()===t.toLowerCase()}function Q(e){var t=q({},e.attributes);t.children=e.children;var r=e.nodeName.defaultProps;if(void 0!==r)for(var n in r)void 0===t[n]&&(t[n]=r[n]);return t}function ee(e){var t=e.parentNode;t&&t.removeChild(e)}function te(e,t,r,n,o){if("className"===t&&(t="class"),"key"===t);else if("ref"===t)r&&r(null),n&&n(e);else if("class"!==t||o)if("style"===t){if(n&&"string"!=typeof n&&"string"!=typeof r||(e.style.cssText=n||""),n&&"object"===(void 0===n?"undefined":W(n))){if("string"!=typeof r)for(var a in r)a in n||(e.style[a]="");for(var a in n)e.style[a]="number"==typeof n[a]&&!1===Y.test(a)?n[a]+"px":n[a]}}else if("dangerouslySetInnerHTML"===t)n&&(e.innerHTML=n.__html||"");else if("o"==t[0]&&"n"==t[1]){var i=t!==(t=t.replace(/Capture$/,""));t=t.toLowerCase().substring(2),n?r||e.addEventListener(t,re,i):e.removeEventListener(t,re,i),(e._listeners||(e._listeners={}))[t]=n}else if("list"!==t&&"type"!==t&&!o&&t in e)!function(e,t,r){try{e[t]=r}catch(e){}}(e,t,null==n?"":n),null!=n&&!1!==n||e.removeAttribute(t);else{var u=o&&t!==(t=t.replace(/^xlink\:?/,""));null==n||!1===n?u?e.removeAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase()):e.removeAttribute(t):"function"!=typeof n&&(u?e.setAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase(),n):e.setAttribute(t,n))}else e.className=n||""}function re(e){return this._listeners[e.type](z.event&&z.event(e)||e)}var ne=[],oe=0,ae=!1,ie=!1;function ue(){for(var e;e=ne.pop();)z.afterMount&&z.afterMount(e),e.componentDidMount&&e.componentDidMount()}function se(e,t,r,n,o,a){oe++||(ae=null!=o&&void 0!==o.ownerSVGElement,ie=null!=e&&!("__preactattr_"in e));var i=le(e,t,r,n,a);return o&&i.parentNode!==o&&o.appendChild(i),--oe||(ie=!1,a||ue()),i}function le(e,t,r,n,o){var a=e,i=ae;if(null!=t&&"boolean"!=typeof t||(t=""),"string"==typeof t||"number"==typeof t)return e&&void 0!==e.splitText&&e.parentNode&&(!e._component||o)?e.nodeValue!=t&&(e.nodeValue=t):(a=document.createTextNode(t),e&&(e.parentNode&&e.parentNode.replaceChild(a,e),ce(e,!0))),a.__preactattr_=!0,a;var u,s,l=t.nodeName;if("function"==typeof l)return function(e,t,r,n){var o=e&&e._component,a=o,i=e,u=o&&e._componentConstructor===t.nodeName,s=u,l=Q(t);for(;o&&!s&&(o=o._parentComponent);)s=o.constructor===t.nodeName;o&&s&&(!n||o._component)?(ve(o,l,3,r,n),e=o.base):(a&&!u&&(ge(a),e=i=null),o=he(t.nodeName,l,r),e&&!o.nextBase&&(o.nextBase=e,i=null),ve(o,l,1,r,n),e=o.base,i&&e!==i&&(i._component=null,ce(i,!1)));return e}(e,t,r,n);if(ae="svg"===l||"foreignObject"!==l&&ae,l=String(l),(!e||!J(e,l))&&(u=l,(s=ae?document.createElementNS("http://www.w3.org/2000/svg",u):document.createElement(u)).normalizedNodeName=u,a=s,e)){for(;e.firstChild;)a.appendChild(e.firstChild);e.parentNode&&e.parentNode.replaceChild(a,e),ce(e,!0)}var c=a.firstChild,f=a.__preactattr_,p=t.children;if(null==f){f=a.__preactattr_={};for(var h=a.attributes,d=h.length;d--;)f[h[d].name]=h[d].value}return!ie&&p&&1===p.length&&"string"==typeof p[0]&&null!=c&&void 0!==c.splitText&&null==c.nextSibling?c.nodeValue!=p[0]&&(c.nodeValue=p[0]):(p&&p.length||null!=c)&&function(e,t,r,n,o){var a,i,u,s,l,c=e.childNodes,f=[],p={},h=0,d=0,v=c.length,b=0,g=t?t.length:0;if(0!==v)for(var y=0;y<v;y++){var m=c[y],_=m.__preactattr_,w=g&&_?m._component?m._component.__key:_.key:null;null!=w?(h++,p[w]=m):(_||(void 0!==m.splitText?!o||m.nodeValue.trim():o))&&(f[b++]=m)}if(0!==g)for(var y=0;y<g;y++){s=t[y],l=null;var w=s.key;if(null!=w)h&&void 0!==p[w]&&(l=p[w],p[w]=void 0,h--);else if(!l&&d<b)for(a=d;a<b;a++)if(void 0!==f[a]&&(x=i=f[a],j=o,"string"==typeof(C=s)||"number"==typeof C?void 0!==x.splitText:"string"==typeof C.nodeName?!x._componentConstructor&&J(x,C.nodeName):j||x._componentConstructor===C.nodeName)){l=i,f[a]=void 0,a===b-1&&b--,a===d&&d++;break}l=le(l,s,r,n),u=c[y],l&&l!==e&&l!==u&&(null==u?e.appendChild(l):l===u.nextSibling?ee(u):e.insertBefore(l,u))}var x,C,j;if(h)for(var y in p)void 0!==p[y]&&ce(p[y],!1);for(;d<=b;)void 0!==(l=f[b--])&&ce(l,!1)}(a,p,r,n,ie||null!=f.dangerouslySetInnerHTML),function(e,t,r){var n;for(n in r)t&&null!=t[n]||null==r[n]||te(e,n,r[n],r[n]=void 0,ae);for(n in t)"children"===n||"innerHTML"===n||n in r&&t[n]===("value"===n||"checked"===n?e[n]:r[n])||te(e,n,r[n],r[n]=t[n],ae)}(a,t.attributes,f),ae=i,a}function ce(e,t){var r=e._component;r?ge(r):(null!=e.__preactattr_&&e.__preactattr_.ref&&e.__preactattr_.ref(null),!1!==t&&null!=e.__preactattr_||ee(e),fe(e))}function fe(e){for(e=e.lastChild;e;){var t=e.previousSibling;ce(e,!0),e=t}}var pe={};function he(e,t,r){var n,o=pe[e.name];if(e.prototype&&e.prototype.render?(n=new e(t,r),ye.call(n,t,r)):((n=new ye(t,r)).constructor=e,n.render=de),o)for(var a=o.length;a--;)if(o[a].constructor===e){n.nextBase=o[a].nextBase,o.splice(a,1);break}return n}function de(e,t,r){return this.constructor(e,r)}function ve(e,t,r,n,o){e._disable||(e._disable=!0,(e.__ref=t.ref)&&delete t.ref,(e.__key=t.key)&&delete t.key,!e.base||o?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,n),n&&n!==e.context&&(e.prevContext||(e.prevContext=e.context),e.context=n),e.prevProps||(e.prevProps=e.props),e.props=t,e._disable=!1,0!==r&&(1!==r&&!1===z.syncComponentUpdates&&e.base?K(e):be(e,1,o)),e.__ref&&e.__ref(e))}function be(e,t,r,n){if(!e._disable){var o,a,i,u=e.props,s=e.state,l=e.context,c=e.prevProps||u,f=e.prevState||s,p=e.prevContext||l,h=e.base,d=e.nextBase,v=h||d,b=e._component,g=!1;if(h&&(e.props=c,e.state=f,e.context=p,2!==t&&e.shouldComponentUpdate&&!1===e.shouldComponentUpdate(u,s,l)?g=!0:e.componentWillUpdate&&e.componentWillUpdate(u,s,l),e.props=u,e.state=s,e.context=l),e.prevProps=e.prevState=e.prevContext=e.nextBase=null,e._dirty=!1,!g){o=e.render(u,s,l),e.getChildContext&&(l=q(q({},l),e.getChildContext()));var y,m,_=o&&o.nodeName;if("function"==typeof _){var w=Q(o);(a=b)&&a.constructor===_&&w.key==a.__key?ve(a,w,1,l,!1):(y=a,e._component=a=he(_,w,l),a.nextBase=a.nextBase||d,a._parentComponent=e,ve(a,w,0,l,!1),be(a,1,r,!0)),m=a.base}else i=v,(y=b)&&(i=e._component=null),(v||1===t)&&(i&&(i._component=null),m=se(i,o,l,r||!h,v&&v.parentNode,!0));if(v&&m!==v&&a!==b){var x=v.parentNode;x&&m!==x&&(x.replaceChild(m,v),y||(v._component=null,ce(v,!1)))}if(y&&ge(y),(e.base=m)&&!n){for(var C=e,j=e;j=j._parentComponent;)(C=j).base=m;m._component=C,m._componentConstructor=C.constructor}}if(!h||r?ne.unshift(e):g||(e.componentDidUpdate&&e.componentDidUpdate(c,f,p),z.afterUpdate&&z.afterUpdate(e)),null!=e._renderCallbacks)for(;e._renderCallbacks.length;)e._renderCallbacks.pop().call(e);oe||n||ue()}}function ge(e){z.beforeUnmount&&z.beforeUnmount(e);var t=e.base;e._disable=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var r,n,o=e._component;o?ge(o):t&&(t.__preactattr_&&t.__preactattr_.ref&&t.__preactattr_.ref(null),ee(e.nextBase=t),n=(r=e).constructor.name,(pe[n]||(pe[n]=[])).push(r),fe(t)),e.__ref&&e.__ref(null)}function ye(e,t){this._dirty=!0,this.context=t,this.props=e,this.state=this.state||{}}function me(e,t,r){return se(r,e,{},!1,t,!1)}q(ye.prototype,{setState:function(e,t){var r=this.state;this.prevState||(this.prevState=q({},r)),q(r,"function"==typeof e?e(r,this.props):e),t&&(this._renderCallbacks=this._renderCallbacks||[]).push(t),K(this)},forceUpdate:function(e){e&&(this._renderCallbacks=this._renderCallbacks||[]).push(e),be(this,2)},render:function(){}});var _e="a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr circle clipPath defs ellipse g image line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan".split(" "),we="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,xe="undefined"!=typeof Symbol&&Symbol.for?Symbol.for("__preactCompatWrapper"):"__preactCompatWrapper",Ce={constructor:1,render:1,shouldComponentUpdate:1,componentWillReceiveProps:1,componentWillUpdate:1,componentDidUpdate:1,componentWillMount:1,componentDidMount:1,componentWillUnmount:1,componentDidUnmount:1},je=/^(?:accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/,Se={},Oe=void 0===j||!j.env||!1;function ke(){return null}var Ae=$("a",null).constructor;Ae.prototype.$$typeof=we,Ae.prototype.preactCompatUpgraded=!1,Ae.prototype.preactCompatNormalized=!1,Object.defineProperty(Ae.prototype,"type",{get:function(){return this.nodeName},set:function(e){this.nodeName=e},configurable:!0}),Object.defineProperty(Ae.prototype,"props",{get:function(){return this.attributes},set:function(e){this.attributes=e},configurable:!0});var Ee=z.event;z.event=function(e){return Ee&&(e=Ee(e)),e.persist=Object,e.nativeEvent=e};var Me=z.vnode;function Pe(e,t,r){var n=t&&t._preactCompatRendered&&t._preactCompatRendered.base;n&&n.parentNode!==t&&(n=null),!n&&t&&(n=t.firstElementChild);for(var o=t.childNodes.length;o--;)t.childNodes[o]!==n&&t.removeChild(t.childNodes[o]);var a=me(e,t,n);return t&&(t._preactCompatRendered=a&&(a._component||{base:a})),"function"==typeof r&&r(),a&&a._component||a}z.vnode=function(e){if(!e.preactCompatUpgraded){e.preactCompatUpgraded=!0;var t=e.nodeName,r=e.attributes=Xe({},e.attributes);"function"==typeof t?(!0===t[xe]||t.prototype&&"isReactComponent"in t.prototype)&&(e.children&&""===String(e.children)&&(e.children=void 0),e.children&&(r.children=e.children),e.preactCompatNormalized||Ie(e),function(e){var t=e.nodeName,r=e.attributes;e.attributes={},t.defaultProps&&Xe(e.attributes,t.defaultProps);r&&Xe(e.attributes,r)}(e)):(e.children&&""===String(e.children)&&(e.children=void 0),e.children&&(r.children=e.children),r.defaultValue&&(r.value||0===r.value||(r.value=r.defaultValue),delete r.defaultValue),function(e,t){var r,n,o;if(t){for(o in t)if(r=je.test(o))break;if(r)for(o in n=e.attributes={},t)t.hasOwnProperty(o)&&(n[je.test(o)?o.replace(/([A-Z0-9])/,"-$1").toLowerCase():o]=t[o])}}(e,r))}Me&&Me(e)};var Te=function(){};function Re(e,t,r,n){var o=Pe($(Te,{context:e.context},t),r),a=o._component||o.base;return n&&n.call(a,o),a}function Ne(e){var t=e._preactCompatRendered&&e._preactCompatRendered.base;return!(!t||t.parentNode!==e)&&(me($(ke),e,t),!0)}Te.prototype.getChildContext=function(){return this.props.context},Te.prototype.render=function(e){return e.children[0]};var Le,Ue=[],De={map:function(e,t,r){return null==e?null:(e=De.toArray(e),r&&r!==e&&(t=t.bind(r)),e.map(t))},forEach:function(e,t,r){if(null==e)return null;e=De.toArray(e),r&&r!==e&&(t=t.bind(r)),e.forEach(t)},count:function(e){return e&&e.length||0},only:function(e){if(1!==(e=De.toArray(e)).length)throw new Error("Children.only() expects only one child.");return e[0]},toArray:function(e){return null==e?[]:Ue.concat(e)}};function Fe(e){return We.bind(null,e)}for(var He={},Be=_e.length;Be--;)He[_e[Be]]=Fe(_e[Be]);function ze(e){var t,r=e[xe];return r?!0===r?e:r:(r=Ze({displayName:(t=e).displayName||t.name,render:function(){return t(this.props,this.context)}}),Object.defineProperty(r,xe,{configurable:!0,value:!0}),r.displayName=e.displayName,r.propTypes=e.propTypes,r.defaultProps=e.defaultProps,Object.defineProperty(e,xe,{configurable:!0,value:r}),r)}function We(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];return function e(t,r){for(var n=r||0;n<t.length;n++){var o=t[n];Array.isArray(o)?e(o):o&&"object"===(void 0===o?"undefined":W(o))&&!$e(o)&&(o.props&&o.type||o.attributes&&o.nodeName||o.children)&&(t[n]=We(o.type||o.nodeName,o.props||o.attributes,o.children))}}(e,2),Ie($.apply(void 0,e))}function Ie(e){var t;e.preactCompatNormalized=!0,function(e){var t=e.attributes||(e.attributes={});qe.enumerable="className"in t,t.className&&(t.class=t.className);Object.defineProperty(t,"className",qe)}(e),"function"!=typeof(t=e.nodeName)||t.prototype&&t.prototype.render||(e.nodeName=ze(e.nodeName));var r,n,o=e.attributes.ref,a=o&&(void 0===o?"undefined":W(o));return!Le||"string"!==a&&"number"!==a||(e.attributes.ref=(r=o,(n=Le)._refProxies[r]||(n._refProxies[r]=function(e){n&&n.refs&&null===(n.refs[r]=e)&&(delete n._refProxies[r],n=null)}))),function(e){var t=e.nodeName,r=e.attributes;if(!r||"string"!=typeof t)return;var n={};for(var o in r)n[o.toLowerCase()]=o;n.ondoubleclick&&(r.ondblclick=r[n.ondoubleclick],delete r[n.ondoubleclick]);if(n.onchange&&("textarea"===t||"input"===t.toLowerCase()&&!/^fil|che|rad/i.test(r.type))){var a=n.oninput||"oninput";r[a]||(r[a]=Qe([r[a],r[n.onchange]]),delete r[n.onchange])}}(e),e}function Ve(e,t){for(var r=[],n=arguments.length-2;0<n--;)r[n]=arguments[n+2];if(!$e(e))return e;var o=e.attributes||e.props,a=[$(e.nodeName||e.type,Xe({},o),e.children||o&&o.children),t];return r&&r.length?a.push(r):t&&t.children&&a.push(t.children),Ie(function(e,t){return $(e.nodeName,q(q({},e.attributes),t),2<arguments.length?[].slice.call(arguments,2):e.children)}.apply(void 0,a))}function $e(e){return e&&(e instanceof Ae||e.$$typeof===we)}var qe={configurable:!0,get:function(){return this.class},set:function(e){this.class=e}};function Xe(e,t){for(var r=arguments,n=1,o=void 0;n<arguments.length;n++)if(o=r[n])for(var a in o)o.hasOwnProperty(a)&&(e[a]=o[a]);return e}function Ye(e,t){for(var r in e)if(!(r in t))return!0;for(var n in t)if(e[n]!==t[n])return!0;return!1}function Ge(e){return e&&e.base||e}function Ke(){}function Ze(e){function t(e,t){!function(e){for(var t in e){var r=e[t];"function"!=typeof r||r.__bound||Ce.hasOwnProperty(t)||((e[t]=r.bind(e)).__bound=!0)}}(this),ot.call(this,e,t,Se),et.call(this,e,t)}return(e=Xe({constructor:t},e)).mixins&&function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=Qe(t[r].concat(e[r]||Ue),"getDefaultProps"===r||"getInitialState"===r||"getChildContext"===r))}(e,function(e){for(var t={},r=0;r<e.length;r++){var n=e[r];for(var o in n)n.hasOwnProperty(o)&&"function"==typeof n[o]&&(t[o]||(t[o]=[])).push(n[o])}return t}(e.mixins)),e.statics&&Xe(t,e.statics),e.propTypes&&(t.propTypes=e.propTypes),e.defaultProps&&(t.defaultProps=e.defaultProps),e.getDefaultProps&&(t.defaultProps=e.getDefaultProps.call(t)),Ke.prototype=ot.prototype,t.prototype=Xe(new Ke,e),t.displayName=e.displayName||"Component",t}function Je(e,t,r){if("string"==typeof t&&(t=e.constructor.prototype[t]),"function"==typeof t)return t.apply(e,r)}function Qe(a,i){return function(){for(var e,t=arguments,r=0;r<a.length;r++){var n=Je(this,a[r],t);if(i&&null!=n)for(var o in e||(e={}),n)n.hasOwnProperty(o)&&(e[o]=n[o]);else void 0!==n&&(e=n)}return e}}function et(e,t){tt.call(this,e,t),this.componentWillReceiveProps=Qe([tt,this.componentWillReceiveProps||"componentWillReceiveProps"]),this.render=Qe([tt,rt,this.render||"render",nt])}function tt(e,t){if(e){var r=e.children;if(r&&Array.isArray(r)&&1===r.length&&("string"==typeof r[0]||"function"==typeof r[0]||r[0]instanceof Ae)&&(e.children=r[0],e.children&&"object"===W(e.children)&&(e.children.length=1,e.children[0]=e.children)),Oe){var n="function"==typeof this?this:this.constructor,o=this.propTypes||n.propTypes,a=this.displayName||n.name;o&&B.checkPropTypes(o,e,"prop",a)}}}function rt(e){Le=this}function nt(){Le===this&&(Le=null)}function ot(e,t,r){ye.call(this,e,t),this.state=this.getInitialState?this.getInitialState():{},this.refs={},this._refProxies={},r!==Se&&et.call(this,e,t)}function at(e,t){ot.call(this,e,t)}Xe(ot.prototype=new ye,{constructor:ot,isReactComponent:{},replaceState:function(e,t){for(var r in this.setState(e,t),this.state)r in e||delete this.state[r]},getDOMNode:function(){return this.base},isMounted:function(){return!!this.base}}),Ke.prototype=ot.prototype,(at.prototype=new Ke).isPureReactComponent=!0,at.prototype.shouldComponentUpdate=function(e,t){return Ye(this.props,e)||Ye(this.state,t)};var it={version:"15.1.0",DOM:He,PropTypes:B,Children:De,render:Pe,createClass:Ze,createFactory:Fe,createElement:We,cloneElement:Ve,isValidElement:$e,findDOMNode:Ge,unmountComponentAtNode:Ne,Component:ot,PureComponent:at,unstable_renderSubtreeIntoContainer:Re,__spread:Xe},ut=Object.freeze({version:"15.1.0",DOM:He,PropTypes:B,Children:De,render:Pe,createClass:Ze,createFactory:Fe,createElement:We,cloneElement:Ve,isValidElement:$e,findDOMNode:Ge,unmountComponentAtNode:Ne,Component:ot,PureComponent:at,unstable_renderSubtreeIntoContainer:Re,__spread:Xe,default:it}),st="object"==W(S)&&S&&S.Object===Object&&S,lt="object"==("undefined"==typeof self?"undefined":W(self))&&self&&self.Object===Object&&self,ct=st||lt||Function("return this")(),ft=ct.Symbol,pt=Object.prototype,ht=pt.hasOwnProperty,dt=pt.toString,vt=ft?ft.toStringTag:void 0;var bt=function(e){var t=ht.call(e,vt),r=e[vt];try{e[vt]=void 0;var n=!0}catch(e){}var o=dt.call(e);return n&&(t?e[vt]=r:delete e[vt]),o},gt=Object.prototype.toString;var yt=function(e){return gt.call(e)},mt="[object Null]",_t="[object Undefined]",wt=ft?ft.toStringTag:void 0;var xt=function(e){return null==e?void 0===e?_t:mt:wt&&wt in Object(e)?bt(e):yt(e)},Ct=Array.isArray;var jt=function(e){return null!=e&&"object"==(void 0===e?"undefined":W(e))},St="[object String]";var Ot=function(e){return"string"==typeof e||!Ct(e)&&jt(e)&&xt(e)==St};var kt=function(s){return function(e,t,r){for(var n=-1,o=Object(e),a=r(e),i=a.length;i--;){var u=a[s?i:++n];if(!1===t(o[u],u,o))break}return e}}();var At=function(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n},Et="[object Arguments]";var Mt=function(e){return jt(e)&&xt(e)==Et},Pt=Object.prototype,Tt=Pt.hasOwnProperty,Rt=Pt.propertyIsEnumerable,Nt=Mt(function(){return arguments}())?Mt:function(e){return jt(e)&&Tt.call(e,"callee")&&!Rt.call(e,"callee")};var Lt=function(){return!1},Ut=k(function(e,t){var r=t&&!t.nodeType&&t,n=r&&e&&!e.nodeType&&e,o=n&&n.exports===r?ct.Buffer:void 0,a=(o?o.isBuffer:void 0)||Lt;e.exports=a}),Dt=9007199254740991,Ft=/^(?:0|[1-9]\d*)$/;var Ht=function(e,t){var r=void 0===e?"undefined":W(e);return!!(t=null==t?Dt:t)&&("number"==r||"symbol"!=r&&Ft.test(e))&&-1<e&&e%1==0&&e<t},Bt=9007199254740991;var zt=function(e){return"number"==typeof e&&-1<e&&e%1==0&&e<=Bt},Wt={};Wt["[object Float32Array]"]=Wt["[object Float64Array]"]=Wt["[object Int8Array]"]=Wt["[object Int16Array]"]=Wt["[object Int32Array]"]=Wt["[object Uint8Array]"]=Wt["[object Uint8ClampedArray]"]=Wt["[object Uint16Array]"]=Wt["[object Uint32Array]"]=!0,Wt["[object Arguments]"]=Wt["[object Array]"]=Wt["[object ArrayBuffer]"]=Wt["[object Boolean]"]=Wt["[object DataView]"]=Wt["[object Date]"]=Wt["[object Error]"]=Wt["[object Function]"]=Wt["[object Map]"]=Wt["[object Number]"]=Wt["[object Object]"]=Wt["[object RegExp]"]=Wt["[object Set]"]=Wt["[object String]"]=Wt["[object WeakMap]"]=!1;var It=function(e){return jt(e)&&zt(e.length)&&!!Wt[xt(e)]};var Vt=function(t){return function(e){return t(e)}},$t=k(function(e,t){var r=t&&!t.nodeType&&t,n=r&&e&&!e.nodeType&&e,o=n&&n.exports===r&&st.process,a=function(){try{return o&&o.binding&&o.binding("util")}catch(e){}}();e.exports=a}),qt=$t&&$t.isTypedArray,Xt=qt?Vt(qt):It,Yt=Object.prototype.hasOwnProperty;var Gt=function(e,t){var r=Ct(e),n=!r&&Nt(e),o=!r&&!n&&Ut(e),a=!r&&!n&&!o&&Xt(e),i=r||n||o||a,u=i?At(e.length,String):[],s=u.length;for(var l in e)!t&&!Yt.call(e,l)||i&&("length"==l||o&&("offset"==l||"parent"==l)||a&&("buffer"==l||"byteLength"==l||"byteOffset"==l)||Ht(l,s))||u.push(l);return u},Kt=Object.prototype;var Zt=function(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||Kt)};var Jt=function(t,r){return function(e){return t(r(e))}},Qt=Jt(Object.keys,Object),er=Object.prototype.hasOwnProperty;var tr=function(e){if(!Zt(e))return Qt(e);var t=[];for(var r in Object(e))er.call(e,r)&&"constructor"!=r&&t.push(r);return t};var rr=function(e){var t=void 0===e?"undefined":W(e);return null!=e&&("object"==t||"function"==t)},nr="[object AsyncFunction]",or="[object Function]",ar="[object GeneratorFunction]",ir="[object Proxy]";var ur=function(e){if(!rr(e))return!1;var t=xt(e);return t==or||t==ar||t==nr||t==ir};var sr=function(e){return null!=e&&zt(e.length)&&!ur(e)};var lr=function(e){return sr(e)?Gt(e):tr(e)};var cr=function(e,t){return e&&kt(e,t,lr)};var fr=function(e){return e};var pr=function(e){return"function"==typeof e?e:fr};var hr=function(e,t){return e&&cr(e,pr(t))},dr=Jt(Object.getPrototypeOf,Object),vr="[object Object]",br=Function.prototype,gr=Object.prototype,yr=br.toString,mr=gr.hasOwnProperty,_r=yr.call(Object);var wr=function(e){if(!jt(e)||xt(e)!=vr)return!1;var t=dr(e);if(null===t)return!0;var r=mr.call(t,"constructor")&&t.constructor;return"function"==typeof r&&r instanceof r&&yr.call(r)==_r};var xr=function(e,t){for(var r=-1,n=null==e?0:e.length,o=Array(n);++r<n;)o[r]=t(e[r],r,e);return o};var Cr=function(){this.__data__=[],this.size=0};var jr=function(e,t){return e===t||e!=e&&t!=t};var Sr=function(e,t){for(var r=e.length;r--;)if(jr(e[r][0],t))return r;return-1},Or=Array.prototype.splice;var kr=function(e){var t=this.__data__,r=Sr(t,e);return!(r<0||(r==t.length-1?t.pop():Or.call(t,r,1),--this.size,0))};var Ar=function(e){var t=this.__data__,r=Sr(t,e);return r<0?void 0:t[r][1]};var Er=function(e){return-1<Sr(this.__data__,e)};var Mr=function(e,t){var r=this.__data__,n=Sr(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};function Pr(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}Pr.prototype.clear=Cr,Pr.prototype.delete=kr,Pr.prototype.get=Ar,Pr.prototype.has=Er,Pr.prototype.set=Mr;var Tr=Pr;var Rr=function(){this.__data__=new Tr,this.size=0};var Nr=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r};var Lr=function(e){return this.__data__.get(e)};var Ur,Dr=function(e){return this.__data__.has(e)},Fr=ct["__core-js_shared__"],Hr=(Ur=/[^.]+$/.exec(Fr&&Fr.keys&&Fr.keys.IE_PROTO||""))?"Symbol(src)_1."+Ur:"";var Br=function(e){return!!Hr&&Hr in e},zr=Function.prototype.toString;var Wr=function(e){if(null!=e){try{return zr.call(e)}catch(e){}try{return e+""}catch(e){}}return""},Ir=/^\[object .+?Constructor\]$/,Vr=Function.prototype,$r=Object.prototype,qr=Vr.toString,Xr=$r.hasOwnProperty,Yr=RegExp("^"+qr.call(Xr).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var Gr=function(e){return!(!rr(e)||Br(e))&&(ur(e)?Yr:Ir).test(Wr(e))};var Kr=function(e,t){return null==e?void 0:e[t]};var Zr=function(e,t){var r=Kr(e,t);return Gr(r)?r:void 0},Jr=Zr(ct,"Map"),Qr=Zr(Object,"create");var en=function(){this.__data__=Qr?Qr(null):{},this.size=0};var tn=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},rn="__lodash_hash_undefined__",nn=Object.prototype.hasOwnProperty;var on=function(e){var t=this.__data__;if(Qr){var r=t[e];return r===rn?void 0:r}return nn.call(t,e)?t[e]:void 0},an=Object.prototype.hasOwnProperty;var un=function(e){var t=this.__data__;return Qr?void 0!==t[e]:an.call(t,e)},sn="__lodash_hash_undefined__";var ln=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=Qr&&void 0===t?sn:t,this};function cn(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}cn.prototype.clear=en,cn.prototype.delete=tn,cn.prototype.get=on,cn.prototype.has=un,cn.prototype.set=ln;var fn=cn;var pn=function(e){var t=void 0===e?"undefined":W(e);return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e};var hn=function(e,t){var r=e.__data__;return pn(t)?r["string"==typeof t?"string":"hash"]:r.map};var dn=function(e){var t=hn(this,e).delete(e);return this.size-=t?1:0,t};var vn=function(e){return hn(this,e).get(e)};var bn=function(e){return hn(this,e).has(e)};var gn=function(e,t){var r=hn(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};function yn(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}yn.prototype.clear=function(){this.size=0,this.__data__={hash:new fn,map:new(Jr||Tr),string:new fn}},yn.prototype.delete=dn,yn.prototype.get=vn,yn.prototype.has=bn,yn.prototype.set=gn;var mn=yn,_n=200;var wn=function(e,t){var r=this.__data__;if(r instanceof Tr){var n=r.__data__;if(!Jr||n.length<_n-1)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new mn(n)}return r.set(e,t),this.size=r.size,this};function xn(e){var t=this.__data__=new Tr(e);this.size=t.size}xn.prototype.clear=Rr,xn.prototype.delete=Nr,xn.prototype.get=Lr,xn.prototype.has=Dr,xn.prototype.set=wn;var Cn=xn,jn="__lodash_hash_undefined__";var Sn=function(e){return this.__data__.has(e)};function On(e){var t=-1,r=null==e?0:e.length;for(this.__data__=new mn;++t<r;)this.add(e[t])}On.prototype.add=On.prototype.push=function(e){return this.__data__.set(e,jn),this},On.prototype.has=Sn;var kn=On;var An=function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n;)if(t(e[r],r,e))return!0;return!1};var En=function(e,t){return e.has(t)},Mn=1,Pn=2;var Tn=function(e,t,r,n,o,a){var i=r&Mn,u=e.length,s=t.length;if(u!=s&&!(i&&u<s))return!1;var l=a.get(e);if(l&&a.get(t))return l==t;var c=-1,f=!0,p=r&Pn?new kn:void 0;for(a.set(e,t),a.set(t,e);++c<u;){var h=e[c],d=t[c];if(n)var v=i?n(d,h,c,t,e,a):n(h,d,c,e,t,a);if(void 0!==v){if(v)continue;f=!1;break}if(p){if(!An(t,function(e,t){if(!En(p,t)&&(h===e||o(h,e,r,n,a)))return p.push(t)})){f=!1;break}}else if(h!==d&&!o(h,d,r,n,a)){f=!1;break}}return a.delete(e),a.delete(t),f},Rn=ct.Uint8Array;var Nn=function(e){var r=-1,n=Array(e.size);return e.forEach(function(e,t){n[++r]=[t,e]}),n};var Ln=function(e){var t=-1,r=Array(e.size);return e.forEach(function(e){r[++t]=e}),r},Un=1,Dn=2,Fn="[object Boolean]",Hn="[object Date]",Bn="[object Error]",zn="[object Map]",Wn="[object Number]",In="[object RegExp]",Vn="[object Set]",$n="[object String]",qn="[object Symbol]",Xn="[object ArrayBuffer]",Yn="[object DataView]",Gn=ft?ft.prototype:void 0,Kn=Gn?Gn.valueOf:void 0;var Zn=function(e,t,r,n,o,a,i){switch(r){case Yn:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case Xn:return!(e.byteLength!=t.byteLength||!a(new Rn(e),new Rn(t)));case Fn:case Hn:case Wn:return jr(+e,+t);case Bn:return e.name==t.name&&e.message==t.message;case In:case $n:return e==t+"";case zn:var u=Nn;case Vn:var s=n&Un;if(u||(u=Ln),e.size!=t.size&&!s)return!1;var l=i.get(e);if(l)return l==t;n|=Dn,i.set(e,t);var c=Tn(u(e),u(t),n,o,a,i);return i.delete(e),c;case qn:if(Kn)return Kn.call(e)==Kn.call(t)}return!1};var Jn=function(e,t){for(var r=-1,n=t.length,o=e.length;++r<n;)e[o+r]=t[r];return e};var Qn=function(e,t,r){var n=t(e);return Ct(e)?n:Jn(n,r(e))};var eo=function(e,t){for(var r=-1,n=null==e?0:e.length,o=0,a=[];++r<n;){var i=e[r];t(i,r,e)&&(a[o++]=i)}return a};var to=function(){return[]},ro=Object.prototype.propertyIsEnumerable,no=Object.getOwnPropertySymbols,oo=no?function(t){return null==t?[]:(t=Object(t),eo(no(t),function(e){return ro.call(t,e)}))}:to;var ao=function(e){return Qn(e,lr,oo)},io=1,uo=Object.prototype.hasOwnProperty;var so=function(e,t,r,n,o,a){var i=r&io,u=ao(e),s=u.length;if(s!=ao(t).length&&!i)return!1;for(var l=s;l--;){var c=u[l];if(!(i?c in t:uo.call(t,c)))return!1}var f=a.get(e);if(f&&a.get(t))return f==t;var p=!0;a.set(e,t),a.set(t,e);for(var h=i;++l<s;){var d=e[c=u[l]],v=t[c];if(n)var b=i?n(v,d,c,t,e,a):n(d,v,c,e,t,a);if(!(void 0===b?d===v||o(d,v,r,n,a):b)){p=!1;break}h||(h="constructor"==c)}if(p&&!h){var g=e.constructor,y=t.constructor;g!=y&&"constructor"in e&&"constructor"in t&&!("function"==typeof g&&g instanceof g&&"function"==typeof y&&y instanceof y)&&(p=!1)}return a.delete(e),a.delete(t),p},lo=Zr(ct,"DataView"),co=Zr(ct,"Promise"),fo=Zr(ct,"Set"),po=Zr(ct,"WeakMap"),ho="[object Map]",vo="[object Promise]",bo="[object Set]",go="[object WeakMap]",yo="[object DataView]",mo=Wr(lo),_o=Wr(Jr),wo=Wr(co),xo=Wr(fo),Co=Wr(po),jo=xt;(lo&&jo(new lo(new ArrayBuffer(1)))!=yo||Jr&&jo(new Jr)!=ho||co&&jo(co.resolve())!=vo||fo&&jo(new fo)!=bo||po&&jo(new po)!=go)&&(jo=function(e){var t=xt(e),r="[object Object]"==t?e.constructor:void 0,n=r?Wr(r):"";if(n)switch(n){case mo:return yo;case _o:return ho;case wo:return vo;case xo:return bo;case Co:return go}return t});var So=jo,Oo=1,ko="[object Arguments]",Ao="[object Array]",Eo="[object Object]",Mo=Object.prototype.hasOwnProperty;var Po=function(e,t,r,n,o,a){var i=Ct(e),u=Ct(t),s=i?Ao:So(e),l=u?Ao:So(t),c=(s=s==ko?Eo:s)==Eo,f=(l=l==ko?Eo:l)==Eo,p=s==l;if(p&&Ut(e)){if(!Ut(t))return!1;i=!0,c=!1}if(p&&!c)return a||(a=new Cn),i||Xt(e)?Tn(e,t,r,n,o,a):Zn(e,t,s,r,n,o,a);if(!(r&Oo)){var h=c&&Mo.call(e,"__wrapped__"),d=f&&Mo.call(t,"__wrapped__");if(h||d){var v=h?e.value():e,b=d?t.value():t;return a||(a=new Cn),o(v,b,r,n,a)}}return!!p&&(a||(a=new Cn),so(e,t,r,n,o,a))};var To=function e(t,r,n,o,a){return t===r||(null==t||null==r||!jt(t)&&!jt(r)?t!=t&&r!=r:Po(t,r,n,o,e,a))},Ro=1,No=2;var Lo=function(e,t,r,n){var o=r.length,a=o,i=!n;if(null==e)return!a;for(e=Object(e);o--;){var u=r[o];if(i&&u[2]?u[1]!==e[u[0]]:!(u[0]in e))return!1}for(;++o<a;){var s=(u=r[o])[0],l=e[s],c=u[1];if(i&&u[2]){if(void 0===l&&!(s in e))return!1}else{var f=new Cn;if(n)var p=n(l,c,s,e,t,f);if(!(void 0===p?To(c,l,Ro|No,n,f):p))return!1}}return!0};var Uo=function(e){return e==e&&!rr(e)};var Do=function(e){for(var t=lr(e),r=t.length;r--;){var n=t[r],o=e[n];t[r]=[n,o,Uo(o)]}return t};var Fo=function(t,r){return function(e){return null!=e&&e[t]===r&&(void 0!==r||t in Object(e))}};var Ho=function(t){var r=Do(t);return 1==r.length&&r[0][2]?Fo(r[0][0],r[0][1]):function(e){return e===t||Lo(e,t,r)}},Bo="[object Symbol]";var zo=function(e){return"symbol"==(void 0===e?"undefined":W(e))||jt(e)&&xt(e)==Bo},Wo=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,Io=/^\w*$/;var Vo=function(e,t){if(Ct(e))return!1;var r=void 0===e?"undefined":W(e);return!("number"!=r&&"symbol"!=r&&"boolean"!=r&&null!=e&&!zo(e))||Io.test(e)||!Wo.test(e)||null!=t&&e in Object(t)},$o="Expected a function";function qo(a,i){if("function"!=typeof a||null!=i&&"function"!=typeof i)throw new TypeError($o);var e=function e(){var t=arguments,r=i?i.apply(this,t):t[0],n=e.cache;if(n.has(r))return n.get(r);var o=a.apply(this,t);return e.cache=n.set(r,o)||n,o};return e.cache=new(qo.Cache||mn),e}qo.Cache=mn;var Xo=qo,Yo=500;var Go=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Ko=/\\(\\)?/g,Zo=function(e){var t=Xo(e,function(e){return r.size===Yo&&r.clear(),e}),r=t.cache;return t}(function(e){var o=[];return 46===e.charCodeAt(0)&&o.push(""),e.replace(Go,function(e,t,r,n){o.push(r?n.replace(Ko,"$1"):t||e)}),o}),Jo=1/0,Qo=ft?ft.prototype:void 0,ea=Qo?Qo.toString:void 0;var ta=function e(t){if("string"==typeof t)return t;if(Ct(t))return xr(t,e)+"";if(zo(t))return ea?ea.call(t):"";var r=t+"";return"0"==r&&1/t==-Jo?"-0":r};var ra=function(e){return null==e?"":ta(e)};var na=function(e,t){return Ct(e)?e:Vo(e,t)?[e]:Zo(ra(e))},oa=1/0;var aa=function(e){if("string"==typeof e||zo(e))return e;var t=e+"";return"0"==t&&1/e==-oa?"-0":t};var ia=function(e,t){for(var r=0,n=(t=na(t,e)).length;null!=e&&r<n;)e=e[aa(t[r++])];return r&&r==n?e:void 0};var ua=function(e,t,r){var n=null==e?void 0:ia(e,t);return void 0===n?r:n};var sa=function(e,t){return null!=e&&t in Object(e)};var la=function(e,t,r){for(var n=-1,o=(t=na(t,e)).length,a=!1;++n<o;){var i=aa(t[n]);if(!(a=null!=e&&r(e,i)))break;e=e[i]}return a||++n!=o?a:!!(o=null==e?0:e.length)&&zt(o)&&Ht(i,o)&&(Ct(e)||Nt(e))};var ca=function(e,t){return null!=e&&la(e,t,sa)},fa=1,pa=2;var ha=function(r,n){return Vo(r)&&Uo(n)?Fo(aa(r),n):function(e){var t=ua(e,r);return void 0===t&&t===n?ca(e,r):To(n,t,fa|pa)}};var da=function(t){return function(e){return null==e?void 0:e[t]}};var va=function(t){return function(e){return ia(e,t)}};var ba=function(e){return Vo(e)?da(aa(e)):va(e)};var ga=function(e){return"function"==typeof e?e:null==e?fr:"object"==(void 0===e?"undefined":W(e))?Ct(e)?ha(e[0],e[1]):Ho(e):ba(e)};var ya=function(a,i){return function(e,t){if(null==e)return e;if(!sr(e))return a(e,t);for(var r=e.length,n=i?r:-1,o=Object(e);(i?n--:++n<r)&&!1!==t(o[n],n,o););return e}}(cr);var ma=function(e,n){var o=-1,a=sr(e)?Array(e.length):[];return ya(e,function(e,t,r){a[++o]=n(e,t,r)}),a};var _a=function(e,t){return(Ct(e)?xr:ma)(e,ga(t,3))},wa=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.flattenNames=void 0;var n=r(Ot),o=r(hr),a=r(wr),i=r(_a);function r(e){return e&&e.__esModule?e:{default:e}}var u=t.flattenNames=function t(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],r=[];return(0,i.default)(e,function(e){Array.isArray(e)?t(e).map(function(e){return r.push(e)}):(0,a.default)(e)?(0,o.default)(e,function(e,t){!0===e&&r.push(t),r.push(t+"-"+e)}):(0,n.default)(e)&&r.push(e)}),r};t.default=u});O(wa);wa.flattenNames;var xa=function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&!1!==t(e[r],r,e););return e},Ca=function(){try{var e=Zr(Object,"defineProperty");return e({},"",{}),e}catch(e){}}();var ja=function(e,t,r){"__proto__"==t&&Ca?Ca(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r},Sa=Object.prototype.hasOwnProperty;var Oa=function(e,t,r){var n=e[t];Sa.call(e,t)&&jr(n,r)&&(void 0!==r||t in e)||ja(e,t,r)};var ka=function(e,t,r,n){var o=!r;r||(r={});for(var a=-1,i=t.length;++a<i;){var u=t[a],s=n?n(r[u],e[u],u,r,e):void 0;void 0===s&&(s=e[u]),o?ja(r,u,s):Oa(r,u,s)}return r};var Aa=function(e,t){return e&&ka(t,lr(t),e)};var Ea=function(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t},Ma=Object.prototype.hasOwnProperty;var Pa=function(e){if(!rr(e))return Ea(e);var t=Zt(e),r=[];for(var n in e)("constructor"!=n||!t&&Ma.call(e,n))&&r.push(n);return r};var Ta=function(e){return sr(e)?Gt(e,!0):Pa(e)};var Ra=function(e,t){return e&&ka(t,Ta(t),e)},Na=k(function(e,t){var r=t&&!t.nodeType&&t,n=r&&e&&!e.nodeType&&e,o=n&&n.exports===r?ct.Buffer:void 0,a=o?o.allocUnsafe:void 0;e.exports=function(e,t){if(t)return e.slice();var r=e.length,n=a?a(r):new e.constructor(r);return e.copy(n),n}});var La=function(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t};var Ua=function(e,t){return ka(e,oo(e),t)},Da=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)Jn(t,oo(e)),e=dr(e);return t}:to;var Fa=function(e,t){return ka(e,Da(e),t)};var Ha=function(e){return Qn(e,Ta,Da)},Ba=Object.prototype.hasOwnProperty;var za=function(e){var t=e.length,r=new e.constructor(t);return t&&"string"==typeof e[0]&&Ba.call(e,"index")&&(r.index=e.index,r.input=e.input),r};var Wa=function(e){var t=new e.constructor(e.byteLength);return new Rn(t).set(new Rn(e)),t};var Ia=function(e,t){var r=t?Wa(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)},Va=/\w*$/;var $a=function(e){var t=new e.constructor(e.source,Va.exec(e));return t.lastIndex=e.lastIndex,t},qa=ft?ft.prototype:void 0,Xa=qa?qa.valueOf:void 0;var Ya=function(e){return Xa?Object(Xa.call(e)):{}};var Ga=function(e,t){var r=t?Wa(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)},Ka="[object Boolean]",Za="[object Date]",Ja="[object Map]",Qa="[object Number]",ei="[object RegExp]",ti="[object Set]",ri="[object String]",ni="[object Symbol]",oi="[object ArrayBuffer]",ai="[object DataView]",ii="[object Float32Array]",ui="[object Float64Array]",si="[object Int8Array]",li="[object Int16Array]",ci="[object Int32Array]",fi="[object Uint8Array]",pi="[object Uint8ClampedArray]",hi="[object Uint16Array]",di="[object Uint32Array]";var vi=function(e,t,r){var n=e.constructor;switch(t){case oi:return Wa(e);case Ka:case Za:return new n(+e);case ai:return Ia(e,r);case ii:case ui:case si:case li:case ci:case fi:case pi:case hi:case di:return Ga(e,r);case Ja:return new n;case Qa:case ri:return new n(e);case ei:return $a(e);case ti:return new n;case ni:return Ya(e)}},bi=Object.create,gi=function(){function r(){}return function(e){if(!rr(e))return{};if(bi)return bi(e);r.prototype=e;var t=new r;return r.prototype=void 0,t}}();var yi=function(e){return"function"!=typeof e.constructor||Zt(e)?{}:gi(dr(e))},mi="[object Map]";var _i=function(e){return jt(e)&&So(e)==mi},wi=$t&&$t.isMap,xi=wi?Vt(wi):_i,Ci="[object Set]";var ji=function(e){return jt(e)&&So(e)==Ci},Si=$t&&$t.isSet,Oi=Si?Vt(Si):ji,ki=1,Ai=2,Ei=4,Mi="[object Arguments]",Pi="[object Function]",Ti="[object GeneratorFunction]",Ri="[object Object]",Ni={};Ni[Mi]=Ni["[object Array]"]=Ni["[object ArrayBuffer]"]=Ni["[object DataView]"]=Ni["[object Boolean]"]=Ni["[object Date]"]=Ni["[object Float32Array]"]=Ni["[object Float64Array]"]=Ni["[object Int8Array]"]=Ni["[object Int16Array]"]=Ni["[object Int32Array]"]=Ni["[object Map]"]=Ni["[object Number]"]=Ni[Ri]=Ni["[object RegExp]"]=Ni["[object Set]"]=Ni["[object String]"]=Ni["[object Symbol]"]=Ni["[object Uint8Array]"]=Ni["[object Uint8ClampedArray]"]=Ni["[object Uint16Array]"]=Ni["[object Uint32Array]"]=!0,Ni["[object Error]"]=Ni[Pi]=Ni["[object WeakMap]"]=!1;var Li=function r(n,o,a,e,t,i){var u,s=o&ki,l=o&Ai,c=o&Ei;if(a&&(u=t?a(n,e,t,i):a(n)),void 0!==u)return u;if(!rr(n))return n;var f=Ct(n);if(f){if(u=za(n),!s)return La(n,u)}else{var p=So(n),h=p==Pi||p==Ti;if(Ut(n))return Na(n,s);if(p==Ri||p==Mi||h&&!t){if(u=l||h?{}:yi(n),!s)return l?Fa(n,Ra(u,n)):Ua(n,Aa(u,n))}else{if(!Ni[p])return t?n:{};u=vi(n,p,s)}}i||(i=new Cn);var d=i.get(n);if(d)return d;if(i.set(n,u),Oi(n))return n.forEach(function(e){u.add(r(e,o,a,e,n,i))}),u;if(xi(n))return n.forEach(function(e,t){u.set(t,r(e,o,a,t,n,i))}),u;var v=c?l?Ha:ao:l?keysIn:lr,b=f?void 0:v(n);return xa(b||n,function(e,t){b&&(e=n[t=e]),Oa(u,t,r(e,o,a,t,n,i))}),u},Ui=1,Di=4;var Fi=function(e){return Li(e,Ui|Di)},Hi=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.mergeClasses=void 0;var o=n(hr),r=n(Fi),a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};function n(e){return e&&e.__esModule?e:{default:e}}var i=t.mergeClasses=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=t.default&&(0,r.default)(t.default)||{};return e.map(function(e){var r=t[e];return r&&(0,o.default)(r,function(e,t){n[t]||(n[t]={}),n[t]=a({},n[t],r[t])}),e}),n};t.default=i});O(Hi);Hi.mergeClasses;var Bi=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.autoprefix=void 0;var r,o=(r=hr)&&r.__esModule?r:{default:r},a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};var i={borderRadius:function(e){return{msBorderRadius:e,MozBorderRadius:e,OBorderRadius:e,WebkitBorderRadius:e,borderRadius:e}},boxShadow:function(e){return{msBoxShadow:e,MozBoxShadow:e,OBoxShadow:e,WebkitBoxShadow:e,boxShadow:e}},userSelect:function(e){return{WebkitTouchCallout:e,KhtmlUserSelect:e,MozUserSelect:e,msUserSelect:e,WebkitUserSelect:e,userSelect:e}},flex:function(e){return{WebkitBoxFlex:e,MozBoxFlex:e,WebkitFlex:e,msFlex:e,flex:e}},flexBasis:function(e){return{WebkitFlexBasis:e,flexBasis:e}},justifyContent:function(e){return{WebkitJustifyContent:e,justifyContent:e}},transition:function(e){return{msTransition:e,MozTransition:e,OTransition:e,WebkitTransition:e,transition:e}},transform:function(e){return{msTransform:e,MozTransform:e,OTransform:e,WebkitTransform:e,transform:e}},absolute:function(e){var t=e&&e.split(" ");return{position:"absolute",top:t&&t[0],right:t&&t[1],bottom:t&&t[2],left:t&&t[3]}},extend:function(e,t){var r=t[e];return r||{extend:e}}},n=t.autoprefix=function(e){var r={};return(0,o.default)(e,function(e,t){var n={};(0,o.default)(e,function(e,t){var r=i[t];r?n=a({},n,r(e)):n[t]=e}),r[t]=n}),r};t.default=n});O(Bi);Bi.autoprefix;var zi=ut&&it||ut,Wi=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.hover=void 0;var r,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=(r=zi)&&r.__esModule?r:{default:r};function f(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==(void 0===t?"undefined":W(t))&&"function"!=typeof t?e:t}var n=t.hover=function(u){var s=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"span";return function(e){function i(){var e,t,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];return(t=r=f(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(o)))).state={hover:!1},r.handleMouseOver=function(){return r.setState({hover:!0})},r.handleMouseOut=function(){return r.setState({hover:!1})},r.render=function(){return c.default.createElement(s,{onMouseOver:r.handleMouseOver,onMouseOut:r.handleMouseOut},c.default.createElement(u,l({},r.props,r.state)))},f(r,t)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+(void 0===t?"undefined":W(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,c.default.Component),i}()};t.default=n});O(Wi);Wi.hover;var Ii=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.active=void 0;var r,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=(r=zi)&&r.__esModule?r:{default:r};function f(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==(void 0===t?"undefined":W(t))&&"function"!=typeof t?e:t}var n=t.active=function(u){var s=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"span";return function(e){function i(){var e,t,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];return(t=r=f(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(o)))).state={active:!1},r.handleMouseDown=function(){return r.setState({active:!0})},r.handleMouseUp=function(){return r.setState({active:!1})},r.render=function(){return c.default.createElement(s,{onMouseDown:r.handleMouseDown,onMouseUp:r.handleMouseUp},c.default.createElement(u,l({},r.props,r.state)))},f(r,t)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+(void 0===t?"undefined":W(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,c.default.Component),i}()};t.default=n});O(Ii);Ii.active;var Vi=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});t.default=function(e,t){var r={},n=function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];r[e]=t};return 0===e&&n("first-child"),e===t-1&&n("last-child"),(0===e||e%2==0)&&n("even"),1===Math.abs(e%2)&&n("odd"),n("nth-child",e),r}});O(Vi);var $i=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.ReactCSS=t.loop=t.handleActive=t.handleHover=t.hover=void 0;var i=a(wa),u=a(Hi),s=a(Bi),r=a(Wi),n=a(Ii),o=a(Vi);function a(e){return e&&e.__esModule?e:{default:e}}t.hover=r.default,t.handleHover=r.default,t.handleActive=n.default,t.loop=o.default;var l=t.ReactCSS=function(e){for(var t=arguments.length,r=Array(1<t?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];var o=(0,i.default)(r),a=(0,u.default)(e,o);return(0,s.default)(a)};t.default=l}),qi=O($i),Xi=($i.ReactCSS,$i.loop,$i.handleActive,$i.handleHover,$i.hover,function(e,t,r,n){e.preventDefault();var o=n.clientWidth,a=n.clientHeight,i="number"==typeof e.pageX?e.pageX:e.touches[0].pageX,u="number"==typeof e.pageY?e.pageY:e.touches[0].pageY,s=i-(n.getBoundingClientRect().left+window.pageXOffset),l=u-(n.getBoundingClientRect().top+window.pageYOffset);if("vertical"===r.direction){var c=void 0;if(c=l<0?0:a<l?1:Math.round(100*l/a)/100,r.hsl.a!==c)return{h:r.hsl.h,s:r.hsl.s,l:r.hsl.l,a:c,source:"rgb"}}else{var f=void 0;if(f=s<0?0:o<s?1:Math.round(100*s/o)/100,r.a!==f)return{h:r.hsl.h,s:r.hsl.s,l:r.hsl.l,a:f,source:"rgb"}}return null}),Yi={},Gi=function(e,t,r,n){var o=e+"-"+t+"-"+r+(n?"-server":""),a=function(e,t,r,n){if("undefined"==typeof document&&!n)return null;var o=n?new n:document.createElement("canvas");o.width=2*r,o.height=2*r;var a=o.getContext("2d");return a?(a.fillStyle=e,a.fillRect(0,0,o.width,o.height),a.fillStyle=t,a.fillRect(0,0,r,r),a.translate(r,r),a.fillRect(0,0,r,r),o.toDataURL()):null}(e,t,r,n);return Yi[o]?Yi[o]:Yi[o]=a},Ki=function(e){var t=e.white,r=e.grey,n=e.size,o=e.renderers,a=e.borderRadius,i=e.boxShadow,u=qi({default:{grid:{borderRadius:a,boxShadow:i,absolute:"0px 0px 0px 0px",background:"url("+Gi(t,r,n,o.canvas)+") center left"}}});return it.createElement("div",{style:u.grid})};Ki.defaultProps={size:8,white:"transparent",grey:"rgba(0,0,0,.08)",renderers:{}};var Zi=function(a){function i(){var e,n;U(this,i);for(var t=arguments.length,r=Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n=H(this,a.call.apply(a,[this].concat(r)))).handleChange=function(e,t){var r=Xi(e,t,n.props,n.container);r&&n.props.onChange&&n.props.onChange(r,e)},n.handleMouseDown=function(e){n.handleChange(e,!0),window.addEventListener("mousemove",n.handleChange),window.addEventListener("mouseup",n.handleMouseUp)},n.handleMouseUp=function(){n.unbindEventListeners()},n.unbindEventListeners=function(){window.removeEventListener("mousemove",n.handleChange),window.removeEventListener("mouseup",n.handleMouseUp)},H(n,e)}return F(i,a),i.prototype.componentWillUnmount=function(){this.unbindEventListeners()},i.prototype.render=function(){var t=this,e=this.props.rgb,r=qi({default:{alpha:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius},checkboard:{absolute:"0px 0px 0px 0px",overflow:"hidden",borderRadius:this.props.radius},gradient:{absolute:"0px 0px 0px 0px",background:"linear-gradient(to right, rgba("+e.r+","+e.g+","+e.b+", 0) 0%,\n           rgba("+e.r+","+e.g+","+e.b+", 1) 100%)",boxShadow:this.props.shadow,borderRadius:this.props.radius},container:{position:"relative",height:"100%",margin:"0 3px"},pointer:{position:"absolute",left:100*e.a+"%"},slider:{width:"4px",borderRadius:"1px",height:"8px",boxShadow:"0 0 2px rgba(0, 0, 0, .6)",background:"#fff",marginTop:"1px",transform:"translateX(-2px)"}},vertical:{gradient:{background:"linear-gradient(to bottom, rgba("+e.r+","+e.g+","+e.b+", 0) 0%,\n           rgba("+e.r+","+e.g+","+e.b+", 1) 100%)"},pointer:{left:0,top:100*e.a+"%"}},overwrite:D({},this.props.style)},{vertical:"vertical"===this.props.direction,overwrite:!0});return it.createElement("div",{style:r.alpha},it.createElement("div",{style:r.checkboard},it.createElement(Ki,{renderers:this.props.renderers})),it.createElement("div",{style:r.gradient}),it.createElement("div",{style:r.container,ref:function(e){return t.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},it.createElement("div",{style:r.pointer},this.props.pointer?it.createElement(this.props.pointer,this.props):it.createElement("div",{style:r.slider}))))},i}(at||ot),Ji=function(t){function r(e){U(this,r);var u=H(this,t.call(this));return u.handleBlur=function(){u.state.blurValue&&u.setState({value:u.state.blurValue,blurValue:null})},u.handleChange=function(e){var t;u.props.label?u.props.onChange&&u.props.onChange(((t={})[u.props.label]=e.target.value,t),e):u.props.onChange&&u.props.onChange(e.target.value,e);u.setState({value:e.target.value})},u.handleKeyDown=function(e){var t=String(e.target.value),r=-1<t.indexOf("%"),n=Number(t.replace(/%/g,""));if(!isNaN(n)){var o=u.props.arrowOffset||1;if(38===e.keyCode){var a;if(null!==u.props.label)u.props.onChange&&u.props.onChange(((a={})[u.props.label]=n+o,a),e);else u.props.onChange&&u.props.onChange(n+o,e);r?u.setState({value:n+o+"%"}):u.setState({value:n+o})}if(40===e.keyCode){var i;if(null!==u.props.label)u.props.onChange&&u.props.onChange(((i={})[u.props.label]=n-o,i),e);else u.props.onChange&&u.props.onChange(n-o,e);r?u.setState({value:n-o+"%"}):u.setState({value:n-o})}}},u.handleDrag=function(e){if(u.props.dragLabel){var t,r=Math.round(u.props.value+e.movementX);if(0<=r&&r<=u.props.dragMax)u.props.onChange&&u.props.onChange(((t={})[u.props.label]=r,t),e)}},u.handleMouseDown=function(e){u.props.dragLabel&&(e.preventDefault(),u.handleDrag(e),window.addEventListener("mousemove",u.handleDrag),window.addEventListener("mouseup",u.handleMouseUp))},u.handleMouseUp=function(){u.unbindEventListeners()},u.unbindEventListeners=function(){window.removeEventListener("mousemove",u.handleDrag),window.removeEventListener("mouseup",u.handleMouseUp)},u.state={value:String(e.value).toUpperCase(),blurValue:String(e.value).toUpperCase()},u}return F(r,t),r.prototype.componentWillReceiveProps=function(e){var t=this.input;e.value!==this.state.value&&(t===document.activeElement?this.setState({blurValue:String(e.value).toUpperCase()}):this.setState({value:String(e.value).toUpperCase(),blurValue:!this.state.blurValue&&String(e.value).toUpperCase()}))},r.prototype.componentWillUnmount=function(){this.unbindEventListeners()},r.prototype.render=function(){var t=this,e=qi({default:{wrap:{position:"relative"}},"user-override":{wrap:this.props.style&&this.props.style.wrap?this.props.style.wrap:{},input:this.props.style&&this.props.style.input?this.props.style.input:{},label:this.props.style&&this.props.style.label?this.props.style.label:{}},"dragLabel-true":{label:{cursor:"ew-resize"}}},{"user-override":!0},this.props);return it.createElement("div",{style:e.wrap},it.createElement("input",{style:e.input,ref:function(e){return t.input=e},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?it.createElement("span",{style:e.label,onMouseDown:this.handleMouseDown},this.props.label):null)},r}(at||ot),Qi=function(e,t,r,n){e.preventDefault();var o=n.clientWidth,a=n.clientHeight,i="number"==typeof e.pageX?e.pageX:e.touches[0].pageX,u="number"==typeof e.pageY?e.pageY:e.touches[0].pageY,s=i-(n.getBoundingClientRect().left+window.pageXOffset),l=u-(n.getBoundingClientRect().top+window.pageYOffset);if("vertical"===r.direction){var c=void 0;if(l<0)c=359;else if(a<l)c=0;else{c=360*(-100*l/a+100)/100}if(r.hsl.h!==c)return{h:c,s:r.hsl.s,l:r.hsl.l,a:r.hsl.a,source:"rgb"}}else{var f=void 0;if(s<0)f=0;else if(o<s)f=359;else{f=360*(100*s/o)/100}if(r.hsl.h!==f)return{h:f,s:r.hsl.s,l:r.hsl.l,a:r.hsl.a,source:"rgb"}}return null},eu=function(a){function i(){var e,n;U(this,i);for(var t=arguments.length,r=Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n=H(this,a.call.apply(a,[this].concat(r)))).handleChange=function(e,t){var r=Qi(e,t,n.props,n.container);r&&n.props.onChange&&n.props.onChange(r,e)},n.handleMouseDown=function(e){n.handleChange(e,!0),window.addEventListener("mousemove",n.handleChange),window.addEventListener("mouseup",n.handleMouseUp)},n.handleMouseUp=function(){n.unbindEventListeners()},H(n,e)}return F(i,a),i.prototype.componentWillUnmount=function(){this.unbindEventListeners()},i.prototype.unbindEventListeners=function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)},i.prototype.render=function(){var t=this,e=this.props.direction,r=void 0===e?"horizontal":e,n=qi({default:{hue:{absolute:"0px 0px 0px 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:100*this.props.hsl.h/360+"%"},slider:{marginTop:"1px",width:"4px",borderRadius:"1px",height:"8px",boxShadow:"0 0 2px rgba(0, 0, 0, .6)",background:"#fff",transform:"translateX(-2px)"}},vertical:{pointer:{left:"0px",top:-100*this.props.hsl.h/360+100+"%"}}},{vertical:"vertical"===r});return it.createElement("div",{style:n.hue},it.createElement("div",{className:"hue-"+r,style:n.container,ref:function(e){return t.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},it.createElement("style",null,"\n            .hue-horizontal {\n              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\n                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to right, #f00 0%, #ff0\n                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n\n            .hue-vertical {\n              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\n                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n          "),it.createElement("div",{style:n.pointer},this.props.pointer?it.createElement(this.props.pointer,this.props):it.createElement("div",{style:n.slider}))))},i}(at||ot);B.string,B.oneOf([0,1,2,3,4,5]),B.number;var tu=function(){return ct.Date.now()},ru=NaN,nu=/^\s+|\s+$/g,ou=/^[-+]0x[0-9a-f]+$/i,au=/^0b[01]+$/i,iu=/^0o[0-7]+$/i,uu=parseInt;var su=function(e){if("number"==typeof e)return e;if(zo(e))return ru;if(rr(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=rr(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(nu,"");var r=au.test(e);return r||iu.test(e)?uu(e.slice(2),r?2:8):ou.test(e)?ru:+e},lu="Expected a function",cu=Math.max,fu=Math.min;var pu=function(n,o,e){var a,i,u,s,l,c,f=0,p=!1,h=!1,t=!0;if("function"!=typeof n)throw new TypeError(lu);function d(e){var t=a,r=i;return a=i=void 0,f=e,s=n.apply(r,t)}function v(e){var t=e-c;return void 0===c||o<=t||t<0||h&&u<=e-f}function b(){var e,t,r=tu();if(v(r))return g(r);l=setTimeout(b,(t=o-((e=r)-c),h?fu(t,u-(e-f)):t))}function g(e){return l=void 0,t&&a?d(e):(a=i=void 0,s)}function r(){var e,t=tu(),r=v(t);if(a=arguments,i=this,c=t,r){if(void 0===l)return f=e=c,l=setTimeout(b,o),p?d(e):s;if(h)return l=setTimeout(b,o),d(c)}return void 0===l&&(l=setTimeout(b,o)),s}return o=su(o)||0,rr(e)&&(p=!!e.leading,u=(h="maxWait"in e)?cu(su(e.maxWait)||0,o):u,t="trailing"in e?!!e.trailing:t),r.cancel=function(){void 0!==l&&clearTimeout(l),a=c=i=l=void(f=0)},r.flush=function(){return void 0===l?s:g(tu())},r},hu="Expected a function";var du=function(e,t,r){var n=!0,o=!0;if("function"!=typeof e)throw new TypeError(hu);return rr(r)&&(n="leading"in r?!!r.leading:n,o="trailing"in r?!!r.trailing:o),pu(e,t,{leading:n,maxWait:t,trailing:o})},vu=function(e,t,r,n){e.preventDefault();var o=n.getBoundingClientRect(),a=o.width,i=o.height,u="number"==typeof e.pageX?e.pageX:e.touches[0].pageX,s="number"==typeof e.pageY?e.pageY:e.touches[0].pageY,l=u-(n.getBoundingClientRect().left+window.pageXOffset),c=s-(n.getBoundingClientRect().top+window.pageYOffset);l<0?l=0:a<l?l=a:c<0?c=0:i<c&&(c=i);var f=100*l/a,p=-100*c/i+100;return{h:r.hsl.h,s:f,v:p,a:r.hsl.a,source:"rgb"}},bu=function(t){function n(e){U(this,n);var r=H(this,t.call(this,e));return r.handleChange=function(e,t){r.props.onChange&&r.throttle(r.props.onChange,vu(e,t,r.props,r.container),e)},r.handleMouseDown=function(e){r.handleChange(e,!0),window.addEventListener("mousemove",r.handleChange),window.addEventListener("mouseup",r.handleMouseUp)},r.handleMouseUp=function(){r.unbindEventListeners()},r.throttle=du(function(e,t,r){e(t,r)},50),r}return F(n,t),n.prototype.componentWillUnmount=function(){this.unbindEventListeners()},n.prototype.unbindEventListeners=function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)},n.prototype.render=function(){var t=this,e=this.props.style||{},r=e.color,n=e.white,o=e.black,a=e.pointer,i=e.circle,u=qi({default:{color:{absolute:"0px 0px 0px 0px",background:"hsl("+this.props.hsl.h+",100%, 50%)",borderRadius:this.props.radius},white:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius},black:{absolute:"0px 0px 0px 0px",boxShadow:this.props.shadow,borderRadius:this.props.radius},pointer:{position:"absolute",top:-100*this.props.hsv.v+100+"%",left:100*this.props.hsv.s+"%",cursor:"default"},circle:{width:"4px",height:"4px",boxShadow:"0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)",borderRadius:"50%",cursor:"hand",transform:"translate(-2px, -2px)"}},custom:{color:r,white:n,black:o,pointer:a,circle:i}},{custom:!!this.props.style});return it.createElement("div",{style:u.color,ref:function(e){return t.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},it.createElement("style",null,"\n          .saturation-white {\n            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\n            background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n          }\n          .saturation-black {\n            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\n            background: linear-gradient(to top, #000, rgba(0,0,0,0));\n          }\n        "),it.createElement("div",{style:u.white,className:"saturation-white"},it.createElement("div",{style:u.black,className:"saturation-black"}),it.createElement("div",{style:u.pointer},this.props.pointer?it.createElement(this.props.pointer,this.props):it.createElement("div",{style:u.circle}))))},n}(at||ot);var gu=function(e,t){return(Ct(e)?xa:ya)(e,pr(t))},yu=k(function(z){!function(f){var p=/^\s+/,h=/\s+$/,n=0,i=f.round,d=f.min,v=f.max,e=f.random;function c(e,t){if(t=t||{},(e=e||"")instanceof c)return e;if(!(this instanceof c))return new c(e,t);var r=function(e){var t={r:0,g:0,b:0},r=1,n=null,o=null,a=null,i=!1,u=!1;"string"==typeof e&&(e=function(e){e=e.replace(p,"").replace(h,"").toLowerCase();var t,r=!1;if(O[e])e=O[e],r=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};if(t=H.rgb.exec(e))return{r:t[1],g:t[2],b:t[3]};if(t=H.rgba.exec(e))return{r:t[1],g:t[2],b:t[3],a:t[4]};if(t=H.hsl.exec(e))return{h:t[1],s:t[2],l:t[3]};if(t=H.hsla.exec(e))return{h:t[1],s:t[2],l:t[3],a:t[4]};if(t=H.hsv.exec(e))return{h:t[1],s:t[2],v:t[3]};if(t=H.hsva.exec(e))return{h:t[1],s:t[2],v:t[3],a:t[4]};if(t=H.hex8.exec(e))return{r:P(t[1]),g:P(t[2]),b:P(t[3]),a:L(t[4]),format:r?"name":"hex8"};if(t=H.hex6.exec(e))return{r:P(t[1]),g:P(t[2]),b:P(t[3]),format:r?"name":"hex"};if(t=H.hex4.exec(e))return{r:P(t[1]+""+t[1]),g:P(t[2]+""+t[2]),b:P(t[3]+""+t[3]),a:L(t[4]+""+t[4]),format:r?"name":"hex8"};if(t=H.hex3.exec(e))return{r:P(t[1]+""+t[1]),g:P(t[2]+""+t[2]),b:P(t[3]+""+t[3]),format:r?"name":"hex"};return!1}(e));"object"==(void 0===e?"undefined":W(e))&&(B(e.r)&&B(e.g)&&B(e.b)?(s=e.r,l=e.g,c=e.b,t={r:255*E(s,255),g:255*E(l,255),b:255*E(c,255)},i=!0,u="%"===String(e.r).substr(-1)?"prgb":"rgb"):B(e.h)&&B(e.s)&&B(e.v)?(n=R(e.s),o=R(e.v),t=function(e,t,r){e=6*E(e,360),t=E(t,100),r=E(r,100);var n=f.floor(e),o=e-n,a=r*(1-t),i=r*(1-o*t),u=r*(1-(1-o)*t),s=n%6;return{r:255*[r,i,a,a,u,r][s],g:255*[u,r,r,i,a,a][s],b:255*[a,a,u,r,r,i][s]}}(e.h,n,o),i=!0,u="hsv"):B(e.h)&&B(e.s)&&B(e.l)&&(n=R(e.s),a=R(e.l),t=function(e,t,r){var n,o,a;function i(e,t,r){return r<0&&(r+=1),1<r&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e}if(e=E(e,360),t=E(t,100),r=E(r,100),0===t)n=o=a=r;else{var u=r<.5?r*(1+t):r+t-r*t,s=2*r-u;n=i(s,u,e+1/3),o=i(s,u,e),a=i(s,u,e-1/3)}return{r:255*n,g:255*o,b:255*a}}(e.h,n,a),i=!0,u="hsl"),e.hasOwnProperty("a")&&(r=e.a));var s,l,c;return r=A(r),{ok:i,format:e.format||u,r:d(255,v(t.r,0)),g:d(255,v(t.g,0)),b:d(255,v(t.b,0)),a:r}}(e);this._originalInput=e,this._r=r.r,this._g=r.g,this._b=r.b,this._a=r.a,this._roundA=i(100*this._a)/100,this._format=t.format||r.format,this._gradientType=t.gradientType,this._r<1&&(this._r=i(this._r)),this._g<1&&(this._g=i(this._g)),this._b<1&&(this._b=i(this._b)),this._ok=r.ok,this._tc_id=n++}function o(e,t,r){e=E(e,255),t=E(t,255),r=E(r,255);var n,o,a=v(e,t,r),i=d(e,t,r),u=(a+i)/2;if(a==i)n=o=0;else{var s=a-i;switch(o=.5<u?s/(2-a-i):s/(a+i),a){case e:n=(t-r)/s+(t<r?6:0);break;case t:n=(r-e)/s+2;break;case r:n=(e-t)/s+4}n/=6}return{h:n,s:o,l:u}}function a(e,t,r){e=E(e,255),t=E(t,255),r=E(r,255);var n,o,a=v(e,t,r),i=d(e,t,r),u=a,s=a-i;if(o=0===a?0:s/a,a==i)n=0;else{switch(a){case e:n=(t-r)/s+(t<r?6:0);break;case t:n=(r-e)/s+2;break;case r:n=(e-t)/s+4}n/=6}return{h:n,s:o,v:u}}function t(e,t,r,n){var o=[T(i(e).toString(16)),T(i(t).toString(16)),T(i(r).toString(16))];return n&&o[0].charAt(0)==o[0].charAt(1)&&o[1].charAt(0)==o[1].charAt(1)&&o[2].charAt(0)==o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function u(e,t,r,n){return[T(N(n)),T(i(e).toString(16)),T(i(t).toString(16)),T(i(r).toString(16))].join("")}function r(e,t){t=0===t?0:t||10;var r=c(e).toHsl();return r.s-=t/100,r.s=M(r.s),c(r)}function s(e,t){t=0===t?0:t||10;var r=c(e).toHsl();return r.s+=t/100,r.s=M(r.s),c(r)}function l(e){return c(e).desaturate(100)}function b(e,t){t=0===t?0:t||10;var r=c(e).toHsl();return r.l+=t/100,r.l=M(r.l),c(r)}function g(e,t){t=0===t?0:t||10;var r=c(e).toRgb();return r.r=v(0,d(255,r.r-i(-t/100*255))),r.g=v(0,d(255,r.g-i(-t/100*255))),r.b=v(0,d(255,r.b-i(-t/100*255))),c(r)}function y(e,t){t=0===t?0:t||10;var r=c(e).toHsl();return r.l-=t/100,r.l=M(r.l),c(r)}function m(e,t){var r=c(e).toHsl(),n=(r.h+t)%360;return r.h=n<0?360+n:n,c(r)}function _(e){var t=c(e).toHsl();return t.h=(t.h+180)%360,c(t)}function w(e){var t=c(e).toHsl(),r=t.h;return[c(e),c({h:(r+120)%360,s:t.s,l:t.l}),c({h:(r+240)%360,s:t.s,l:t.l})]}function x(e){var t=c(e).toHsl(),r=t.h;return[c(e),c({h:(r+90)%360,s:t.s,l:t.l}),c({h:(r+180)%360,s:t.s,l:t.l}),c({h:(r+270)%360,s:t.s,l:t.l})]}function C(e){var t=c(e).toHsl(),r=t.h;return[c(e),c({h:(r+72)%360,s:t.s,l:t.l}),c({h:(r+216)%360,s:t.s,l:t.l})]}function j(e,t,r){t=t||6,r=r||30;var n=c(e).toHsl(),o=360/r,a=[c(e)];for(n.h=(n.h-(o*t>>1)+720)%360;--t;)n.h=(n.h+o)%360,a.push(c(n));return a}function S(e,t){t=t||6;for(var r=c(e).toHsv(),n=r.h,o=r.s,a=r.v,i=[],u=1/t;t--;)i.push(c({h:n,s:o,v:a})),a=(a+u)%1;return i}c.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,t,r,n=this.toRgb();return e=n.r/255,t=n.g/255,r=n.b/255,.2126*(e<=.03928?e/12.92:f.pow((e+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:f.pow((t+.055)/1.055,2.4))+.0722*(r<=.03928?r/12.92:f.pow((r+.055)/1.055,2.4))},setAlpha:function(e){return this._a=A(e),this._roundA=i(100*this._a)/100,this},toHsv:function(){var e=a(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=a(this._r,this._g,this._b),t=i(360*e.h),r=i(100*e.s),n=i(100*e.v);return 1==this._a?"hsv("+t+", "+r+"%, "+n+"%)":"hsva("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHsl:function(){var e=o(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=o(this._r,this._g,this._b),t=i(360*e.h),r=i(100*e.s),n=i(100*e.l);return 1==this._a?"hsl("+t+", "+r+"%, "+n+"%)":"hsla("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHex:function(e){return t(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return function(e,t,r,n,o){var a=[T(i(e).toString(16)),T(i(t).toString(16)),T(i(r).toString(16)),T(N(n))];if(o&&a[0].charAt(0)==a[0].charAt(1)&&a[1].charAt(0)==a[1].charAt(1)&&a[2].charAt(0)==a[2].charAt(1)&&a[3].charAt(0)==a[3].charAt(1))return a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0);return a.join("")}(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:i(this._r),g:i(this._g),b:i(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+i(this._r)+", "+i(this._g)+", "+i(this._b)+")":"rgba("+i(this._r)+", "+i(this._g)+", "+i(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:i(100*E(this._r,255))+"%",g:i(100*E(this._g,255))+"%",b:i(100*E(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+i(100*E(this._r,255))+"%, "+i(100*E(this._g,255))+"%, "+i(100*E(this._b,255))+"%)":"rgba("+i(100*E(this._r,255))+"%, "+i(100*E(this._g,255))+"%, "+i(100*E(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(k[t(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t="#"+u(this._r,this._g,this._b,this._a),r=t,n=this._gradientType?"GradientType = 1, ":"";if(e){var o=c(e);r="#"+u(o._r,o._g,o._b,o._a)}return"progid:DXImageTransform.Microsoft.gradient("+n+"startColorstr="+t+",endColorstr="+r+")"},toString:function(e){var t=!!e;e=e||this._format;var r=!1,n=this._a<1&&0<=this._a;return t||!n||"hex"!==e&&"hex6"!==e&&"hex3"!==e&&"hex4"!==e&&"hex8"!==e&&"name"!==e?("rgb"===e&&(r=this.toRgbString()),"prgb"===e&&(r=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(r=this.toHexString()),"hex3"===e&&(r=this.toHexString(!0)),"hex4"===e&&(r=this.toHex8String(!0)),"hex8"===e&&(r=this.toHex8String()),"name"===e&&(r=this.toName()),"hsl"===e&&(r=this.toHslString()),"hsv"===e&&(r=this.toHsvString()),r||this.toHexString()):"name"===e&&0===this._a?this.toName():this.toRgbString()},clone:function(){return c(this.toString())},_applyModification:function(e,t){var r=e.apply(null,[this].concat([].slice.call(t)));return this._r=r._r,this._g=r._g,this._b=r._b,this.setAlpha(r._a),this},lighten:function(){return this._applyModification(b,arguments)},brighten:function(){return this._applyModification(g,arguments)},darken:function(){return this._applyModification(y,arguments)},desaturate:function(){return this._applyModification(r,arguments)},saturate:function(){return this._applyModification(s,arguments)},greyscale:function(){return this._applyModification(l,arguments)},spin:function(){return this._applyModification(m,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(j,arguments)},complement:function(){return this._applyCombination(_,arguments)},monochromatic:function(){return this._applyCombination(S,arguments)},splitcomplement:function(){return this._applyCombination(C,arguments)},triad:function(){return this._applyCombination(w,arguments)},tetrad:function(){return this._applyCombination(x,arguments)}},c.fromRatio=function(e,t){if("object"==(void 0===e?"undefined":W(e))){var r={};for(var n in e)e.hasOwnProperty(n)&&(r[n]="a"===n?e[n]:R(e[n]));e=r}return c(e,t)},c.equals=function(e,t){return!(!e||!t)&&c(e).toRgbString()==c(t).toRgbString()},c.random=function(){return c.fromRatio({r:e(),g:e(),b:e()})},c.mix=function(e,t,r){r=0===r?0:r||50;var n=c(e).toRgb(),o=c(t).toRgb(),a=r/100;return c({r:(o.r-n.r)*a+n.r,g:(o.g-n.g)*a+n.g,b:(o.b-n.b)*a+n.b,a:(o.a-n.a)*a+n.a})},c.readability=function(e,t){var r=c(e),n=c(t);return(f.max(r.getLuminance(),n.getLuminance())+.05)/(f.min(r.getLuminance(),n.getLuminance())+.05)},c.isReadable=function(e,t,r){var n,o,a=c.readability(e,t);switch(o=!1,(n=function(e){var t,r;t=((e=e||{level:"AA",size:"small"}).level||"AA").toUpperCase(),r=(e.size||"small").toLowerCase(),"AA"!==t&&"AAA"!==t&&(t="AA");"small"!==r&&"large"!==r&&(r="small");return{level:t,size:r}}(r)).level+n.size){case"AAsmall":case"AAAlarge":o=4.5<=a;break;case"AAlarge":o=3<=a;break;case"AAAsmall":o=7<=a}return o},c.mostReadable=function(e,t,r){var n,o,a,i,u=null,s=0;o=(r=r||{}).includeFallbackColors,a=r.level,i=r.size;for(var l=0;l<t.length;l++)s<(n=c.readability(e,t[l]))&&(s=n,u=c(t[l]));return c.isReadable(e,u,{level:a,size:i})||!o?u:(r.includeFallbackColors=!1,c.mostReadable(e,["#fff","#000"],r))};var O=c.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},k=c.hexNames=function(e){var t={};for(var r in e)e.hasOwnProperty(r)&&(t[e[r]]=r);return t}(O);function A(e){return e=parseFloat(e),(isNaN(e)||e<0||1<e)&&(e=1),e}function E(e,t){var r;"string"==typeof(r=e)&&-1!=r.indexOf(".")&&1===parseFloat(r)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!=n.indexOf("%");return e=d(t,v(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),f.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function M(e){return d(1,v(0,e))}function P(e){return parseInt(e,16)}function T(e){return 1==e.length?"0"+e:""+e}function R(e){return e<=1&&(e=100*e+"%"),e}function N(e){return f.round(255*parseFloat(e)).toString(16)}function L(e){return P(e)/255}var U,D,F,H=(D="[\\s|\\(]+("+(U="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)")+")[,|\\s]+("+U+")[,|\\s]+("+U+")\\s*\\)?",F="[\\s|\\(]+("+U+")[,|\\s]+("+U+")[,|\\s]+("+U+")[,|\\s]+("+U+")\\s*\\)?",{CSS_UNIT:new RegExp(U),rgb:new RegExp("rgb"+D),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+D),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+D),hsva:new RegExp("hsva"+F),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/});function B(e){return!!H.CSS_UNIT.exec(e)}z.exports?z.exports=c:window.tinycolor=c}(Math)}),mu={simpleCheckForValidColor:function(t){var r=0,n=0;return gu(["r","g","b","a","h","s","l","v"],function(e){if(t[e]&&(r+=1,isNaN(t[e])||(n+=1),"s"===e||"l"===e)){/^\d+%$/.test(t[e])&&(n+=1)}}),r===n&&t},toState:function(e,t){var r=e.hex?yu(e.hex):yu(e),n=r.toHsl(),o=r.toHsv(),a=r.toRgb(),i=r.toHex();return 0===n.s&&(n.h=t||0,o.h=t||0),{hsl:n,hex:"000000"===i&&0===a.a?"transparent":"#"+i,rgb:a,hsv:o,oldHue:e.h||t||n.h,source:e.source}},isValidHex:function(e){var t="#"===String(e).charAt(0)?1:0;return e.length!==4+t&&e.length<7+t&&yu(e).isValid()},getContrastingColor:function(e){if(!e)return"#fff";var t=this.toState(e);return"transparent"===t.hex?"rgba(0,0,0,0.4)":128<=(299*t.rgb.r+587*t.rgb.g+114*t.rgb.b)/1e3?"#000":"#fff"}},_u=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"span";return function(a){function i(){var e,t;U(this,i);for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];return(e=t=H(this,a.call.apply(a,[this].concat(n)))).state={focus:!1},t.handleFocus=function(){return t.setState({focus:!0})},t.handleBlur=function(){return t.setState({focus:!1})},H(t,e)}return F(i,a),i.prototype.render=function(){return it.createElement(t,{onFocus:this.handleFocus,onBlur:this.handleBlur},it.createElement(e,D({},this.props,this.state)))},i}(it.Component)}(function(e){var t=e.color,r=e.style,n=e.onClick,o=void 0===n?function(){}:n,a=e.onHover,i=e.title,u=void 0===i?t:i,s=e.children,l=e.focus,c=e.focusStyle,f="transparent"===t,p=qi({default:{swatch:D({background:t,height:"100%",width:"100%",cursor:"pointer",position:"relative",outline:"none"},r,l?void 0===c?{}:c:{})}}),h={};return a&&(h.onMouseOver=function(e){return a(t,e)}),it.createElement("div",D({style:p.swatch,onClick:function(e){return o(t,e)},title:u,tabIndex:0,onKeyDown:function(e){return 13===e.keyCode&&o(t,e)}},h),s,f&&it.createElement(Ki,{borderRadius:p.swatch.borderRadius,boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.1)"}))}),wu=function(e){var r=e.onChange,n=e.rgb,o=e.hsl,t=e.hex,a=e.disableAlpha,i=qi({default:{fields:{display:"flex",paddingTop:"4px"},single:{flex:"1",paddingLeft:"6px"},alpha:{flex:"1",paddingLeft:"6px"},double:{flex:"2"},input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px #ccc",fontSize:"11px"},label:{display:"block",textAlign:"center",fontSize:"11px",color:"#222",paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}},disableAlpha:{alpha:{display:"none"}}},{disableAlpha:a}),u=function(e,t){e.hex?mu.isValidHex(e.hex)&&r({hex:e.hex,source:"hex"},t):e.r||e.g||e.b?r({r:e.r||n.r,g:e.g||n.g,b:e.b||n.b,a:n.a,source:"rgb"},t):e.a&&(e.a<0?e.a=0:100<e.a&&(e.a=100),e.a/=100,r({h:o.h,s:o.s,l:o.l,a:e.a,source:"rgb"},t))};return it.createElement("div",{style:i.fields,className:"flexbox-fix"},it.createElement("div",{style:i.double},it.createElement(Ji,{style:{input:i.input,label:i.label},label:"hex",value:t.replace("#",""),onChange:u})),it.createElement("div",{style:i.single},it.createElement(Ji,{style:{input:i.input,label:i.label},label:"r",value:n.r,onChange:u,dragLabel:"true",dragMax:"255"})),it.createElement("div",{style:i.single},it.createElement(Ji,{style:{input:i.input,label:i.label},label:"g",value:n.g,onChange:u,dragLabel:"true",dragMax:"255"})),it.createElement("div",{style:i.single},it.createElement(Ji,{style:{input:i.input,label:i.label},label:"b",value:n.b,onChange:u,dragLabel:"true",dragMax:"255"})),it.createElement("div",{style:i.alpha},it.createElement(Ji,{style:{input:i.input,label:i.label},label:"a",value:Math.round(100*n.a),onChange:u,dragLabel:"true",dragMax:"100"})))},xu=function(e){var t=e.colors,r=e.onClick,n=void 0===r?function(){}:r,o=e.onSwatchHover,a=qi({default:{colors:{margin:"0 -10px",padding:"10px 0 0 10px",borderTop:"1px solid #eee",display:"flex",flexWrap:"wrap",position:"relative"},swatchWrap:{width:"16px",height:"16px",margin:"0 10px 10px 0"},swatch:{borderRadius:"3px",boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15)"}},"no-presets":{colors:{display:"none"}}},{"no-presets":!t||!t.length}),i=function(e,t){n({hex:e,source:"hex"},t)};return it.createElement("div",{style:a.colors,className:"flexbox-fix"},t.map(function(e){var t="string"==typeof e?{color:e}:e,r=""+t.color+(t.title||"");return it.createElement("div",{key:r,style:a.swatchWrap},it.createElement(_u,D({},t,{style:a.swatch,onClick:i,onHover:o,focusStyle:{boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px "+t.color}})))}))};xu.propTypes={colors:B.arrayOf(B.oneOfType([B.string,B.shape({color:B.string,title:B.string})])).isRequired};var Cu=function(e){var t=e.width,r=e.rgb,n=e.hex,o=e.hsv,a=e.hsl,i=e.onChange,u=e.onSwatchHover,s=e.disableAlpha,l=e.presetColors,c=e.renderers,f=e.className,p=void 0===f?"":f,h=qi({default:{picker:{width:t,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("+r.r+","+r.g+","+r.b+","+r.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)"}},disableAlpha:{color:{height:"10px"},hue:{height:"10px"},alpha:{display:"none"}}},{disableAlpha:s});return it.createElement("div",{style:h.picker,className:"sketch-picker "+p},it.createElement("div",{style:h.saturation},it.createElement(bu,{style:h.Saturation,hsl:a,hsv:o,onChange:i})),it.createElement("div",{style:h.controls,className:"flexbox-fix"},it.createElement("div",{style:h.sliders},it.createElement("div",{style:h.hue},it.createElement(eu,{style:h.Hue,hsl:a,onChange:i})),it.createElement("div",{style:h.alpha},it.createElement(Zi,{style:h.Alpha,rgb:r,hsl:a,renderers:c,onChange:i}))),it.createElement("div",{style:h.color},it.createElement(Ki,null),it.createElement("div",{style:h.activeColor}))),it.createElement(wu,{rgb:r,hsl:a,hex:n,onChange:i,disableAlpha:s}),it.createElement(xu,{colors:l,onClick:i,onSwatchHover:u}))};Cu.propTypes={disableAlpha:B.bool,width:B.oneOfType([B.string,B.number])},Cu.defaultProps={disableAlpha:!1,width:200,presetColors:["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"]};var ju,Su,Ou=(ju=Cu,(Su=function(t){function r(e){U(this,r);var n=H(this,t.call(this));return n.handleChange=function(e,t){if(mu.simpleCheckForValidColor(e)){var r=mu.toState(e,e.h||n.state.oldHue);n.setState(r),n.props.onChangeComplete&&n.debounce(n.props.onChangeComplete,r,t),n.props.onChange&&n.props.onChange(r,t)}},n.handleSwatchHover=function(e,t){if(mu.simpleCheckForValidColor(e)){var r=mu.toState(e,e.h||n.state.oldHue);n.setState(r),n.props.onSwatchHover&&n.props.onSwatchHover(r,t)}},n.state=D({},mu.toState(e.color,0)),n.debounce=pu(function(e,t,r){e(t,r)},100),n}return F(r,t),r.prototype.componentWillReceiveProps=function(e){this.setState(D({},mu.toState(e.color,this.state.oldHue)))},r.prototype.render=function(){var e={};return this.props.onSwatchHover&&(e.onSwatchHover=this.handleSwatchHover),it.createElement(ju,D({},this.props,this.state,{onChange:this.handleChange},e))},r}(at||ot)).propTypes=D({},ju.propTypes),Su.defaultProps=D({},ju.defaultProps,{color:{h:250,s:.5,l:.2,a:1}}),Su);function ku(e){var t=yu(e);return{format:t.getFormat()||"hex",color:t.toRgb()}}var Au=function(a){function i(){var e,t;U(this,i);for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];return(e=t=H(this,a.call.apply(a,[this].concat(n)))).state=ku(window.selectedColor),t.setColor=function(e){return t.setState({color:e.rgb})},H(t,e)}return F(i,a),i.prototype.componentDidMount=function(){var t=this;Object.defineProperty(window,"selectedColor",{get:function(){var e=yu(t.state.color);switch(t.state.format){case"hsl":return e.toHslString();case"hex8":return e.toHex8String();case"prgb":return e.toPercentageRgbString();case"rgb":return e.toRgbString();default:return 1===e.getAlpha()?e.toHexString():e.toRgbString()}},set:function(e){return t.setState(ku(e))}})},i.prototype.render=function(){return it.createElement(Ou,{className:"picker",width:300,presetColors:[],color:this.state.color,onChangeComplete:this.setColor})},i}(ot);return it.render(it.createElement(Au,null),document.getElementById("root")),Au}();
13 | //# sourceMappingURL=app.min.js.map
14 | </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/screenshots/webkit-color-picker.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozanmakes/emacs-webkit-color-picker/765cac80144cad4bc0bf59025ea0199f0486f737/screenshots/webkit-color-picker.gif


--------------------------------------------------------------------------------
/webkit-color-picker.el:
--------------------------------------------------------------------------------
  1 | ;;; webkit-color-picker.el --- Insert and adjust colors using Webkit Widgets -*- lexical-binding: t -*-
  2 | 
  3 | ;; Copyright (C) 2018 Ozan Sener
  4 | 
  5 | ;; Author: Ozan Sener <hi@ozan.email>
  6 | ;; URL: https://github.com/osener/emacs-webkit-color-picker
  7 | ;; Maintainer: Ozan Sener <hi@ozan.email>
  8 | ;; Version: 0.1.0
  9 | ;; Keywords: tools
 10 | ;; Package-Requires: ((emacs "26.0") (posframe "0.1.0"))
 11 | 
 12 | ;; This file is NOT part of GNU Emacs.
 13 | 
 14 | ;; The MIT License (MIT)
 15 | 
 16 | ;; Permission is hereby granted, free of charge, to any person obtaining a copy
 17 | ;; of this software and associated documentation files (the "Software"), to deal
 18 | ;; in the Software without restriction, including without limitation the rights
 19 | ;; to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 20 | ;; copies of the Software, and to permit persons to whom the Software is
 21 | ;; furnished to do so, subject to the following conditions:
 22 | 
 23 | ;; The above copyright notice and this permission notice shall be included in all
 24 | ;; copies or substantial portions of the Software.
 25 | 
 26 | ;; THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 27 | ;; IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 28 | ;; FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 29 | ;; AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 30 | ;; LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 31 | ;; OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 32 | ;; SOFTWARE.
 33 | 
 34 | ;;; Commentary:
 35 | 
 36 | ;; #+OPTIONS: toc:nil title:nil timestamp:nil
 37 | ;; * webkit-color-picker                                                :README:
 38 | 
 39 | ;; Small experiment with embedded a Webkit widgets in a childframe. Requires Emacs 26 compiled with [[https://www.gnu.org/software/emacs/manual/html_node/emacs/Embedded-WebKit-Widgets.html][embedded Webkit Widget support]].
 40 | 
 41 | ;; webkit-color-picker is available on [[https://melpa.org/][MELPA]]. Example configuration using [[https://github.com/jwiegley/use-package][use-package]]:
 42 | 
 43 | ;; #+BEGIN_SRC emacs-lisp
 44 | ;; (use-package webkit-color-picker
 45 | ;;   :ensure t
 46 | ;;   :bind (("C-c C-p" . webkit-color-picker-show)))
 47 | ;; #+END_SRC
 48 | 
 49 | ;; ** Screenshot
 50 | ;; [[./screenshots/webkit-color-picker.gif]]
 51 | 
 52 | ;;; Code:
 53 | ;; * webkit-color-picker's code
 54 | 
 55 | (require 'xwidget)
 56 | (require 'posframe)
 57 | (require 'css-mode)
 58 | (eval-when-compile (require 'subr-x))
 59 | (eval-when-compile (require 'cl-lib))
 60 | 
 61 | (defvar webkit-color-picker--client-path
 62 |   (concat "file://"
 63 |           (file-name-directory (or load-file-name buffer-file-name))
 64 |           "color-picker.html"))
 65 | 
 66 | (defun webkit-color-picker--run-xwidget ()
 67 |   "Launch embedded Webkit instance."
 68 |   (with-current-buffer " *webkit-color-picker*"
 69 |     (let ((inhibit-read-only t))
 70 |       (goto-char 1)
 71 | 
 72 |       (let ((id (make-xwidget
 73 |                  'webkit
 74 |                  nil
 75 |                  (window-pixel-width)
 76 |                  (window-pixel-height)
 77 |                  nil
 78 |                  "*webkit-color-picker*")))
 79 |         (put-text-property (point) (+ 1 (point))
 80 |                            'display (list 'xwidget ':xwidget id))
 81 |         (xwidget-webkit-mode)
 82 |         (xwidget-webkit-goto-uri (xwidget-at 1)
 83 |                                  webkit-color-picker--client-path)))))
 84 | 
 85 | (defun webkit-color-picker--show ()
 86 |   "Make color picker childframe visible."
 87 |   (when-let* ((current-frame (selected-frame))
 88 |               (buffer (webkit-color-picker--get-buffer))
 89 |               (frame (webkit-color-picker--get-frame)))
 90 |     (progn
 91 |       (select-frame frame t)
 92 |       (switch-to-buffer buffer t t)
 93 |       (select-frame current-frame t)
 94 |       (make-frame-visible frame)
 95 |       (redraw-frame frame)
 96 | 
 97 |       (let*
 98 |           ((position (point))
 99 |            (parent-window (selected-window))
100 |            (parent-frame (window-frame parent-window))
101 |            (x-pixel-offset 0)
102 |            (y-pixel-offset 0)
103 |            (font-width (default-font-width))
104 |            (font-height (posframe--get-font-height position))
105 |            (frame-resize-pixelwise t)
106 |            (position (posframe-poshandler-point-bottom-left-corner
107 |                       `(;All poshandlers will get info from this plist.
108 |                         :position ,position
109 |                         :font-height ,font-height
110 |                         :font-width ,font-width
111 |                         :posframe ,frame
112 |                         :posframe-buffer ,buffer
113 |                         :parent-frame ,parent-frame
114 |                         :parent-window ,parent-window
115 |                         :x-pixel-offset ,x-pixel-offset
116 |                         :y-pixel-offset ,y-pixel-offset))))
117 | 
118 |         (set-frame-position frame (car position) (cdr position))))))
119 | 
120 | (defun webkit-color-picker--create ()
121 |   "Create a new posframe and launch Webkit."
122 |   (let ((x-pointer-shape x-pointer-top-left-arrow))
123 |     (posframe-show " *webkit-color-picker*"
124 |                    :string " "
125 |                    :position (point)))
126 | 
127 |   (define-key (current-global-map) [xwidget-event]
128 |     (lambda ()
129 |       (interactive)
130 | 
131 |       (let ((xwidget-event-type (nth 1 last-input-event)))
132 |         (when (eq xwidget-event-type 'load-changed)
133 |           (webkit-color-picker--resize)
134 |           (webkit-color-picker--set-background))
135 | 
136 |         (when (eq xwidget-event-type 'javascript-callback)
137 |           (let ((proc (nth 3 last-input-event))
138 |                 (arg  (nth 4 last-input-event)))
139 |             (funcall proc arg))))))
140 | 
141 |   (webkit-color-picker--run-xwidget))
142 | 
143 | (defun webkit-color-picker--get-buffer ()
144 |   "Return color picker buffer."
145 |   (get-buffer " *webkit-color-picker*"))
146 | 
147 | (defun webkit-color-picker--get-frame ()
148 |   "Return color picker frame."
149 |   (when-let* ((buffer (webkit-color-picker--get-buffer)))
150 |     (seq-find
151 |      (lambda (frame)
152 |        (let ((buffer-info (frame-parameter frame 'posframe-buffer)))
153 |          (or (eq buffer (car buffer-info))
154 |              (eq buffer (cdr buffer-info)))))
155 |      (frame-list))))
156 | 
157 | (defun webkit-color-picker--set-background ()
158 |   "Evaluate JS code in color picker Webkit instance."
159 |   (webkit-color-picker--execute-script
160 |    (format "document.body.style.background = '%s';"
161 |            (face-attribute 'default :background))))
162 | 
163 | (defun webkit-color-picker--insert-color ()
164 |   "Get the selected color from the widget and insert in the current buffer."
165 |   (webkit-color-picker--execute-script
166 |    "window.selectedColor;"
167 |    `(lambda (color)
168 |       (let ((color (kill-new (or color "")))
169 |             (start (or (car webkit-color-picker--last-position) (point)))
170 |             (end (or (cdr webkit-color-picker--last-position) (point))))
171 |         (when (> (length color) 0)
172 |           (delete-region start end)
173 |           (goto-char start)
174 |           (insert color)
175 |           (webkit-color-picker-hide))))))
176 | 
177 | (defvar webkit-color-picker--emulation-alist '((t . nil)))
178 | 
179 | (defvar-local webkit-color-picker--my-keymap nil)
180 | (defvar-local webkit-color-picker--last-position nil)
181 | 
182 | (defsubst webkit-color-picker--enable-overriding-keymap (keymap)
183 |   "Enable color picker overriding KEYMAP."
184 |   (webkit-color-picker--uninstall-map)
185 |   (setq webkit-color-picker--my-keymap keymap))
186 | 
187 | (defun webkit-color-picker--ensure-emulation-alist ()
188 |   "Append color picker emulation alist."
189 |   (unless (eq 'webkit-color-picker--emulation-alist (car emulation-mode-map-alists))
190 |     (setq emulation-mode-map-alists
191 |           (cons 'webkit-color-picker--emulation-alist
192 |                 (delq 'webkit-color-picker--emulation-alist emulation-mode-map-alists)))))
193 | 
194 | ;; TODO: Find a better way of preventing accidental keystrokes whether the
195 | ;; childframe is in focus or not
196 | (defun webkit-color-picker--install-map ()
197 |   "Install temporary color picker keymap."
198 |   (unless (or (cdar webkit-color-picker--emulation-alist)
199 |               (null webkit-color-picker--my-keymap))
200 |     (setf (cdar webkit-color-picker--emulation-alist) webkit-color-picker--my-keymap)))
201 | 
202 | (defun webkit-color-picker--uninstall-map ()
203 |   "Uninstall temporary color picker keymap."
204 |   (setf (cdar webkit-color-picker--emulation-alist) nil))
205 | 
206 | (defvar webkit-color-picker--active-map
207 |   (let ((keymap (make-sparse-keymap)))
208 |     (define-key keymap "\e\e\e" 'webkit-color-picker-hide)
209 |     (define-key keymap "\C-g" 'webkit-color-picker-hide)
210 |     (define-key keymap [mouse-1] (lambda () (interactive) (webkit-color-picker--insert-color)))
211 |     (define-key keymap (kbd "RET") (lambda () (interactive) (webkit-color-picker--insert-color)))
212 |     keymap)
213 |   "Keymap that is enabled during an active completion.")
214 | 
215 | (defvar webkit-color-picker--hex-color-regexp
216 |   (concat
217 |    ;; Short hex.  css-color-4 adds alpha.
218 |    "\\(#[0-9a-fA-F]\\{3,4\\}\\b\\)"
219 |    "\\|"
220 |    ;; Long hex.  css-color-4 adds alpha.
221 |    "\\(#\\(?:[0-9a-fA-F][0-9a-fA-F]\\)\\{3,4\\}\\b\\)"))
222 | 
223 | (defun webkit-color-picker--get-hex-color-at-point ()
224 |   "Return hex color at point."
225 |   (with-syntax-table (copy-syntax-table (syntax-table))
226 |     (modify-syntax-entry ?# "w") ; Make `#' a word constituent.
227 |     (when-let* ((word (thing-at-point 'word t))
228 |                 (bounds (bounds-of-thing-at-point 'word)))
229 |       (when (string-match webkit-color-picker--hex-color-regexp word)
230 |         (cons word bounds)))))
231 | 
232 | (defun webkit-color-picker--get-named-color-at-point ()
233 |   "Return color name at point."
234 |   (when-let* ((word (word-at-point))
235 |               (color (assoc (downcase word) css--color-map)))
236 |     (cons word (bounds-of-thing-at-point 'word))))
237 | 
238 | (defun webkit-color-picker--get-rgb-or-hsl-color-at-point ()
239 |   "Return RGB or HSL formatted color at point."
240 |   (save-excursion
241 |     (when-let* ((open-paren-pos (nth 1 (syntax-ppss))))
242 |       (when (save-excursion
243 |               (goto-char open-paren-pos)
244 |               (looking-back "\\(?:hsl\\|rgb\\)a?" (- (point) 4)))
245 |         (goto-char (nth 1 (syntax-ppss)))))
246 |     (when (eq (char-before) ?\))
247 |       (backward-sexp))
248 |     (skip-chars-backward "rgbhslaRGBHSLA")
249 |     (when (looking-at "\\(\\_<\\(?:hsl\\|rgb\\)a?(\\)")
250 |       (when-let* ((start (point))
251 |                   (end (search-forward ")" nil t)))
252 |         (cons (buffer-substring-no-properties start end) (cons start end))))))
253 | 
254 | (defun webkit-color-picker--color-at-point ()
255 |   "Return recognized color at point."
256 |   (or
257 |    (webkit-color-picker--get-rgb-or-hsl-color-at-point)
258 |    (webkit-color-picker--get-named-color-at-point)
259 |    (webkit-color-picker--get-hex-color-at-point)))
260 | 
261 | (defun webkit-color-picker--get-xwidget ()
262 |   "Return Xwidget instance."
263 |   (with-current-buffer " *webkit-color-picker*"
264 |     (xwidget-at 1)))
265 | 
266 | (defun webkit-color-picker--execute-script (script &optional fn)
267 |   "Execute SCRIPT in embedded Xwidget and run optional callback FN."
268 |   (when-let* ((xw (webkit-color-picker--get-xwidget)))
269 |     (xwidget-webkit-execute-script xw script fn)))
270 | 
271 | (defun webkit-color-picker--resize ()
272 |   "Resize color picker frame to widget boundaries."
273 |   (webkit-color-picker--execute-script
274 |    "[document.querySelector('.picker').offsetWidth, document.querySelector('.picker').offsetHeight];"
275 |    (lambda (size)
276 |      (when-let* ((frame (webkit-color-picker--get-frame)))
277 |        (modify-frame-parameters
278 |         frame
279 |         `((width . (text-pixels . ,(+ 30 (aref size 0))))
280 |           (height . (text-pixels . ,(+ 30 (aref size 1))))
281 |           (inhibit-double-buffering . t)))))))
282 | 
283 | (defun webkit-color-picker--set-color (color)
284 |   "Update color picker widget state with COLOR."
285 |   (webkit-color-picker--execute-script
286 |    (format
287 |     "window.selectedColor = '%s';"
288 |     (if (stringp color) color "#000000"))))
289 | 
290 | ;;;###autoload
291 | (defun webkit-color-picker-show ()
292 |   "Activate color picker."
293 |   (interactive)
294 |   (unless (featurep 'xwidget-internal)
295 |     (user-error "Your Emacs was not compiled with xwidgets support"))
296 |   (unless (display-graphic-p)
297 |     (user-error "webkit-color-picker only works in graphical displays"))
298 |   (let ((color-at-point (webkit-color-picker--color-at-point)))
299 |     (if (buffer-live-p (webkit-color-picker--get-buffer))
300 |         (webkit-color-picker--show)
301 |       (webkit-color-picker--create))
302 | 
303 |     (webkit-color-picker--set-color (car color-at-point))
304 |     (webkit-color-picker--set-background)
305 | 
306 |     (setq-local webkit-color-picker--last-position
307 |                 (or (cdr color-at-point)
308 |                     (cons (point) (point))))
309 | 
310 |     (webkit-color-picker--ensure-emulation-alist)
311 |     (webkit-color-picker--enable-overriding-keymap webkit-color-picker--active-map)
312 |     (webkit-color-picker--install-map)
313 | 
314 |     t))
315 | 
316 | ;;;###autoload
317 | (defun webkit-color-picker-hide ()
318 |   "Hide color picker frame."
319 |   (interactive)
320 |   (when-let* ((frame (webkit-color-picker--get-frame)))
321 |     (make-frame-invisible frame))
322 |   (webkit-color-picker--enable-overriding-keymap nil))
323 | 
324 | ;;;###autoload
325 | (defun webkit-color-picker-cleanup ()
326 |   "Destroy color picker buffer and frame."
327 |   (interactive)
328 |   (dolist (xwidget-view xwidget-view-list)
329 |     (delete-xwidget-view xwidget-view))
330 |   (posframe-delete-all)
331 |   (kill-buffer " *webkit-color-picker*"))
332 | 
333 | (provide 'webkit-color-picker)
334 | 
335 | ;; Local Variables:
336 | ;; coding: utf-8-unix
337 | ;; End:
338 | 
339 | ;;; webkit-color-picker.el ends here
340 | 


--------------------------------------------------------------------------------
/webkit-color-picker.org:
--------------------------------------------------------------------------------
  1 | # Created 2018-03-25 Sun 08:55
  2 | #+OPTIONS: toc:nil
  3 | #+TITLE: Insert and adjust colors using Webkit Widgets
  4 | #+AUTHOR: Ozan Sener
  5 | Copyright (C) 2018 Ozan Sener
  6 | 
  7 | Author: Ozan Sener <hi@ozan.email>
  8 | URL: https://github.com/osener/emacs-webkit-color-picker
  9 | Maintainer: Ozan Sener <hi@ozan.email>
 10 | Version: 0.1.0
 11 | Keywords: tools
 12 | Package-Requires: ((emacs "26.0") (posframe "0.1.0"))
 13 | 
 14 | This file is NOT part of GNU Emacs.
 15 | 
 16 | The MIT License (MIT)
 17 | 
 18 | Permission is hereby granted, free of charge, to any person obtaining a copy
 19 | of this software and associated documentation files (the "Software"), to deal
 20 | in the Software without restriction, including without limitation the rights
 21 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 22 | copies of the Software, and to permit persons to whom the Software is
 23 | furnished to do so, subject to the following conditions:
 24 | 
 25 | The above copyright notice and this permission notice shall be included in all
 26 | copies or substantial portions of the Software.
 27 | 
 28 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 29 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 30 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 31 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 32 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 33 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 34 | SOFTWARE.
 35 | * webkit-color-picker                                                :README:
 36 | 
 37 | Small experiment with embedded a Webkit widgets in a childframe. Requires Emacs 26 compiled with [[https://www.gnu.org/software/emacs/manual/html_node/emacs/Embedded-WebKit-Widgets.html][embedded Webkit Widget support]].
 38 | 
 39 | webkit-color-picker is available on [[https://melpa.org/][MELPA]].
 40 | 
 41 | #+BEGIN_EXAMPLE
 42 | (use-package webkit-color-picker
 43 |   :ensure t
 44 |   :bind (("C-c C-p" . webkit-color-picker-show)))
 45 | #+END_EXAMPLE
 46 | 
 47 | ** Screenshot
 48 | [[file:./screenshots/webkit-color-picker.gif]]
 49 | * webkit-color-picker's code
 50 | 
 51 | #+BEGIN_SRC emacs-lisp
 52 |   (require 'xwidget)
 53 |   (require 'posframe)
 54 |   (require 'css-mode)
 55 |   (eval-when-compile (require 'subr-x))
 56 |   (eval-when-compile (require 'cl-lib))
 57 | #+END_SRC
 58 | 
 59 | #+BEGIN_SRC emacs-lisp
 60 |   (defvar webkit-color-picker--client-path
 61 |     (concat "file://"
 62 |             (file-name-directory (or load-file-name buffer-file-name))
 63 |             "color-picker.html"))
 64 | #+END_SRC
 65 | 
 66 | #+BEGIN_SRC emacs-lisp
 67 |   (defun webkit-color-picker--run-xwidget ()
 68 |     "Launch embedded Webkit instance."
 69 |     (with-current-buffer " *webkit-color-picker*"
 70 |       (let ((inhibit-read-only t))
 71 |         (goto-char 1)
 72 | 
 73 |         (let ((id (make-xwidget
 74 |                    'webkit
 75 |                    nil
 76 |                    (window-pixel-width)
 77 |                    (window-pixel-height)
 78 |                    nil
 79 |                    "*webkit-color-picker*")))
 80 |           (put-text-property (point) (+ 1 (point))
 81 |                              'display (list 'xwidget ':xwidget id))
 82 |           (xwidget-webkit-mode)
 83 |           (xwidget-webkit-goto-uri (xwidget-at 1)
 84 |                                    webkit-color-picker--client-path)))))
 85 | #+END_SRC
 86 | 
 87 | #+BEGIN_SRC emacs-lisp
 88 |   (defun webkit-color-picker--show ()
 89 |     "Make color picker childframe visible."
 90 |     (when-let* ((current-frame (selected-frame))
 91 |                 (buffer (webkit-color-picker--get-buffer))
 92 |                 (frame (webkit-color-picker--get-frame)))
 93 |       (progn
 94 |         (select-frame frame t)
 95 |         (switch-to-buffer buffer t t)
 96 |         (select-frame current-frame t)
 97 |         (make-frame-visible frame)
 98 |         (redraw-frame frame)
 99 | 
100 |         (let*
101 |             ((position (point))
102 |              (parent-window (selected-window))
103 |              (parent-frame (window-frame parent-window))
104 |              (x-pixel-offset 0)
105 |              (y-pixel-offset 0)
106 |              (font-width (default-font-width))
107 |              (font-height (posframe--get-font-height position))
108 |              (frame-resize-pixelwise t)
109 |              (position (posframe-poshandler-point-bottom-left-corner
110 |                         `(;All poshandlers will get info from this plist.
111 |                           :position ,position
112 |                           :font-height ,font-height
113 |                           :font-width ,font-width
114 |                           :posframe ,frame
115 |                           :posframe-buffer ,buffer
116 |                           :parent-frame ,parent-frame
117 |                           :parent-window ,parent-window
118 |                           :x-pixel-offset ,x-pixel-offset
119 |                           :y-pixel-offset ,y-pixel-offset))))
120 | 
121 |           (set-frame-position frame (car position) (cdr position))))))
122 | #+END_SRC
123 | 
124 | #+BEGIN_SRC emacs-lisp
125 |   (defun webkit-color-picker--create ()
126 |     "Create a new posframe and launch Webkit."
127 |     (let ((x-pointer-shape x-pointer-top-left-arrow))
128 |       (posframe-show " *webkit-color-picker*"
129 |                      :string " "
130 |                      :position (point)))
131 | 
132 |     (define-key (current-global-map) [xwidget-event]
133 |       (lambda ()
134 |         (interactive)
135 | 
136 |         (let ((xwidget-event-type (nth 1 last-input-event)))
137 |           (when (eq xwidget-event-type 'load-changed)
138 |             (webkit-color-picker--resize)
139 |             (webkit-color-picker--set-background))
140 | 
141 |           (when (eq xwidget-event-type 'javascript-callback)
142 |             (let ((proc (nth 3 last-input-event))
143 |                   (arg  (nth 4 last-input-event)))
144 |               (funcall proc arg))))))
145 | 
146 |     (webkit-color-picker--run-xwidget))
147 | #+END_SRC
148 | 
149 | #+BEGIN_SRC emacs-lisp
150 |   (defun webkit-color-picker--get-buffer ()
151 |     "Return color picker buffer."
152 |     (get-buffer " *webkit-color-picker*"))
153 | #+END_SRC
154 | 
155 | #+BEGIN_SRC emacs-lisp
156 |   (defun webkit-color-picker--get-frame ()
157 |     "Return color picker frame."
158 |     (when-let* ((buffer (webkit-color-picker--get-buffer)))
159 |       (seq-find
160 |        (lambda (frame)
161 |          (let ((buffer-info (frame-parameter frame 'posframe-buffer)))
162 |            (or (eq buffer (car buffer-info))
163 |                (eq buffer (cdr buffer-info)))))
164 |        (frame-list))))
165 | #+END_SRC
166 | 
167 | #+BEGIN_SRC emacs-lisp
168 |   (defun webkit-color-picker--set-background ()
169 |     "Evaluate JS code in color picker Webkit instance."
170 |     (webkit-color-picker--execute-script
171 |      (format "document.body.style.background = '%s';"
172 |              (face-attribute 'default :background))))
173 | #+END_SRC
174 | 
175 | #+BEGIN_SRC emacs-lisp
176 |   (defun webkit-color-picker--insert-color ()
177 |     "Get the selected color from the widget and insert in the current buffer."
178 |     (webkit-color-picker--execute-script
179 |      "window.selectedColor;"
180 |      `(lambda (color)
181 |         (let ((color (kill-new (or color "")))
182 |               (start (or (car webkit-color-picker--last-position) (point)))
183 |               (end (or (cdr webkit-color-picker--last-position) (point))))
184 |           (when (> (length color) 0)
185 |             (delete-region start end)
186 |             (goto-char start)
187 |             (insert color)
188 |             (webkit-color-picker-hide))))))
189 | #+END_SRC
190 | 
191 | #+BEGIN_SRC emacs-lisp
192 |   (defvar webkit-color-picker--emulation-alist '((t . nil)))
193 | #+END_SRC
194 | 
195 | #+BEGIN_SRC emacs-lisp
196 |   (defvar-local webkit-color-picker--my-keymap nil)
197 |   (defvar-local webkit-color-picker--last-position nil)
198 | #+END_SRC
199 | 
200 | #+BEGIN_SRC emacs-lisp
201 |   (defsubst webkit-color-picker--enable-overriding-keymap (keymap)
202 |     "Enable color picker overriding KEYMAP."
203 |     (webkit-color-picker--uninstall-map)
204 |     (setq webkit-color-picker--my-keymap keymap))
205 | #+END_SRC
206 | 
207 | #+BEGIN_SRC emacs-lisp
208 |   (defun webkit-color-picker--ensure-emulation-alist ()
209 |     "Append color picker emulation alist."
210 |     (unless (eq 'webkit-color-picker--emulation-alist (car emulation-mode-map-alists))
211 |       (setq emulation-mode-map-alists
212 |             (cons 'webkit-color-picker--emulation-alist
213 |                   (delq 'webkit-color-picker--emulation-alist emulation-mode-map-alists)))))
214 | #+END_SRC
215 | 
216 | TODO: Find a better way of preventing accidental keystrokes whether the
217 | childframe is in focus or not
218 | #+BEGIN_SRC emacs-lisp
219 |   (defun webkit-color-picker--install-map ()
220 |     "Install temporary color picker keymap."
221 |     (unless (or (cdar webkit-color-picker--emulation-alist)
222 |                 (null webkit-color-picker--my-keymap))
223 |       (setf (cdar webkit-color-picker--emulation-alist) webkit-color-picker--my-keymap)))
224 | #+END_SRC
225 | 
226 | #+BEGIN_SRC emacs-lisp
227 |   (defun webkit-color-picker--uninstall-map ()
228 |     "Uninstall temporary color picker keymap."
229 |     (setf (cdar webkit-color-picker--emulation-alist) nil))
230 | #+END_SRC
231 | 
232 | #+BEGIN_SRC emacs-lisp
233 |   (defvar webkit-color-picker--active-map
234 |     (let ((keymap (make-sparse-keymap)))
235 |       (define-key keymap "\e\e\e" 'webkit-color-picker-hide)
236 |       (define-key keymap "\C-g" 'webkit-color-picker-hide)
237 |       (define-key keymap [mouse-1] (lambda () (interactive) (webkit-color-picker--insert-color)))
238 |       (define-key keymap (kbd "RET") (lambda () (interactive) (webkit-color-picker--insert-color)))
239 |       keymap)
240 |     "Keymap that is enabled during an active completion.")
241 | #+END_SRC
242 | 
243 | #+BEGIN_SRC emacs-lisp
244 |   (defvar webkit-color-picker--hex-color-regexp
245 |     (concat
246 |      ;; Short hex.  css-color-4 adds alpha.
247 |      "\\(#[0-9a-fA-F]\\{3,4\\}\\b\\)"
248 |      "\\|"
249 |      ;; Long hex.  css-color-4 adds alpha.
250 |      "\\(#\\(?:[0-9a-fA-F][0-9a-fA-F]\\)\\{3,4\\}\\b\\)"))
251 | #+END_SRC
252 | 
253 | #+BEGIN_SRC emacs-lisp
254 |   (defun webkit-color-picker--get-hex-color-at-point ()
255 |     "Return hex color at point."
256 |     (with-syntax-table (copy-syntax-table (syntax-table))
257 |       (modify-syntax-entry ?# "w") ; Make `#' a word constituent.
258 |       (when-let* ((word (thing-at-point 'word t))
259 |                   (bounds (bounds-of-thing-at-point 'word)))
260 |         (when (string-match webkit-color-picker--hex-color-regexp word)
261 |           (cons word bounds)))))
262 | #+END_SRC
263 | 
264 | #+BEGIN_SRC emacs-lisp
265 |   (defun webkit-color-picker--get-named-color-at-point ()
266 |     "Return color name at point."
267 |     (when-let* ((word (word-at-point))
268 |                 (color (assoc (downcase word) css--color-map)))
269 |       (cons word (bounds-of-thing-at-point 'word))))
270 | #+END_SRC
271 | 
272 | #+BEGIN_SRC emacs-lisp
273 |   (defun webkit-color-picker--get-rgb-or-hsl-color-at-point ()
274 |     "Return RGB or HSL formatted color at point."
275 |     (save-excursion
276 |       (when-let* ((open-paren-pos (nth 1 (syntax-ppss))))
277 |         (when (save-excursion
278 |                 (goto-char open-paren-pos)
279 |                 (looking-back "\\(?:hsl\\|rgb\\)a?" (- (point) 4)))
280 |           (goto-char (nth 1 (syntax-ppss)))))
281 |       (when (eq (char-before) ?\))
282 |         (backward-sexp))
283 |       (skip-chars-backward "rgbhslaRGBHSLA")
284 |       (when (looking-at "\\(\\_<\\(?:hsl\\|rgb\\)a?(\\)")
285 |         (when-let* ((start (point))
286 |                     (end (search-forward ")" nil t)))
287 |           (cons (buffer-substring-no-properties start end) (cons start end))))))
288 | #+END_SRC
289 | 
290 | #+BEGIN_SRC emacs-lisp
291 |   (defun webkit-color-picker--color-at-point ()
292 |     "Return recognized color at point."
293 |     (or
294 |      (webkit-color-picker--get-rgb-or-hsl-color-at-point)
295 |      (webkit-color-picker--get-named-color-at-point)
296 |      (webkit-color-picker--get-hex-color-at-point)))
297 | #+END_SRC
298 | 
299 | #+BEGIN_SRC emacs-lisp
300 |   (defun webkit-color-picker--get-xwidget ()
301 |     "Return Xwidget instance."
302 |     (with-current-buffer " *webkit-color-picker*"
303 |       (xwidget-at 1)))
304 | #+END_SRC
305 | 
306 | #+BEGIN_SRC emacs-lisp
307 |   (defun webkit-color-picker--execute-script (script &optional fn)
308 |     "Execute SCRIPT in embedded Xwidget and run optional callback FN."
309 |     (when-let* ((xw (webkit-color-picker--get-xwidget)))
310 |       (xwidget-webkit-execute-script xw script fn)))
311 | #+END_SRC
312 | 
313 | #+BEGIN_SRC emacs-lisp
314 |   (defun webkit-color-picker--resize ()
315 |     "Resize color picker frame to widget boundaries."
316 |     (webkit-color-picker--execute-script
317 |      "[document.querySelector('.picker').offsetWidth, document.querySelector('.picker').offsetHeight];"
318 |      (lambda (size)
319 |        (when-let* ((frame (webkit-color-picker--get-frame)))
320 |          (modify-frame-parameters
321 |           frame
322 |           `((width . (text-pixels . ,(+ 30 (aref size 0))))
323 |             (height . (text-pixels . ,(+ 30 (aref size 1))))
324 |             (inhibit-double-buffering . t)))))))
325 | #+END_SRC
326 | 
327 | #+BEGIN_SRC emacs-lisp
328 |   (defun webkit-color-picker--set-color (color)
329 |     "Update color picker widget state with COLOR."
330 |     (webkit-color-picker--execute-script
331 |      (format
332 |       "window.selectedColor = '%s';"
333 |       (if (stringp color) color "#000000"))))
334 | #+END_SRC
335 | 
336 | #+BEGIN_SRC emacs-lisp
337 |   (defun webkit-color-picker-show ()
338 |     "Activate color picker."
339 |     (interactive)
340 |     (or (featurep 'xwidget-internal)
341 |         (user-error "Your Emacs was not compiled with xwidgets support"))
342 |     (let ((color-at-point (webkit-color-picker--color-at-point)))
343 |       (if (buffer-live-p (webkit-color-picker--get-buffer))
344 |           (webkit-color-picker--show)
345 |         (webkit-color-picker--create))
346 | 
347 |       (webkit-color-picker--set-color (car color-at-point))
348 |       (webkit-color-picker--set-background)
349 | 
350 |       (setq-local webkit-color-picker--last-position
351 |                   (or (cdr color-at-point)
352 |                       (cons (point) (point))))
353 | 
354 |       (webkit-color-picker--ensure-emulation-alist)
355 |       (webkit-color-picker--enable-overriding-keymap webkit-color-picker--active-map)
356 |       (webkit-color-picker--install-map)
357 | 
358 |       t))
359 | #+END_SRC
360 | 
361 | #+BEGIN_SRC emacs-lisp
362 |   (defun webkit-color-picker-hide ()
363 |     "Hide color picker frame."
364 |     (interactive)
365 |     (when-let* ((frame (webkit-color-picker--get-frame)))
366 |       (make-frame-invisible frame))
367 |     (webkit-color-picker--enable-overriding-keymap nil))
368 | #+END_SRC
369 | 
370 | #+BEGIN_SRC emacs-lisp
371 |   (defun webkit-color-picker-cleanup ()
372 |     "Destroy color picker buffer and frame."
373 |     (interactive)
374 |     (dolist (xwidget-view xwidget-view-list)
375 |       (delete-xwidget-view xwidget-view))
376 |     (posframe-delete-all)
377 |     (kill-buffer " *webkit-color-picker*"))
378 | #+END_SRC
379 | 
380 | #+BEGIN_SRC emacs-lisp
381 |   (provide 'webkit-color-picker)
382 | #+END_SRC
383 | 
384 | #+BEGIN_EXAMPLE
385 | Local Variables:
386 | coding: utf-8-unix
387 | End:
388 | #+END_EXAMPLE
389 | 


--------------------------------------------------------------------------------