ywana-core8 0.1.28 → 0.1.30

package/dist/index.cjs

@@ -49,7 +49,7 @@ function isEmpty(obj) {
   return false;
 }
 
-function _catch$6(body, recover) {
+function _catch$8(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -77,7 +77,7 @@ var fetchAsync = function fetchAsync(method, URL, body, token, headers) {
       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) {
@@ -149,8 +149,7 @@ var HTTPClient = function HTTPClient(domain, securityCtx) {
  * 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);
@@ -212,7 +211,7 @@ var TEXTFORMATS = {
 /**
  * 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,
@@ -271,7 +270,7 @@ var Tooltip = function Tooltip(props) {
   }, /*#__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);
 };
 
 /**
@@ -440,7 +439,7 @@ var Button = function Button(_ref) {
     size: "small",
     clickable: true,
     action: click
-  }), /*#__PURE__*/React__default["default"].createElement(Text, null, label));
+  }), /*#__PURE__*/React__default["default"].createElement(Text$1, null, label));
 };
 
 /**
@@ -500,8 +499,8 @@ var CheckBox = function CheckBox(props) {
     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"
@@ -558,7 +557,7 @@ var Chip = function Chip(props) {
   }, 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,
@@ -566,7 +565,7 @@ var Chip = function Chip(props) {
   }, 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);
 };
@@ -669,7 +668,7 @@ var Form = function Form(_ref) {
   };
   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",
@@ -710,7 +709,7 @@ var Header = function Header(props) {
   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
@@ -774,7 +773,7 @@ var GroupedList = function GroupedList(props) {
   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", {
@@ -819,9 +818,9 @@ var ListItem = function ListItem(_ref) {
     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);
 };
@@ -893,7 +892,7 @@ var MenuItem = function MenuItem(props) {
     }
   }
   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", {
@@ -978,7 +977,7 @@ var Property = function Property(props) {
     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",
@@ -1006,7 +1005,7 @@ var RadioButton = function RadioButton(props) {
     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", {
@@ -1105,7 +1104,7 @@ var Tab = function Tab(props) {
     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", {
@@ -1410,7 +1409,7 @@ var TextField = function TextField(props) {
   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,
@@ -1488,7 +1487,7 @@ var TextArea = function TextArea(props) {
   }
   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,
@@ -1605,7 +1604,7 @@ var DropDown = function DropDown(props) {
         }, 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
@@ -1659,7 +1658,7 @@ var DateRange = function DateRange(props) {
     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, {
@@ -1687,7 +1686,7 @@ var PasswordField = function PasswordField(props) {
   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, {
@@ -1708,9 +1707,7 @@ var PasswordField = function PasswordField(props) {
  * 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,
@@ -1721,11 +1718,9 @@ var LoginBox = function LoginBox(_ref) {
     _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];
@@ -1738,14 +1733,8 @@ var LoginBox = function LoginBox(_ref) {
   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);
@@ -1755,11 +1744,7 @@ var LoginBox = function LoginBox(_ref) {
   }
   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,
@@ -1779,20 +1764,15 @@ var LoginBox = function LoginBox(_ref) {
     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) {
@@ -1844,8 +1824,7 @@ function validatePassword(contraseña) {
  * 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,
@@ -1945,20 +1924,17 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
       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",
@@ -1971,19 +1947,19 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
     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,
@@ -1995,7 +1971,7 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
     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,
@@ -2007,7 +1983,7 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
     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,
@@ -2015,1763 +1991,2303 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
   })));
 };
 
-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
+  }));
 };
 
 /**
@@ -3813,7 +4329,7 @@ var UploadDialog = function UploadDialog(_ref) {
     },
     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, {
@@ -3930,7 +4446,7 @@ var FileExplorerView = function FileExplorerView(props) {
   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');
   }
@@ -4138,7 +4654,7 @@ var EmptyMessage = function EmptyMessage(_ref) {
     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));
 };
@@ -4270,7 +4786,7 @@ var DataTable = function DataTable(props) {
     }, /*#__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],
@@ -4997,7 +5513,7 @@ var Token = function Token(_ref2) {
     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, {
@@ -5033,7 +5549,7 @@ var TreeNode = function TreeNode(_ref2) {
     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() {
@@ -5073,7 +5589,7 @@ var TreeItem = function TreeItem(_ref3) {
     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", {
@@ -5856,7 +6372,7 @@ var TaskMonitor = function TaskMonitor(props) {
     }).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, {
@@ -5958,7 +6474,6 @@ var UploadForm = function UploadForm(props) {
   }
   function handleFiles(files) {
     var file = files[0];
-    console.log("handleFiles", files, file);
     setFile(file);
   }
   function handleFile(e) {
@@ -6493,7 +7008,7 @@ var TreededContentEditor = function TreededContentEditor(_ref4) {
   }
   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, {
@@ -6645,7 +7160,7 @@ var EntityEditor = function EntityEditor(_ref6) {
   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,
@@ -6892,7 +7407,7 @@ var MultiSelectionEditor = function MultiSelectionEditor(_ref10) {
   }
   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:
@@ -7096,7 +7611,7 @@ var TableEditor$3 = function TableEditor(props) {
       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();
@@ -7189,7 +7704,7 @@ var TableEditor$3 = function TableEditor(props) {
   }
   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",
@@ -7458,7 +7973,7 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
     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);
@@ -7474,7 +7989,7 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
     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"
@@ -7540,7 +8055,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
     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);
@@ -7555,7 +8070,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
     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"
@@ -7782,7 +8297,7 @@ var CollectionPage$1 = function CollectionPage(props) {
   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",
@@ -8262,7 +8777,7 @@ var CollectionEditor$1 = function CollectionEditor(props) {
     }
   }
   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()
@@ -8705,7 +9220,7 @@ var TablePage = function TablePage(props) {
   }, 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",
@@ -8862,7 +9377,7 @@ var TableQueries$2 = function TableQueries(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
     className: "table-queries",
-    title: /*#__PURE__*/React__default["default"].createElement(Text, 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) {
@@ -8960,7 +9475,7 @@ var TableFilters$2 = function TableFilters(props) {
   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",
@@ -9087,7 +9602,7 @@ var TableEditor$2 = function TableEditor(props) {
       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();
@@ -9184,7 +9699,7 @@ var TableEditor$2 = function TableEditor(props) {
   }
   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",
@@ -9626,7 +10141,7 @@ var TablePage2 = function TablePage2(props) {
   }
   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",
@@ -9778,7 +10293,7 @@ var TableQueries$1 = function TableQueries(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
     className: "table-queries",
-    title: /*#__PURE__*/React__default["default"].createElement(Text, 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) {
@@ -9863,7 +10378,7 @@ var TableFilters$1 = function TableFilters(props) {
   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",
@@ -10068,7 +10583,7 @@ var TableEditor$1 = function TableEditor(props) {
     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] = [];
@@ -10131,10 +10646,10 @@ var TableEditor$1 = function TableEditor(props) {
   });
   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
@@ -10658,7 +11173,7 @@ var TabbedTablePage = function TabbedTablePage(props) {
   }
   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",
@@ -10815,7 +11330,7 @@ var TableQueries = function TableQueries(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
     className: "table-queries",
-    title: /*#__PURE__*/React__default["default"].createElement(Text, 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) {
@@ -10913,7 +11428,7 @@ var TableFilters = function TableFilters(props) {
   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",
@@ -11041,7 +11556,7 @@ var TableEditor = function TableEditor(props) {
       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];
@@ -11132,7 +11647,7 @@ var TableEditor = function TableEditor(props) {
   }
   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",
@@ -12114,6 +12629,8 @@ exports.ActionButton = ActionButton;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Calendar = Calendar;
+exports.ChangeUserPasswordAction = ChangeUserPasswordAction;
+exports.ChangeUserPasswordDialog = ChangeUserPasswordDialog;
 exports.CheckBox = CheckBox;
 exports.Chip = Chip;
 exports.Chips = Chips;
@@ -12149,6 +12666,7 @@ exports.FilesGridView = FilesGridView;
 exports.FilesSearchBox = FilesSearchBox;
 exports.FilesTableView = FilesTableView;
 exports.FoldersTreeView = FoldersTreeView;
+exports.ForgetUserPasswordAction = ForgetUserPasswordAction;
 exports.Form = Form;
 exports.HTTPClient = HTTPClient;
 exports.Header = Header;
@@ -12159,6 +12677,9 @@ exports.KanbanCard = KanbanCard;
 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;
@@ -12202,7 +12723,7 @@ exports.TaskContext = TaskContext;
 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;
@@ -12213,6 +12734,7 @@ exports.Tree = Tree;
 exports.TreeItem = TreeItem;
 exports.TreeNode = TreeNode;
 exports.TreededContentEditor = TreededContentEditor;
+exports.UnlockUserAction = UnlockUserAction;
 exports.UploadArea = UploadArea;
 exports.UploadDialog = UploadDialog;
 exports.UploadFile = UploadFile$1;