@tsed/react-formio 2.1.0 → 2.1.2

package/dist/index.modern.js

@@ -3,7 +3,7 @@ export { default as WebformBuilder } from 'formiojs/WebformBuilder';
 export { default as Wizard } from 'formiojs/Wizard';
 export { default as WizardBuilder } from 'formiojs/WizardBuilder';
 import noop from 'lodash/noop';
-import React$1, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
+import React, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { Templates, Form as Form$1, Components } from 'formiojs';
 export { Components, Formio, Templates, Utils } from 'formiojs';
 import Choices from '@formio/choices.js';
@@ -128,27 +128,27 @@ function FormControl({
   label,
   className
 }) {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": name && `form-group-${name}`,
     id: `form-group-${name || ""}`,
     className: classnames("form-group", className)
-  }, label && /*#__PURE__*/React$1.createElement("label", {
+  }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: name,
     "data-testid": "form-control-label",
     className: `col-form-label ${required ? " field-required" : ""}`
-  }, label), /*#__PURE__*/React$1.createElement("div", {
+  }, label), /*#__PURE__*/React.createElement("div", {
     className: "input-group"
-  }, prefix && /*#__PURE__*/React$1.createElement("div", {
+  }, prefix && /*#__PURE__*/React.createElement("div", {
     className: "input-group-prepend"
-  }, /*#__PURE__*/React$1.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-prefix"
-  }, prefix)), children, suffix && /*#__PURE__*/React$1.createElement("div", {
+  }, prefix)), children, suffix && /*#__PURE__*/React.createElement("div", {
     className: "input-group-append"
-  }, /*#__PURE__*/React$1.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-suffix"
-  }, suffix))), description && /*#__PURE__*/React$1.createElement("div", {
+  }, suffix))), description && /*#__PURE__*/React.createElement("div", {
     "data-testid": "form-control-description",
     className: "form-text text-muted"
   }, description));
@@ -196,7 +196,7 @@ function Select(_ref) {
     label: placeholder,
     value: ""
   }, ...choices];
-  return /*#__PURE__*/React$1.createElement(FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -204,7 +204,7 @@ function Select(_ref) {
     prefix: prefix,
     suffix: suffix,
     shadow: false
-  }, /*#__PURE__*/React$1.createElement("select", _extends({
+  }, /*#__PURE__*/React.createElement("select", _extends({
     ref: ref
   }, props, {
     "data-testid": `select_${name}`,
@@ -221,7 +221,7 @@ function Select(_ref) {
     label,
     value
   }) => {
-    return /*#__PURE__*/React$1.createElement("option", {
+    return /*#__PURE__*/React.createElement("option", {
       key: String(value),
       label: label,
       value: value
@@ -297,7 +297,7 @@ function PaginationButton(props) {
       active
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return /*#__PURE__*/React$1.createElement(Component, _extends({}, otherProps, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
     "data-testid": "pagination-button",
     disabled: disabled,
     className: classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
@@ -328,55 +328,55 @@ function Pagination(props) {
     value,
     label: value
   }));
-  return /*#__PURE__*/React$1.createElement("nav", {
+  return /*#__PURE__*/React.createElement("nav", {
     "aria-label": "Page navigation",
     className: classnames("pagination-group -mb-3", className)
-  }, /*#__PURE__*/React$1.createElement("ul", {
+  }, /*#__PURE__*/React.createElement("ul", {
     className: "pagination mb-3 mr-3"
-  }, /*#__PURE__*/React$1.createElement("li", {
+  }, /*#__PURE__*/React.createElement("li", {
     className: classnames("page-item", !canPreviousPage && "disabled")
-  }, /*#__PURE__*/React$1.createElement(PaginationButton, {
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
     onClick: () => previousPage()
   }, i18n("Previous"))), pageNumbers.map(page => {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
-      return /*#__PURE__*/React$1.createElement("li", {
+      return /*#__PURE__*/React.createElement("li", {
         className: "page-item",
         key: page
-      }, /*#__PURE__*/React$1.createElement(PaginationButton, {
+      }, /*#__PURE__*/React.createElement(PaginationButton, {
         "aria-hidden": "true"
       }, "..."));
     }
     const active = page - 1 === pageIndex;
-    return /*#__PURE__*/React$1.createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       className: classnames("page-item", active && "active"),
       key: page
-    }, /*#__PURE__*/React$1.createElement(PaginationButton, {
+    }, /*#__PURE__*/React.createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
       onClick: () => gotoPage(page - 1)
     }, page));
-  }), /*#__PURE__*/React$1.createElement("li", {
+  }), /*#__PURE__*/React.createElement("li", {
     className: classnames("page-item", !canNextPage && "disabled")
-  }, /*#__PURE__*/React$1.createElement(PaginationButton, {
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
     onClick: () => nextPage()
-  }, i18n("Next")))), /*#__PURE__*/React$1.createElement("li", {
+  }, i18n("Next")))), /*#__PURE__*/React.createElement("li", {
     className: "mb-3 mr-3 flex items-center"
-  }, /*#__PURE__*/React$1.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
     onChange: (name, value) => {
       setPageSize(+value);
     }
-  }), /*#__PURE__*/React$1.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "ml-3"
-  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React$1.createElement("li", {
+  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React.createElement("li", {
     className: "mb-3 flex items-center"
-  }, /*#__PURE__*/React$1.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React$1.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
+  }, /*#__PURE__*/React.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
 }
 
 function DefaultArrowSort({
@@ -386,9 +386,9 @@ function DefaultArrowSort({
     isSorted,
     isSortedDesc
   } = column;
-  return /*#__PURE__*/React$1.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", {
     className: "table-arrow-sort"
-  }, isSorted ? /*#__PURE__*/React$1.createElement("i", {
+  }, isSorted ? /*#__PURE__*/React.createElement("i", {
     className: iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")
   }) : "");
 }
@@ -396,11 +396,11 @@ function DefaultArrowSort({
 function DefaultCellHeader({
   column
 }) {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "table-cell-header"
-  }, /*#__PURE__*/React$1.createElement("div", _extends({
+  }, /*#__PURE__*/React.createElement("div", _extends({
     className: "table-cell-header__label"
-  }, column.getSortByToggleProps()), /*#__PURE__*/React$1.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React$1.createElement("div", {
+  }, column.getSortByToggleProps()), /*#__PURE__*/React.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React.createElement("div", {
     className: "table-cell-header__filter"
   }, column.render("Filter")) : null);
 }
@@ -511,23 +511,23 @@ function DefaultDndRow(props) {
     dropRef,
     opacity
   } = useDndRow(props);
-  return /*#__PURE__*/React$1.createElement("tr", {
+  return /*#__PURE__*/React.createElement("tr", {
     ref: dropRef,
     style: {
       opacity
     }
-  }, /*#__PURE__*/React$1.createElement("td", {
+  }, /*#__PURE__*/React.createElement("td", {
     ref: dragRef,
     role: "cell",
     style: {
       cursor: isDragging ? "grabbing" : "grab"
     },
     className: "align-middle"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "dots-vertical-rounded"))
-  }))), /*#__PURE__*/React$1.createElement(DefaultCells, props));
+  }))), /*#__PURE__*/React.createElement(DefaultCells, props));
 }
 function DefaultRow(_ref) {
   let {
@@ -542,13 +542,13 @@ function DefaultRow(_ref) {
     onClick: () => onClick(row.original, "row")
   }, row.getRowProps());
   if (enableDragNDrop) {
-    return /*#__PURE__*/React$1.createElement(DefaultDndRow, _extends({}, opts, {
+    return /*#__PURE__*/React.createElement(DefaultDndRow, _extends({}, opts, {
       row: row,
       onDrag: onDrag,
       onDrop: onDrop
     }));
   }
-  return /*#__PURE__*/React$1.createElement("tr", opts, /*#__PURE__*/React$1.createElement(DefaultCells, {
+  return /*#__PURE__*/React.createElement("tr", opts, /*#__PURE__*/React.createElement(DefaultCells, {
     row: row
   }));
 }
@@ -586,7 +586,7 @@ function InputText(_ref) {
   useEffect(() => {
     setValue(value);
   }, [value]);
-  return /*#__PURE__*/React$1.createElement(FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -594,7 +594,7 @@ function InputText(_ref) {
     prefix: prefix,
     suffix: suffix,
     className: className
-  }, /*#__PURE__*/React$1.createElement("input", _extends({
+  }, /*#__PURE__*/React.createElement("input", _extends({
     type: type || "text"
   }, props, {
     "data-testid": `input_${name}`,
@@ -638,7 +638,7 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return /*#__PURE__*/React$1.createElement(InputText, {
+  return /*#__PURE__*/React.createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -673,12 +673,12 @@ function DefaultOperationButton(props) {
     title = "",
     i18n = f => f
   } = props;
-  return /*#__PURE__*/React$1.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`),
     onClick: stopPropagationWrapper(() => onClick(action))
-  }, icon ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("i", {
+  }, icon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
     className: iconClass(undefined, icon)
-  }), " ", title && " ") : null, title && /*#__PURE__*/React$1.createElement("span", {
+  }), " ", title && " ") : null, title && /*#__PURE__*/React.createElement("span", {
     className: icon && title ? "ml-1" : ""
   }, i18n(title)));
 }
@@ -692,7 +692,7 @@ function DefaultCellOperations({
   i18n
 }) {
   const data = row.original;
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "btn-group"
   }, operations.filter(({
     permissionsResolver
@@ -701,7 +701,7 @@ function DefaultCellOperations({
         OperationButton = DefaultOperationButton
       } = _ref,
       operation = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-    return /*#__PURE__*/React$1.createElement(OperationButton, _extends({
+    return /*#__PURE__*/React.createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
       onClick: action => onClick(data, action),
@@ -727,10 +727,10 @@ function useOperations({
       return [...columns, {
         id: "operations",
         groupByBoundary: true,
-        Header: () => /*#__PURE__*/React$1.createElement("div", {
+        Header: () => /*#__PURE__*/React.createElement("div", {
           className: "text-center"
         }, i18n("Operations")),
-        Cell: props => /*#__PURE__*/React$1.createElement(CellOperations, _extends({}, props, {
+        Cell: props => /*#__PURE__*/React.createElement(CellOperations, _extends({}, props, {
           operations: operations,
           onClick: onClick,
           ctx: ctx,
@@ -751,12 +751,12 @@ function getOperationCallback(operations, onClick) {
   };
 }
 function DefaultLoader() {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "Loading in progress");
 }
 function DefaultEmptyData() {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
@@ -793,14 +793,17 @@ function useCustomTable(props) {
     } = props,
     ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
   const _onClick = getOperationCallback(operations, onClick);
-  const defaultColumn = React$1.useMemo(() => ({
+  const defaultColumn = React.useMemo(() => ({
     // Let's set up our default Filter UI
     Filter: ColumnFilter,
     ArrowSort
   }), [ColumnFilter, ArrowSort]);
-  const [filterId, setFilterId] = React$1.useState(controlledFilterId);
+  const [filterId, setFilterId] = React.useState(controlledFilterId);
   // DND
   const [records, setRecords] = useState(data);
+  useEffect(() => {
+    setRecords(data);
+  }, [data]);
   const _onDrag = (dragIndex, hoverIndex) => {
     const newRecords = swapElements([...records], dragIndex, hoverIndex);
     setRecords(newRecords);
@@ -840,7 +843,7 @@ function useCustomTable(props) {
       filters
     }
   } = tableInstance;
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     onChange({
       pageIndex,
       pageSize,
@@ -896,26 +899,26 @@ function Table(props) {
     onDrop
   } = useCustomTable(props);
   // Render the UI for your table
-  return /*#__PURE__*/React$1.createElement(DrapNDropContainer, {
+  return /*#__PURE__*/React.createElement(DrapNDropContainer, {
     enableDragNDrop: enableDragNDrop
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: classnames("table-group table-responsive", className)
-  }, /*#__PURE__*/React$1.createElement("table", _extends({
+  }, /*#__PURE__*/React.createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), /*#__PURE__*/React$1.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React$1.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+  }, tableInstance.getTableProps()), /*#__PURE__*/React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
     key: `tableInstance.headerGroups${i}`
-  }), enableDragNDrop ? /*#__PURE__*/React$1.createElement("th", {
+  }), enableDragNDrop ? /*#__PURE__*/React.createElement("th", {
     role: "columnheader",
     className: "text-center"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "table-cell-header"
-  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React$1.createElement("th", _extends({}, column.getHeaderProps(), {
+  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React.createElement("th", _extends({}, column.getHeaderProps(), {
     key: `tableInstance.headers.column.${column.id}`
-  }), /*#__PURE__*/React$1.createElement(CellHeader, {
+  }), /*#__PURE__*/React.createElement(CellHeader, {
     column: column
-  })))))), !isLoading ? /*#__PURE__*/React$1.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
+  })))))), !isLoading ? /*#__PURE__*/React.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
     tableInstance.prepareRow(row);
-    return /*#__PURE__*/React$1.createElement(Row, {
+    return /*#__PURE__*/React.createElement(Row, {
       index: index,
       enableDragNDrop: enableDragNDrop,
       onClick: onClick,
@@ -924,9 +927,9 @@ function Table(props) {
       onDrag: onDrag,
       onDrop: onDrop
     });
-  })) : null), isLoading ? /*#__PURE__*/React$1.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React$1.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React$1.createElement("div", {
+  })) : null), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React.createElement("div", {
     className: "overflow-hidden"
-  }, /*#__PURE__*/React$1.createElement(Pagination, _extends({}, tableInstance, {
+  }, /*#__PURE__*/React.createElement(Pagination, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
@@ -954,13 +957,13 @@ function ActionsTable(_ref) {
     accessor: "title",
     id: "title"
   }];
-  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     disableFilters: disableFilters,
     disablePagination: disablePagination,
     columns: columns
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "pagination-group"
-  }, /*#__PURE__*/React$1.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     name: "actions",
     value: currentAction,
     choices: [{
@@ -968,15 +971,15 @@ function ActionsTable(_ref) {
       value: ""
     }].concat(availableActions),
     onChange: (name, action) => setAction(action)
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "pl-3"
-  }, /*#__PURE__*/React$1.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     "data-testid": "submit",
     disabled: currentAction === "",
     className: "btn btn-success",
     onClick: () => currentAction && onAddAction(currentAction),
     type: "submit"
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "plus"), "mr-1")
   }), " ", i18n("Add action")))));
 }
@@ -991,9 +994,9 @@ function formatError(error) {
   if (Object.prototype.hasOwnProperty.call(error, "errors")) {
     return Object.keys(error.errors).map((key, index) => {
       const item = error.errors[key];
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index
-      }, /*#__PURE__*/React$1.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
+      }, /*#__PURE__*/React.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
     });
   }
   // If this is a standard error.
@@ -1003,7 +1006,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((item, index) => {
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index
       }, item.message);
     });
@@ -1021,7 +1024,7 @@ function Alert({
   if (!error || Array.isArray(error) && !error.length) {
     return null;
   }
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `alert alert-${type}`,
     role: "alert"
   }, formatError(error));
@@ -1032,13 +1035,13 @@ function Card({
   label,
   className
 }) {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classnames("card", className)
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "card-header "
-  }, /*#__PURE__*/React$1.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "card-title"
-  }, label)), /*#__PURE__*/React$1.createElement("div", {
+  }, label)), /*#__PURE__*/React.createElement("div", {
     className: "card-body",
     role: "article"
   }, children));
@@ -1194,7 +1197,7 @@ function Form(props) {
   const {
     element
   } = useForm(props);
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": `formioContainer${props.name || ""}`,
     ref: element,
     className: props.className
@@ -1494,7 +1497,7 @@ function NamedFormAccess({
   children
 }) {
   const [isValid, setIsValid] = useState(true);
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Form, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -1508,11 +1511,11 @@ function NamedFormAccess({
       setIsValid(isValid);
     },
     options: options
-  }), /*#__PURE__*/React$1.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit
-  }, "Save access"), children, /*#__PURE__*/React$1.createElement("div", {
+  }, "Save access"), children, /*#__PURE__*/React.createElement("div", {
     className: "alert alert-warning mt-5"
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
@@ -1525,43 +1528,43 @@ function FormAccess(props) {
     onChange,
     onSubmit
   } = useFormAccess(props);
-  return /*#__PURE__*/React$1.createElement("div", null, props.children, /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, props.children, /*#__PURE__*/React.createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React$1.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: "Manage submission access",
     className: "flex-1"
-  }, /*#__PURE__*/React$1.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
     name: "submissionAccess",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React$1.createElement("div", {
+  }, props.children)), /*#__PURE__*/React.createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React$1.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: "About Submission Data Permissions"
-  }, /*#__PURE__*/React$1.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React$1.createElement("ul", {
+  }, /*#__PURE__*/React.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React.createElement("ul", {
     className: "mt-5 pl-7 list-disc"
-  }, /*#__PURE__*/React$1.createElement("li", {
+  }, /*#__PURE__*/React.createElement("li", {
     className: "pb-2"
-  }, /*#__PURE__*/React$1.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$1.createElement("li", null, /*#__PURE__*/React$1.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.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.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React.createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React$1.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: `Manage ${type} definition access`,
     className: "flex-1"
-  }, /*#__PURE__*/React$1.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
     name: "access",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React$1.createElement("div", {
+  }, props.children)), /*#__PURE__*/React.createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React$1.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: "About Form Definition Access"
-  }, /*#__PURE__*/React$1.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$1.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React$1.createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React$1.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.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.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React.createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React.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.string.isRequired,
@@ -1616,7 +1619,7 @@ function FormAction(_ref2) {
       }
     };
   })();
-  return /*#__PURE__*/React$1.createElement("div", null, children, /*#__PURE__*/React$1.createElement(Form, {
+  return /*#__PURE__*/React.createElement("div", null, children, /*#__PURE__*/React.createElement(Form, {
     form: form,
     submission: submission,
     onSubmit: onSubmit,
@@ -1654,7 +1657,7 @@ async function createBuilder(el, {
     console.error(er);
   }
 }
-class FormBuilder extends React$1.Component {
+class FormBuilder extends React.Component {
   constructor(props) {
     super(props);
     this.elRef = void 0;
@@ -1732,12 +1735,12 @@ class FormBuilder extends React$1.Component {
     });
   }
   render() {
-    return /*#__PURE__*/React$1.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => {
         this.elRef = ref;
       },
       onClick: e => e.stopPropagation()
-    }, /*#__PURE__*/React$1.createElement("div", null));
+    }, /*#__PURE__*/React.createElement("div", null));
   }
 }
 FormBuilder.defaultProps = {
@@ -1806,37 +1809,37 @@ function FormEditCTAs({
     placement: "top",
     title: t("Reset all changes")
   });
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "form-edit__actions"
-  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("button", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: `btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`,
     disabled: disabled,
     onClick: () => !disabled && onSubmit && onSubmit()
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: `mr-1 ${iconClass(options.iconset, "save")}`
-  }), saveText), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("button", {
+  }), saveText), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: `btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`,
     onClick: () => onUndo && onUndo(),
     ref: undoTooltipRef
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "undo")
-  })), /*#__PURE__*/React$1.createElement("button", {
+  })), /*#__PURE__*/React.createElement("button", {
     className: `btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`,
     onClick: () => onRedo && onRedo(),
     ref: redoTooltipRef
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "redo")
-  }))), /*#__PURE__*/React$1.createElement("div", null, onCopy && /*#__PURE__*/React$1.createElement("button", {
+  }))), /*#__PURE__*/React.createElement("div", null, onCopy && /*#__PURE__*/React.createElement("button", {
     className: "btn btn-light",
     onClick: () => onCopy(),
     ref: copyTooltipRef
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "copy")
-  })), /*#__PURE__*/React$1.createElement("button", {
+  })), /*#__PURE__*/React.createElement("button", {
     className: `btn btn-light btn-reset`,
     onClick: () => onReset && onReset(),
     ref: resetTooltipRef
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "reset")
   })))));
 }
@@ -1882,14 +1885,14 @@ function InputTags(_ref) {
       instance.destroy();
     };
   }, []);
-  return /*#__PURE__*/React$1.createElement(FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
     description: description,
     prefix: prefix,
     suffix: suffix
-  }, /*#__PURE__*/React$1.createElement("input", _extends({
+  }, /*#__PURE__*/React.createElement("input", _extends({
     ref: ref,
     type: "text"
   }, props, {
@@ -1926,11 +1929,11 @@ function FormParameters({
   baseUrl = window.location.origin
 }) {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `form-edit__settings ${className}`
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React$1.createElement(InputText, {
+  }, /*#__PURE__*/React.createElement(InputText, {
     label: "Title",
     placeholder: "Enter the form title",
     name: "title",
@@ -1938,9 +1941,9 @@ function FormParameters({
     value: form.title,
     disabled: !!readonly["title"],
     onChange: onChange
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React$1.createElement(InputText, {
+  }, /*#__PURE__*/React.createElement(InputText, {
     label: "Name",
     placeholder: "Enter the form machine name",
     name: "name",
@@ -1948,16 +1951,16 @@ function FormParameters({
     disabled: !!readonly["name"],
     value: form.name,
     onChange: onChange
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React$1.createElement(InputText, {
+  }, /*#__PURE__*/React.createElement(InputText, {
     label: "Path",
     placeholder: "example",
     name: "path",
     className: "mb-0",
-    description: /*#__PURE__*/React$1.createElement("span", {
+    description: /*#__PURE__*/React.createElement("span", {
       className: "text-xxs flex items-center"
-    }, /*#__PURE__*/React$1.createElement("i", {
+    }, /*#__PURE__*/React.createElement("i", {
       className: "bx bx-link ml-1 mr-1"
     }), `${baseUrl}/${form.path}`),
     required: true,
@@ -1968,26 +1971,26 @@ function FormParameters({
       width: "120px"
     },
     onChange: onChange
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React$1.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     label: "Display as",
     name: "display",
     disabled: !!readonly["display"],
     value: form.display,
     choices: displayChoices,
     onChange: onChange
-  })), hasTypeChoices && /*#__PURE__*/React$1.createElement("div", {
+  })), hasTypeChoices && /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React$1.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     label: "Type",
     name: "type",
     value: form.type,
     choices: typeChoices,
     onChange: onChange
-  })), enableTags && /*#__PURE__*/React$1.createElement("div", {
+  })), enableTags && /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React$1.createElement(InputTags, {
+  }, /*#__PURE__*/React.createElement(InputTags, {
     label: "Tags",
     name: "tags",
     value: form.tags,
@@ -2154,14 +2157,14 @@ function FormEdit(props) {
     options = {},
     builder
   } = props;
-  return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "form-edit"
-  }, /*#__PURE__*/React$1.createElement(FormParameters, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(FormParameters, _extends({}, props, {
     className: "",
     key: `form-settings-${form._id}`,
     form: form,
     onChange: setChange
-  })), /*#__PURE__*/React$1.createElement(FormEditCTAs, _extends({}, props, {
+  })), /*#__PURE__*/React.createElement(FormEditCTAs, _extends({}, props, {
     className: "",
     key: `form-edit-ctas-${form._id}`,
     options: options,
@@ -2173,7 +2176,7 @@ function FormEdit(props) {
     onReset: reset,
     onCopy: onCopy,
     onSubmit: onSubmit
-  }))), /*#__PURE__*/React$1.createElement(FormBuilder, {
+  }))), /*#__PURE__*/React.createElement(FormBuilder, {
     key: `form-builder-${form._id}`,
     components: form.components,
     display: form.display,
@@ -2315,12 +2318,12 @@ function FormSettings(props) {
     isValid
   } = useFormSettings(props);
   const i18n = options.i18n || (f => f);
-  return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Form, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
     form: form,
     submission: submission,
     onChange: onChange,
     options: options
-  }), /*#__PURE__*/React$1.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     "data-testid": "submit",
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
@@ -2345,7 +2348,7 @@ function SelectColumnFilter({
     label: value,
     value
   }));
-  return /*#__PURE__*/React$1.createElement(Select, {
+  return /*#__PURE__*/React.createElement(Select, {
     key: `filter-${column.id}`,
     name: `filter-${column.id}`,
     size: "sm",
@@ -6887,30 +6890,30 @@ function FormsCell(props) {
       original: form
     }
   } = props;
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "p-1"
-  }, /*#__PURE__*/React$1.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "text-primary text-lg flex items-center"
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, icon), "mr-1")
-  }), form.title), /*#__PURE__*/React$1.createElement("ul", {
+  }), form.title), /*#__PURE__*/React.createElement("ul", {
     className: "reset-list text-gray-500"
-  }, /*#__PURE__*/React$1.createElement("li", {
+  }, /*#__PURE__*/React.createElement("li", {
     className: "text-sm"
-  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React$1.createElement("li", {
+  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React.createElement("li", {
     className: "mt-5"
-  }, /*#__PURE__*/React$1.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "badge bg-light mr-1"
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "history"), "mr-1")
-  }), /*#__PURE__*/React$1.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React$1.createElement("button", {
+  }), /*#__PURE__*/React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React.createElement("button", {
     key: index,
     className: "badge badge-hover bg-secondary mr-1",
     onClick: stopPropagationWrapper(() => {
       props.setFilter("tags", tag);
       props.gotoPage(0);
     })
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "tags"), "mr-1")
   }), tag)))));
 }
@@ -6930,7 +6933,7 @@ function FormsTable(_ref) {
     Header: i18n("Title"),
     accessor: "title",
     id: "title",
-    Cell: props => /*#__PURE__*/React$1.createElement(FormCell, _extends({}, props, {
+    Cell: props => /*#__PURE__*/React.createElement(FormCell, _extends({}, props, {
       icon: props.icon,
       i18n: i18n
     })),
@@ -6941,13 +6944,13 @@ function FormsTable(_ref) {
     accessor: "tags",
     id: "tags",
     hidden: true,
-    Filter: props => tags && tags.length ? /*#__PURE__*/React$1.createElement(SelectColumnFilter, _extends({}, props, {
+    Filter: props => tags && tags.length ? /*#__PURE__*/React.createElement(SelectColumnFilter, _extends({}, props, {
       column: _extends({}, props.columns, {
         choices: tags
       })
-    })) : /*#__PURE__*/React$1.createElement(DefaultColumnFilter, props)
+    })) : /*#__PURE__*/React.createElement(DefaultColumnFilter, props)
   }];
-  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -6959,9 +6962,9 @@ function Loader({
   className = ""
 }) {
   if (isActive) {
-    return /*#__PURE__*/React$1.createElement("div", {
+    return /*#__PURE__*/React.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$1.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       "data-testid": `icon_${icon}`,
       color: color,
       className: `text-11xl ${iconClass(undefined, icon, true)}`
@@ -7021,35 +7024,35 @@ function Modal(_ref) {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "dialog",
     className: `formio-dialog formio-dialog-theme-default ${className}`
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-overlay",
     onClick: onClickClose
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     style: style,
     className: "formio-dialog-content"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-wrapper"
-  }, title ? /*#__PURE__*/React$1.createElement("div", {
+  }, title ? /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-title",
     ref: titleRef,
     "data-testid": "modalTitle"
-  }, title) : null, /*#__PURE__*/React$1.createElement("div", {
+  }, title) : null, /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-body",
     style: {
       maxHeight
     },
     "data-testid": "modalBody"
-  }, show && children), ModalFooter ? /*#__PURE__*/React$1.createElement("div", {
+  }, show && children), ModalFooter ? /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-footer",
     ref: footerRef,
     "data-testid": "modalFooter"
-  }, /*#__PURE__*/React$1.createElement(ModalFooter, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(ModalFooter, _extends({}, props, {
     closeModal: closeModal,
     onClose: onClickClose
-  }))) : null), /*#__PURE__*/React$1.createElement("button", {
+  }))) : null), /*#__PURE__*/React.createElement("button", {
     className: "formio-dialog-close float-right btn btn-secondary btn-sm",
     "aria-label": "close",
     "data-testid": "closeModal",
@@ -7065,13 +7068,13 @@ function RemoveModalFooter({
   onClose,
   i18n = f => f
 }) {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
-  }, /*#__PURE__*/React$1.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     "data-testid": "customCloseModal",
     className: "btn btn-outline-dark mx-2",
     onClick: onClose
-  }, i18n("Cancel")), /*#__PURE__*/React$1.createElement("button", {
+  }, i18n("Cancel")), /*#__PURE__*/React.createElement("button", {
     disabled: valueToCompare !== value,
     "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
@@ -7080,7 +7083,7 @@ function RemoveModalFooter({
         onSubmit(e);
       }
     }
-  }, /*#__PURE__*/React$1.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "trash"), "mr-2")
   }), i18n("Remove")));
 }
@@ -7095,7 +7098,7 @@ function RemoveModal(_ref) {
     i18n = noop
   } = props;
   const [value, setValue] = useState();
-  return /*#__PURE__*/React$1.createElement(Modal, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
     className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
       maxWidth
@@ -7103,11 +7106,11 @@ function RemoveModal(_ref) {
     title: `Drop ${(_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()}`,
     value: value,
     footer: RemoveModalFooter
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "px-4 pt-3 pb-5"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "pb-1"
-  }, children, i18n("To drop"), " ", /*#__PURE__*/React$1.createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React$1.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React$1.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React$1.createElement(InputText, {
+  }, children, i18n("To drop"), " ", /*#__PURE__*/React.createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React.createElement(InputText, {
     name: "remove",
     value: value,
     onChange: (name, value) => setValue(value)
@@ -7288,17 +7291,17 @@ function DefaultCell({
   render = f => f
 }) {
   if (value === undefined) {
-    return /*#__PURE__*/React$1.createElement("span", null);
+    return /*#__PURE__*/React.createElement("span", null);
   }
   const rendered = render(value);
   if (value !== rendered) {
-    return /*#__PURE__*/React$1.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: rendered
       }
     });
   }
-  return /*#__PURE__*/React$1.createElement("span", null, String(value));
+  return /*#__PURE__*/React.createElement("span", null, String(value));
 }
 
 function mapFormToColumns(form) {
@@ -7309,7 +7312,7 @@ function mapFormToColumns(form) {
       const column = {
         Header: component.label || component.title || component.key,
         accessor: `data.${component.key}`,
-        Cell: props => /*#__PURE__*/React$1.createElement(DefaultCell, _extends({}, props, {
+        Cell: props => /*#__PURE__*/React.createElement(DefaultCell, _extends({}, props, {
           render: value => cmp.asString(value)
         }))
       };
@@ -7330,7 +7333,7 @@ function SubmissionsTable(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const columns = form && mapFormToColumns(form);
-  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -7343,7 +7346,7 @@ function SliderColumnFilter({
     id
   }
 }) {
-  const [min, max] = React$1.useMemo(() => {
+  const [min, max] = React.useMemo(() => {
     let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
     let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
     preFilteredRows.forEach(row => {
@@ -7352,7 +7355,7 @@ function SliderColumnFilter({
     });
     return [min, max];
   }, [id, preFilteredRows]);
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("input", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     min: min,
     max: max,
@@ -7360,7 +7363,7 @@ function SliderColumnFilter({
     onChange: e => {
       setFilter(parseInt(e.target.value, 10));
     }
-  }), /*#__PURE__*/React$1.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     onClick: () => setFilter(undefined)
   }, "Off"));
 }
@@ -7376,18 +7379,18 @@ function ButtonTab({
   className,
   after
 }) {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     title: "button-wrapper",
     className: classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
-  }, /*#__PURE__*/React$1.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     title: "button-tab",
     className: classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
     onClick: onClick
-  }, icon && /*#__PURE__*/React$1.createElement("i", {
+  }, icon && /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, icon), "tw-tabs__button-icon")
-  }), /*#__PURE__*/React$1.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "tw-tabs__button-label"
-  }, children), after), /*#__PURE__*/React$1.createElement("div", {
+  }, children), after), /*#__PURE__*/React.createElement("div", {
     className: classnames("tw-tabs__button-border", isActive ? "-active" : "")
   }));
 }
@@ -7405,18 +7408,18 @@ function Tabs(_ref) {
       i18n = f => f
     } = _ref,
     additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": "tabs-comp",
     className: `tw-tabs ${className}`,
     style: style
-  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("nav", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
     className: "tw-tabs__header"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "tw-tabs__header-wrapper"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "tw-tabs__header-border"
   }), items.filter(item => item.label || item.icon).map((item, index) => {
-    return /*#__PURE__*/React$1.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
@@ -7425,11 +7428,11 @@ function Tabs(_ref) {
         onClick && onClick(item);
       }
     }, additionalProps, item), i18n(item.label || ""));
-  }), AddButton && /*#__PURE__*/React$1.createElement(AddButton, _extends({}, additionalProps, {
+  }), AddButton && /*#__PURE__*/React.createElement(AddButton, _extends({}, additionalProps, {
     current: current
-  })))), HeaderChildren && /*#__PURE__*/React$1.createElement(HeaderChildren, _extends({}, additionalProps, {
+  })))), HeaderChildren && /*#__PURE__*/React.createElement(HeaderChildren, _extends({}, additionalProps, {
     current: current
-  }))), /*#__PURE__*/React$1.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     title: "tab-body",
     className: "tw-tabs__body"
   }, children));