ywana-core8 0.1.28 → 0.1.30

package/dist/index.umd.js

@@ -42,7 +42,7 @@
       return false;
     }
 
-    function _catch$6(body, recover) {
+    function _catch$8(body, recover) {
       try {
         var result = body();
       } catch (e) {
@@ -70,7 +70,7 @@
           body: body
         };
         if (headers) request.headers = request.headers;
-        return Promise.resolve(_catch$6(function () {
+        return Promise.resolve(_catch$8(function () {
           return Promise.resolve(fetch(URL, request)).then(function (response) {
             var _exit;
             function _temp2(_result) {
@@ -142,8 +142,7 @@
      * Session store
      * implements securityCtx methods
      */
-
-    var SESSION_NAME = process.env.REACT_APP_SESSION || window && window.SESSION ? window.SESSION : 'YWANA-CORE6-SESSION';
+    var SESSION_NAME = typeof process !== 'undefined' ? process.env.REACT_APP_SESSION : window && window.SESSION ? window.SESSION : 'YWANA-CORE8-SESSION';
     var Session = {
       token: function token() {
         var item = sessionStorage.getItem(SESSION_NAME);
@@ -205,7 +204,7 @@
     /**
      * Text
      */
-    var Text = function Text(_ref) {
+    var Text$1 = function Text(_ref) {
       var _ref$format = _ref.format,
         format = _ref$format === void 0 ? TEXTFORMATS.HTML : _ref$format,
         children = _ref.children,
@@ -264,7 +263,7 @@
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "tooltip-text",
         style: style
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, text)), props.children);
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, text)), props.children);
     };
 
     /**
@@ -433,7 +432,7 @@
         size: "small",
         clickable: true,
         action: click
-      }), /*#__PURE__*/React__default["default"].createElement(Text, null, label));
+      }), /*#__PURE__*/React__default["default"].createElement(Text$1, null, label));
     };
 
     /**
@@ -493,8 +492,8 @@
         var value = event.target.checked;
         if (onChange) onChange(id, value);
       }
-      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
-      var placeholderTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, placeholder);
+      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+      var placeholderTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, placeholder);
       return value === true ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "checkbox",
         key: id + "1"
@@ -551,7 +550,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, null, label)), action ? /*#__PURE__*/React__default["default"].createElement("span", {
+      }) : null, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Text$1, null, label)), action ? /*#__PURE__*/React__default["default"].createElement("span", {
         className: "meta"
       }, action) : null)) : /*#__PURE__*/React__default["default"].createElement("div", {
         className: "chip " + className + " " + style,
@@ -559,7 +558,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, null, label)), action ? /*#__PURE__*/React__default["default"].createElement("span", {
+      }) : null, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Text$1, null, label)), action ? /*#__PURE__*/React__default["default"].createElement("span", {
         className: "meta"
       }, action) : null);
     };
@@ -662,7 +661,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, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "headline6"
       }, title)) : '', /*#__PURE__*/React__default["default"].createElement("form", {
         className: "form-grid",
@@ -703,7 +702,7 @@
       var style = props.img ? {
         backgroundImage: "url(" + props.img + ")"
       } : {};
-      var title = /*#__PURE__*/React__default["default"].createElement(Text, null, props.title);
+      var title = /*#__PURE__*/React__default["default"].createElement(Text$1, null, props.title);
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: "header " + caption + " " + prominent + " " + dense + " " + theme + " " + props.className,
         style: style
@@ -767,7 +766,7 @@
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "list grouped"
       }, groups.map(function (group) {
-        var groupTitle = groupRenderer ? groupRenderer(group) : /*#__PURE__*/React__default["default"].createElement(Text, null, group.name);
+        var groupTitle = groupRenderer ? groupRenderer(group) : /*#__PURE__*/React__default["default"].createElement(Text$1, null, group.name);
         return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
           key: group.name
         }, /*#__PURE__*/React__default["default"].createElement("header", {
@@ -812,9 +811,9 @@
         tooltip: iconTooltip
       }) : 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", {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, 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", {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, line2)) : null), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "meta"
       }, meta) : null);
     };
@@ -886,7 +885,7 @@
         }
       }
       var style = disabled ? "disabled" : "";
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, {
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text$1, {
         format: TEXTFORMATS.STRING
       }, label) : null;
       return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -971,7 +970,7 @@
         className: "property property-" + id + " " + className
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "property-name"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, name || label)), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, name || label)), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "property-value"
       }, editable ? /*#__PURE__*/React__default["default"].createElement("input", {
         type: "text",
@@ -999,7 +998,7 @@
         var value = event.target.value;
         if (onChange) onChange(id, value);
       }
-      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "radio"
       }, /*#__PURE__*/React__default["default"].createElement("input", {
@@ -1098,7 +1097,7 @@
         if (onSelect) onSelect(id);
       }
       var style = selected ? "selected" : "";
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, {
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text$1, {
         format: TEXTFORMATS.STRING
       }, label) : null;
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1403,7 +1402,7 @@
       var labelStyle = label ? "" : "no-label";
       var labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top";
       var style = labelStyle + " " + labelPositionStyle + " " + borderStyle + " textfield-" + type;
-      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
       var placeholderTxt = site.translate ? site.translate(placeholder) : placeholder;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: style + " " + id + " " + className,
@@ -1481,7 +1480,7 @@
       }
       var labelStyle = label ? "" : "no-label";
       var style = "textarea " + labelStyle + " textarea-" + type;
-      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
       var placeholderTxt = site.translate ? site.translate(placeholder) : placeholder;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "" + style,
@@ -1598,7 +1597,7 @@
             }, option.icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
               icon: option.icon,
               size: "small"
-            }) : '', /*#__PURE__*/React__default["default"].createElement(Text, null, option.label));
+            }) : '', /*#__PURE__*/React__default["default"].createElement(Text$1, null, option.label));
           });
           return /*#__PURE__*/React__default["default"].createElement("menu", {
             className: position
@@ -1652,7 +1651,7 @@
         var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
         setForm(next);
       }
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, null, label) : null;
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text$1, null, label) : null;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "date-range"
       }, label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -1680,7 +1679,7 @@
       function toggle() {
         setShow(!show);
       }
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, null, label) : null;
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text$1, null, label) : null;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "password-field"
       }, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -1701,9 +1700,7 @@
      * Login Box
      */
     var LoginBox = function LoginBox(_ref) {
-      var logo = _ref.logo,
-        title = _ref.title,
-        _ref$userLabel = _ref.userLabel,
+      var _ref$userLabel = _ref.userLabel,
         userLabel = _ref$userLabel === void 0 ? "User" : _ref$userLabel,
         _ref$userValue = _ref.userValue,
         userValue = _ref$userValue === void 0 ? "" : _ref$userValue,
@@ -1714,11 +1711,9 @@
         _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;
+        loading = _ref.loading,
+        children = _ref.children;
       var _useState = React.useState(userValue),
         user = _useState[0],
         setUser = _useState[1];
@@ -1731,14 +1726,8 @@
       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);
+        return /*#__PURE__*/React__default["default"].createElement(Text$1, null, txt);
       }
       function changeUser(id, value) {
         setUser(value);
@@ -1748,11 +1737,7 @@
       }
       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, {
+      }, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TextField, {
         label: tx(userLabel),
         value: user,
         onChange: changeUser,
@@ -1772,20 +1757,15 @@
         className: "load-box"
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "refresh"
-      })) : /*#__PURE__*/React__default["default"].createElement(Button, {
+      })) : null, !loading ? /*#__PURE__*/React__default["default"].createElement(Button, {
         label: tx(loginLabel),
         action: ok,
         disabled: !canOK(),
         raised: true,
         className: "login-button"
-      }), onForgot ? /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: tx(forgotLabel),
-        action: forgot,
-        disabled: !canForgot(),
-        className: "forgot-button"
-      }) : null, message ? /*#__PURE__*/React__default["default"].createElement("div", {
+      }) : null, children, message ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "message"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, message)) : null));
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, message)) : null));
     };
 
     function validatePassword(contraseña) {
@@ -1837,8 +1817,7 @@
      * Reset Password
      */
     var ResetPasswordBox = function ResetPasswordBox(_ref) {
-      var title = _ref.title,
-        _ref$userRequired = _ref.userRequired,
+      var _ref$userRequired = _ref.userRequired,
         userRequired = _ref$userRequired === void 0 ? true : _ref$userRequired,
         _ref$oldPwdRequired = _ref.oldPwdRequired,
         oldPwdRequired = _ref$oldPwdRequired === void 0 ? false : _ref$oldPwdRequired,
@@ -1938,20 +1917,17 @@
           onOK(form);
         }
       }
-      var userLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "User");
-      var passwordLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "New Password");
-      var password2Label = /*#__PURE__*/React__default["default"].createElement(Text, null, "Confirm New Password");
-      var okLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "OK");
+      var userLabel = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "User");
+      var passwordLabel = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "New Password");
+      var password2Label = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Confirm New Password");
+      var okLabel = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "OK");
       var userStyle = errors.user ? "error" : "";
       var oldPasswordStyle = errors.oldPassword ? "error" : "";
       var password1Style = errors.password1 ? "error" : "";
       var password2Style = errors.password2 ? "error" : "";
-      console.log("ResetPasswordBox", errors);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "reset-password-box"
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, title ? /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "title"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, title)) : null), /*#__PURE__*/React__default["default"].createElement("main", {
+      }, /*#__PURE__*/React__default["default"].createElement("main", {
         className: "reset-password-form"
       }, userRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "user",
@@ -1964,19 +1940,19 @@
         onEnter: ok
       }) : null, userRequired ? errors.user ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "error-message"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, errors.user)) : null : null, oldPwdRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, errors.user)) : null : null, oldPwdRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "oldPassword",
         className: oldPasswordStyle,
         outlined: true,
         icon: "lock",
         type: "password",
-        label: "Old Password",
+        label: "Current Password",
         lapse: 100,
         onChange: changeField,
         onEnter: ok
       }) : null, oldPwdRequired ? errors.oldPassword ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "error-message"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, errors.oldPassword)) : null : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, errors.oldPassword)) : null : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "password1",
         className: password1Style,
         outlined: true,
@@ -1988,7 +1964,7 @@
         onEnter: ok
       }), errors.password1 ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "error-message"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, errors.password1)) : null, children, /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, errors.password1)) : null, children, /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "password2",
         className: password2Style,
         outlined: true,
@@ -2000,7 +1976,7 @@
         onEnter: ok
       }), errors.password2 ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "error-message"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, errors.password2)) : null), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Button, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, errors.password2)) : null), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Button, {
         label: okLabel,
         raised: true,
         disabled: !isValid,
@@ -2008,1763 +1984,2303 @@
       })));
     };
 
-    var SCROLL_SENSITIVITY = 0.0005;
-    var MAX_ZOOM = 5;
-    var MIN_ZOOM = 0.1;
-    var ImageViewer = function ImageViewer(_ref) {
-      var image = _ref.image;
-      var _useState = React.useState({
-          x: 0,
-          y: 0
-        }),
-        offset = _useState[0],
-        setOffset = _useState[1];
-      var _useState2 = React.useState(1),
-        zoom = _useState2[0],
-        setZoom = _useState2[1];
-      var _useState3 = React.useState(false),
-        draggind = _useState3[0],
-        setDragging = _useState3[1];
-      var touch = React.useRef({
-        x: 0,
-        y: 0
-      });
-      var canvasRef = React.useRef(null);
-      var containerRef = React.useRef(null);
-      var observer = React.useRef(null);
-      var background = React.useMemo(function () {
-        return new Image();
-      }, [image]);
-      var clamp = function clamp(num, min, max) {
-        return Math.min(Math.max(num, min), max);
-      };
-      var handleWheel = function handleWheel(event) {
-        var deltaY = event.deltaY;
-        if (!draggind) {
-          setZoom(function (zoom) {
-            return clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM);
-          });
-        }
-      };
-      var handleMouseMove = function handleMouseMove(event) {
-        if (draggind) {
-          var _touch$current = touch.current,
-            x = _touch$current.x,
-            y = _touch$current.y;
-          var clientX = event.clientX,
-            clientY = event.clientY;
-          setOffset({
-            x: offset.x + (x - clientX),
-            y: offset.y + (y - clientY)
-          });
-          touch.current = {
-            x: clientX,
-            y: clientY
-          };
-        }
-      };
-      var handleMouseDown = function handleMouseDown(event) {
-        var clientX = event.clientX,
-          clientY = event.clientY;
-        touch.current = {
-          x: clientX,
-          y: clientY
-        };
-        setDragging(true);
-      };
-      var handleMouseUp = function handleMouseUp() {
-        return setDragging(false);
-      };
-      var draw = function draw() {
-        if (canvasRef.current) {
-          var _canvasRef$current = canvasRef.current,
-            width = _canvasRef$current.width,
-            height = _canvasRef$current.height;
-          var context = canvasRef.current.getContext("2d");
-
-          // Set canvas dimensions
-          canvasRef.current.width = width;
-          canvasRef.current.height = height;
-
-          // Clear canvas and scale it
-          context.translate(-offset.x, -offset.y);
-          context.scale(zoom, zoom);
-          context.clearRect(0, 0, width, height);
-
-          // Make sure we're zooming to the center
-          var x = (context.canvas.width / zoom - background.width) / 2;
-          var y = (context.canvas.height / zoom - background.height) / 2;
-
-          // Draw image
-          context.drawImage(background, x, y);
-        }
-      };
-      React.useEffect(function () {
-        observer.current = new ResizeObserver(function (entries) {
-          entries.forEach(function (_ref2) {
-            var target = _ref2.target;
-            var width = background.width,
-              height = background.height;
-            // If width of the container is smaller than image, scale image down
-            if (target.clientWidth < width) {
-              // Calculate scale
-              var scale = target.clientWidth / width;
-
-              // Redraw image
-              canvasRef.current.width = width * scale;
-              canvasRef.current.height = height * scale;
-              canvasRef.current.getContext("2d").drawImage(background, 0, 0, width * scale, height * scale);
-            }
-          });
-        });
-        observer.current.observe(containerRef.current);
-        return function () {
-          return observer.current.unobserve(containerRef.current);
-        };
-      }, []);
-      React.useEffect(function () {
-        background.src = image;
-        if (canvasRef.current) {
-          background.onload = function () {
-            // Get the image dimensions
-            var width = background.width,
-              height = background.height;
-            canvasRef.current.width = width;
-            canvasRef.current.height = height;
+    /**
+     * Page Context
+     */
+    var PageContext = React__default["default"].createContext({});
 
-            // Set image as background
-            canvasRef.current.getContext("2d").drawImage(background, 0, 0);
-          };
-        }
-      }, [background]);
-      React.useEffect(function () {
-        draw();
-      }, [zoom, offset]);
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "image-viewer",
-        ref: containerRef
-      }, /*#__PURE__*/React__default["default"].createElement("canvas", {
-        onMouseDown: handleMouseDown,
-        onMouseUp: handleMouseUp,
-        onWheel: handleWheel,
-        onMouseMove: handleMouseMove,
-        ref: canvasRef
-      }));
+    /**
+     * 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);
     };
 
     /**
-     * Viewer
+     * Page
      */
-    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: "view",
-        title: headerTitle
-      }, onClose ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "close",
-        clickable: true,
-        action: onClose
-      }) : null, 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(ImageViewer, {
-        image: 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);
+    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,
+        className = props.className;
+      return /*#__PURE__*/React__default["default"].createElement(PageProvider, {
+        context: context
+      }, /*#__PURE__*/React__default["default"].createElement("article", {
+        className: "page6 " + layout + " " + className
+      }, children));
     };
 
     /**
-     * Kanban
+     * Site Provider
      */
-    var Kanban = function Kanban(_ref) {
-      var children = _ref.children;
-      var hasSwimlanes = React.useMemo(function () {
-        var found = React__default["default"].Children.map(children, function (child) {
-          if (child.type.name === KanbanSwimlane.name) {
-            return child;
-          }
-        });
-        return found.length > 0;
-      });
-      var style = hasSwimlanes ? "with-swimlanes" : "";
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "kanban " + style
-      }, children);
-    };
-    var KanbanHeader = function KanbanHeader(props) {
-      var columns = props.columns;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "kanban-header"
-      }, columns.map(function (column, index) {
-        var icon = column.icon,
-          title = column.title,
-          subtitle = column.subtitle,
-          badge = column.badge;
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "kanban-column",
-          key: index
-        }, /*#__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)));
-      }));
-    };
-    var KanbanSwimlane = function KanbanSwimlane(_ref2) {
-      var icon = _ref2.icon,
-        title = _ref2.title,
-        subtitle = _ref2.subtitle,
-        badge = _ref2.badge,
-        children = _ref2.children;
-      var _useState = React.useState(true),
-        unfold = _useState[0],
-        setUnfold = _useState[1];
-
-      // cahnge all children headless prop to true
-      // if there is only one child
-      if (children.length === 1) {
-        children = React__default["default"].cloneElement(children, {
-          headless: true
-        });
-      } else {
-        children = React__default["default"].Children.map(children, function (child) {
-          return React__default["default"].cloneElement(child, {
-            headless: true
+    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),
+        showConsole = _useState6[0],
+        setShowConsole = _useState6[1];
+      var _useState7 = React.useState([]),
+        consoleLines = _useState7[0],
+        setConsoleLines = _useState7[1];
+      var _useState8 = React.useState(),
+        page = _useState8[0],
+        setPage = _useState8[1];
+      var _useState9 = React.useState(),
+        dialog = _useState9[0],
+        setDialog = _useState9[1];
+      var _useState10 = React.useState(),
+        promptDialog = _useState10[0],
+        setPromptDialog = _useState10[1];
+      var _useState11 = React.useState(),
+        preview = _useState11[0],
+        setPreview = _useState11[1];
+      var _useState12 = React.useState(),
+        breadcrumb = _useState12[0],
+        setBreadcrumb = _useState12[1];
+      var value = {
+        lang: lang,
+        setLang: setLang,
+        dictionary: dictionary,
+        setDictionary: setDictionary,
+        translate: function translate(key) {
+          if (!key) return key;
+          if (dictionary === undefined) return key;
+          var term = dictionary[key];
+          return term ? term[lang] : key;
+        },
+        sideNav: sideNav,
+        setSideNav: setSideNav,
+        showNav: showNav,
+        setShowNav: setShowNav,
+        info: info,
+        openInfo: function openInfo(info) {
+          setInfo(info);
+        },
+        closeInfo: function closeInfo() {
+          setInfo(null);
+        },
+        consoleLines: consoleLines,
+        showConsole: showConsole,
+        toggleConsole: function toggleConsole() {
+          setShowConsole(!showConsole);
+        },
+        writeLog: function writeLog(line) {
+          var next = consoleLines.concat(line);
+          setConsoleLines(next);
+        },
+        clearLog: function clearLog() {
+          setConsoleLines([]);
+        },
+        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);
+        },
+        confirm: function confirm(message) {
+          return window.confirm(message);
+        },
+        prompt: function prompt(message) {
+          return window.prompt(message);
+        },
+        promptDialog: promptDialog,
+        openPromptDialog: function openPromptDialog(dialog) {
+          setPromptDialog(dialog);
+        },
+        closePromptDialog: function closePromptDialog() {
+          setPromptDialog(null);
+        },
+        notify: function notify(_ref2) {
+          var title = _ref2.title,
+            body = _ref2.body,
+            _ref2$type = _ref2.type,
+            type = _ref2$type === void 0 ? "success" : _ref2$type,
+            _ref2$duration = _ref2.duration,
+            duration = _ref2$duration === void 0 ? 3000 : _ref2$duration,
+            onRemoval = _ref2.onRemoval;
+          reactNotificationsComponent.Store.addNotification({
+            title: title,
+            message: body,
+            type: type,
+            insert: "top",
+            container: "top-right",
+            animationIn: ["animate__animated", "animate__fadeIn"],
+            animationOut: ["animate__animated", "animate__fadeOut"],
+            dismiss: {
+              duration: duration,
+              onScreen: true
+            },
+            onRemoval: onRemoval
           });
-        });
-      }
-
-      // log al children headless prop
-      children.forEach(function (child) {
-        console.log(child.props.headless);
-      });
-      function toggle() {
-        setUnfold(!unfold);
-      }
-      var toggleIcon = unfold ? "unfold_less" : "unfold_more";
-      var toggleStyle = unfold ? "unfold" : "fold";
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "kanban-swimlane"
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: icon,
-        size: "small"
-      }), /*#__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(Icon, {
-        icon: toggleIcon,
-        clickable: true,
-        action: toggle
-      })), /*#__PURE__*/React__default["default"].createElement("main", {
-        className: toggleStyle
-      }, children));
+        }
+      };
+      return /*#__PURE__*/React__default["default"].createElement(SiteContext.Provider, {
+        value: value
+      }, children);
     };
 
     /**
-     * Kanban Column
+     * Site
      */
-    var KanbanColumn = function KanbanColumn(_ref3) {
-      var id = _ref3.id,
-        actions = _ref3.actions,
-        _ref3$headless = _ref3.headless,
-        headless = _ref3$headless === void 0 ? false : _ref3$headless,
-        icon = _ref3.icon,
+    var Site = function Site(_ref3) {
+      var icon = _ref3.icon,
+        iconSrc = _ref3.iconSrc,
         title = _ref3.title,
-        subtitle = _ref3.subtitle,
-        badge = _ref3.badge,
+        toolbar = _ref3.toolbar,
+        footer = _ref3.footer,
         children = _ref3.children,
-        _ref3$minified = _ref3.minified,
-        minified = _ref3$minified === void 0 ? false : _ref3$minified,
-        _ref3$disabled = _ref3.disabled,
-        disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
-      var _useState2 = React.useState(minified),
-        min = _useState2[0],
-        setMin = _useState2[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' : '')
-      }, headless ? "" : /*#__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
-      }), actions));
+        init = _ref3.init,
+        min = _ref3.min,
+        lang = _ref3.lang,
+        dictionary = _ref3.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,
+        iconSrc: iconSrc,
+        title: title
+      }), /*#__PURE__*/React__default["default"].createElement(SiteToolBar, null, toolbar), /*#__PURE__*/React__default["default"].createElement(SiteMenu, {
+        iconSrc: iconSrc,
+        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(SitePromptDialog, null), /*#__PURE__*/React__default["default"].createElement(SitePreview, null), /*#__PURE__*/React__default["default"].createElement(SiteNotifications, null), /*#__PURE__*/React__default["default"].createElement(SiteFooter, null, footer)));
+    };
+    var SiteNotifications = function SiteNotifications() {
+      return /*#__PURE__*/React__default["default"].createElement(reactNotificationsComponent.ReactNotifications, null);
     };
 
     /**
-     * Kanban Card
+     * Site Header
      */
-    var KanbanCard = function KanbanCard(_ref4) {
-      var className = _ref4.className,
-        color = _ref4.color,
-        children = _ref4.children;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "kanban-card " + className + " " + color
-      }, children);
+    var SiteHeader = function SiteHeader(props) {
+      var _props$icon = props.icon,
+        icon = _props$icon === void 0 ? "equalizer" : _props$icon,
+        iconSrc = props.iconSrc,
+        title = props.title;
+      return /*#__PURE__*/React__default["default"].createElement(Header, {
+        icon: icon,
+        iconSrc: iconSrc,
+        title: title
+      });
     };
 
     /**
-     * Avatar
+     * Site ToolBar
      */
-    var Avatar = function Avatar(props) {
-      var id = props.id,
-        name = props.name,
-        className = props.className,
-        src = props.src,
-        _props$size = props.size,
-        size = _props$size === void 0 ? "small" : _props$size,
-        _props$clickable = props.clickable,
-        clickable = _props$clickable === void 0 ? false : _props$clickable,
-        action = props.action;
-      function click() {
-        if (clickable) {
-          action(id);
-        }
-      }
-      var clickableStyle = clickable ? 'clickable' : '';
-      var style = "avatar " + size + " " + clickableStyle + " " + className;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: style,
-        onClick: click
-      }, src ? /*#__PURE__*/React__default["default"].createElement("img", {
-        src: src
-      }) : /*#__PURE__*/React__default["default"].createElement("span", null, name));
-    };
-
-    var WaitScreen = function WaitScreen() {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "wait-screen"
-      }, /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
-        size: "large"
-      }));
+    var SiteToolBar = function SiteToolBar(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React__default["default"].createElement("nav", null, children);
     };
 
-    moment__default["default"].locale('es');
-    var moment = momentRange.extendMoment(moment__default["default"]);
-
     /**
-     * Calendar
+     * Site Footer
      */
-    var Calendar = function Calendar(props) {
-      var _props$events = props.events,
-        events = _props$events === void 0 ? [] : _props$events,
-        children = props.children,
-        onChange = props.onChange,
-        onRange = props.onRange;
-      var _useState = React.useState(props.range || "year"),
-        range = _useState[0],
-        setRange = _useState[1];
-      function onChangeRange(range) {
-        setRange(range);
-        if (onRange) onRange(range);
-      }
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "calendar"
-      }, /*#__PURE__*/React__default["default"].createElement(CalendarRangeControl, {
-        range: range,
-        onChange: onChangeRange
-      }), range === "year" && /*#__PURE__*/React__default["default"].createElement(YearCalendar, {
-        events: events,
-        onChange: onChange
-      }, children), range === "month" && /*#__PURE__*/React__default["default"].createElement(MonthCalendar, {
-        events: events,
-        onChange: onChange,
-        onRange: onChangeRange
-      }, children));
+    var SiteFooter = function SiteFooter(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/React__default["default"].createElement("footer", null, children);
     };
 
     /**
-     * CalendarRangeControl
+     * Site Aside
      */
-    var CalendarRangeControl = function CalendarRangeControl(props) {
-      var range = props.range,
-        onChange = props.onChange;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "calendar-range-control"
-      }, /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: "Year",
-        outlined: range == "year",
-        action: function action() {
-          return onChange("year");
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: "Month",
-        outlined: range == "month",
-        action: function action() {
-          return onChange("month");
-        }
-      }));
+    var SiteAside = function SiteAside() {
+      var context = React.useContext(SiteContext);
+      return context.info ? /*#__PURE__*/React__default["default"].createElement("aside", null, context.info) : '';
     };
 
     /**
-     * MonthCalendar
+     * SiteMenu
      */
-    var MonthCalendar = function MonthCalendar(props) {
-      var _props$events2 = props.events,
-        events = _props$events2 === void 0 ? [] : _props$events2,
-        children = props.children,
-        onChange = props.onChange;
-      var _useState2 = React.useState(),
-        position = _useState2[0],
-        setPosition = _useState2[1];
+    var SiteMenu = function SiteMenu(_ref6) {
+      var iconSrc = _ref6.iconSrc,
+        title = _ref6.title,
+        children = _ref6.children,
+        min = _ref6.min;
+      var context = React.useContext(SiteContext);
+      var page = context.page,
+        sideNav = context.sideNav,
+        setSideNav = context.setSideNav,
+        showNav = context.showNav;
       React.useEffect(function () {
-        var today = moment();
-        setPosition(today);
+        if (min) context.setSideNav('min');
       }, []);
-      React.useEffect(function () {
-        if (position && onChange) {
-          var _firstDayOfMonth = position.clone().startOf('month');
-          var _firstDayOfRange = _firstDayOfMonth.clone().startOf('isoweek');
-          var _lastDayOfMonth = position.clone().endOf('month');
-          var _lastDayOfRange = _lastDayOfMonth.clone().endOf('isoweek');
-          var _range = moment.range(_firstDayOfRange, _lastDayOfRange);
-          onChange(position, _range);
-        }
-      }, [position]);
-      function next() {
-        var next = position.clone().add(1, 'month');
-        setPosition(next);
-      }
-      function prev() {
-        var prev = position.clone().subtract(1, 'month');
-        setPosition(prev);
-      }
-      function today() {
-        var today = moment();
-        setPosition(today);
+      function toggle() {
+        var next = sideNav === 'max' ? 'min' : 'max';
+        setSideNav(next);
       }
-      if (!position) return "...";
-      var monthName = position.format("MMMM");
-      var year = position.format("YYYY");
-      var firstDayOfMonth = position.clone().startOf('month');
-      var firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
-      var lastDayOfMonth = position.clone().endOf('month');
-      var lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
-      var range = moment.range(firstDayOfRange, lastDayOfRange);
-      var days = Array.from(range.by('days'));
-      var cells = days.map(function (day) {
-        var eventsOfDay = events.filter(function (event) {
-          var eventDay = moment(event.date);
-          return eventDay.isSame(day, 'day');
+      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
         });
-        var sameMonthStyle = day.isSame(moment(position), 'month') ? '' : 'other-month';
-        return {
-          day: day,
-          events: eventsOfDay,
-          sameMonthStyle: sameMonthStyle
-        };
-      });
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "month-calendar"
-      }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", /*#__PURE__*/React__default["default"].createElement(Text, null, monthName), " ", year), /*#__PURE__*/React__default["default"].createElement(Button, {
-        icon: "chevron_left",
-        action: prev
-      }), /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: "Today",
-        outlined: true,
-        action: today
-      }), /*#__PURE__*/React__default["default"].createElement(Button, {
-        icon: "chevron_right",
-        action: next
-      })), /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Mon")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Tue")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Wed")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Thu")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Fri")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sat")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sun"))), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
-        return /*#__PURE__*/React__default["default"].createElement(DayCell, {
-          key: cell.day,
-          cell: cell
-        }, children);
+        return sections;
+      }, {}) : {};
+      var style = sideNav === 'max' ? 'max' : 'min';
+      var toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right';
+      var menutTitle = sideNav === 'max' ? title : '';
+      return /*#__PURE__*/React__default["default"].createElement("menu", {
+        className: style + " " + (showNav ? 'show' : '')
+      }, /*#__PURE__*/React__default["default"].createElement(Header, {
+        title: menutTitle,
+        iconSrc: iconSrc
+      }), /*#__PURE__*/React__default["default"].createElement("main", null, Object.keys(sections).map(function (title) {
+        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+          key: title
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "section-title " + style
+        }, sideNav === "max" ? title : ''), sections[title].map(function (_ref7) {
+          var id = _ref7.id,
+            _ref7$icon = _ref7.icon,
+            icon = _ref7$icon === void 0 ? 'info' : _ref7$icon,
+            title = _ref7.title;
+          var styleItem = id === page ? 'selected' : '';
+          var titleTxt = context.translate(title);
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "site-menu-item " + styleItem,
+            key: id,
+            onClick: function onClick() {
+              return _goto(id);
+            }
+          }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+            text: title,
+            top: ".5rem",
+            left: "4.5rem"
+          }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+            key: id,
+            icon: icon,
+            clickable: true,
+            action: function action() {
+              return _goto(id);
+            }
+          })), sideNav === 'max' ? /*#__PURE__*/React__default["default"].createElement("label", null, titleTxt) : null);
+        }), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "section-divider"
+        }));
+      })), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: toggleIcon,
+        clickable: true,
+        action: toggle
       })));
     };
-    var DayCell = function DayCell(props) {
-      var _props$cell = props.cell,
-        cell = _props$cell === void 0 ? [] : _props$cell,
-        children = props.children;
-      var day = cell.day,
-        events = cell.events,
-        sameMonthStyle = cell.sameMonthStyle;
-      var todayStyle = day.isSame(moment(), 'day') ? 'today' : '';
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "day-cell " + todayStyle + " " + sameMonthStyle
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, day.format("DD")), /*#__PURE__*/React__default["default"].createElement("main", null, events.map(function (event) {
-        return /*#__PURE__*/React__default["default"].createElement(Event, {
-          key: event.id,
-          event: event
-        }, children);
-      })));
+
+    /**
+     * SitePage
+     */
+    var SitePage = function SitePage(_ref8) {
+      var children = _ref8.children,
+        init = _ref8.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;
+      }));
     };
 
     /**
-     * Event
+     * Site Dialog
      */
-    var Event = function Event(props) {
-      var event = props.event,
-        children = props.children;
-      if (children) {
-        var element = React__default["default"].Children.toArray(children)[0];
-        return React__default["default"].cloneElement(element, {
-          event: event
-        });
-      } else {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "event"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "event-name"
-        }, event.title));
+    var SiteDialog = function SiteDialog() {
+      var context = React.useContext(SiteContext);
+      return context.dialog ? context.dialog : '';
+    };
+
+    /**
+     * Site Promtp Dialog
+     */
+    var SitePromptDialog = function SitePromptDialog() {
+      var context = React.useContext(SiteContext);
+      return context.promptDialog ? context.promptDialog : '';
+    };
+
+    /**
+     * 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);
+      function clear() {
+        context.clearLog();
       }
+      return context.showConsole ? /*#__PURE__*/React__default["default"].createElement("div", {
+        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("nav", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "clear_all",
+        size: "small",
+        clickable: true,
+        action: clear
+      })), /*#__PURE__*/React__default["default"].createElement("main", null, context.consoleLines.map(function (line, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: "log-" + index
+        }, line);
+      }))) : '';
     };
 
     /**
-     * YearCalendar
+     * Dialog
+     * 
+     * <Dialog title={title} open={true} actions={actions}>
      */
-    var YearCalendar = function YearCalendar(props) {
-      var _props$events3 = props.events,
-        events = _props$events3 === void 0 ? [] : _props$events3,
+    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,
+        toolbar = props.toolbar,
         children = props.children,
-        onChange = props.onChange;
-      var _useState3 = React.useState(),
-        position = _useState3[0],
-        setPosition = _useState3[1];
-      React.useEffect(function () {
-        var today = moment();
-        setPosition(today);
-      }, []);
-      React.useEffect(function () {
-        if (position && onChange) {
-          var _firstDayOfYear = position.clone().startOf('year');
-          var firstDayOfRange = _firstDayOfYear.clone().startOf('isoweek');
-          var _lastDayOfYear = position.clone().endOf('year');
-          var lastDayOfRange = _lastDayOfYear.clone().endOf('isoweek');
-          var range = moment.range(firstDayOfRange, lastDayOfRange);
-          onChange(position, range);
+        actions = props.actions,
+        className = props.className,
+        onClose = props.onClose,
+        _props$overlayCanClos = props.overlayCanClose,
+        overlayCanClose = _props$overlayCanClos === void 0 ? true : _props$overlayCanClos;
+      function overlayClose() {
+        if (overlayCanClose) {
+          close();
         }
-      }, [position]);
-      function next() {
-        var next = position.clone().add(1, 'year');
-        setPosition(next);
       }
-      function prev() {
-        var prev = position.clone().subtract(1, 'year');
-        setPosition(prev);
+      function close() {
+        if (onClose) onClose();
+        if (className === "prompt") {
+          site.closePromptDialog();
+        } else {
+          site.closeDialog();
+        }
       }
-      function today() {
-        var today = moment();
-        setPosition(today);
+      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "overlay " + className,
+        onMouseDown: overlayClose
+      }), /*#__PURE__*/React__default["default"].createElement("dialog", {
+        className: "dialog-panel " + className
+      }, /*#__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), toolbar), /*#__PURE__*/React__default["default"].createElement("main", null, children), /*#__PURE__*/React__default["default"].createElement("footer", null, actions)));
+    };
+
+    /**
+     * View
+     */
+    var View = function View(props) {
+      var id = props.id,
+        className = props.className,
+        icon = props.icon,
+        title = props.title,
+        toolbar = props.toolbar,
+        menu = props.menu,
+        info = props.info,
+        onClose = props.onClose,
+        _props$canCollapse = props.canCollapse,
+        canCollapse = _props$canCollapse === void 0 ? false : _props$canCollapse,
+        children = props.children;
+      var _useState = React.useState(true),
+        open = _useState[0],
+        setOpen = _useState[1];
+      function toggle() {
+        setOpen(!open);
       }
-      if (!position) return "...";
-      var year = position.format("YYYY");
-      var firstDayOfYear = moment(position).startOf('year');
-      var lastDayOfYear = moment(position).endOf('year');
-      var months = [];
-      for (var currentMonth = moment(firstDayOfYear); currentMonth.isBefore(lastDayOfYear); currentMonth.add(1, 'month')) {
-        months.push(moment(currentMonth));
+      function close() {
+        if (onClose) onClose();
       }
-      var cells = months.map(function (month) {
-        var firstDayOfMonth = month.clone().startOf('month');
-        var firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
-        var lastDayOfMonth = month.clone().endOf('month');
-        var lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
-        var range = moment.range(firstDayOfRange, lastDayOfRange);
-        var days = Array.from(range.by('days'));
-        var cells = days.map(function (day) {
-          var eventsOfDay = events.filter(function (event) {
-            var eventDay = moment(event.date);
-            return eventDay.isSame(day, 'day');
-          });
-          var sameMonthStyle = day.isSame(moment(month), 'month') ? '' : 'other-month';
-          return {
-            day: day,
-            events: eventsOfDay,
-            sameMonthStyle: sameMonthStyle
-          };
-        });
-        return {
-          month: month,
-          cells: cells
-        };
+      return /*#__PURE__*/React__default["default"].createElement("section", {
+        id: id,
+        className: "view " + className
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, canCollapse ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "expand_more",
+        size: "small",
+        clickable: true,
+        action: toggle
+      }) : null, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: icon,
+        size: "small"
+      }) : null, title ? /*#__PURE__*/React__default["default"].createElement("label", null, title) : null, menu ? /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+        align: "alignRight"
+      }, menu) : null, onClose ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        size: "small",
+        clickable: true,
+        action: close
+      }) : null), toolbar ? /*#__PURE__*/React__default["default"].createElement("nav", null, toolbar) : null, open ? /*#__PURE__*/React__default["default"].createElement("main", null, children) : null, info ? /*#__PURE__*/React__default["default"].createElement("footer", null, info) : null);
+    };
+    var TabbedView = function TabbedView(props) {
+      var title = props.title,
+        className = props.className,
+        selected = props.selected;
+      var _useState2 = React.useState(0),
+        tab = _useState2[0],
+        setTab = _useState2[1];
+      var children = React__default["default"].Children.toArray(props.children);
+      var tabs = children.map(function (child) {
+        return /*#__PURE__*/React__default["default"].createElement(Tab, {
+          key: child.props.label,
+          label: child.props.label
+        });
       });
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "year-calendar"
-      }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", /*#__PURE__*/React__default["default"].createElement(Text, null, year)), /*#__PURE__*/React__default["default"].createElement(Button, {
-        icon: "chevron_left",
-        action: prev
-      }), /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: "Today",
-        outlined: true,
-        action: today
-      }), /*#__PURE__*/React__default["default"].createElement(Button, {
-        icon: "chevron_right",
-        action: next
-      })), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
-        return /*#__PURE__*/React__default["default"].createElement(MonthCell, {
-          key: cell.month,
-          cell: cell
-        }, children);
-      })));
+      React.useEffect(function () {
+        if (selected && selected !== tab) setTab(selected);
+      }, [selected]);
+      var toolbar = /*#__PURE__*/React__default["default"].createElement(Tabs, {
+        selected: tab,
+        onChange: function onChange(tab) {
+          return setTab(tab);
+        }
+      }, tabs);
+      return /*#__PURE__*/React__default["default"].createElement(View, {
+        title: title,
+        toolbar: toolbar,
+        className: className
+      }, /*#__PURE__*/React__default["default"].createElement(Stack, {
+        selected: tab
+      }, children));
     };
 
     /**
-     * MonthCell
+     * Admin Change User Password Dialog
      */
-    var MonthCell = function MonthCell(props) {
-      var _props$cell2 = props.cell,
-        cell = _props$cell2 === void 0 ? [] : _props$cell2,
-        children = props.children;
-      var month = cell.month,
-        cells = cell.cells;
-      var monthName = month.format("MMMM");
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "month-cell"
-      }, /*#__PURE__*/React__default["default"].createElement("nav", null, monthName), /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Mon")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Tue")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Wed")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Thu")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Fri")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sat")), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "week-day-cell"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sun"))), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
-        return /*#__PURE__*/React__default["default"].createElement(DayCell, {
-          key: cell.day,
-          cell: cell
-        }, children);
-      })));
+    var ChangeUserPasswordDialog = function ChangeUserPasswordDialog(props) {
+      var site = React.useContext(SiteContext);
+      var error = props.error;
+      var config = {
+        userRequired: props.userRequired || false,
+        oldPwdRequired: props.oldPwdRequired || false,
+        onOK: function onOK(form) {
+          props.onOK ? props.onOK(form) : site.closeDialog();
+        },
+        onClose: function onClose() {
+          site.closeDialog();
+        }
+      };
+      var Toolbar = function Toolbar() {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "dialog-toolbar"
+        }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+          icon: "close",
+          size: "small",
+          clickable: true,
+          action: site.closeDialog
+        }));
+      };
+      var title = /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dialog-title"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Change Password"));
+      return /*#__PURE__*/React__default["default"].createElement(Dialog, {
+        title: title,
+        className: "change-password-dialog",
+        toolbar: /*#__PURE__*/React__default["default"].createElement(Toolbar, null)
+      }, error && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dialog-error-message"
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "warning"
+      }), error), /*#__PURE__*/React__default["default"].createElement(ResetPasswordBox, config, /*#__PURE__*/React__default["default"].createElement("br", null), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "The new password must contain:")), /*#__PURE__*/React__default["default"].createElement("ul", null, /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Text, null, "At least 15 characters")), /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Text, null, "At least one uppercase letter")), /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Text, null, "At least one lowercase letter")), /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Text, null, "At least one number")), /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Text, null, "At least one special character")))));
     };
 
-    var ranges = momentRange.extendMoment(moment__default["default"]);
-    var DATE_RANGE = [{
-      label: "Week",
-      value: "week"
-    }, {
-      label: "Month",
-      value: "month"
-    }, {
-      label: "Year",
-      value: "year"
-    }];
+    /**
+     * Forget User Password Action
+     */
+
+    function _catch$7(body, recover) {
+      try {
+        var result = body();
+      } catch (e) {
+        return recover(e);
+      }
+      if (result && result.then) {
+        return result.then(void 0, recover);
+      }
+      return result;
+    } /**
+       * Unlock User Action
+       */
+    var ForgetUserPasswordAction = function ForgetUserPasswordAction(props) {
+      var execute = function execute() {
+        try {
+          var _temp = _catch$7(function () {
+            return Promise.resolve(onOK(user.email)).then(function () {
+              if (onSuccess) onSuccess();
+              site.notify({
+                title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Forgot Password"),
+                body: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Check your email to reset your password"),
+                icon: "mail_lock"
+              });
+            });
+          }, function (error) {
+            site.notify({
+              title: "Error",
+              body: error.message,
+              type: "danger",
+              icon: "error"
+            });
+          });
+          return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+      var site = React.useContext(SiteContext);
+      var user = props.user,
+        _props$icon = props.icon,
+        icon = _props$icon === void 0 ? false : _props$icon,
+        onOK = props.onOK,
+        onSuccess = props.onSuccess;
+      var label = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Forgot Password");
+      return icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "mail_lock",
+        clickable: true,
+        action: execute,
+        size: "small",
+        tooltip: {
+          text: label,
+          top: "-.5rem",
+          left: "-14rem"
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: label,
+        action: execute,
+        className: ""
+      });
+    };
+    var UnlockUserAction = function UnlockUserAction(props) {
+      var execute = function execute() {
+        try {
+          var _temp2 = _catch$7(function () {
+            return Promise.resolve(onOK(user)).then(function () {
+              if (onSuccess) onSuccess();
+              site.notify({
+                title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "User Unlocked"),
+                body: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "The user has been unlocked successfully"),
+                icon: "key"
+              });
+            });
+          }, function (error) {
+            site.notify({
+              title: "Error",
+              body: error.message,
+              type: "danger",
+              icon: "error"
+            });
+          });
+          return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+      var site = React.useContext(SiteContext);
+      var user = props.user,
+        _props$icon2 = props.icon,
+        icon = _props$icon2 === void 0 ? true : _props$icon2,
+        onOK = props.onOK,
+        onSuccess = props.onSuccess;
+      var label = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Unlock User");
+      return icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "key_off",
+        clickable: true,
+        action: execute,
+        size: "small"
+      }) : /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: label,
+        action: execute,
+        outlined: true,
+        className: ""
+      });
+    };
 
     /**
-     * Planner
+     * Change User Password Action
      */
-    var Planner = function Planner(_ref) {
-      var title = _ref.title,
-        _ref$events = _ref.events,
-        events = _ref$events === void 0 ? [] : _ref$events,
-        _ref$lanes = _ref.lanes,
-        lanes = _ref$lanes === void 0 ? [] : _ref$lanes,
-        _ref$navigation = _ref.navigation,
-        navigation = _ref$navigation === void 0 ? true : _ref$navigation,
-        onSelectCell = _ref.onSelectCell,
-        focusEvent = _ref.focusEvent,
-        _ref$config = _ref.config,
-        config = _ref$config === void 0 ? {
-          range: "year",
-          from: "2022-01-01",
-          to: "2022-12-30"
-        } : _ref$config,
-        onChange = _ref.onChange;
-      var _useState = React.useState(config.range),
-        dateRange = _useState[0],
-        setDateRange = _useState[1];
-      var _useState2 = React.useState(config.from),
-        from = _useState2[0],
-        setFrom = _useState2[1];
-      var _useState3 = React.useState(config.to),
-        to = _useState3[0],
-        setTo = _useState3[1];
-      var thisMondayElement = React.useRef(null);
-      var gotoMonday = React.useCallback(function (node) {
-        var element = node;
-        if (element) element.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start',
-          inline: 'start'
-        });
+    var ChangeUserPasswordAction = function ChangeUserPasswordAction(props) {
+      var site = React.useContext(SiteContext);
+      var user = props.user,
+        _props$icon3 = props.icon,
+        icon = _props$icon3 === void 0 ? false : _props$icon3,
+        _props$oldPwdRequired = props.oldPwdRequired,
+        oldPwdRequired = _props$oldPwdRequired === void 0 ? true : _props$oldPwdRequired;
+      var errorMessages = React.useMemo(function () {
+        return {
+          "ERROR OLD PASSWORD": {
+            title: "Error",
+            description: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Incorrect old password")
+          },
+          "PASSWORD ALREADY USED": {
+            title: "Error",
+            description: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "The new password provided has already been used")
+          }
+        };
       }, []);
-      React.useEffect(function () {
-        var element = document.getElementById(focusEvent);
-        if (element) element.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'center'
-        });
-      }, [focusEvent]);
-      React.useEffect(function () {
-        var today = moment__default["default"]();
-        var from_date = today.startOf(dateRange).format("YYYY-MM-DD");
-        var to_date = today.endOf(dateRange).format("YYYY-MM-DD");
-        setFrom(from_date);
-        setTo(to_date);
-      }, [dateRange]);
-      function next() {
-        var actual = moment__default["default"](from);
-        var next = actual.add(1, dateRange);
-        var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
-        var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
-        setFrom(from_date);
-        setTo(to_date);
+      function execute() {
+        var onOK = function onOK(form) {
+          try {
+            var _temp3 = _catch$7(function () {
+              return Promise.resolve(props.onOK(user, form.oldPassword, form.password1)).then(function () {
+                site.notify({
+                  title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Change Password"),
+                  body: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "The password has been changed successfully"),
+                  icon: "key"
+                });
+                site.closeDialog();
+              });
+            }, function (error) {
+              var _errorMessages$key;
+              var key = error.message.toUpperCase();
+              var message = ((_errorMessages$key = errorMessages[key]) == null ? void 0 : _errorMessages$key.description) || error.message;
+              site.notify({
+                title: "Error",
+                body: message,
+                type: "danger",
+                icon: "error"
+              });
+              site.openDialog(/*#__PURE__*/React__default["default"].createElement(ChangeUserPasswordDialog, {
+                oldPwdRequired: oldPwdRequired,
+                onOK: onOK,
+                error: message
+              }));
+            });
+            return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        };
+        site.openDialog(/*#__PURE__*/React__default["default"].createElement(ChangeUserPasswordDialog, {
+          oldPwdRequired: oldPwdRequired,
+          onOK: onOK
+        }));
       }
-      function prev() {
-        var actual = moment__default["default"](from);
-        var next = actual.subtract(1, dateRange);
-        var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
-        var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
-        setFrom(from_date);
-        setTo(to_date);
+      var label = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Change Password");
+      return icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "key",
+        clickable: true,
+        action: execute,
+        size: "small"
+      }) : /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: label,
+        action: execute,
+        outlined: true,
+        className: ""
+      });
+    };
+
+    var _LOGIN_DICTIONARY;
+    var LOGIN_DICTIONARY = (_LOGIN_DICTIONARY = {
+      'Forgot Password': {
+        en: 'Forgot Password',
+        es: 'Olvidé mi contraseña',
+        de: 'Passwort vergessen',
+        pt: 'Esqueceu a senha',
+        ca: 'He oblidat la contrasenya',
+        it: 'Password dimenticata',
+        fr: 'Mot de passe oublié'
+      },
+      'Check your email to reset your password': {
+        en: 'Check your email to reset your password',
+        es: 'Revise su correo electrónico para restablecer su contraseña',
+        de: 'Überprüfen Sie Ihre E-Mails, um Ihr Passwort zurückzusetzen',
+        pt: 'Verifique seu e-mail para redefinir sua senha',
+        ca: 'Comproveu el correu electrònic per restablir la contrasenya',
+        it: 'Controlla la tua email per reimpostare la password',
+        fr: 'Vérifiez votre email pour réinitialiser votre mot de passe'
+      },
+      'Unlock User': {
+        en: 'Unlock User',
+        es: 'Desbloquear usuario',
+        de: 'Benutzer entsperren',
+        pt: 'Desbloquear usuário',
+        ca: 'Desbloquejar usuari',
+        it: 'Sblocca utente',
+        fr: 'Débloquer l\'utilisateur'
+      },
+      'The user has been unlocked successfully': {
+        en: 'The user has been unlocked successfully',
+        es: 'El usuario ha sido desbloqueado con éxito',
+        de: 'Der Benutzer wurde erfolgreich entsperrt',
+        pt: 'O usuário foi desbloqueado com sucesso',
+        ca: 'L\'usuari s\'ha desbloquejat correctament',
+        it: 'L\'utente è stato sbloccato con successo',
+        fr: 'L\'utilisateur a été débloqué avec succès'
+      },
+      'User Unlocked': {
+        en: 'User Unlocked',
+        es: 'Usuario desbloqueado',
+        de: 'Benutzer entsperrt',
+        pt: 'Usuário desbloqueado',
+        ca: 'Usuari desbloquejat',
+        it: 'Utente sbloccato',
+        fr: 'Utilisateur débloqué'
+      },
+      'The password has been changed successfully': {
+        en: 'The password has been changed successfully',
+        es: 'La contraseña se ha cambiado con éxito',
+        de: 'Das Passwort wurde erfolgreich geändert',
+        pt: 'A senha foi alterada com sucesso',
+        ca: 'La contrasenya s\'ha canviat correctament',
+        it: 'La password è stata cambiata con successo',
+        fr: 'Le mot de passe a été changé avec succès'
+      },
+      'Password Changed': {
+        en: 'Password Changed',
+        es: 'Contraseña cambiada',
+        de: 'Passwort geändert',
+        pt: 'Senha alterada',
+        ca: 'Contrasenya canviada',
+        it: 'Password cambiata',
+        fr: 'Mot de passe changé'
+      },
+      'The new password must contain:': {
+        en: 'The new password must contain:',
+        es: 'La nueva contraseña debe contener:',
+        de: 'Das neue Passwort muss enthalten:',
+        pt: 'A nova senha deve conter:',
+        ca: 'La nova contrasenya ha de contenir:',
+        it: 'La nuova password deve contenere:',
+        fr: 'Le nouveau mot de passe doit contenir:'
+      },
+      'At least 15 characters': {
+        en: 'At least 15 characters',
+        es: 'Al menos 15 caracteres',
+        de: 'Mindestens 15 Zeichen',
+        pt: 'Pelo menos 15 caracteres',
+        ca: 'Almenys 15 caràcters',
+        it: 'Almeno 15 caratteri',
+        fr: 'Au moins 15 caractères'
+      },
+      'At least one uppercase letter': {
+        en: 'At least one uppercase letter',
+        es: 'Al menos una letra mayúscula',
+        de: 'Mindestens ein Großbuchstabe',
+        pt: 'Pelo menos uma letra maiúscula',
+        ca: 'Almenys una lletra majúscula',
+        it: 'Almeno una lettera maiuscola',
+        fr: 'Au moins une lettre majuscule'
+      },
+      'At least one lowercase letter': {
+        en: 'At least one lowercase letter',
+        es: 'Al menos una letra minúscula',
+        de: 'Mindestens ein Kleinbuchstabe',
+        pt: 'Pelo menos uma letra minúscula',
+        ca: 'Almenys una lletra minúscula',
+        it: 'Almeno una lettera minuscola',
+        fr: 'Au moins une lettre minuscule'
+      },
+      'At least one number': {
+        en: 'At least one number',
+        es: 'Al menos un número',
+        de: 'Mindestens eine Zahl',
+        pt: 'Pelo menos um número',
+        ca: 'Almenys un número',
+        it: 'Almeno un numero',
+        fr: 'Au moins un numéro'
+      },
+      'At least one special character': {
+        en: 'At least one special character',
+        es: 'Al menos un carácter especial',
+        de: 'Mindestens ein Sonderzeichen',
+        pt: 'Pelo menos um caractere especial',
+        ca: 'Almenys un caràcter especial',
+        it: 'Almeno un carattere speciale',
+        fr: 'Au moins un caractère spécial'
+      },
+      'Passwords do not match.': {
+        en: 'Passwords do not match.',
+        es: 'Las contraseñas no coinciden.',
+        de: 'Passwörter stimmen nicht überein.',
+        pt: 'As senhas não coincidem.',
+        ca: 'Les contrasenyes no coincideixen.',
+        it: 'Le password non corrispondono.',
+        fr: 'Les mots de passe ne correspondent pas.'
+      },
+      'Password is required': {
+        en: 'Password is required',
+        es: 'Se requiere contraseña',
+        de: 'Passwort ist erforderlich',
+        pt: 'Senha é necessária',
+        ca: 'Es requereix contrasenya',
+        it: 'La password è obbligatoria',
+        fr: 'Le mot de passe est requis'
+      },
+      'Old password is required.': {
+        en: 'Old password is required.',
+        es: 'Se requiere contraseña antigua.',
+        de: 'Altes Passwort ist erforderlich.',
+        pt: 'Senha antiga é necessária.',
+        ca: 'Es requereix contrasenya antiga.',
+        it: 'La vecchia password è obbligatoria.',
+        fr: 'Ancien mot de passe requis.'
+      }
+    }, _LOGIN_DICTIONARY["Passwords do not match."] = {
+      en: 'Passwords do not match.',
+      es: 'Las contraseñas no coinciden.',
+      de: 'Passwörter stimmen nicht überein.',
+      pt: 'As senhas não coincidem.',
+      ca: 'Les contrasenyes no coincideixen.',
+      it: 'Le password non corrispondono.',
+      fr: 'Les mots de passe ne correspondent pas.'
+    }, _LOGIN_DICTIONARY);
+
+    function _catch$6(body, recover) {
+      try {
+        var result = body();
+      } catch (e) {
+        return recover(e);
       }
-      function selectCell(lane, date) {
-        if (onSelectCell) onSelectCell(lane, date);
+      if (result && result.then) {
+        return result.then(void 0, recover);
       }
-      function showThisWeek() {
-        var element = thisMondayElement.current;
-        //const element = document.querySelector(".thisMonday")
-        console.log("Show this week", element);
-        if (element) element.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start',
-          inline: 'start'
+      return result;
+    }
+    var API_URL = typeof process !== 'undefined' ? process.env.REACT_APP_API : window.API;
+    var http = HTTPClient(window.API || API_URL, Session);
+
+    /**
+     * LOGIN_API
+     */
+    var LOGIN_API = {
+      /**
+       * Change Password
+       * Request API to change user password
+       * 
+       * @param {*} id 
+       * @param {*} form 
+       * @returns 
+       * 
+       * PATCH /users/:id
+       * payload: { old_Password, new_Password }
+       * 
+       */
+      changePassword: function changePassword(id, form) {
+        var body = JSON.stringify(form);
+        return http.PATCH("/users/" + id, body);
+      },
+      /**
+       * Forget user password
+       * Request API to send a message to user email with a link to reset password
+       * 
+       * @param {*} email 
+       * @returns 
+       * 
+       * POST /users/forget
+       * payload: { email }
+       */
+      forgetUserPassword: function forgetUserPassword(email) {
+        var body = JSON.stringify({
+          email: email
         });
-      }
-      var period = React.useMemo(function () {
-        var start = ranges(from, "YYYY-MM-DD");
-        var end = ranges(to, "YYYY-MM-DD");
-        var range = ranges.range(start, end);
-        var period = Array.from(range.by("day")).map(function (m) {
-          return {
-            year: m.year(),
-            month: m.month(),
-            day: m.date(),
-            moment: m
-          };
+        return http.POST("/users/forget", body);
+      },
+      /**
+       * Reset user password
+       * Request API to reset user password
+       * 
+       * @param {*} token 
+       * @param {*} password 
+       * @returns
+       * 
+       * POST /users/assign
+       * payload: { token, password } 
+       */
+      resetUserPassword: function resetUserPassword(token, password) {
+        var body = JSON.stringify({
+          token: token,
+          password: password
         });
-        return period;
-      }, [from, to]);
-      var label = /*#__PURE__*/React__default["default"].createElement(Text, {
-        use: "headline6"
-      }, title);
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "planner-box"
-      }, navigation ? /*#__PURE__*/React__default["default"].createElement(Header, {
-        title: label
-      }, "\xA0\xA0", /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: "Esta Semana",
-        outlined: true,
-        action: showThisWeek
-      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "chevron_right",
-        clickable: true,
-        action: next
-      }), /*#__PURE__*/React__default["default"].createElement(TextField, {
-        id: "to",
-        type: "date",
-        label: "Hasta",
-        value: to,
-        onChange: function onChange(id, value) {
-          return setTo(value);
+        return http.POST("/users/assign", body);
+      }
+    };
+
+    /**
+     * LOGIN_CONTEXT
+     */
+    var LOGIN_CONTEXT = {
+      /**
+       * Change user password
+       * 
+       * @param {*} user 
+       * @param {*} old_Password 
+       * @param {*} new_Password 
+       */
+      changeUserPassword: function changeUserPassword(user, old_Password, new_Password) {
+        try {
+          return Promise.resolve(_catch$6(function () {
+            return Promise.resolve(LOGIN_API.changePassword(user, {
+              old_Password: old_Password,
+              new_Password: new_Password
+            })).then(function (response) {
+              console.log("changeUserPassword", response);
+            });
+          }, function (error) {
+            console.log("changeUserPassword error", error);
+            throw error;
+          }));
+        } catch (e) {
+          return Promise.reject(e);
         }
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "expand"
-      }), /*#__PURE__*/React__default["default"].createElement(DropDown, {
-        id: "ranges",
-        label: "Rango",
-        options: DATE_RANGE,
-        value: dateRange,
-        onChange: function onChange(id, value) {
-          return setDateRange(value);
+      },
+      /**
+       * Unlock user
+       * 
+       * @param {*} id 
+       */
+      unlockUser: function unlockUser(id) {
+        try {
+          return Promise.resolve(_catch$6(function () {
+            return Promise.resolve(API.changePassword(id, {
+              unlock: true
+            })).then(function () {});
+          }, function (error) {
+            console.log("unblockUser error", error);
+            throw error;
+          }));
+        } catch (e) {
+          return Promise.reject(e);
         }
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "expand"
-      }), /*#__PURE__*/React__default["default"].createElement(TextField, {
-        id: "from",
-        type: "date",
-        label: "Desde",
-        value: from,
-        onChange: function onChange(id, value) {
-          return setFrom(value);
+      },
+      /**
+       * Forget user password
+       * 
+       * @param {*} email 
+       */
+      forgetUserPassword: function forgetUserPassword(email) {
+        try {
+          return Promise.resolve(_catch$6(function () {
+            return Promise.resolve(API.forgetUserPassword(email)).then(function () {});
+          }, function (error) {
+            console.log("forgetUserPassword error", error);
+            throw error;
+          }));
+        } catch (e) {
+          return Promise.reject(e);
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "chevron_left",
-        clickable: true,
-        action: prev
-      })) : null, /*#__PURE__*/React__default["default"].createElement("main", {
-        className: "planner"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "column0"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "column-header"
-      }), lanes.map(function (lane) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "row-header"
-        }, lane.label);
-      })), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "rows"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "row row0"
-      }, period.map(function (date, index) {
-        var first = index === 0 || date.day === 1 ? "first" : "";
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "column-header"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "month-header " + first
-        }, /*#__PURE__*/React__default["default"].createElement(Text, {
-          use: "overline"
-        }, date.moment.format("MMM"))));
-      })), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "row row1"
-      }, period.map(function (date) {
-        var isWekend = [0, 6].includes(date.moment.day());
-        var weekend = isWekend ? "weekend" : "";
-        var thisWeek = moment__default["default"]().startOf('week').isSame(date.moment, "week") ? "thisWeek" : "";
-        var today = moment__default["default"]();
-        var weekStart = today.clone().startOf('week');
-        var isThisMonday = date.moment.isSame(weekStart);
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          key: "column-" + date.moment.dayOfYear(),
-          id: isThisMonday ? "thisMonday" : "",
-          className: "column-header",
-          ref: isThisMonday ? thisMondayElement : null
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "date-header " + weekend + " " + thisWeek,
-          ref: isThisMonday ? gotoMonday : null
-        }, /*#__PURE__*/React__default["default"].createElement(Text, {
-          use: "headline6"
-        }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React__default["default"].createElement(Text, {
-          use: "caption"
-        }, date.moment.format("ddd"))));
-      })), lanes.map(function (lane) {
-        return /*#__PURE__*/React__default["default"].createElement(PlannerRow, {
-          key: lane.id,
-          lane: lane,
-          events: events,
-          period: period,
-          onSelectCell: selectCell,
-          onChange: onChange
-        });
-      }))));
+      },
+      /**
+       * Reset Password
+       * 
+       * @param {*} token 
+       * @param {*} password 
+       * @param {*} onError 
+       * @param {*} onSuccess 
+       */
+      resetUserPassword: function resetUserPassword(token, password, onError, onSuccess) {
+        try {
+          var _temp = _catch$6(function () {
+            return Promise.resolve(API.resetUserPassword(token, password)).then(function () {
+              onSuccess();
+            });
+          }, function (error) {
+            onError(error);
+          });
+          return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
     };
 
-    /**
-     * Planner Row
-     */
-    var PlannerRow = function PlannerRow(props) {
-      var lane = props.lane,
-        _props$events = props.events,
-        events = _props$events === void 0 ? [] : _props$events,
-        period = props.period,
-        onSelectCell = props.onSelectCell,
-        onChange = props.onChange;
-      var rowEvents = events.filter(function (event) {
-        return event.lane === lane.id;
-      });
-      function change(data) {
-        if (onChange) onChange(data);
-      }
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "row"
-      }, period.map(function (date) {
-        var slotDate = new Date(date.year, date.month, date.day);
-        slotDate.setHours(0, 0, 0);
-        var cellEvents = rowEvents.filter(function (event) {
-          var eventDate = new Date(event.date);
-          eventDate.setHours(0, 0, 0);
-          return eventDate.getTime() === slotDate.getTime();
-        });
-        return /*#__PURE__*/React__default["default"].createElement(PlannerCell, {
-          key: lane.id + "-" + slotDate.toString(),
-          lane: lane,
-          date: date,
-          events: cellEvents,
-          onSelect: onSelectCell,
-          onDrop: change
-        });
-      }));
-    };
+    var SCROLL_SENSITIVITY = 0.0005;
+    var MAX_ZOOM = 5;
+    var MIN_ZOOM = 0.1;
+    var ImageViewer = function ImageViewer(_ref) {
+      var image = _ref.image;
+      var _useState = React.useState({
+          x: 0,
+          y: 0
+        }),
+        offset = _useState[0],
+        setOffset = _useState[1];
+      var _useState2 = React.useState(1),
+        zoom = _useState2[0],
+        setZoom = _useState2[1];
+      var _useState3 = React.useState(false),
+        draggind = _useState3[0],
+        setDragging = _useState3[1];
+      var touch = React.useRef({
+        x: 0,
+        y: 0
+      });
+      var canvasRef = React.useRef(null);
+      var containerRef = React.useRef(null);
+      var observer = React.useRef(null);
+      var background = React.useMemo(function () {
+        return new Image();
+      }, [image]);
+      var clamp = function clamp(num, min, max) {
+        return Math.min(Math.max(num, min), max);
+      };
+      var handleWheel = function handleWheel(event) {
+        var deltaY = event.deltaY;
+        if (!draggind) {
+          setZoom(function (zoom) {
+            return clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM);
+          });
+        }
+      };
+      var handleMouseMove = function handleMouseMove(event) {
+        if (draggind) {
+          var _touch$current = touch.current,
+            x = _touch$current.x,
+            y = _touch$current.y;
+          var clientX = event.clientX,
+            clientY = event.clientY;
+          setOffset({
+            x: offset.x + (x - clientX),
+            y: offset.y + (y - clientY)
+          });
+          touch.current = {
+            x: clientX,
+            y: clientY
+          };
+        }
+      };
+      var handleMouseDown = function handleMouseDown(event) {
+        var clientX = event.clientX,
+          clientY = event.clientY;
+        touch.current = {
+          x: clientX,
+          y: clientY
+        };
+        setDragging(true);
+      };
+      var handleMouseUp = function handleMouseUp() {
+        return setDragging(false);
+      };
+      var draw = function draw() {
+        if (canvasRef.current) {
+          var _canvasRef$current = canvasRef.current,
+            width = _canvasRef$current.width,
+            height = _canvasRef$current.height;
+          var context = canvasRef.current.getContext("2d");
+
+          // Set canvas dimensions
+          canvasRef.current.width = width;
+          canvasRef.current.height = height;
 
-    /**
-     * Planner Cell
-     */
-    var PlannerCell = function PlannerCell(_ref2) {
-      var lane = _ref2.lane,
-        events = _ref2.events,
-        date = _ref2.date,
-        onSelect = _ref2.onSelect,
-        onDrop = _ref2.onDrop;
-      var _useState4 = React.useState(false),
-        dragOver = _useState4[0],
-        setDragOver = _useState4[1];
-      function select() {
-        if (onSelect) onSelect(lane, date.moment.format("YYYY-MM-DD"));
-      }
-      function onDragOver(event) {
-        if (!dragOver) setDragOver(true);
-        event.stopPropagation();
-        event.preventDefault();
-      }
-      function onDragLeave(event) {
-        setDragOver(false);
-        event.stopPropagation();
-        event.preventDefault();
-      }
-      function drop(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        var id = event.dataTransfer.getData("text");
-        if (onDrop) onDrop({
-          id: id,
-          lane: lane.id,
-          date: date.moment.format("YYYY-MM-DD")
+          // Clear canvas and scale it
+          context.translate(-offset.x, -offset.y);
+          context.scale(zoom, zoom);
+          context.clearRect(0, 0, width, height);
+
+          // Make sure we're zooming to the center
+          var x = (context.canvas.width / zoom - background.width) / 2;
+          var y = (context.canvas.height / zoom - background.height) / 2;
+
+          // Draw image
+          context.drawImage(background, x, y);
+        }
+      };
+      React.useEffect(function () {
+        observer.current = new ResizeObserver(function (entries) {
+          entries.forEach(function (_ref2) {
+            var target = _ref2.target;
+            var width = background.width,
+              height = background.height;
+            // If width of the container is smaller than image, scale image down
+            if (target.clientWidth < width) {
+              // Calculate scale
+              var scale = target.clientWidth / width;
+
+              // Redraw image
+              canvasRef.current.width = width * scale;
+              canvasRef.current.height = height * scale;
+              canvasRef.current.getContext("2d").drawImage(background, 0, 0, width * scale, height * scale);
+            }
+          });
         });
-        setDragOver(false);
-      }
-      var isWekend = [0, 6].includes(date.moment.day());
-      var weekend = isWekend ? "weekend" : "";
-      var today = moment__default["default"]();
-      var weekStart = today.clone().startOf('week');
-      var thisMonday = date.moment.isSame(weekStart) ? "thisMonday" : "";
-      var dragOverStyle = dragOver ? "drag-over" : "";
+        observer.current.observe(containerRef.current);
+        return function () {
+          return observer.current.unobserve(containerRef.current);
+        };
+      }, []);
+      React.useEffect(function () {
+        background.src = image;
+        if (canvasRef.current) {
+          background.onload = function () {
+            // Get the image dimensions
+            var width = background.width,
+              height = background.height;
+            canvasRef.current.width = width;
+            canvasRef.current.height = height;
+
+            // Set image as background
+            canvasRef.current.getContext("2d").drawImage(background, 0, 0);
+          };
+        }
+      }, [background]);
+      React.useEffect(function () {
+        draw();
+      }, [zoom, offset]);
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "cell " + thisMonday + " " + weekend + " " + dragOverStyle,
-        onDragOver: onDragOver,
-        onDragLeave: onDragLeave,
-        onDrop: drop,
-        onClick: select
-      }, events.map(function (event) {
-        var _event$Renderer = event.Renderer,
-          Renderer = _event$Renderer === void 0 ? EventCard : _event$Renderer;
-        return /*#__PURE__*/React__default["default"].createElement(Renderer, {
-          key: event.id,
-          event: event
-        });
+        className: "image-viewer",
+        ref: containerRef
+      }, /*#__PURE__*/React__default["default"].createElement("canvas", {
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onWheel: handleWheel,
+        onMouseMove: handleMouseMove,
+        ref: canvasRef
       }));
     };
-    var EventCard = function EventCard(props) {
-      var event = props.event;
-      var title = event.title,
-        color = event.color;
-      var style = {
-        backgroundColor: color,
-        color: "white"
-      };
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        draggable: "true",
-        className: "event-card",
-        style: style
-      }, title);
-    };
 
     /**
-     * Upload Area
+     * Viewer
      */
-    var UploadArea = function UploadArea(props) {
-      var _props$label = props.label,
-        label = _props$label === void 0 ? 'Add file or drop file here...' : _props$label;
-      var areaElement = React.useRef();
+    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),
-        drag = _useState[0],
-        setDrag = _useState[1];
-      var resumable = props.resumable;
-      React.useEffect(function () {
-        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' : '';
+        showDetails = _useState[0],
+        setShowDetails = _useState[1];
+      function toggleDetails() {
+        setShowDetails(!showDetails);
+      }
+      var headerTitle = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        use: "headline6"
+      }, title);
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "upload-area6 " + dragging,
-        onDragOver: onDragOver,
-        onDragLeave: onDragLeave,
-        ref: areaElement
-      }, /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
-        resumable: resumable
-      }), /*#__PURE__*/React__default["default"].createElement("label", null, label));
+        className: "viewer"
+      }, /*#__PURE__*/React__default["default"].createElement(Header, {
+        icon: "view",
+        title: headerTitle
+      }, onClose ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        clickable: true,
+        action: onClose
+      }) : null, 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(ImageViewer, {
+        image: 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);
     };
 
     /**
-     * Upload Icon
+     * Kanban
      */
-    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.current) {
-          resumable.assignBrowse(iconElement.current);
-        }
-      }, [iconElement]);
+    var Kanban = function Kanban(_ref) {
+      var children = _ref.children;
+      var hasSwimlanes = React.useMemo(function () {
+        var found = React__default["default"].Children.map(children, function (child) {
+          if (child.type.name === KanbanSwimlane.name) {
+            return child;
+          }
+        });
+        return found.length > 0;
+      });
+      var style = hasSwimlanes ? "with-swimlanes" : "";
       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
+        className: "kanban " + style
+      }, children);
     };
-
-    /**
-     * Upload File
-     */
-    var UploadFile$1 = 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 KanbanHeader = function KanbanHeader(props) {
+      var columns = props.columns;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "kanban-header"
+      }, columns.map(function (column, index) {
+        var icon = column.icon,
+          title = column.title,
+          subtitle = column.subtitle,
+          badge = column.badge;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "kanban-column",
+          key: index
+        }, /*#__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$1, {
+          use: "headline6"
+        }, title), /*#__PURE__*/React__default["default"].createElement(Text$1, {
+          className: "secondary-text",
+          use: "body2"
+        }, subtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "badge"
+        }, badge)));
+      }));
     };
+    var KanbanSwimlane = function KanbanSwimlane(_ref2) {
+      var icon = _ref2.icon,
+        title = _ref2.title,
+        subtitle = _ref2.subtitle,
+        badge = _ref2.badge,
+        children = _ref2.children;
+      var _useState = React.useState(true),
+        unfold = _useState[0],
+        setUnfold = _useState[1];
 
-    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$1, {
-          key: f.name,
-          file: f
+      // cahnge all children headless prop to true
+      // if there is only one child
+      if (children.length === 1) {
+        children = React__default["default"].cloneElement(children, {
+          headless: true
         });
-      }));
+      } else {
+        children = React__default["default"].Children.map(children, function (child) {
+          return React__default["default"].cloneElement(child, {
+            headless: true
+          });
+        });
+      }
+
+      // log al children headless prop
+      children.forEach(function (child) {
+        console.log(child.props.headless);
+      });
+      function toggle() {
+        setUnfold(!unfold);
+      }
+      var toggleIcon = unfold ? "unfold_less" : "unfold_more";
+      var toggleStyle = unfold ? "unfold" : "fold";
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "kanban-swimlane"
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: icon,
+        size: "small"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        use: "headline6"
+      }, title, ":"), /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        className: "secondary-text",
+        use: "body2"
+      }, subtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "badge"
+      }, badge), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: toggleIcon,
+        clickable: true,
+        action: toggle
+      })), /*#__PURE__*/React__default["default"].createElement("main", {
+        className: toggleStyle
+      }, children));
     };
 
     /**
-     * Uploader
+     * Kanban Column
      */
-    var Uploader = function Uploader(_ref) {
-      var icon = _ref.icon,
-        label = _ref.label,
-        _ref$view = _ref.view,
-        view = _ref$view === void 0 ? "area" : _ref$view,
-        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);
-      }
-      function renderView() {
-        switch (view) {
-          case "area":
-            return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
-              resumable: resumable,
-              icon: icon,
-              label: label
-            });
-          case "icon":
-            return /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
-              resumable: resumable,
-              icon: icon
-            });
-          default:
-            return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
-              resumable: resumable,
-              icon: icon,
-              label: label
-            });
-        }
+    var KanbanColumn = function KanbanColumn(_ref3) {
+      var id = _ref3.id,
+        actions = _ref3.actions,
+        _ref3$headless = _ref3.headless,
+        headless = _ref3$headless === void 0 ? false : _ref3$headless,
+        icon = _ref3.icon,
+        title = _ref3.title,
+        subtitle = _ref3.subtitle,
+        badge = _ref3.badge,
+        children = _ref3.children,
+        _ref3$minified = _ref3.minified,
+        minified = _ref3$minified === void 0 ? false : _ref3$minified,
+        _ref3$disabled = _ref3.disabled,
+        disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+      var _useState2 = React.useState(minified),
+        min = _useState2[0],
+        setMin = _useState2[1];
+      function toggle() {
+        setMin(!min);
       }
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "uploader " + className
-      }, state === UPLOAD_STATES.IDLE ? renderView() : /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
-        files: files
-      }));
+      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' : '')
+      }, headless ? "" : /*#__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$1, {
+        use: "headline6"
+      }, title), /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        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
+      }), actions));
     };
 
     /**
-     * Page Context
-     */
-    var PageContext = React__default["default"].createContext({});
-
-    /**
-     * Page Provider
+     * Kanban Card
      */
-    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]
+    var KanbanCard = function KanbanCard(_ref4) {
+      var className = _ref4.className,
+        color = _ref4.color,
+        children = _ref4.children;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "kanban-card " + className + " " + color
       }, children);
     };
 
     /**
-     * Page
+     * Avatar
      */
-    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,
-        className = props.className;
-      return /*#__PURE__*/React__default["default"].createElement(PageProvider, {
-        context: context
-      }, /*#__PURE__*/React__default["default"].createElement("article", {
-        className: "page6 " + layout + " " + className
-      }, children));
+    var Avatar = function Avatar(props) {
+      var id = props.id,
+        name = props.name,
+        className = props.className,
+        src = props.src,
+        _props$size = props.size,
+        size = _props$size === void 0 ? "small" : _props$size,
+        _props$clickable = props.clickable,
+        clickable = _props$clickable === void 0 ? false : _props$clickable,
+        action = props.action;
+      function click() {
+        if (clickable) {
+          action(id);
+        }
+      }
+      var clickableStyle = clickable ? 'clickable' : '';
+      var style = "avatar " + size + " " + clickableStyle + " " + className;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: style,
+        onClick: click
+      }, src ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: src
+      }) : /*#__PURE__*/React__default["default"].createElement("span", null, name));
+    };
+
+    var WaitScreen = function WaitScreen() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "wait-screen"
+      }, /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
+        size: "large"
+      }));
     };
 
+    moment__default["default"].locale('es');
+    var moment = momentRange.extendMoment(moment__default["default"]);
+
     /**
-     * Site Provider
+     * Calendar
      */
-    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),
-        showConsole = _useState6[0],
-        setShowConsole = _useState6[1];
-      var _useState7 = React.useState([]),
-        consoleLines = _useState7[0],
-        setConsoleLines = _useState7[1];
-      var _useState8 = React.useState(),
-        page = _useState8[0],
-        setPage = _useState8[1];
-      var _useState9 = React.useState(),
-        dialog = _useState9[0],
-        setDialog = _useState9[1];
-      var _useState10 = React.useState(),
-        promptDialog = _useState10[0],
-        setPromptDialog = _useState10[1];
-      var _useState11 = React.useState(),
-        preview = _useState11[0],
-        setPreview = _useState11[1];
-      var _useState12 = React.useState(),
-        breadcrumb = _useState12[0],
-        setBreadcrumb = _useState12[1];
-      var value = {
-        lang: lang,
-        setLang: setLang,
-        dictionary: dictionary,
-        setDictionary: setDictionary,
-        translate: function translate(key) {
-          if (!key) return key;
-          if (dictionary === undefined) return key;
-          var term = dictionary[key];
-          return term ? term[lang] : key;
-        },
-        sideNav: sideNav,
-        setSideNav: setSideNav,
-        showNav: showNav,
-        setShowNav: setShowNav,
-        info: info,
-        openInfo: function openInfo(info) {
-          setInfo(info);
-        },
-        closeInfo: function closeInfo() {
-          setInfo(null);
-        },
-        consoleLines: consoleLines,
-        showConsole: showConsole,
-        toggleConsole: function toggleConsole() {
-          setShowConsole(!showConsole);
-        },
-        writeLog: function writeLog(line) {
-          var next = consoleLines.concat(line);
-          setConsoleLines(next);
-        },
-        clearLog: function clearLog() {
-          setConsoleLines([]);
-        },
-        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);
-        },
-        confirm: function confirm(message) {
-          return window.confirm(message);
-        },
-        prompt: function prompt(message) {
-          return window.prompt(message);
-        },
-        promptDialog: promptDialog,
-        openPromptDialog: function openPromptDialog(dialog) {
-          setPromptDialog(dialog);
-        },
-        closePromptDialog: function closePromptDialog() {
-          setPromptDialog(null);
-        },
-        notify: function notify(_ref2) {
-          var title = _ref2.title,
-            body = _ref2.body,
-            _ref2$type = _ref2.type,
-            type = _ref2$type === void 0 ? "success" : _ref2$type,
-            _ref2$duration = _ref2.duration,
-            duration = _ref2$duration === void 0 ? 3000 : _ref2$duration,
-            onRemoval = _ref2.onRemoval;
-          reactNotificationsComponent.Store.addNotification({
-            title: title,
-            message: body,
-            type: type,
-            insert: "top",
-            container: "top-right",
-            animationIn: ["animate__animated", "animate__fadeIn"],
-            animationOut: ["animate__animated", "animate__fadeOut"],
-            dismiss: {
-              duration: duration,
-              onScreen: true
-            },
-            onRemoval: onRemoval
-          });
+    var Calendar = function Calendar(props) {
+      var _props$events = props.events,
+        events = _props$events === void 0 ? [] : _props$events,
+        children = props.children,
+        onChange = props.onChange,
+        onRange = props.onRange;
+      var _useState = React.useState(props.range || "year"),
+        range = _useState[0],
+        setRange = _useState[1];
+      function onChangeRange(range) {
+        setRange(range);
+        if (onRange) onRange(range);
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "calendar"
+      }, /*#__PURE__*/React__default["default"].createElement(CalendarRangeControl, {
+        range: range,
+        onChange: onChangeRange
+      }), range === "year" && /*#__PURE__*/React__default["default"].createElement(YearCalendar, {
+        events: events,
+        onChange: onChange
+      }, children), range === "month" && /*#__PURE__*/React__default["default"].createElement(MonthCalendar, {
+        events: events,
+        onChange: onChange,
+        onRange: onChangeRange
+      }, children));
+    };
+
+    /**
+     * CalendarRangeControl
+     */
+    var CalendarRangeControl = function CalendarRangeControl(props) {
+      var range = props.range,
+        onChange = props.onChange;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "calendar-range-control"
+      }, /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Year",
+        outlined: range == "year",
+        action: function action() {
+          return onChange("year");
         }
-      };
-      return /*#__PURE__*/React__default["default"].createElement(SiteContext.Provider, {
-        value: value
-      }, children);
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Month",
+        outlined: range == "month",
+        action: function action() {
+          return onChange("month");
+        }
+      }));
     };
 
     /**
-     * Site
+     * MonthCalendar
      */
-    var Site = function Site(_ref3) {
-      var icon = _ref3.icon,
-        iconSrc = _ref3.iconSrc,
-        title = _ref3.title,
-        toolbar = _ref3.toolbar,
-        footer = _ref3.footer,
-        children = _ref3.children,
-        init = _ref3.init,
-        min = _ref3.min,
-        lang = _ref3.lang,
-        dictionary = _ref3.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,
-        iconSrc: iconSrc,
-        title: title
-      }), /*#__PURE__*/React__default["default"].createElement(SiteToolBar, null, toolbar), /*#__PURE__*/React__default["default"].createElement(SiteMenu, {
-        iconSrc: iconSrc,
-        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(SitePromptDialog, null), /*#__PURE__*/React__default["default"].createElement(SitePreview, null), /*#__PURE__*/React__default["default"].createElement(SiteNotifications, null), /*#__PURE__*/React__default["default"].createElement(SiteFooter, null, footer)));
+    var MonthCalendar = function MonthCalendar(props) {
+      var _props$events2 = props.events,
+        events = _props$events2 === void 0 ? [] : _props$events2,
+        children = props.children,
+        onChange = props.onChange;
+      var _useState2 = React.useState(),
+        position = _useState2[0],
+        setPosition = _useState2[1];
+      React.useEffect(function () {
+        var today = moment();
+        setPosition(today);
+      }, []);
+      React.useEffect(function () {
+        if (position && onChange) {
+          var _firstDayOfMonth = position.clone().startOf('month');
+          var _firstDayOfRange = _firstDayOfMonth.clone().startOf('isoweek');
+          var _lastDayOfMonth = position.clone().endOf('month');
+          var _lastDayOfRange = _lastDayOfMonth.clone().endOf('isoweek');
+          var _range = moment.range(_firstDayOfRange, _lastDayOfRange);
+          onChange(position, _range);
+        }
+      }, [position]);
+      function next() {
+        var next = position.clone().add(1, 'month');
+        setPosition(next);
+      }
+      function prev() {
+        var prev = position.clone().subtract(1, 'month');
+        setPosition(prev);
+      }
+      function today() {
+        var today = moment();
+        setPosition(today);
+      }
+      if (!position) return "...";
+      var monthName = position.format("MMMM");
+      var year = position.format("YYYY");
+      var firstDayOfMonth = position.clone().startOf('month');
+      var firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+      var lastDayOfMonth = position.clone().endOf('month');
+      var lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
+      var range = moment.range(firstDayOfRange, lastDayOfRange);
+      var days = Array.from(range.by('days'));
+      var cells = days.map(function (day) {
+        var eventsOfDay = events.filter(function (event) {
+          var eventDay = moment(event.date);
+          return eventDay.isSame(day, 'day');
+        });
+        var sameMonthStyle = day.isSame(moment(position), 'month') ? '' : 'other-month';
+        return {
+          day: day,
+          events: eventsOfDay,
+          sameMonthStyle: sameMonthStyle
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "month-calendar"
+      }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", /*#__PURE__*/React__default["default"].createElement(Text$1, null, monthName), " ", year), /*#__PURE__*/React__default["default"].createElement(Button, {
+        icon: "chevron_left",
+        action: prev
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Today",
+        outlined: true,
+        action: today
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        icon: "chevron_right",
+        action: next
+      })), /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Mon")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Tue")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Wed")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Thu")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Fri")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Sat")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Sun"))), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
+        return /*#__PURE__*/React__default["default"].createElement(DayCell, {
+          key: cell.day,
+          cell: cell
+        }, children);
+      })));
     };
-    var SiteNotifications = function SiteNotifications() {
-      return /*#__PURE__*/React__default["default"].createElement(reactNotificationsComponent.ReactNotifications, null);
+    var DayCell = function DayCell(props) {
+      var _props$cell = props.cell,
+        cell = _props$cell === void 0 ? [] : _props$cell,
+        children = props.children;
+      var day = cell.day,
+        events = cell.events,
+        sameMonthStyle = cell.sameMonthStyle;
+      var todayStyle = day.isSame(moment(), 'day') ? 'today' : '';
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "day-cell " + todayStyle + " " + sameMonthStyle
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, day.format("DD")), /*#__PURE__*/React__default["default"].createElement("main", null, events.map(function (event) {
+        return /*#__PURE__*/React__default["default"].createElement(Event, {
+          key: event.id,
+          event: event
+        }, children);
+      })));
     };
 
     /**
-     * Site Header
+     * Event
      */
-    var SiteHeader = function SiteHeader(props) {
-      var _props$icon = props.icon,
-        icon = _props$icon === void 0 ? "equalizer" : _props$icon,
-        iconSrc = props.iconSrc,
-        title = props.title;
-      return /*#__PURE__*/React__default["default"].createElement(Header, {
-        icon: icon,
-        iconSrc: iconSrc,
-        title: title
-      });
+    var Event = function Event(props) {
+      var event = props.event,
+        children = props.children;
+      if (children) {
+        var element = React__default["default"].Children.toArray(children)[0];
+        return React__default["default"].cloneElement(element, {
+          event: event
+        });
+      } else {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "event"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "event-name"
+        }, event.title));
+      }
     };
 
     /**
-     * Site ToolBar
+     * YearCalendar
      */
-    var SiteToolBar = function SiteToolBar(_ref4) {
-      var children = _ref4.children;
-      return /*#__PURE__*/React__default["default"].createElement("nav", null, children);
+    var YearCalendar = function YearCalendar(props) {
+      var _props$events3 = props.events,
+        events = _props$events3 === void 0 ? [] : _props$events3,
+        children = props.children,
+        onChange = props.onChange;
+      var _useState3 = React.useState(),
+        position = _useState3[0],
+        setPosition = _useState3[1];
+      React.useEffect(function () {
+        var today = moment();
+        setPosition(today);
+      }, []);
+      React.useEffect(function () {
+        if (position && onChange) {
+          var _firstDayOfYear = position.clone().startOf('year');
+          var firstDayOfRange = _firstDayOfYear.clone().startOf('isoweek');
+          var _lastDayOfYear = position.clone().endOf('year');
+          var lastDayOfRange = _lastDayOfYear.clone().endOf('isoweek');
+          var range = moment.range(firstDayOfRange, lastDayOfRange);
+          onChange(position, range);
+        }
+      }, [position]);
+      function next() {
+        var next = position.clone().add(1, 'year');
+        setPosition(next);
+      }
+      function prev() {
+        var prev = position.clone().subtract(1, 'year');
+        setPosition(prev);
+      }
+      function today() {
+        var today = moment();
+        setPosition(today);
+      }
+      if (!position) return "...";
+      var year = position.format("YYYY");
+      var firstDayOfYear = moment(position).startOf('year');
+      var lastDayOfYear = moment(position).endOf('year');
+      var months = [];
+      for (var currentMonth = moment(firstDayOfYear); currentMonth.isBefore(lastDayOfYear); currentMonth.add(1, 'month')) {
+        months.push(moment(currentMonth));
+      }
+      var cells = months.map(function (month) {
+        var firstDayOfMonth = month.clone().startOf('month');
+        var firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+        var lastDayOfMonth = month.clone().endOf('month');
+        var lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
+        var range = moment.range(firstDayOfRange, lastDayOfRange);
+        var days = Array.from(range.by('days'));
+        var cells = days.map(function (day) {
+          var eventsOfDay = events.filter(function (event) {
+            var eventDay = moment(event.date);
+            return eventDay.isSame(day, 'day');
+          });
+          var sameMonthStyle = day.isSame(moment(month), 'month') ? '' : 'other-month';
+          return {
+            day: day,
+            events: eventsOfDay,
+            sameMonthStyle: sameMonthStyle
+          };
+        });
+        return {
+          month: month,
+          cells: cells
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "year-calendar"
+      }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", /*#__PURE__*/React__default["default"].createElement(Text$1, null, year)), /*#__PURE__*/React__default["default"].createElement(Button, {
+        icon: "chevron_left",
+        action: prev
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Today",
+        outlined: true,
+        action: today
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        icon: "chevron_right",
+        action: next
+      })), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
+        return /*#__PURE__*/React__default["default"].createElement(MonthCell, {
+          key: cell.month,
+          cell: cell
+        }, children);
+      })));
     };
 
     /**
-     * Site Footer
+     * MonthCell
      */
-    var SiteFooter = function SiteFooter(_ref5) {
-      var children = _ref5.children;
-      return /*#__PURE__*/React__default["default"].createElement("footer", null, children);
+    var MonthCell = function MonthCell(props) {
+      var _props$cell2 = props.cell,
+        cell = _props$cell2 === void 0 ? [] : _props$cell2,
+        children = props.children;
+      var month = cell.month,
+        cells = cell.cells;
+      var monthName = month.format("MMMM");
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "month-cell"
+      }, /*#__PURE__*/React__default["default"].createElement("nav", null, monthName), /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Mon")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Tue")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Wed")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Thu")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Fri")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Sat")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Sun"))), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
+        return /*#__PURE__*/React__default["default"].createElement(DayCell, {
+          key: cell.day,
+          cell: cell
+        }, children);
+      })));
     };
 
-    /**
-     * Site Aside
-     */
-    var SiteAside = function SiteAside() {
-      var context = React.useContext(SiteContext);
-      return context.info ? /*#__PURE__*/React__default["default"].createElement("aside", null, context.info) : '';
-    };
+    var ranges = momentRange.extendMoment(moment__default["default"]);
+    var DATE_RANGE = [{
+      label: "Week",
+      value: "week"
+    }, {
+      label: "Month",
+      value: "month"
+    }, {
+      label: "Year",
+      value: "year"
+    }];
 
     /**
-     * SiteMenu
+     * Planner
      */
-    var SiteMenu = function SiteMenu(_ref6) {
-      var iconSrc = _ref6.iconSrc,
-        title = _ref6.title,
-        children = _ref6.children,
-        min = _ref6.min;
-      var context = React.useContext(SiteContext);
-      var page = context.page,
-        sideNav = context.sideNav,
-        setSideNav = context.setSideNav,
-        showNav = context.showNav;
-      React.useEffect(function () {
-        if (min) context.setSideNav('min');
+    var Planner = function Planner(_ref) {
+      var title = _ref.title,
+        _ref$events = _ref.events,
+        events = _ref$events === void 0 ? [] : _ref$events,
+        _ref$lanes = _ref.lanes,
+        lanes = _ref$lanes === void 0 ? [] : _ref$lanes,
+        _ref$navigation = _ref.navigation,
+        navigation = _ref$navigation === void 0 ? true : _ref$navigation,
+        onSelectCell = _ref.onSelectCell,
+        focusEvent = _ref.focusEvent,
+        _ref$config = _ref.config,
+        config = _ref$config === void 0 ? {
+          range: "year",
+          from: "2022-01-01",
+          to: "2022-12-30"
+        } : _ref$config,
+        onChange = _ref.onChange;
+      var _useState = React.useState(config.range),
+        dateRange = _useState[0],
+        setDateRange = _useState[1];
+      var _useState2 = React.useState(config.from),
+        from = _useState2[0],
+        setFrom = _useState2[1];
+      var _useState3 = React.useState(config.to),
+        to = _useState3[0],
+        setTo = _useState3[1];
+      var thisMondayElement = React.useRef(null);
+      var gotoMonday = React.useCallback(function (node) {
+        var element = node;
+        if (element) element.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'start'
+        });
       }, []);
-      function toggle() {
-        var next = sideNav === 'max' ? 'min' : 'max';
-        setSideNav(next);
+      React.useEffect(function () {
+        var element = document.getElementById(focusEvent);
+        if (element) element.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center'
+        });
+      }, [focusEvent]);
+      React.useEffect(function () {
+        var today = moment__default["default"]();
+        var from_date = today.startOf(dateRange).format("YYYY-MM-DD");
+        var to_date = today.endOf(dateRange).format("YYYY-MM-DD");
+        setFrom(from_date);
+        setTo(to_date);
+      }, [dateRange]);
+      function next() {
+        var actual = moment__default["default"](from);
+        var next = actual.add(1, dateRange);
+        var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
+        var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
+        setFrom(from_date);
+        setTo(to_date);
       }
-      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
+      function prev() {
+        var actual = moment__default["default"](from);
+        var next = actual.subtract(1, dateRange);
+        var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
+        var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
+        setFrom(from_date);
+        setTo(to_date);
+      }
+      function selectCell(lane, date) {
+        if (onSelectCell) onSelectCell(lane, date);
+      }
+      function showThisWeek() {
+        var element = thisMondayElement.current;
+        //const element = document.querySelector(".thisMonday")
+        console.log("Show this week", element);
+        if (element) element.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'start'
         });
-        return sections;
-      }, {}) : {};
-      var style = sideNav === 'max' ? 'max' : 'min';
-      var toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right';
-      var menutTitle = sideNav === 'max' ? title : '';
-      return /*#__PURE__*/React__default["default"].createElement("menu", {
-        className: style + " " + (showNav ? 'show' : '')
-      }, /*#__PURE__*/React__default["default"].createElement(Header, {
-        title: menutTitle,
-        iconSrc: iconSrc
-      }), /*#__PURE__*/React__default["default"].createElement("main", null, Object.keys(sections).map(function (title) {
-        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-          key: title
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "section-title " + style
-        }, sideNav === "max" ? title : ''), sections[title].map(function (_ref7) {
-          var id = _ref7.id,
-            _ref7$icon = _ref7.icon,
-            icon = _ref7$icon === void 0 ? 'info' : _ref7$icon,
-            title = _ref7.title;
-          var styleItem = id === page ? 'selected' : '';
-          var titleTxt = context.translate(title);
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "site-menu-item " + styleItem,
-            key: id,
-            onClick: function onClick() {
-              return _goto(id);
-            }
-          }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
-            text: title,
-            top: ".5rem",
-            left: "4.5rem"
-          }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-            key: id,
-            icon: icon,
-            clickable: true,
-            action: function action() {
-              return _goto(id);
-            }
-          })), sideNav === 'max' ? /*#__PURE__*/React__default["default"].createElement("label", null, titleTxt) : null);
-        }), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "section-divider"
-        }));
-      })), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: toggleIcon,
+      }
+      var period = React.useMemo(function () {
+        var start = ranges(from, "YYYY-MM-DD");
+        var end = ranges(to, "YYYY-MM-DD");
+        var range = ranges.range(start, end);
+        var period = Array.from(range.by("day")).map(function (m) {
+          return {
+            year: m.year(),
+            month: m.month(),
+            day: m.date(),
+            moment: m
+          };
+        });
+        return period;
+      }, [from, to]);
+      var label = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        use: "headline6"
+      }, title);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "planner-box"
+      }, navigation ? /*#__PURE__*/React__default["default"].createElement(Header, {
+        title: label
+      }, "\xA0\xA0", /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Esta Semana",
+        outlined: true,
+        action: showThisWeek
+      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "chevron_right",
+        clickable: true,
+        action: next
+      }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+        id: "to",
+        type: "date",
+        label: "Hasta",
+        value: to,
+        onChange: function onChange(id, value) {
+          return setTo(value);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "expand"
+      }), /*#__PURE__*/React__default["default"].createElement(DropDown, {
+        id: "ranges",
+        label: "Rango",
+        options: DATE_RANGE,
+        value: dateRange,
+        onChange: function onChange(id, value) {
+          return setDateRange(value);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "expand"
+      }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+        id: "from",
+        type: "date",
+        label: "Desde",
+        value: from,
+        onChange: function onChange(id, value) {
+          return setFrom(value);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "chevron_left",
         clickable: true,
-        action: toggle
-      })));
+        action: prev
+      })) : null, /*#__PURE__*/React__default["default"].createElement("main", {
+        className: "planner"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "column0"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "column-header"
+      }), lanes.map(function (lane) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "row-header"
+        }, lane.label);
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "rows"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row row0"
+      }, period.map(function (date, index) {
+        var first = index === 0 || date.day === 1 ? "first" : "";
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "column-header"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "month-header " + first
+        }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+          use: "overline"
+        }, date.moment.format("MMM"))));
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row row1"
+      }, period.map(function (date) {
+        var isWekend = [0, 6].includes(date.moment.day());
+        var weekend = isWekend ? "weekend" : "";
+        var thisWeek = moment__default["default"]().startOf('week').isSame(date.moment, "week") ? "thisWeek" : "";
+        var today = moment__default["default"]();
+        var weekStart = today.clone().startOf('week');
+        var isThisMonday = date.moment.isSame(weekStart);
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: "column-" + date.moment.dayOfYear(),
+          id: isThisMonday ? "thisMonday" : "",
+          className: "column-header",
+          ref: isThisMonday ? thisMondayElement : null
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "date-header " + weekend + " " + thisWeek,
+          ref: isThisMonday ? gotoMonday : null
+        }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+          use: "headline6"
+        }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React__default["default"].createElement(Text$1, {
+          use: "caption"
+        }, date.moment.format("ddd"))));
+      })), lanes.map(function (lane) {
+        return /*#__PURE__*/React__default["default"].createElement(PlannerRow, {
+          key: lane.id,
+          lane: lane,
+          events: events,
+          period: period,
+          onSelectCell: selectCell,
+          onChange: onChange
+        });
+      }))));
     };
 
     /**
-     * SitePage
+     * Planner Row
      */
-    var SitePage = function SitePage(_ref8) {
-      var children = _ref8.children,
-        init = _ref8.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;
+    var PlannerRow = function PlannerRow(props) {
+      var lane = props.lane,
+        _props$events = props.events,
+        events = _props$events === void 0 ? [] : _props$events,
+        period = props.period,
+        onSelectCell = props.onSelectCell,
+        onChange = props.onChange;
+      var rowEvents = events.filter(function (event) {
+        return event.lane === lane.id;
+      });
+      function change(data) {
+        if (onChange) onChange(data);
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row"
+      }, period.map(function (date) {
+        var slotDate = new Date(date.year, date.month, date.day);
+        slotDate.setHours(0, 0, 0);
+        var cellEvents = rowEvents.filter(function (event) {
+          var eventDate = new Date(event.date);
+          eventDate.setHours(0, 0, 0);
+          return eventDate.getTime() === slotDate.getTime();
+        });
+        return /*#__PURE__*/React__default["default"].createElement(PlannerCell, {
+          key: lane.id + "-" + slotDate.toString(),
+          lane: lane,
+          date: date,
+          events: cellEvents,
+          onSelect: onSelectCell,
+          onDrop: change
+        });
       }));
     };
 
     /**
-     * Site Dialog
+     * Planner Cell
      */
-    var SiteDialog = function SiteDialog() {
-      var context = React.useContext(SiteContext);
-      return context.dialog ? context.dialog : '';
+    var PlannerCell = function PlannerCell(_ref2) {
+      var lane = _ref2.lane,
+        events = _ref2.events,
+        date = _ref2.date,
+        onSelect = _ref2.onSelect,
+        onDrop = _ref2.onDrop;
+      var _useState4 = React.useState(false),
+        dragOver = _useState4[0],
+        setDragOver = _useState4[1];
+      function select() {
+        if (onSelect) onSelect(lane, date.moment.format("YYYY-MM-DD"));
+      }
+      function onDragOver(event) {
+        if (!dragOver) setDragOver(true);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      function onDragLeave(event) {
+        setDragOver(false);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      function drop(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        var id = event.dataTransfer.getData("text");
+        if (onDrop) onDrop({
+          id: id,
+          lane: lane.id,
+          date: date.moment.format("YYYY-MM-DD")
+        });
+        setDragOver(false);
+      }
+      var isWekend = [0, 6].includes(date.moment.day());
+      var weekend = isWekend ? "weekend" : "";
+      var today = moment__default["default"]();
+      var weekStart = today.clone().startOf('week');
+      var thisMonday = date.moment.isSame(weekStart) ? "thisMonday" : "";
+      var dragOverStyle = dragOver ? "drag-over" : "";
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "cell " + thisMonday + " " + weekend + " " + dragOverStyle,
+        onDragOver: onDragOver,
+        onDragLeave: onDragLeave,
+        onDrop: drop,
+        onClick: select
+      }, events.map(function (event) {
+        var _event$Renderer = event.Renderer,
+          Renderer = _event$Renderer === void 0 ? EventCard : _event$Renderer;
+        return /*#__PURE__*/React__default["default"].createElement(Renderer, {
+          key: event.id,
+          event: event
+        });
+      }));
     };
-
-    /**
-     * Site Promtp Dialog
-     */
-    var SitePromptDialog = function SitePromptDialog() {
-      var context = React.useContext(SiteContext);
-      return context.promptDialog ? context.promptDialog : '';
+    var EventCard = function EventCard(props) {
+      var event = props.event;
+      var title = event.title,
+        color = event.color;
+      var style = {
+        backgroundColor: color,
+        color: "white"
+      };
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        draggable: "true",
+        className: "event-card",
+        style: style
+      }, title);
     };
 
     /**
-     * Site Preview
+     * Upload Area
      */
-    var SitePreview = function SitePreview() {
-      var context = React.useContext(SiteContext);
-      return context.preview ? /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "site-preview"
-      }, context.preview) : '';
+    var UploadArea = function UploadArea(props) {
+      var _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];
+      var resumable = props.resumable;
+      React.useEffect(function () {
+        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, {
+        resumable: resumable
+      }), /*#__PURE__*/React__default["default"].createElement("label", null, label));
     };
 
     /**
-     * Site Console
-     */
-    var SiteConsole = function SiteConsole() {
-      var context = React.useContext(SiteContext);
-      function clear() {
-        context.clearLog();
-      }
-      return context.showConsole ? /*#__PURE__*/React__default["default"].createElement("div", {
-        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("nav", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "clear_all",
-        size: "small",
-        clickable: true,
-        action: clear
-      })), /*#__PURE__*/React__default["default"].createElement("main", null, context.consoleLines.map(function (line, index) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          key: "log-" + index
-        }, line);
-      }))) : '';
+     * 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.current) {
+          resumable.assignBrowse(iconElement.current);
+        }
+      }, [iconElement]);
+      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
     };
 
     /**
-     * Dialog
-     * 
-     * <Dialog title={title} open={true} actions={actions}>
+     * Upload File
      */
-    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,
-        toolbar = props.toolbar,
-        children = props.children,
-        actions = props.actions,
-        className = props.className,
-        onClose = props.onClose,
-        _props$overlayCanClos = props.overlayCanClose,
-        overlayCanClose = _props$overlayCanClos === void 0 ? true : _props$overlayCanClos;
-      function overlayClose() {
-        if (overlayCanClose) {
-          close();
-        }
-      }
-      function close() {
-        if (onClose) onClose();
-        if (className === "prompt") {
-          site.closePromptDialog();
-        } else {
-          site.closeDialog();
-        }
-      }
+    var UploadFile$1 = 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: "overlay " + className,
-        onMouseDown: overlayClose
-      }), /*#__PURE__*/React__default["default"].createElement("dialog", {
-        className: "dialog-panel " + className
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, icon ? /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+        className: "upload-file"
+      }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: icon
-      }) : null, /*#__PURE__*/React__default["default"].createElement(Text, null, title), toolbar), /*#__PURE__*/React__default["default"].createElement("main", null, children), /*#__PURE__*/React__default["default"].createElement("footer", null, actions)));
+      }) : 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$1, {
+          key: f.name,
+          file: f
+        });
+      }));
     };
 
     /**
-     * View
+     * Uploader
      */
-    var View = function View(props) {
-      var id = props.id,
-        className = props.className,
-        icon = props.icon,
-        title = props.title,
-        toolbar = props.toolbar,
-        menu = props.menu,
-        info = props.info,
-        onClose = props.onClose,
-        _props$canCollapse = props.canCollapse,
-        canCollapse = _props$canCollapse === void 0 ? false : _props$canCollapse,
-        children = props.children;
-      var _useState = React.useState(true),
-        open = _useState[0],
-        setOpen = _useState[1];
-      function toggle() {
-        setOpen(!open);
+    var Uploader = function Uploader(_ref) {
+      var icon = _ref.icon,
+        label = _ref.label,
+        _ref$view = _ref.view,
+        view = _ref$view === void 0 ? "area" : _ref$view,
+        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 close() {
-        if (onClose) onClose();
+      function onFileProgress(file) {
+        file.uploadState = UPLOAD_STATES.RUNNING;
+        var progress = file.progress();
+        setProgress(progress);
+        if (onProgress) onProgress(files);
       }
-      return /*#__PURE__*/React__default["default"].createElement("section", {
-        id: id,
-        className: "view " + className
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, canCollapse ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "expand_more",
-        size: "small",
-        clickable: true,
-        action: toggle
-      }) : null, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: icon,
-        size: "small"
-      }) : null, title ? /*#__PURE__*/React__default["default"].createElement("label", null, title) : null, menu ? /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
-        align: "alignRight"
-      }, menu) : null, onClose ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "close",
-        size: "small",
-        clickable: true,
-        action: close
-      }) : null), toolbar ? /*#__PURE__*/React__default["default"].createElement("nav", null, toolbar) : null, open ? /*#__PURE__*/React__default["default"].createElement("main", null, children) : null, info ? /*#__PURE__*/React__default["default"].createElement("footer", null, info) : null);
-    };
-    var TabbedView = function TabbedView(props) {
-      var title = props.title,
-        className = props.className,
-        selected = props.selected;
-      var _useState2 = React.useState(0),
-        tab = _useState2[0],
-        setTab = _useState2[1];
-      var children = React__default["default"].Children.toArray(props.children);
-      var tabs = children.map(function (child) {
-        return /*#__PURE__*/React__default["default"].createElement(Tab, {
-          key: child.props.label,
-          label: child.props.label
-        });
-      });
-      React.useEffect(function () {
-        if (selected && selected !== tab) setTab(selected);
-      }, [selected]);
-      var toolbar = /*#__PURE__*/React__default["default"].createElement(Tabs, {
-        selected: tab,
-        onChange: function onChange(tab) {
-          return setTab(tab);
+      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);
+      }
+      function renderView() {
+        switch (view) {
+          case "area":
+            return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
+              resumable: resumable,
+              icon: icon,
+              label: label
+            });
+          case "icon":
+            return /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
+              resumable: resumable,
+              icon: icon
+            });
+          default:
+            return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
+              resumable: resumable,
+              icon: icon,
+              label: label
+            });
         }
-      }, tabs);
-      return /*#__PURE__*/React__default["default"].createElement(View, {
-        title: title,
-        toolbar: toolbar,
-        className: className
-      }, /*#__PURE__*/React__default["default"].createElement(Stack, {
-        selected: tab
-      }, children));
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "uploader " + className
+      }, state === UPLOAD_STATES.IDLE ? renderView() : /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
+        files: files
+      }));
     };
 
     /**
@@ -3806,7 +4322,7 @@
         },
         disabled: !canClose()
       }));
-      var title = /*#__PURE__*/React__default["default"].createElement(Text, {
+      var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "headline6"
       }, label);
       return /*#__PURE__*/React__default["default"].createElement(Dialog, {
@@ -3923,7 +4439,7 @@
       var folder = folders.find(function (folder) {
         return folder.id === selectedFolder;
       });
-      var folderTitle = folder ? /*#__PURE__*/React__default["default"].createElement(Text, null, folder.title) : '';
+      var folderTitle = folder ? /*#__PURE__*/React__default["default"].createElement(Text$1, null, folder.title) : '';
       function switchView() {
         setView(view === 'grid' ? 'list' : 'grid');
       }
@@ -4131,7 +4647,7 @@
         className: "empty"
       }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: icon
-      })), /*#__PURE__*/React__default["default"].createElement("br", null), /*#__PURE__*/React__default["default"].createElement(Text, {
+      })), /*#__PURE__*/React__default["default"].createElement("br", null), /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "subtitle2"
       }, text));
     };
@@ -4263,7 +4779,7 @@
         }, /*#__PURE__*/React__default["default"].createElement("div", null, id === "checked" && onCheckAll ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
           onChange: checkAll,
           value: allChecked
-        }) : /*#__PURE__*/React__default["default"].createElement(Text, {
+        }) : /*#__PURE__*/React__default["default"].createElement(Text$1, {
           key: "th_" + id
         }, label), sortable ? /*#__PURE__*/React__default["default"].createElement(SortIcon, {
           sortDir: sortDir[id],
@@ -4990,7 +5506,7 @@
         onDelete = _ref2.onDelete;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "token"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "caption",
         tag: "div"
       }, text), /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -5026,7 +5542,7 @@
         children = _ref2.children,
         actions = _ref2.actions,
         onSelect = _ref2.onSelect;
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, {
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text$1, {
         format: TEXTFORMATS.STRING
       }, label) : null;
       function select() {
@@ -5066,7 +5582,7 @@
         if (onSelect) onSelect(id);
       }
       var style = selected ? "selected" : "";
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, {
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text$1, {
         format: TEXTFORMATS.STRING
       }, label) : null;
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5849,7 +6365,7 @@
         }).map(function (task) {
           return {
             id: task.id,
-            state: /*#__PURE__*/React__default["default"].createElement(Text, null, task.state),
+            state: /*#__PURE__*/React__default["default"].createElement(Text$1, null, task.state),
             description: task.description,
             message: task.message,
             progress: /*#__PURE__*/React__default["default"].createElement(LinearProgress, {
@@ -5951,7 +6467,6 @@
       }
       function handleFiles(files) {
         var file = files[0];
-        console.log("handleFiles", files, file);
         setFile(file);
       }
       function handleFile(e) {
@@ -6486,7 +7001,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, {
+      }, /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "caption"
       }, "Tree Editor")), /*#__PURE__*/React__default["default"].createElement(Tree, null, nodes.map(function (node, index) {
         return /*#__PURE__*/React__default["default"].createElement(TreeNode, {
@@ -6638,7 +7153,7 @@
       var sections = content.sections();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "entity-editor"
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text, {
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "caption"
       }, label)), sections.map(function (section) {
         var title = section.title,
@@ -6885,7 +7400,7 @@
       }
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "multiselection-editor"
-      }, /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement(Text, null, label)), buildOptions().map(function (option) {
+      }, /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement(Text$1, null, label)), buildOptions().map(function (option) {
         var checked = value.includes(option.value);
         switch (format) {
           case FORMATS$1.CHECKBOX:
@@ -7089,7 +7604,7 @@
           className: "empty-message"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: "search_off"
-        }), /*#__PURE__*/React__default["default"].createElement(Text, null, "No Result Found"));
+        }), /*#__PURE__*/React__default["default"].createElement(Text$1, null, "No Result Found"));
         var groups = items.reduce(function (groups, item) {
           var groupName = item[groupBy];
           if (!groupName) groupName = ("NO " + groupBy).toUpperCase();
@@ -7182,7 +7697,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, null, title)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
       }, /*#__PURE__*/React__default["default"].createElement(DropDown, {
         id: "groupBy",
         label: "Agrupar Por",
@@ -7451,7 +7966,7 @@
         disabled: !isValid,
         raised: true
       }));
-      var title = /*#__PURE__*/React__default["default"].createElement(Text, {
+      var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "headline6"
       }, label);
       var content = new Content(type, form);
@@ -7467,7 +7982,7 @@
         className: className,
         outlined: outlined
       }), errors.map(function (error) {
-        return /*#__PURE__*/React__default["default"].createElement(Text, {
+        return /*#__PURE__*/React__default["default"].createElement(Text$1, {
           use: "overline",
           tag: "div",
           className: "error"
@@ -7533,7 +8048,7 @@
         disabled: !isValid,
         raised: true
       }));
-      var title = /*#__PURE__*/React__default["default"].createElement(Text, {
+      var title = /*#__PURE__*/React__default["default"].createElement(Text$1, {
         use: "headline6"
       }, label);
       var content = new Content(type, form);
@@ -7548,7 +8063,7 @@
         filter: filterForm,
         className: className
       }), errors.map(function (error) {
-        return /*#__PURE__*/React__default["default"].createElement(Text, {
+        return /*#__PURE__*/React__default["default"].createElement(Text$1, {
           use: "overline",
           tag: "div",
           className: "error"
@@ -7775,7 +8290,7 @@
       var hiddenStyle = pageContext.selected ? "hidden" : "";
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
         className: "collection-page " + className,
-        title: /*#__PURE__*/React__default["default"].createElement(Text, null, title2)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title2)
       }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
         icon: "add",
         label: "Add",
@@ -8255,7 +8770,7 @@
         }
       }
       var hasMenu = canDelete;
-      var saveLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "Guardar Cambios");
+      var saveLabel = /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Guardar Cambios");
       return selected && form ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
         icon: icon,
         title: renderTitle()
@@ -8698,7 +9213,7 @@
       }, total), " ", title);
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
         className: "table-page " + className,
-        title: /*#__PURE__*/React__default["default"].createElement(Text, null, title2)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title2)
       }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
         icon: "add",
         label: "A\xF1adir",
@@ -8855,7 +9370,7 @@
       }
       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, null, "Queries")
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Queries")
       }), /*#__PURE__*/React__default["default"].createElement("main", {
         className: "table-queries"
       }, queries ? queries.filter(function (query) {
@@ -8953,7 +9468,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, null, "Filters")
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Filters")
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "filter_list_off",
         size: "small",
@@ -9080,7 +9595,7 @@
           className: "empty-message"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: "search_off"
-        }), /*#__PURE__*/React__default["default"].createElement(Text, null, "No Result Found"));
+        }), /*#__PURE__*/React__default["default"].createElement(Text$1, null, "No Result Found"));
         var groups = items.reduce(function (groups, item) {
           var groupName = item[groupBy];
           if (!groupName) groupName = ("NO " + groupBy).toUpperCase();
@@ -9177,7 +9692,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, null, title)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
       }, groupBy ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
         id: "groupBy",
         label: "Agrupar Por",
@@ -9619,7 +10134,7 @@
       }
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
         className: "table-page " + className,
-        title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
       }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
         icon: "add",
         label: "A\xF1adir",
@@ -9771,7 +10286,7 @@
       }
       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, null, "Queries")
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Queries")
       }), /*#__PURE__*/React__default["default"].createElement("main", {
         className: "table-queries"
       }, queries ? queries.filter(function (query) {
@@ -9856,7 +10371,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, null, "Filters")
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Filters")
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "filter_list_off",
         size: "small",
@@ -10061,7 +10576,7 @@
         className: "empty-message"
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "search_off"
-      }), /*#__PURE__*/React__default["default"].createElement(Text, null, "No Result Found"));
+      }), /*#__PURE__*/React__default["default"].createElement(Text$1, null, "No Result Found"));
       var groups = items.reduce(function (groups, item) {
         var groupName = item[groupBy];
         if (!groups[groupName]) groups[groupName] = [];
@@ -10124,10 +10639,10 @@
       });
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
         icon: icon,
-        title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
       }, groupBy ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
         id: "groupBy",
-        label: /*#__PURE__*/React__default["default"].createElement(Text, null, "Group By"),
+        label: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Group By"),
         value: groupBy,
         options: buildGroupOptions(schema),
         onChange: changeGroup
@@ -10651,7 +11166,7 @@
       }
       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, null, title)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
       }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
         icon: "add",
         label: "A\xF1adir",
@@ -10808,7 +11323,7 @@
       }
       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, null, "Queries")
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Queries")
       }), /*#__PURE__*/React__default["default"].createElement("main", {
         className: "table-queries"
       }, queries ? queries.filter(function (query) {
@@ -10906,7 +11421,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, null, "Filters")
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, "Filters")
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "filter_list_off",
         size: "small",
@@ -11034,7 +11549,7 @@
           className: "empty-message"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: "search_off"
-        }), /*#__PURE__*/React__default["default"].createElement(Text, null, "No Result Found"));
+        }), /*#__PURE__*/React__default["default"].createElement(Text$1, null, "No Result Found"));
         var groups = items.reduce(function (groups, item) {
           var groupName = item[groupBy];
           var group = groups[groupName];
@@ -11125,7 +11640,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, null, title)
+        title: /*#__PURE__*/React__default["default"].createElement(Text$1, null, title)
       }, /*#__PURE__*/React__default["default"].createElement(DropDown, {
         id: "groupBy",
         label: "Agrupar Por",
@@ -12107,6 +12622,8 @@
     exports.Avatar = Avatar;
     exports.Button = Button;
     exports.Calendar = Calendar;
+    exports.ChangeUserPasswordAction = ChangeUserPasswordAction;
+    exports.ChangeUserPasswordDialog = ChangeUserPasswordDialog;
     exports.CheckBox = CheckBox;
     exports.Chip = Chip;
     exports.Chips = Chips;
@@ -12142,6 +12659,7 @@
     exports.FilesSearchBox = FilesSearchBox;
     exports.FilesTableView = FilesTableView;
     exports.FoldersTreeView = FoldersTreeView;
+    exports.ForgetUserPasswordAction = ForgetUserPasswordAction;
     exports.Form = Form;
     exports.HTTPClient = HTTPClient;
     exports.Header = Header;
@@ -12152,6 +12670,9 @@
     exports.KanbanColumn = KanbanColumn;
     exports.KanbanHeader = KanbanHeader;
     exports.KanbanSwimlane = KanbanSwimlane;
+    exports.LOGIN_API = LOGIN_API;
+    exports.LOGIN_CONTEXT = LOGIN_CONTEXT;
+    exports.LOGIN_DICTIONARY = LOGIN_DICTIONARY;
     exports.LinearProgress = LinearProgress;
     exports.List = List;
     exports.ListEditor = ListEditor;
@@ -12195,7 +12716,7 @@
     exports.TaskContextProvider = TaskContextProvider;
     exports.TaskMonitor = TaskMonitor;
     exports.TaskProgress = TaskProgress;
-    exports.Text = Text;
+    exports.Text = Text$1;
     exports.TextArea = TextArea;
     exports.TextField = TextField;
     exports.Thumbnail = Thumbnail;
@@ -12206,6 +12727,7 @@
     exports.TreeItem = TreeItem;
     exports.TreeNode = TreeNode;
     exports.TreededContentEditor = TreededContentEditor;
+    exports.UnlockUserAction = UnlockUserAction;
     exports.UploadArea = UploadArea;
     exports.UploadDialog = UploadDialog;
     exports.UploadFile = UploadFile$1;