diff --git a/modules/internal/color-picker/color-picker.min.css b/modules/internal/color-picker/color-picker.min.css
new file mode 100644
index 00000000..dc5bfb40
--- /dev/null
+++ b/modules/internal/color-picker/color-picker.min.css
@@ -0,0 +1,151 @@
+.color-picker,
+.color-picker *,
+.color-picker ::after,
+.color-picker ::before,
+.color-picker::after,
+.color-picker::before {
+    box-sizing: border-box
+}
+
+.color-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    box-shadow: 1px 3px 6px rgba(0, 0, 0, .5)
+}
+
+.color-picker>div {
+    display: flex;
+    height: 10em;
+    border: 1px solid #000;
+    color: #000
+}
+
+.color-picker>div * {
+    border-color: inherit;
+    color: inherit
+}
+
+.color-picker i {
+    font: inherit;
+    font-size: 12px
+}
+
+.color-picker\:a,
+.color-picker\:h,
+.color-picker\:sv {
+    background-size: 100% 100%;
+    position: relative
+}
+
+.color-picker\:a,
+.color-picker\:h {
+    width: 1.5em;
+    border-left: 1px solid;
+    cursor: ns-resize;
+    overflow: hidden
+}
+
+.color-picker\:a div,
+.color-picker\:h div,
+.color-picker\:sv div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.color-picker\:a i,
+.color-picker\:h i {
+    display: block;
+    height: .5em;
+    position: absolute;
+    top: -.25em;
+    right: 0;
+    left: 0;
+    z-index: 2
+}
+
+.color-picker\:a i::before,
+.color-picker\:h i::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: .25em solid;
+    border-top-color: transparent;
+    border-bottom-color: transparent
+}
+
+.color-picker\:sv {
+    width: 10em;
+    cursor: crosshair;
+    overflow: hidden
+}
+
+.color-picker\:sv i {
+    display: block;
+    width: .75em;
+    height: .75em;
+    position: absolute;
+    top: -.375em;
+    right: -.375em;
+    z-index: 2
+}
+
+.color-picker\:sv i::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid #fff;
+    border-radius: 100%;
+    box-shadow: 0 0 2px #000
+}
+
+.color-picker\:a div {
+    z-index: 2
+}
+
+.color-picker\:a div+div {
+    background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%);
+    background-size: .5em .5em;
+    background-position: 0 0, .25em .25em;
+    z-index: 1
+}
+
+.color-picker\:h div {
+    background-image: linear-gradient(to top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)
+}
+
+.color-picker\:sv div+div {
+    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))
+}
+
+.color-picker\:sv div+div+div {
+    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))
+}
+
+.color-picker\:a,
+.color-picker\:h,
+.color-picker\:sv {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent
+}
+
+.color-picker\:a {
+    display: none;
+}
diff --git a/modules/internal/color-picker/color-picker.min.js b/modules/internal/color-picker/color-picker.min.js
new file mode 100644
index 00000000..7cedcf23
--- /dev/null
+++ b/modules/internal/color-picker/color-picker.min.js
@@ -0,0 +1,9 @@
+/*!
+ * ==============================================================
+ *  COLOR PICKER 2.1.2
+ * ==============================================================
+ * Author: Taufik Nurrohman <https://github.com/taufik-nurrohman>
+ * License: MIT
+ * --------------------------------------------------------------
+ */
+!function(n,e,t){var r,i=e.documentElement,o="HEX",c="top",u="right",a="left",f="px",s=n.setTimeout,l=["touchstart","mousedown"],d=["touchmove","mousemove"],v=["orientationchange","resize"],h=["touchend","mouseup"];function p(n){var e,t,r,i,o,c,u,a,f=+n[0],s=+n[1],l=+n[2];switch(c=l*(1-s),u=l*(1-(o=6*f-(i=Math.floor(6*f)))*s),a=l*(1-(1-o)*s),i=i||0,u=u||0,a=a||0,i%6){case 0:e=l,t=a,r=c;break;case 1:e=u,t=l,r=c;break;case 2:e=c,t=l,r=a;break;case 3:e=c,t=u,r=l;break;case 4:e=a,t=c,r=l;break;case 5:e=l,t=c,r=u}return[L(255*e),L(255*t),L(255*r),H(w(n[3])?+n[3]:1,2)]}function g(n){var e,t=+n[0]/255,r=+n[1]/255,i=+n[2]/255,o=Math.max(t,r,i),c=Math.min(t,r,i),u=o,a=o-c,f=0===o?0:a/o;if(o===c)e=0;else{switch(o){case t:e=(r-i)/a+(r<i?6:0);break;case r:e=(i-t)/a+2;break;case i:e=(t-r)/a+4}e/=6}return[e,f,u,w(n[3])?+n[3]:1]}function b(n,e){var t=e.touches?e.touches[0].clientX:e.clientX,r=e.touches?e.touches[0].clientY:e.clientY,i=C(n);return[t-i[0],r-i[1]]}function m(n,e){if(n===e)return n;for(;(n=n.parentElement)&&n!==e;);return n}function C(e){var t,r,o;return e===n?(t=n.pageXOffset||i.scrollLeft,r=n.pageYOffset||i.scrollTop):(t=(o=e.getBoundingClientRect()).left,r=o.top),[t,r]}function k(e){return e===n?[n.innerWidth,n.innerHeight]:[e.offsetWidth,e.offsetHeight]}function y(n){n&&n.preventDefault()}function x(n){return"function"==typeof n}function w(n){return void 0!==n||null===n}function E(n){return"string"==typeof n}function P(n,e){return n<e[0]?e[0]:n>e[1]?e[1]:n}function H(n,e){return+n.toFixed(e)}function M(n,e){return parseInt(n,e||10)}function L(n){return Math.round(n)}function O(n,e){return n.toString(e)}function X(n,e,t){for(var r=0,i=e.length;r<i;++r)n.removeEventListener(e[r],t,!1)}function j(n,e,t){for(var r=0,i=e.length;r<i;++r)n.addEventListener(e[r],t,!1)}function z(n,e,t){n.style[e]=t}(r=n.CP=function(t,r){if(t){var H=this,M=n.CP,L={},O=e.createElement("div"),T=Object.assign({},M.state,E(r)?{color:r}:r||{}),Y=T.class;if(t.CP)return H;if(!(H instanceof M))return new M(t,r);M.instances[t.id||t.name||Object.keys(M.instances).length]=H,t.CP=1,H.visible=!1,O.className=Y,O.innerHTML='<div><div class="'+Y+':sv"><div></div><div></div><div></div><i></i></div><div class="'+Y+':h"><div></div><i></i></div><div class="'+Y+':a"><div></div><div></div><i></i></div></div>';var I,N,W,$,B=e.body,D=rn(),F=g(D),R=O.firstChild,S=R.children[0],_=R.children[1],q=R.children[2],A=S.children[0],G=S.children[3],J=(_.children[0],_.children[1]),K=q.children[0],Q=q.children[2],U=0,V=0,Z=0,nn=0,en=0,tn=0;!function r(o,x){F=g(D=rn()),o||((x||T.parent||B).appendChild(O),H.visible=!0),I=function(n){return r(0,n),on("enter",D),H},N=function(){var t=cn();return t&&(t.removeChild(O),H.current=null,H.visible=!1),X(S,l,gn),X(_,l,bn),X(q,l,mn),X(e,d,hn),X(e,h,pn),X(n,v,$),on("exit",D),H},W=function(e){var r=k(n),o=k(i),u=r[0]-o[0],s=r[1]-i.clientHeight,l=C(n),d=C(t),v=k(O),h=v[0],p=v[1],g=d[0]+l[0],b=d[1]+l[1]+k(t)[1];if("object"==typeof e)w(e[0])&&(g=e[0]),w(e[1])&&(b=e[1]);else{var m=l[0],y=l[1],x=l[0]+r[0]-h-u,E=l[1]+r[1]-p-s;g=P(g,[m,x])>>0,b=P(b,[y,E])>>0}return z(O,a,g+f),z(O,c,b+f),on("fit",D),H},$=function(){return W()};var E=k(S),M=E[0],Y=E[1],R=k(G),an=R[0],fn=R[1],sn=k(_)[1],ln=k(J)[1],dn=k(q)[1],vn=k(Q)[1];function hn(n){nn&&function(n){var e=b(S,n),t=P(e[0],[0,M]),r=P(e[1],[0,Y]);F[1]=1-(M-t)/M,F[2]=(Y-r)/Y,Cn()}(n),en&&function(n){F[0]=(sn-P(b(_,n)[1],[0,sn]))/sn,Cn()}(n),tn&&function(n){F[3]=(dn-P(b(q,n)[1],[0,dn]))/dn,Cn()}(n),D=p(F),(nn||en||tn)&&(on(U||V||Z?"start":"drag",D),on("change",D)),U=V=Z=0}function pn(n){D=p(F);var e=n.target,r=t===m(e,t),i=O===m(e,O);H.current=null,r||i?i&&(nn||en||tn)&&on("stop",D):L.blur?on("blur",D):cn()&&N(),nn=en=tn=0}function gn(n){H.current=S,U=nn=1,hn(n),y(n)}function bn(n){H.current=_,V=en=1,hn(n),y(n)}function mn(n){H.current=q,Z=tn=1,hn(n),y(n)}function Cn(){var n;w((n=F)[1])&&z(G,u,M-an/2-M*+n[1]+f),w(n[2])&&z(G,c,Y-fn/2-Y*+n[2]+f),w(n[0])&&z(J,c,sn-ln/2-sn*+n[0]+f),w(n[3])&&z(Q,c,dn-vn/2-dn*+n[3]+f);var e=p(F),t=p([F[0],1,1]);z(A,"backgroundColor","rgb("+t[0]+","+t[1]+","+t[2]+")"),z(K,"backgroundImage","linear-gradient(rgb("+e[0]+","+e[1]+","+e[2]+"),transparent)")}o?(j(t,l,un),s(function(){on("change",D)},1)):(j(S,l,gn),j(_,l,bn),j(q,l,mn),j(e,d,hn),j(e,h,pn),j(n,v,$),W()),H.get=function(){return rn()},H.set=function(n,e,t,r){return F=g([n,e,t,r]),Cn(),H},Cn()}(1),H.color=function(n,e,t,r){return M[x(M[T.color])?T.color:o]([n,e,t,r])},H.current=null,H.enter=I,H.exit=N,H.fire=on,H.fit=W,H.hooks=L,H.off=function(n,e){if(!w(n))return L={},H;if(w(L[n]))if(w(e)){for(var t=0,r=L[n].length;t<r;++t)e===L[n][t]&&L[n].splice(t,1);0===r&&delete L[n]}else delete L[n];return H},H.on=function(n,e){return w(L[n])||(L[n]=[]),w(e)&&L[n].push(e),H},H.pop=function(){return t.CP?(delete t.CP,X(t,l,un),N(),on("pop",D)):H},H.value=function(n,e,t,r){return H.set(n,e,t,r),on("change",[n,e,t,r])},H.self=O,H.source=t,H.state=T}function rn(n){var e,r=M[x(M[T.color])?T.color:o];return(e=t.dataset.color)?w(n)?t.dataset.color=r(e):r(e):(e=t.value)?w(n)?t.value=r(e):r(e):(e=t.textContent)?w(n)?t.textContent=r(e):r(e):w(n)?void 0:[0,0,0,1]}function on(n,e){if(!w(L[n]))return H;for(var t=0,r=L[n].length;t<r;++t)L[n][t].apply(H,e);return H}function cn(){return O.parentNode}function un(n){if(L.focus)on("focus",D);else{var e=n.target;t===m(e,t)?!cn()&&I(T.parent):N()}}}).version="2.1.2",r.state={class:"color-picker",color:o,parent:null},r.instances={},r[o]=function(n){if(E(n)){var e=(n=n.trim()).length;if(4!==e&&7!==e||"#"!==n[0]){if((5===e||9===e)&&"#"===n[0]&&/^#([a-z\d]{1,2}){4}$/i.test(n))return 5===e?[M(n[1]+n[1],16),M(n[2]+n[2],16),M(n[3]+n[3],16),H(M(n[4]+n[4],16)/255,2)]:[M(n[1]+n[2],16),M(n[3]+n[4],16),M(n[5]+n[6],16),H(M(n[7]+n[8],16)/255,2)]}else if(/^#([a-z\d]{1,2}){3}$/i.test(n))return 4===e?[M(n[1]+n[1],16),M(n[2]+n[2],16),M(n[3]+n[3],16),1]:[M(n[1]+n[2],16),M(n[3]+n[4],16),M(n[5]+n[6],16),1];return[0,0,0,1]}return"#"+("000000"+O(+n[2]|+n[1]<<8|+n[0]<<16,16)).slice(-6)+(w(n[3])&&n[3]<1?O(L(255*n[3])+65536,16).substr(-2):"")},r._=r.prototype}(window,document);
diff --git a/modules/internal/color-picker/credits b/modules/internal/color-picker/credits
new file mode 100644
index 00000000..a352fbcb
--- /dev/null
+++ b/modules/internal/color-picker/credits
@@ -0,0 +1,8 @@
+Color Picker
+
+
+Taufik Nurrohman
+https://github.com/taufik-nurrohman/color-picker
+https://taufik-nurrohman.js.org/color-picker/
+
+MIT License (MIT)