ywana-core8 0.0.701 → 0.0.703

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import React, { useState, useEffect, useContext, Fragment, useRef, useMemo, Children } from 'react';
+import React, { useState, useEffect, useContext, Fragment as Fragment$1, useRef, useMemo, Children } from 'react';
 import RSwitch from 'react-switch';
 import moment$1 from 'moment';
 import { extendMoment } from 'moment-range';
@@ -44,7 +44,7 @@ function isEmpty(obj) {
   return false;
 }
 
-function _catch$5(body, recover) {
+function _catch$6(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -76,7 +76,7 @@ var fetchAsync = function fetchAsync(method, URL, body, token, headers) {
       body: body
     };
     if (headers) request.headers = request.headers;
-    return Promise.resolve(_catch$5(function () {
+    return Promise.resolve(_catch$6(function () {
       return Promise.resolve(fetch(URL, request)).then(function (response) {
         var _exit;
 
@@ -603,7 +603,7 @@ var Form = function Form(_ref) {
   var gridLayout = {
     gridTemplateColumns: "repeat(" + columns + ", 1fr)"
   };
-  return /*#__PURE__*/React.createElement(Fragment, null, title ? /*#__PURE__*/React.createElement("header", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, title ? /*#__PURE__*/React.createElement("header", {
     className: "form-header"
   }, /*#__PURE__*/React.createElement(Text, {
     use: "headline6"
@@ -712,7 +712,7 @@ var GroupedList = function GroupedList(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "list"
   }, groups.map(function (group) {
-    return /*#__PURE__*/React.createElement(Fragment, {
+    return /*#__PURE__*/React.createElement(Fragment$1, {
       key: group.name
     }, /*#__PURE__*/React.createElement("header", {
       key: group.name + "-header"
@@ -1069,7 +1069,7 @@ var Stack = function Stack(props) {
   var child = React.Children.toArray(props.children).filter(function (child, index) {
     return index === selected;
   })[0];
-  return /*#__PURE__*/React.createElement(Fragment, null, child);
+  return /*#__PURE__*/React.createElement(Fragment$1, null, child);
 };
 
 /**
@@ -1087,7 +1087,7 @@ var TYPES = {
  * FORMATS
  */
 
-var FORMATS = {
+var FORMATS$1 = {
   NONE: '',
   DATE: 'date',
   DATERANGE: 'DATERANGE',
@@ -1821,7 +1821,7 @@ var DataTableRow = function DataTableRow(props) {
   var infoIcon = isInfoOpen ? 'expand_more' : 'expand_less';
   var style = isInfoOpen ? "expanded" : "";
   if (selected) style += " selected";
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("tr", {
     className: style + " " + className,
     onClick: function onClick(ev) {
       return onSelect(row, ev);
@@ -2027,14 +2027,14 @@ var EntityCellViewer = function EntityCellViewer(_ref5) {
 
     if (field.format) {
       switch (field.format) {
-        case FORMATS.COLOR:
+        case FORMATS$1.COLOR:
           text = /*#__PURE__*/React.createElement("input", {
             type: "color",
             value: text,
             disabled: true
           });
 
-        case FORMATS.URL:
+        case FORMATS$1.URL:
           text = /*#__PURE__*/React.createElement("a", {
             href: text,
             target: "download",
@@ -2042,13 +2042,13 @@ var EntityCellViewer = function EntityCellViewer(_ref5) {
           }, text);
           break;
 
-        case FORMATS.IMG:
+        case FORMATS$1.IMG:
           text = /*#__PURE__*/React.createElement("img", {
             src: text
           });
           break;
 
-        case FORMATS.DATE:
+        case FORMATS$1.DATE:
           var fecha = new Date(text);
           fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1);
           text = fecha.toLocaleString(locale, {
@@ -2058,7 +2058,7 @@ var EntityCellViewer = function EntityCellViewer(_ref5) {
           });
           break;
 
-        case FORMATS.TIME:
+        case FORMATS$1.TIME:
           text = new Date(text).toLocaleString(locale, {
             year: 'hour',
             month: 'minute',
@@ -2109,14 +2109,14 @@ var StringCellViewer = function StringCellViewer(_ref7) {
   var locale = window.navigator.userLanguage || window.navigator.language;
 
   switch (format) {
-    case FORMATS.COLOR:
+    case FORMATS$1.COLOR:
       text = /*#__PURE__*/React.createElement("input", {
         type: "color",
         value: text,
         disabled: true
       });
 
-    case FORMATS.URL:
+    case FORMATS$1.URL:
       text = /*#__PURE__*/React.createElement("a", {
         href: text,
         target: "download",
@@ -2124,13 +2124,13 @@ var StringCellViewer = function StringCellViewer(_ref7) {
       }, text);
       break;
 
-    case FORMATS.IMG:
+    case FORMATS$1.IMG:
       text = /*#__PURE__*/React.createElement("img", {
         src: text
       });
       break;
 
-    case FORMATS.DATE:
+    case FORMATS$1.DATE:
       var fecha = new Date(text);
       fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1);
       text = fecha.toLocaleString(locale, {
@@ -2140,7 +2140,7 @@ var StringCellViewer = function StringCellViewer(_ref7) {
       });
       break;
 
-    case FORMATS.TIME:
+    case FORMATS$1.TIME:
       text = new Date(text).toLocaleString(locale, {
         year: 'hour',
         month: 'minute',
@@ -3379,7 +3379,7 @@ var UploadFile = function UploadFile(_ref) {
       state = file.state,
       progress = file.progress,
       error = file.error;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     className: "upload-file"
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     icon: icon
@@ -3827,7 +3827,7 @@ var SiteMenu = function SiteMenu(_ref6) {
   }, /*#__PURE__*/React.createElement(Header, {
     title: menutTitle
   }), /*#__PURE__*/React.createElement("main", null, Object.keys(sections).map(function (title) {
-    return /*#__PURE__*/React.createElement(Fragment, {
+    return /*#__PURE__*/React.createElement(Fragment$1, {
       key: title
     }, /*#__PURE__*/React.createElement("div", {
       className: "section-title " + style
@@ -3969,7 +3969,7 @@ var Dialog = function Dialog(props) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     className: "overlay " + className,
     onMouseDown: close
   }), /*#__PURE__*/React.createElement("dialog", {
@@ -4093,7 +4093,7 @@ var UploadDialog = function UploadDialog(_ref) {
     }
   }
 
-  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  var actions = /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Button, {
     label: "CERRAR",
     action: function action() {
       return onAction("CLOSE");
@@ -4462,7 +4462,7 @@ var TabbedContentEditor = function TabbedContentEditor(_ref3) {
     return /*#__PURE__*/React.createElement("section", {
       key: title
     }, grouped ? group(section).map(function (group) {
-      return /*#__PURE__*/React.createElement(Fragment, null, group.name.length > 0 ? /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment$1, null, group.name.length > 0 ? /*#__PURE__*/React.createElement("div", {
         className: "group-caption"
       }, group.name) : null, group.fields.filter(function (field) {
         return field.id !== 'id';
@@ -4637,7 +4637,7 @@ var FieldEditor = function FieldEditor(_ref5) {
             field: field,
             value: value1,
             onChange: change
-          }) : /*#__PURE__*/React.createElement(CollectionEditor$1, {
+          }) : /*#__PURE__*/React.createElement(CollectionEditor$2, {
             field: field,
             value: value1,
             onChange: change,
@@ -4755,7 +4755,7 @@ var StringEditor = function StringEditor(_ref7) {
     var label = required ? field.label + " *" : field.label;
 
     switch (format) {
-      case FORMATS.IMG:
+      case FORMATS$1.IMG:
         return /*#__PURE__*/React.createElement("div", {
           className: "img-field"
         }, /*#__PURE__*/React.createElement("img", {
@@ -4769,14 +4769,14 @@ var StringEditor = function StringEditor(_ref7) {
           readOnly: !editable
         }));
 
-      case FORMATS.COLOR:
+      case FORMATS$1.COLOR:
         return /*#__PURE__*/React.createElement(ColorField, {
           id: id,
           onChange: change,
           value: value
         });
 
-      case FORMATS.HTML:
+      case FORMATS$1.HTML:
         return /*#__PURE__*/React.createElement(Editor, {
           id: id,
           value: value,
@@ -4784,7 +4784,7 @@ var StringEditor = function StringEditor(_ref7) {
           content: content
         });
 
-      case FORMATS.DATE:
+      case FORMATS$1.DATE:
         return /*#__PURE__*/React.createElement(TextField, {
           outlined: outlined,
           id: id,
@@ -4795,7 +4795,7 @@ var StringEditor = function StringEditor(_ref7) {
           readOnly: !editable
         });
 
-      case FORMATS.DATERANGE:
+      case FORMATS$1.DATERANGE:
         return /*#__PURE__*/React.createElement(DateRange, {
           id: id,
           label: label,
@@ -4804,7 +4804,7 @@ var StringEditor = function StringEditor(_ref7) {
           readOnly: !editable
         });
 
-      case FORMATS.TOKENS:
+      case FORMATS$1.TOKENS:
         return /*#__PURE__*/React.createElement(TokenField, {
           id: id,
           label: label,
@@ -4954,7 +4954,7 @@ var MultiSelectionEditor = function MultiSelectionEditor(_ref10) {
  * Collection Editor
  */
 
-var CollectionEditor$1 = function CollectionEditor(_ref11) {
+var CollectionEditor$2 = function CollectionEditor(_ref11) {
   var field = _ref11.field,
       _ref11$value = _ref11.value,
       value = _ref11$value === void 0 ? [] : _ref11$value,
@@ -5211,7 +5211,7 @@ var TableEditor$3 = function TableEditor(props) {
       var title = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
         className: "size"
       }, groupSize), renderGroupLabel(groupName));
-      return /*#__PURE__*/React.createElement(Fragment, {
+      return /*#__PURE__*/React.createElement(Fragment$1, {
         key: groupName
       }, /*#__PURE__*/React.createElement(Header, {
         title: title
@@ -5236,7 +5236,7 @@ var TableEditor$3 = function TableEditor(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     icon: icon,
     title: /*#__PURE__*/React.createElement(Text, null, title)
   }, /*#__PURE__*/React.createElement(DropDown, {
@@ -5393,7 +5393,7 @@ var StringViewer = function StringViewer(props) {
       options = field.options;
 
   switch (format) {
-    case FORMATS.IMG:
+    case FORMATS$1.IMG:
       return /*#__PURE__*/React.createElement("div", {
         className: "img-field"
       }, /*#__PURE__*/React.createElement("img", {
@@ -5511,7 +5511,7 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
     return filter ? visible && filter(field, content) : visible;
   }
 
-  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  var actions = /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Button, {
     label: "CLOSE",
     action: function action() {
       return onAction("CLOSE");
@@ -5602,7 +5602,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
     return filter ? visible && filter(field, content) : visible;
   }
 
-  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  var actions = /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Button, {
     label: "CLOSE",
     action: function action() {
       return onAction("CLOSE");
@@ -5643,7 +5643,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
  * Collection API
  */
 
-var CollectionAPI = function CollectionAPI(url, host) {
+var CollectionAPI$1 = function CollectionAPI(url, host) {
   var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
   /**
    * objectToQueryParamString
@@ -5723,7 +5723,7 @@ var CollectionAPI = function CollectionAPI(url, host) {
  * Collection Page
  */
 
-function _catch$4(body, recover) {
+function _catch$5(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5741,7 +5741,7 @@ function _catch$4(body, recover) {
  */
 
 
-var CollectionPage = function CollectionPage(props) {
+var CollectionPage$1 = function CollectionPage(props) {
   var reloadSelection = function reloadSelection() {
     try {
       return Promise.resolve(pageContext.reloadSelection()).then(function () {
@@ -5807,7 +5807,7 @@ var CollectionPage = function CollectionPage(props) {
       filters = props.filters,
       footer = props.footer,
       children = props.children;
-  var context = CollectionContext(url, field, host, page, fetching, versioning);
+  var context = CollectionContext$1(url, field, host, page, fetching, versioning);
 
   var _useContext = useContext(PageContext),
       pageContext = _useContext[0],
@@ -5858,11 +5858,11 @@ var CollectionPage = function CollectionPage(props) {
   }
 
   var total = all ? all.length : 0;
-  var title2 = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+  var title2 = /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("span", {
     className: "size"
   }, total), " ", title);
   var hiddenStyle = pageContext.selected ? "hidden" : "";
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "collection-page " + className,
     title: /*#__PURE__*/React.createElement(Text, null, title2)
   }, canAdd ? /*#__PURE__*/React.createElement(Button, {
@@ -5875,7 +5875,7 @@ var CollectionPage = function CollectionPage(props) {
     action: reload
   }), renderActions()), /*#__PURE__*/React.createElement("menu", {
     className: "collection-page " + className + " " + hiddenStyle
-  }, canFilter ? /*#__PURE__*/React.createElement(CollectionFilters, {
+  }, canFilter ? /*#__PURE__*/React.createElement(CollectionFilters$1, {
     schema: schema,
     initial: filters
   }) : null, levels ? /*#__PURE__*/React.createElement(CollectionTree, {
@@ -5886,14 +5886,14 @@ var CollectionPage = function CollectionPage(props) {
     sorter: sorter,
     searchBy: searchBy,
     namer: namer
-  }) : /*#__PURE__*/React.createElement(CollectionList, {
+  }) : /*#__PURE__*/React.createElement(CollectionList$1, {
     groupBy: groupBy,
     onSelect: onSelect,
     searchBy: searchBy
   })), /*#__PURE__*/React.createElement("main", {
     key: id,
     className: "collection-page " + className
-  }, /*#__PURE__*/React.createElement(CollectionEditor, {
+  }, /*#__PURE__*/React.createElement(CollectionEditor$1, {
     icon: icon,
     schema: schema,
     layout: editor,
@@ -5907,7 +5907,7 @@ var CollectionPage = function CollectionPage(props) {
     title: editorTitle
   }), children ? /*#__PURE__*/React.createElement("article", null, children) : null, /*#__PURE__*/React.createElement("footer", null, footer)));
 };
-var CollectionFilters = function CollectionFilters(props) {
+var CollectionFilters$1 = function CollectionFilters(props) {
   var change = function change(next) {
     try {
       setForm(next);
@@ -5965,7 +5965,7 @@ var CollectionFilters = function CollectionFilters(props) {
 
   var content = new Content(filterSchema, form);
   var expanded = showFilters ? "expanded" : "";
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     icon: "filter_list",
     className: "filters-header " + expanded
   }, showFilters ? /*#__PURE__*/React.createElement(Icon, {
@@ -5998,7 +5998,7 @@ var FilterResume = function FilterResume(props) {
   var fields = Object.keys(form).filter(function (key) {
     return form[key] !== undefined && form[key] !== null && form[key] !== "";
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, fields.length > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, fields.length > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Limpiar Filtros"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: "clear_all",
@@ -6022,7 +6022,7 @@ var FilterResume = function FilterResume(props) {
  */
 
 
-var CollectionList = function CollectionList(props) {
+var CollectionList$1 = function CollectionList(props) {
   var select = function select(id) {
     try {
       clear();
@@ -6081,7 +6081,7 @@ var CollectionList = function CollectionList(props) {
       content: content
     };
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(List, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(List, {
     items: items2,
     onSelect: select,
     groupBy: groupBy
@@ -6222,7 +6222,7 @@ var CollectionTree = function CollectionTree(props) {
   var items = search();
   var items2 = sorter ? sorter(items) : items;
   var nodes = generateNodes(levels, items2);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Tree, null, renderNodes(nodes))), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Tree, null, renderNodes(nodes))), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement("div", {
     className: "search-box"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Search",
@@ -6235,7 +6235,7 @@ var CollectionTree = function CollectionTree(props) {
  * Collection Editor
  */
 
-var CollectionEditor = function CollectionEditor(props) {
+var CollectionEditor$1 = function CollectionEditor(props) {
   var save = function save() {
     try {
       var _temp3 = function _temp3() {
@@ -6366,7 +6366,7 @@ var CollectionEditor = function CollectionEditor(props) {
     }
   }
 
-  return selected && form ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return selected && form ? /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     icon: icon,
     title: renderTitle()
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -6395,12 +6395,12 @@ var CollectionEditor = function CollectionEditor(props) {
  */
 
 
-var CollectionContext = function CollectionContext(url, field, host, page, fetching, versioning) {
+var CollectionContext$1 = function CollectionContext(url, field, host, page, fetching, versioning) {
   if (versioning === void 0) {
     versioning = false;
   }
 
-  var API = CollectionAPI(url, host);
+  var API = CollectionAPI$1(url, host);
   return {
     all: [],
     filters: {},
@@ -6412,7 +6412,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this2 = this;
 
-        var _temp6 = _catch$4(function () {
+        var _temp6 = _catch$5(function () {
           return Promise.resolve(API.all(null, page)).then(function (data) {
             _this2.all = field ? data[field] : data;
           });
@@ -6461,7 +6461,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
     },
     fetch: function fetch(id) {
       try {
-        return Promise.resolve(_catch$4(function () {
+        return Promise.resolve(_catch$5(function () {
           return Promise.resolve(API.find(id));
         }, function (error) {
           console.log(error);
@@ -6477,7 +6477,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this8 = this;
 
-        var _temp10 = _catch$4(function () {
+        var _temp10 = _catch$5(function () {
           if (versioning) form.version = 1;
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this8.load()).then(function () {});
@@ -6495,7 +6495,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this10 = this;
 
-        var _temp12 = _catch$4(function () {
+        var _temp12 = _catch$5(function () {
           if (versioning) form.version = form.version ? form.version + 1 : 1;
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this10.load()).then(function () {});
@@ -6513,7 +6513,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this12 = this;
 
-        var _temp14 = _catch$4(function () {
+        var _temp14 = _catch$5(function () {
           if (versioning) form.version = form.version ? form.version + 1 : 1;
           return Promise.resolve(API.patch(id, form)).then(function () {
             return Promise.resolve(_this12.load()).then(function () {});
@@ -6531,7 +6531,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this14 = this;
 
-        var _temp16 = _catch$4(function () {
+        var _temp16 = _catch$5(function () {
           return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
             return Promise.resolve(_this14.load()).then(function () {});
           });
@@ -6548,7 +6548,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this16 = this;
 
-        var _temp18 = _catch$4(function () {
+        var _temp18 = _catch$5(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this16.load()).then(function () {});
           });
@@ -6582,7 +6582,7 @@ var QUERY = {
  * Table Page
  */
 
-function _catch$3(body, recover) {
+function _catch$4(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -6839,10 +6839,10 @@ var TablePage = function TablePage(props) {
   }
 
   var total = all ? all.length : 0;
-  var title2 = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+  var title2 = /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("span", {
     className: "size"
   }, total), " ", title);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-page",
     title: /*#__PURE__*/React.createElement(Text, null, title2)
   }, canAdd ? /*#__PURE__*/React.createElement(Button, {
@@ -7009,7 +7009,7 @@ var TableQueries$2 = function TableQueries(props) {
     setPageContext(Object.assign({}, pageContext));
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-queries",
     title: /*#__PURE__*/React.createElement(Text, null, "Queries")
   }), /*#__PURE__*/React.createElement("main", {
@@ -7119,7 +7119,7 @@ var TableFilters$2 = function TableFilters(props) {
   }
 
   var content = new Content(filterSchema, form);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-filters",
     title: /*#__PURE__*/React.createElement(Text, null, "Filters")
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -7336,7 +7336,7 @@ var TableEditor$2 = function TableEditor(props) {
       var title = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
         className: "size"
       }, groupSize), renderGroupLabel(groupName));
-      return /*#__PURE__*/React.createElement(Fragment, {
+      return /*#__PURE__*/React.createElement(Fragment$1, {
         key: groupName
       }, /*#__PURE__*/React.createElement(Header, {
         title: title
@@ -7362,7 +7362,7 @@ var TableEditor$2 = function TableEditor(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     icon: icon,
     title: /*#__PURE__*/React.createElement(Text, null, title)
   }, groupBy ? /*#__PURE__*/React.createElement(DropDown, {
@@ -7395,7 +7395,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this2 = this;
 
-        var _temp5 = _catch$3(function () {
+        var _temp5 = _catch$4(function () {
           var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
             var field = filter[key];
 
@@ -7457,7 +7457,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this5 = this;
 
-        var _temp7 = _catch$3(function () {
+        var _temp7 = _catch$4(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this5.load()).then(function () {});
           });
@@ -7474,7 +7474,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this7 = this;
 
-        var _temp9 = _catch$3(function () {
+        var _temp9 = _catch$4(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this7.load()).then(function () {});
           });
@@ -7491,7 +7491,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this9 = this;
 
-        var _temp11 = _catch$3(function () {
+        var _temp11 = _catch$4(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this9.load()).then(function () {});
           });
@@ -7511,7 +7511,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this11 = this;
 
-        var _temp13 = _catch$3(function () {
+        var _temp13 = _catch$4(function () {
           return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
             _this11.queries = _API$queries;
           });
@@ -7528,7 +7528,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this13 = this;
 
-        var _temp15 = _catch$3(function () {
+        var _temp15 = _catch$4(function () {
           return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
             return Promise.resolve(_this13.loadQueries(user)).then(function () {});
           });
@@ -7545,7 +7545,7 @@ var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this15 = this;
 
-        var _temp17 = _catch$3(function () {
+        var _temp17 = _catch$4(function () {
           return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
             return Promise.resolve(_this15.loadQueries(user)).then(function () {});
           });
@@ -7636,7 +7636,7 @@ var TableAPI$2 = function TableAPI(url, host, params) {
  * Table Page
  */
 
-function _catch$2(body, recover) {
+function _catch$3(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -7853,7 +7853,7 @@ var TablePage2 = function TablePage2(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-page",
     title: /*#__PURE__*/React.createElement(Text, null, title)
   }, canAdd ? /*#__PURE__*/React.createElement(Button, {
@@ -8014,7 +8014,7 @@ var TableQueries$1 = function TableQueries(props) {
     setPageContext(Object.assign({}, pageContext));
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-queries",
     title: /*#__PURE__*/React.createElement(Text, null, "Queries")
   }), /*#__PURE__*/React.createElement("main", {
@@ -8110,7 +8110,7 @@ var TableFilters$1 = function TableFilters(props) {
   }
 
   var content = new Content(filterSchema, form);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-filters",
     title: /*#__PURE__*/React.createElement(Text, null, "Filters")
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -8395,7 +8395,7 @@ var TableEditor$1 = function TableEditor(props) {
       }))
     };
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     icon: icon,
     title: /*#__PURE__*/React.createElement(Text, null, title)
   }, groupBy ? /*#__PURE__*/React.createElement(DropDown, {
@@ -8434,7 +8434,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this2 = this;
 
-        var _temp9 = _catch$2(function () {
+        var _temp9 = _catch$3(function () {
           var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
             var field = filter[key];
 
@@ -8493,7 +8493,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this5 = this;
 
-        var _temp11 = _catch$2(function () {
+        var _temp11 = _catch$3(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this5.load()).then(function () {});
           });
@@ -8510,7 +8510,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this7 = this;
 
-        var _temp13 = _catch$2(function () {
+        var _temp13 = _catch$3(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this7.load()).then(function () {});
           });
@@ -8527,7 +8527,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this9 = this;
 
-        var _temp15 = _catch$2(function () {
+        var _temp15 = _catch$3(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this9.load()).then(function () {});
           });
@@ -8547,7 +8547,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this11 = this;
 
-        var _temp17 = _catch$2(function () {
+        var _temp17 = _catch$3(function () {
           return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
             _this11.queries = _API$queries;
           });
@@ -8564,7 +8564,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this13 = this;
 
-        var _temp19 = _catch$2(function () {
+        var _temp19 = _catch$3(function () {
           return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
             return Promise.resolve(_this13.loadQueries(user)).then(function () {});
           });
@@ -8581,7 +8581,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this15 = this;
 
-        var _temp21 = _catch$2(function () {
+        var _temp21 = _catch$3(function () {
           return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
             return Promise.resolve(_this15.loadQueries(user)).then(function () {});
           });
@@ -8668,7 +8668,7 @@ var TableAPI$1 = function TableAPI(url, host, params) {
  * Tabbed Table Page
  */
 
-function _catch$1(body, recover) {
+function _catch$2(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -8978,7 +8978,7 @@ var TabbedTablePage = function TabbedTablePage(props) {
     }));
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-page",
     title: /*#__PURE__*/React.createElement(Text, null, title)
   }, canAdd ? /*#__PURE__*/React.createElement(Button, {
@@ -9145,7 +9145,7 @@ var TableQueries = function TableQueries(props) {
     setPageContext(Object.assign({}, pageContext));
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-queries",
     title: /*#__PURE__*/React.createElement(Text, null, "Queries")
   }), /*#__PURE__*/React.createElement("main", {
@@ -9255,7 +9255,7 @@ var TableFilters = function TableFilters(props) {
   }
 
   var content = new Content(filterSchema, form);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-filters",
     title: /*#__PURE__*/React.createElement(Text, null, "Filters")
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -9470,7 +9470,7 @@ var TableEditor = function TableEditor(props) {
       var title = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
         className: "size"
       }, groupSize), renderGroupLabel(groupName));
-      return /*#__PURE__*/React.createElement(Fragment, {
+      return /*#__PURE__*/React.createElement(Fragment$1, {
         key: groupName
       }, /*#__PURE__*/React.createElement(Header, {
         title: title
@@ -9496,7 +9496,7 @@ var TableEditor = function TableEditor(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     icon: icon,
     title: /*#__PURE__*/React.createElement(Text, null, title)
   }, /*#__PURE__*/React.createElement(DropDown, {
@@ -9530,7 +9530,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this2 = this;
 
-        var _temp9 = _catch$1(function () {
+        var _temp9 = _catch$2(function () {
           var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
             var field = filter[key];
 
@@ -9597,7 +9597,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this5 = this;
 
-        var _temp11 = _catch$1(function () {
+        var _temp11 = _catch$2(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this5.load({}, [])).then(function () {});
           });
@@ -9614,7 +9614,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this7 = this;
 
-        var _temp13 = _catch$1(function () {
+        var _temp13 = _catch$2(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this7.load()).then(function () {});
           });
@@ -9631,7 +9631,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this9 = this;
 
-        var _temp15 = _catch$1(function () {
+        var _temp15 = _catch$2(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this9.load()).then(function () {});
           });
@@ -9651,7 +9651,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this11 = this;
 
-        var _temp17 = _catch$1(function () {
+        var _temp17 = _catch$2(function () {
           return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
             _this11.queries = _API$queries;
           });
@@ -9668,7 +9668,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this13 = this;
 
-        var _temp19 = _catch$1(function () {
+        var _temp19 = _catch$2(function () {
           return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
             return Promise.resolve(_this13.loadQueries(user)).then(function () {});
           });
@@ -9685,7 +9685,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       try {
         var _this15 = this;
 
-        var _temp21 = _catch$1(function () {
+        var _temp21 = _catch$2(function () {
           return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
             return Promise.resolve(_this15.loadQueries(user)).then(function () {});
           });
@@ -9768,6 +9768,584 @@ var TableAPI = function TableAPI(url, host) {
   };
 };
 
+/**
+ * Collection API
+ */
+
+var CollectionAPI = function CollectionAPI(url, host) {
+  var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+  /**
+   * objectToQueryParamString
+   * 
+   * @param {*} obj 
+   * @returns 
+   */
+
+  function objectToQueryParamString(obj, likes) {
+    if (isEmpty(obj)) {
+      return "";
+    }
+
+    var notEmptyFields = Object.keys(obj).filter(function (key) {
+      return !isEmpty(obj[key]);
+    });
+    var paramString = notEmptyFields.reduce(function (query, key) {
+      var value = obj[key];
+      var like = likes.includes(key) ? '%' : '';
+
+      if (Array.isArray(value)) {
+        var values = value.map(function (v) {
+          return key + "=" + like + v + like;
+        }).join("&");
+        return "" + query + values + "&";
+      } else if (typeof value === "object") {
+        var params = objectToQueryParamString(value, likes);
+        params.split("&").forEach(function (param) {
+          query = query.concat(key + "." + param + "&");
+        });
+        return query;
+      } else {
+        return "" + query + key + "=" + like + value + like + "&";
+      }
+    }, "");
+    return paramString;
+  }
+
+  return {
+    all: function all(filters, likes, page) {
+      if (likes === void 0) {
+        likes = [];
+      }
+
+      var queryParams = page ? "?page=" + page + "&" : "?";
+      var filterQuery = objectToQueryParamString(filters, likes);
+      queryParams = "" + queryParams + filterQuery;
+      queryParams = queryParams.substring(0, queryParams.length - 1);
+      return http.GET("" + url + queryParams);
+    },
+    find: function find(id) {
+      return http.GET(url + "/" + id);
+    },
+    create: function create(form) {
+      var body = JSON.stringify(form);
+      return http.POST(url, body);
+    },
+    update: function update(form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + form.id, body);
+    },
+    updateProperty: function updateProperty(id, propertyName, form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + id + "/" + propertyName, body);
+    },
+    patch: function patch(id, form) {
+      var body = JSON.stringify(form);
+      return http.PATCH(url + "/" + id, body);
+    },
+    remove: function remove(id) {
+      return http.DELETE(url + "/" + id);
+    }
+  };
+};
+
+function _catch$1(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+/**
+ * Collection Context
+ */
+
+
+var CollectionContext = React.createContext();
+var CollectionContextProvider = function CollectionContextProvider(props) {
+  var select = function select(id) {
+    try {
+      var _this2 = this;
+
+      var _temp2 = function () {
+        if (fetching) {
+          return Promise.resolve(_this2.fetch(id)).then(function (result) {
+            setSelected(result);
+          });
+        } else {
+          var result = _this2.all.find(function (item) {
+            return item.id === id;
+          });
+
+          setSelected(result);
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var load = function load() {
+    try {
+      var runCustomFilters = function runCustomFilters(all) {
+        var cfs = Object.values(customFilters);
+        var data = cfs.length ? cfs.reduce(function (acc, filter) {
+          return filter(acc);
+        }, all) : all;
+        return data;
+      };
+
+      var _temp4 = _catch$1(function () {
+        return Promise.resolve(API.all(filters, likes, page)).then(function (response) {
+          var next = field ? response[field] : response;
+          var data = runCustomFilters(next);
+          setAll(data);
+        });
+      }, function (error) {
+        console.log(error);
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var host = props.host,
+      url = props.url,
+      page = props.page,
+      _props$fetching = props.fetching,
+      fetching = _props$fetching === void 0 ? true : _props$fetching,
+      field = props.field,
+      children = props.children;
+  var API = CollectionAPI(url, host);
+
+  var _useState = useState([]),
+      all = _useState[0],
+      setAll = _useState[1];
+
+  var _useState2 = useState({}),
+      filters = _useState2[0],
+      setFilters = _useState2[1];
+
+  var _useState3 = useState([]),
+      likes = _useState3[0],
+      setLikes = _useState3[1];
+
+  var _useState4 = useState({}),
+      customFilters = _useState4[0],
+      setCustomFilters = _useState4[1];
+
+  var _useState5 = useState([]),
+      queries = _useState5[0],
+      setQueries = _useState5[1];
+
+  var _useState6 = useState(null),
+      selected = _useState6[0],
+      setSelected = _useState6[1];
+
+  function addCustomFilter(id, filter) {
+    var _extends2;
+
+    setCustomFilters(_extends({}, customFilters, (_extends2 = {}, _extends2[id] = filter, _extends2)));
+  }
+
+  function removeCustomFilter(id) {
+    var next = _extends({}, customFilters);
+
+    delete next[id];
+    setCustomFilters(next);
+  }
+  /*
+      async function reloadSelection() {
+          const result = await this.fetch(this.selected.id)
+          this.selected = result
+      }
+  
+      async function fetch(id) {
+          try {
+              const result = await API.find(id)
+              return result
+          } catch (error) {
+              console.log(error)
+          }
+      }
+  
+      function clear() {
+          this.selected = null
+      }
+  
+      async function create(form) {
+          try {
+              if (versioning) form.version = 1
+              await API.create(form);
+              await this.load();
+          } catch (error) {
+              console.log(error)
+          }
+          return
+      }
+  
+      async function update(form) {
+          try {
+              if (versioning) form.version = form.version ? form.version + 1 : 1
+              await API.update(form)
+              await this.load()
+          } catch (error) {
+              console.log(error)
+          }
+          return
+      }
+  
+      async function patch(id, form) {
+          try {
+              if (versioning) form.version = form.version ? form.version + 1 : 1
+              await API.patch(id, form)
+              await this.load()
+          } catch (error) {
+              console.log(error)
+          }
+          return
+      }
+  
+      async function updateProperty(id, propertyName, form) {
+          try {
+              await API.updateProperty(id, propertyName, form)
+              await this.load()
+          } catch (error) {
+              console.log(error)
+          }
+          return
+      }
+  
+      async function remove(id) {
+          try {
+              await API.remove(id)
+              await this.load()
+          } catch (error) {
+              console.log(error)
+          }
+          return
+      }
+  
+      */
+
+
+  var value = {
+    all: all,
+    load: load,
+    selected: selected,
+    select: select,
+    filters: filters,
+    setFilters: setFilters,
+    setLikes: setLikes,
+    customFilters: customFilters,
+    addCustomFilter: addCustomFilter,
+    removeCustomFilter: removeCustomFilter,
+    queries: queries,
+    setQueries: setQueries
+  };
+  return /*#__PURE__*/React.createElement(CollectionContext.Provider, {
+    value: value
+  }, children);
+};
+
+/**
+ * FORMATS
+ */
+var FORMATS = {
+  NONE: '',
+  DATE: 'date',
+  DATERANGE: 'DATERANGE',
+  TIME: 'time',
+  EMAIL: 'email',
+  HTML: 'HTML',
+  URL: 'URL',
+  IMG: 'IMG',
+  COLOR: 'COLOR',
+  TOKENS: 'TOKENS'
+};
+
+/**
+ * Dynamic Form
+ */
+
+var DynamicForm = function DynamicForm(props) {
+  var schema = props.schema,
+      values = props.values,
+      onChange = props.onChange;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dynamic-form"
+  }, schema.map(function (field) {
+    var id = field.id;
+    return /*#__PURE__*/React.createElement(DynamicFormField, {
+      key: id,
+      field: field,
+      value: values[id],
+      onChange: change
+    });
+  }));
+};
+/**
+ * Dynamic Form Field
+ */
+
+var DynamicFormField = function DynamicFormField(props) {
+  var field = props.field,
+      value = props.value,
+      onChange = props.onChange;
+  var id = field.id,
+      type = field.type,
+      format = field.format,
+      options = field.options,
+      required = field.required;
+
+  function change(id, value) {
+    if (onChange) onChange(id, value);
+  }
+
+  function buildOptions() {
+    if (typeof options === "function") {
+      return options();
+    }
+
+    return options;
+  }
+
+  function renderByFormat() {
+    var label = required ? field.label + " *" : field.label;
+
+    switch (format) {
+      case FORMATS.DATE:
+        return /*#__PURE__*/React.createElement(TextField, {
+          id: id,
+          label: label,
+          type: "date",
+          value: value,
+          onChange: change,
+          outlined: true
+        });
+
+      case FORMATS.TIME:
+        return /*#__PURE__*/React.createElement(TextField, {
+          id: id,
+          label: label,
+          type: "time",
+          value: value,
+          onChange: change,
+          outlined: true
+        });
+
+      case FORMATS.DATERANGE:
+        return /*#__PURE__*/React.createElement(DateRange, {
+          id: id,
+          label: label,
+          value: value,
+          onChange: change
+        });
+
+      case FORMATS.TOKENS:
+        return /*#__PURE__*/React.createElement(TokenField, {
+          id: id,
+          label: label,
+          onChange: change,
+          options: buildOptions(),
+          tokens: value
+        });
+
+      case FORMATS.COLOR:
+        return /*#__PURE__*/React.createElement(ColorField, {
+          id: id,
+          onChange: change,
+          value: value
+        });
+
+      default:
+        return options ? /*#__PURE__*/React.createElement(DropDown, {
+          id: id,
+          label: label,
+          value: value,
+          onChange: change,
+          options: options,
+          outlined: true
+        }) : /*#__PURE__*/React.createElement(TextField, {
+          id: id,
+          label: label,
+          value: value,
+          onChange: change,
+          outlined: true
+        });
+    }
+  }
+
+  function renderByType() {
+    switch (type) {
+      case "boolean":
+        return /*#__PURE__*/React.createElement(CheckBox, {
+          id: id,
+          label: field.label,
+          value: value,
+          onChange: change
+        });
+
+      default:
+        return renderByFormat();
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dynamic-form-field"
+  }, renderByType());
+};
+
+/*.
+ * Collection Filters
+ */
+
+var CollectionFilters = function CollectionFilters(props) {
+  var schema = props.schema,
+      children = props.children;
+  var context = useContext(CollectionContext);
+  var filters = context.filters;
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  useEffect(function () {
+    context.setLikes(schema.filter(function (field) {
+      return field.like;
+    }).map(function (field) {
+      return field.id;
+    }));
+  }, [schema]);
+
+  function change(id, value) {
+    var _extends2;
+
+    context.setFilters(_extends({}, filters, (_extends2 = {}, _extends2[id] = value, _extends2)));
+  }
+
+  function toggle() {
+    setOpen(!open);
+  }
+
+  var toggleIcon = open ? "expand_less" : "expand_more";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collection-filters"
+  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("div", {
+    className: "custom-filters"
+  }, children), /*#__PURE__*/React.createElement(CollectionFiltersResume, {
+    schema: schema
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: toggleIcon,
+    clickable: true,
+    action: toggle
+  })), open ? /*#__PURE__*/React.createElement("div", {
+    className: "dynamic-filters"
+  }, /*#__PURE__*/React.createElement(DynamicForm, {
+    schema: schema,
+    values: filters,
+    onChange: change
+  })) : null);
+};
+
+var CollectionFiltersResume = function CollectionFiltersResume(props) {
+  var schema = props.schema;
+  var context = useContext(CollectionContext);
+  var filters = context.filters;
+  var fields = Object.keys(filters);
+  if (!fields.length) return null;
+  return /*#__PURE__*/React.createElement(Fragment, null, fields.filter(function (id) {
+    return filters[id] !== undefined && filters[id] !== null && filters[id] !== "";
+  }).map(function (id) {
+    var field = schema.find(function (field) {
+      return field.id === id;
+    });
+    var value = filters[id];
+    return /*#__PURE__*/React.createElement("div", {
+      className: "collection-filter-resume"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "collection-filter-resume-label"
+    }, field.label, ":"), /*#__PURE__*/React.createElement("span", {
+      className: "collection-filter-resume-value"
+    }, value));
+  }));
+};
+
+/**
+ * Collection List
+ */
+
+var CollectionList = function CollectionList(props) {
+  var context = useContext(CollectionContext);
+  var _context$all = context.all,
+      all = _context$all === void 0 ? [] : _context$all,
+      filters = context.filters,
+      customFilters = context.customFilters;
+  useEffect(function () {
+    context.load();
+  }, [filters, customFilters]);
+  var items = all.map(function (item) {
+    return {
+      icon: "folder",
+      line1: item.name,
+      meta: item.state
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collection-list"
+  }, /*#__PURE__*/React.createElement(List, {
+    items: items
+  }));
+};
+
+/**
+ * Collection Editor
+ */
+
+var CollectionEditor = function CollectionEditor(props) {
+  useContext(CollectionContext);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collection-editor"
+  }, "editor");
+};
+
+/**
+ * Collection Page
+ */
+
+var CollectionPage = function CollectionPage(props) {
+  var host = props.host,
+      url = props.url,
+      schema = props.schema,
+      layout = props.layout,
+      canFilter = props.canFilter,
+      customFilters = props.customFilters;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collection-page " + layout
+  }, /*#__PURE__*/React.createElement(CollectionContextProvider, {
+    host: host,
+    url: url
+  }, /*#__PURE__*/React.createElement(Header, {
+    title: "CollectionPage"
+  }), canFilter ? /*#__PURE__*/React.createElement(CollectionFilters, {
+    schema: schema
+  }, customFilters) : null, /*#__PURE__*/React.createElement(CollectionList, null), /*#__PURE__*/React.createElement(CollectionEditor, null)));
+};
+
 /**
  * Wizard Context
  */
@@ -9965,7 +10543,7 @@ var TaskContextProvider = function TaskContextProvider(props) {
       _props$frequency = props.frequency,
       frequency = _props$frequency === void 0 ? 5000 : _props$frequency,
       children = props.children;
-  var API = CollectionAPI(url, host);
+  var API = CollectionAPI$1(url, host);
   var listeners = [];
 
   function addListener(taskId, listener) {
@@ -10125,12 +10703,12 @@ var TaskMonitor = function TaskMonitor(props) {
       id: "init",
       label: "Inicio",
       type: TYPES.STRING,
-      format: FORMATS.DATE
+      format: FORMATS$1.DATE
     }, {
       id: "end",
       label: "Fin",
       type: TYPES.STRING,
-      format: FORMATS.DATE
+      format: FORMATS$1.DATE
     }, {
       id: "resourceID",
       label: "Recurso"
@@ -10177,5 +10755,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionFilters, CollectionPage, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, EditContentDialog, EmptyMessage, FORMATS, FieldEditor, FileExplorer, FilesGrid, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
+export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FilesGrid, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
 //# sourceMappingURL=index.modern.js.map