ywana-core8 0.0.272 → 0.0.275

package/dist/index.umd.js

@@ -1,15 +1,15 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('react-switch'), require('moment'), require('moment-range'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('deep-equal'), require('resumablejs')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'react-switch', 'moment', 'moment-range', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'deep-equal', 'resumablejs'], factory) :
-  (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, global.reactNotificationsComponent, null, global.deepEqual, global.resumablejs));
-})(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment, momentRange, reactNotificationsComponent, theme_css, equal, ResumableJS) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('react-switch'), require('moment'), require('moment-range'), require('resumablejs'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('deep-equal')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'react-switch', 'moment', 'moment-range', 'resumablejs', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'deep-equal'], factory) :
+  (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, global.resumablejs, global.reactNotificationsComponent, null, global.deepEqual));
+})(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment, momentRange, ResumableJS, reactNotificationsComponent, theme_css, equal) {
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var RSwitch__default = /*#__PURE__*/_interopDefaultLegacy(RSwitch);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-  var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
   var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
+  var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 
   function _catch$2(body, recover) {
     try {
@@ -172,7 +172,7 @@
    * HTML Button
    */
 
-  var Button$1 = function Button(_ref) {
+  var Button = function Button(_ref) {
     var label = _ref.label,
         icon = _ref.icon,
         action = _ref.action,
@@ -221,7 +221,7 @@
    * Text
    */
 
-  var Text$1 = function Text(_ref) {
+  var Text = function Text(_ref) {
     var format = _ref.format,
         children = _ref.children,
         className = _ref.className;
@@ -266,7 +266,7 @@
       if (onChange) onChange(id, value);
     }
 
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
     return value === true ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: "checkbox",
       key: id + "1"
@@ -324,7 +324,7 @@
     }, 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$1, null, label)), action ? /*#__PURE__*/React__default["default"].createElement("span", {
+    }) : 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);
   };
@@ -434,7 +434,7 @@
     };
     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$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
     }, title)) : '', /*#__PURE__*/React__default["default"].createElement("form", {
       className: "form-grid",
@@ -476,7 +476,7 @@
     var style = props.img ? {
       backgroundImage: "url(" + props.img + ")"
     } : {};
-    var title = /*#__PURE__*/React__default["default"].createElement(Text$1, null, props.title);
+    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
@@ -563,7 +563,7 @@
         key: group.name
       }, /*#__PURE__*/React__default["default"].createElement("header", {
         key: group.name + "-header"
-      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, group.name)), /*#__PURE__*/React__default["default"].createElement("ul", {
+      }, /*#__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, {
@@ -600,9 +600,9 @@
       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$1, null, line1)), line2 ? /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, line1)), line2 ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: "secondary-line"
-    }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, line2)) : null), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, line2)) : null), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: "meta"
     }, meta) : null);
   };
@@ -782,7 +782,7 @@
       if (onChange) onChange(id, value);
     }
 
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+    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", {
@@ -950,7 +950,7 @@
     var borderStyle = outlined ? "textfield-outlined" : "textfield";
     var labelStyle = label ? "" : "no-label";
     var style = labelStyle + " " + borderStyle + " textfield-" + type;
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "" + style,
       onClick: onClick
@@ -1024,7 +1024,7 @@
 
     var labelStyle = label ? "" : "no-label";
     var style = "textarea " + labelStyle + " textarea-" + type;
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "" + style,
       onClick: onClick
@@ -1478,7 +1478,7 @@
         colSpan: colspan
       }, id === "checked" ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
         onChange: checkAll
-      }) : /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      }) : /*#__PURE__*/React__default["default"].createElement(Text, {
         key: "th_" + id
       }, label), sortable ? /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "arrow_up",
@@ -1905,7 +1905,7 @@
         onDelete = _ref2.onDelete;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "token"
-    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "caption",
       tag: "div"
     }, text), /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -2007,14 +2007,21 @@
 
   var Tooltip = function Tooltip(props) {
     var _props$text = props.text,
-        text = _props$text === void 0 ? "..." : _props$text;
-    return /*#__PURE__*/React__default["default"].createElement(ReactTooltip, {
-      id: "filters",
-      effect: "solid",
+        text = _props$text === void 0 ? "..." : _props$text,
+        _props$top = props.top,
+        top = _props$top === void 0 ? "1rem" : _props$top,
+        _props$left = props.left,
+        left = _props$left === void 0 ? "1rem" : _props$left;
+    var style = {
+      top: top,
+      left: left
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "tooltip"
-    }, /*#__PURE__*/React__default["default"].createElement(Text, {
-      use: "body2"
-    }, text));
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "tooltip-text",
+      style: style
+    }, text), props.children);
   };
 
   /**
@@ -2085,7 +2092,7 @@
     }
 
     function tx(txt) {
-      return /*#__PURE__*/React__default["default"].createElement(Text$1, null, txt);
+      return /*#__PURE__*/React__default["default"].createElement(Text, null, txt);
     }
 
     function changeUser(id, value) {
@@ -2102,7 +2109,7 @@
       src: logo
     }) : '', /*#__PURE__*/React__default["default"].createElement("div", {
       className: "title"
-    }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, title))), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+    }, /*#__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,
@@ -2115,7 +2122,7 @@
       onEnter: ok,
       type: "password",
       outlined: true
-    })), /*#__PURE__*/React__default["default"].createElement("footer", null, onForgot ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    })), /*#__PURE__*/React__default["default"].createElement("footer", null, onForgot ? /*#__PURE__*/React__default["default"].createElement(Button, {
       label: tx(forgotLabel),
       action: forgot,
       disabled: !canForgot()
@@ -2123,14 +2130,14 @@
       className: "load-box"
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
       icon: "refresh"
-    })) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    })) : /*#__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$1, null, message)) : null));
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, message)) : null));
   };
 
   /**
@@ -2184,7 +2191,7 @@
       src: logo
     }) : null, title ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: "title"
-    }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)) : null, children), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    }, /*#__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",
@@ -2206,10 +2213,10 @@
       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$1, {
+    }, 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$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button, {
       label: "OK",
       raised: true,
       disabled: !canOK(),
@@ -2239,7 +2246,7 @@
       setShowDetails(!showDetails);
     }
 
-    var headerTitle = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    var headerTitle = /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
     }, title);
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2326,9 +2333,9 @@
       icon: icon
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "title"
-    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
-    }, title), /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    }, title), /*#__PURE__*/React__default["default"].createElement(Text, {
       className: "secondary-text",
       use: "body2"
     }, subtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2469,7 +2476,7 @@
       });
       return period;
     }, [from, to]);
-    var label = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    var label = /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
     }, title);
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2532,7 +2539,7 @@
         className: "column-header"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "month-header " + first
-      }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "overline"
       }, date.moment.format("MMM"))));
     })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2544,9 +2551,9 @@
         className: "column-header"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "date-header " + weekend
-      }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "headline6"
-      }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "caption"
       }, date.moment.format("ddd"))));
     })), lanes.map(function (lane) {
@@ -2663,6 +2670,204 @@
     }, title);
   };
 
+  /**
+   * Upload Area
+   */
+
+  var UploadArea = function UploadArea(props) {
+    var icon = props.icon,
+        _props$label = props.label,
+        label = _props$label === void 0 ? 'Add file or drop file here...' : _props$label;
+    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 dragging = drag === true ? 'drag-over' : '';
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "upload-area6 " + dragging,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      ref: areaElement
+    }, /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
+      icon: icon,
+      resumable: props.resumable
+    }), /*#__PURE__*/React__default["default"].createElement("label", null, label));
+  };
+  /**
+   * Upload Icon
+   */
+
+  var UploadIcon = function UploadIcon(_ref) {
+    var _ref$icon = _ref.icon,
+        icon = _ref$icon === void 0 ? "folder_open" : _ref$icon,
+        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: icon,
+      clickable: true
+    }));
+  };
+
+  var UPLOAD_STATES = {
+    IDLE: 0,
+    RUNNING: 1,
+    SUCCESS: 2,
+    ERROR: 3,
+    COMPLETED: 4
+  };
+
+  /**
+   * Upload File
+   */
+
+  var UploadFile = function UploadFile(_ref) {
+    var file = _ref.file;
+    var icon = file.icon,
+        name = file.name,
+        state = file.state,
+        progress = file.progress,
+        error = file.error;
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "upload-file"
+    }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: icon
+    }) : null, /*#__PURE__*/React__default["default"].createElement("label", null, name), state === UPLOAD_STATES.RUNNING ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(LinearProgress, {
+      progress: progress
+    }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true
+    })) : '', state === UPLOAD_STATES.SUCCESS ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "done"
+    })) : '', state === UPLOAD_STATES.ERROR ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "error"
+    }, error), /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "error"
+    })) : ''));
+  };
+
+  var UploadProgress = function UploadProgress(_ref) {
+    var _ref$files = _ref.files,
+        files = _ref$files === void 0 ? [] : _ref$files;
+    return /*#__PURE__*/React__default["default"].createElement("div", null, files.map(function (file) {
+      var f = {
+        icon: "description",
+        name: file.fileName,
+        progress: file.progress() * 100,
+        state: file.uploadState,
+        error: file.uploadError
+      };
+      return /*#__PURE__*/React__default["default"].createElement(UploadFile, {
+        key: f.name,
+        file: f
+      });
+    }));
+  };
+
+  /**
+   * Uploader
+   */
+
+  var Uploader = function Uploader(_ref) {
+    var label = _ref.label,
+        target = _ref.target,
+        accept = _ref.accept,
+        _ref$simultaneousUplo = _ref.simultaneousUploads,
+        simultaneousUploads = _ref$simultaneousUplo === void 0 ? 1 : _ref$simultaneousUplo,
+        className = _ref.className,
+        onProgress = _ref.onProgress,
+        onSuccess = _ref.onSuccess,
+        onError = _ref.onError,
+        onComplete = _ref.onComplete;
+    var resumable = React.useMemo(function () {
+      var config = {
+        target: target,
+        chunkSize: 1 * 1024 * 1024,
+        simultaneousUploads: simultaneousUploads,
+        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(UPLOAD_STATES.IDLE),
+        state = _useState2[0],
+        setState = _useState2[1];
+
+    var _useState3 = React.useState([]),
+        files = _useState3[0],
+        setFiles = _useState3[1];
+
+    function onFileAdded(file) {
+      files.push(file);
+      setFiles(files);
+      setState(UPLOAD_STATES.RUNNING);
+      resumable.upload();
+    }
+
+    function onFileProgress(file) {
+      file.uploadState = UPLOAD_STATES.RUNNING;
+      var progress = file.progress();
+      setProgress(progress);
+      if (onProgress) onProgress(files);
+    }
+
+    function onFileSuccess(file, message) {
+      file.uploadState = UPLOAD_STATES.SUCCESS;
+      if (onSuccess) onSuccess(file, message);
+    }
+
+    function onFileError(file, message) {
+      file.uploadState = UPLOAD_STATES.ERROR;
+      file.uploadError = message;
+      if (onError) onError(file, message);
+    }
+
+    function onAllComplete() {
+      setState(UPLOAD_STATES.COMPLETED);
+      if (onComplete) onComplete(files);
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "uploader " + className
+    }, state === UPLOAD_STATES.IDLE ? /*#__PURE__*/React__default["default"].createElement(UploadArea, {
+      resumable: resumable,
+      label: label
+    }) : /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
+      files: files
+    }));
+  };
+
   /**
    * Page Context
    */
@@ -3061,7 +3266,52 @@
       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$1, null, title)), /*#__PURE__*/React__default["default"].createElement("main", null, children), /*#__PURE__*/React__default["default"].createElement("footer", null, actions))));
+    }) : 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))));
+  };
+
+  /**
+   * Upload Dialog
+   */
+
+  var UploadDialog = function UploadDialog(_ref) {
+    var label = _ref.label,
+        target = _ref.target,
+        accept = _ref.accept,
+        onSuccess = _ref.onSuccess,
+        onClose = _ref.onClose;
+    var site = React.useContext(SiteContext);
+
+    function onComplete(uploads) {
+      if (onSuccess) onSuccess(uploads);
+    }
+
+    function onAction(action) {
+      if (action === 'CLOSE') {
+        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
+    }, /*#__PURE__*/React__default["default"].createElement(Uploader, {
+      label: label,
+      accept: accept,
+      target: target,
+      onComplete: onComplete
+    }));
   };
 
   /**
@@ -3369,7 +3619,7 @@
 
     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$1, {
+    }, /*#__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, {
@@ -3509,7 +3759,7 @@
     });
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "entity-editor"
-    }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    }, /*#__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, {
@@ -3774,7 +4024,7 @@
     };
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "collection-editor"
-    }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "caption"
     }, label), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "actions"
@@ -3856,7 +4106,7 @@
       className: "collection-adder"
     }, edit ? /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
       editable: true
-    })) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    })) : /*#__PURE__*/React__default["default"].createElement(Button, {
       icon: "add",
       label: "A\xF1adir",
       action: toggle
@@ -3915,14 +4165,14 @@
       return filter ? visible && filter(field, content) : visible;
     }
 
-    var actions = /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    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$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button, {
       label: "OK",
       action: function action() {
         return onAction("OK");
@@ -3930,7 +4180,7 @@
       disabled: !isValid,
       raised: true
     }));
-    var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    var title = /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
     }, label);
     var content = new Content(type, form);
@@ -3944,7 +4194,7 @@
       onChange: change,
       filter: filterForm
     }), errors.map(function (error) {
-      return /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "overline",
         tag: "div",
         className: "error"
@@ -4004,14 +4254,14 @@
       return filter ? visible && filter(field, content) : visible;
     }
 
-    var actions = /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    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$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button, {
       label: "OK",
       action: function action() {
         return onAction("OK");
@@ -4019,7 +4269,7 @@
       disabled: !isValid,
       raised: true
     }));
-    var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    var title = /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
     }, label);
     var content = new Content(type, form);
@@ -4033,7 +4283,7 @@
       onChange: change,
       filter: filterForm
     }), errors.map(function (error) {
-      return /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "overline",
         tag: "div",
         className: "error"
@@ -4099,12 +4349,12 @@
       return creation;
     }
 
-    var actions = /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    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$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button, {
       label: "OK",
       action: function action() {
         return onAction("OK");
@@ -4112,7 +4362,7 @@
       disabled: !isValid,
       raised: true
     }));
-    var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    var title = /*#__PURE__*/React__default["default"].createElement(Text, {
       use: "headline6"
     }, label);
     var content = new Content(type, form);
@@ -4128,7 +4378,7 @@
       },
       onChange: change
     }), errors.map(function (error) {
-      return /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "overline",
         tag: "div",
         className: "error"
@@ -4234,19 +4484,19 @@
 
     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$1, null, title)
-    }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+      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$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button, {
       icon: "refresh",
       label: "Reload",
       action: reload
     }), renderActions()), /*#__PURE__*/React__default["default"].createElement("menu", {
       className: "collection-page"
     }, /*#__PURE__*/React__default["default"].createElement(Header, {
-      title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Lista de ", name)
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Lista de ", name)
     }), levels ? /*#__PURE__*/React__default["default"].createElement(CollectionTree, {
       levels: levels,
       onSelect: onSelect
@@ -4493,7 +4743,7 @@
 
     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$1, null, selected.name)
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, selected.name)
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
       icon: "close",
       clickable: true,
@@ -4503,7 +4753,7 @@
     }, /*#__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$1, {
+    }))), autosave === true ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
       icon: "save",
       label: "Guardar Cambios",
       raised: true,
@@ -4985,8 +5235,8 @@
 
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
       className: "table-page",
-      title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
-    }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+    }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
       icon: "add",
       label: "A\xF1adir",
       action: add,
@@ -5077,7 +5327,7 @@
     var buttons = actions.map(function (_ref) {
       var label = _ref.label,
           _action = _ref.action;
-      return /*#__PURE__*/React__default["default"].createElement(Button$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Button, {
         label: label,
         raised: true,
         action: function action() {
@@ -5107,7 +5357,7 @@
   var TableQueries = function TableQueries(props) {
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
       className: "table-queries",
-      title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Queries")
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Queries")
     }), /*#__PURE__*/React__default["default"].createElement("main", {
       className: "table-queries"
     }, "..."));
@@ -5160,7 +5410,7 @@
     var content = new Content(filterSchema, form);
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
       className: "table-filters",
-      title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Filters")
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Filters")
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
       icon: "filter_list_off",
       size: "small",
@@ -5386,7 +5636,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
       icon: icon,
-      title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
     }, /*#__PURE__*/React__default["default"].createElement(DropDown, {
       id: "groupBy",
       label: "Agrupar Por",
@@ -5560,328 +5810,12 @@
     };
   };
 
-  /**
-   * 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$1, {
-      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
-    }));
-  };
-  /**
-   * Upload Button
-   */
-
-
-  function UploadButton(_ref2) {
-    var resumable = _ref2.resumable,
-        _ref2$icon = _ref2.icon,
-        icon = _ref2$icon === void 0 ? "file_upload" : _ref2$icon,
-        _ref2$label = _ref2.label,
-        label = _ref2$label === void 0 ? "Upload" : _ref2$label;
-    var buttonElement = React.useRef();
-    React.useEffect(function () {
-      if (resumable && buttonElement) resumable.assignBrowse(buttonElement.current);
-    }, []);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "upload-button",
-      ref: buttonElement
-    }, /*#__PURE__*/React__default["default"].createElement(Button, {
-      icon: icon,
-      label: label,
-      outlined: true
-    }));
-  }
-
-  /**
-   * 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$1, {
-      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$1, {
-      use: "overline"
-    }, error)) : '') : '';
-  };
-
-  var STATES = {
-    IDLE: 0,
-    RUNNING: 1,
-    SUCCESS: 2,
-    ERROR: 3,
-    COMPLETED: 4
-  };
-  /**
-   * Uploader
-   */
-
-  var Uploader = function Uploader(_ref) {
-    var label = _ref.label,
-        target = _ref.target,
-        accept = _ref.accept,
-        _ref$simultaneousUplo = _ref.simultaneousUploads,
-        simultaneousUploads = _ref$simultaneousUplo === void 0 ? 1 : _ref$simultaneousUplo,
-        className = _ref.className,
-        onProgress = _ref.onProgress,
-        onSuccess = _ref.onSuccess,
-        onError = _ref.onError,
-        onComplete = _ref.onComplete,
-        _ref$errors = _ref.errors,
-        errors = _ref$errors === void 0 ? [] : _ref$errors;
-    var resumable = React.useMemo(function () {
-      var config = {
-        target: target,
-        chunkSize: 1 * 1024 * 1024,
-        simultaneousUploads: simultaneousUploads,
-        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),
-        progress = _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);
-      setState(STATES.RUNNING);
-      resumable.upload();
-    }
-
-    function onFileProgress(file) {
-      var progress = file.progress();
-      setProgress(progress);
-      if (onProgress) onProgress(files);
-    }
-
-    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
-    }, state === STATES.IDLE ? /*#__PURE__*/React__default["default"].createElement(UploadArea, {
-      resumable: resumable,
-      state: state,
-      label: label,
-      error: error,
-      progress: progress
-    }) : null, state === STATES.RUNNING || STATES.SUCCESS || STATES.ERROR ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
-      files: files,
-      errors: errors
-    }) : null);
-  };
-
-  var UploadProgress = function UploadProgress(_ref2) {
-    var _ref2$files = _ref2.files,
-        files = _ref2$files === void 0 ? [] : _ref2$files,
-        errors = _ref2.errors;
-    return /*#__PURE__*/React__default["default"].createElement("div", null, files.map(function (file) {
-      errors.some(function (e) {
-        return e === file.fileName;
-      }) ? "Fichero Mal Nombrado" : "";
-      return /*#__PURE__*/React__default["default"].createElement(UploadFile, {
-        file: file,
-        state: STATES.RUNNING,
-        progress: file.progress()
-      });
-    }));
-  };
-
-  /**
-   * 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$1, {
-      label: "CLOSE",
-      action: function action() {
-        return onAction("CLOSE");
-      }
-    }));
-    var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
-      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$1, {
-        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.Avatar = Avatar;
-  exports.Button = Button$1;
+  exports.Button = Button;
   exports.CheckBox = CheckBox;
   exports.Chip = Chip;
   exports.Chips = Chips;
@@ -5935,7 +5869,7 @@
   exports.TableEditor = TableEditor;
   exports.TablePage = TablePage;
   exports.Tabs = Tabs;
-  exports.Text = Text$1;
+  exports.Text = Text;
   exports.TextArea = TextArea;
   exports.TextField = TextField;
   exports.Thumbnail = Thumbnail;
@@ -5946,7 +5880,6 @@
   exports.TreeNode = TreeNode;
   exports.TreededContentEditor = TreededContentEditor;
   exports.UploadArea = UploadArea;
-  exports.UploadButton = UploadButton;
   exports.UploadDialog = UploadDialog;
   exports.UploadFile = UploadFile;
   exports.Uploader = Uploader;