ywana-core8 0.0.11 → 0.0.15

package/dist/index.modern.js

@@ -1,2 +1,4087 @@
-import"material-design-icons-iconfont/dist/material-design-icons.css";import e,{useContext as n,useState as t,useEffect as i,Fragment as o,useRef as r,Children as l,useMemo as a}from"react";import c from"deep-equal";import u from"resumablejs";var s=function(e,n,t,i){void 0===t&&(t=null);try{console.log("FETCH",e,n);var o={method:e,mode:"cors",headers:{Accept:"application/json","Content-Type":"application/json","x-access-token":i},body:t};return Promise.resolve(function(e,t){try{var i=Promise.resolve(fetch(n,o)).then(function(e){var n;function t(t){if(n)return t;throw e}var i=function(){if(e.ok)return Promise.resolve(e.json()).then(function(e){return n=1,e})}();return i&&i.then?i.then(t):t(i)})}catch(e){return t(e)}return i&&i.then?i.then(void 0,t):i}(0,function(e){if(e instanceof Error)throw{error:e};return Promise.resolve(e.json()).then(function(e){throw{success:!1,message:e.message}})}))}catch(e){return Promise.reject(e)}},d=function(e,n){return{GET:function(t){var i=n?n.token():null;return s("GET",e+t,void 0,i)},POST:function(t,i){var o=n?n.token():null;return s("POST",e+t,i,o)},PUT:function(t,i){var o=n?n.token():null;return s("PUT",e+t,i,o)},PATCH:function(t,i){var o=n?n.token():null;return s("PATCH",e+t,i,o)},DELETE:function(t){var i=n?n.token():null;return s("DELETE",e+t,void 0,i)}}},f=process.env.REACT_APP_SESSION||window&&window.SESSION?window.SESSION:"YWANA-CORE6-SESSION",v={token:function(){return(sessionStorage.getItem(f)?JSON.parse(sessionStorage.getItem(f)):{}).token},me:function(){return(sessionStorage.getItem(f)?JSON.parse(sessionStorage.getItem(f)):{}).me},init:function(e,n){sessionStorage.setItem(f,JSON.stringify({token:e,me:n}))},refresh:function(e){var n=this.me();sessionStorage.setItem(f,JSON.stringify({token:e,me:n}))},isLoggedIn:function(){return!!sessionStorage.DSSession},logout:function(){sessionStorage.removeItem(f)}},m=function(e){var n=e.size,t=e.clickable,i=e.action;return h("i",{className:"icon "+(void 0===n?"normal":n)+" "+(void 0!==t&&t?"clickable":"")+" material-icons",onClick:function(e){e.stopPropagation(),e.preventDefault(),i&&i()}},e.icon)},p=function(e){var n=e.label,t=e.icon,i=e.action,o=e.disabled,r=void 0!==o&&o,l=e.raised?"raised":e.outlined?"outlined":"normal";return r&&(l+=" disabled"),h("button",{className:"btn "+l,onClick:function(e){r||(e.stopPropagation(),e.preventDefault(),i&&i())}},t?h(m,{icon:t,size:"small"}):null,h("span",null,n))},g=e.createContext({}),b=function(e){var t=e.children,i=n(g);if(i){var o=i.dictionary,r=(void 0===o?{}:o)[t],l=r?r[i.lang]:t;return l?h("span",null,l):""}return t?h("span",null,t):""},y=function(e){var n=e.id,t=e.label,i=e.placeholder,o=e.value,r=e.onChange;function l(e){r&&r(n,e.target.checked)}var a=h(b,null,t);return console.log(t,o),!0===o?h("div",{className:"checkbox",key:n+"1"},h("input",{id:n,type:"checkbox",placeholder:i,checked:!0,value:o,onChange:l}),h("span",{class:"checkmark"}),h("label",{htmlFor:n},a)):h("div",{className:"checkbox",key:n+"0"},h("input",{id:n,type:"checkbox",placeholder:i,value:o,onChange:l}),h("span",{class:"checkmark"}),h("label",{htmlFor:n},a))},N=function(e){var n=e.id,t=e.icon,i=e.label,o=e.action,r=e.onSelect,l=e.outlined?"outlined":"normal";return e.selected&&(l+=" selected"),h("div",{className:"chip "+l,onClick:function(e){e.stopPropagation(),e.preventDefault(),r&&r(n)}},t?h(m,{icon:t,size:"small"}):null,h("main",null,h(b,null,i)),o?h("span",{className:"meta"},o):null)},C=function(e){return h("div",{className:"chips"},e.children)},k=function(n){var r=n.title,l=n.columns,a=void 0===l?1:l,c=n.children,u=n.outlined,s=n.onChange,d=t([]),f=d[0],v=d[1],m=function(e){return null==e||""===e};i(function(){var n=e.Children.toArray(c).filter(function(e){return null!==e&&""!==e}).map(function(e){var n=e.props,t=n.id,i=n.value,o=n.required,r=void 0!==o&&o,l=n.validation,a=!r||(l?l(i):!m(i));return{id:t,value:i,required:r,validation:l,valid:a}}).filter(function(e){return void 0!==e.id});v(n)},[]),i(function(){if(s){var e=f.every(function(e){return!0===e.valid}),n=f.reduce(function(e,n){var t=n.value;return(t||!1===t)&&(e[n.id]=t),e},{});s(n,e)}},[f]);var p=function(e,n){var t=f.find(function(n){return n.id===e});if(t){var i=!t.required||(t.validation?t.validation(n):!m(n));Object.assign(t,{value:n,valid:i}),v(f.slice())}},g=e.Children.toArray(c).filter(function(e){return null!==e&&""!==e}).map(function(n){var t=n.props.span,i=void 0===t?1:t,o=e.cloneElement(n,{onChange:p,outlined:!!u});return h(O,{style:{gridColumn:"span "+i}},o)}),y={gridTemplateColumns:"repeat("+a+", 1fr)"};return h(o,null,r?h("header",{className:"form-header"},h(b,{use:"headline6"},r)):"",h("form",{className:"form-grid",style:y},g))},O=function(e){return h("div",{className:"field-wrapper",style:e.style},e.children)},P=function(e){var n=e.caption?"caption":"",t=e.prominent?"prominent":"",i=e.dense?"dense":"",o=e.primary?"primary":"";o=e.secondary?"secondary":o;var r=e.icon?h(m,{icon:e.icon,clickable:e.clickable,action:e.action}):"";r=e.iconSrc?h("img",{className:"header-icon",src:e.iconSrc}):r;var l=e.img?{backgroundImage:"url("+e.img+")"}:{},a=h(b,null,e.title);return h("header",{className:"header "+n+" "+t+" "+i+" "+o+" "+e.className,style:l},r,e.title?h("label",null,a):null,h("span",{className:"actions"},e.children))};function S(){return S=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},S.apply(this,arguments)}var E=function(e){var n=e.items,t=void 0===n?[]:n,i=e.children,o=e.onSelect;function r(e){o&&o(e)}return e.groupBy?h(w,S({},e,{onSelect:r})):h("div",{className:"list"},h("ul",null,t.map(function(e){return h(j,{key:e.id,item:e,onSelect:r})})),i)},w=function(e){var n=e.items,t=e.children,i=e.onSelect,r=e.groupBy,l=(void 0===n?[]:n).reduce(function(e,n){var t=e.find(function(e){return e.name===n.content[r]});return t||e.push(t={name:n.content[r],items:[]}),t.items.push(n),e},[]);return h("div",{className:"list"},l.map(function(e){return h(o,{key:e.name},h("header",{key:e.name+"-header"},h(b,null,e.name)),h("ul",{key:e.name+"-ul"},e.items.map(function(e){return h(j,{key:e.id,item:e,onSelect:i})})))}),t)},j=function(e){var n=e.item,t=e.onSelect,i=n.id,o=n.icon,r=n.line1,l=n.line2,a=n.meta;return h("li",{id:i,onClick:function(){t&&t(i)}},o?h(m,{icon:o,size:"small"}):null,h("main",null,h("div",{className:"primary-line"},h(b,null,r)),l?h("div",{className:"secondary-line"},h(b,null,l)):null),a?h("div",{className:"meta"},a):null)},A=e.createContext({}),T=function(e){return h("ul",null,e.children)},x=function(e){var n=e.icon,i=void 0===n?"more_vert":n,o=e.children,r=e.align,l=t(!1),a=l[0],c=l[1];function u(){c(!a)}return h(A.Provider,{value:[a,c]},h("div",{className:"menu-icon"},h(m,{icon:i,clickable:!0,action:u}),a?h("menu",{className:""+r},o):null,a?h("div",{className:"overlay",onClick:u}):null))},_=function(e){var t=e.icon,i=e.label,o=e.meta,r=e.onSelect,l=n(A)[1];return h("li",{className:"menu-item",onClick:function(){r&&r(),l(!1)}},t?h(m,{icon:t}):null,h("label",null,i),o?h("div",{className:"meta"},o):null)},D=function(e){return h("li",null,"menuSeparator")},I=function(e){return h("div",{className:"circular-progress"},h(m,{icon:"refresh",size:"small"}))},R=function(e){var n=e.progress,t=e.max;return h("div",{className:"linear-progress"},h("progress",{value:void 0===n?0:n,max:void 0===t?100:t}))},L=function(e){var n=e.value;return h("div",{className:"property"},h("div",{className:"property-name"},e.name),h("div",{className:"property-value"},n))},B=function(e){var n=e.id,t=e.name,i=e.placeholder,o=e.value,r=e.onChange,l=h(b,null,e.label);return h("div",{className:"radio"},h("input",{id:n,name:t,type:"radio",placeholder:i,value:o,onClick:function(e){r&&r(n,e.target.value)}}),h("span",{class:"checkmark"}),h("label",{htmlFor:n},l))},F=function(e){var n=e.icon,o=e.title,r=void 0===o?"":o,l=e.canCollapse,a=void 0===l||l,c=e.open,u=void 0!==c&&c,s=e.actions,d=e.children,f=e.className,v=t(u),p=v[0],g=v[1];return i(function(){g(u)},[u]),h("section",{className:"section2 "+f},h(P,{icon:{icon:n},title:r},s,a?h(m,{icon:"expand_more",onIcon:"expand_less",clickable:!0,action:function(){g(!u)}}):""),p?h("main",null,d):"")},z=function(n){var t=n.selected,i=n.onChange,o=e.Children.map(n.children,function(n,o){return e.cloneElement(n,{selected:o===t,onSelect:function(){i&&i(o)}})});return h("div",{class:"tabs"},o,h("div",{class:"tab-filler"}))},K=function(e){var n=e.onSelect;return h("div",{className:"tab "+(e.selected?"selected":""),onClick:function(){n&&n()}},e.label,e.actions||null)},U=function(n){var t=n.selected,i=void 0===t?0:t,r=e.Children.toArray(n.children).filter(function(e,n){return n===i})[0];return h(o,null,r)},Y=function(e){var t=n(g),i=e.id,o=e.type,r=void 0===o?"text":o,l=e.label,a=e.placeholder,c=e.value,u=e.readOnly,s=void 0!==u&&u,d=e.onChange,f=e.onEnter,v=e.onClick,m=(l?"":"no-label")+" "+(e.outlined?"textfield-outlined":"textfield"),p=h(b,null,l);return h("div",{className:""+m,onClick:v},h("input",{id:i,type:r,placeholder:a,value:c,required:!0,onChange:function(e){e.stopPropagation(),e.preventDefault(),d&&d(i,e.target.value)},onKeyDown:function(e){13==(e.charCode?e.charCode:e.keyCode?e.keyCode:0)&&f()},onFocus:function(){t&&t.changeFocus({lose:function(){}})},readOnly:s}),h("span",{className:"bar"}),l?h("label",null,p):null)},q=function(e){var o=n(g),r=e.id,l=e.options,a=void 0===l?[]:l,c=e.value,u=e.onChange,s=t(!1),d=s[0],f=s[1],v=t(),p=v[0],b=v[1];function y(){o&&o.changeFocus({lose:function(){f(!1)}}),f(!d)}return i(function(){if(Array.isArray(a)){var e=a.find(function(e){return e.value===c});e&&b(e.label)}},[c]),h("div",{className:"dropdown"},h(Y,S({},e,{onClick:y,value:p})),h(m,{icon:"expand_more",clickable:!0,size:"small",action:y}),1==d?h("menu",null,h("ul",{onClick:function(e){var n=e.target.getAttribute("value"),t=a.find(function(e){return e.value===n});u&&u(r,n),b(t.label),f(!1)}},Array.isArray(a)?a.map(function(e){return h("li",{key:e.value,value:e.value},e.label)}):null)):null)},M=function(e){var n=e.columns,i=void 0===n?[]:n,o=e.rows,r=void 0===o?[]:o,l=e.onRowSelection,a=e.onSort,c=e.editable,u=e.outlined,s=t({})[0];function d(e,n){l&&l(e,n)}function f(e,n){a&&a(e,n)}return h("div",{className:"datatable8 "+(u?"outlined":"")},h("table",null,h("thead",null,h("tr",null,i.map(function(e){var n=e.sortable;return h("th",null,h(b,null,e.label),n?h(m,{icon:"arrow_up",size:"small",clickable:!0}):null)}))),h("tbody",null,function(e,n){void 0===n&&(n={});var t=Object.keys(n);if(!t.length)return e;var i=function(e,n,t){return t=null!==t?t:1,e===n?0:e>n?t:-1*t};return e.sort(function(e,o){for(var r=0,l=0;0===r&&l<t.length;){var a=t[l];a&&(r=i(e[a],o[a],n[a]),l++)}return r})}(r,s).map(function(e){return h(G,{key:e.id,row:e,columns:i,onSelect:d,onDrop:f,editable:c})}))))},G=function(e){var n,i=e.row,r=e.columns,l=void 0===r?[]:r,a=e.onSelect,c=e.editable,u=t(!1),s=u[0],d=u[1],f=s?"expand_more":"expand_less";return h(o,null,h("tr",{onClick:function(e){return a(i,e)}},l.map(function(e){return h(J,{row:i,column:e,cell:i[e.id],editable:c})}),i.info?h(m,{icon:f,clickable:!0,action:function(){return d(!s)}}):null),i.info&&s?h("tr",{className:"table-row-info"},(n=i.info)&&("[object Function]"===Object.prototype.toString.call(n)||"function"==typeof n||n instanceof Function)?i.info():i.info):null)},J=function(e){var n=e.row,t=e.column,i=e.cell,o=e.editable;return h("td",{className:t.id},function(e){var r=t.id,l=t.disabled,a=void 0!==l&&l,c=t.min,u=t.max,s=t.onChange,d=t.options;if(o&&s)switch(e){case"ICON":return h(m,{icon:i});case"BOOLEAN":case"Boolean":return h(y,{id:r,value:i,onChange:function(e,t){return s(n.id,e,t)},disabled:a});case"SELECTION":return h(q,{id:r,value:i,placeholder:"--Select--",options:d,onChange:function(e,t){return s(n.id,e,t)}});case"CHECK":return h(y,{id:r,value:i,onChange:function(e,t){return s(n.id,e,t)},disabled:n.disabled});case"CHECKABLE":return i&&i.value?h(y,{id:r,value:i.checked||!1,label:i.value,onChange:function(e,t){return s(n.id,e,i.value,t,i)}}):"";case"TEXTFIELD":return h(Y,{id:r,value:i,onChange:function(e,t){return s(n.id,e,t)}});case"String":return h(W,{id:r,value:i,options:d,onChange:function(e,t){return s(n.id,e,t)}});case"Number":return h(Y,{id:r,type:"number",value:i,min:c,max:u,onChange:function(e,t){return s(n.id,e,t)}});default:return i}else switch(e){case"ICON":return h(m,{icon:i});case"Boolean":return h(H,{id:r,value:i});case"String":return h(V,{id:r,value:i,options:d});default:return i}}(t.type))},H=function(e){var n=e.value;return h(m,{icon:!0===(void 0!==n&&n)?"check_box":"check_box_outline_blank"})},V=function(e){var n=e.value,t=e.options,i=t?t.find(function(e){return e.value===n}):null;return h("div",{className:"field-editor string-editor"},i?i.label:n)},W=function(e){var n=e.id,t=e.value,i=void 0===t?"":t,o=e.options,r=e.onChange;function l(e,n){r&&r(e,n)}return h("div",{className:"field-editor string-editor"},o?h(q,{outlined:!0,id:n,value:i,onChange:l,options:o}):h(Y,{outlined:!0,id:n,value:i,onChange:l}))},X=function(e){var n=e.id,o=e.label,l=e.init,a=e.onChange,c=r(!1),u=t(),s=u[0],d=u[1],f=t(l),v=f[0],m=f[1];return i(function(){c.current?a&&v&&a(n,v):c.current=!0},[v]),h("div",{className:"tokenField"},h("label",null,o),v.map(function(e,n){return h(Q,{text:e,onDelete:function(){return function(e){var n=v.slice();n.splice(e,1),m(n)}(n)}})}),h("input",{type:"text",value:s,onChange:function(e){d(e.target.value)},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault(),e.stopPropagation();var n=v.concat(e.target.value);m(n),d("")}if(""===s&&v.length>0&&"Backspace"===e.key){var t=v.slice(0,-1);m(t)}}}))},Q=function(e){var n=e.onDelete;return h("div",{className:"token"},h(b,{use:"caption",tag:"div"},e.text),h(m,{icon:"close",clickable:!0,action:n,size:"small"}))},Z=function(e){var n=e.nodes;return h("div",{className:"tree"},void 0===n?[]:n,e.children)},$=function(e){var n=e.icon,t=void 0===n?"folder":n,i=e.label,o=e.open,r=e.children,l=e.actions;return h("details",{className:"tree-node",open:void 0!==o&&o},h("summary",{className:"tree-item"},t?h(m,{icon:t,size:"small",small:!0}):null,h("div",{className:"label"},i),h("div",{className:"actions"},l)),r)},ee=function(e){var n=e.id,t=e.icon,i=e.label,o=e.actions,r=e.onSelect;return h("div",{className:"tree-item final",onClick:function(){r&&r(n)}},h(m,{icon:void 0===t?"description":t,size:"small",small:!0}),h("div",{className:"label"},i),h("div",{className:"actions"},o))},ne=function(e){var n=e.logo,i=e.title,o=e.userLabel,r=void 0===o?"User":o,l=e.passwordLabel,a=void 0===l?"Password":l,c=e.loginLabel,u=void 0===c?"Log In":c,s=e.onOK,d=e.forgotLabel,f=void 0===d?"Forgot Password ?":d,v=e.onForgot,g=e.message,y=e.loading,N=t(""),C=N[0],k=N[1],O=t(""),P=O[0],S=O[1];function E(){return C&&C.length>0&&P&&P.length>0}function w(e){s&&E()&&s(C,e||P)}function j(e){return h(b,null,e)}return h("div",{className:"login-box"},h("header",null,n?h("img",{src:n}):"",h("div",{className:"title"},h(b,null,i))),h("main",null,h(Y,{label:j(r),value:C,onChange:function(e,n){k(n)},onEnter:w,outlined:!0}),h(Y,{label:j(a),value:P,onChange:function(e,n){S(n)},onEnter:w,type:"password",outlined:!0})),h("footer",null,v?h(p,{label:j(f),action:function(){v&&v(C)},disabled:!(C&&C.length>0)}):null,y?h("div",{className:"load-box"},h(m,{icon:"refresh"})):h(p,{label:j(u),action:w,disabled:!E(),raised:!0}),g?h("div",{className:"message"},h(b,null,g)):null))},te=function(e){var n=e.logo,i=e.title,o=e.children,r=e.onOK,l=e.onClose,a=t({}),c=a[0],u=a[1],s=t(),d=s[0],f=s[1];function v(){return c.password1&&c.password2}function m(e,n){var t,i=Object.assign({},c,((t={})[e]=n,t));u(i)}function g(){r&&v()&&(c.password1===c.password2?(f(null),r(c)):f("New Password and Confirm New Password do not match"))}return h("div",{className:"reset-password-box"},h("header",null,n?h("img",{src:n}):null,i?h("div",{className:"title"},h(b,null,i)):null,o),h("main",null,h(b,{use:"headline6"},"Change Password"),h(Y,{id:"password1",outlined:!0,icon:"lock",type:"password",label:"New Password",lapse:100,onChange:m,onEnter:g}),h(Y,{id:"password2",outlined:!0,icon:"lock",type:"password",label:"Confirm New Password",lapse:100,onChange:m,onEnter:g}),d?h("div",{className:"error"},d):null),h("footer",null,h(p,{label:"Close",action:function(){l&&l()}}),h(p,{label:"OK",raised:!0,disabled:!v(),action:g})))},ie=function(e){var n=e.title,i=e.src,o=e.info,r=e.actions,l=void 0===r?[]:r,a=e.tools,c=void 0!==a&&a,u=e.onClose,s=t(!1),d=s[0],f=s[1];function v(){f(!d)}var p=h(b,{use:"headline6"},n);return h("div",{className:"viewer"},h(P,{icon:{icon:"close",clickable:!0,action:u},title:p},d?"":h(m,{icon:"info",clickable:!0,action:v}),l),h("main",null,h("div",{className:"resizer"},h("picture",null,h("img",{src:i})))),h("aside",{className:d?"open":""},h(P,{title:"Detalles"},h(m,{icon:"close",clickable:!0,action:v})),h("main",null,o)),c?h("footer",null,h(m,{clickable:!0,icon:"zoom_out"}),h(m,{clickable:!0,icon:"zoom_out_map"}),h(m,{clickable:!0,icon:"zoom_in"})):null)},oe=function(e){return h("div",{className:"kanban"},e.children)},re=function(e){var n=e.id,i=e.icon,o=e.title,r=e.subtitle,l=e.badge,a=e.children,c=e.minified,u=e.disabled,s=void 0!==u&&u,d=t(void 0!==c&&c),f=d[0],v=d[1];function p(){v(!f)}return f?h("div",{className:"kanban-column "+n+" min"},h("main",null,o),h("footer",null,h(m,{icon:"toggle_off",onIcon:"toggle_on",clickable:!0,action:p}))):h("div",{className:"kanban-column "+n+" "+(s?"disabled":"")},h("header",null,h(m,{icon:i}),h("div",{className:"title"},h(b,{use:"headline6"},o),h(b,{className:"secondary-text",use:"body2"},r)),h("div",{className:"badge"},l)),h("main",null,a),h("footer",null,h(m,{icon:"toggle_off",onIcon:"toggle_on",clickable:!0,action:p})))},le=function(e){return h("div",{className:"kanban-card "+e.color},e.children)},ae=e.createContext({}),ce=function(e){var n=e.context,i=e.children,o=t(void 0===n?{}:n);return h(ae.Provider,{value:[o[0],o[1]]},i)},ue=function(e){var n=e.layout,t=e.context;return h(ce,{context:void 0===t?{}:t},h("article",{className:"page6 "+(void 0===n?"simple":n)},e.children))},se=function(e){var n=e.children,i=e.siteDictionary,o=t(e.siteLang),r=o[0],l=o[1],a=t(i),c=a[0],u=a[1],s=t("max"),d=s[0],f=s[1],v=t(!1),m=v[0],p=v[1],b=t(null),y=b[0],N=b[1],C=t(!1),k=C[0],O=C[1],P=t(),S=P[0],E=P[1],w=t(),j=w[0],A=w[1],T=t(),x=T[0],_=T[1],D=t(),I=D[0],R=D[1],L=t(),B=L[0],F=L[1],z={lang:r,setLang:l,dictionary:c,setDictionary:u,focused:B,changeFocus:function(e){B&&B.lose(),F(e)},sideNav:d,setSideNav:f,showNav:m,setShowNav:p,info:y,openInfo:function(e){N(e)},closeInfo:function(){N(null)},console:k,toggleConsole:function(){O(!k)},breadcrumb:I,setBreadcrumb:R,page:S,goto:function(e){E(e)},dialog:j,openDialog:function(e){A(e)},closeDialog:function(){A(null)},preview:x,openPreview:function(e){_(e)},closePreview:function(){_(null)}};return h(g.Provider,{value:z},n)},de=function(e){var n=e.logo,t=e.title,i=e.toolbar,o=e.children,r=e.init,l=e.min;return h(se,{siteLang:e.lang,siteDictionary:e.dictionary},h("div",{className:"site6"},h(he,{icon:e.icon}),h(fe,null,i),h(me,{logo:n,title:t,min:l},o),h(pe,{init:r},o,h(ue,{id:"EMPTY"},"EMPTY")),h(ve,null),h(ye,null),h(ge,null),h(be,null)))},he=function(e){var n=e.icon;return h(P,{icon:void 0===n?"equalizer":n,title:e.title})},fe=function(e){var t=e.children;return n(g),h("nav",null,t)},ve=function(){var e=n(g);return e.info?h("aside",null,e.info):""},me=function(e){var t=e.children,r=e.min,a=n(g),c=a.showNav;i(function(){r&&a.setSideNav("min")},[]);var u=t?l.toArray(t).reduce(function(e,n){var t=n.props?n.props.section:"...";e[t]||(e[t]=[]);var i=n.props,o=i.title;return o&&e[t].push({id:i.id,icon:i.icon,title:o}),e},{}):{};return h("menu",{className:"min "+(c?"show":"")},h("main",null,Object.keys(u).map(function(e){return h(o,{key:e},u[e].map(function(e){var n=e.id,t=e.icon;return h(m,{key:n,icon:void 0===t?"info":t,clickable:!0,checked:n===a.page,action:function(){return function(e){a.setShowNav(!1),a.goto(e)}(n)}})}),h("div",{className:"section-divider"}))})))},pe=function(t){var o=t.children,r=t.init,l=n(g),a=l.page;return i(function(){l.goto(r||"EMPTY")},[]),h("main",null,e.Children.toArray(o).filter(function(e){return!!e.props&&e.props.id===a}))},ge=function(){var e=n(g);return e.dialog?e.dialog:""},be=function(){var e=n(g);return e.preview?h("div",{className:"site-preview"},e.preview):""},ye=function(){return n(g).console?h("footer",{className:"site-console"},h(P,null,h(z,null,h(K,{label:"Console"}))),h("main",null)):""},Ne=function(e){var t=n(g),i=e.icon,r=e.title,l=void 0===r?"Dialog":r,a=e.children,c=e.actions;return h(o,null,h("div",{className:"overlay"}),h("div",{className:"dialog",onClick:function(){t.closeDialog()}},h("div",{className:"dialog-panel",onClick:function(e){e.preventDefault(),e.stopPropagation()}},h("header",null,i?h(x,{icon:i}):null,h(b,null,l)),h("main",null,a),h("footer",null,c))))},Ce={STRING:"String",NUMBER:"Number",DATE:"Date",BOOLEAN:"Boolean",ARRAY:"Array",ENTITY:"Object",FUNCTION:"Function",EMAIL:"String"},ke=Object.values(Ce).reduce(function(e,n){return e["is"+n]=function(e){return toString.call(e)=="[object "+n+"]"},e},{}),Oe=/*#__PURE__*/function(){function e(e){this._schema=e}var n=e.prototype;return n.checkType=function(n,t){var i=n.type,o=n.item,r=!0,l=!0;if(o){var a=new e(o);switch(i){case Ce.ARRAY:r=ke["is"+i](t),l=t.every(function(e){return a.validate(e)});break;case Ce.ENTITY:r=ke["is"+i](t),l=a.validate(t);break;case Ce.NUMBER:r=ke["is"+i](t.value),l=!0;break;default:r=!0,l=!0}}return r&&l},n.validate=function(e){var n=this;return Object.entries(this._schema).filter(function(e){return!0===e[1].required}).every(function(t){var i=t[0];return void 0!==e[i]&&n.checkType(t[1],e[i])})},n.form=function(e){return Object.entries(this._schema).reduce(function(n,t){var i=t[0];return n[i]=Object.assign({},t[1],{value:e[i]}),n},{})},n.sections=function(e){var n=this.form(e),t=Object.values(n).reduce(function(e,n){var t=n.section||"";return e.hasOwnProperty(t)||(e[t]={title:t,fields:[]}),e[t].fields.push(n),e},{});return Object.values(t)},n.value=function(n){return Object.entries(this._schema).reduce(function(t,i){var o=i[0],r=i[1],l=r.item,a=n?n[o]:null;switch(r.type){case Ce.STRING:case Ce.NUMBER:case Ce.BOOLEAN:t[o]=a||r.default;break;case Ce.ENTITY:var c=new e(l);t[o]=c.value(a);break;case Ce.ARRAY:if(l===Ce.STRING)t[o]=a||[];else{var u=new e(l);t[o]=a?a.map(function(e){return u.value(e)}):[]}break;default:t[o]=r}return t},{})},e}(),Pe=/*#__PURE__*/function(){function e(e,n){this.type=e,this._type=new Oe(e),this._value=n}var n=e.prototype;return n.isValid=function(){return this._type.validate(this._value)},n.value=function(){return this._type.value(this._value)},n.form=function(){return this._type.form(this._value)},n.sections=function(){return this._type.sections(this._value)},n.update=function(e){this._value=e},e}(),Se=function(e){var n=e.columns,t=void 0===n?1:n,i=e.filter,o=e.onChange,r=e.content.form();console.log(r);var l=Object.keys(r).map(function(e){return r[e]}).filter(function(e){return!i||i(e)});return console.log(l),h(k,{className:"content-form",columns:t,outlined:!0,onChange:o},l.map(function(e){return h(Ee,S({key:e.id},e))}))},Ee=function(e){switch(e.type){case Ce.BOOLEAN:return h(y,S({key:e.id},e));case Ce.NUMBER:return h(je,S({key:e.id},e));default:return h(we,S({key:e.id},e))}},we=function(e){var n,t=e.id,i=e.type,o=e.label,r=e.options,l=e.textarea,a=e.required,c=void 0!==a&&a,u=e.value,s=e.onChange,d=e.outlined,f=((n={})[Ce.NUMBER]="number",n[Ce.DATE]="date",n)[i]||"text";return r?h(q,{key:t,id:t,label:o,value:u,onChange:s,options:"function"==typeof r?r():r,outlined:d}):h(Y,{key:t,id:t,type:f,label:o,value:u,onChange:s,required:c,outlined:d,textarea:l})},je=function(e){var n=e.id,t=e.label,i=e.options,o=e.required,r=void 0!==o&&o,l=e.value,a=e.onChange,c=e.outlined;function u(e,n){a&&a(e,+n?+n:n)}return i?h(q,{key:n,id:n,label:t,value:l,onChange:u,options:i,outlined:c}):h(Y,{key:n,id:n,type:"number",label:t,value:l,onChange:u,required:r,outlined:c})},Ae=function(e){var n=e.content,t=e.filter,i=e.onChange;function o(e,t){var o,r=Object.assign({},n.value(),((o={})[e]=t,o));i&&i(r)}var r=n.sections();return h("div",{className:"content-editor"},r.map(function(e){var i=e.title,r=e.fields;return h("section",{key:i},h("header",null,i),h("main",null,r.filter(function(e){return"id"!==e.id}).filter(function(e){return!t||t(e,n)}).map(function(e){return h(_e,{key:e.id,field:e,onChange:o})})))}))},Te=function(e){var n=e.content,i=e.filter,r=e.grouped,l=void 0!==r&&r,a=e.onChange,c=t(0),u=c[0],s=c[1];function d(e,t){var i,o=Object.assign({},n.value(),((i={})[e]=t,i));a&&a(o)}var f=n.sections();return h("div",{className:"content-editor tabbed"},h(z,{selected:u,onChange:function(e){s(e)}},f.map(function(e){return h(K,{label:e.title})})),h(U,{selected:u},f.map(function(e){var t=e.fields;return h("section",{key:e.title},h("nav",null," "),h("main",null,l?function(e){var n=e.fields,t=(void 0===n?[]:n).reduce(function(e,n){var t=n.group||"",i=e[t]||{name:t,fields:[]};return i.fields.push(n),e[t]=i,e},{});return Object.values(t)}(e).map(function(e){return h(o,null,e.name.length>0?h("div",{className:"group-caption"},e.name):null,e.fields.filter(function(e){return"id"!==e.id}).filter(function(e){return!i||i(e)}).map(function(e){return h(_e,{key:e.id,field:e,onChange:d,content:n})}))}):t.filter(function(e){return"id"!==e.id}).filter(function(e){return!i||i(e)}).map(function(e){return h(_e,{key:e.id,field:e,onChange:d,content:n})})))})))},xe=function(e){var n=e.content,i=e.onChange,o=n.value(),r=Object.values(n.type).filter(function(e){return e.type===Ce.ARRAY}),l=t(),a=l[0],c=l[1];function u(){}return h("div",{className:"content-editor treeded-editor"},h("menu",null,h("header",null,h(b,{use:"caption"},"Tree Editor")),h(Z,null,r.map(function(e,n){return h($,{icon:"folder",label:e.label,actions:[h(m,{small:!0,icon:"add",clickable:!0,action:u})]},o[e.id]?o[e.id].map(function(n,t){return h(ee,{icon:n.icon||"description",label:n.name||n.label,onSelect:function(){return function(e,n,t){var i=new Pe(t.item,n);c({index:e,item:i,node:t,value:o[t.id]})}(t,n,e)}})}):null)}))),h("div",null,a?h(Te,{content:a.item,onChange:function(e){var n,t=a.value.slice();t[a.index]=e;var r=Object.assign({},o,((n={})[a.node.id]=t,n));i&&i(r)}}):"select"))},_e=function(e){var n=e.field,t=e.onChange,i=e.content,o=e.outlined,r=void 0!==o&&o,l=n.id,a=n.type,c=n.item,u=n.label,s=n.editable,d=n.options;function f(e,n){t&&t(e,n)}return function(){var e=n.value?n.value:n.default;switch(a){case Ce.ENTITY:return h(De,{field:n,value:e,onChange:f});case Ce.STRING:return h(Ie,{outlined:r,field:n,value:e,onChange:f,content:i});case Ce.BOOLEAN:return h(y,{outlined:!0,id:l,label:u,value:e,onChange:f});case Ce.DATE:return h(Y,{outlined:r,id:l,type:"date",label:u,value:e,onChange:f,disabled:s});case Ce.NUMBER:return h(Re,{outlined:r,field:n,value:e,onChange:f});case Ce.ARRAY:return c===Ce.STRING?d?h(Be,{content:i,field:n,value:e,onChange:f}):h(Le,{field:n,value:e,onChange:f}):h(Fe,{field:n,value:e,onChange:f});default:return h("div",null,u)}}()},De=function(e){var n=e.field,t=e.value,i=e.onChange,o=n.id,r=n.label,l=new Pe(n.item,void 0===t?{}:t);function a(e,n){var t,r=Object.assign({},l.value(),((t={})[e]=n,t));i&&i(o,r)}var c=l.form(),u=Object.keys(c).map(function(e){return c[e]});return h("div",{className:"entity-editor"},h("header",null,h(b,{use:"caption"},r)),h("main",null,u.map(function(e){return h(_e,{key:e.id,field:e,onChange:a})})))},Ie=function(e){var n=e.field,t=e.value,i=void 0===t?"":t,o=e.onChange,r=e.outlined,l=n.id,a=n.label,c=n.options,u=n.editable;function s(e,n){o&&o(e,n)}return h("div",{className:"field-editor string-editor"},void 0===u||u?c?h(q,{outlined:r,id:l,label:a,value:i,onChange:s,options:"function"==typeof c?c(n,e.content):c}):h(Y,{outlined:r,id:l,label:a,value:i,onChange:s}):h(Y,{outlined:r,id:l,label:a,value:i,onChange:s,readOnly:!0}))},Re=function(e){var n=e.field,t=e.onChange,i=n.editable;return h("div",{className:"field-editor number-editor"},h(Y,{outlined:!0,id:n.id,label:n.label,type:"NUMBER",value:e.value||n.default,max:n.max,min:n.min,onChange:function(e,n){t&&t(e,n)},disabled:!(void 0===i||i)}))},Le=function(e){var n=e.field,t=e.value,i=e.onChange;return h("div",{className:"list-editor"},h(X,{id:n.id,label:n.label,init:void 0===t?[]:t,onChange:function(e,n){i&&i(e,n)}}))},Be=function(e){var n=e.field,t=e.value,i=void 0===t?[]:t,o=e.content,r=e.onChange,l=n.id,a=n.options;return h("div",{className:"multiselection-editor"},h("label",null,n.label),("function"==typeof a?a(n,o):a).map(function(e){var n=i.includes(e.value);return h(y,{value:n,label:e.label,onChange:function(){return(t=i.indexOf(n=e.value))>=0?i.splice(t,1):i.push(n),void(r&&r(l,i));var n,t}})}))},Fe=function(e){var n=e.field,t=e.value,i=void 0===t?[]:t,o=e.onChange,r=n.id,l=n.item,a=n.label,c=n.Feeder,u=n.Renderer,s=n.Adder,d=void 0===s||s,f=n.editable,v=void 0===f||f;function p(e){if(o){var n=i.concat(e);o(r,n)}}function g(e){if(o){var n=i.filter(function(n,t){return t!==e});o(r,n)}}function y(e,n,t){if(o){var l=i.slice();l[e][n]=t,o(r,l)}}var N=Object.values(l).map(function(e){return S({},e,{onChange:y})});N.push({id:"actions",label:"Actions"});var C=i.map(function(e,n){return S({},e,{id:n,actions:[h(m,{icon:"delete",clickable:!0,action:function(){return g(n)},small:!0})]})}),k={columns:N,rows:C};return h("div",{className:"collection-editor"},h("header",null,h(b,{use:"caption"},a),h("div",{className:"actions"},c?h(c,{onAdd:p}):null)),u?h(u,{field:n,value:i,onRemove:g,onChange:o}):h(M,S({},k,{editable:v})),h("footer",null,d?h(ze,{item:l,onAdd:p}):null))},ze=function(e){var n=e.item,i=e.onAdd,o=t(!1),r=o[0],l=o[1],a=t({}),c=a[0],u=a[1];function s(){l(!r)}function d(e,n,t){if(i){var o,r=Object.assign({},c,((o={})[n]=t,o));u(r)}}var f=Object.values(n).map(function(e){return S({},e,{type:"String",onChange:d})});f.push({id:"actions",label:""});var v=[{actions:[h(m,{icon:"done",clickable:!0,action:function(){i&&i([c]),s()}}),h(m,{icon:"close",clickable:!0,action:s})]}];return v[0]=Object.assign({},c,v[0]),h("div",{className:"collection-adder"},r?h(M,S({},{columns:f,rows:v},{editable:!0})):h(p,{icon:"add",label:"Add",action:s}))},Ke=function(e){var i=e.label,r=e.type,l=e.validator,a=e.onOK,c=e.onActionClose,u=void 0===c||c,s=n(g),d=t({}),f=d[0],v=d[1],m=t(!1),y=m[0],N=m[1],C=t([]),k=C[0],O=C[1];function P(e){"OK"===e&&a&&a(f),"CLOSE"!==e&&!0!==u||s.closeDialog()}var S=h(o,null,h(p,{label:"CLOSE",action:function(){return P("CLOSE")}}),h(p,{label:"OK",action:function(){return P("OK")},disabled:!y,raised:!0})),E=h(b,{use:"headline6"},i),w=new Pe(r,f);return h(Ne,{title:E,open:!0,onAction:P,actions:S},h(Se,{content:w,filter:function(e){return function(e){var n=e.required;return void 0!==n&&n}(e)||function(e){var n=e.creation;return void 0!==n&&n}(e)},onChange:function(e,n){if(v(e),l){var t=l(e),i=t.errors,o=void 0===i?[]:i;N(n&&t.validation),O(o)}else N(n)}}),k.map(function(e){return h(b,{use:"overline",tag:"div",className:"error"},e)}))},Ue=function(e){var i=e.label,r=e.type,l=e.value,a=void 0===l?{}:l,c=e.filter,u=e.validator,s=e.onOK,d=n(g),f=t(a),v=f[0],m=f[1],y=t(!1),N=y[0],C=y[1],k=t([]),O=k[0],P=k[1];function S(e){"OK"===e&&s&&s(Object.assign({},a,v)),d.closeDialog()}var E=h(o,null,h(p,{label:"CLOSE",action:function(){return S("CLOSE")}}),h("div",{className:"expand"}),h(p,{label:"OK",action:function(){return S("OK")},disabled:!N,raised:!0})),w=h(b,{use:"headline6"},i),j=new Pe(r,v);return h(Ne,{title:w,open:!0,onAction:S,actions:E},h(Ae,{content:j,onChange:function(e){if(m(e),u){var n=u(e),t=n.errors,i=void 0===t?[]:t;C(n.validation),P(i)}else C(!0)},filter:c}),O.map(function(e){return h(b,{use:"overline",tag:"div",className:"error"},e)}))};function Ye(e,n){try{var t=e()}catch(e){return n(e)}return t&&t.then?t.then(void 0,n):t}var qe=d(window.API||process.env.REACT_APP_API,v),Me=function(e){var t=n(g),r=e.id,l=void 0===r?"collection":r,a=e.icon,c=e.title,u=e.name,s=void 0===u?"Collection 1":u,d=e.schema,f=e.url,v=e.groupBy,m=e.editor,y=e.field,N=e.autosave,C=void 0!==N&&N,k=e.delay,O=void 0===k?1e3:k,S=e.actions,E=e.levels,w=n(ae),j=w[0],A=w[1],T=Ve(f,y);return i(function(){try{return Promise.resolve(T.load()).then(function(){A(T)})}catch(e){return Promise.reject(e)}},[]),h(o,null,h(P,{className:"collection-page",title:h(b,null,c)},h(p,{icon:"add",label:"Add",action:function(){t.openDialog(h(Ue,{label:"Crear "+s,type:d,onOK:function(e){try{return Promise.resolve(j.create(e)).then(function(){A(Object.assign({},j))})}catch(e){return Promise.reject(e)}}}))}}),h(p,{icon:"refresh",label:"Reload",action:function(){try{return Promise.resolve(j.load()).then(function(){A(Object.assign({},j))})}catch(e){return Promise.reject(e)}}}),S),h("menu",{className:"collection-page"},h(P,{title:h(b,null,"Lista de ",s)}),E?h(Je,{levels:E}):h(Ge,{groupBy:v})),h("main",{key:l,className:"collection-page"},h(He,{icon:a,schema:d,layout:m,autosave:C,delay:O})))},Ge=function(e){var t=e.groupBy,i=n(ae),o=i[0],r=i[1],l=o.all,a=void 0===l?[]:l,c=a?a.map(function(e){return{id:e.id,line1:e.name,line2:e.description,content:e}}):[];return h(E,{items:c,onSelect:function(e){try{return o.clear(),r(Object.assign({},o)),Promise.resolve(o.select(e)).then(function(){r(Object.assign({},o))})}catch(e){return Promise.reject(e)}},groupBy:t})},Je=function(e){var t=function(e){try{return r.clear(),l(Object.assign({},r)),Promise.resolve(r.select(e)).then(function(){l(Object.assign({},r))})}catch(e){return Promise.reject(e)}},i=e.levels,o=n(ae),r=o[0],l=o[1],a=r.all,c=function e(n,t){var i=function(e,n){return e.reduce(function(e,t){var i=e.find(function(e){return e.name===t[n]});return i||e.push(i={name:t[n],items:[],field:n}),i.items.push(t),e},[])}(t,n[0]);return n.length>1&&i.forEach(function(t){return t.nodes=e(n.slice(1),t.items)}),i}(i,void 0===a?[]:a);return h("main",null,h(Z,null,function e(n){return n.map(function(n){return h($,{key:n.name,icon:null,label:"boolean"==typeof n.name?n.field+" = "+n.name:n.name,open:!0},n.nodes?e(n.nodes):n.items.map(function(e){return h(ee,{key:e.id,id:e.id,label:e.name,onSelect:t},"item")}))})}(c)))},He=function(e){var l=function(){try{return console.log("saving....."),Promise.resolve(u.update(w)).then(function(){s(Object.assign({},u))})}catch(e){return Promise.reject(e)}},a=n(ae),u=a[0],s=a[1],d=u.selected,f=e.icon,v=e.schema,g=e.layout,y=e.autosave,N=void 0!==y&&y,C=e.delay,k=void 0===C?1e3:C,O=r(null),E=t(d),w=E[0],j=E[1];function A(e){j(e)}function D(){return!c(w,d)}return i(function(){j(d)},[d]),i(function(){N&&(clearTimeout(O.current),O.current=setTimeout(function(){D()&&l()},k))},[w]),d&&w?h(o,null,h(P,{icon:f,title:h(b,null,d.name)},h(m,{icon:"close",clickable:!0,action:function(){u.clear(),s(Object.assign({},u))}}),h(x,{align:"alignRight"},h(T,null,h(_,{label:"Eliminar",onSelect:function(){try{return Promise.resolve(u.remove(d.id)).then(function(){u.clear(),s(Object.assign({},u))})}catch(e){return Promise.reject(e)}}}))),!0===N?null:h(p,{icon:"save",label:"Guardar Cambios",raised:!0,disabled:!D(),action:l})),function(){var n=new Pe(v,w);switch(g){case"TABBED":return h(Te,S({},e,{content:n,onChange:A}));case"TREEDED":return h(xe,S({},e,{content:n,onChange:A}));default:return h(Ae,S({},e,{content:n,onChange:A}))}}()):null},Ve=function(e,n){var t=We(e);return{all:[],selected:null,load:function(){try{var e=this,i=Ye(function(){return Promise.resolve(t.all()).then(function(t){e.all=n?t[n]:t})},function(e){console.log(e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},select:function(e){var n=this.all.find(function(n){return n.id===e});this.selected=n},clear:function(){this.selected=null},create:function(e){try{var n=this,i=Ye(function(){return Promise.resolve(t.create(e)).then(function(){return Promise.resolve(n.load()).then(function(){})})},function(e){console.log("CREATE ERROR",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},update:function(e){try{var n=this,i=Ye(function(){return Promise.resolve(t.update(e)).then(function(){return Promise.resolve(n.load()).then(function(){})})},function(e){console.log(e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},patch:function(e,n){try{var i=this,o=Ye(function(){return Promise.resolve(t.patch(e,n)).then(function(){return Promise.resolve(i.load()).then(function(){})})},function(e){console.log(e)});return Promise.resolve(o&&o.then?o.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},updateProperty:function(e,n,i){try{var o=this,r=Ye(function(){return Promise.resolve(t.updateProperty(e,n,i)).then(function(){return Promise.resolve(o.load()).then(function(){})})},function(e){console.log(e)});return Promise.resolve(r&&r.then?r.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},remove:function(e){try{var n=this,i=Ye(function(){return Promise.resolve(t.remove(e)).then(function(){return Promise.resolve(n.load()).then(function(){})})},function(e){console.log(e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}}},We=function(e){return{all:function(){return qe.GET(e)},find:function(n){return qe.GET(e+"/"+n)},create:function(n){var t=JSON.stringify(n);return qe.POST(e,t)},update:function(n){var t=JSON.stringify(n);return qe.PUT(e+"/"+n.id,t)},patch:function(n,t){var i=JSON.stringify(t);return qe.PATCH(e+"/"+n,i)},updateProperty:function(n,t,i){var o=JSON.stringify(i);return qe.PUT(e+"/"+n+"/"+t,o)},remove:function(n){return qe.DELETE(e+"/"+n)}}},Xe=function(e){var n=r(),o=t(!1),l=o[0],a=o[1];i(function(){var t=e.resumable;t&&n&&t.assignDrop(n.current)},[]);var c=e.state,u=void 0===c?0:c,s=e.label,d=void 0===s?"Add file or drop file here...":s,f=e.error;return h("div",{className:"upload-area6 "+(!0===l?"drag-over":""),onDragOver:function(){a(!0)},onDragLeave:function(){a(!1)},ref:n},0===u?h(Qe,{resumable:e.resumable}):"",0===u?h("label",null,d):"",1===u?h(I,{size:"xlarge"}):"",2===u?h(m,{icon:"done_all"}):"",3===u?h(b,{use:"body1"},f):"",e.children)},Qe=function(e){var n=e.resumable,t=r();return i(function(){n&&t&&n.assignBrowse(t.current)},[]),h("div",{className:"upload-icon",ref:t},h(m,{icon:"folder_open",clickable:!0}))},Ze=function(e){var n=e.label,i=e.target,o=e.accept,r=e.className,l=e.onSuccess,c=e.onError,s=e.onComplete,d=a(function(){var e=new u({target:i,chunkSize:1048576,simultaneousUploads:1,testChunks:!1,throttleProgressCallbacks:1,fileType:o});return e.on("fileAdded",O),e.on("fileProgress",P),e.on("fileSuccess",S),e.on("fileError",E),e.on("complete",w),e},[]),f=t(0)[1],v=t(0),m=v[0],p=v[1],g=t(),b=g[0],y=g[1],N=t([]),C=N[0],k=N[1];function O(e){C.push(e),k(C),d.upload()}function P(e){var n=e.progress();f(n)}function S(e,n){p(2),l&&l(e,n)}function E(e,n){y(n),p(3),c&&c(e,n)}function w(){p(0),s&&s(C)}return h("div",{className:"uploader "+r},h(Xe,{resumable:d,state:m,label:n,error:b}))},$e=function(e){var n=e.file,t=e.state,i=e.progress,r=e.error,l=r?h(m,{icon:"image",className:"error"}):h(m,{icon:"image"});return 0!==t?h(o,null,h("div",{className:"upload-file"},l,h(b,{use:"body1",tag:"label"},n.fileName),1===t?h(R,{progress:i}):"",1===t?h(m,{icon:"close",clickable:!0}):"",2===t?h(m,{icon:"done"}):"",3===t?h(m,{icon:"error"}):""),r?h("div",{className:"error"},h(b,{use:"overline"},r)):""):""},en=function(e){var i=e.label,r=e.target,l=e.accept,a=e.onSuccess,c=e.onClose,u=e.onActionClose,s=void 0===u||u,d=n(g),f=t(),v=f[0],m=f[1],y=t([])[0];function N(e){"CLOSE"!==e&&!0!==s||(d.closeDialog(),c())}var C=h(o,null,h(p,{label:"CLOSE",action:function(){return N("CLOSE")}})),k=h(b,{use:"headline6"},i);return h(Ne,{title:k,open:!0,onAction:N,actions:C},v?h($e,{file:v}):h(Ze,{label:i,accept:l,target:r,onComplete:function(e){m(e[0]),a&&a(e[0])}}),y.map(function(e){return h(b,{use:"overline",tag:"div",className:"error"},e)}))},nn=function(e){return e&&("[object Function]"===Object.prototype.toString.call(e)||"function"==typeof e||e instanceof Function)};export{p as Button,y as CheckBox,N as Chip,C as Chips,I as CircularProgress,Ve as CollectionContext,Fe as CollectionEditor,Me as CollectionPage,Pe as Content,Ae as ContentEditor,Se as ContentForm,Ke as CreateContentDialog,M as DataTable,Ne as Dialog,q as DropDown,Ue as EditContentDialog,_e as FieldEditor,k as Form,d as HTTPClient,P as Header,m as Icon,oe as Kanban,le as KanbanCard,re as KanbanColumn,R as LinearProgress,E as List,Le as ListEditor,ne as LoginBox,T as Menu,x as MenuIcon,_ as MenuItem,D as MenuSeparator,ue as Page,ae as PageContext,ce as PageProvider,L as Property,B as RadioButton,te as ResetPasswordBox,F as Section,v as Session,de as Site,g as SiteContext,se as SiteProvider,U as Stack,Ce as TYPES,K as Tab,Te as TabbedContentEditor,z as Tabs,b as Text,Y as TextField,X as TokenField,Z as Tree,ee as TreeItem,$ as TreeNode,xe as TreededContentEditor,Xe as UploadArea,en as UploadDialog,$e as UploadFile,Ze as Uploader,ie as Viewer,nn as isFunction};
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import React, { useContext, useState, useEffect, Fragment, useRef, Children, useMemo } from 'react';
+import equal from 'deep-equal';
+import ResumableJS from 'resumablejs';
+
+function _catch$1(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+var fetchAsync = function fetchAsync(method, URL, body, token) {
+  if (body === void 0) {
+    body = null;
+  }
+
+  try {
+    console.log('FETCH', method, URL);
+    var request = {
+      method: method,
+      mode: 'cors',
+      headers: {
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "x-access-token": token
+      },
+      body: body
+    };
+    return Promise.resolve(_catch$1(function () {
+      return Promise.resolve(fetch(URL, request)).then(function (response) {
+        var _exit;
+
+        function _temp2(_result) {
+          if (_exit) return _result;
+          throw response;
+        }
+
+        var _temp = function () {
+          if (response.ok) {
+            return Promise.resolve(response.json()).then(function (json) {
+              _exit = 1;
+              return json;
+            });
+          }
+        }();
+
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+      });
+    }, function (error) {
+      if (error instanceof Error) {
+        throw {
+          error: error
+        };
+      }
+
+      return Promise.resolve(error.json()).then(function (json) {
+        throw {
+          success: false,
+          message: json.message
+        };
+      });
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var HTTPClient = function HTTPClient(domain, securityCtx) {
+  return {
+    GET: function GET(URL) {
+      var token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('GET', domain + URL, undefined, token);
+    },
+    POST: function POST(URL, body) {
+      var token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('POST', domain + URL, body, token);
+    },
+    PUT: function PUT(URL, body) {
+      var token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('PUT', domain + URL, body, token);
+    },
+    PATCH: function PATCH(URL, body) {
+      var token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('PATCH', domain + URL, body, token);
+    },
+    DELETE: function DELETE(URL) {
+      var token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('DELETE', domain + URL, undefined, token);
+    }
+  };
+};
+
+/**
+ * Session store
+ * implements securityCtx methods
+ */
+var SESSION_NAME = process.env.REACT_APP_SESSION || window && window.SESSION ? window.SESSION : 'YWANA-CORE6-SESSION';
+var Session = {
+  token: function token() {
+    var item = sessionStorage.getItem(SESSION_NAME);
+    var json = item ? JSON.parse(sessionStorage.getItem(SESSION_NAME)) : {};
+    return json.token;
+  },
+  me: function me() {
+    var item = sessionStorage.getItem(SESSION_NAME);
+    var json = item ? JSON.parse(sessionStorage.getItem(SESSION_NAME)) : {};
+    return json.me;
+  },
+  init: function init(token, me) {
+    sessionStorage.setItem(SESSION_NAME, JSON.stringify({
+      token: token,
+      me: me
+    }));
+  },
+  refresh: function refresh(token) {
+    var me = this.me();
+    sessionStorage.setItem(SESSION_NAME, JSON.stringify({
+      token: token,
+      me: me
+    }));
+  },
+  isLoggedIn: function isLoggedIn() {
+    return !!sessionStorage.DSSession;
+  },
+  logout: function logout() {
+    sessionStorage.removeItem(SESSION_NAME);
+  }
+};
+
+/**
+ * Icon 
+ */
+
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "normal" : _ref$size,
+      _ref$clickable = _ref.clickable,
+      clickable = _ref$clickable === void 0 ? false : _ref$clickable,
+      action = _ref.action;
+
+  function click(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (action) action();
+  }
+
+  var clicker = clickable ? "clickable" : "";
+  return /*#__PURE__*/React.createElement("i", {
+    className: "icon " + size + " " + clicker + " material-icons",
+    onClick: click
+  }, icon);
+};
+
+/**
+ * HTML Button
+ */
+
+var Button = function Button(_ref) {
+  var label = _ref.label,
+      icon = _ref.icon,
+      action = _ref.action,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      outlined = _ref.outlined,
+      raised = _ref.raised;
+
+  function click(event) {
+    if (!disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      if (action) action();
+    }
+  }
+
+  var style = raised ? 'raised' : outlined ? 'outlined' : 'normal';
+  if (disabled) style = style + " disabled";
+  return /*#__PURE__*/React.createElement("button", {
+    className: "btn " + style,
+    onClick: click
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: "small"
+  }) : null, /*#__PURE__*/React.createElement("span", null, label));
+};
+
+/**
+ * Site Context
+ */
+
+var SiteContext = React.createContext({});
+
+/**
+ * Text
+ */
+
+var Text = function Text(_ref) {
+  var children = _ref.children;
+  var site = useContext(SiteContext);
+
+  if (site) {
+    var lang = site.lang,
+        _site$dictionary = site.dictionary,
+        dictionary = _site$dictionary === void 0 ? {} : _site$dictionary;
+    var term = dictionary[children];
+    var text = term ? term[lang] : children;
+    return text ? /*#__PURE__*/React.createElement("span", null, text) : '';
+  }
+
+  return children ? /*#__PURE__*/React.createElement("span", null, children) : '';
+};
+
+/**
+ * CheckBox
+ */
+
+var CheckBox = function CheckBox(props) {
+  var id = props.id,
+      label = props.label,
+      placeholder = props.placeholder,
+      value = props.value,
+      onChange = props.onChange;
+
+  function change(event) {
+    var value = event.target.checked;
+    if (onChange) onChange(id, value);
+  }
+
+  var labelTxt = /*#__PURE__*/React.createElement(Text, null, label);
+  console.log(label, value);
+  return value === true ? /*#__PURE__*/React.createElement("div", {
+    className: "checkbox",
+    key: id + "1"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: id,
+    type: "checkbox",
+    placeholder: placeholder,
+    checked: true,
+    value: value,
+    onChange: change
+  }), /*#__PURE__*/React.createElement("span", {
+    "class": "checkmark"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, labelTxt)) : /*#__PURE__*/React.createElement("div", {
+    className: "checkbox",
+    key: id + "0"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: id,
+    type: "checkbox",
+    placeholder: placeholder,
+    value: value,
+    onChange: change
+  }), /*#__PURE__*/React.createElement("span", {
+    "class": "checkmark"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, labelTxt));
+};
+
+/**
+ * Chip
+ */
+
+var Chip = function Chip(props) {
+  var id = props.id,
+      icon = props.icon,
+      label = props.label,
+      action = props.action,
+      outlined = props.outlined,
+      selected = props.selected,
+      onSelect = props.onSelect;
+
+  function select(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (onSelect) onSelect(id);
+  }
+
+  var style = outlined ? "outlined" : "normal";
+  if (selected) style = style + " selected";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "chip " + style,
+    onClick: select
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: "small"
+  }) : null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Text, null, label)), action ? /*#__PURE__*/React.createElement("span", {
+    className: "meta"
+  }, action) : null);
+};
+/**
+ * Chips
+ */
+
+var Chips = function Chips(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "chips"
+  }, children);
+};
+
+/**
+ * Form
+ */
+
+var Form = function Form(_ref) {
+  var title = _ref.title,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? 1 : _ref$columns,
+      children = _ref.children,
+      outlined = _ref.outlined,
+      onChange = _ref.onChange;
+
+  var _useState = useState([]),
+      fields = _useState[0],
+      setFields = _useState[1];
+
+  var isEmpty = function isEmpty(value) {
+    return value === void 0 || value === null || value === '';
+  };
+
+  useEffect(function () {
+    var initFields = React.Children.toArray(children).filter(function (child) {
+      return child !== null && child !== '';
+    }).map(function (child) {
+      var _child$props = child.props,
+          id = _child$props.id,
+          value = _child$props.value,
+          _child$props$required = _child$props.required,
+          required = _child$props$required === void 0 ? false : _child$props$required,
+          validation = _child$props.validation;
+      var valid = required ? validation ? validation(value) : !isEmpty(value) : true;
+      return {
+        id: id,
+        value: value,
+        required: required,
+        validation: validation,
+        valid: valid
+      };
+    }).filter(function (field) {
+      return field.id !== void 0;
+    });
+    setFields(initFields);
+  }, []);
+  useEffect(function () {
+    if (onChange) {
+      var valid = fields.every(function (_ref2) {
+        var valid = _ref2.valid;
+        return valid === true;
+      });
+      var form = fields.reduce(function (form, _ref3) {
+        var id = _ref3.id,
+            value = _ref3.value;
+        if (value || value === false) form[id] = value;
+        return form;
+      }, {});
+      onChange(form, valid);
+    }
+  }, [fields]);
+
+  var changeField = function changeField(id, value) {
+    var field = fields.find(function (f) {
+      return f.id === id;
+    });
+
+    if (field) {
+      var valid = field.required ? field.validation ? field.validation(value) : !isEmpty(value) : true;
+      Object.assign(field, {
+        value: value,
+        valid: valid
+      });
+      setFields(fields.slice());
+    }
+  };
+
+  var items = React.Children.toArray(children).filter(function (child) {
+    return child !== null && child !== '';
+  }).map(function (child) {
+    var _child$props$span = child.props.span,
+        span = _child$props$span === void 0 ? 1 : _child$props$span;
+    var field = React.cloneElement(child, {
+      onChange: changeField,
+      outlined: !!outlined
+    });
+    var columnLayout = {
+      gridColumn: "span " + span
+    };
+    return /*#__PURE__*/React.createElement(FieldWrapper, {
+      style: columnLayout
+    }, field);
+  });
+  var gridLayout = {
+    gridTemplateColumns: "repeat(" + columns + ", 1fr)"
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, title ? /*#__PURE__*/React.createElement("header", {
+    className: "form-header"
+  }, /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, title)) : '', /*#__PURE__*/React.createElement("form", {
+    className: "form-grid",
+    style: gridLayout
+  }, items));
+};
+/**
+ * Form Field Wrapper
+ */
+
+var FieldWrapper = function FieldWrapper(_ref4) {
+  var style = _ref4.style,
+      children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field-wrapper",
+    style: style
+  }, children);
+};
+
+/**
+ * Header
+ */
+
+var Header = function Header(props) {
+  var caption = props.caption ? 'caption' : '';
+  var prominent = props.prominent ? 'prominent' : '';
+  var dense = props.dense ? 'dense' : '';
+  var theme = props.primary ? 'primary' : '';
+  theme = props.secondary ? 'secondary' : theme;
+  var icon = props.icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: props.icon,
+    clickable: props.clickable,
+    action: props.action
+  }) : '';
+  icon = props.iconSrc ? /*#__PURE__*/React.createElement("img", {
+    className: "header-icon",
+    src: props.iconSrc
+  }) : icon;
+  var style = props.img ? {
+    backgroundImage: "url(" + props.img + ")"
+  } : {};
+  var title = /*#__PURE__*/React.createElement(Text, null, props.title);
+  return /*#__PURE__*/React.createElement("header", {
+    className: "header " + caption + " " + prominent + " " + dense + " " + theme + " " + props.className,
+    style: style
+  }, icon, props.title ? /*#__PURE__*/React.createElement("label", null, title) : null, /*#__PURE__*/React.createElement("span", {
+    className: "actions"
+  }, props.children));
+};
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+/**
+ * List
+ */
+
+var List = function List(props) {
+  var _props$items = props.items,
+      items = _props$items === void 0 ? [] : _props$items,
+      children = props.children,
+      onSelect = props.onSelect,
+      groupBy = props.groupBy;
+
+  function select(id) {
+    if (onSelect) onSelect(id);
+  }
+
+  return groupBy ? /*#__PURE__*/React.createElement(GroupedList, _extends({}, props, {
+    onSelect: select
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "list"
+  }, /*#__PURE__*/React.createElement("ul", null, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: item.id,
+      item: item,
+      onSelect: select
+    });
+  })), children);
+};
+/**
+ * Grouped List
+ */
+
+var GroupedList = function GroupedList(props) {
+  var _props$items2 = props.items,
+      items = _props$items2 === void 0 ? [] : _props$items2,
+      children = props.children,
+      onSelect = props.onSelect,
+      groupBy = props.groupBy;
+  var groups = items.reduce(function (groups, item) {
+    var group = groups.find(function (g) {
+      return g.name === item.content[groupBy];
+    });
+
+    if (!group) {
+      group = {
+        name: item.content[groupBy],
+        items: []
+      };
+      groups.push(group);
+    }
+
+    group.items.push(item);
+    return groups;
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "list"
+  }, groups.map(function (group) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: group.name
+    }, /*#__PURE__*/React.createElement("header", {
+      key: group.name + "-header"
+    }, /*#__PURE__*/React.createElement(Text, null, group.name)), /*#__PURE__*/React.createElement("ul", {
+      key: group.name + "-ul"
+    }, group.items.map(function (item) {
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: item.id,
+        item: item,
+        onSelect: onSelect
+      });
+    })));
+  }), children);
+};
+/**
+ * List Item
+ */
+
+
+var ListItem = function ListItem(_ref) {
+  var item = _ref.item,
+      onSelect = _ref.onSelect;
+  var id = item.id,
+      icon = item.icon,
+      line1 = item.line1,
+      line2 = item.line2,
+      meta = item.meta;
+
+  function select() {
+    if (onSelect) onSelect(id);
+  }
+
+  return /*#__PURE__*/React.createElement("li", {
+    id: id,
+    onClick: select
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: "small"
+  }) : null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement("div", {
+    className: "primary-line"
+  }, /*#__PURE__*/React.createElement(Text, null, line1)), line2 ? /*#__PURE__*/React.createElement("div", {
+    className: "secondary-line"
+  }, /*#__PURE__*/React.createElement(Text, null, line2)) : null), meta ? /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, meta) : null);
+};
+
+/**
+ * Page Context
+ */
+
+var MenuContext = React.createContext({});
+/** 
+ * Menu 
+ **/
+
+var Menu = function Menu(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.createElement("ul", null, children);
+};
+/**
+ * Menu Icon
+ */
+
+var MenuIcon = function MenuIcon(props) {
+  var _props$icon = props.icon,
+      icon = _props$icon === void 0 ? "more_vert" : _props$icon,
+      children = props.children,
+      align = props.align;
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  function toggle() {
+    setOpen(!open);
+  }
+
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: [open, setOpen]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "menu-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    clickable: true,
+    action: toggle
+  }), open ? /*#__PURE__*/React.createElement("menu", {
+    className: "" + align
+  }, children) : null, open ? /*#__PURE__*/React.createElement("div", {
+    className: "overlay",
+    onClick: toggle
+  }) : null));
+};
+/**
+ * Menu Item
+ */
+
+var MenuItem = function MenuItem(props) {
+  var icon = props.icon,
+      label = props.label,
+      meta = props.meta,
+      onSelect = props.onSelect;
+
+  var _useContext = useContext(MenuContext),
+      setOpen = _useContext[1];
+
+  function select() {
+    if (onSelect) onSelect();
+    setOpen(false);
+  }
+
+  return /*#__PURE__*/React.createElement("li", {
+    className: "menu-item",
+    onClick: select
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }) : null, /*#__PURE__*/React.createElement("label", null, label), meta ? /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, meta) : null);
+};
+/**
+ * Menu Separator
+ */
+
+var MenuSeparator = function MenuSeparator(props) {
+  return /*#__PURE__*/React.createElement("li", null, "menuSeparator");
+};
+
+/**
+ * Circular Progress
+ */
+
+var CircularProgress = function CircularProgress(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "circular-progress"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "refresh",
+    size: "small"
+  }));
+};
+/**
+ * Linear Progress
+ */
+
+var LinearProgress = function LinearProgress(props) {
+  var _props$progress = props.progress,
+      progress = _props$progress === void 0 ? 0 : _props$progress,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "linear-progress"
+  }, /*#__PURE__*/React.createElement("progress", {
+    value: progress,
+    max: max
+  }));
+};
+
+/**
+ * Property
+ */
+
+var Property = function Property(props) {
+  var name = props.name,
+      value = props.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "property"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "property-name"
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: "property-value"
+  }, value));
+};
+
+/**
+ * Radio Button
+ */
+
+var RadioButton = function RadioButton(props) {
+  var id = props.id,
+      name = props.name,
+      label = props.label,
+      placeholder = props.placeholder,
+      value = props.value,
+      onChange = props.onChange;
+
+  function change(event) {
+    var value = event.target.value;
+    if (onChange) onChange(id, value);
+  }
+
+  var labelTxt = /*#__PURE__*/React.createElement(Text, null, label);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "radio"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: id,
+    name: name,
+    type: "radio",
+    placeholder: placeholder,
+    value: value,
+    onClick: change
+  }), /*#__PURE__*/React.createElement("span", {
+    "class": "checkmark"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, labelTxt));
+};
+
+/**
+ * Section
+ */
+
+var Section = function Section(props) {
+  var icon = props.icon,
+      _props$title = props.title,
+      title = _props$title === void 0 ? '' : _props$title,
+      _props$canCollapse = props.canCollapse,
+      canCollapse = _props$canCollapse === void 0 ? true : _props$canCollapse,
+      _props$open = props.open,
+      open = _props$open === void 0 ? false : _props$open,
+      actions = props.actions,
+      children = props.children,
+      className = props.className;
+
+  var _useState = useState(open),
+      isOpen = _useState[0],
+      setOpen = _useState[1];
+
+  useEffect(function () {
+    setOpen(open);
+  }, [open]);
+
+  var toggle = function toggle() {
+    setOpen(!open);
+  };
+
+  return /*#__PURE__*/React.createElement("section", {
+    className: "section2 " + className
+  }, /*#__PURE__*/React.createElement(Header, {
+    icon: {
+      icon: icon
+    },
+    title: title
+  }, actions, canCollapse ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "expand_more",
+    onIcon: "expand_less",
+    clickable: true,
+    action: toggle
+  }) : ''), isOpen ? /*#__PURE__*/React.createElement("main", null, children) : '');
+};
+
+/**
+ * Tabs
+ */
+
+var Tabs = function Tabs(props) {
+  var children = props.children,
+      selected = props.selected,
+      onChange = props.onChange;
+  var tabs = React.Children.map(children, function (child, index) {
+    function select() {
+      if (onChange) onChange(index);
+    }
+
+    return React.cloneElement(child, {
+      selected: index === selected,
+      onSelect: select
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "class": "tabs"
+  }, tabs, /*#__PURE__*/React.createElement("div", {
+    "class": "tab-filler"
+  }));
+};
+/**
+ * Tab
+ */
+
+var Tab = function Tab(props) {
+  var label = props.label,
+      selected = props.selected,
+      actions = props.actions,
+      onSelect = props.onSelect;
+
+  function select() {
+    if (onSelect) onSelect();
+  }
+
+  var style = selected ? "selected" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tab " + style,
+    onClick: select
+  }, label, actions ? actions : null);
+};
+/**
+ * Stack
+ */
+
+var Stack = function Stack(props) {
+  var _props$selected = props.selected,
+      selected = _props$selected === void 0 ? 0 : _props$selected;
+  var child = React.Children.toArray(props.children).filter(function (child, index) {
+    return index === selected;
+  })[0];
+  return /*#__PURE__*/React.createElement(Fragment, null, child);
+};
+
+/**
+ * Text Field
+ */
+
+var TextField = function TextField(props) {
+  var site = useContext(SiteContext);
+  var id = props.id,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      label = props.label,
+      placeholder = props.placeholder,
+      value = props.value,
+      outlined = props.outlined,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+      onChange = props.onChange,
+      onEnter = props.onEnter,
+      onClick = props.onClick;
+
+  function onKeyPress(event) {
+    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+    if (key == 13) {
+      onEnter();
+    }
+  }
+
+  function change(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    var value = event.target.value;
+    if (onChange) onChange(id, value);
+  }
+
+  function focus() {
+    if (site) {
+      site.changeFocus({
+        lose: function lose() {// DO NOTHING
+        }
+      });
+    }
+  }
+
+  var borderStyle = outlined ? "textfield-outlined" : "textfield";
+  var labelStyle = label ? "" : "no-label";
+  var style = labelStyle + " " + borderStyle;
+  var labelTxt = /*#__PURE__*/React.createElement(Text, null, label);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "" + style,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("input", {
+    id: id,
+    type: type,
+    placeholder: placeholder,
+    value: value,
+    required: true,
+    onChange: change,
+    onKeyDown: onKeyPress,
+    onFocus: focus,
+    readOnly: readOnly
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "bar"
+  }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
+};
+/**
+ * Dropdown
+ */
+
+var DropDown = function DropDown(props) {
+  var site = useContext(SiteContext);
+  var id = props.id,
+      _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      value = props.value,
+      onChange = props.onChange;
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState(),
+      label = _useState2[0],
+      setLabel = _useState2[1];
+
+  useEffect(function () {
+    if (Array.isArray(options)) {
+      var option = options.find(function (option) {
+        return option.value === value;
+      });
+      if (option) setLabel(option.label);
+    }
+  }, [value]);
+
+  function toggle() {
+    if (site) {
+      site.changeFocus({
+        lose: function lose() {
+          setOpen(false);
+        }
+      });
+    }
+
+    setOpen(!open);
+  }
+
+  function select(event) {
+    var next = event.target.getAttribute("value");
+    var option = options.find(function (option) {
+      return option.value === next;
+    });
+    if (onChange) onChange(id, next);
+    setLabel(option.label);
+    setOpen(false);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dropdown"
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    onClick: toggle,
+    value: label
+  })), /*#__PURE__*/React.createElement(Icon, {
+    icon: "expand_more",
+    clickable: true,
+    size: "small",
+    action: toggle
+  }), open == true ? /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", {
+    onClick: select
+  }, Array.isArray(options) ? options.map(function (option) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: option.value,
+      value: option.value
+    }, option.label);
+  }) : null)) : null);
+};
+
+/**
+ * DataTable
+ */
+
+var DataTable = function DataTable(props) {
+  var _props$columns = props.columns,
+      columns = _props$columns === void 0 ? [] : _props$columns,
+      _props$rows = props.rows,
+      rows = _props$rows === void 0 ? [] : _props$rows,
+      onRowSelection = props.onRowSelection,
+      onSort = props.onSort,
+      editable = props.editable,
+      outlined = props.outlined;
+
+  var _useState = useState({}),
+      sortDir = _useState[0];
+
+  function multiSort(array, sortObject) {
+    if (sortObject === void 0) {
+      sortObject = {};
+    }
+
+    var sortKeys = Object.keys(sortObject);
+
+    if (!sortKeys.length) {
+      return array;
+    }
+
+    var keySort = function keySort(a, b, direction) {
+      direction = direction !== null ? direction : 1;
+
+      if (a === b) {
+        // If the values are the same, do not switch positions.
+        return 0;
+      } // If b > a, multiply by -1 to get the reverse direction.
+
+
+      return a > b ? direction : -1 * direction;
+    };
+
+    return array.sort(function (a, b) {
+      var sorted = 0;
+      var index = 0; // Loop until sorted (-1 or 1) or until the sort keys have been processed.
+
+      while (sorted === 0 && index < sortKeys.length) {
+        var key = sortKeys[index];
+
+        if (key) {
+          var direction = sortObject[key];
+          sorted = keySort(a[key], b[key], direction);
+          index++;
+        }
+      }
+
+      return sorted;
+    });
+  }
+
+  function select(row, event) {
+    if (onRowSelection) onRowSelection(row, event);
+  }
+
+  function sort(dragged, dropped) {
+    if (onSort) onSort(dragged, dropped);
+  }
+
+  var style = outlined ? "outlined" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "datatable8 " + style
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (_ref) {
+    var label = _ref.label,
+        sortable = _ref.sortable;
+    return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Text, null, label), sortable ? /*#__PURE__*/React.createElement(Icon, {
+      icon: "arrow_up",
+      size: "small",
+      clickable: true
+    }) : null);
+  }))), /*#__PURE__*/React.createElement("tbody", null, multiSort(rows, sortDir).map(function (row) {
+    return /*#__PURE__*/React.createElement(DataTableRow, {
+      key: row.id,
+      row: row,
+      columns: columns,
+      onSelect: select,
+      onDrop: sort,
+      editable: editable
+    });
+  }))));
+};
+/**
+ * DataTable Row
+ */
+
+var DataTableRow = function DataTableRow(props) {
+  var row = props.row,
+      _props$columns2 = props.columns,
+      columns = _props$columns2 === void 0 ? [] : _props$columns2,
+      onSelect = props.onSelect,
+      editable = props.editable;
+
+  var _useState2 = useState(false),
+      isInfoOpen = _useState2[0],
+      toggleInfo = _useState2[1];
+
+  var infoIcon = isInfoOpen ? 'expand_more' : 'expand_less';
+
+  var isFunction = function isFunction(value) {
+    return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
+  };
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("tr", {
+    onClick: function onClick(ev) {
+      return onSelect(row, ev);
+    }
+  }, columns.map(function (column) {
+    return /*#__PURE__*/React.createElement(DataTableCell, {
+      row: row,
+      column: column,
+      cell: row[column.id],
+      editable: editable
+    });
+  }), row.info ? /*#__PURE__*/React.createElement(Icon, {
+    icon: infoIcon,
+    clickable: true,
+    action: function action() {
+      return toggleInfo(!isInfoOpen);
+    }
+  }) : null), row.info && isInfoOpen ? /*#__PURE__*/React.createElement("tr", {
+    className: "table-row-info"
+  }, isFunction(row.info) ? row.info() : row.info) : null);
+};
+/**
+ * DataTable Cell
+ */
+
+
+var DataTableCell = function DataTableCell(_ref2) {
+  var row = _ref2.row,
+      column = _ref2.column,
+      cell = _ref2.cell,
+      editable = _ref2.editable;
+
+  var render = function render(type) {
+    var id = column.id,
+        _column$disabled = column.disabled,
+        disabled = _column$disabled === void 0 ? false : _column$disabled,
+        min = column.min,
+        max = column.max,
+        _onChange = column.onChange,
+        options = column.options;
+
+    if (editable && _onChange) {
+      switch (type) {
+        case "ICON":
+          return /*#__PURE__*/React.createElement(Icon, {
+            icon: cell
+          });
+
+        case "BOOLEAN":
+          return /*#__PURE__*/React.createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: disabled
+          });
+
+        case "Boolean":
+          return /*#__PURE__*/React.createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: disabled
+          });
+
+        case "SELECTION":
+          return /*#__PURE__*/React.createElement(DropDown, {
+            id: id,
+            value: cell,
+            placeholder: "--Select--",
+            options: options,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+
+        case "CHECK":
+          return /*#__PURE__*/React.createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: row.disabled
+          });
+
+        case "CHECKABLE":
+          return cell && cell.value ? /*#__PURE__*/React.createElement(CheckBox, {
+            id: id,
+            value: cell.checked || false,
+            label: cell.value,
+            onChange: function onChange(id, checked) {
+              return _onChange(row.id, id, cell.value, checked, cell);
+            }
+          }) : '';
+
+        case "TEXTFIELD":
+          return /*#__PURE__*/React.createElement(TextField, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+
+        case "String":
+          return /*#__PURE__*/React.createElement(StringCellEditor, {
+            id: id,
+            value: cell,
+            options: options,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+
+        case "Number":
+          return /*#__PURE__*/React.createElement(TextField, {
+            id: id,
+            type: "number",
+            value: cell,
+            min: min,
+            max: max,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+
+        default:
+          return cell;
+      }
+    } else {
+      switch (type) {
+        case "ICON":
+          return /*#__PURE__*/React.createElement(Icon, {
+            icon: cell
+          });
+
+        case "Boolean":
+          return /*#__PURE__*/React.createElement(BooleanCellViewer, {
+            id: id,
+            value: cell
+          });
+
+        case "String":
+          return /*#__PURE__*/React.createElement(StringCellViewer, {
+            id: id,
+            value: cell,
+            options: options
+          });
+
+        default:
+          return cell;
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("td", {
+    className: column.id
+  }, render(column.type));
+};
+/**
+ * Boolean Cell Viewer
+ */
+
+
+var BooleanCellViewer = function BooleanCellViewer(_ref3) {
+  var _ref3$value = _ref3.value,
+      value = _ref3$value === void 0 ? false : _ref3$value;
+  var icon = value === true ? "check_box" : "check_box_outline_blank";
+  return /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  });
+};
+/**
+ * String Cell Viewer
+ */
+
+
+var StringCellViewer = function StringCellViewer(_ref4) {
+  var value = _ref4.value,
+      options = _ref4.options;
+  var option = options ? options.find(function (o) {
+    return o.value === value;
+  }) : null;
+  var text = option ? option.label : value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field-editor string-editor"
+  }, text);
+};
+/**
+ * String Cell Editor
+ */
+
+
+var StringCellEditor = function StringCellEditor(_ref5) {
+  var id = _ref5.id,
+      _ref5$value = _ref5.value,
+      value = _ref5$value === void 0 ? '' : _ref5$value,
+      options = _ref5.options,
+      onChange = _ref5.onChange;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field-editor string-editor"
+  }, options ? /*#__PURE__*/React.createElement(DropDown, {
+    outlined: true,
+    id: id,
+    value: value,
+    onChange: change,
+    options: options
+  }) : /*#__PURE__*/React.createElement(TextField, {
+    outlined: true,
+    id: id,
+    value: value,
+    onChange: change
+  }));
+};
+
+/**
+ * Token Field
+ */
+
+var TokenField = function TokenField(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      init = _ref.init,
+      onChange = _ref.onChange;
+  var mounted = useRef(false);
+
+  var _useState = useState(),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = useState(init),
+      tokens = _useState2[0],
+      setTokens = _useState2[1];
+
+  useEffect(function () {
+    if (mounted.current) {
+      if (onChange) {
+        if (tokens) onChange(id, tokens);
+      }
+    } else {
+      mounted.current = true;
+    }
+  }, [tokens]);
+
+  function remove(index) {
+    var next = tokens.slice();
+    next.splice(index, 1);
+    setTokens(next);
+  }
+
+  function change(event) {
+    var value = event.target.value;
+    setValue(value);
+  }
+
+  function onEnter(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      var token = event.target.value;
+      var next = tokens.concat(token);
+      setTokens(next);
+      setValue('');
+    }
+
+    if (value === '' && tokens.length > 0 && event.key === 'Backspace') {
+      var _next = tokens.slice(0, -1);
+
+      setTokens(_next);
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tokenField"
+  }, /*#__PURE__*/React.createElement("label", null, label), tokens.map(function (text, index) {
+    return /*#__PURE__*/React.createElement(Token, {
+      text: text,
+      onDelete: function onDelete() {
+        return remove(index);
+      }
+    });
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: value,
+    onChange: change,
+    onKeyDown: onEnter
+  }));
+};
+/**
+ * Token
+ */
+
+var Token = function Token(_ref2) {
+  var text = _ref2.text,
+      onDelete = _ref2.onDelete;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "token"
+  }, /*#__PURE__*/React.createElement(Text, {
+    use: "caption",
+    tag: "div"
+  }, text), /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: onDelete,
+    size: "small"
+  }));
+};
+
+/**
+ * Tree
+ */
+
+var Tree = function Tree(_ref) {
+  var _ref$nodes = _ref.nodes,
+      nodes = _ref$nodes === void 0 ? [] : _ref$nodes,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tree"
+  }, nodes, children);
+};
+/**
+ * Tree Node
+ */
+
+var TreeNode = function TreeNode(_ref2) {
+  var _ref2$icon = _ref2.icon,
+      icon = _ref2$icon === void 0 ? 'folder' : _ref2$icon,
+      label = _ref2.label,
+      _ref2$open = _ref2.open,
+      open = _ref2$open === void 0 ? false : _ref2$open,
+      children = _ref2.children,
+      actions = _ref2.actions;
+  return /*#__PURE__*/React.createElement("details", {
+    className: "tree-node",
+    open: open
+  }, /*#__PURE__*/React.createElement("summary", {
+    className: "tree-item"
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: "small",
+    small: true
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "actions"
+  }, actions)), children);
+};
+/**
+ * Tree Item
+ */
+
+var TreeItem = function TreeItem(_ref3) {
+  var id = _ref3.id,
+      _ref3$icon = _ref3.icon,
+      icon = _ref3$icon === void 0 ? 'description' : _ref3$icon,
+      label = _ref3.label,
+      actions = _ref3.actions,
+      onSelect = _ref3.onSelect;
+
+  function select() {
+    if (onSelect) onSelect(id);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tree-item final",
+    onClick: select
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: "small",
+    small: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "actions"
+  }, actions));
+};
+
+/**
+ * Login Box
+ */
+
+var LoginBox = function LoginBox(_ref) {
+  var logo = _ref.logo,
+      title = _ref.title,
+      _ref$userLabel = _ref.userLabel,
+      userLabel = _ref$userLabel === void 0 ? "User" : _ref$userLabel,
+      _ref$passwordLabel = _ref.passwordLabel,
+      passwordLabel = _ref$passwordLabel === void 0 ? "Password" : _ref$passwordLabel,
+      _ref$loginLabel = _ref.loginLabel,
+      loginLabel = _ref$loginLabel === void 0 ? "Log In" : _ref$loginLabel,
+      onOK = _ref.onOK,
+      _ref$forgotLabel = _ref.forgotLabel,
+      forgotLabel = _ref$forgotLabel === void 0 ? "Forgot Password ?" : _ref$forgotLabel,
+      onForgot = _ref.onForgot,
+      message = _ref.message,
+      loading = _ref.loading;
+
+  var _useState = useState(''),
+      user = _useState[0],
+      setUser = _useState[1];
+
+  var _useState2 = useState(''),
+      password = _useState2[0],
+      setPassword = _useState2[1];
+
+  function canOK() {
+    return user && user.length > 0 && password && password.length > 0;
+  }
+
+  function ok(forcedPwd) {
+    if (onOK && canOK()) onOK(user, forcedPwd || password);
+  }
+
+  function canForgot() {
+    return user && user.length > 0;
+  }
+
+  function forgot() {
+    if (onForgot) onForgot(user);
+  }
+
+  function tx(txt) {
+    return /*#__PURE__*/React.createElement(Text, null, txt);
+  }
+
+  function changeUser(id, value) {
+    setUser(value);
+  }
+
+  function changePassword(id, value) {
+    setPassword(value);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "login-box"
+  }, /*#__PURE__*/React.createElement("header", null, logo ? /*#__PURE__*/React.createElement("img", {
+    src: logo
+  }) : '', /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React.createElement(Text, null, title))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(TextField, {
+    label: tx(userLabel),
+    value: user,
+    onChange: changeUser,
+    onEnter: ok,
+    outlined: true
+  }), /*#__PURE__*/React.createElement(TextField, {
+    label: tx(passwordLabel),
+    value: password,
+    onChange: changePassword,
+    onEnter: ok,
+    type: "password",
+    outlined: true
+  })), /*#__PURE__*/React.createElement("footer", null, onForgot ? /*#__PURE__*/React.createElement(Button, {
+    label: tx(forgotLabel),
+    action: forgot,
+    disabled: !canForgot()
+  }) : null, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "load-box"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "refresh"
+  })) : /*#__PURE__*/React.createElement(Button, {
+    label: tx(loginLabel),
+    action: ok,
+    disabled: !canOK(),
+    raised: true
+  }), message ? /*#__PURE__*/React.createElement("div", {
+    className: "message"
+  }, /*#__PURE__*/React.createElement(Text, null, message)) : null));
+};
+
+/**
+ * Reset Password
+ */
+
+var ResetPasswordBox = function ResetPasswordBox(_ref) {
+  var logo = _ref.logo,
+      title = _ref.title,
+      children = _ref.children,
+      onOK = _ref.onOK,
+      onClose = _ref.onClose;
+
+  var _useState = useState({}),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = useState(),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  function canOK() {
+    return form.password1 && form.password2;
+  }
+
+  function changeField(id, value) {
+    var _Object$assign;
+
+    var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
+    setForm(next);
+  }
+
+  function ok() {
+    if (onOK && canOK()) {
+      if (form.password1 === form.password2) {
+        setError(null);
+        onOK(form);
+      } else {
+        setError("New Password and Confirm New Password do not match");
+      }
+    }
+  }
+
+  function close() {
+    if (onClose) onClose();
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "reset-password-box"
+  }, /*#__PURE__*/React.createElement("header", null, logo ? /*#__PURE__*/React.createElement("img", {
+    src: logo
+  }) : null, title ? /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React.createElement(Text, null, title)) : null, children), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, "Change Password"), /*#__PURE__*/React.createElement(TextField, {
+    id: "password1",
+    outlined: true,
+    icon: "lock",
+    type: "password",
+    label: "New Password",
+    lapse: 100,
+    onChange: changeField,
+    onEnter: ok
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "password2",
+    outlined: true,
+    icon: "lock",
+    type: "password",
+    label: "Confirm New Password",
+    lapse: 100,
+    onChange: changeField,
+    onEnter: ok
+  }), error ? /*#__PURE__*/React.createElement("div", {
+    className: "error"
+  }, error) : null), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement(Button, {
+    label: "Close",
+    action: close
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: "OK",
+    raised: true,
+    disabled: !canOK(),
+    action: ok
+  })));
+};
+
+/**
+ * Viewer
+ */
+
+var Viewer = function Viewer(_ref) {
+  var title = _ref.title,
+      src = _ref.src,
+      info = _ref.info,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$tools = _ref.tools,
+      tools = _ref$tools === void 0 ? false : _ref$tools,
+      onClose = _ref.onClose;
+
+  var _useState = useState(false),
+      showDetails = _useState[0],
+      setShowDetails = _useState[1];
+
+  function toggleDetails() {
+    setShowDetails(!showDetails);
+  }
+
+  var headerTitle = /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, title);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "viewer"
+  }, /*#__PURE__*/React.createElement(Header, {
+    icon: {
+      icon: 'close',
+      clickable: true,
+      action: onClose
+    },
+    title: headerTitle
+  }, showDetails ? '' : /*#__PURE__*/React.createElement(Icon, {
+    icon: "info",
+    clickable: true,
+    action: toggleDetails
+  }), actions), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement("div", {
+    className: "resizer"
+  }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
+    src: src
+  })))), /*#__PURE__*/React.createElement("aside", {
+    className: "" + (showDetails ? 'open' : '')
+  }, /*#__PURE__*/React.createElement(Header, {
+    title: "Detalles"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: toggleDetails
+  })), /*#__PURE__*/React.createElement("main", null, info)), tools ? /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement(Icon, {
+    clickable: true,
+    icon: "zoom_out"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    clickable: true,
+    icon: "zoom_out_map"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    clickable: true,
+    icon: "zoom_in"
+  })) : null);
+};
+
+/**
+ * Kanban
+ */
+
+var Kanban = function Kanban(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kanban"
+  }, children);
+};
+/**
+ * Kanban Column
+ */
+
+var KanbanColumn = function KanbanColumn(_ref2) {
+  var id = _ref2.id,
+      icon = _ref2.icon,
+      title = _ref2.title,
+      subtitle = _ref2.subtitle,
+      badge = _ref2.badge,
+      children = _ref2.children,
+      _ref2$minified = _ref2.minified,
+      minified = _ref2$minified === void 0 ? false : _ref2$minified,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+
+  var _useState = useState(minified),
+      min = _useState[0],
+      setMin = _useState[1];
+
+  function toggle() {
+    setMin(!min);
+  }
+
+  return min ? /*#__PURE__*/React.createElement("div", {
+    className: "kanban-column " + id + " min"
+  }, /*#__PURE__*/React.createElement("main", null, title), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: "toggle_off",
+    onIcon: "toggle_on",
+    clickable: true,
+    action: toggle
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "kanban-column " + id + " " + (disabled ? 'disabled' : '')
+  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    className: "secondary-text",
+    use: "body2"
+  }, subtitle)), /*#__PURE__*/React.createElement("div", {
+    className: "badge"
+  }, badge)), /*#__PURE__*/React.createElement("main", null, children), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: "toggle_off",
+    onIcon: "toggle_on",
+    clickable: true,
+    action: toggle
+  })));
+};
+/**
+ * Kanban Card
+ */
+
+var KanbanCard = function KanbanCard(_ref3) {
+  var color = _ref3.color,
+      children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kanban-card " + color
+  }, children);
+};
+
+/**
+ * Page Context
+ */
+
+var PageContext = React.createContext({});
+/**
+ * Page Provider
+ */
+
+var PageProvider = function PageProvider(_ref) {
+  var _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {} : _ref$context,
+      children = _ref.children;
+
+  var _useState = useState(context),
+      pageCtx = _useState[0],
+      setPageCtx = _useState[1];
+
+  return /*#__PURE__*/React.createElement(PageContext.Provider, {
+    value: [pageCtx, setPageCtx]
+  }, children);
+};
+/**
+ * Page
+ */
+
+var Page = function Page(props) {
+  var children = props.children,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? "simple" : _props$layout,
+      _props$context = props.context,
+      context = _props$context === void 0 ? {} : _props$context;
+  return /*#__PURE__*/React.createElement(PageProvider, {
+    context: context
+  }, /*#__PURE__*/React.createElement("article", {
+    className: "page6 " + layout
+  }, children));
+};
+
+/**
+ * Site Provider
+ */
+
+var SiteProvider = function SiteProvider(_ref) {
+  var children = _ref.children,
+      siteLang = _ref.siteLang,
+      siteDictionary = _ref.siteDictionary;
+
+  var _useState = useState(siteLang),
+      lang = _useState[0],
+      setLang = _useState[1];
+
+  var _useState2 = useState(siteDictionary),
+      dictionary = _useState2[0],
+      setDictionary = _useState2[1];
+
+  var _useState3 = useState('max'),
+      sideNav = _useState3[0],
+      setSideNav = _useState3[1];
+
+  var _useState4 = useState(false),
+      showNav = _useState4[0],
+      setShowNav = _useState4[1];
+
+  var _useState5 = useState(null),
+      info = _useState5[0],
+      setInfo = _useState5[1];
+
+  var _useState6 = useState(false),
+      console = _useState6[0],
+      setConsole = _useState6[1];
+
+  var _useState7 = useState(),
+      page = _useState7[0],
+      setPage = _useState7[1];
+
+  var _useState8 = useState(),
+      dialog = _useState8[0],
+      setDialog = _useState8[1];
+
+  var _useState9 = useState(),
+      preview = _useState9[0],
+      setPreview = _useState9[1];
+
+  var _useState10 = useState(),
+      breadcrumb = _useState10[0],
+      setBreadcrumb = _useState10[1];
+
+  var _useState11 = useState(),
+      focused = _useState11[0],
+      setFocused = _useState11[1];
+
+  var value = {
+    lang: lang,
+    setLang: setLang,
+    dictionary: dictionary,
+    setDictionary: setDictionary,
+    focused: focused,
+    changeFocus: function changeFocus(next) {
+      if (focused) focused.lose();
+      setFocused(next);
+    },
+    sideNav: sideNav,
+    setSideNav: setSideNav,
+    showNav: showNav,
+    setShowNav: setShowNav,
+    info: info,
+    openInfo: function openInfo(info) {
+      setInfo(info);
+    },
+    closeInfo: function closeInfo() {
+      setInfo(null);
+    },
+    console: console,
+    toggleConsole: function toggleConsole() {
+      setConsole(!console);
+    },
+    breadcrumb: breadcrumb,
+    setBreadcrumb: setBreadcrumb,
+    page: page,
+    "goto": function goto(id) {
+      setPage(id);
+    },
+    dialog: dialog,
+    openDialog: function openDialog(dialog) {
+      setDialog(dialog);
+    },
+    closeDialog: function closeDialog() {
+      setDialog(null);
+    },
+    preview: preview,
+    openPreview: function openPreview(preview) {
+      setPreview(preview);
+    },
+    closePreview: function closePreview() {
+      setPreview(null);
+    }
+  };
+  return /*#__PURE__*/React.createElement(SiteContext.Provider, {
+    value: value
+  }, children);
+};
+/**
+ * Site
+ */
+
+var Site = function Site(_ref2) {
+  var icon = _ref2.icon,
+      logo = _ref2.logo,
+      title = _ref2.title,
+      toolbar = _ref2.toolbar,
+      children = _ref2.children,
+      init = _ref2.init,
+      min = _ref2.min,
+      lang = _ref2.lang,
+      dictionary = _ref2.dictionary;
+  return /*#__PURE__*/React.createElement(SiteProvider, {
+    siteLang: lang,
+    siteDictionary: dictionary
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "site6"
+  }, /*#__PURE__*/React.createElement(SiteHeader, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement(SiteToolBar, null, toolbar), /*#__PURE__*/React.createElement(SiteMenu, {
+    logo: logo,
+    title: title,
+    min: min
+  }, children), /*#__PURE__*/React.createElement(SitePage, {
+    init: init
+  }, children, /*#__PURE__*/React.createElement(Page, {
+    id: "EMPTY"
+  }, "EMPTY")), /*#__PURE__*/React.createElement(SiteAside, null), /*#__PURE__*/React.createElement(SiteConsole, null), /*#__PURE__*/React.createElement(SiteDialog, null), /*#__PURE__*/React.createElement(SitePreview, null)));
+};
+/**
+ * Site Header
+ */
+
+var SiteHeader = function SiteHeader(props) {
+  var _props$icon = props.icon,
+      icon = _props$icon === void 0 ? "equalizer" : _props$icon,
+      title = props.title;
+  return /*#__PURE__*/React.createElement(Header, {
+    icon: icon,
+    title: title
+  });
+};
+/**
+ * Site ToolBar
+ */
+
+
+var SiteToolBar = function SiteToolBar(_ref3) {
+  var children = _ref3.children;
+  useContext(SiteContext);
+  return /*#__PURE__*/React.createElement("nav", null, children);
+};
+/**
+ * Site Aside
+ */
+
+
+var SiteAside = function SiteAside() {
+  var context = useContext(SiteContext);
+  return context.info ? /*#__PURE__*/React.createElement("aside", null, context.info) : '';
+};
+/**
+ * SiteMenu
+ */
+
+
+var SiteMenu = function SiteMenu(_ref4) {
+  var children = _ref4.children,
+      min = _ref4.min;
+  var context = useContext(SiteContext);
+  var showNav = context.showNav;
+  useEffect(function () {
+    if (min) context.setSideNav('min');
+  }, []);
+
+  var _goto = function _goto(id) {
+    context.setShowNav(false);
+    context["goto"](id);
+  };
+
+  var sections = children ? Children.toArray(children).reduce(function (sections, page) {
+    var section = page.props ? page.props.section : '...';
+    if (!sections[section]) sections[section] = [];
+    var _page$props = page.props,
+        id = _page$props.id,
+        icon = _page$props.icon,
+        title = _page$props.title;
+    if (title) sections[section].push({
+      id: id,
+      icon: icon,
+      title: title
+    });
+    return sections;
+  }, {}) : {};
+  return /*#__PURE__*/React.createElement("menu", {
+    className: "min " + (showNav ? 'show' : '')
+  }, /*#__PURE__*/React.createElement("main", null, Object.keys(sections).map(function (title) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: title
+    }, sections[title].map(function (_ref5) {
+      var id = _ref5.id,
+          _ref5$icon = _ref5.icon,
+          icon = _ref5$icon === void 0 ? 'info' : _ref5$icon;
+      return /*#__PURE__*/React.createElement(Icon, {
+        key: id,
+        icon: icon,
+        clickable: true,
+        checked: id === context.page,
+        action: function action() {
+          return _goto(id);
+        }
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "section-divider"
+    }));
+  })));
+};
+/**
+ * SitePage
+ */
+
+
+var SitePage = function SitePage(_ref6) {
+  var children = _ref6.children,
+      init = _ref6.init;
+  var context = useContext(SiteContext);
+  var page = context.page;
+  useEffect(function () {
+    if (init) {
+      context["goto"](init);
+    } else {
+      context["goto"]("EMPTY");
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("main", null, React.Children.toArray(children).filter(function (child) {
+    return child.props ? child.props.id === page : false;
+  }));
+};
+/**
+ * Site Dialog
+ */
+
+
+var SiteDialog = function SiteDialog() {
+  var context = useContext(SiteContext);
+  return context.dialog ? context.dialog : '';
+};
+/**
+ * Site Preview
+ */
+
+
+var SitePreview = function SitePreview() {
+  var context = useContext(SiteContext);
+  return context.preview ? /*#__PURE__*/React.createElement("div", {
+    className: "site-preview"
+  }, context.preview) : '';
+};
+/**
+ * Site Console
+ */
+
+
+var SiteConsole = function SiteConsole() {
+  var context = useContext(SiteContext);
+  return context.console ? /*#__PURE__*/React.createElement("footer", {
+    className: "site-console"
+  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+    label: "Console"
+  }))), /*#__PURE__*/React.createElement("main", null)) : '';
+};
+
+/**
+ * Dialog
+ * 
+ * <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+ */
+
+var Dialog = function Dialog(props) {
+  var site = useContext(SiteContext);
+  var icon = props.icon,
+      _props$title = props.title,
+      title = _props$title === void 0 ? "Dialog" : _props$title,
+      children = props.children,
+      actions = props.actions;
+
+  function close() {
+    site.closeDialog();
+  }
+
+  function prevent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "overlay"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "dialog",
+    onClick: close
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dialog-panel",
+    onClick: prevent
+  }, /*#__PURE__*/React.createElement("header", null, icon ? /*#__PURE__*/React.createElement(MenuIcon, {
+    icon: icon
+  }) : null, /*#__PURE__*/React.createElement(Text, null, title)), /*#__PURE__*/React.createElement("main", null, children), /*#__PURE__*/React.createElement("footer", null, actions))));
+};
+
+/**
+ * TYPES
+ */
+var TYPES = {
+  STRING: 'String',
+  NUMBER: 'Number',
+  DATE: 'Date',
+  BOOLEAN: 'Boolean',
+  ARRAY: 'Array',
+  ENTITY: 'Object',
+  FUNCTION: 'Function',
+  EMAIL: 'String'
+};
+/**
+ * CHECK
+ */
+
+var CHECK = Object.values(TYPES).reduce(function (obj, name) {
+  obj['is' + name] = function (x) {
+    return toString.call(x) == '[object ' + name + ']';
+  };
+
+  return obj;
+}, {});
+/**
+ * Content Type
+ */
+
+var ContentType = /*#__PURE__*/function () {
+  function ContentType(schema) {
+    this._schema = schema;
+  }
+
+  var _proto = ContentType.prototype;
+
+  _proto.checkType = function checkType(_ref, data) {
+    var type = _ref.type,
+        item = _ref.item;
+    var valid = true;
+    var validChildren = true;
+
+    if (item) {
+      var child = new ContentType(item);
+
+      switch (type) {
+        case TYPES.ARRAY:
+          valid = CHECK['is' + type](data);
+          validChildren = data.every(function (element) {
+            return child.validate(element);
+          });
+          break;
+
+        case TYPES.ENTITY:
+          valid = CHECK['is' + type](data);
+          validChildren = child.validate(data);
+          break;
+
+        case TYPES.NUMBER:
+          valid = CHECK['is' + type](data.value);
+          validChildren = true;
+          break;
+
+        default:
+          valid = true;
+          validChildren = true;
+      }
+    }
+
+    return valid && validChildren;
+  }
+  /**
+   * Validate entity data
+   * - Inspect required attributes only
+   * - Check attributes type
+   */
+  ;
+
+  _proto.validate = function validate(data) {
+    var _this = this;
+
+    var attributes = Object.entries(this._schema);
+    return attributes.filter(function (_ref2) {
+      var attr = _ref2[1];
+      return attr.required === true;
+    }).every(function (_ref3) {
+      var name = _ref3[0],
+          attr = _ref3[1];
+      return data[name] !== undefined ? _this.checkType(attr, data[name]) : false;
+    });
+  }
+  /**
+   * Content Type Form
+   */
+  ;
+
+  _proto.form = function form(data) {
+    var entries = Object.entries(this._schema);
+    var form = entries.reduce(function (form, _ref4) {
+      var id = _ref4[0],
+          field = _ref4[1];
+      form[id] = Object.assign({}, field, {
+        value: data[id]
+      });
+      return form;
+    }, {});
+    return form;
+  }
+  /**
+   * Content Type Sections
+   */
+  ;
+
+  _proto.sections = function sections(data) {
+    var form = this.form(data);
+    var fields = Object.values(form);
+    var sections = fields.reduce(function (sections, field) {
+      var section = field.section;
+      var title = section ? section : '';
+      if (!sections.hasOwnProperty(title)) sections[title] = {
+        title: title,
+        fields: []
+      };
+      sections[title].fields.push(field);
+      return sections;
+    }, {});
+    return Object.values(sections);
+  }
+  /**
+   * value 
+   */
+  ;
+
+  _proto.value = function value(data) {
+    var fields = Object.entries(this._schema);
+    var next = fields.reduce(function (next, _ref5) {
+      var name = _ref5[0],
+          field = _ref5[1];
+      var type = field.type,
+          item = field.item;
+      var entryData = data ? data[name] : null;
+
+      switch (type) {
+        case TYPES.STRING:
+          next[name] = entryData || field["default"];
+          break;
+
+        case TYPES.NUMBER:
+          next[name] = entryData || field["default"];
+          break;
+
+        case TYPES.BOOLEAN:
+          next[name] = entryData || field["default"];
+          break;
+
+        case TYPES.ENTITY:
+          var child1 = new ContentType(item);
+          next[name] = child1.value(entryData);
+          break;
+
+        case TYPES.ARRAY:
+          if (item === TYPES.STRING) {
+            next[name] = entryData ? entryData : [];
+          } else {
+            var child2 = new ContentType(item);
+            next[name] = entryData ? entryData.map(function (data2) {
+              return child2.value(data2);
+            }) : [];
+          }
+
+          break;
+
+        default:
+          next[name] = field;
+          break;
+      }
+
+      return next;
+    }, {});
+    return next;
+  };
+
+  return ContentType;
+}();
+/**
+ * Content
+ */
+
+var Content = /*#__PURE__*/function () {
+  function Content(type, value) {
+    this.type = type;
+    this._type = new ContentType(type);
+    this._value = value;
+  }
+
+  var _proto2 = Content.prototype;
+
+  _proto2.isValid = function isValid() {
+    return this._type.validate(this._value);
+  };
+
+  _proto2.value = function value() {
+    return this._type.value(this._value);
+  };
+
+  _proto2.form = function form() {
+    return this._type.form(this._value);
+  };
+
+  _proto2.sections = function sections() {
+    return this._type.sections(this._value);
+  };
+
+  _proto2.update = function update(value) {
+    this._value = value;
+  };
+
+  return Content;
+}();
+
+/**
+ * Content Form 
+ */
+
+var ContentForm = function ContentForm(_ref) {
+  var content = _ref.content,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? 1 : _ref$columns,
+      filter = _ref.filter,
+      onChange = _ref.onChange;
+  var form = content.form();
+  console.log(form);
+  var fields = Object.keys(form).map(function (key) {
+    return form[key];
+  }).filter(function (field) {
+    return filter ? filter(field) : true;
+  });
+  console.log(fields);
+  return /*#__PURE__*/React.createElement(Form, {
+    className: "content-form",
+    columns: columns,
+    outlined: true,
+    onChange: onChange
+  }, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(ContentFormField, _extends({
+      key: field.id
+    }, field));
+  }));
+};
+/**
+ * Content Form Field
+ */
+
+var ContentFormField = function ContentFormField(props) {
+  var type = props.type;
+
+  switch (type) {
+    case TYPES.BOOLEAN:
+      return /*#__PURE__*/React.createElement(CheckBox, _extends({
+        key: props.id
+      }, props));
+
+    case TYPES.NUMBER:
+      return /*#__PURE__*/React.createElement(NumberField, _extends({
+        key: props.id
+      }, props));
+
+    default:
+      return /*#__PURE__*/React.createElement(StringField, _extends({
+        key: props.id
+      }, props));
+  }
+};
+/**
+* String Editor
+*/
+
+
+var StringField = function StringField(_ref2) {
+  var _fieldTypes;
+
+  var id = _ref2.id,
+      type = _ref2.type,
+      label = _ref2.label,
+      options = _ref2.options,
+      textarea = _ref2.textarea,
+      _ref2$required = _ref2.required,
+      required = _ref2$required === void 0 ? false : _ref2$required,
+      value = _ref2.value,
+      onChange = _ref2.onChange,
+      outlined = _ref2.outlined;
+  var fieldTypes = (_fieldTypes = {}, _fieldTypes[TYPES.NUMBER] = 'number', _fieldTypes[TYPES.DATE] = 'date', _fieldTypes);
+
+  function buildOptions() {
+    var opts = typeof options === 'function' ? options() : options;
+    return opts;
+  }
+
+  var fieldType = fieldTypes[type] || 'text';
+  if (options) return /*#__PURE__*/React.createElement(DropDown, {
+    key: id,
+    id: id,
+    label: label,
+    value: value,
+    onChange: onChange,
+    options: buildOptions(),
+    outlined: outlined
+  });
+  return /*#__PURE__*/React.createElement(TextField, {
+    key: id,
+    id: id,
+    type: fieldType,
+    label: label,
+    value: value,
+    onChange: onChange,
+    required: required,
+    outlined: outlined,
+    textarea: textarea
+  });
+};
+/**
+* Number Editor
+*/
+
+var NumberField = function NumberField(_ref3) {
+  var id = _ref3.id,
+      label = _ref3.label,
+      options = _ref3.options,
+      _ref3$required = _ref3.required,
+      required = _ref3$required === void 0 ? false : _ref3$required,
+      value = _ref3.value,
+      onChange = _ref3.onChange,
+      outlined = _ref3.outlined;
+
+  function change(id, value) {
+    var num = !!+value ? +value : value;
+    if (onChange) onChange(id, num);
+  }
+
+  if (options) return /*#__PURE__*/React.createElement(DropDown, {
+    key: id,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change,
+    options: options,
+    outlined: outlined
+  });
+  return /*#__PURE__*/React.createElement(TextField, {
+    key: id,
+    id: id,
+    type: "number",
+    label: label,
+    value: value,
+    onChange: change,
+    required: required,
+    outlined: outlined
+  });
+};
+
+/**
+ * Content Editor
+ */
+
+var ContentEditor = function ContentEditor(_ref) {
+  var content = _ref.content,
+      filter = _ref.filter,
+      onChange = _ref.onChange;
+
+  function change(id, value) {
+    var _Object$assign;
+
+    var nextValue = Object.assign({}, content.value(), (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
+    if (onChange) onChange(nextValue);
+  }
+
+  var sections = content.sections();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content-editor"
+  }, sections.map(function (section) {
+    var title = section.title,
+        fields = section.fields;
+    return /*#__PURE__*/React.createElement("section", {
+      key: title
+    }, /*#__PURE__*/React.createElement("header", null, title), /*#__PURE__*/React.createElement("main", null, fields.filter(function (field) {
+      return field.id !== 'id';
+    }).filter(function (field) {
+      return filter ? filter(field, content) : true;
+    }).map(function (field) {
+      return /*#__PURE__*/React.createElement(FieldEditor, {
+        key: field.id,
+        field: field,
+        onChange: change
+      });
+    })));
+  }));
+};
+/**
+ * Tabbed Content Editor
+ */
+
+var TabbedContentEditor = function TabbedContentEditor(_ref2) {
+  var content = _ref2.content,
+      filter = _ref2.filter,
+      _ref2$grouped = _ref2.grouped,
+      grouped = _ref2$grouped === void 0 ? false : _ref2$grouped,
+      onChange = _ref2.onChange;
+
+  var _useState = useState(0),
+      tab = _useState[0],
+      setTab = _useState[1];
+
+  function change(id, value) {
+    var _Object$assign2;
+
+    var nextValue = Object.assign({}, content.value(), (_Object$assign2 = {}, _Object$assign2[id] = value, _Object$assign2));
+    if (onChange) onChange(nextValue);
+  }
+
+  function changeTab(tab) {
+    setTab(tab);
+  }
+
+  function group(section) {
+    var _section$fields = section.fields,
+        fields = _section$fields === void 0 ? [] : _section$fields;
+    var groups = fields.reduce(function (groups, field) {
+      var groupName = field.group || "";
+      var group = groups[groupName] || {
+        name: groupName,
+        fields: []
+      };
+      group.fields.push(field);
+      groups[groupName] = group;
+      return groups;
+    }, {});
+    return Object.values(groups);
+  }
+
+  var sections = content.sections();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content-editor tabbed"
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    selected: tab,
+    onChange: changeTab
+  }, sections.map(function (section) {
+    return /*#__PURE__*/React.createElement(Tab, {
+      label: section.title
+    });
+  })), /*#__PURE__*/React.createElement(Stack, {
+    selected: tab
+  }, sections.map(function (section) {
+    var title = section.title,
+        fields = section.fields;
+    return /*#__PURE__*/React.createElement("section", {
+      key: title
+    }, /*#__PURE__*/React.createElement("nav", null, "\xA0"), /*#__PURE__*/React.createElement("main", null, grouped ? group(section).map(function (group) {
+      return /*#__PURE__*/React.createElement(Fragment, null, group.name.length > 0 ? /*#__PURE__*/React.createElement("div", {
+        className: "group-caption"
+      }, group.name) : null, group.fields.filter(function (field) {
+        return field.id !== 'id';
+      }).filter(function (field) {
+        return filter ? filter(field) : true;
+      }).map(function (field) {
+        return /*#__PURE__*/React.createElement(FieldEditor, {
+          key: field.id,
+          field: field,
+          onChange: change,
+          content: content
+        });
+      }));
+    }) : fields.filter(function (field) {
+      return field.id !== 'id';
+    }).filter(function (field) {
+      return filter ? filter(field) : true;
+    }).map(function (field) {
+      return /*#__PURE__*/React.createElement(FieldEditor, {
+        key: field.id,
+        field: field,
+        onChange: change,
+        content: content
+      });
+    })));
+  })));
+};
+/**
+ * TreededContentEditor 
+ */
+
+var TreededContentEditor = function TreededContentEditor(_ref3) {
+  var content = _ref3.content,
+      onChange = _ref3.onChange;
+  var value = content.value();
+  var nodes = Object.values(content.type).filter(function (field) {
+    return field.type === TYPES.ARRAY;
+  });
+
+  var _useState2 = useState(),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  function select(index, field, node) {
+    var item = new Content(node.item, field);
+    setSelected({
+      index: index,
+      item: item,
+      node: node,
+      value: value[node.id]
+    });
+  }
+
+  function change(form) {
+    var _Object$assign3;
+
+    var nextNode = selected.value.slice();
+    nextNode[selected.index] = form;
+    var nextContent = Object.assign({}, value, (_Object$assign3 = {}, _Object$assign3[selected.node.id] = nextNode, _Object$assign3));
+    if (onChange) onChange(nextContent);
+  }
+
+  function add() {//TODO
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content-editor treeded-editor"
+  }, /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Text, {
+    use: "caption"
+  }, "Tree Editor")), /*#__PURE__*/React.createElement(Tree, null, nodes.map(function (node, index) {
+    return /*#__PURE__*/React.createElement(TreeNode, {
+      icon: "folder",
+      label: node.label,
+      actions: [/*#__PURE__*/React.createElement(Icon, {
+        small: true,
+        icon: "add",
+        clickable: true,
+        action: add
+      })]
+    }, value[node.id] ? value[node.id].map(function (field, index) {
+      return /*#__PURE__*/React.createElement(TreeItem, {
+        icon: field.icon || "description",
+        label: field.name || field.label,
+        onSelect: function onSelect() {
+          return select(index, field, node);
+        }
+      });
+    }) : null);
+  }))), /*#__PURE__*/React.createElement("div", null, selected ? /*#__PURE__*/React.createElement(TabbedContentEditor, {
+    content: selected.item,
+    onChange: change
+  }) : "select"));
+};
+/**
+ * FieldEditor
+ */
+
+var FieldEditor = function FieldEditor(_ref4) {
+  var field = _ref4.field,
+      onChange = _ref4.onChange,
+      content = _ref4.content,
+      _ref4$outlined = _ref4.outlined,
+      outlined = _ref4$outlined === void 0 ? false : _ref4$outlined;
+  var id = field.id,
+      type = field.type,
+      item = field.item,
+      label = field.label,
+      editable = field.editable,
+      options = field.options;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  function renderField() {
+    var value1 = field.value ? field.value : field["default"];
+
+    switch (type) {
+      case TYPES.ENTITY:
+        return /*#__PURE__*/React.createElement(EntityEditor, {
+          field: field,
+          value: value1,
+          onChange: change
+        });
+
+      case TYPES.STRING:
+        return /*#__PURE__*/React.createElement(StringEditor, {
+          outlined: outlined,
+          field: field,
+          value: value1,
+          onChange: change,
+          content: content
+        });
+
+      case TYPES.BOOLEAN:
+        return /*#__PURE__*/React.createElement(CheckBox, {
+          outlined: true,
+          id: id,
+          label: label,
+          value: value1,
+          onChange: change
+        });
+
+      case TYPES.DATE:
+        return /*#__PURE__*/React.createElement(TextField, {
+          outlined: outlined,
+          id: id,
+          type: "date",
+          label: label,
+          value: value1,
+          onChange: change,
+          disabled: editable
+        });
+
+      case TYPES.NUMBER:
+        return /*#__PURE__*/React.createElement(NumberEditor, {
+          outlined: outlined,
+          field: field,
+          value: value1,
+          onChange: change
+        });
+
+      case TYPES.ARRAY:
+        return item === TYPES.STRING ? options ? /*#__PURE__*/React.createElement(MultiSelectionEditor, {
+          content: content,
+          field: field,
+          value: value1,
+          onChange: change
+        }) : /*#__PURE__*/React.createElement(ListEditor, {
+          field: field,
+          value: value1,
+          onChange: change
+        }) : /*#__PURE__*/React.createElement(CollectionEditor$1, {
+          field: field,
+          value: value1,
+          onChange: change
+        });
+
+      default:
+        return /*#__PURE__*/React.createElement("div", null, label);
+    }
+  }
+
+  return renderField();
+};
+/**
+ * Entity Editor
+ */
+
+var EntityEditor = function EntityEditor(_ref5) {
+  var field = _ref5.field,
+      _ref5$value = _ref5.value,
+      value = _ref5$value === void 0 ? {} : _ref5$value,
+      onChange = _ref5.onChange;
+  var id = field.id,
+      item = field.item,
+      label = field.label;
+  var content = new Content(item, value);
+
+  function change(fid, value) {
+    var _Object$assign4;
+
+    var next = Object.assign({}, content.value(), (_Object$assign4 = {}, _Object$assign4[fid] = value, _Object$assign4));
+    if (onChange) onChange(id, next);
+  }
+
+  var form = content.form();
+  var fields = Object.keys(form).map(function (key) {
+    return form[key];
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "entity-editor"
+  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Text, {
+    use: "caption"
+  }, label)), /*#__PURE__*/React.createElement("main", null, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(FieldEditor, {
+      key: field.id,
+      field: field,
+      onChange: change
+    });
+  })));
+};
+/**
+ * String Editor
+ */
+
+
+var StringEditor = function StringEditor(_ref6) {
+  var field = _ref6.field,
+      _ref6$value = _ref6.value,
+      value = _ref6$value === void 0 ? '' : _ref6$value,
+      onChange = _ref6.onChange,
+      content = _ref6.content,
+      outlined = _ref6.outlined;
+  var id = field.id,
+      label = field.label,
+      options = field.options,
+      _field$editable = field.editable,
+      editable = _field$editable === void 0 ? true : _field$editable;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  function buildOptions() {
+    var opts = typeof options === 'function' ? options(field, content) : options;
+    return opts;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field-editor string-editor"
+  }, editable ? options ? /*#__PURE__*/React.createElement(DropDown, {
+    outlined: outlined,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change,
+    options: buildOptions()
+  }) : /*#__PURE__*/React.createElement(TextField, {
+    outlined: outlined,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change
+  }) : /*#__PURE__*/React.createElement(TextField, {
+    outlined: outlined,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change,
+    readOnly: true
+  }));
+};
+/**
+ * Number Editor
+ */
+
+var NumberEditor = function NumberEditor(_ref7) {
+  var field = _ref7.field,
+      value = _ref7.value,
+      onChange = _ref7.onChange;
+  var id = field.id,
+      label = field.label,
+      _field$editable2 = field.editable,
+      editable = _field$editable2 === void 0 ? true : _field$editable2;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  var val = value || field["default"];
+  var min = field.min;
+  var max = field.max;
+  var disabled = !editable;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field-editor number-editor"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    outlined: true,
+    id: id,
+    label: label,
+    type: "NUMBER",
+    value: val,
+    max: max,
+    min: min,
+    onChange: change,
+    disabled: disabled
+  }));
+};
+/**
+ * List Editor
+ */
+
+
+var ListEditor = function ListEditor(_ref8) {
+  var field = _ref8.field,
+      _ref8$value = _ref8.value,
+      value = _ref8$value === void 0 ? [] : _ref8$value,
+      onChange = _ref8.onChange;
+  var label = field.label;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "list-editor"
+  }, /*#__PURE__*/React.createElement(TokenField, {
+    id: field.id,
+    label: label,
+    init: value,
+    onChange: change
+  }));
+};
+/**
+ * Multi Selection Editor
+ */
+
+var MultiSelectionEditor = function MultiSelectionEditor(_ref9) {
+  var field = _ref9.field,
+      _ref9$value = _ref9.value,
+      value = _ref9$value === void 0 ? [] : _ref9$value,
+      content = _ref9.content,
+      onChange = _ref9.onChange;
+  var id = field.id,
+      label = field.label,
+      options = field.options;
+
+  function change(v) {
+    var index = value.indexOf(v);
+
+    if (index >= 0) {
+      value.splice(index, 1);
+    } else {
+      value.push(v);
+    }
+
+    if (onChange) onChange(id, value);
+  }
+
+  function buildOptions() {
+    var opts = typeof options === 'function' ? options(field, content) : options;
+    return opts;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "multiselection-editor"
+  }, /*#__PURE__*/React.createElement("label", null, label), buildOptions().map(function (option) {
+    var checked = value.includes(option.value);
+    return /*#__PURE__*/React.createElement(CheckBox, {
+      value: checked,
+      label: option.label,
+      onChange: function onChange() {
+        return change(option.value);
+      }
+    });
+  }));
+};
+/**
+ * Collection Editor
+ */
+
+var CollectionEditor$1 = function CollectionEditor(_ref10) {
+  var field = _ref10.field,
+      _ref10$value = _ref10.value,
+      value = _ref10$value === void 0 ? [] : _ref10$value,
+      onChange = _ref10.onChange;
+  var id = field.id,
+      item = field.item,
+      label = field.label,
+      Feeder = field.Feeder,
+      Renderer = field.Renderer,
+      _field$Adder = field.Adder,
+      Adder = _field$Adder === void 0 ? true : _field$Adder,
+      _field$editable3 = field.editable,
+      editable = _field$editable3 === void 0 ? true : _field$editable3;
+
+  function add(rows) {
+    if (onChange) {
+      var next = value.concat(rows);
+      onChange(id, next);
+    }
+  }
+
+  function remove(index) {
+    if (onChange) {
+      var next = value.filter(function (item, i) {
+        return i !== index;
+      });
+      onChange(id, next);
+    }
+  }
+
+  function change(index, cellId, cellValue) {
+    if (onChange) {
+      var next = value.slice();
+      next[index][cellId] = cellValue;
+      onChange(id, next);
+    }
+  }
+
+  var columns = Object.values(item).map(function (item) {
+    return _extends({}, item, {
+      onChange: change
+    });
+  });
+  columns.push({
+    id: 'actions',
+    label: 'Actions'
+  });
+  var rows = value.map(function (item, index) {
+    return _extends({}, item, {
+      id: index,
+      actions: [/*#__PURE__*/React.createElement(Icon, {
+        icon: "delete",
+        clickable: true,
+        action: function action() {
+          return remove(index);
+        },
+        small: true
+      })]
+    });
+  });
+  var table = {
+    columns: columns,
+    rows: rows
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collection-editor"
+  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Text, {
+    use: "caption"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "actions"
+  }, Feeder ? /*#__PURE__*/React.createElement(Feeder, {
+    onAdd: add
+  }) : null)), Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+    field: field,
+    value: value,
+    onRemove: remove,
+    onChange: onChange
+  }) : /*#__PURE__*/React.createElement(DataTable, _extends({}, table, {
+    editable: editable
+  })), /*#__PURE__*/React.createElement("footer", null, Adder ? /*#__PURE__*/React.createElement(CollectionAdder, {
+    item: item,
+    onAdd: add
+  }) : null));
+};
+/**
+ * Collection Adder
+ */
+
+var CollectionAdder = function CollectionAdder(_ref11) {
+  var item = _ref11.item,
+      onAdd = _ref11.onAdd;
+
+  var _useState3 = useState(false),
+      edit = _useState3[0],
+      setEdit = _useState3[1];
+
+  var _useState4 = useState({}),
+      form = _useState4[0],
+      setForm = _useState4[1];
+
+  function toggle() {
+    setEdit(!edit);
+  }
+
+  function change(index, cellId, cellValue) {
+    if (onAdd) {
+      var _Object$assign5;
+
+      var next = Object.assign({}, form, (_Object$assign5 = {}, _Object$assign5[cellId] = cellValue, _Object$assign5));
+      setForm(next);
+    }
+  }
+
+  function save() {
+    if (onAdd) onAdd([form]);
+    toggle();
+  }
+
+  var columns = Object.values(item).map(function (item) {
+    return _extends({}, item, {
+      type: 'String',
+      onChange: change
+    });
+  });
+  columns.push({
+    id: 'actions',
+    label: ''
+  });
+  var rows = [{
+    actions: [/*#__PURE__*/React.createElement(Icon, {
+      icon: "done",
+      clickable: true,
+      action: save
+    }), /*#__PURE__*/React.createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      action: toggle
+    })]
+  }];
+  rows[0] = Object.assign({}, form, rows[0]);
+  var table = {
+    columns: columns,
+    rows: rows
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collection-adder"
+  }, edit ? /*#__PURE__*/React.createElement(DataTable, _extends({}, table, {
+    editable: true
+  })) : /*#__PURE__*/React.createElement(Button, {
+    icon: "add",
+    label: "Add",
+    action: toggle
+  }));
+};
+
+/**
+ * Create Content Dialog
+ */
+
+var CreateContentDialog = function CreateContentDialog(_ref) {
+  var label = _ref.label,
+      type = _ref.type,
+      validator = _ref.validator,
+      onOK = _ref.onOK,
+      _ref$onActionClose = _ref.onActionClose,
+      onActionClose = _ref$onActionClose === void 0 ? true : _ref$onActionClose;
+  var site = useContext(SiteContext);
+
+  var _useState = useState({}),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = useState(false),
+      isValid = _useState2[0],
+      setValid = _useState2[1];
+
+  var _useState3 = useState([]),
+      errors = _useState3[0],
+      setErrors = _useState3[1];
+
+  function change(form, validForm) {
+    setForm(form);
+
+    if (validator) {
+      var _validator = validator(form),
+          validation = _validator.validation,
+          _validator$errors = _validator.errors,
+          _errors = _validator$errors === void 0 ? [] : _validator$errors;
+
+      setValid(validForm && validation);
+      setErrors(_errors);
+    } else {
+      setValid(validForm);
+    }
+  }
+
+  function onAction(action) {
+    if (action === 'OK' && onOK) onOK(form);
+    if (action === 'CLOSE' || onActionClose === true) site.closeDialog();
+  }
+
+  function isRequired(field) {
+    var _field$required = field.required,
+        required = _field$required === void 0 ? false : _field$required;
+    return required;
+  }
+
+  function isOptional(field) {
+    var _field$creation = field.creation,
+        creation = _field$creation === void 0 ? false : _field$creation;
+    return creation;
+  }
+
+  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: "OK",
+    action: function action() {
+      return onAction("OK");
+    },
+    disabled: !isValid,
+    raised: true
+  }));
+  var title = /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, label);
+  var content = new Content(type, form);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, /*#__PURE__*/React.createElement(ContentForm, {
+    content: content,
+    filter: function filter(field) {
+      return isRequired(field) || isOptional(field);
+    },
+    onChange: change
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React.createElement(Text, {
+      use: "overline",
+      tag: "div",
+      className: "error"
+    }, error);
+  }));
+};
+
+/**
+ * Edit Content Dialog
+ */
+
+var EditContentDialog = function EditContentDialog(_ref) {
+  var label = _ref.label,
+      type = _ref.type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? {} : _ref$value,
+      filter = _ref.filter,
+      validator = _ref.validator,
+      onOK = _ref.onOK;
+  var site = useContext(SiteContext);
+
+  var _useState = useState(value),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = useState(false),
+      isValid = _useState2[0],
+      setValid = _useState2[1];
+
+  var _useState3 = useState([]),
+      errors = _useState3[0],
+      setErrors = _useState3[1];
+
+  function change(form) {
+    setForm(form);
+
+    if (validator) {
+      var _validator = validator(form),
+          validation = _validator.validation,
+          _validator$errors = _validator.errors,
+          _errors = _validator$errors === void 0 ? [] : _validator$errors;
+
+      setValid(validation);
+      setErrors(_errors);
+    } else {
+      setValid(true);
+    }
+  }
+
+  function onAction(action) {
+    if (action === 'OK' && onOK) onOK(Object.assign({}, value, form));
+    site.closeDialog();
+  }
+
+  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "expand"
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: "OK",
+    action: function action() {
+      return onAction("OK");
+    },
+    disabled: !isValid,
+    raised: true
+  }));
+  var title = /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, label);
+  var content = new Content(type, form);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: change,
+    filter: filter
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React.createElement(Text, {
+      use: "overline",
+      tag: "div",
+      className: "error"
+    }, error);
+  }));
+};
+
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+var http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
+/**
+ * Collection Page
+ */
+
+var CollectionPage = function CollectionPage(props) {
+  var reload = function reload() {
+    try {
+      return Promise.resolve(pageContext.load()).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var site = useContext(SiteContext);
+  var _props$id = props.id,
+      id = _props$id === void 0 ? "collection" : _props$id,
+      icon = props.icon,
+      title = props.title,
+      _props$name = props.name,
+      name = _props$name === void 0 ? "Collection 1" : _props$name,
+      schema = props.schema,
+      url = props.url,
+      groupBy = props.groupBy,
+      editor = props.editor,
+      field = props.field,
+      _props$autosave = props.autosave,
+      autosave = _props$autosave === void 0 ? false : _props$autosave,
+      _props$delay = props.delay,
+      delay = _props$delay === void 0 ? 1000 : _props$delay,
+      actions = props.actions,
+      levels = props.levels;
+
+  var _useContext = useContext(PageContext),
+      pageContext = _useContext[0],
+      setPageContext = _useContext[1];
+
+  var context = CollectionContext(url, field);
+  useEffect(function () {
+    try {
+      return Promise.resolve(context.load()).then(function () {
+        setPageContext(context);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+
+  function add() {
+    var onOK = function onOK(form) {
+      try {
+        return Promise.resolve(pageContext.create(form)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    site.openDialog( /*#__PURE__*/React.createElement(EditContentDialog, {
+      label: "Crear " + name,
+      type: schema,
+      onOK: onOK
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "collection-page",
+    title: /*#__PURE__*/React.createElement(Text, null, title)
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: "add",
+    label: "Add",
+    action: add
+  }), /*#__PURE__*/React.createElement(Button, {
+    icon: "refresh",
+    label: "Reload",
+    action: reload
+  }), actions), /*#__PURE__*/React.createElement("menu", {
+    className: "collection-page"
+  }, /*#__PURE__*/React.createElement(Header, {
+    title: /*#__PURE__*/React.createElement(Text, null, "Lista de ", name)
+  }), levels ? /*#__PURE__*/React.createElement(CollectionTree, {
+    levels: levels
+  }) : /*#__PURE__*/React.createElement(CollectionList, {
+    groupBy: groupBy
+  })), /*#__PURE__*/React.createElement("main", {
+    key: id,
+    className: "collection-page"
+  }, /*#__PURE__*/React.createElement(CollectionEditor, {
+    icon: icon,
+    schema: schema,
+    layout: editor,
+    autosave: autosave,
+    delay: delay
+  })));
+};
+/**
+ * Collection List
+ */
+
+var CollectionList = function CollectionList(props) {
+  var select = function select(id) {
+    try {
+      clear();
+      return Promise.resolve(pageContext.select(id)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var groupBy = props.groupBy;
+
+  var _useContext2 = useContext(PageContext),
+      pageContext = _useContext2[0],
+      setPageContext = _useContext2[1];
+
+  var _pageContext$all = pageContext.all,
+      all = _pageContext$all === void 0 ? [] : _pageContext$all;
+
+  function clear() {
+    pageContext.clear();
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  var items = all ? all.map(function (content) {
+    return {
+      id: content.id,
+      line1: content.name,
+      line2: content.description,
+      content: content
+    };
+  }) : [];
+  return /*#__PURE__*/React.createElement(List, {
+    items: items,
+    onSelect: select,
+    groupBy: groupBy
+  });
+};
+/**
+ * Collection Tree
+ */
+
+
+var CollectionTree = function CollectionTree(props) {
+  var select = function select(id) {
+    try {
+      clear();
+      return Promise.resolve(pageContext.select(id)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var levels = props.levels;
+
+  var _useContext3 = useContext(PageContext),
+      pageContext = _useContext3[0],
+      setPageContext = _useContext3[1];
+
+  var _pageContext$all2 = pageContext.all,
+      all = _pageContext$all2 === void 0 ? [] : _pageContext$all2;
+
+  function clear() {
+    pageContext.clear();
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function group(items, by) {
+    return items.reduce(function (nodes, field) {
+      var node = nodes.find(function (n) {
+        return n.name === field[by];
+      });
+
+      if (!node) {
+        var name = field[by];
+        node = {
+          name: name,
+          items: [],
+          field: by
+        };
+        nodes.push(node);
+      }
+
+      node.items.push(field);
+      return nodes;
+    }, []);
+  }
+
+  function generateNodes(levels, items) {
+    var by = levels[0];
+    var nodes = group(items, by);
+    if (levels.length > 1) nodes.forEach(function (node) {
+      return node.nodes = generateNodes(levels.slice(1), node.items);
+    });
+    return nodes;
+  }
+
+  function renderNodes(nodes) {
+    return nodes.map(function (node) {
+      var title = typeof node.name === 'boolean' ? node.field + " = " + node.name : node.name;
+      return /*#__PURE__*/React.createElement(TreeNode, {
+        key: node.name,
+        icon: null,
+        label: title,
+        open: true
+      }, node.nodes ? renderNodes(node.nodes) : node.items.map(function (item) {
+        return /*#__PURE__*/React.createElement(TreeItem, {
+          key: item.id,
+          id: item.id,
+          label: item.name,
+          onSelect: select
+        }, "item");
+      }));
+    });
+  }
+
+  var nodes = generateNodes(levels, all);
+  return /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Tree, null, renderNodes(nodes)));
+};
+/**
+ * Collection Editor
+ */
+
+
+var CollectionEditor = function CollectionEditor(props) {
+  var save = function save() {
+    try {
+      console.log('saving.....');
+      return Promise.resolve(pageContext.update(form)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var remove = function remove() {
+    try {
+      return Promise.resolve(pageContext.remove(selected.id)).then(function () {
+        pageContext.clear();
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext4 = useContext(PageContext),
+      pageContext = _useContext4[0],
+      setPageContext = _useContext4[1];
+
+  var selected = pageContext.selected;
+  var icon = props.icon,
+      schema = props.schema,
+      layout = props.layout,
+      _props$autosave2 = props.autosave,
+      autosave = _props$autosave2 === void 0 ? false : _props$autosave2,
+      _props$delay2 = props.delay,
+      delay = _props$delay2 === void 0 ? 1000 : _props$delay2;
+  var timer = useRef(null);
+
+  var _useState = useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  useEffect(function () {
+    if (autosave) {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(function () {
+        if (canSave()) save();
+      }, delay);
+    }
+  }, [form]);
+
+  function clear() {
+    pageContext.clear();
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function change(next) {
+    setForm(next);
+  }
+
+  function canSave() {
+    var can = !equal(form, selected);
+    return can;
+  }
+
+  function renderEditor() {
+    var content = new Content(schema, form);
+
+    switch (layout) {
+      case 'TABBED':
+        return /*#__PURE__*/React.createElement(TabbedContentEditor, _extends({}, props, {
+          content: content,
+          onChange: change
+        }));
+
+      case 'TREEDED':
+        return /*#__PURE__*/React.createElement(TreededContentEditor, _extends({}, props, {
+          content: content,
+          onChange: change
+        }));
+
+      default:
+        return /*#__PURE__*/React.createElement(ContentEditor, _extends({}, props, {
+          content: content,
+          onChange: change
+        }));
+    }
+  }
+
+  return selected && form ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    icon: icon,
+    title: /*#__PURE__*/React.createElement(Text, null, selected.name)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: clear
+  }), /*#__PURE__*/React.createElement(MenuIcon, {
+    align: "alignRight"
+  }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Eliminar",
+    onSelect: remove
+  }))), autosave === true ? null : /*#__PURE__*/React.createElement(Button, {
+    icon: "save",
+    label: "Guardar Cambios",
+    raised: true,
+    disabled: !canSave(),
+    action: save
+  })), renderEditor()) : null;
+};
+/**
+ * Collection Context
+ */
+
+
+var CollectionContext = function CollectionContext(url, field) {
+  var API = CollectionAPI(url);
+  return {
+    all: [],
+    selected: null,
+    load: function load() {
+      try {
+        var _this2 = this;
+
+        var _temp2 = _catch(function () {
+          return Promise.resolve(API.all()).then(function (data) {
+            _this2.all = field ? data[field] : data;
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    select: function select(id) {
+      var result = this.all.find(function (item) {
+        return item.id === id;
+      });
+      this.selected = result;
+    },
+    clear: function clear() {
+      this.selected = null;
+    },
+    create: function create(form) {
+      try {
+        var _this4 = this;
+
+        var _temp4 = _catch(function () {
+          return Promise.resolve(API.create(form)).then(function () {
+            return Promise.resolve(_this4.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log("CREATE ERROR", error);
+        });
+
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    update: function update(form) {
+      try {
+        var _this6 = this;
+
+        var _temp6 = _catch(function () {
+          return Promise.resolve(API.update(form)).then(function () {
+            return Promise.resolve(_this6.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    patch: function patch(id, form) {
+      try {
+        var _this8 = this;
+
+        var _temp8 = _catch(function () {
+          return Promise.resolve(API.patch(id, form)).then(function () {
+            return Promise.resolve(_this8.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    updateProperty: function updateProperty(id, propertyName, form) {
+      try {
+        var _this10 = this;
+
+        var _temp10 = _catch(function () {
+          return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
+            return Promise.resolve(_this10.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    remove: function remove(id) {
+      try {
+        var _this12 = this;
+
+        var _temp12 = _catch(function () {
+          return Promise.resolve(API.remove(id)).then(function () {
+            return Promise.resolve(_this12.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp12 && _temp12.then ? _temp12.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  };
+};
+/**
+ * Collection API
+ */
+
+var CollectionAPI = function CollectionAPI(url) {
+  return {
+    all: function all() {
+      return http.GET(url);
+    },
+    find: function find(id) {
+      return http.GET(url + "/" + id);
+    },
+    create: function create(form) {
+      var body = JSON.stringify(form);
+      return http.POST(url, body);
+    },
+    update: function update(form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + form.id, body);
+    },
+    patch: function patch(id, form) {
+      var body = JSON.stringify(form);
+      return http.PATCH(url + "/" + id, body);
+    },
+    updateProperty: function updateProperty(id, propertyName, form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + id + "/" + propertyName, body);
+    },
+    remove: function remove(id) {
+      return http.DELETE(url + "/" + id);
+    }
+  };
+};
+
+/**
+ * Component
+ */
+
+var UploadArea = function UploadArea(props) {
+  var STATES = {
+    'IDLE': 0,
+    'RUNNING': 1,
+    'SUCCESS': 2,
+    'ERROR': 3
+  };
+  var areaElement = useRef();
+
+  var _useState = useState(false),
+      drag = _useState[0],
+      setDrag = _useState[1];
+
+  useEffect(function () {
+    var resumable = props.resumable;
+    if (resumable && areaElement) resumable.assignDrop(areaElement.current);
+  }, []);
+
+  var onDragOver = function onDragOver() {
+    setDrag(true);
+  };
+
+  var onDragLeave = function onDragLeave() {
+    setDrag(false);
+  };
+
+  var _props$state = props.state,
+      state = _props$state === void 0 ? STATES.IDLE : _props$state,
+      _props$label = props.label,
+      label = _props$label === void 0 ? 'Add file or drop file here...' : _props$label,
+      error = props.error;
+  var dragging = drag === true ? 'drag-over' : '';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "upload-area6 " + dragging,
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave,
+    ref: areaElement
+  }, state === STATES.IDLE ? /*#__PURE__*/React.createElement(UploadIcon, {
+    resumable: props.resumable
+  }) : '', state === STATES.IDLE ? /*#__PURE__*/React.createElement("label", null, label) : '', state === STATES.RUNNING ? /*#__PURE__*/React.createElement(CircularProgress, {
+    size: "xlarge"
+  }) : '', state === STATES.SUCCESS ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "done_all"
+  }) : '', state === STATES.ERROR ? /*#__PURE__*/React.createElement(Text, {
+    use: "body1"
+  }, error) : '', props.children);
+};
+/**
+ * Component
+ */
+
+var UploadIcon = function UploadIcon(_ref) {
+  var resumable = _ref.resumable;
+  var iconElement = useRef();
+  useEffect(function () {
+    if (resumable && iconElement) resumable.assignBrowse(iconElement.current);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "upload-icon",
+    ref: iconElement
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "folder_open",
+    clickable: true
+  }));
+};
+
+/**
+ * Uploader
+ */
+
+var Uploader = function Uploader(_ref) {
+  var label = _ref.label,
+      target = _ref.target,
+      accept = _ref.accept,
+      className = _ref.className,
+      onSuccess = _ref.onSuccess,
+      onError = _ref.onError,
+      onComplete = _ref.onComplete;
+  var STATES = {
+    'IDLE': 0,
+    'RUNNING': 1,
+    'SUCCESS': 2,
+    'ERROR': 3,
+    'COMPLETED': 4
+  };
+  var resumable = useMemo(function () {
+    var config = {
+      target: target,
+      chunkSize: 1 * 1024 * 1024,
+      simultaneousUploads: 1,
+      testChunks: false,
+      throttleProgressCallbacks: 1,
+      fileType: accept
+    };
+    var resumable = new ResumableJS(config);
+    resumable.on('fileAdded', onFileAdded);
+    resumable.on('fileProgress', onFileProgress);
+    resumable.on('fileSuccess', onFileSuccess);
+    resumable.on('fileError', onFileError);
+    resumable.on('complete', onAllComplete);
+    return resumable;
+  }, []);
+
+  var _useState = useState(0),
+      setProgress = _useState[1];
+
+  var _useState2 = useState(STATES.IDLE),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = useState(),
+      error = _useState3[0],
+      setError = _useState3[1];
+
+  var _useState4 = useState([]),
+      files = _useState4[0],
+      setFiles = _useState4[1];
+
+  function onFileAdded(file) {
+    files.push(file);
+    setFiles(files);
+    resumable.upload();
+  }
+
+  function onFileProgress(file) {
+    var progress = file.progress();
+    setProgress(progress);
+  }
+
+  function onFileSuccess(file, message) {
+    setState(STATES.SUCCESS);
+    if (onSuccess) onSuccess(file, message);
+  }
+
+  function onFileError(file, message) {
+    setError(message);
+    setState(STATES.ERROR);
+    if (onError) onError(file, message);
+  }
+
+  function onAllComplete() {
+    setState(STATES.IDLE);
+    if (onComplete) onComplete(files);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "uploader " + className
+  }, /*#__PURE__*/React.createElement(UploadArea, {
+    resumable: resumable,
+    state: state,
+    label: label,
+    error: error
+  }));
+};
+
+/**
+ * Upload File
+ */
+
+var UploadFile = function UploadFile(_ref) {
+  var file = _ref.file,
+      state = _ref.state,
+      progress = _ref.progress,
+      error = _ref.error;
+  var STATES = {
+    'IDLE': 0,
+    'RUNNING': 1,
+    'SUCCESS': 2,
+    'ERROR': 3
+  };
+  var icon = error ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "image",
+    className: "error"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: "image"
+  });
+  return state !== STATES.IDLE ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "upload-file"
+  }, icon, /*#__PURE__*/React.createElement(Text, {
+    use: "body1",
+    tag: "label"
+  }, file.fileName), state === STATES.RUNNING ? /*#__PURE__*/React.createElement(LinearProgress, {
+    progress: progress
+  }) : '', state === STATES.RUNNING ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true
+  }) : '', state === STATES.SUCCESS ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "done"
+  }) : '', state === STATES.ERROR ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "error"
+  }) : ''), error ? /*#__PURE__*/React.createElement("div", {
+    className: "error"
+  }, /*#__PURE__*/React.createElement(Text, {
+    use: "overline"
+  }, error)) : '') : '';
+};
+
+/**
+ * Upload Dialog
+ */
+
+var UploadDialog = function UploadDialog(_ref) {
+  var label = _ref.label,
+      target = _ref.target,
+      accept = _ref.accept,
+      onSuccess = _ref.onSuccess,
+      onClose = _ref.onClose,
+      _ref$onActionClose = _ref.onActionClose,
+      onActionClose = _ref$onActionClose === void 0 ? true : _ref$onActionClose;
+  var site = useContext(SiteContext);
+
+  var _useState = useState(),
+      file = _useState[0],
+      setFile = _useState[1];
+
+  var _useState2 = useState([]),
+      errors = _useState2[0];
+
+  function onComplete(uploads) {
+    setFile(uploads[0]);
+    if (onSuccess) onSuccess(uploads[0]);
+  }
+
+  function onAction(action) {
+    if (action === 'CLOSE' || onActionClose === true) {
+      site.closeDialog();
+      onClose();
+    }
+  }
+
+  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }));
+  var title = /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, label);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, file ? /*#__PURE__*/React.createElement(UploadFile, {
+    file: file
+  }) : /*#__PURE__*/React.createElement(Uploader, {
+    label: label,
+    accept: accept,
+    target: target,
+    onComplete: onComplete
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React.createElement(Text, {
+      use: "overline",
+      tag: "div",
+      className: "error"
+    }, error);
+  }));
+};
+
+var isFunction = function isFunction(value) {
+  return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
+};
+
+export { Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, TYPES, Tab, TabbedContentEditor, Tabs, Text, TextField, TokenField, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, Uploader, Viewer, isFunction };
 //# sourceMappingURL=index.modern.js.map