ywana-core8 0.0.8 → 0.0.12

package/dist/index.cjs

@@ -1,2 +1,4153 @@
-require("material-design-icons-iconfont/dist/material-design-icons.css");var e=require("react"),n=require("deep-equal"),t=require("resumablejs");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=/*#__PURE__*/o(e),r=/*#__PURE__*/o(n),a=/*#__PURE__*/o(t),l=function(e,n,t,o){void 0===t&&(t=null);try{console.log("FETCH",e,n);var i={method:e,mode:"cors",headers:{Accept:"application/json","Content-Type":"application/json","x-access-token":o},body:t};return Promise.resolve(function(e,t){try{var o=Promise.resolve(fetch(n,i)).then(function(e){var n;function t(t){if(n)return t;throw e}var o=function(){if(e.ok)return Promise.resolve(e.json()).then(function(e){return n=1,e})}();return o&&o.then?o.then(t):t(o)})}catch(e){return t(e)}return o&&o.then?o.then(void 0,t):o}(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)}},u=function(e,n){return{GET:function(t){var o=n?n.token():null;return l("GET",e+t,void 0,o)},POST:function(t,o){var i=n?n.token():null;return l("POST",e+t,o,i)},PUT:function(t,o){var i=n?n.token():null;return l("PUT",e+t,o,i)},PATCH:function(t,o){var i=n?n.token():null;return l("PATCH",e+t,o,i)},DELETE:function(t){var o=n?n.token():null;return l("DELETE",e+t,void 0,o)}}},c=process.env.REACT_APP_SESSION||window&&window.SESSION?window.SESSION:"YWANA-CORE6-SESSION",s={token:function(){return(sessionStorage.getItem(c)?JSON.parse(sessionStorage.getItem(c)):{}).token},me:function(){return(sessionStorage.getItem(c)?JSON.parse(sessionStorage.getItem(c)):{}).me},init:function(e,n){sessionStorage.setItem(c,JSON.stringify({token:e,me:n}))},refresh:function(e){var n=this.me();sessionStorage.setItem(c,JSON.stringify({token:e,me:n}))},isLoggedIn:function(){return!!sessionStorage.DSSession},logout:function(){sessionStorage.removeItem(c)}},d=function(e){var n=e.size,t=e.clickable,o=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(),o&&o()}},e.icon)},f=function(e){var n=e.label,t=e.icon,o=e.action,i=e.disabled,r=void 0!==i&&i,a=e.raised?"raised":e.outlined?"outlined":"normal";return r&&(a+=" disabled"),h("button",{className:"btn "+a,onClick:function(e){r||(e.stopPropagation(),e.preventDefault(),o&&o())}},t?h(d,{icon:t,size:"small"}):null,h("span",null,n))},v=i.default.createContext({}),m=function(n){var t=n.children,o=e.useContext(v);if(o){var i=o.dictionary,r=(void 0===i?{}:i)[t],a=r?r[o.lang]:t;return a?h("span",null,a):""}return t?h("span",null,t):""},p=function(e){var n=e.id,t=e.label,o=e.placeholder,i=e.value,r=e.onChange;function a(e){r&&r(n,e.target.checked)}var l=h(m,null,t);return console.log(t,i),!0===i?h("div",{className:"checkbox",key:n+"1"},h("input",{id:n,type:"checkbox",placeholder:o,checked:!0,value:i,onChange:a}),h("span",{class:"checkmark"}),h("label",{htmlFor:n},l)):h("div",{className:"checkbox",key:n+"0"},h("input",{id:n,type:"checkbox",placeholder:o,value:i,onChange:a}),h("span",{class:"checkmark"}),h("label",{htmlFor:n},l))},g=function(n){var t=n.title,o=n.columns,r=void 0===o?1:o,a=n.children,l=n.outlined,u=n.onChange,c=e.useState([]),s=c[0],d=c[1],f=function(e){return null==e||""===e};e.useEffect(function(){var e=i.default.Children.toArray(a).filter(function(e){return null!==e&&""!==e}).map(function(e){var n=e.props,t=n.id,o=n.value,i=n.required,r=void 0!==i&&i,a=n.validation,l=!r||(a?a(o):!f(o));return{id:t,value:o,required:r,validation:a,valid:l}}).filter(function(e){return void 0!==e.id});d(e)},[]),e.useEffect(function(){if(u){var e=s.every(function(e){return!0===e.valid}),n=s.reduce(function(e,n){var t=n.value;return(t||!1===t)&&(e[n.id]=t),e},{});u(n,e)}},[s]);var v=function(e,n){var t=s.find(function(n){return n.id===e});if(t){var o=!t.required||(t.validation?t.validation(n):!f(n));Object.assign(t,{value:n,valid:o}),d(s.slice())}},p=i.default.Children.toArray(a).filter(function(e){return null!==e&&""!==e}).map(function(e){var n=e.props.span,t=void 0===n?1:n,o=i.default.cloneElement(e,{onChange:v,outlined:!!l});return h(b,{style:{gridColumn:"span "+t}},o)}),g={gridTemplateColumns:"repeat("+r+", 1fr)"};return h(e.Fragment,null,t?h("header",{className:"form-header"},h(m,{use:"headline6"},t)):"",h("form",{className:"form-grid",style:g},p))},b=function(e){return h("div",{className:"field-wrapper",style:e.style},e.children)},C=function(e){var n=e.caption?"caption":"",t=e.prominent?"prominent":"",o=e.dense?"dense":"",i=e.primary?"primary":"";i=e.secondary?"secondary":i;var r=e.icon?h(d,{icon:e.icon,clickable:e.clickable,action:e.action}):"";r=e.iconSrc?h("img",{className:"header-icon",src:e.iconSrc}):r;var a=e.img?{backgroundImage:"url("+e.img+")"}:{},l=h(m,null,e.title);return h("header",{className:"header "+n+" "+t+" "+o+" "+i+" "+e.className,style:a},r,e.title?h("label",null,l):null,h("span",{className:"actions"},e.children))};function y(){return y=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},y.apply(this,arguments)}var N=function(e){var n=e.items,t=void 0===n?[]:n,o=e.children,i=e.onSelect;function r(e){i&&i(e)}return e.groupBy?h(S,y({},e,{onSelect:r})):h("div",{className:"list"},h("ul",null,t.map(function(e){return h(x,{key:e.id,item:e,onSelect:r})})),o)},S=function(n){var t=n.items,o=n.children,i=n.onSelect,r=n.groupBy,a=(void 0===t?[]:t).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"},a.map(function(n){return h(e.Fragment,{key:n.name},h("header",{key:n.name+"-header"},h(m,null,n.name)),h("ul",{key:n.name+"-ul"},n.items.map(function(e){return h(x,{key:e.id,item:e,onSelect:i})})))}),o)},x=function(e){var n=e.item,t=e.onSelect,o=n.id,i=n.icon,r=n.line1,a=n.line2,l=n.meta;return h("li",{id:o,onClick:function(){t&&t(o)}},i?h(d,{icon:i,size:"small"}):null,h("main",null,h("div",{className:"primary-line"},h(m,null,r)),a?h("div",{className:"secondary-line"},h(m,null,a)):null),l?h("div",{className:"meta"},l):null)},k=i.default.createContext({}),E=function(e){return h("ul",null,e.children)},P=function(n){var t=n.icon,o=void 0===t?"more_vert":t,i=n.children,r=n.align,a=e.useState(!1),l=a[0],u=a[1];function c(){u(!l)}return h(k.Provider,{value:[l,u]},h("div",{className:"menu-icon"},h(d,{icon:o,clickable:!0,action:c}),l?h("menu",{className:""+r},i):null,l?h("div",{className:"overlay",onClick:c}):null))},O=function(n){var t=n.icon,o=n.label,i=n.meta,r=n.onSelect,a=e.useContext(k)[1];return h("li",{className:"menu-item",onClick:function(){r&&r(),a(!1)}},t?h(d,{icon:t}):null,h("label",null,o),i?h("div",{className:"meta"},i):null)},w=function(e){return h("div",{className:"circular-progress"},h(d,{icon:"refresh",size:"small"}))},T=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}))},j=function(e){var n=e.selected,t=e.onChange,o=i.default.Children.map(e.children,function(e,o){return i.default.cloneElement(e,{selected:o===n,onSelect:function(){t&&t(o)}})});return h("div",{class:"tabs"},o,h("div",{class:"tab-filler"}))},A=function(e){var n=e.onSelect;return h("div",{className:"tab "+(e.selected?"selected":""),onClick:function(){n&&n()}},e.label,e.actions||null)},D=function(n){var t=n.selected,o=void 0===t?0:t,r=i.default.Children.toArray(n.children).filter(function(e,n){return n===o})[0];return h(e.Fragment,null,r)},R=function(n){var t=e.useContext(v),o=n.id,i=n.type,r=void 0===i?"text":i,a=n.label,l=n.placeholder,u=n.value,c=n.readOnly,s=void 0!==c&&c,d=n.onChange,f=n.onEnter,p=n.onClick,g=(a?"":"no-label")+" "+(n.outlined?"textfield-outlined":"textfield"),b=h(m,null,a);return h("div",{className:""+g,onClick:p},h("input",{id:o,type:r,placeholder:l,value:u,required:!0,onChange:function(e){e.stopPropagation(),e.preventDefault(),d&&d(o,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"}),a?h("label",null,b):null)},I=function(n){var t=e.useContext(v),o=n.id,i=n.options,r=void 0===i?[]:i,a=n.value,l=n.onChange,u=e.useState(!1),c=u[0],s=u[1],f=e.useState(),m=f[0],p=f[1];function g(){t&&t.changeFocus({lose:function(){s(!1)}}),s(!c)}return e.useEffect(function(){if(Array.isArray(r)){var e=r.find(function(e){return e.value===a});e&&p(e.label)}},[a]),h("div",{className:"dropdown"},h(R,y({},n,{onClick:g,value:m})),h(d,{icon:"expand_more",clickable:!0,size:"small",action:g}),1==c?h("menu",null,h("ul",{onClick:function(e){var n=e.target.getAttribute("value"),t=r.find(function(e){return e.value===n});l&&l(o,n),p(t.label),s(!1)}},Array.isArray(r)?r.map(function(e){return h("li",{key:e.value,value:e.value},e.label)}):null)):null)},_=function(n){var t=n.columns,o=void 0===t?[]:t,i=n.rows,r=void 0===i?[]:i,a=n.onRowSelection,l=n.onSort,u=n.editable,c=n.outlined,s=e.useState({})[0];function f(e,n){a&&a(e,n)}function v(e,n){l&&l(e,n)}return h("div",{className:"datatable8 "+(c?"outlined":"")},h("table",null,h("thead",null,h("tr",null,o.map(function(e){var n=e.sortable;return h("th",null,h(m,null,e.label),n?h(d,{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 o=function(e,n,t){return t=null!==t?t:1,e===n?0:e>n?t:-1*t};return e.sort(function(e,i){for(var r=0,a=0;0===r&&a<t.length;){var l=t[a];l&&(r=o(e[l],i[l],n[l]),a++)}return r})}(r,s).map(function(e){return h(F,{key:e.id,row:e,columns:o,onSelect:f,onDrop:v,editable:u})}))))},F=function(n){var t,o=n.row,i=n.columns,r=void 0===i?[]:i,a=n.onSelect,l=n.editable,u=e.useState(!1),c=u[0],s=u[1],f=c?"expand_more":"expand_less";return h(e.Fragment,null,h("tr",{onClick:function(e){return a(o,e)}},r.map(function(e){return h(L,{row:o,column:e,cell:o[e.id],editable:l})}),o.info?h(d,{icon:f,clickable:!0,action:function(){return s(!c)}}):null),o.info&&c?h("tr",{className:"table-row-info"},(t=o.info)&&("[object Function]"===Object.prototype.toString.call(t)||"function"==typeof t||t instanceof Function)?o.info():o.info):null)},L=function(e){var n=e.row,t=e.column,o=e.cell,i=e.editable;return h("td",{className:t.id},function(e){var r=t.id,a=t.disabled,l=void 0!==a&&a,u=t.min,c=t.max,s=t.onChange,f=t.options;if(i&&s)switch(e){case"ICON":return h(d,{icon:o});case"BOOLEAN":case"Boolean":return h(p,{id:r,value:o,onChange:function(e,t){return s(n.id,e,t)},disabled:l});case"SELECTION":return h(I,{id:r,value:o,placeholder:"--Select--",options:f,onChange:function(e,t){return s(n.id,e,t)}});case"CHECK":return h(p,{id:r,value:o,onChange:function(e,t){return s(n.id,e,t)},disabled:n.disabled});case"CHECKABLE":return o&&o.value?h(p,{id:r,value:o.checked||!1,label:o.value,onChange:function(e,t){return s(n.id,e,o.value,t,o)}}):"";case"TEXTFIELD":return h(R,{id:r,value:o,onChange:function(e,t){return s(n.id,e,t)}});case"String":return h(U,{id:r,value:o,options:f,onChange:function(e,t){return s(n.id,e,t)}});case"Number":return h(R,{id:r,type:"number",value:o,min:u,max:c,onChange:function(e,t){return s(n.id,e,t)}});default:return o}else switch(e){case"ICON":return h(d,{icon:o});case"Boolean":return h(B,{id:r,value:o});case"String":return h(K,{id:r,value:o,options:f});default:return o}}(t.type))},B=function(e){var n=e.value;return h(d,{icon:!0===(void 0!==n&&n)?"check_box":"check_box_outline_blank"})},K=function(e){var n=e.value,t=e.options,o=t?t.find(function(e){return e.value===n}):null;return h("div",{className:"field-editor string-editor"},o?o.label:n)},U=function(e){var n=e.id,t=e.value,o=void 0===t?"":t,i=e.options,r=e.onChange;function a(e,n){r&&r(e,n)}return h("div",{className:"field-editor string-editor"},i?h(I,{outlined:!0,id:n,value:o,onChange:a,options:i}):h(R,{outlined:!0,id:n,value:o,onChange:a}))},z=function(n){var t=n.id,o=n.label,i=n.init,r=n.onChange,a=e.useRef(!1),l=e.useState(),u=l[0],c=l[1],s=e.useState(i),d=s[0],f=s[1];return e.useEffect(function(){a.current?r&&d&&r(t,d):a.current=!0},[d]),h("div",{className:"tokenField"},h("label",null,o),d.map(function(e,n){return h(q,{text:e,onDelete:function(){return function(e){var n=d.slice();n.splice(e,1),f(n)}(n)}})}),h("input",{type:"text",value:u,onChange:function(e){c(e.target.value)},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault(),e.stopPropagation();var n=d.concat(e.target.value);f(n),c("")}if(""===u&&d.length>0&&"Backspace"===e.key){var t=d.slice(0,-1);f(t)}}}))},q=function(e){var n=e.onDelete;return h("div",{className:"token"},h(m,{use:"caption",tag:"div"},e.text),h(d,{icon:"close",clickable:!0,action:n,size:"small"}))},M=function(e){var n=e.nodes;return h("div",{className:"tree"},void 0===n?[]:n,e.children)},Y=function(e){var n=e.icon,t=void 0===n?"folder":n,o=e.label,i=e.open,r=e.children,a=e.actions;return h("details",{className:"tree-node",open:void 0!==i&&i},h("summary",{className:"tree-item"},t?h(d,{icon:t,size:"small",small:!0}):null,h("div",{className:"label"},o),h("div",{className:"actions"},a)),r)},G=function(e){var n=e.id,t=e.icon,o=e.label,i=e.actions,r=e.onSelect;return h("div",{className:"tree-item final",onClick:function(){r&&r(n)}},h(d,{icon:void 0===t?"description":t,size:"small",small:!0}),h("div",{className:"label"},o),h("div",{className:"actions"},i))},H=i.default.createContext({}),J=function(n){var t=n.context,o=n.children,i=e.useState(void 0===t?{}:t);return h(H.Provider,{value:[i[0],i[1]]},o)},V=function(e){var n=e.layout,t=e.context;return h(J,{context:void 0===t?{}:t},h("article",{className:"page6 "+(void 0===n?"simple":n)},e.children))},W=function(n){var t=n.children,o=n.siteDictionary,i=e.useState(n.siteLang),r=i[0],a=i[1],l=e.useState(o),u=l[0],c=l[1],s=e.useState("max"),d=s[0],f=s[1],m=e.useState(!1),p=m[0],g=m[1],b=e.useState(null),C=b[0],y=b[1],N=e.useState(!1),S=N[0],x=N[1],k=e.useState(),E=k[0],P=k[1],O=e.useState(),w=O[0],T=O[1],j=e.useState(),A=j[0],D=j[1],R=e.useState(),I=R[0],_=R[1],F=e.useState(),L=F[0],B=F[1],K={lang:r,setLang:a,dictionary:u,setDictionary:c,focused:L,changeFocus:function(e){L&&L.lose(),B(e)},sideNav:d,setSideNav:f,showNav:p,setShowNav:g,info:C,openInfo:function(e){y(e)},closeInfo:function(){y(null)},console:S,toggleConsole:function(){x(!S)},breadcrumb:I,setBreadcrumb:_,page:E,goto:function(e){P(e)},dialog:w,openDialog:function(e){T(e)},closeDialog:function(){T(null)},preview:A,openPreview:function(e){D(e)},closePreview:function(){D(null)}};return h(v.Provider,{value:K},t)},X=function(e){var n=e.icon;return h(C,{icon:void 0===n?"equalizer":n,title:e.title})},Q=function(n){var t=n.children;return e.useContext(v),h("nav",null,t)},Z=function(){var n=e.useContext(v);return n.info?h("aside",null,n.info):""},$=function(n){var t=n.children,o=n.min,i=e.useContext(v),r=i.showNav;e.useEffect(function(){o&&i.setSideNav("min")},[]);var a=t?e.Children.toArray(t).reduce(function(e,n){var t=n.props?n.props.section:"...";e[t]||(e[t]=[]);var o=n.props,i=o.title;return i&&e[t].push({id:o.id,icon:o.icon,title:i}),e},{}):{};return h("menu",{className:"min "+(r?"show":"")},h("main",null,Object.keys(a).map(function(n){return h(e.Fragment,{key:n},a[n].map(function(e){var n=e.id,t=e.icon;return h(d,{key:n,icon:void 0===t?"info":t,clickable:!0,checked:n===i.page,action:function(){return function(e){i.setShowNav(!1),i.goto(e)}(n)}})}),h("div",{className:"section-divider"}))})))},ee=function(n){var t=n.children,o=n.init,r=e.useContext(v),a=r.page;return e.useEffect(function(){r.goto(o||"EMPTY")},[]),h("main",null,i.default.Children.toArray(t).filter(function(e){return!!e.props&&e.props.id===a}))},ne=function(){var n=e.useContext(v);return n.dialog?n.dialog:""},te=function(){var n=e.useContext(v);return n.preview?h("div",{className:"site-preview"},n.preview):""},oe=function(){return e.useContext(v).console?h("footer",{className:"site-console"},h(C,null,h(j,null,h(A,{label:"Console"}))),h("main",null)):""},ie=function(n){var t=e.useContext(v),o=n.icon,i=n.title,r=void 0===i?"Dialog":i,a=n.children,l=n.actions;return h(e.Fragment,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,o?h(P,{icon:o}):null,h(m,null,r)),h("main",null,a),h("footer",null,l))))},re={STRING:"String",NUMBER:"Number",DATE:"Date",BOOLEAN:"Boolean",ARRAY:"Array",ENTITY:"Object",FUNCTION:"Function",EMAIL:"String"},ae=Object.values(re).reduce(function(e,n){return e["is"+n]=function(e){return toString.call(e)=="[object "+n+"]"},e},{}),le=/*#__PURE__*/function(){function e(e){this._schema=e}var n=e.prototype;return n.checkType=function(n,t){var o=n.type,i=n.item,r=!0,a=!0;if(i){var l=new e(i);switch(o){case re.ARRAY:r=ae["is"+o](t),a=t.every(function(e){return l.validate(e)});break;case re.ENTITY:r=ae["is"+o](t),a=l.validate(t);break;case re.NUMBER:r=ae["is"+o](t.value),a=!0;break;default:r=!0,a=!0}}return r&&a},n.validate=function(e){var n=this;return Object.entries(this._schema).filter(function(e){return!0===e[1].required}).every(function(t){var o=t[0];return void 0!==e[o]&&n.checkType(t[1],e[o])})},n.form=function(e){return Object.entries(this._schema).reduce(function(n,t){var o=t[0];return n[o]=Object.assign({},t[1],{value:e[o]}),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,o){var i=o[0],r=o[1],a=r.item,l=n?n[i]:null;switch(r.type){case re.STRING:case re.NUMBER:case re.BOOLEAN:t[i]=l||r.default;break;case re.ENTITY:var u=new e(a);t[i]=u.value(l);break;case re.ARRAY:if(a===re.STRING)t[i]=l||[];else{var c=new e(a);t[i]=l?l.map(function(e){return c.value(e)}):[]}break;default:t[i]=r}return t},{})},e}(),ue=/*#__PURE__*/function(){function e(e,n){this.type=e,this._type=new le(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}(),ce=function(e){var n=e.columns,t=void 0===n?1:n,o=e.filter,i=e.onChange,r=e.content.form();console.log(r);var a=Object.keys(r).map(function(e){return r[e]}).filter(function(e){return!o||o(e)});return console.log(a),h(g,{className:"content-form",columns:t,outlined:!0,onChange:i},a.map(function(e){return h(se,y({key:e.id},e))}))},se=function(e){switch(e.type){case re.BOOLEAN:return h(p,y({key:e.id},e));case re.NUMBER:return h(he,y({key:e.id},e));default:return h(de,y({key:e.id},e))}},de=function(e){var n,t=e.id,o=e.type,i=e.label,r=e.options,a=e.textarea,l=e.required,u=void 0!==l&&l,c=e.value,s=e.onChange,d=e.outlined,f=((n={})[re.NUMBER]="number",n[re.DATE]="date",n)[o]||"text";return r?h(I,{key:t,id:t,label:i,value:c,onChange:s,options:"function"==typeof r?r():r,outlined:d}):h(R,{key:t,id:t,type:f,label:i,value:c,onChange:s,required:u,outlined:d,textarea:a})},he=function(e){var n=e.id,t=e.label,o=e.options,i=e.required,r=void 0!==i&&i,a=e.value,l=e.onChange,u=e.outlined;function c(e,n){l&&l(e,+n?+n:n)}return o?h(I,{key:n,id:n,label:t,value:a,onChange:c,options:o,outlined:u}):h(R,{key:n,id:n,type:"number",label:t,value:a,onChange:c,required:r,outlined:u})},fe=function(e){var n=e.content,t=e.filter,o=e.onChange;function i(e,t){var i,r=Object.assign({},n.value(),((i={})[e]=t,i));o&&o(r)}var r=n.sections();return h("div",{className:"content-editor"},r.map(function(e){var o=e.title,r=e.fields;return h("section",{key:o},h("header",null,o),h("main",null,r.filter(function(e){return"id"!==e.id}).filter(function(e){return!t||t(e,n)}).map(function(e){return h(pe,{key:e.id,field:e,onChange:i})})))}))},ve=function(n){var t=n.content,o=n.filter,i=n.grouped,r=void 0!==i&&i,a=n.onChange,l=e.useState(0),u=l[0],c=l[1];function s(e,n){var o,i=Object.assign({},t.value(),((o={})[e]=n,o));a&&a(i)}var d=t.sections();return h("div",{className:"content-editor tabbed"},h(j,{selected:u,onChange:function(e){c(e)}},d.map(function(e){return h(A,{label:e.title})})),h(D,{selected:u},d.map(function(n){var i=n.fields;return h("section",{key:n.title},h("nav",null," "),h("main",null,r?function(e){var n=e.fields,t=(void 0===n?[]:n).reduce(function(e,n){var t=n.group||"",o=e[t]||{name:t,fields:[]};return o.fields.push(n),e[t]=o,e},{});return Object.values(t)}(n).map(function(n){return h(e.Fragment,null,n.name.length>0?h("div",{className:"group-caption"},n.name):null,n.fields.filter(function(e){return"id"!==e.id}).filter(function(e){return!o||o(e)}).map(function(e){return h(pe,{key:e.id,field:e,onChange:s,content:t})}))}):i.filter(function(e){return"id"!==e.id}).filter(function(e){return!o||o(e)}).map(function(e){return h(pe,{key:e.id,field:e,onChange:s,content:t})})))})))},me=function(n){var t=n.content,o=n.onChange,i=t.value(),r=Object.values(t.type).filter(function(e){return e.type===re.ARRAY}),a=e.useState(),l=a[0],u=a[1];function c(){}return h("div",{className:"content-editor treeded-editor"},h("menu",null,h("header",null,h(m,{use:"caption"},"Tree Editor")),h(M,null,r.map(function(e,n){return h(Y,{icon:"folder",label:e.label,actions:[h(d,{small:!0,icon:"add",clickable:!0,action:c})]},i[e.id]?i[e.id].map(function(n,t){return h(G,{icon:n.icon||"description",label:n.name||n.label,onSelect:function(){return function(e,n,t){var o=new ue(t.item,n);u({index:e,item:o,node:t,value:i[t.id]})}(t,n,e)}})}):null)}))),h("div",null,l?h(ve,{content:l.item,onChange:function(e){var n,t=l.value.slice();t[l.index]=e;var r=Object.assign({},i,((n={})[l.node.id]=t,n));o&&o(r)}}):"select"))},pe=function(e){var n=e.field,t=e.onChange,o=e.content,i=e.outlined,r=void 0!==i&&i,a=n.id,l=n.type,u=n.item,c=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(l){case re.ENTITY:return h(ge,{field:n,value:e,onChange:f});case re.STRING:return h(be,{outlined:r,field:n,value:e,onChange:f,content:o});case re.BOOLEAN:return h(p,{outlined:!0,id:a,label:c,value:e,onChange:f});case re.DATE:return h(R,{outlined:r,id:a,type:"date",label:c,value:e,onChange:f,disabled:s});case re.NUMBER:return h(Ce,{outlined:r,field:n,value:e,onChange:f});case re.ARRAY:return u===re.STRING?d?h(Ne,{content:o,field:n,value:e,onChange:f}):h(ye,{field:n,value:e,onChange:f}):h(Se,{field:n,value:e,onChange:f});default:return h("div",null,c)}}()},ge=function(e){var n=e.field,t=e.value,o=e.onChange,i=n.id,r=n.label,a=new ue(n.item,void 0===t?{}:t);function l(e,n){var t,r=Object.assign({},a.value(),((t={})[e]=n,t));o&&o(i,r)}var u=a.form(),c=Object.keys(u).map(function(e){return u[e]});return h("div",{className:"entity-editor"},h("header",null,h(m,{use:"caption"},r)),h("main",null,c.map(function(e){return h(pe,{key:e.id,field:e,onChange:l})})))},be=function(e){var n=e.field,t=e.value,o=void 0===t?"":t,i=e.onChange,r=e.outlined,a=n.id,l=n.label,u=n.options,c=n.editable;function s(e,n){i&&i(e,n)}return h("div",{className:"field-editor string-editor"},void 0===c||c?u?h(I,{outlined:r,id:a,label:l,value:o,onChange:s,options:"function"==typeof u?u(n,e.content):u}):h(R,{outlined:r,id:a,label:l,value:o,onChange:s}):h(R,{outlined:r,id:a,label:l,value:o,onChange:s,readOnly:!0}))},Ce=function(e){var n=e.field,t=e.onChange,o=n.editable;return h("div",{className:"field-editor number-editor"},h(R,{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===o||o)}))},ye=function(e){var n=e.field,t=e.value,o=e.onChange;return h("div",{className:"list-editor"},h(z,{id:n.id,label:n.label,init:void 0===t?[]:t,onChange:function(e,n){o&&o(e,n)}}))},Ne=function(e){var n=e.field,t=e.value,o=void 0===t?[]:t,i=e.content,r=e.onChange,a=n.id,l=n.options;return h("div",{className:"multiselection-editor"},h("label",null,n.label),("function"==typeof l?l(n,i):l).map(function(e){var n=o.includes(e.value);return h(p,{value:n,label:e.label,onChange:function(){return(t=o.indexOf(n=e.value))>=0?o.splice(t,1):o.push(n),void(r&&r(a,o));var n,t}})}))},Se=function(e){var n=e.field,t=e.value,o=void 0===t?[]:t,i=e.onChange,r=n.id,a=n.item,l=n.label,u=n.Feeder,c=n.Renderer,s=n.Adder,f=void 0===s||s,v=n.editable,p=void 0===v||v;function g(e){if(i){var n=o.concat(e);i(r,n)}}function b(e){if(i){var n=o.filter(function(n,t){return t!==e});i(r,n)}}function C(e,n,t){if(i){var a=o.slice();a[e][n]=t,i(r,a)}}var N=Object.values(a).map(function(e){return y({},e,{onChange:C})});N.push({id:"actions",label:"Actions"});var S=o.map(function(e,n){return y({},e,{id:n,actions:[h(d,{icon:"delete",clickable:!0,action:function(){return b(n)},small:!0})]})}),x={columns:N,rows:S};return h("div",{className:"collection-editor"},h("header",null,h(m,{use:"caption"},l),h("div",{className:"actions"},u?h(u,{onAdd:g}):null)),c?h(c,{field:n,value:o,onRemove:b,onChange:i}):h(_,y({},x,{editable:p})),h("footer",null,f?h(xe,{item:a,onAdd:g}):null))},xe=function(n){var t=n.item,o=n.onAdd,i=e.useState(!1),r=i[0],a=i[1],l=e.useState({}),u=l[0],c=l[1];function s(){a(!r)}function v(e,n,t){if(o){var i,r=Object.assign({},u,((i={})[n]=t,i));c(r)}}var m=Object.values(t).map(function(e){return y({},e,{type:"String",onChange:v})});m.push({id:"actions",label:""});var p=[{actions:[h(d,{icon:"done",clickable:!0,action:function(){o&&o([u]),s()}}),h(d,{icon:"close",clickable:!0,action:s})]}];return p[0]=Object.assign({},u,p[0]),h("div",{className:"collection-adder"},r?h(_,y({},{columns:m,rows:p},{editable:!0})):h(f,{icon:"add",label:"Add",action:s}))},ke=function(n){var t=n.label,o=n.type,i=n.value,r=void 0===i?{}:i,a=n.filter,l=n.validator,u=n.onOK,c=e.useContext(v),s=e.useState(r),d=s[0],p=s[1],g=e.useState(!1),b=g[0],C=g[1],y=e.useState([]),N=y[0],S=y[1];function x(e){"OK"===e&&u&&u(Object.assign({},r,d)),c.closeDialog()}var k=h(e.Fragment,null,h(f,{label:"CLOSE",action:function(){return x("CLOSE")}}),h("div",{className:"expand"}),h(f,{label:"OK",action:function(){return x("OK")},disabled:!b,raised:!0})),E=h(m,{use:"headline6"},t),P=new ue(o,d);return h(ie,{title:E,open:!0,onAction:x,actions:k},h(fe,{content:P,onChange:function(e){if(p(e),l){var n=l(e),t=n.errors,o=void 0===t?[]:t;C(n.validation),S(o)}else C(!0)},filter:a}),N.map(function(e){return h(m,{use:"overline",tag:"div",className:"error"},e)}))};function Ee(e,n){try{var t=e()}catch(e){return n(e)}return t&&t.then?t.then(void 0,n):t}var Pe=u(window.API||process.env.REACT_APP_API,s),Oe=function(n){var t=n.groupBy,o=e.useContext(H),i=o[0],r=o[1],a=i.all,l=void 0===a?[]:a,u=l?l.map(function(e){return{id:e.id,line1:e.name,line2:e.description,content:e}}):[];return h(N,{items:u,onSelect:function(e){try{return i.clear(),r(Object.assign({},i)),Promise.resolve(i.select(e)).then(function(){r(Object.assign({},i))})}catch(e){return Promise.reject(e)}},groupBy:t})},we=function(n){var t=function(e){try{return r.clear(),a(Object.assign({},r)),Promise.resolve(r.select(e)).then(function(){a(Object.assign({},r))})}catch(e){return Promise.reject(e)}},o=n.levels,i=e.useContext(H),r=i[0],a=i[1],l=r.all,u=function e(n,t){var o=function(e,n){return e.reduce(function(e,t){var o=e.find(function(e){return e.name===t[n]});return o||e.push(o={name:t[n],items:[],field:n}),o.items.push(t),e},[])}(t,n[0]);return n.length>1&&o.forEach(function(t){return t.nodes=e(n.slice(1),t.items)}),o}(o,void 0===l?[]:l);return h("main",null,h(M,null,function e(n){return n.map(function(n){return h(Y,{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(G,{key:e.id,id:e.id,label:e.name,onSelect:t},"item")}))})}(u)))},Te=function(n){var t=function(){try{return console.log("saving....."),Promise.resolve(i.update(x)).then(function(){a(Object.assign({},i))})}catch(e){return Promise.reject(e)}},o=e.useContext(H),i=o[0],a=o[1],l=i.selected,u=n.icon,c=n.schema,s=n.layout,v=n.autosave,p=void 0!==v&&v,g=n.delay,b=void 0===g?1e3:g,N=e.useRef(null),S=e.useState(l),x=S[0],k=S[1];function w(e){k(e)}function T(){return!r.default(x,l)}return e.useEffect(function(){k(l)},[l]),e.useEffect(function(){p&&(clearTimeout(N.current),N.current=setTimeout(function(){T()&&t()},b))},[x]),l&&x?h(e.Fragment,null,h(C,{icon:u,title:h(m,null,l.name)},h(d,{icon:"close",clickable:!0,action:function(){i.clear(),a(Object.assign({},i))}}),h(P,{align:"alignRight"},h(E,null,h(O,{label:"Eliminar",onSelect:function(){try{return Promise.resolve(i.remove(l.id)).then(function(){i.clear(),a(Object.assign({},i))})}catch(e){return Promise.reject(e)}}}))),!0===p?null:h(f,{icon:"save",label:"Guardar Cambios",raised:!0,disabled:!T(),action:t})),function(){var e=new ue(c,x);switch(s){case"TABBED":return h(ve,y({},n,{content:e,onChange:w}));case"TREEDED":return h(me,y({},n,{content:e,onChange:w}));default:return h(fe,y({},n,{content:e,onChange:w}))}}()):null},je=function(e,n){var t=Ae(e);return{all:[],selected:null,load:function(){try{var e=this,o=Ee(function(){return Promise.resolve(t.all()).then(function(t){e.all=n?t[n]:t})},function(e){console.log(e)});return Promise.resolve(o&&o.then?o.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,o=Ee(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(o&&o.then?o.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},update:function(e){try{var n=this,o=Ee(function(){return Promise.resolve(t.update(e)).then(function(){return Promise.resolve(n.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)}},patch:function(e,n){try{var o=this,i=Ee(function(){return Promise.resolve(t.patch(e,n)).then(function(){return Promise.resolve(o.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)}},updateProperty:function(e,n,o){try{var i=this,r=Ee(function(){return Promise.resolve(t.updateProperty(e,n,o)).then(function(){return Promise.resolve(i.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,o=Ee(function(){return Promise.resolve(t.remove(e)).then(function(){return Promise.resolve(n.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)}}}},Ae=function(e){return{all:function(){return Pe.GET(e)},find:function(n){return Pe.GET(e+"/"+n)},create:function(n){var t=JSON.stringify(n);return Pe.POST(e,t)},update:function(n){var t=JSON.stringify(n);return Pe.PUT(e+"/"+n.id,t)},patch:function(n,t){var o=JSON.stringify(t);return Pe.PATCH(e+"/"+n,o)},updateProperty:function(n,t,o){var i=JSON.stringify(o);return Pe.PUT(e+"/"+n+"/"+t,i)},remove:function(n){return Pe.DELETE(e+"/"+n)}}},De=function(n){var t=e.useRef(),o=e.useState(!1),i=o[0],r=o[1];e.useEffect(function(){var e=n.resumable;e&&t&&e.assignDrop(t.current)},[]);var a=n.state,l=void 0===a?0:a,u=n.label,c=void 0===u?"Add file or drop file here...":u,s=n.error;return h("div",{className:"upload-area6 "+(!0===i?"drag-over":""),onDragOver:function(){r(!0)},onDragLeave:function(){r(!1)},ref:t},0===l?h(Re,{resumable:n.resumable}):"",0===l?h("label",null,c):"",1===l?h(w,{size:"xlarge"}):"",2===l?h(d,{icon:"done_all"}):"",3===l?h(m,{use:"body1"},s):"",n.children)},Re=function(n){var t=n.resumable,o=e.useRef();return e.useEffect(function(){t&&o&&t.assignBrowse(o.current)},[]),h("div",{className:"upload-icon",ref:o},h(d,{icon:"folder_open",clickable:!0}))},Ie=function(n){var t=n.label,o=n.target,i=n.accept,r=n.className,l=n.onSuccess,u=n.onError,c=n.onComplete,s=e.useMemo(function(){var e=new a.default({target:o,chunkSize:1048576,simultaneousUploads:1,testChunks:!1,throttleProgressCallbacks:1,fileType:i});return e.on("fileAdded",S),e.on("fileProgress",x),e.on("fileSuccess",k),e.on("fileError",E),e.on("complete",P),e},[]),d=e.useState(0)[1],f=e.useState(0),v=f[0],m=f[1],p=e.useState(),g=p[0],b=p[1],C=e.useState([]),y=C[0],N=C[1];function S(e){y.push(e),N(y),s.upload()}function x(e){var n=e.progress();d(n)}function k(e,n){m(2),l&&l(e,n)}function E(e,n){b(n),m(3),u&&u(e,n)}function P(){m(0),c&&c(y)}return h("div",{className:"uploader "+r},h(De,{resumable:s,state:v,label:t,error:g}))},_e=function(n){var t=n.file,o=n.state,i=n.progress,r=n.error,a=r?h(d,{icon:"image",className:"error"}):h(d,{icon:"image"});return 0!==o?h(e.Fragment,null,h("div",{className:"upload-file"},a,h(m,{use:"body1",tag:"label"},t.fileName),1===o?h(T,{progress:i}):"",1===o?h(d,{icon:"close",clickable:!0}):"",2===o?h(d,{icon:"done"}):"",3===o?h(d,{icon:"error"}):""),r?h("div",{className:"error"},h(m,{use:"overline"},r)):""):""};exports.Button=f,exports.CheckBox=p,exports.Chip=function(e){var n=e.id,t=e.icon,o=e.label,i=e.action,r=e.onSelect,a=e.outlined?"outlined":"normal";return e.selected&&(a+=" selected"),h("div",{className:"chip "+a,onClick:function(e){e.stopPropagation(),e.preventDefault(),r&&r(n)}},t?h(d,{icon:t,size:"small"}):null,h("main",null,h(m,null,o)),i?h("span",{className:"meta"},i):null)},exports.Chips=function(e){return h("div",{className:"chips"},e.children)},exports.CircularProgress=w,exports.CollectionContext=je,exports.CollectionEditor=Se,exports.CollectionPage=function(n){var t=e.useContext(v),o=n.id,i=void 0===o?"collection":o,r=n.icon,a=n.title,l=n.name,u=void 0===l?"Collection 1":l,c=n.schema,s=n.url,d=n.groupBy,p=n.editor,g=n.field,b=n.autosave,y=void 0!==b&&b,N=n.delay,S=void 0===N?1e3:N,x=n.actions,k=n.levels,E=e.useContext(H),P=E[0],O=E[1],w=je(s,g);return e.useEffect(function(){try{return Promise.resolve(w.load()).then(function(){O(w)})}catch(e){return Promise.reject(e)}},[]),h(e.Fragment,null,h(C,{className:"collection-page",title:h(m,null,a)},h(f,{icon:"add",label:"Add",action:function(){t.openDialog(h(ke,{label:"Crear "+u,type:c,onOK:function(e){try{return Promise.resolve(P.create(e)).then(function(){O(Object.assign({},P))})}catch(e){return Promise.reject(e)}}}))}}),h(f,{icon:"refresh",label:"Reload",action:function(){try{return Promise.resolve(P.load()).then(function(){O(Object.assign({},P))})}catch(e){return Promise.reject(e)}}}),x),h("menu",{className:"collection-page"},h(C,{title:h(m,null,"Lista de ",u)}),k?h(we,{levels:k}):h(Oe,{groupBy:d})),h("main",{key:i,className:"collection-page"},h(Te,{icon:r,schema:c,layout:p,autosave:y,delay:S})))},exports.Content=ue,exports.ContentEditor=fe,exports.ContentForm=ce,exports.CreateContentDialog=function(n){var t=n.label,o=n.type,i=n.validator,r=n.onOK,a=n.onActionClose,l=void 0===a||a,u=e.useContext(v),c=e.useState({}),s=c[0],d=c[1],p=e.useState(!1),g=p[0],b=p[1],C=e.useState([]),y=C[0],N=C[1];function S(e){"OK"===e&&r&&r(s),"CLOSE"!==e&&!0!==l||u.closeDialog()}var x=h(e.Fragment,null,h(f,{label:"CLOSE",action:function(){return S("CLOSE")}}),h(f,{label:"OK",action:function(){return S("OK")},disabled:!g,raised:!0})),k=h(m,{use:"headline6"},t),E=new ue(o,s);return h(ie,{title:k,open:!0,onAction:S,actions:x},h(ce,{content:E,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(d(e),i){var t=i(e),o=t.errors,r=void 0===o?[]:o;b(n&&t.validation),N(r)}else b(n)}}),y.map(function(e){return h(m,{use:"overline",tag:"div",className:"error"},e)}))},exports.DataTable=_,exports.Dialog=ie,exports.DropDown=I,exports.EditContentDialog=ke,exports.FieldEditor=pe,exports.Form=g,exports.HTTPClient=u,exports.Header=C,exports.Icon=d,exports.Kanban=function(e){return h("div",{className:"kanban"},e.children)},exports.KanbanCard=function(e){return h("div",{className:"kanban-card "+e.color},e.children)},exports.KanbanColumn=function(n){var t=n.id,o=n.icon,i=n.title,r=n.subtitle,a=n.badge,l=n.children,u=n.minified,c=n.disabled,s=void 0!==c&&c,f=e.useState(void 0!==u&&u),v=f[0],p=f[1];function g(){p(!v)}return v?h("div",{className:"kanban-column "+t+" min"},h("main",null,i),h("footer",null,h(d,{icon:"toggle_off",onIcon:"toggle_on",clickable:!0,action:g}))):h("div",{className:"kanban-column "+t+" "+(s?"disabled":"")},h("header",null,h(d,{icon:o}),h("div",{className:"title"},h(m,{use:"headline6"},i),h(m,{className:"secondary-text",use:"body2"},r)),h("div",{className:"badge"},a)),h("main",null,l),h("footer",null,h(d,{icon:"toggle_off",onIcon:"toggle_on",clickable:!0,action:g})))},exports.LinearProgress=T,exports.List=N,exports.ListEditor=ye,exports.LoginBox=function(n){var t=n.logo,o=n.title,i=n.userLabel,r=void 0===i?"User":i,a=n.passwordLabel,l=void 0===a?"Password":a,u=n.loginLabel,c=void 0===u?"Log In":u,s=n.onOK,v=n.forgotLabel,p=void 0===v?"Forgot Password ?":v,g=n.onForgot,b=n.message,C=n.loading,y=e.useState(""),N=y[0],S=y[1],x=e.useState(""),k=x[0],E=x[1];function P(){return N&&N.length>0&&k&&k.length>0}function O(e){s&&P()&&s(N,e||k)}function w(e){return h(m,null,e)}return h("div",{className:"login-box"},h("header",null,t?h("img",{src:t}):"",h("div",{className:"title"},h(m,null,o))),h("main",null,h(R,{label:w(r),value:N,onChange:function(e,n){S(n)},onEnter:O,outlined:!0}),h(R,{label:w(l),value:k,onChange:function(e,n){E(n)},onEnter:O,type:"password",outlined:!0})),h("footer",null,g?h(f,{label:w(p),action:function(){g&&g(N)},disabled:!(N&&N.length>0)}):null,C?h("div",{className:"load-box"},h(d,{icon:"refresh"})):h(f,{label:w(c),action:O,disabled:!P(),raised:!0}),b?h("div",{className:"message"},h(m,null,b)):null))},exports.Menu=E,exports.MenuIcon=P,exports.MenuItem=O,exports.MenuSeparator=function(e){return h("li",null,"menuSeparator")},exports.Page=V,exports.PageContext=H,exports.PageProvider=J,exports.Property=function(e){var n=e.value;return h("div",{className:"property"},h("div",{className:"property-name"},e.name),h("div",{className:"property-value"},n))},exports.RadioButton=function(e){var n=e.id,t=e.name,o=e.placeholder,i=e.value,r=e.onChange,a=h(m,null,e.label);return h("div",{className:"radio"},h("input",{id:n,name:t,type:"radio",placeholder:o,value:i,onClick:function(e){r&&r(n,e.target.value)}}),h("span",{class:"checkmark"}),h("label",{htmlFor:n},a))},exports.ResetPasswordBox=function(n){var t=n.logo,o=n.title,i=n.children,r=n.onOK,a=n.onClose,l=e.useState({}),u=l[0],c=l[1],s=e.useState(),d=s[0],v=s[1];function p(){return u.password1&&u.password2}function g(e,n){var t,o=Object.assign({},u,((t={})[e]=n,t));c(o)}function b(){r&&p()&&(u.password1===u.password2?(v(null),r(u)):v("New Password and Confirm New Password do not match"))}return h("div",{className:"reset-password-box"},h("header",null,t?h("img",{src:t}):null,o?h("div",{className:"title"},h(m,null,o)):null,i),h("main",null,h(m,{use:"headline6"},"Change Password"),h(R,{id:"password1",outlined:!0,icon:"lock",type:"password",label:"New Password",lapse:100,onChange:g,onEnter:b}),h(R,{id:"password2",outlined:!0,icon:"lock",type:"password",label:"Confirm New Password",lapse:100,onChange:g,onEnter:b}),d?h("div",{className:"error"},d):null),h("footer",null,h(f,{label:"Close",action:function(){a&&a()}}),h(f,{label:"OK",raised:!0,disabled:!p(),action:b})))},exports.Section=function(n){var t=n.icon,o=n.title,i=void 0===o?"":o,r=n.canCollapse,a=void 0===r||r,l=n.open,u=void 0!==l&&l,c=n.actions,s=n.children,f=n.className,v=e.useState(u),m=v[0],p=v[1];return e.useEffect(function(){p(u)},[u]),h("section",{className:"section2 "+f},h(C,{icon:{icon:t},title:i},c,a?h(d,{icon:"expand_more",onIcon:"expand_less",clickable:!0,action:function(){p(!u)}}):""),m?h("main",null,s):"")},exports.Session=s,exports.Site=function(e){var n=e.logo,t=e.title,o=e.toolbar,i=e.children,r=e.init,a=e.min;return h(W,{siteLang:e.lang,siteDictionary:e.dictionary},h("div",{className:"site6"},h(X,{icon:e.icon}),h(Q,null,o),h($,{logo:n,title:t,min:a},i),h(ee,{init:r},i,h(V,{id:"EMPTY"},"EMPTY")),h(Z,null),h(oe,null),h(ne,null),h(te,null)))},exports.SiteContext=v,exports.SiteProvider=W,exports.Stack=D,exports.TYPES=re,exports.Tab=A,exports.TabbedContentEditor=ve,exports.Tabs=j,exports.Text=m,exports.TextField=R,exports.TokenField=z,exports.Tree=M,exports.TreeItem=G,exports.TreeNode=Y,exports.TreededContentEditor=me,exports.UploadArea=De,exports.UploadDialog=function(n){var t=n.label,o=n.target,i=n.accept,r=n.onSuccess,a=n.onClose,l=n.onActionClose,u=void 0===l||l,c=e.useContext(v),s=e.useState(),d=s[0],p=s[1],g=e.useState([])[0];function b(e){"CLOSE"!==e&&!0!==u||(c.closeDialog(),a())}var C=h(e.Fragment,null,h(f,{label:"CLOSE",action:function(){return b("CLOSE")}})),y=h(m,{use:"headline6"},t);return h(ie,{title:y,open:!0,onAction:b,actions:C},d?h(_e,{file:d}):h(Ie,{label:t,accept:i,target:o,onComplete:function(e){p(e[0]),r&&r(e[0])}}),g.map(function(e){return h(m,{use:"overline",tag:"div",className:"error"},e)}))},exports.UploadFile=_e,exports.Uploader=Ie,exports.Viewer=function(n){var t=n.title,o=n.src,i=n.info,r=n.actions,a=void 0===r?[]:r,l=n.tools,u=void 0!==l&&l,c=n.onClose,s=e.useState(!1),f=s[0],v=s[1];function p(){v(!f)}var g=h(m,{use:"headline6"},t);return h("div",{className:"viewer"},h(C,{icon:{icon:"close",clickable:!0,action:c},title:g},f?"":h(d,{icon:"info",clickable:!0,action:p}),a),h("main",null,h("div",{className:"resizer"},h("picture",null,h("img",{src:o})))),h("aside",{className:f?"open":""},h(C,{title:"Detalles"},h(d,{icon:"close",clickable:!0,action:p})),h("main",null,i)),u?h("footer",null,h(d,{clickable:!0,icon:"zoom_out"}),h(d,{clickable:!0,icon:"zoom_out_map"}),h(d,{clickable:!0,icon:"zoom_in"})):null)},exports.isFunction=function(e){return e&&("[object Function]"===Object.prototype.toString.call(e)||"function"==typeof e||e instanceof Function)};
+require('material-design-icons-iconfont/dist/material-design-icons.css');
+var React = require('react');
+var equal = require('deep-equal');
+var ResumableJS = require('resumablejs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
+var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(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__default["default"].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__default["default"].createElement("button", {
+    className: "btn " + style,
+    onClick: click
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small"
+  }) : null, /*#__PURE__*/React__default["default"].createElement("span", null, label));
+};
+
+/**
+ * Site Context
+ */
+
+var SiteContext = React__default["default"].createContext({});
+
+/**
+ * Text
+ */
+
+var Text = function Text(_ref) {
+  var children = _ref.children;
+  var site = React.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__default["default"].createElement("span", null, text) : '';
+  }
+
+  return children ? /*#__PURE__*/React__default["default"].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__default["default"].createElement(Text, null, label);
+  console.log(label, value);
+  return value === true ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "checkbox",
+    key: id + "1"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    id: id,
+    type: "checkbox",
+    placeholder: placeholder,
+    checked: true,
+    value: value,
+    onChange: change
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    "class": "checkmark"
+  }), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id
+  }, labelTxt)) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "checkbox",
+    key: id + "0"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    id: id,
+    type: "checkbox",
+    placeholder: placeholder,
+    value: value,
+    onChange: change
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    "class": "checkmark"
+  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "chip " + style,
+    onClick: select
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small"
+  }) : null, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Text, null, label)), action ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "meta"
+  }, action) : null);
+};
+/**
+ * Chips
+ */
+
+var Chips = function Chips(props) {
+  var children = props.children;
+  return /*#__PURE__*/React__default["default"].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 = React.useState([]),
+      fields = _useState[0],
+      setFields = _useState[1];
+
+  var isEmpty = function isEmpty(value) {
+    return value === void 0 || value === null || value === '';
+  };
+
+  React.useEffect(function () {
+    var initFields = React__default["default"].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);
+  }, []);
+  React.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__default["default"].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__default["default"].cloneElement(child, {
+      onChange: changeField,
+      outlined: !!outlined
+    });
+    var columnLayout = {
+      gridColumn: "span " + span
+    };
+    return /*#__PURE__*/React__default["default"].createElement(FieldWrapper, {
+      style: columnLayout
+    }, field);
+  });
+  var gridLayout = {
+    gridTemplateColumns: "repeat(" + columns + ", 1fr)"
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, title ? /*#__PURE__*/React__default["default"].createElement("header", {
+    className: "form-header"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, title)) : '', /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].createElement(Icon, {
+    icon: props.icon,
+    clickable: props.clickable,
+    action: props.action
+  }) : '';
+  icon = props.iconSrc ? /*#__PURE__*/React__default["default"].createElement("img", {
+    className: "header-icon",
+    src: props.iconSrc
+  }) : icon;
+  var style = props.img ? {
+    backgroundImage: "url(" + props.img + ")"
+  } : {};
+  var title = /*#__PURE__*/React__default["default"].createElement(Text, null, props.title);
+  return /*#__PURE__*/React__default["default"].createElement("header", {
+    className: "header " + caption + " " + prominent + " " + dense + " " + theme + " " + props.className,
+    style: style
+  }, icon, props.title ? /*#__PURE__*/React__default["default"].createElement("label", null, title) : null, /*#__PURE__*/React__default["default"].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__default["default"].createElement(GroupedList, _extends({}, props, {
+    onSelect: select
+  })) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "list"
+  }, /*#__PURE__*/React__default["default"].createElement("ul", null, items.map(function (item) {
+    return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "list"
+  }, groups.map(function (group) {
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: group.name
+    }, /*#__PURE__*/React__default["default"].createElement("header", {
+      key: group.name + "-header"
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, group.name)), /*#__PURE__*/React__default["default"].createElement("ul", {
+      key: group.name + "-ul"
+    }, group.items.map(function (item) {
+      return /*#__PURE__*/React__default["default"].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__default["default"].createElement("li", {
+    id: id,
+    onClick: select
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small"
+  }) : null, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "primary-line"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, line1)), line2 ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "secondary-line"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, line2)) : null), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "meta"
+  }, meta) : null);
+};
+
+/**
+ * Page Context
+ */
+
+var MenuContext = React__default["default"].createContext({});
+/** 
+ * Menu 
+ **/
+
+var Menu = function Menu(props) {
+  var children = props.children;
+  return /*#__PURE__*/React__default["default"].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 = React.useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  function toggle() {
+    setOpen(!open);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(MenuContext.Provider, {
+    value: [open, setOpen]
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "menu-icon"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    clickable: true,
+    action: toggle
+  }), open ? /*#__PURE__*/React__default["default"].createElement("menu", {
+    className: "" + align
+  }, children) : null, open ? /*#__PURE__*/React__default["default"].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 = React.useContext(MenuContext),
+      setOpen = _useContext[1];
+
+  function select() {
+    if (onSelect) onSelect();
+    setOpen(false);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "menu-item",
+    onClick: select
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon
+  }) : null, /*#__PURE__*/React__default["default"].createElement("label", null, label), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "meta"
+  }, meta) : null);
+};
+/**
+ * Menu Separator
+ */
+
+var MenuSeparator = function MenuSeparator(props) {
+  return /*#__PURE__*/React__default["default"].createElement("li", null, "menuSeparator");
+};
+
+/**
+ * Circular Progress
+ */
+
+var CircularProgress = function CircularProgress(props) {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "circular-progress"
+  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "linear-progress"
+  }, /*#__PURE__*/React__default["default"].createElement("progress", {
+    value: progress,
+    max: max
+  }));
+};
+
+/**
+ * Property
+ */
+
+var Property = function Property(props) {
+  var name = props.name,
+      value = props.value;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "property"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "property-name"
+  }, name), /*#__PURE__*/React__default["default"].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__default["default"].createElement(Text, null, label);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "radio"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    id: id,
+    name: name,
+    type: "radio",
+    placeholder: placeholder,
+    value: value,
+    onClick: change
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    "class": "checkmark"
+  }), /*#__PURE__*/React__default["default"].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 = React.useState(open),
+      isOpen = _useState[0],
+      setOpen = _useState[1];
+
+  React.useEffect(function () {
+    setOpen(open);
+  }, [open]);
+
+  var toggle = function toggle() {
+    setOpen(!open);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "section2 " + className
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    icon: {
+      icon: icon
+    },
+    title: title
+  }, actions, canCollapse ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "expand_more",
+    onIcon: "expand_less",
+    clickable: true,
+    action: toggle
+  }) : ''), isOpen ? /*#__PURE__*/React__default["default"].createElement("main", null, children) : '');
+};
+
+/**
+ * Tabs
+ */
+
+var Tabs = function Tabs(props) {
+  var children = props.children,
+      selected = props.selected,
+      onChange = props.onChange;
+  var tabs = React__default["default"].Children.map(children, function (child, index) {
+    function select() {
+      if (onChange) onChange(index);
+    }
+
+    return React__default["default"].cloneElement(child, {
+      selected: index === selected,
+      onSelect: select
+    });
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "tabs"
+  }, tabs, /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].Children.toArray(props.children).filter(function (child, index) {
+    return index === selected;
+  })[0];
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, child);
+};
+
+/**
+ * Text Field
+ */
+
+var TextField = function TextField(props) {
+  var site = React.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__default["default"].createElement(Text, null, label);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "" + style,
+    onClick: onClick
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    id: id,
+    type: type,
+    placeholder: placeholder,
+    value: value,
+    required: true,
+    onChange: change,
+    onKeyDown: onKeyPress,
+    onFocus: focus,
+    readOnly: readOnly
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "bar"
+  }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+};
+/**
+ * Dropdown
+ */
+
+var DropDown = function DropDown(props) {
+  var site = React.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 = React.useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = React.useState(),
+      label = _useState2[0],
+      setLabel = _useState2[1];
+
+  React.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__default["default"].createElement("div", {
+    className: "dropdown"
+  }, /*#__PURE__*/React__default["default"].createElement(TextField, _extends({}, props, {
+    onClick: toggle,
+    value: label
+  })), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "expand_more",
+    clickable: true,
+    size: "small",
+    action: toggle
+  }), open == true ? /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+    onClick: select
+  }, Array.isArray(options) ? options.map(function (option) {
+    return /*#__PURE__*/React__default["default"].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 = React.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__default["default"].createElement("div", {
+    className: "datatable8 " + style
+  }, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (_ref) {
+    var label = _ref.label,
+        sortable = _ref.sortable;
+    return /*#__PURE__*/React__default["default"].createElement("th", null, /*#__PURE__*/React__default["default"].createElement(Text, null, label), sortable ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "arrow_up",
+      size: "small",
+      clickable: true
+    }) : null);
+  }))), /*#__PURE__*/React__default["default"].createElement("tbody", null, multiSort(rows, sortDir).map(function (row) {
+    return /*#__PURE__*/React__default["default"].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 = React.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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("tr", {
+    onClick: function onClick(ev) {
+      return onSelect(row, ev);
+    }
+  }, columns.map(function (column) {
+    return /*#__PURE__*/React__default["default"].createElement(DataTableCell, {
+      row: row,
+      column: column,
+      cell: row[column.id],
+      editable: editable
+    });
+  }), row.info ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: infoIcon,
+    clickable: true,
+    action: function action() {
+      return toggleInfo(!isInfoOpen);
+    }
+  }) : null), row.info && isInfoOpen ? /*#__PURE__*/React__default["default"].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__default["default"].createElement(Icon, {
+            icon: cell
+          });
+
+        case "BOOLEAN":
+          return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: disabled
+          });
+
+        case "Boolean":
+          return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: disabled
+          });
+
+        case "SELECTION":
+          return /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(TextField, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+
+        case "String":
+          return /*#__PURE__*/React__default["default"].createElement(StringCellEditor, {
+            id: id,
+            value: cell,
+            options: options,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+
+        case "Number":
+          return /*#__PURE__*/React__default["default"].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__default["default"].createElement(Icon, {
+            icon: cell
+          });
+
+        case "Boolean":
+          return /*#__PURE__*/React__default["default"].createElement(BooleanCellViewer, {
+            id: id,
+            value: cell
+          });
+
+        case "String":
+          return /*#__PURE__*/React__default["default"].createElement(StringCellViewer, {
+            id: id,
+            value: cell,
+            options: options
+          });
+
+        default:
+          return cell;
+      }
+    }
+  };
+
+  return /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("div", {
+    className: "field-editor string-editor"
+  }, options ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
+    outlined: true,
+    id: id,
+    value: value,
+    onChange: change,
+    options: options
+  }) : /*#__PURE__*/React__default["default"].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 = React.useRef(false);
+
+  var _useState = React.useState(),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = React.useState(init),
+      tokens = _useState2[0],
+      setTokens = _useState2[1];
+
+  React.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__default["default"].createElement("div", {
+    className: "tokenField"
+  }, /*#__PURE__*/React__default["default"].createElement("label", null, label), tokens.map(function (text, index) {
+    return /*#__PURE__*/React__default["default"].createElement(Token, {
+      text: text,
+      onDelete: function onDelete() {
+        return remove(index);
+      }
+    });
+  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "token"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "caption",
+    tag: "div"
+  }, text), /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].createElement("details", {
+    className: "tree-node",
+    open: open
+  }, /*#__PURE__*/React__default["default"].createElement("summary", {
+    className: "tree-item"
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small",
+    small: true
+  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "label"
+  }, label), /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "tree-item final",
+    onClick: select
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small",
+    small: true
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "label"
+  }, label), /*#__PURE__*/React__default["default"].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 = React.useState(''),
+      user = _useState[0],
+      setUser = _useState[1];
+
+  var _useState2 = React.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__default["default"].createElement(Text, null, txt);
+  }
+
+  function changeUser(id, value) {
+    setUser(value);
+  }
+
+  function changePassword(id, value) {
+    setPassword(value);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "login-box"
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, logo ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: logo
+  }) : '', /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, title))), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+    label: tx(userLabel),
+    value: user,
+    onChange: changeUser,
+    onEnter: ok,
+    outlined: true
+  }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+    label: tx(passwordLabel),
+    value: password,
+    onChange: changePassword,
+    onEnter: ok,
+    type: "password",
+    outlined: true
+  })), /*#__PURE__*/React__default["default"].createElement("footer", null, onForgot ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: tx(forgotLabel),
+    action: forgot,
+    disabled: !canForgot()
+  }) : null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "load-box"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "refresh"
+  })) : /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: tx(loginLabel),
+    action: ok,
+    disabled: !canOK(),
+    raised: true
+  }), message ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "message"
+  }, /*#__PURE__*/React__default["default"].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 = React.useState({}),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = React.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__default["default"].createElement("div", {
+    className: "reset-password-box"
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, logo ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: logo
+  }) : null, title ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, title)) : null, children), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, "Change Password"), /*#__PURE__*/React__default["default"].createElement(TextField, {
+    id: "password1",
+    outlined: true,
+    icon: "lock",
+    type: "password",
+    label: "New Password",
+    lapse: 100,
+    onChange: changeField,
+    onEnter: ok
+  }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+    id: "password2",
+    outlined: true,
+    icon: "lock",
+    type: "password",
+    label: "Confirm New Password",
+    lapse: 100,
+    onChange: changeField,
+    onEnter: ok
+  }), error ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "error"
+  }, error) : null), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: "Close",
+    action: close
+  }), /*#__PURE__*/React__default["default"].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 = React.useState(false),
+      showDetails = _useState[0],
+      setShowDetails = _useState[1];
+
+  function toggleDetails() {
+    setShowDetails(!showDetails);
+  }
+
+  var headerTitle = /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, title);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "viewer"
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    icon: {
+      icon: 'close',
+      clickable: true,
+      action: onClose
+    },
+    title: headerTitle
+  }, showDetails ? '' : /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "info",
+    clickable: true,
+    action: toggleDetails
+  }), actions), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "resizer"
+  }, /*#__PURE__*/React__default["default"].createElement("picture", null, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: src
+  })))), /*#__PURE__*/React__default["default"].createElement("aside", {
+    className: "" + (showDetails ? 'open' : '')
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    title: "Detalles"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: toggleDetails
+  })), /*#__PURE__*/React__default["default"].createElement("main", null, info)), tools ? /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    clickable: true,
+    icon: "zoom_out"
+  }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    clickable: true,
+    icon: "zoom_out_map"
+  }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    clickable: true,
+    icon: "zoom_in"
+  })) : null);
+};
+
+/**
+ * Kanban
+ */
+
+var Kanban = function Kanban(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default["default"].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 = React.useState(minified),
+      min = _useState[0],
+      setMin = _useState[1];
+
+  function toggle() {
+    setMin(!min);
+  }
+
+  return min ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kanban-column " + id + " min"
+  }, /*#__PURE__*/React__default["default"].createElement("main", null, title), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "toggle_off",
+    onIcon: "toggle_on",
+    clickable: true,
+    action: toggle
+  }))) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kanban-column " + id + " " + (disabled ? 'disabled' : '')
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, title), /*#__PURE__*/React__default["default"].createElement(Text, {
+    className: "secondary-text",
+    use: "body2"
+  }, subtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "badge"
+  }, badge)), /*#__PURE__*/React__default["default"].createElement("main", null, children), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "kanban-card " + color
+  }, children);
+};
+
+/**
+ * Page Context
+ */
+
+var PageContext = React__default["default"].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 = React.useState(context),
+      pageCtx = _useState[0],
+      setPageCtx = _useState[1];
+
+  return /*#__PURE__*/React__default["default"].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__default["default"].createElement(PageProvider, {
+    context: context
+  }, /*#__PURE__*/React__default["default"].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 = React.useState(siteLang),
+      lang = _useState[0],
+      setLang = _useState[1];
+
+  var _useState2 = React.useState(siteDictionary),
+      dictionary = _useState2[0],
+      setDictionary = _useState2[1];
+
+  var _useState3 = React.useState('max'),
+      sideNav = _useState3[0],
+      setSideNav = _useState3[1];
+
+  var _useState4 = React.useState(false),
+      showNav = _useState4[0],
+      setShowNav = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      info = _useState5[0],
+      setInfo = _useState5[1];
+
+  var _useState6 = React.useState(false),
+      console = _useState6[0],
+      setConsole = _useState6[1];
+
+  var _useState7 = React.useState(),
+      page = _useState7[0],
+      setPage = _useState7[1];
+
+  var _useState8 = React.useState(),
+      dialog = _useState8[0],
+      setDialog = _useState8[1];
+
+  var _useState9 = React.useState(),
+      preview = _useState9[0],
+      setPreview = _useState9[1];
+
+  var _useState10 = React.useState(),
+      breadcrumb = _useState10[0],
+      setBreadcrumb = _useState10[1];
+
+  var _useState11 = React.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__default["default"].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__default["default"].createElement(SiteProvider, {
+    siteLang: lang,
+    siteDictionary: dictionary
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "site6"
+  }, /*#__PURE__*/React__default["default"].createElement(SiteHeader, {
+    icon: icon
+  }), /*#__PURE__*/React__default["default"].createElement(SiteToolBar, null, toolbar), /*#__PURE__*/React__default["default"].createElement(SiteMenu, {
+    logo: logo,
+    title: title,
+    min: min
+  }, children), /*#__PURE__*/React__default["default"].createElement(SitePage, {
+    init: init
+  }, children, /*#__PURE__*/React__default["default"].createElement(Page, {
+    id: "EMPTY"
+  }, "EMPTY")), /*#__PURE__*/React__default["default"].createElement(SiteAside, null), /*#__PURE__*/React__default["default"].createElement(SiteConsole, null), /*#__PURE__*/React__default["default"].createElement(SiteDialog, null), /*#__PURE__*/React__default["default"].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__default["default"].createElement(Header, {
+    icon: icon,
+    title: title
+  });
+};
+/**
+ * Site ToolBar
+ */
+
+
+var SiteToolBar = function SiteToolBar(_ref3) {
+  var children = _ref3.children;
+  React.useContext(SiteContext);
+  return /*#__PURE__*/React__default["default"].createElement("nav", null, children);
+};
+/**
+ * Site Aside
+ */
+
+
+var SiteAside = function SiteAside() {
+  var context = React.useContext(SiteContext);
+  return context.info ? /*#__PURE__*/React__default["default"].createElement("aside", null, context.info) : '';
+};
+/**
+ * SiteMenu
+ */
+
+
+var SiteMenu = function SiteMenu(_ref4) {
+  var children = _ref4.children,
+      min = _ref4.min;
+  var context = React.useContext(SiteContext);
+  var showNav = context.showNav;
+  React.useEffect(function () {
+    if (min) context.setSideNav('min');
+  }, []);
+
+  var _goto = function _goto(id) {
+    context.setShowNav(false);
+    context["goto"](id);
+  };
+
+  var sections = children ? React.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__default["default"].createElement("menu", {
+    className: "min " + (showNav ? 'show' : '')
+  }, /*#__PURE__*/React__default["default"].createElement("main", null, Object.keys(sections).map(function (title) {
+    return /*#__PURE__*/React__default["default"].createElement(React.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__default["default"].createElement(Icon, {
+        key: id,
+        icon: icon,
+        clickable: true,
+        checked: id === context.page,
+        action: function action() {
+          return _goto(id);
+        }
+      });
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "section-divider"
+    }));
+  })));
+};
+/**
+ * SitePage
+ */
+
+
+var SitePage = function SitePage(_ref6) {
+  var children = _ref6.children,
+      init = _ref6.init;
+  var context = React.useContext(SiteContext);
+  var page = context.page;
+  React.useEffect(function () {
+    if (init) {
+      context["goto"](init);
+    } else {
+      context["goto"]("EMPTY");
+    }
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("main", null, React__default["default"].Children.toArray(children).filter(function (child) {
+    return child.props ? child.props.id === page : false;
+  }));
+};
+/**
+ * Site Dialog
+ */
+
+
+var SiteDialog = function SiteDialog() {
+  var context = React.useContext(SiteContext);
+  return context.dialog ? context.dialog : '';
+};
+/**
+ * Site Preview
+ */
+
+
+var SitePreview = function SitePreview() {
+  var context = React.useContext(SiteContext);
+  return context.preview ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "site-preview"
+  }, context.preview) : '';
+};
+/**
+ * Site Console
+ */
+
+
+var SiteConsole = function SiteConsole() {
+  var context = React.useContext(SiteContext);
+  return context.console ? /*#__PURE__*/React__default["default"].createElement("footer", {
+    className: "site-console"
+  }, /*#__PURE__*/React__default["default"].createElement(Header, null, /*#__PURE__*/React__default["default"].createElement(Tabs, null, /*#__PURE__*/React__default["default"].createElement(Tab, {
+    label: "Console"
+  }))), /*#__PURE__*/React__default["default"].createElement("main", null)) : '';
+};
+
+/**
+ * Dialog
+ * 
+ * <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+ */
+
+var Dialog = function Dialog(props) {
+  var site = React.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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "overlay"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "dialog",
+    onClick: close
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "dialog-panel",
+    onClick: prevent
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, icon ? /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+    icon: icon
+  }) : null, /*#__PURE__*/React__default["default"].createElement(Text, null, title)), /*#__PURE__*/React__default["default"].createElement("main", null, children), /*#__PURE__*/React__default["default"].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__default["default"].createElement(Form, {
+    className: "content-form",
+    columns: columns,
+    outlined: true,
+    onChange: onChange
+  }, fields.map(function (field) {
+    return /*#__PURE__*/React__default["default"].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__default["default"].createElement(CheckBox, _extends({
+        key: props.id
+      }, props));
+
+    case TYPES.NUMBER:
+      return /*#__PURE__*/React__default["default"].createElement(NumberField, _extends({
+        key: props.id
+      }, props));
+
+    default:
+      return /*#__PURE__*/React__default["default"].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__default["default"].createElement(DropDown, {
+    key: id,
+    id: id,
+    label: label,
+    value: value,
+    onChange: onChange,
+    options: buildOptions(),
+    outlined: outlined
+  });
+  return /*#__PURE__*/React__default["default"].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__default["default"].createElement(DropDown, {
+    key: id,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change,
+    options: options,
+    outlined: outlined
+  });
+  return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "content-editor"
+  }, sections.map(function (section) {
+    var title = section.title,
+        fields = section.fields;
+    return /*#__PURE__*/React__default["default"].createElement("section", {
+      key: title
+    }, /*#__PURE__*/React__default["default"].createElement("header", null, title), /*#__PURE__*/React__default["default"].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__default["default"].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 = React.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__default["default"].createElement("div", {
+    className: "content-editor tabbed"
+  }, /*#__PURE__*/React__default["default"].createElement(Tabs, {
+    selected: tab,
+    onChange: changeTab
+  }, sections.map(function (section) {
+    return /*#__PURE__*/React__default["default"].createElement(Tab, {
+      label: section.title
+    });
+  })), /*#__PURE__*/React__default["default"].createElement(Stack, {
+    selected: tab
+  }, sections.map(function (section) {
+    var title = section.title,
+        fields = section.fields;
+    return /*#__PURE__*/React__default["default"].createElement("section", {
+      key: title
+    }, /*#__PURE__*/React__default["default"].createElement("nav", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("main", null, grouped ? group(section).map(function (group) {
+      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, group.name.length > 0 ? /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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 = React.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__default["default"].createElement("div", {
+    className: "content-editor treeded-editor"
+  }, /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "caption"
+  }, "Tree Editor")), /*#__PURE__*/React__default["default"].createElement(Tree, null, nodes.map(function (node, index) {
+    return /*#__PURE__*/React__default["default"].createElement(TreeNode, {
+      icon: "folder",
+      label: node.label,
+      actions: [/*#__PURE__*/React__default["default"].createElement(Icon, {
+        small: true,
+        icon: "add",
+        clickable: true,
+        action: add
+      })]
+    }, value[node.id] ? value[node.id].map(function (field, index) {
+      return /*#__PURE__*/React__default["default"].createElement(TreeItem, {
+        icon: field.icon || "description",
+        label: field.name || field.label,
+        onSelect: function onSelect() {
+          return select(index, field, node);
+        }
+      });
+    }) : null);
+  }))), /*#__PURE__*/React__default["default"].createElement("div", null, selected ? /*#__PURE__*/React__default["default"].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__default["default"].createElement(EntityEditor, {
+          field: field,
+          value: value1,
+          onChange: change
+        });
+
+      case TYPES.STRING:
+        return /*#__PURE__*/React__default["default"].createElement(StringEditor, {
+          outlined: outlined,
+          field: field,
+          value: value1,
+          onChange: change,
+          content: content
+        });
+
+      case TYPES.BOOLEAN:
+        return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+          outlined: true,
+          id: id,
+          label: label,
+          value: value1,
+          onChange: change
+        });
+
+      case TYPES.DATE:
+        return /*#__PURE__*/React__default["default"].createElement(TextField, {
+          outlined: outlined,
+          id: id,
+          type: "date",
+          label: label,
+          value: value1,
+          onChange: change,
+          disabled: editable
+        });
+
+      case TYPES.NUMBER:
+        return /*#__PURE__*/React__default["default"].createElement(NumberEditor, {
+          outlined: outlined,
+          field: field,
+          value: value1,
+          onChange: change
+        });
+
+      case TYPES.ARRAY:
+        return item === TYPES.STRING ? options ? /*#__PURE__*/React__default["default"].createElement(MultiSelectionEditor, {
+          content: content,
+          field: field,
+          value: value1,
+          onChange: change
+        }) : /*#__PURE__*/React__default["default"].createElement(ListEditor, {
+          field: field,
+          value: value1,
+          onChange: change
+        }) : /*#__PURE__*/React__default["default"].createElement(CollectionEditor$1, {
+          field: field,
+          value: value1,
+          onChange: change
+        });
+
+      default:
+        return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "entity-editor"
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "caption"
+  }, label)), /*#__PURE__*/React__default["default"].createElement("main", null, fields.map(function (field) {
+    return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "field-editor string-editor"
+  }, editable ? options ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
+    outlined: outlined,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change,
+    options: buildOptions()
+  }) : /*#__PURE__*/React__default["default"].createElement(TextField, {
+    outlined: outlined,
+    id: id,
+    label: label,
+    value: value,
+    onChange: change
+  }) : /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "field-editor number-editor"
+  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "list-editor"
+  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    className: "multiselection-editor"
+  }, /*#__PURE__*/React__default["default"].createElement("label", null, label), buildOptions().map(function (option) {
+    var checked = value.includes(option.value);
+    return /*#__PURE__*/React__default["default"].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__default["default"].createElement(Icon, {
+        icon: "delete",
+        clickable: true,
+        action: function action() {
+          return remove(index);
+        },
+        small: true
+      })]
+    });
+  });
+  var table = {
+    columns: columns,
+    rows: rows
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "collection-editor"
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "caption"
+  }, label), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "actions"
+  }, Feeder ? /*#__PURE__*/React__default["default"].createElement(Feeder, {
+    onAdd: add
+  }) : null)), Renderer ? /*#__PURE__*/React__default["default"].createElement(Renderer, {
+    field: field,
+    value: value,
+    onRemove: remove,
+    onChange: onChange
+  }) : /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
+    editable: editable
+  })), /*#__PURE__*/React__default["default"].createElement("footer", null, Adder ? /*#__PURE__*/React__default["default"].createElement(CollectionAdder, {
+    item: item,
+    onAdd: add
+  }) : null));
+};
+/**
+ * Collection Adder
+ */
+
+var CollectionAdder = function CollectionAdder(_ref11) {
+  var item = _ref11.item,
+      onAdd = _ref11.onAdd;
+
+  var _useState3 = React.useState(false),
+      edit = _useState3[0],
+      setEdit = _useState3[1];
+
+  var _useState4 = React.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__default["default"].createElement(Icon, {
+      icon: "done",
+      clickable: true,
+      action: save
+    }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      action: toggle
+    })]
+  }];
+  rows[0] = Object.assign({}, form, rows[0]);
+  var table = {
+    columns: columns,
+    rows: rows
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "collection-adder"
+  }, edit ? /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
+    editable: true
+  })) : /*#__PURE__*/React__default["default"].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 = React.useContext(SiteContext);
+
+  var _useState = React.useState({}),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = React.useState(false),
+      isValid = _useState2[0],
+      setValid = _useState2[1];
+
+  var _useState3 = React.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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: "OK",
+    action: function action() {
+      return onAction("OK");
+    },
+    disabled: !isValid,
+    raised: true
+  }));
+  var title = /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, label);
+  var content = new Content(type, form);
+  return /*#__PURE__*/React__default["default"].createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, /*#__PURE__*/React__default["default"].createElement(ContentForm, {
+    content: content,
+    filter: function filter(field) {
+      return isRequired(field) || isOptional(field);
+    },
+    onChange: change
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React__default["default"].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 = React.useContext(SiteContext);
+
+  var _useState = React.useState(value),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = React.useState(false),
+      isValid = _useState2[0],
+      setValid = _useState2[1];
+
+  var _useState3 = React.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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "expand"
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: "OK",
+    action: function action() {
+      return onAction("OK");
+    },
+    disabled: !isValid,
+    raised: true
+  }));
+  var title = /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, label);
+  var content = new Content(type, form);
+  return /*#__PURE__*/React__default["default"].createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+    content: content,
+    onChange: change,
+    filter: filter
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React__default["default"].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 = React.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 = React.useContext(PageContext),
+      pageContext = _useContext[0],
+      setPageContext = _useContext[1];
+
+  var context = CollectionContext(url, field);
+  React.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__default["default"].createElement(EditContentDialog, {
+      label: "Crear " + name,
+      type: schema,
+      onOK: onOK
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    className: "collection-page",
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+  }, /*#__PURE__*/React__default["default"].createElement(Button, {
+    icon: "add",
+    label: "Add",
+    action: add
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+    icon: "refresh",
+    label: "Reload",
+    action: reload
+  }), actions), /*#__PURE__*/React__default["default"].createElement("menu", {
+    className: "collection-page"
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Lista de ", name)
+  }), levels ? /*#__PURE__*/React__default["default"].createElement(CollectionTree, {
+    levels: levels
+  }) : /*#__PURE__*/React__default["default"].createElement(CollectionList, {
+    groupBy: groupBy
+  })), /*#__PURE__*/React__default["default"].createElement("main", {
+    key: id,
+    className: "collection-page"
+  }, /*#__PURE__*/React__default["default"].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 = React.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__default["default"].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 = React.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__default["default"].createElement(TreeNode, {
+        key: node.name,
+        icon: null,
+        label: title,
+        open: true
+      }, node.nodes ? renderNodes(node.nodes) : node.items.map(function (item) {
+        return /*#__PURE__*/React__default["default"].createElement(TreeItem, {
+          key: item.id,
+          id: item.id,
+          label: item.name,
+          onSelect: select
+        }, "item");
+      }));
+    });
+  }
+
+  var nodes = generateNodes(levels, all);
+  return /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].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 = React.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 = React.useRef(null);
+
+  var _useState = React.useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  React.useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  React.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__default["default"](form, selected);
+    return can;
+  }
+
+  function renderEditor() {
+    var content = new Content(schema, form);
+
+    switch (layout) {
+      case 'TABBED':
+        return /*#__PURE__*/React__default["default"].createElement(TabbedContentEditor, _extends({}, props, {
+          content: content,
+          onChange: change
+        }));
+
+      case 'TREEDED':
+        return /*#__PURE__*/React__default["default"].createElement(TreededContentEditor, _extends({}, props, {
+          content: content,
+          onChange: change
+        }));
+
+      default:
+        return /*#__PURE__*/React__default["default"].createElement(ContentEditor, _extends({}, props, {
+          content: content,
+          onChange: change
+        }));
+    }
+  }
+
+  return selected && form ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    icon: icon,
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, selected.name)
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: clear
+  }), /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+    align: "alignRight"
+  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+    label: "Eliminar",
+    onSelect: remove
+  }))), autosave === true ? null : /*#__PURE__*/React__default["default"].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 = React.useRef();
+
+  var _useState = React.useState(false),
+      drag = _useState[0],
+      setDrag = _useState[1];
+
+  React.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__default["default"].createElement("div", {
+    className: "upload-area6 " + dragging,
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave,
+    ref: areaElement
+  }, state === STATES.IDLE ? /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
+    resumable: props.resumable
+  }) : '', state === STATES.IDLE ? /*#__PURE__*/React__default["default"].createElement("label", null, label) : '', state === STATES.RUNNING ? /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
+    size: "xlarge"
+  }) : '', state === STATES.SUCCESS ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "done_all"
+  }) : '', state === STATES.ERROR ? /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "body1"
+  }, error) : '', props.children);
+};
+/**
+ * Component
+ */
+
+var UploadIcon = function UploadIcon(_ref) {
+  var resumable = _ref.resumable;
+  var iconElement = React.useRef();
+  React.useEffect(function () {
+    if (resumable && iconElement) resumable.assignBrowse(iconElement.current);
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "upload-icon",
+    ref: iconElement
+  }, /*#__PURE__*/React__default["default"].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 = React.useMemo(function () {
+    var config = {
+      target: target,
+      chunkSize: 1 * 1024 * 1024,
+      simultaneousUploads: 1,
+      testChunks: false,
+      throttleProgressCallbacks: 1,
+      fileType: accept
+    };
+    var resumable = new ResumableJS__default["default"](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 = React.useState(0),
+      setProgress = _useState[1];
+
+  var _useState2 = React.useState(STATES.IDLE),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = React.useState(),
+      error = _useState3[0],
+      setError = _useState3[1];
+
+  var _useState4 = React.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__default["default"].createElement("div", {
+    className: "uploader " + className
+  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(Icon, {
+    icon: "image",
+    className: "error"
+  }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "image"
+  });
+  return state !== STATES.IDLE ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "upload-file"
+  }, icon, /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "body1",
+    tag: "label"
+  }, file.fileName), state === STATES.RUNNING ? /*#__PURE__*/React__default["default"].createElement(LinearProgress, {
+    progress: progress
+  }) : '', state === STATES.RUNNING ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "close",
+    clickable: true
+  }) : '', state === STATES.SUCCESS ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "done"
+  }) : '', state === STATES.ERROR ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "error"
+  }) : ''), error ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "error"
+  }, /*#__PURE__*/React__default["default"].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 = React.useContext(SiteContext);
+
+  var _useState = React.useState(),
+      file = _useState[0],
+      setFile = _useState[1];
+
+  var _useState2 = React.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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }));
+  var title = /*#__PURE__*/React__default["default"].createElement(Text, {
+    use: "headline6"
+  }, label);
+  return /*#__PURE__*/React__default["default"].createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, file ? /*#__PURE__*/React__default["default"].createElement(UploadFile, {
+    file: file
+  }) : /*#__PURE__*/React__default["default"].createElement(Uploader, {
+    label: label,
+    accept: accept,
+    target: target,
+    onComplete: onComplete
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React__default["default"].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);
+};
+
+exports.Button = Button;
+exports.CheckBox = CheckBox;
+exports.Chip = Chip;
+exports.Chips = Chips;
+exports.CircularProgress = CircularProgress;
+exports.CollectionContext = CollectionContext;
+exports.CollectionEditor = CollectionEditor$1;
+exports.CollectionPage = CollectionPage;
+exports.Content = Content;
+exports.ContentEditor = ContentEditor;
+exports.ContentForm = ContentForm;
+exports.CreateContentDialog = CreateContentDialog;
+exports.DataTable = DataTable;
+exports.Dialog = Dialog;
+exports.DropDown = DropDown;
+exports.EditContentDialog = EditContentDialog;
+exports.FieldEditor = FieldEditor;
+exports.Form = Form;
+exports.HTTPClient = HTTPClient;
+exports.Header = Header;
+exports.Icon = Icon;
+exports.Kanban = Kanban;
+exports.KanbanCard = KanbanCard;
+exports.KanbanColumn = KanbanColumn;
+exports.LinearProgress = LinearProgress;
+exports.List = List;
+exports.ListEditor = ListEditor;
+exports.LoginBox = LoginBox;
+exports.Menu = Menu;
+exports.MenuIcon = MenuIcon;
+exports.MenuItem = MenuItem;
+exports.MenuSeparator = MenuSeparator;
+exports.Page = Page;
+exports.PageContext = PageContext;
+exports.PageProvider = PageProvider;
+exports.Property = Property;
+exports.RadioButton = RadioButton;
+exports.ResetPasswordBox = ResetPasswordBox;
+exports.Section = Section;
+exports.Session = Session;
+exports.Site = Site;
+exports.SiteContext = SiteContext;
+exports.SiteProvider = SiteProvider;
+exports.Stack = Stack;
+exports.TYPES = TYPES;
+exports.Tab = Tab;
+exports.TabbedContentEditor = TabbedContentEditor;
+exports.Tabs = Tabs;
+exports.Text = Text;
+exports.TextField = TextField;
+exports.TokenField = TokenField;
+exports.Tree = Tree;
+exports.TreeItem = TreeItem;
+exports.TreeNode = TreeNode;
+exports.TreededContentEditor = TreededContentEditor;
+exports.UploadArea = UploadArea;
+exports.UploadDialog = UploadDialog;
+exports.UploadFile = UploadFile;
+exports.Uploader = Uploader;
+exports.Viewer = Viewer;
+exports.isFunction = isFunction;
 //# sourceMappingURL=index.cjs.map