@tsed/react-formio 2.1.2 → 2.2.0

package/dist/index.js

@@ -2,6 +2,7 @@ var Webform = require('formiojs/Webform');
 var WebformBuilder = require('formiojs/WebformBuilder');
 var Wizard = require('formiojs/Wizard');
 var WizardBuilder = require('formiojs/WizardBuilder');
+var classnames = require('classnames');
 var noop = require('lodash/noop');
 var React = require('react');
 var formiojs = require('formiojs');
@@ -28,6 +29,7 @@ var Webform__default = /*#__PURE__*/_interopDefaultLegacy(Webform);
 var WebformBuilder__default = /*#__PURE__*/_interopDefaultLegacy(WebformBuilder);
 var Wizard__default = /*#__PURE__*/_interopDefaultLegacy(Wizard);
 var WizardBuilder__default = /*#__PURE__*/_interopDefaultLegacy(WizardBuilder);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Choices__default = /*#__PURE__*/_interopDefaultLegacy(Choices);
@@ -114,60 +116,6 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn) {
-  var module = { exports: {} };
-	return fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire (target) {
-	throw new Error('Could not dynamically require "' + target + '". Please configure the dynamicRequireTargets option of @rollup/plugin-commonjs appropriately for this require call to behave properly.');
-}
-
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-var classnames = createCommonjsModule(function (module) {
-  /* global define */
-
-  (function () {
-
-    var hasOwn = {}.hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames["default"] = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-
 function iconClass(iconset, name, spinning) {
   return formiojs.Templates.current.iconClass(iconset || formiojs.Templates.current.defaultIconset, name, spinning);
 }
@@ -191,40 +139,40 @@ function FormControl(_ref) {
     description = _ref.description,
     label = _ref.label,
     className = _ref.className;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": name && "form-group-" + name,
     id: "form-group-" + (name || ""),
-    className: classnames("form-group", className)
-  }, label && /*#__PURE__*/React__default['default'].createElement("label", {
+    className: classnames__default["default"]("form-group", className)
+  }, label && /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: name,
     "data-testid": "form-control-label",
     className: "col-form-label " + (required ? " field-required" : "")
-  }, label), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "input-group"
-  }, prefix && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, prefix && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "input-group-prepend"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-prefix"
-  }, prefix)), children, suffix && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, prefix)), children, suffix && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "input-group-append"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-suffix"
-  }, suffix))), description && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, suffix))), description && /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "form-control-description",
     className: "form-text text-muted"
   }, description));
 }
 FormControl.propTypes = {
-  label: PropTypes__default['default'].string,
-  name: PropTypes__default['default'].string.isRequired,
-  children: PropTypes__default['default'].any,
-  required: PropTypes__default['default'].bool,
-  description: PropTypes__default['default'].any
+  label: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string.isRequired,
+  children: PropTypes__default["default"].any,
+  required: PropTypes__default["default"].bool,
+  description: PropTypes__default["default"].any
 };
 
-var _excluded = ["name", "label", "size", "onChange", "required", "value", "choices", "description", "placeholder", "prefix", "suffix", "multiple", "layout"];
+var _excluded$f = ["name", "label", "size", "onChange", "required", "value", "choices", "description", "placeholder", "prefix", "suffix", "multiple", "layout"];
 function Select(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -239,12 +187,12 @@ function Select(_ref) {
     suffix = _ref.suffix,
     multiple = _ref.multiple,
     layout = _ref.layout,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var ref = React.useRef();
   React.useEffect(function () {
     var instance;
     if (layout === "choicesjs") {
-      instance = new Choices__default['default'](ref.current, {
+      instance = new Choices__default["default"](ref.current, {
         removeItemButton: true,
         placeholderValue: placeholder
       });
@@ -257,7 +205,7 @@ function Select(_ref) {
     label: placeholder,
     value: ""
   }].concat(choices);
-  return /*#__PURE__*/React__default['default'].createElement(FormControl, {
+  return /*#__PURE__*/React__default["default"].createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -265,11 +213,11 @@ function Select(_ref) {
     prefix: prefix,
     suffix: suffix,
     shadow: false
-  }, /*#__PURE__*/React__default['default'].createElement("select", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("select", _extends({
     ref: ref
   }, props, {
     "data-testid": "select_" + name,
-    className: classnames("form-control", size && "form-control-" + size),
+    className: classnames__default["default"]("form-control", size && "form-control-" + size),
     name: name,
     id: name,
     multiple: multiple,
@@ -281,7 +229,7 @@ function Select(_ref) {
   }), choices.map(function (_ref2) {
     var label = _ref2.label,
       value = _ref2.value;
-    return /*#__PURE__*/React__default['default'].createElement("option", {
+    return /*#__PURE__*/React__default["default"].createElement("option", {
       key: String(value),
       label: label,
       value: value
@@ -289,20 +237,20 @@ function Select(_ref) {
   })));
 }
 Select.propTypes = {
-  label: PropTypes__default['default'].string,
-  name: PropTypes__default['default'].string.isRequired,
-  value: PropTypes__default['default'].any,
-  required: PropTypes__default['default'].bool,
-  onChange: PropTypes__default['default'].func,
-  choices: PropTypes__default['default'].array.isRequired
+  label: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string.isRequired,
+  value: PropTypes__default["default"].any,
+  required: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func,
+  choices: PropTypes__default["default"].array.isRequired
 };
 
 function DrapNDropContainer(_ref) {
   var enableDragNDrop = _ref.enableDragNDrop,
     children = _ref.children;
-  return enableDragNDrop ? /*#__PURE__*/React__default['default'].createElement(reactDnd.DndProvider, {
+  return enableDragNDrop ? /*#__PURE__*/React__default["default"].createElement(reactDnd.DndProvider, {
     backend: reactDndHtml5Backend.HTML5Backend
-  }, children) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
+  }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 
 var LEFT_PAGE = "LEFT";
@@ -350,18 +298,18 @@ function getPageNumbers(_ref) {
   return range(1, totalPages);
 }
 
-var _excluded$1 = ["component", "children", "disabled", "active"];
+var _excluded$e = ["component", "children", "disabled", "active"];
 function PaginationButton(props) {
   var _props$component = props.component,
     Component = _props$component === void 0 ? "button" : _props$component,
     children = props.children,
     disabled = props.disabled,
     active = props.active,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return /*#__PURE__*/React__default['default'].createElement(Component, _extends({}, otherProps, {
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends({}, otherProps, {
     "data-testid": "pagination-button",
     disabled: disabled,
-    className: classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
+    className: classnames__default["default"]("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
   }), children);
 }
 function Pagination(props) {
@@ -379,6 +327,7 @@ function Pagination(props) {
     pageOptions = props.pageOptions,
     pageSize = props.pageSize,
     setPageSize = props.setPageSize,
+    totalLength = props.totalLength,
     _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
@@ -394,14 +343,14 @@ function Pagination(props) {
       label: value
     };
   });
-  return /*#__PURE__*/React__default['default'].createElement("nav", {
+  return /*#__PURE__*/React__default["default"].createElement("nav", {
     "aria-label": "Page navigation",
-    className: classnames("pagination-group -mb-3", className)
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+    className: classnames__default["default"]("pagination-group -mb-3", className)
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "pagination mb-3 mr-3"
-  }, /*#__PURE__*/React__default['default'].createElement("li", {
-    className: classnames("page-item", !canPreviousPage && "disabled")
-  }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
+  }, /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classnames__default["default"]("page-item", !canPreviousPage && "disabled")
+  }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
     onClick: function onClick() {
@@ -409,77 +358,82 @@ function Pagination(props) {
     }
   }, i18n("Previous"))), pageNumbers.map(function (page) {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
-      return /*#__PURE__*/React__default['default'].createElement("li", {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
         className: "page-item",
         key: page
-      }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
         "aria-hidden": "true"
       }, "..."));
     }
     var active = page - 1 === pageIndex;
-    return /*#__PURE__*/React__default['default'].createElement("li", {
-      className: classnames("page-item", active && "active"),
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: classnames__default["default"]("page-item", active && "active"),
       key: page
-    }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
+    }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
       onClick: function onClick() {
         return gotoPage(page - 1);
       }
     }, page));
-  }), /*#__PURE__*/React__default['default'].createElement("li", {
-    className: classnames("page-item", !canNextPage && "disabled")
-  }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
+  }), /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classnames__default["default"]("page-item", !canNextPage && "disabled")
+  }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
     onClick: function onClick() {
       return nextPage();
     }
-  }, i18n("Next")))), /*#__PURE__*/React__default['default'].createElement("li", {
+  }, i18n("Next")))), /*#__PURE__*/React__default["default"].createElement("li", {
     className: "mb-3 mr-3 flex items-center"
-  }, /*#__PURE__*/React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
     onChange: function onChange(name, value) {
       setPageSize(+value);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "ml-3"
+  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "mb-3 mr-3 flex items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React__default["default"].createElement("strong", null, pageIndex + 1, " of ", pageOptions.length), totalLength !== undefined && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "ml-3"
-  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React__default['default'].createElement("li", {
-    className: "mb-3 flex items-center"
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React__default['default'].createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
+  }, i18n("Totals"), ": ", /*#__PURE__*/React__default["default"].createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items"))), totalLength !== undefined && /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "mb-3 flex items-center",
+    "data-testid": "pagination-total-items"
+  }, i18n("Totals"), ": ", /*#__PURE__*/React__default["default"].createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items")));
 }
 
 function DefaultArrowSort(_ref) {
   var column = _ref.column;
   var isSorted = column.isSorted,
     isSortedDesc = column.isSortedDesc;
-  return /*#__PURE__*/React__default['default'].createElement("span", {
+  return /*#__PURE__*/React__default["default"].createElement("span", {
     className: "table-arrow-sort"
-  }, isSorted ? /*#__PURE__*/React__default['default'].createElement("i", {
+  }, isSorted ? /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")
   }) : "");
 }
 
 function DefaultCellHeader(_ref) {
   var column = _ref.column;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "table-cell-header"
-  }, /*#__PURE__*/React__default['default'].createElement("div", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     className: "table-cell-header__label"
-  }, column.getSortByToggleProps()), /*#__PURE__*/React__default['default'].createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }, column.getSortByToggleProps()), /*#__PURE__*/React__default["default"].createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "table-cell-header__filter"
   }, column.render("Filter")) : null);
 }
 
-var _excluded$2 = ["onDrag", "onDrop", "index"];
+var _excluded$d = ["onDrag", "onDrop", "index"];
 var DND_ITEM_TYPE = "row";
 function useDndRow(_ref) {
   var onDrag = _ref.onDrag,
     onDrop = _ref.onDrop,
     index = _ref.index,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var dropRef = React.useRef(null);
   var dragRef = React.useRef(null);
   var _useDrop = reactDnd.useDrop({
@@ -558,14 +512,14 @@ function useDndRow(_ref) {
 
 function DefaultCells(_ref) {
   var row = _ref.row;
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, row.cells.map(function (cell, i) {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, row.cells.map(function (cell, i) {
     var _cell$column = cell.column,
       hidden = _cell$column.hidden,
       colspan = _cell$column.colspan;
     if (hidden) {
       return null;
     }
-    return /*#__PURE__*/React__default['default'].createElement("td", _extends({
+    return /*#__PURE__*/React__default["default"].createElement("td", _extends({
       colSpan: colspan
     }, cell.getCellProps(), {
       key: "tableInstance.page.cells." + (cell.value || "value") + "." + i
@@ -573,30 +527,30 @@ function DefaultCells(_ref) {
   }));
 }
 
-var _excluded$3 = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+var _excluded$c = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
 function DefaultDndRow(props) {
   var _useDndRow = useDndRow(props),
     isDragging = _useDndRow.isDragging,
     dragRef = _useDndRow.dragRef,
     dropRef = _useDndRow.dropRef,
     opacity = _useDndRow.opacity;
-  return /*#__PURE__*/React__default['default'].createElement("tr", {
+  return /*#__PURE__*/React__default["default"].createElement("tr", {
     ref: dropRef,
     style: {
       opacity: opacity
     }
-  }, /*#__PURE__*/React__default['default'].createElement("td", {
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
     ref: dragRef,
     role: "cell",
     style: {
       cursor: isDragging ? "grabbing" : "grab"
     },
     className: "align-middle"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
-    className: classnames(iconClass(undefined, "dots-vertical-rounded"))
-  }))), /*#__PURE__*/React__default['default'].createElement(DefaultCells, props));
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, "dots-vertical-rounded"))
+  }))), /*#__PURE__*/React__default["default"].createElement(DefaultCells, props));
 }
 function DefaultRow(_ref) {
   var _onClick = _ref.onClick,
@@ -604,20 +558,20 @@ function DefaultRow(_ref) {
     enableDragNDrop = _ref.enableDragNDrop,
     onDrop = _ref.onDrop,
     onDrag = _ref.onDrag,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var opts = _extends({}, props, {
     onClick: function onClick() {
       return _onClick(row.original, "row");
     }
   }, row.getRowProps());
   if (enableDragNDrop) {
-    return /*#__PURE__*/React__default['default'].createElement(DefaultDndRow, _extends({}, opts, {
+    return /*#__PURE__*/React__default["default"].createElement(DefaultDndRow, _extends({}, opts, {
       row: row,
       onDrag: onDrag,
       onDrop: onDrop
     }));
   }
-  return /*#__PURE__*/React__default['default'].createElement("tr", opts, /*#__PURE__*/React__default['default'].createElement(DefaultCells, {
+  return /*#__PURE__*/React__default["default"].createElement("tr", opts, /*#__PURE__*/React__default["default"].createElement(DefaultCells, {
     row: row
   }));
 }
@@ -636,7 +590,7 @@ function callLast(fn, time) {
   };
 }
 
-var _excluded$4 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
+var _excluded$b = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
 function InputText(_ref) {
   var name = _ref.name,
     value = _ref.value,
@@ -650,7 +604,7 @@ function InputText(_ref) {
     description = _ref.description,
     className = _ref.className,
     placeholder = _ref.placeholder,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var _useState = React.useState(value),
     localValue = _useState[0],
     setValue = _useState[1];
@@ -660,7 +614,7 @@ function InputText(_ref) {
   React.useEffect(function () {
     setValue(value);
   }, [value]);
-  return /*#__PURE__*/React__default['default'].createElement(FormControl, {
+  return /*#__PURE__*/React__default["default"].createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -668,11 +622,11 @@ function InputText(_ref) {
     prefix: prefix,
     suffix: suffix,
     className: className
-  }, /*#__PURE__*/React__default['default'].createElement("input", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     type: type || "text"
   }, props, {
     "data-testid": "input_" + name,
-    className: classnames("form-control", size && "form-control-" + size),
+    className: classnames__default["default"]("form-control", size && "form-control-" + size),
     id: name,
     required: required,
     value: localValue || "",
@@ -685,15 +639,15 @@ function InputText(_ref) {
   })));
 }
 InputText.propTypes = {
-  label: PropTypes__default['default'].string,
-  type: PropTypes__default['default'].string,
-  name: PropTypes__default['default'].string.isRequired,
-  value: PropTypes__default['default'].any,
-  size: PropTypes__default['default'].string,
-  required: PropTypes__default['default'].bool,
-  onChange: PropTypes__default['default'].func,
-  prefix: PropTypes__default['default'].any,
-  suffix: PropTypes__default['default'].any
+  label: PropTypes__default["default"].string,
+  type: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string.isRequired,
+  value: PropTypes__default["default"].any,
+  size: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func,
+  prefix: PropTypes__default["default"].any,
+  suffix: PropTypes__default["default"].any
 };
 
 function DefaultColumnFilter(props) {
@@ -711,7 +665,7 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return /*#__PURE__*/React__default['default'].createElement(InputText, {
+  return /*#__PURE__*/React__default["default"].createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -756,19 +710,19 @@ function DefaultOperationButton(props) {
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
     } : _props$i18n;
-  return /*#__PURE__*/React__default['default'].createElement("button", {
-    className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), "btn-" + buttonSize),
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    className: classnames__default["default"](className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), "btn-" + buttonSize),
     onClick: stopPropagationWrapper(function () {
       return onClick(action);
     })
-  }, icon ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(undefined, icon)
-  }), " ", title && " ") : null, title && /*#__PURE__*/React__default['default'].createElement("span", {
+  }), " ", title && " ") : null, title && /*#__PURE__*/React__default["default"].createElement("span", {
     className: icon && title ? "ml-1" : ""
   }, i18n(title)));
 }
 
-var _excluded$5 = ["OperationButton"];
+var _excluded$a = ["OperationButton"];
 function DefaultCellOperations(_ref) {
   var operations = _ref.operations,
     row = _ref.row,
@@ -776,7 +730,7 @@ function DefaultCellOperations(_ref) {
     ctx = _ref.ctx,
     i18n = _ref.i18n;
   var data = row.original;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "btn-group"
   }, operations.filter(function (_ref2) {
     var permissionsResolver = _ref2.permissionsResolver;
@@ -784,8 +738,8 @@ function DefaultCellOperations(_ref) {
   }).map(function (_ref3) {
     var _ref3$OperationButton = _ref3.OperationButton,
       OperationButton = _ref3$OperationButton === void 0 ? DefaultOperationButton : _ref3$OperationButton,
-      operation = _objectWithoutPropertiesLoose(_ref3, _excluded$5);
-    return /*#__PURE__*/React__default['default'].createElement(OperationButton, _extends({
+      operation = _objectWithoutPropertiesLoose(_ref3, _excluded$a);
+    return /*#__PURE__*/React__default["default"].createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
       onClick: function onClick(action) {
@@ -817,12 +771,12 @@ function useOperations(_ref) {
         id: "operations",
         groupByBoundary: true,
         Header: function Header() {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "text-center"
           }, i18n("Operations"));
         },
         Cell: function Cell(props) {
-          return /*#__PURE__*/React__default['default'].createElement(CellOperations, _extends({}, props, {
+          return /*#__PURE__*/React__default["default"].createElement(CellOperations, _extends({}, props, {
             operations: operations,
             onClick: onClick,
             ctx: ctx,
@@ -834,7 +788,7 @@ function useOperations(_ref) {
   };
 }
 
-var _excluded$6 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
+var _excluded$9 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
 function getOperationCallback(operations, onClick) {
   return function (data, action) {
     var operation = operations.find(function (operation) {
@@ -846,12 +800,12 @@ function getOperationCallback(operations, onClick) {
   };
 }
 function DefaultLoader() {
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "Loading in progress");
 }
 function DefaultEmptyData() {
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
@@ -863,13 +817,13 @@ function useCustomTable(props) {
     columns = props.columns,
     data = props.data,
     _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? noop__default['default'] : _props$onChange,
+    onChange = _props$onChange === void 0 ? noop__default["default"] : _props$onChange,
     _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? noop__default['default'] : _props$onClick,
+    onClick = _props$onClick === void 0 ? noop__default["default"] : _props$onClick,
     _props$onDrag = props.onDrag,
-    onDrag = _props$onDrag === void 0 ? noop__default['default'] : _props$onDrag,
+    onDrag = _props$onDrag === void 0 ? noop__default["default"] : _props$onDrag,
     _props$onDrop = props.onDrop,
-    onDrop = _props$onDrop === void 0 ? noop__default['default'] : _props$onDrop,
+    onDrop = _props$onDrop === void 0 ? noop__default["default"] : _props$onDrop,
     _props$operations = props.operations,
     operations = _props$operations === void 0 ? [] : _props$operations,
     _props$pageSizes = props.pageSizes,
@@ -901,16 +855,16 @@ function useCustomTable(props) {
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
     } : _props$i18n,
-    ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
+    ctx = _objectWithoutPropertiesLoose(props, _excluded$9);
   var _onClick = getOperationCallback(operations, onClick);
-  var defaultColumn = React__default['default'].useMemo(function () {
+  var defaultColumn = React__default["default"].useMemo(function () {
     return {
       // Let's set up our default Filter UI
       Filter: ColumnFilter,
       ArrowSort: ArrowSort
     };
   }, [ColumnFilter, ArrowSort]);
-  var _React$useState = React__default['default'].useState(controlledFilterId),
+  var _React$useState = React__default["default"].useState(controlledFilterId),
     filterId = _React$useState[0],
     setFilterId = _React$useState[1];
   // DND
@@ -956,7 +910,7 @@ function useCustomTable(props) {
     pageSize = _tableInstance$state.pageSize,
     sortBy = _tableInstance$state.sortBy,
     filters = _tableInstance$state.filters;
-  React__default['default'].useEffect(function () {
+  React__default["default"].useEffect(function () {
     onChange({
       pageIndex: pageIndex,
       pageSize: pageSize,
@@ -965,12 +919,11 @@ function useCustomTable(props) {
       filterId: filterId
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
-  return _extends({}, props, {
+  return {
     className: className,
     tableInstance: tableInstance,
     CellHeader: CellHeader,
     isLoading: isLoading,
-    onClick: _onClick,
     Loader: Loader,
     EmptyData: EmptyData,
     Row: Row,
@@ -983,9 +936,11 @@ function useCustomTable(props) {
     setPageSize: setPageSize,
     i18n: i18n,
     children: children,
+    onClick: _onClick,
     onDrag: _onDrag,
-    onDrop: onDrop
-  });
+    onDrop: onDrop,
+    enableDragNDrop: props.enableDragNDrop
+  };
 }
 
 function Table(props) {
@@ -1011,30 +966,30 @@ function Table(props) {
     onDrag = _useCustomTable.onDrag,
     onDrop = _useCustomTable.onDrop;
   // Render the UI for your table
-  return /*#__PURE__*/React__default['default'].createElement(DrapNDropContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(DrapNDropContainer, {
     enableDragNDrop: enableDragNDrop
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames("table-group table-responsive", className)
-  }, /*#__PURE__*/React__default['default'].createElement("table", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("table-group table-responsive", className)
+  }, /*#__PURE__*/React__default["default"].createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), /*#__PURE__*/React__default['default'].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
-    return /*#__PURE__*/React__default['default'].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+  }, tableInstance.getTableProps()), /*#__PURE__*/React__default["default"].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
+    return /*#__PURE__*/React__default["default"].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
       key: "tableInstance.headerGroups" + i
-    }), enableDragNDrop ? /*#__PURE__*/React__default['default'].createElement("th", {
+    }), enableDragNDrop ? /*#__PURE__*/React__default["default"].createElement("th", {
       role: "columnheader",
       className: "text-center"
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "table-cell-header"
     })) : null, headerGroup.headers.map(function (column) {
-      return /*#__PURE__*/React__default['default'].createElement("th", _extends({}, column.getHeaderProps(), {
+      return /*#__PURE__*/React__default["default"].createElement("th", _extends({}, column.getHeaderProps(), {
         key: "tableInstance.headers.column." + column.id
-      }), /*#__PURE__*/React__default['default'].createElement(CellHeader, {
+      }), /*#__PURE__*/React__default["default"].createElement(CellHeader, {
         column: column
       }));
     }));
-  })), !isLoading ? /*#__PURE__*/React__default['default'].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row, index) {
+  })), !isLoading ? /*#__PURE__*/React__default["default"].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row, index) {
     tableInstance.prepareRow(row);
-    return /*#__PURE__*/React__default['default'].createElement(Row, {
+    return /*#__PURE__*/React__default["default"].createElement(Row, {
       index: index,
       enableDragNDrop: enableDragNDrop,
       onClick: onClick,
@@ -1043,9 +998,9 @@ function Table(props) {
       onDrag: onDrag,
       onDrop: onDrop
     });
-  })) : null), isLoading ? /*#__PURE__*/React__default['default'].createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React__default['default'].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React__default['default'].createElement("div", {
+  })) : null), isLoading ? /*#__PURE__*/React__default["default"].createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React__default["default"].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "overflow-hidden"
-  }, /*#__PURE__*/React__default['default'].createElement(Pagination, _extends({}, tableInstance, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pagination, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
@@ -1055,7 +1010,7 @@ function Table(props) {
   }))) : null, children));
 }
 
-var _excluded$7 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
+var _excluded$8 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
 function ActionsTable(_ref) {
   var _ref$disableFilters = _ref.disableFilters,
     disableFilters = _ref$disableFilters === void 0 ? true : _ref$disableFilters,
@@ -1064,8 +1019,8 @@ function ActionsTable(_ref) {
     _ref$availableActions = _ref.availableActions,
     availableActions = _ref$availableActions === void 0 ? [] : _ref$availableActions,
     _ref$onAddAction = _ref.onAddAction,
-    onAddAction = _ref$onAddAction === void 0 ? noop__default['default'] : _ref$onAddAction,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    onAddAction = _ref$onAddAction === void 0 ? noop__default["default"] : _ref$onAddAction,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
@@ -1078,13 +1033,13 @@ function ActionsTable(_ref) {
     accessor: "title",
     id: "title"
   }];
-  return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(Table, _extends({}, props, {
     disableFilters: disableFilters,
     disablePagination: disablePagination,
     columns: columns
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "pagination-group"
-  }, /*#__PURE__*/React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select, {
     name: "actions",
     value: currentAction,
     choices: [{
@@ -1094,9 +1049,9 @@ function ActionsTable(_ref) {
     onChange: function onChange(name, action) {
       return setAction(action);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "pl-3"
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     "data-testid": "submit",
     disabled: currentAction === "",
     className: "btn btn-success",
@@ -1104,8 +1059,8 @@ function ActionsTable(_ref) {
       return currentAction && onAddAction(currentAction);
     },
     type: "submit"
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
-    className: classnames(iconClass(undefined, "plus"), "mr-1")
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, "plus"), "mr-1")
   }), " ", i18n("Add action")))));
 }
 
@@ -1119,9 +1074,9 @@ function formatError(error) {
   if (Object.prototype.hasOwnProperty.call(error, "errors")) {
     return Object.keys(error.errors).map(function (key, index) {
       var item = error.errors[key];
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         key: index
-      }, /*#__PURE__*/React__default['default'].createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
     });
   }
   // If this is a standard error.
@@ -1131,7 +1086,7 @@ function formatError(error) {
   // If this is a joy validation error.
   if (Object.prototype.hasOwnProperty.call(error, "name") && error.name === "ValidationError") {
     return error.details.map(function (item, index) {
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         key: index
       }, item.message);
     });
@@ -1149,7 +1104,7 @@ function Alert(_ref) {
   if (!error || Array.isArray(error) && !error.length) {
     return null;
   }
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "alert alert-" + type,
     role: "alert"
   }, formatError(error));
@@ -1159,20 +1114,20 @@ function Card(_ref) {
   var children = _ref.children,
     label = _ref.label,
     className = _ref.className;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames("card", className)
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("card", className)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "card-header "
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, /*#__PURE__*/React__default["default"].createElement("h4", {
     className: "card-title"
-  }, label)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, label)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "card-body",
     role: "article"
   }, children));
 }
 
-var _excluded$8 = ["src", "form", "options", "submission", "url"];
-function _catch(body, recover) {
+var _excluded$7 = ["src", "form", "options", "submission", "url"];
+function _catch$1(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -1230,7 +1185,7 @@ function useForm(props) {
     try {
       var _temp2 = function () {
         if (hasEvent("onAsyncSubmit")) {
-          var _temp = _catch(function () {
+          var _temp = _catch$1(function () {
             return Promise.resolve(emit("onAsyncSubmit", submission, instance.current)).then(function () {});
           }, function (err) {
             callback((err == null ? void 0 : err.errors) || err);
@@ -1251,7 +1206,7 @@ function useForm(props) {
     options = _props$options === void 0 ? {} : _props$options,
     submission = props.submission,
     url = props.url,
-    funcs = _objectWithoutPropertiesLoose(props, _excluded$8);
+    funcs = _objectWithoutPropertiesLoose(props, _excluded$7);
   var element = React.useRef();
   var isLoaded = React.useRef();
   var instance = React.useRef();
@@ -1260,7 +1215,7 @@ function useForm(props) {
     hasEvent = _useEvents.hasEvent;
   var createWebForm = function createWebForm(srcOrForm, options) {
     options = Object.assign({}, options);
-    srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep__default['default'](srcOrForm);
+    srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep__default["default"](srcOrForm);
     if (!instance.current) {
       var _options, _options$hooks;
       isLoaded.current = false;
@@ -1282,7 +1237,7 @@ function useForm(props) {
         }
       });
       instance.current.ready.then(function (formio) {
-        submission && (formio.submission = cloneDeep__default['default'](submission));
+        submission && (formio.submission = cloneDeep__default["default"](submission));
         if (props.onFormReady) {
           props.onFormReady(formio);
         }
@@ -1294,10 +1249,10 @@ function useForm(props) {
   React.useEffect(function () {
     if (instance.current) {
       instance.current.ready.then(function (formio) {
-        if (isEqual__default['default'](formio.submission.data, submission == null ? void 0 : submission.data)) {
+        if (isEqual__default["default"](formio.submission.data, submission == null ? void 0 : submission.data)) {
           return;
         }
-        submission && (formio.submission = cloneDeep__default['default'](submission));
+        submission && (formio.submission = cloneDeep__default["default"](submission));
       });
     }
   }, [submission]);
@@ -1334,65 +1289,65 @@ function useForm(props) {
   };
 }
 
-formiojs.Components.setComponents(AllComponents__default['default']);
+formiojs.Components.setComponents(AllComponents__default["default"]);
 function Form(props) {
   var _useForm = useForm(props),
     element = _useForm.element;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "formioContainer" + (props.name || ""),
     ref: element,
     className: props.className
   });
 }
 Form.propTypes = {
-  name: PropTypes__default['default'].string,
-  className: PropTypes__default['default'].string,
+  name: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
   /**
    *
    */
-  src: PropTypes__default['default'].string,
+  src: PropTypes__default["default"].string,
   /**
    * url to fetch form
    */
-  url: PropTypes__default['default'].string,
+  url: PropTypes__default["default"].string,
   /**
    * Raw form object
    */
-  form: PropTypes__default['default'].object,
+  form: PropTypes__default["default"].object,
   /**
    * Data submission
    */
-  submission: PropTypes__default['default'].object,
+  submission: PropTypes__default["default"].object,
   /**
    * Configuration option
    */
-  options: PropTypes__default['default'].shape({
-    readOnly: PropTypes__default['default'].bool,
-    noAlerts: PropTypes__default['default'].bool,
-    i18n: PropTypes__default['default'].any,
-    template: PropTypes__default['default'].string,
-    saveDraft: PropTypes__default['default'].bool,
-    hooks: PropTypes__default['default'].any
+  options: PropTypes__default["default"].shape({
+    readOnly: PropTypes__default["default"].bool,
+    noAlerts: PropTypes__default["default"].bool,
+    i18n: PropTypes__default["default"].any,
+    template: PropTypes__default["default"].string,
+    saveDraft: PropTypes__default["default"].bool,
+    hooks: PropTypes__default["default"].any
   }),
-  onPrevPage: PropTypes__default['default'].func,
-  onNextPage: PropTypes__default['default'].func,
-  onCancel: PropTypes__default['default'].func,
-  onChange: PropTypes__default['default'].func,
-  onCustomEvent: PropTypes__default['default'].func,
-  onComponentChange: PropTypes__default['default'].func,
-  onSubmit: PropTypes__default['default'].func,
-  onAsyncSubmit: PropTypes__default['default'].func,
-  onSubmitDone: PropTypes__default['default'].func,
-  onFormLoad: PropTypes__default['default'].func,
-  onError: PropTypes__default['default'].func,
-  onRender: PropTypes__default['default'].func,
-  onAttach: PropTypes__default['default'].func,
-  onBuild: PropTypes__default['default'].func,
-  onFocus: PropTypes__default['default'].func,
-  onBlur: PropTypes__default['default'].func,
-  onInitialized: PropTypes__default['default'].func,
-  onFormReady: PropTypes__default['default'].func,
-  formioform: PropTypes__default['default'].any
+  onPrevPage: PropTypes__default["default"].func,
+  onNextPage: PropTypes__default["default"].func,
+  onCancel: PropTypes__default["default"].func,
+  onChange: PropTypes__default["default"].func,
+  onCustomEvent: PropTypes__default["default"].func,
+  onComponentChange: PropTypes__default["default"].func,
+  onSubmit: PropTypes__default["default"].func,
+  onAsyncSubmit: PropTypes__default["default"].func,
+  onSubmitDone: PropTypes__default["default"].func,
+  onFormLoad: PropTypes__default["default"].func,
+  onError: PropTypes__default["default"].func,
+  onRender: PropTypes__default["default"].func,
+  onAttach: PropTypes__default["default"].func,
+  onBuild: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onBlur: PropTypes__default["default"].func,
+  onInitialized: PropTypes__default["default"].func,
+  onFormReady: PropTypes__default["default"].func,
+  formioform: PropTypes__default["default"].any
 };
 
 function getRoleComponent(_ref) {
@@ -1584,17 +1539,17 @@ function dataAccessToSubmissions(form, formAccess) {
   };
 }
 function submissionsToDataAccess(form, submissions) {
-  return _extends({}, cloneDeep__default['default'](form), {
+  return _extends({}, cloneDeep__default["default"](form), {
     access: hashToAccess(submissions.access.data),
     submissionAccess: hashToAccess(submissions.submissionAccess.data)
   });
 }
 function shouldUpdate(type, submission, submissions) {
-  return !isEqual__default['default'](submission.data, submissions[type].data);
+  return !isEqual__default["default"](submission.data, submissions[type].data);
 }
 function updateSubmissions(type, submission, submissions, cb) {
   if (cb === void 0) {
-    cb = noop__default['default'];
+    cb = noop__default["default"];
   }
   if (shouldUpdate(type, submission, submissions)) {
     var _extends3;
@@ -1653,7 +1608,7 @@ function NamedFormAccess(_ref2) {
   var _useState2 = React.useState(true),
     isValid = _useState2[0],
     setIsValid = _useState2[1];
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -1666,11 +1621,11 @@ function NamedFormAccess(_ref2) {
       setIsValid(isValid);
     },
     options: options
-  }), /*#__PURE__*/React__default['default'].createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit
-  }, "Save access"), children, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, "Save access"), children, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "alert alert-warning mt-5"
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
@@ -1682,61 +1637,61 @@ function FormAccess(props) {
     options = _useFormAccess.options,
     onChange = _useFormAccess.onChange,
     onSubmit = _useFormAccess.onSubmit;
-  return /*#__PURE__*/React__default['default'].createElement("div", null, props.children, /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, props.children, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default["default"].createElement(Card, {
     label: "Manage submission access",
     className: "flex-1"
-  }, /*#__PURE__*/React__default['default'].createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React__default["default"].createElement(NamedFormAccess, {
     name: "submissionAccess",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, props.children)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default["default"].createElement(Card, {
     label: "About Submission Data Permissions"
-  }, /*#__PURE__*/React__default['default'].createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "mt-5 pl-7 list-disc"
-  }, /*#__PURE__*/React__default['default'].createElement("li", {
+  }, /*#__PURE__*/React__default["default"].createElement("li", {
     className: "pb-2"
-  }, /*#__PURE__*/React__default['default'].createElement("strong", null, "Own Permissions"), " - These permissions apply if the user is the original creator of the submission data and is listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data without seeing other user's data."), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Own Permissions"), " - These permissions apply if the user is the original creator of the submission data and is listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data without seeing other user's data."), /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default["default"].createElement(Card, {
     label: "Manage " + type + " definition access",
     className: "flex-1"
-  }, /*#__PURE__*/React__default['default'].createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React__default["default"].createElement(NamedFormAccess, {
     name: "access",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, props.children)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default["default"].createElement(Card, {
     label: "About Form Definition Access"
-  }, /*#__PURE__*/React__default['default'].createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), /*#__PURE__*/React__default['default'].createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React__default['default'].createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React__default['default'].createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), /*#__PURE__*/React__default["default"].createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React__default["default"].createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React__default["default"].createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
 }
 FormAccess.propTypes = {
-  type: PropTypes__default['default'].string.isRequired,
-  form: PropTypes__default['default'].object,
-  roles: PropTypes__default['default'].any,
-  children: PropTypes__default['default'].any,
-  options: PropTypes__default['default'].any,
-  onSubmit: PropTypes__default['default'].func
+  type: PropTypes__default["default"].string.isRequired,
+  form: PropTypes__default["default"].object,
+  roles: PropTypes__default["default"].any,
+  children: PropTypes__default["default"].any,
+  options: PropTypes__default["default"].any,
+  onSubmit: PropTypes__default["default"].func
 };
 
-var _excluded$9 = ["action"],
+var _excluded$6 = ["action"],
   _excluded2 = ["actionInfo", "children", "onSubmit", "options"];
 function mapData(options, defaults) {
   return _extends({}, defaults, options);
 }
 function mapSettingsForm(_ref) {
-  var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  FormioUtils__default['default'].eachComponent(settingsForm.components, function (component) {
+  var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  FormioUtils__default["default"].eachComponent(settingsForm.components, function (component) {
     var resourceExclude = "";
     if (component.type === "resourcefields") {
       component.type = "select";
@@ -1770,7 +1725,7 @@ function FormAction(_ref2) {
     }(),
     form = _ref3.form,
     submission = _ref3.submission;
-  return /*#__PURE__*/React__default['default'].createElement("div", null, children, /*#__PURE__*/React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, children, /*#__PURE__*/React__default["default"].createElement(Form, {
     form: form,
     submission: submission,
     onSubmit: onSubmit,
@@ -1778,7 +1733,7 @@ function FormAction(_ref2) {
   }), children);
 }
 
-function _catch$1(body, recover) {
+function _catch(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -1802,8 +1757,8 @@ var createBuilder = function createBuilder(el, _ref2) {
       display: display,
       components: [].concat(components)
     };
-    return Promise.resolve(_catch$1(function () {
-      return Promise.resolve(new FormioFormBuilder__default['default'](el, form, _extends({}, options)).ready).then(function (builder) {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(new FormioFormBuilder__default["default"](el, form, _extends({}, options)).ready).then(function (builder) {
         var handleEvent = function handleEvent(event) {
           return function () {
             events[event] && events[event].apply(events, [].slice.call(arguments));
@@ -1824,7 +1779,7 @@ var createBuilder = function createBuilder(el, _ref2) {
     return Promise.reject(e);
   }
 };
-Components__default['default'].setComponents(AllComponents__default['default']);
+Components__default["default"].setComponents(AllComponents__default["default"]);
 var EVENTS = ["addComponent", "updateComponent", "removeComponent", "saveComponent", "cancelComponent", "moveComponent", "editComponent", "editJson", "copyComponent", "pasteComponent"];
 var EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
 var FormBuilder = /*#__PURE__*/function (_React$Component) {
@@ -1836,7 +1791,7 @@ var FormBuilder = /*#__PURE__*/function (_React$Component) {
     _this.builderRef = void 0;
     _this.state = {
       display: props.display,
-      components: cloneDeep__default['default'](props.components)
+      components: cloneDeep__default["default"](props.components)
     };
     _this.elRef = null;
     _this.builderRef = null;
@@ -1870,7 +1825,7 @@ var FormBuilder = /*#__PURE__*/function (_React$Component) {
       return Promise.resolve(createBuilder(_this3.elRef.firstChild, {
         display: display,
         options: _extends({}, options),
-        components: cloneDeep__default['default'](components),
+        components: cloneDeep__default["default"](components),
         onChange: _this3.whenComponentsChange.bind(_this3),
         events: {
           onAddComponent: onAddComponent,
@@ -1933,44 +1888,44 @@ var FormBuilder = /*#__PURE__*/function (_React$Component) {
   };
   _proto.render = function render() {
     var _this6 = this;
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: function ref(_ref) {
         _this6.elRef = _ref;
       },
       onClick: function onClick(e) {
         return e.stopPropagation();
       }
-    }, /*#__PURE__*/React__default['default'].createElement("div", null));
+    }, /*#__PURE__*/React__default["default"].createElement("div", null));
   };
   return FormBuilder;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 FormBuilder.defaultProps = {
   options: {},
-  onChange: noop__default['default'],
-  onReady: noop__default['default'],
-  onDestroy: noop__default['default']
+  onChange: noop__default["default"],
+  onReady: noop__default["default"],
+  onDestroy: noop__default["default"]
 };
 FormBuilder.propTypes = {
-  components: PropTypes__default['default'].array,
-  display: PropTypes__default['default'].string,
-  options: PropTypes__default['default'].object,
-  onChange: PropTypes__default['default'].func,
-  onAddComponent: PropTypes__default['default'].func,
-  onUpdateComponent: PropTypes__default['default'].func,
-  onRemoveComponent: PropTypes__default['default'].func,
-  onSaveComponent: PropTypes__default['default'].func,
-  onCancelComponent: PropTypes__default['default'].func,
-  onMoveComponent: PropTypes__default['default'].func,
-  onEditComponent: PropTypes__default['default'].func,
-  onEditJson: PropTypes__default['default'].func,
-  onCopyComponent: PropTypes__default['default'].func,
-  onPasteComponent: PropTypes__default['default'].func
+  components: PropTypes__default["default"].array,
+  display: PropTypes__default["default"].string,
+  options: PropTypes__default["default"].object,
+  onChange: PropTypes__default["default"].func,
+  onAddComponent: PropTypes__default["default"].func,
+  onUpdateComponent: PropTypes__default["default"].func,
+  onRemoveComponent: PropTypes__default["default"].func,
+  onSaveComponent: PropTypes__default["default"].func,
+  onCancelComponent: PropTypes__default["default"].func,
+  onMoveComponent: PropTypes__default["default"].func,
+  onEditComponent: PropTypes__default["default"].func,
+  onEditJson: PropTypes__default["default"].func,
+  onCopyComponent: PropTypes__default["default"].func,
+  onPasteComponent: PropTypes__default["default"].func
 };
 
 function useTooltip(options) {
   var ref = React.useRef();
   React.useEffect(function () {
-    ref.current && new Tooltip__default['default'](ref.current, options);
+    ref.current && new Tooltip__default["default"](ref.current, options);
   }, [ref, options]);
   return ref;
 }
@@ -2012,62 +1967,62 @@ function FormEditCTAs(_ref) {
     placement: "top",
     title: t("Reset all changes")
   });
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "form-edit__actions"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-primary btn-save flex " + (disabled ? "disabled" : ""),
     disabled: disabled,
     onClick: function onClick() {
       return !disabled && onSubmit && onSubmit();
     }
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "mr-1 " + iconClass(options.iconset, "save")
-  }), saveText), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
+  }), saveText), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light btn-undo " + (hasUndo ? "" : "disabled"),
     onClick: function onClick() {
       return onUndo && onUndo();
     },
     ref: undoTooltipRef
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "undo")
-  })), /*#__PURE__*/React__default['default'].createElement("button", {
+  })), /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light btn-redo " + (hasRedo ? "" : "disabled"),
     onClick: function onClick() {
       return onRedo && onRedo();
     },
     ref: redoTooltipRef
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "redo")
-  }))), /*#__PURE__*/React__default['default'].createElement("div", null, onCopy && /*#__PURE__*/React__default['default'].createElement("button", {
+  }))), /*#__PURE__*/React__default["default"].createElement("div", null, onCopy && /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light",
     onClick: function onClick() {
       return onCopy();
     },
     ref: copyTooltipRef
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "copy")
-  })), /*#__PURE__*/React__default['default'].createElement("button", {
+  })), /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light btn-reset",
     onClick: function onClick() {
       return onReset && onReset();
     },
     ref: resetTooltipRef
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "reset")
   })))));
 }
 FormEditCTAs.propTypes = {
-  saveText: PropTypes__default['default'].string,
-  options: PropTypes__default['default'].object,
-  hasUndo: PropTypes__default['default'].bool,
-  hasRedo: PropTypes__default['default'].bool,
-  disabled: PropTypes__default['default'].bool,
-  onCopy: PropTypes__default['default'].func,
-  onSubmit: PropTypes__default['default'].func,
-  onReset: PropTypes__default['default'].func
+  saveText: PropTypes__default["default"].string,
+  options: PropTypes__default["default"].object,
+  hasUndo: PropTypes__default["default"].bool,
+  hasRedo: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  onCopy: PropTypes__default["default"].func,
+  onSubmit: PropTypes__default["default"].func,
+  onReset: PropTypes__default["default"].func
 };
 
-var _excluded$a = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
+var _excluded$5 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
 function InputTags(_ref) {
   var name = _ref.name,
     _ref$value = _ref.value,
@@ -2078,17 +2033,17 @@ function InputTags(_ref) {
     description = _ref.description,
     prefix = _ref.prefix,
     suffix = _ref.suffix,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var ref = React.useRef();
   React.useEffect(function () {
-    var instance = new Choices__default['default'](ref.current, {
+    var instance = new Choices__default["default"](ref.current, {
       delimiter: ",",
       editItems: true,
       removeItemButton: true
     });
     instance.setValue([].concat(value, []));
     instance.passedElement.element.addEventListener("addItem", function (event) {
-      onChange && onChange(name, uniq__default['default'](value.concat(event.detail.value)));
+      onChange && onChange(name, uniq__default["default"](value.concat(event.detail.value)));
     });
     instance.passedElement.element.addEventListener("removeItem", function (event) {
       onChange && onChange(name, value.filter(function (v) {
@@ -2099,14 +2054,14 @@ function InputTags(_ref) {
       instance.destroy();
     };
   }, []);
-  return /*#__PURE__*/React__default['default'].createElement(FormControl, {
+  return /*#__PURE__*/React__default["default"].createElement(FormControl, {
     name: name,
     label: label,
     required: required,
     description: description,
     prefix: prefix,
     suffix: suffix
-  }, /*#__PURE__*/React__default['default'].createElement("input", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     ref: ref,
     type: "text"
   }, props, {
@@ -2115,11 +2070,11 @@ function InputTags(_ref) {
   })));
 }
 InputTags.propTypes = {
-  label: PropTypes__default['default'].string,
-  name: PropTypes__default['default'].string.isRequired,
-  value: PropTypes__default['default'].array,
-  required: PropTypes__default['default'].bool,
-  onChange: PropTypes__default['default'].func
+  label: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string.isRequired,
+  value: PropTypes__default["default"].array,
+  required: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func
 };
 
 var defaultDisplayChoices = [{
@@ -2148,11 +2103,11 @@ function FormParameters(_ref) {
     _ref$baseUrl = _ref.baseUrl,
     baseUrl = _ref$baseUrl === void 0 ? window.location.origin : _ref$baseUrl;
   var hasTypeChoices = typeChoices && typeChoices.length > 1;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "form-edit__settings " + className
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React__default['default'].createElement(InputText, {
+  }, /*#__PURE__*/React__default["default"].createElement(InputText, {
     label: "Title",
     placeholder: "Enter the form title",
     name: "title",
@@ -2160,9 +2115,9 @@ function FormParameters(_ref) {
     value: form.title,
     disabled: !!readonly["title"],
     onChange: onChange
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React__default['default'].createElement(InputText, {
+  }, /*#__PURE__*/React__default["default"].createElement(InputText, {
     label: "Name",
     placeholder: "Enter the form machine name",
     name: "name",
@@ -2170,16 +2125,16 @@ function FormParameters(_ref) {
     disabled: !!readonly["name"],
     value: form.name,
     onChange: onChange
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React__default['default'].createElement(InputText, {
+  }, /*#__PURE__*/React__default["default"].createElement(InputText, {
     label: "Path",
     placeholder: "example",
     name: "path",
     className: "mb-0",
-    description: /*#__PURE__*/React__default['default'].createElement("span", {
+    description: /*#__PURE__*/React__default["default"].createElement("span", {
       className: "text-xxs flex items-center"
-    }, /*#__PURE__*/React__default['default'].createElement("i", {
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
       className: "bx bx-link ml-1 mr-1"
     }), baseUrl + "/" + form.path),
     required: true,
@@ -2190,26 +2145,26 @@ function FormParameters(_ref) {
       width: "120px"
     },
     onChange: onChange
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select, {
     label: "Display as",
     name: "display",
     disabled: !!readonly["display"],
     value: form.display,
     choices: displayChoices,
     onChange: onChange
-  })), hasTypeChoices && /*#__PURE__*/React__default['default'].createElement("div", {
+  })), hasTypeChoices && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select, {
     label: "Type",
     name: "type",
     value: form.type,
     choices: typeChoices,
     onChange: onChange
-  })), enableTags && /*#__PURE__*/React__default['default'].createElement("div", {
+  })), enableTags && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React__default['default'].createElement(InputTags, {
+  }, /*#__PURE__*/React__default["default"].createElement(InputTags, {
     label: "Tags",
     name: "tags",
     value: form.tags,
@@ -2217,23 +2172,23 @@ function FormParameters(_ref) {
   })));
 }
 FormParameters.propTypes = {
-  onChange: PropTypes__default['default'].func,
-  form: PropTypes__default['default'].object,
-  enableTags: PropTypes__default['default'].bool,
-  typeChoices: PropTypes__default['default'].array,
-  displayChoices: PropTypes__default['default'].array,
-  className: PropTypes__default['default'].string
+  onChange: PropTypes__default["default"].func,
+  form: PropTypes__default["default"].object,
+  enableTags: PropTypes__default["default"].bool,
+  typeChoices: PropTypes__default["default"].array,
+  displayChoices: PropTypes__default["default"].array,
+  className: PropTypes__default["default"].string
 };
 
 var hasChanged = function hasChanged(form, value) {
-  return !isEqual__default['default'](form, value);
+  return !isEqual__default["default"](form, value);
 };
 function createInitialState(props) {
   return {
     past: [],
     future: [],
-    current: cloneDeep__default['default'](props.form),
-    original: cloneDeep__default['default'](props.form)
+    current: cloneDeep__default["default"](props.form),
+    original: cloneDeep__default["default"](props.form)
   };
 }
 var reducer = function reducer(state, _ref) {
@@ -2244,11 +2199,11 @@ var reducer = function reducer(state, _ref) {
     future = state.future;
   var update = function update(newValue) {
     if (newValue.title !== state.current.title && !state.current._id) {
-      newValue.name = camelCase__default['default'](value.title);
-      newValue.path = camelCase__default['default'](value.title).toLowerCase();
+      newValue.name = camelCase__default["default"](value.title);
+      newValue.path = camelCase__default["default"](value.title).toLowerCase();
     }
     return _extends({}, state, {
-      past: [].concat(past, [cloneDeep__default['default'](current)]),
+      past: [].concat(past, [cloneDeep__default["default"](current)]),
       current: newValue
     });
   };
@@ -2259,8 +2214,8 @@ var reducer = function reducer(state, _ref) {
         var newPast = past.slice(0, past.length - 1);
         return _extends({}, state, {
           past: newPast,
-          current: cloneDeep__default['default'](previous),
-          future: [cloneDeep__default['default'](current)].concat(future)
+          current: cloneDeep__default["default"](previous),
+          future: [cloneDeep__default["default"](current)].concat(future)
         });
       }
       break;
@@ -2269,14 +2224,14 @@ var reducer = function reducer(state, _ref) {
         var next = future[0];
         var newFuture = future.slice(1);
         return _extends({}, state, {
-          past: [].concat(past, [cloneDeep__default['default'](current)]),
-          current: cloneDeep__default['default'](next),
+          past: [].concat(past, [cloneDeep__default["default"](current)]),
+          current: cloneDeep__default["default"](next),
           future: newFuture
         });
       }
       break;
     case "reset":
-      return update(cloneDeep__default['default'](state.original));
+      return update(cloneDeep__default["default"](state.original));
     case "formChange":
       // eslint-disable-next-line no-case-declarations
       var newValue = _extends({}, state.current, value);
@@ -2288,8 +2243,8 @@ var reducer = function reducer(state, _ref) {
       return _extends({}, state, {
         past: [],
         future: [],
-        current: cloneDeep__default['default'](value),
-        original: cloneDeep__default['default'](value)
+        current: cloneDeep__default["default"](value),
+        original: cloneDeep__default["default"](value)
       });
   }
   return state;
@@ -2348,7 +2303,7 @@ function useFormEdit(props) {
     formChange(_extends({}, current, (_extends2 = {}, _extends2[path] = value, _extends2)));
   };
   return {
-    form: cloneDeep__default['default'](current),
+    form: cloneDeep__default["default"](current),
     redo: redo,
     undo: undo,
     reset: reset,
@@ -2379,14 +2334,14 @@ function FormEdit(props) {
   var _props$options = props.options,
     options = _props$options === void 0 ? {} : _props$options,
     builder = props.builder;
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "form-edit"
-  }, /*#__PURE__*/React__default['default'].createElement(FormParameters, _extends({}, props, {
+  }, /*#__PURE__*/React__default["default"].createElement(FormParameters, _extends({}, props, {
     className: "",
     key: "form-settings-" + form._id,
     form: form,
     onChange: setChange
-  })), /*#__PURE__*/React__default['default'].createElement(FormEditCTAs, _extends({}, props, {
+  })), /*#__PURE__*/React__default["default"].createElement(FormEditCTAs, _extends({}, props, {
     className: "",
     key: "form-edit-ctas-" + form._id,
     options: options,
@@ -2398,7 +2353,7 @@ function FormEdit(props) {
     onReset: reset,
     onCopy: onCopy,
     onSubmit: onSubmit
-  }))), /*#__PURE__*/React__default['default'].createElement(FormBuilder, {
+  }))), /*#__PURE__*/React__default["default"].createElement(FormBuilder, {
     key: "form-builder-" + form._id,
     components: form.components,
     display: form.display,
@@ -2410,12 +2365,12 @@ function FormEdit(props) {
   }));
 }
 FormEdit.propTypes = {
-  form: PropTypes__default['default'].object.isRequired,
-  options: PropTypes__default['default'].object,
-  typeChoices: PropTypes__default['default'].array,
-  displayChoices: PropTypes__default['default'].array,
-  enableTags: PropTypes__default['default'].bool,
-  onSubmit: PropTypes__default['default'].func
+  form: PropTypes__default["default"].object.isRequired,
+  options: PropTypes__default["default"].object,
+  typeChoices: PropTypes__default["default"].array,
+  displayChoices: PropTypes__default["default"].array,
+  enableTags: PropTypes__default["default"].bool,
+  onSubmit: PropTypes__default["default"].func
 };
 
 function getFormSettingsSchema() {
@@ -2485,7 +2440,7 @@ function formSettingsToSubmission(form) {
   };
 }
 function submissionToFormSettings(form, submission) {
-  return _extends({}, cloneDeep__default['default'](form), {
+  return _extends({}, cloneDeep__default["default"](form), {
     tags: submission.data.tags,
     action: submission.data.action,
     properties: submission.data.properties
@@ -2495,7 +2450,7 @@ function submissionToFormSettings(form, submission) {
 function useFormSettings(_ref) {
   var formDefinition = _ref.form,
     _ref$onSubmit = _ref.onSubmit,
-    _onSubmit = _ref$onSubmit === void 0 ? noop__default['default'] : _ref$onSubmit,
+    _onSubmit = _ref$onSubmit === void 0 ? noop__default["default"] : _ref$onSubmit,
     options = _ref.options;
   var form = getFormSettingsSchema();
   var _useState = React.useState(true),
@@ -2518,7 +2473,7 @@ function useFormSettings(_ref) {
   };
   React.useEffect(function () {
     var input = formSettingsToSubmission(formDefinition);
-    if (formDefinition != null && formDefinition._id && !isEqual__default['default'](submission.data, input.data)) {
+    if (formDefinition != null && formDefinition._id && !isEqual__default["default"](submission.data, input.data)) {
       setSubmission(input);
     }
   }, [formDefinition == null ? void 0 : formDefinition._id]);
@@ -2547,12 +2502,12 @@ function FormSettings(props) {
   var i18n = options.i18n || function (f) {
     return f;
   };
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Form, {
     form: form,
     submission: submission,
     onChange: onChange,
     options: options
-  }), /*#__PURE__*/React__default['default'].createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
     "data-testid": "submit",
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
@@ -2578,7 +2533,7 @@ function SelectColumnFilter(_ref) {
       value: value
     };
   });
-  return /*#__PURE__*/React__default['default'].createElement(Select, {
+  return /*#__PURE__*/React__default["default"].createElement(Select, {
     key: "filter-" + column.id,
     name: "filter-" + column.id,
     size: "sm",
@@ -2593,6 +2548,17 @@ function SelectColumnFilter(_ref) {
   });
 }
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire (target) {
+	throw new Error('Could not dynamically require "' + target + '". Please configure the dynamicRequireTargets option of @rollup/plugin-commonjs appropriately for this require call to behave properly.');
+}
+
 var moment = createCommonjsModule(function (module, exports) {
   (function (global, factory) {
     module.exports = factory() ;
@@ -7117,40 +7083,40 @@ function FormsCell(props) {
   var _props$icon = props.icon,
     icon = _props$icon === void 0 ? "server" : _props$icon,
     form = props.row.original;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "p-1"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, /*#__PURE__*/React__default["default"].createElement("h4", {
     className: "text-primary text-lg flex items-center"
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
-    className: classnames(iconClass(undefined, icon), "mr-1")
-  }), form.title), /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, icon), "mr-1")
+  }), form.title), /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "reset-list text-gray-500"
-  }, /*#__PURE__*/React__default['default'].createElement("li", {
+  }, /*#__PURE__*/React__default["default"].createElement("li", {
     className: "text-sm"
-  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React__default['default'].createElement("li", {
+  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React__default["default"].createElement("li", {
     className: "mt-5"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "badge bg-light mr-1"
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
-    className: classnames(iconClass(undefined, "history"), "mr-1")
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map(function (tag, index) {
-    return /*#__PURE__*/React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, "history"), "mr-1")
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map(function (tag, index) {
+    return /*#__PURE__*/React__default["default"].createElement("button", {
       key: index,
       className: "badge badge-hover bg-secondary mr-1",
       onClick: stopPropagationWrapper(function () {
         props.setFilter("tags", tag);
         props.gotoPage(0);
       })
-    }, /*#__PURE__*/React__default['default'].createElement("i", {
-      className: classnames(iconClass(undefined, "tags"), "mr-1")
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
+      className: classnames__default["default"](iconClass(undefined, "tags"), "mr-1")
     }), tag);
   }))));
 }
 
-var _excluded$b = ["Cell"];
+var _excluded$4 = ["Cell"];
 function FormsTable(_ref) {
   var Cell = _ref.Cell,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
@@ -7162,7 +7128,7 @@ function FormsTable(_ref) {
     accessor: "title",
     id: "title",
     Cell: function Cell(props) {
-      return /*#__PURE__*/React__default['default'].createElement(FormCell, _extends({}, props, {
+      return /*#__PURE__*/React__default["default"].createElement(FormCell, _extends({}, props, {
         icon: props.icon,
         i18n: i18n
       }));
@@ -7175,14 +7141,14 @@ function FormsTable(_ref) {
     id: "tags",
     hidden: true,
     Filter: function Filter(props) {
-      return tags && tags.length ? /*#__PURE__*/React__default['default'].createElement(SelectColumnFilter, _extends({}, props, {
+      return tags && tags.length ? /*#__PURE__*/React__default["default"].createElement(SelectColumnFilter, _extends({}, props, {
         column: _extends({}, props.columns, {
           choices: tags
         })
-      })) : /*#__PURE__*/React__default['default'].createElement(DefaultColumnFilter, props);
+      })) : /*#__PURE__*/React__default["default"].createElement(DefaultColumnFilter, props);
     }
   }];
-  return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -7196,9 +7162,9 @@ function Loader(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
   if (isActive) {
-    return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: classnames("opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white", className)
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classnames__default["default"]("opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white", className)
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
       "data-testid": "icon_" + icon,
       color: color,
       className: "text-11xl " + iconClass(undefined, icon, true)
@@ -7207,13 +7173,13 @@ function Loader(_ref) {
   return null;
 }
 Loader.propTypes = {
-  isActive: PropTypes__default['default'].bool,
-  icon: PropTypes__default['default'].string,
-  color: PropTypes__default['default'].string,
-  className: PropTypes__default['default'].string
+  isActive: PropTypes__default["default"].bool,
+  icon: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string
 };
 
-var _excluded$c = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
+var _excluded$3 = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
 function useModal() {
   var _useState = React.useState(false),
     show = _useState[0],
@@ -7233,15 +7199,15 @@ function Modal(_ref) {
   var show = _ref.show,
     children = _ref.children,
     _ref$closeModal = _ref.closeModal,
-    closeModal = _ref$closeModal === void 0 ? noop__default$1['default'] : _ref$closeModal,
+    closeModal = _ref$closeModal === void 0 ? noop__default$1["default"] : _ref$closeModal,
     _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? noop__default$1['default'] : _ref$onClose,
+    onClose = _ref$onClose === void 0 ? noop__default$1["default"] : _ref$onClose,
     title = _ref.title,
     ModalFooter = _ref.footer,
     style = _ref.style,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var titleRef = React.useRef();
   var footerRef = React.useRef();
   var _useState2 = React.useState(),
@@ -7263,35 +7229,35 @@ function Modal(_ref) {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     role: "dialog",
     className: "formio-dialog formio-dialog-theme-default " + className
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "formio-dialog-overlay",
     onClick: onClickClose
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: style,
     className: "formio-dialog-content"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "formio-dialog-wrapper"
-  }, title ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }, title ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "formio-dialog-title",
     ref: titleRef,
     "data-testid": "modalTitle"
-  }, title) : null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, title) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "formio-dialog-body",
     style: {
       maxHeight: maxHeight
     },
     "data-testid": "modalBody"
-  }, show && children), ModalFooter ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }, show && children), ModalFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "formio-dialog-footer",
     ref: footerRef,
     "data-testid": "modalFooter"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalFooter, _extends({}, props, {
+  }, /*#__PURE__*/React__default["default"].createElement(ModalFooter, _extends({}, props, {
     closeModal: closeModal,
     onClose: onClickClose
-  }))) : null), /*#__PURE__*/React__default['default'].createElement("button", {
+  }))) : null), /*#__PURE__*/React__default["default"].createElement("button", {
     className: "formio-dialog-close float-right btn btn-secondary btn-sm",
     "aria-label": "close",
     "data-testid": "closeModal",
@@ -7299,7 +7265,7 @@ function Modal(_ref) {
   })));
 }
 
-var _excluded$d = ["maxWidth", "children"];
+var _excluded$2 = ["maxWidth", "children"];
 function RemoveModalFooter(_ref) {
   var value = _ref.value,
     valueToCompare = _ref.valueToCompare,
@@ -7309,13 +7275,13 @@ function RemoveModalFooter(_ref) {
     i18n = _ref$i18n === void 0 ? function (f) {
       return f;
     } : _ref$i18n;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     "data-testid": "customCloseModal",
     className: "btn btn-outline-dark mx-2",
     onClick: onClose
-  }, i18n("Cancel")), /*#__PURE__*/React__default['default'].createElement("button", {
+  }, i18n("Cancel")), /*#__PURE__*/React__default["default"].createElement("button", {
     disabled: valueToCompare !== value,
     "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
@@ -7324,8 +7290,8 @@ function RemoveModalFooter(_ref) {
         onSubmit(e);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("i", {
-    className: classnames(iconClass(undefined, "trash"), "mr-2")
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, "trash"), "mr-2")
   }), i18n("Remove")));
 }
 function RemoveModal(_ref2) {
@@ -7333,25 +7299,27 @@ function RemoveModal(_ref2) {
   var _ref2$maxWidth = _ref2.maxWidth,
     maxWidth = _ref2$maxWidth === void 0 ? "300px" : _ref2$maxWidth,
     children = _ref2.children,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
   var _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? noop__default['default'] : _props$i18n;
+    i18n = _props$i18n === void 0 ? function (f) {
+      return f;
+    } : _props$i18n;
   var _useState = React.useState(),
     value = _useState[0],
     setValue = _useState[1];
-  return /*#__PURE__*/React__default['default'].createElement(Modal, _extends({}, props, {
-    className: classnames(props.className, "formio-dialog-theme-remove"),
+  return /*#__PURE__*/React__default["default"].createElement(Modal, _extends({}, props, {
+    className: classnames__default["default"](props.className, "formio-dialog-theme-remove"),
     style: {
       maxWidth: maxWidth
     },
     title: "Drop " + ((_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()),
     value: value,
     footer: RemoveModalFooter
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "px-4 pt-3 pb-5"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "pb-1"
-  }, children, i18n("To drop"), " ", /*#__PURE__*/React__default['default'].createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React__default['default'].createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React__default['default'].createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React__default['default'].createElement(InputText, {
+  }, children, i18n("To drop"), " ", /*#__PURE__*/React__default["default"].createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React__default["default"].createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React__default["default"].createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React__default["default"].createElement(InputText, {
     name: "remove",
     value: value,
     onChange: function onChange(name, value) {
@@ -7376,6 +7344,12 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     _this.reactInstance = void 0;
     _this.shouldSetValue = void 0;
     _this.dataForSetting = void 0;
+    /**
+     * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
+     *
+     * @param value
+     * @param flags
+     */
     _this.updateValue = function (value, flags) {
       flags = flags || {};
       var newValue = value === undefined || value === null ? _this.getValue() : value;
@@ -7469,7 +7443,7 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
   ;
   _proto.attachReact = function attachReact(element) {
     // eslint-disable-next-line react/no-render-return-value
-    return ReactDOM__default['default'].render(this.renderReact(), element);
+    return ReactDOM__default["default"].render(this.renderReact(), element);
   }
   /**
    * Override this function.
@@ -7478,7 +7452,7 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
   ;
   _proto.detachReact = function detachReact(element) {
     if (element) {
-      ReactDOM__default['default'].unmountComponentAtNode(element);
+      ReactDOM__default["default"].unmountComponentAtNode(element);
     }
   }
   /**
@@ -7498,13 +7472,7 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       this.dataForSetting = value;
     }
     return false;
-  }
-  /**
-   * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
-   *
-   * @param value
-   * @param flags
-   */;
+  };
   /**
    * Get the current value of the component. Should return the value set in the react component.
    *
@@ -7552,29 +7520,29 @@ function DefaultCell(_ref) {
       return f;
     } : _ref$render;
   if (value === undefined) {
-    return /*#__PURE__*/React__default['default'].createElement("span", null);
+    return /*#__PURE__*/React__default["default"].createElement("span", null);
   }
   var rendered = render(value);
   if (value !== rendered) {
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       dangerouslySetInnerHTML: {
         __html: rendered
       }
     });
   }
-  return /*#__PURE__*/React__default['default'].createElement("span", null, String(value));
+  return /*#__PURE__*/React__default["default"].createElement("span", null, String(value));
 }
 
 function mapFormToColumns(form) {
   var columns = [];
-  FormioUtils__default['default'].eachComponent(form.components, function (component) {
+  FormioUtils__default["default"].eachComponent(form.components, function (component) {
     if (component.tableView && component.key) {
       var cmp = formiojs.Components.create(component, {}, null, true);
       var column = {
         Header: component.label || component.title || component.key,
         accessor: "data." + component.key,
         Cell: function Cell(props) {
-          return /*#__PURE__*/React__default['default'].createElement(DefaultCell, _extends({}, props, {
+          return /*#__PURE__*/React__default["default"].createElement(DefaultCell, _extends({}, props, {
             render: function render(value) {
               return cmp.asString(value);
             }
@@ -7591,12 +7559,12 @@ function mapFormToColumns(form) {
   return columns;
 }
 
-var _excluded$e = ["form"];
+var _excluded$1 = ["form"];
 function SubmissionsTable(_ref) {
   var form = _ref.form,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var columns = form && mapFormToColumns(form);
-  return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -7607,7 +7575,7 @@ function SliderColumnFilter(_ref) {
     setFilter = _ref$column.setFilter,
     preFilteredRows = _ref$column.preFilteredRows,
     id = _ref$column.id;
-  var _React$useMemo = React__default['default'].useMemo(function () {
+  var _React$useMemo = React__default["default"].useMemo(function () {
       var min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
       var max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
       preFilteredRows.forEach(function (row) {
@@ -7618,7 +7586,7 @@ function SliderColumnFilter(_ref) {
     }, [id, preFilteredRows]),
     min = _React$useMemo[0],
     max = _React$useMemo[1];
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("input", {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
     type: "range",
     min: min,
     max: max,
@@ -7626,14 +7594,14 @@ function SliderColumnFilter(_ref) {
     onChange: function onChange(e) {
       setFilter(parseInt(e.target.value, 10));
     }
-  }), /*#__PURE__*/React__default['default'].createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: function onClick() {
       return setFilter(undefined);
     }
   }, "Off"));
 }
 
-var _excluded$f = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
+var _excluded = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
 function ButtonTab(_ref) {
   var icon = _ref.icon,
     back = _ref.back,
@@ -7643,19 +7611,19 @@ function ButtonTab(_ref) {
     children = _ref.children,
     className = _ref.className,
     after = _ref.after;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     title: "button-wrapper",
-    className: classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    className: classnames__default["default"]("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     title: "button-tab",
-    className: classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
+    className: classnames__default["default"]("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
     onClick: onClick
-  }, icon && /*#__PURE__*/React__default['default'].createElement("i", {
-    className: classnames(iconClass(undefined, icon), "tw-tabs__button-icon")
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, icon && /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, icon), "tw-tabs__button-icon")
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "tw-tabs__button-label"
-  }, children), after), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames("tw-tabs__button-border", isActive ? "-active" : "")
+  }, children), after), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("tw-tabs__button-border", isActive ? "-active" : "")
   }));
 }
 function Tabs(_ref2) {
@@ -7674,21 +7642,21 @@ function Tabs(_ref2) {
     i18n = _ref2$i18n === void 0 ? function (f) {
       return f;
     } : _ref2$i18n,
-    additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+    additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "tabs-comp",
     className: "tw-tabs " + className,
     style: style
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("nav", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("nav", {
     className: "tw-tabs__header"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tw-tabs__header-wrapper"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tw-tabs__header-border"
   }), items.filter(function (item) {
     return item.label || item.icon;
   }).map(function (item, index) {
-    return /*#__PURE__*/React__default['default'].createElement(Button, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
@@ -7697,11 +7665,11 @@ function Tabs(_ref2) {
         _onClick && _onClick(item);
       }
     }, additionalProps, item), i18n(item.label || ""));
-  }), AddButton && /*#__PURE__*/React__default['default'].createElement(AddButton, _extends({}, additionalProps, {
+  }), AddButton && /*#__PURE__*/React__default["default"].createElement(AddButton, _extends({}, additionalProps, {
     current: current
-  })))), HeaderChildren && /*#__PURE__*/React__default['default'].createElement(HeaderChildren, _extends({}, additionalProps, {
+  })))), HeaderChildren && /*#__PURE__*/React__default["default"].createElement(HeaderChildren, _extends({}, additionalProps, {
     current: current
-  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
     title: "tab-body",
     className: "tw-tabs__body"
   }, children));
@@ -7725,51 +7693,35 @@ function mapPagination(_temp) {
 
 Object.defineProperty(exports, 'Webform', {
   enumerable: true,
-  get: function () {
-    return Webform__default['default'];
-  }
+  get: function () { return Webform__default["default"]; }
 });
 Object.defineProperty(exports, 'WebformBuilder', {
   enumerable: true,
-  get: function () {
-    return WebformBuilder__default['default'];
-  }
+  get: function () { return WebformBuilder__default["default"]; }
 });
 Object.defineProperty(exports, 'Wizard', {
   enumerable: true,
-  get: function () {
-    return Wizard__default['default'];
-  }
+  get: function () { return Wizard__default["default"]; }
 });
 Object.defineProperty(exports, 'WizardBuilder', {
   enumerable: true,
-  get: function () {
-    return WizardBuilder__default['default'];
-  }
+  get: function () { return WizardBuilder__default["default"]; }
 });
 Object.defineProperty(exports, 'Components', {
   enumerable: true,
-  get: function () {
-    return formiojs.Components;
-  }
+  get: function () { return formiojs.Components; }
 });
 Object.defineProperty(exports, 'Formio', {
   enumerable: true,
-  get: function () {
-    return formiojs.Formio;
-  }
+  get: function () { return formiojs.Formio; }
 });
 Object.defineProperty(exports, 'Templates', {
   enumerable: true,
-  get: function () {
-    return formiojs.Templates;
-  }
+  get: function () { return formiojs.Templates; }
 });
 Object.defineProperty(exports, 'Utils', {
   enumerable: true,
-  get: function () {
-    return formiojs.Utils;
-  }
+  get: function () { return formiojs.Utils; }
 });
 exports.ActionsTable = ActionsTable;
 exports.Alert = Alert;
@@ -7793,9 +7745,11 @@ exports.FormSettings = FormSettings;
 exports.FormsTable = FormsTable;
 exports.InputTags = InputTags;
 exports.InputText = InputText;
+exports.LEFT_PAGE = LEFT_PAGE;
 exports.Loader = Loader;
 exports.Modal = Modal;
 exports.Pagination = Pagination;
+exports.RIGHT_PAGE = RIGHT_PAGE;
 exports.ReactComponent = ReactComponent;
 exports.RemoveModal = RemoveModal;
 exports.Select = Select;
@@ -7807,9 +7761,12 @@ exports.Tabs = Tabs;
 exports.callLast = callLast;
 exports.defaultDisplayChoices = defaultDisplayChoices;
 exports.getOperationCallback = getOperationCallback;
+exports.getPageNumbers = getPageNumbers;
 exports.iconClass = iconClass;
+exports.mapFormToColumns = mapFormToColumns;
 exports.mapPagination = mapPagination;
 exports.stopPropagationWrapper = stopPropagationWrapper;
+exports.swapElements = swapElements;
 exports.useCustomTable = useCustomTable;
 exports.useForm = useForm;
 exports.useFormEdit = useFormEdit;