npm - aefis-core-ui - Versions diffs - 2.3.0-rc2 → 2.3.0-rc21 - Mend

aefis-core-ui 2.3.0-rc2 → 2.3.0-rc21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.d.ts +2 -1
package/dist/index.modern.js +1229 -1623
package/dist/index.modern.js.map +1 -1
package/package.json +8 -4

package/dist/index.modern.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { red, orange, green, blue, grey, yellow, indigo, purple, cyan, teal, lim
 import makeStyles$1 from '@mui/styles/makeStyles';
 import withStyles from '@mui/styles/withStyles';
 import { useTheme, alpha, createTheme as createTheme$1, ThemeProvider, styled as styled$1, StyledEngineProvider } from '@mui/material/styles';
+import { useFormControl } from '@mui/material/FormControl';
 import mustache from 'mustache';
 import { Box as Box$2 } from '@mui/system';
 import { Skeleton as Skeleton$4, TextField as TextField$1, Box as Box$3 } from '@mui/material/';
@@ -66,16 +67,21 @@ import Nouislider from 'nouislider-react';
 import 'lodash/camelCase';
 import debounce from 'lodash/debounce';
 import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import '@mui/icons-material/MoreVert';
+import produce from 'immer';
+import { v4 } from 'uuid';
 import { MuiForm5 } from '@rjsf/material-ui';
 import isEmpty from 'lodash/isEmpty';
 import compose from 'lodash/fp/compose';
 import Chip$2 from '@mui/material/Chip';
 import TextField$2 from '@mui/material/TextField';
-import { useFormControl } from '@mui/material/FormControl';
 import get$1 from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import ToggleButton$1 from '@mui/material/ToggleButton';
-import { parse as parse$1, format as format$1, setDate, setMonth } from 'date-fns';
+import { parse as parse$1, format, setDate, setMonth } from 'date-fns';
 import { MobileDatePicker as MobileDatePicker$1 } from '@mui/x-date-pickers/MobileDatePicker';
 import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import 'filepond-plugin-get-file/dist/filepond-plugin-get-file.css';
@@ -84,7 +90,9 @@ import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orien
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
 import { registerPlugin, FilePond } from 'react-filepond';
 import FilePondPluginGetFile from 'filepond-plugin-get-file';
+import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import MaskedInput from 'react-text-mask';
+import { NumericFormat, useNumericFormat } from 'react-number-format';
 import StylesProvider from '@mui/styles/StylesProvider';
 function _extends() {
@@ -1295,20 +1303,13 @@ AvatarBox.propTypes = {
   hasShadow: PropTypes.bool
 };
-// Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const useStyles$G = makeStyles$1(theme => ({
   formattedContainer: {
-    display: "flex",
-    alignItems: "center",
-    padding: theme.spacing(2),
-    boxSizing: "border-box",
-    width: "100%"
+    display: "flex"
   },
   container: {
     display: "flex",
-    alignItems: "center",
-    boxSizing: "border-box",
-    width: "100%"
+    boxSizing: "border-box"
   },
   avatar: {
     flex: "0 0 auto",
@@ -1316,10 +1317,7 @@ const useStyles$G = makeStyles$1(theme => ({
   },
   title: {
     color: "rgb(0, 0, 0)",
-    fontWeight: 500,
-    font: "inherit",
-    lineHeight: 1.43,
-    letterSpacing: "0.01071em"
+    fontWeight: 500
   },
   subtitle: {
     letterSpacing: "0.01em",
@@ -1353,176 +1351,170 @@ const icon = {
 /** Component to display a title, subtitle, and caption along with an icon avatar. */
-const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle(props) {
+const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle({
+  type = "default",
+  avatar,
+  avatarVariant = "round",
+  title,
+  titleComponent = "div",
+  subtitle,
+  caption,
+  avatarColor,
+  formatContent = true,
+  size = "medium",
+  titleCase = "default",
+  subtitleCase = "default",
+  contentAlignment = "center",
+  avatarShadow = false,
+  emphasizeSubtitle = false
+}) {
   const classes = useStyles$G();
   const avatarStyle = {
     info: {
       backgroundColor: info.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     success: {
       backgroundColor: success.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     error: {
       backgroundColor: danger.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     warning: {
       backgroundColor: warning.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     custom: {
-      backgroundColor: props.avatarColor,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      backgroundColor: avatarColor,
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     }
   };
+  const defaultTitleStyle = {
+    color: emphasizeSubtitle ? "#757575" : "#000000",
+    textTransform: titleCase === "default" ? "none" : titleCase === "upper" ? "uppercase" : "lowercase"
+  };
+  const defaultSubtitleStyle = {
+    fontWeight: emphasizeSubtitle ? "bolder" : "normal",
+    color: emphasizeSubtitle ? "#000000" : "rgba(0, 0, 0, 0.6)",
+    textTransform: subtitleCase === "default" ? "none" : subtitleCase === "upper" ? "uppercase" : "lowercase"
+  };
+  const defaultCaptionStyle = {
+    textTransform: subtitleCase === "default" ? "none" : subtitleCase === "upper" ? "uppercase" : "lowercase"
+  };
   const titleStyle = {
-    xsmall: {
-      fontSize: "0.875rem"
-    },
-    small: {
-      fontSize: "1rem"
-    },
-    medium: {
+    xsmall: _extends({
+      fontSize: emphasizeSubtitle ? "0.675rem" : "0.7775rem",
+      lineHeight: 0.9,
+      letterSpacing: "0.5px"
+    }, defaultTitleStyle),
+    small: _extends({
+      fontSize: "0.975rem"
+    }, defaultTitleStyle),
+    medium: _extends({
       fontSize: "1.1rem"
-    },
-    large: {
+    }, defaultTitleStyle),
+    large: _extends({
       fontSize: "1.2rem"
-    }
+    }, defaultTitleStyle)
   };
   const subtitleStyle = {
-    xsmall: {
-      fontSize: "0.775rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    small: {
-      fontSize: "0.775rem",
-      fontWeight: "bolder",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    medium: {
-      fontSize: "0.875rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    large: {
-      fontSize: "0.875rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    }
+    xsmall: _extends({
+      fontSize: emphasizeSubtitle ? "0.875rem" : "0.775rem",
+      lineHeight: 0.975,
+      marginTop: "2px",
+      letterSpacing: "0.15px"
+    }, defaultSubtitleStyle),
+    small: _extends({
+      fontSize: "0.775rem"
+    }, defaultSubtitleStyle),
+    medium: _extends({
+      fontSize: "0.875rem"
+    }, defaultSubtitleStyle),
+    large: _extends({
+      fontSize: "0.875rem"
+    }, defaultSubtitleStyle)
   };
   const captionStyle = {
-    xsmall: {
-      fontSize: "0.675rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    small: {
+    xsmall: _extends({
+      fontSize: "0.675rem"
+    }, defaultCaptionStyle),
+    small: _extends({
       fontSize: "0.675rem",
-      fontWeight: "bolder",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    medium: {
-      fontSize: "0.775rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    large: {
-      fontSize: "0.775rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    }
+      fontWeight: "bolder"
+    }, defaultCaptionStyle),
+    medium: _extends({
+      fontSize: "0.775rem"
+    }, defaultCaptionStyle),
+    large: _extends({
+      fontSize: "0.775rem"
+    }, defaultCaptionStyle)
   };
   const avatarContainerStyle = {
     display: "flex",
-    alignItems: props.contentAlignment === "top" ? "flex-start" : "center",
-    width: "100%"
+    alignItems: contentAlignment === "top" ? "flex-start" : "center"
   };
-  const avatarIcon = props.type === "custom" ? props.avatar : icon[props.type];
-  return /*#__PURE__*/jsx(Box$1, {
-    className: props.formatContent ? classes.formattedContainer : classes.container,
-    children: /*#__PURE__*/jsx(Box$1, {
+  const avatarIcon = type === "custom" ? avatar : icon[type];
+  return /*#__PURE__*/jsxs(Box$1, {
+    className: formatContent ? classes.formattedContainer : classes.container,
+    children: [/*#__PURE__*/jsxs(Box$1, {
+      sx: avatarContainerStyle,
+      children: [size === "xsmall" && /*#__PURE__*/jsx(XSmallAvatar, {
+        className: classes.avatar,
+        style: avatarStyle[type],
+        variant: avatarVariant,
+        children: avatarIcon
+      }), size === "small" && /*#__PURE__*/jsx(SmallAvatar, {
+        className: classes.avatar,
+        style: avatarStyle[type],
+        variant: avatarVariant,
+        children: avatarIcon
+      }), size === "medium" && /*#__PURE__*/jsx(Avatar$1, {
+        className: classes.avatar,
+        style: avatarStyle[type],
+        variant: avatarVariant,
+        children: avatarIcon
+      }), size === "large" && /*#__PURE__*/jsx(LargeAvatar, {
+        variant: avatarVariant,
+        className: classes.avatar,
+        style: avatarStyle[type],
+        children: avatarIcon
+      })]
+    }), /*#__PURE__*/jsxs(Box$1, {
       sx: {
-        boxSizing: "border-box",
-        width: "100%"
+        display: "flex",
+        flexDirection: "column"
       },
-      children: /*#__PURE__*/jsxs(Box$1, {
-        sx: avatarContainerStyle,
-        children: [/*#__PURE__*/jsxs(Box$1, {
-          children: [props.size === "xsmall" && /*#__PURE__*/jsx(XSmallAvatar, {
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            variant: props.avatarVariant,
-            children: avatarIcon
-          }), props.size === "small" && /*#__PURE__*/jsx(SmallAvatar, {
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            variant: props.avatarVariant,
-            children: avatarIcon
-          }), props.size === "medium" && /*#__PURE__*/jsx(Avatar$1, {
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            variant: props.avatarVariant,
-            children: avatarIcon
-          }), props.size === "large" && /*#__PURE__*/jsx(LargeAvatar, {
-            variant: props.avatarVariant,
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            children: avatarIcon
-          })]
-        }), /*#__PURE__*/jsx(Box$1, {
-          sx: {
-            display: "flex",
-            alignItems: "center"
-          },
-          children: /*#__PURE__*/jsxs(Box$1, {
-            sx: {
-              display: "block"
-            },
-            children: [/*#__PURE__*/jsx(Box$1, {
-              children: typeof props.title === "string" ? /*#__PURE__*/jsx(Typography, {
-                variant: "h6",
-                component: props.titleComponent,
-                style: titleStyle[props.size],
-                className: classes.title,
-                children: props.title
-              }) : props.title
-            }), props.subtitle && /*#__PURE__*/jsx(Box$1, {
-              children: typeof props.subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
-                variant: "body1",
-                component: "div",
-                style: subtitleStyle[props.size],
-                color: "textSecondary",
-                className: classes.subtitle,
-                children: props.subtitle
-              }) : props.subtitle
-            }), props.caption && /*#__PURE__*/jsx(Box$1, {
-              children: typeof props.subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
-                variant: "body1",
-                component: "div",
-                style: captionStyle[props.size],
-                color: "textSecondary",
-                className: classes.subtitle,
-                children: props.caption
-              }) : props.caption
-            })]
-          })
-        })]
-      })
-    })
+      children: [typeof title === "string" ? /*#__PURE__*/jsx(Typography, {
+        variant: "h6",
+        component: titleComponent,
+        style: titleStyle[size],
+        className: classes.title,
+        children: title
+      }) : title, subtitle && typeof subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
+        variant: "body1",
+        component: "div",
+        style: subtitleStyle[size],
+        color: "textSecondary",
+        className: classes.subtitle,
+        children: subtitle
+      }) : subtitle, caption && typeof subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
+        variant: "body1",
+        component: "div",
+        style: captionStyle[size],
+        color: "textSecondary",
+        className: classes.subtitle,
+        children: caption
+      }) : caption]
+    })]
   });
 });
-AvatarTitle.defaultProps = {
-  formatContent: true,
-  size: "medium",
-  type: "default",
-  titleComponent: "div",
-  subtitleCase: "default",
-  contentAlignment: "center",
-  avatarVariant: "round",
-  avatarShadow: false
-};
 AvatarTitle.propTypes = {
   /** The type of avatar title.  This will determine how the avatar color and icon is set.  If "custom" is given, you can provide your own icon and color. */
   type: PropTypes.oneOf(["info", "success", "warning", "error", "custom"]),
@@ -1545,11 +1537,15 @@ AvatarTitle.propTypes = {
   /** The size of the avatar title */
   size: PropTypes.oneOf(["xsmall", "small", "medium", "large"]),
   /** The case used to display the subtitle and caption. */
+  titleCase: PropTypes.oneOf(["default", "lower", "upper"]),
+  /** The case used to display the subtitle and caption. */
   subtitleCase: PropTypes.oneOf(["default", "lower", "upper"]),
   /** How to align the content. */
   contentAlignment: PropTypes.oneOf(["center", "top"]),
   /** Display a slight shadow around the avatar? */
-  avatarShadow: PropTypes.bool
+  avatarShadow: PropTypes.bool,
+  /** Emphasize value */
+  emphasizeSubtitle: PropTypes.bool
 };
 const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
@@ -1685,12 +1681,12 @@ const LegacyButtonTheme = createTheme(theme, {
   }
 });
-const _excluded$k = ["name"];
+const _excluded$m = ["name"];
 const Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
   let {
       name
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   const isColorDefault = props.color === undefined || props.color === "default";
   const colorThemeName = isColorDefault ? "grey" : props.color;
   const theme = useTheme$1();
@@ -1724,7 +1720,7 @@ Button.defaultProps = {
   variant: "text",
   disableElevation: true
 };
-Button.propTypes = {
+Button.propTypes = _extends({
   /** A descriptive name of the button.  Used by screen readers to explain the intent of the button.  If not provided, the button content is used. */
   name: PropTypes.string,
   /** Remove the elevation from the button. */
@@ -1737,7 +1733,7 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   /** The content of the button */
   children: PropTypes.any
-};
+}, Button$1.propTypes);
 const AnimatedExpandMoreIcon = ({
   isOpen,
@@ -1783,7 +1779,7 @@ AnimatedExpandMoreIcon.propTypes = {
   sx: PropTypes.any
 };
-const _excluded$j = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
+const _excluded$l = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
 const AefisButton = withStyles$1({
   root: {
     "&:focus": {
@@ -1805,7 +1801,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
       onClick,
       link
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClick = (event, link, buttonId) => {
     setAnchorEl(event.currentTarget);
@@ -1828,15 +1824,18 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
     "aria-haspopup": true,
     "aria-expanded": Boolean(anchorEl)
   };
-  const buttonProps = {
+  const buttonProps = _extends({
     id: buttonId,
-    color: displayType === "default" ? color : undefined,
-    name: name,
-    startIcon: icon && displayType === "default" ? /*#__PURE__*/jsx(Icon$1, {
+    name: name
+  }, displayType === "default" && {
+    color
+  }, icon && displayType === "default" && {
+    startIcon: /*#__PURE__*/jsx(Icon$1, {
       name: props.icon
-    }) : undefined,
-    variant: displayType === "default" ? variant : undefined
-  };
+    })
+  }, displayType === "default" && {
+    variant
+  });
   return /*#__PURE__*/jsxs(React.Fragment, {
     children: [displayType === "icon" ? /*#__PURE__*/jsx(IconButton, _extends({}, buttonProps, a11yprops, {
       onClick: e => handleClick(e, link, buttonId),
@@ -1905,7 +1904,12 @@ MenuButton.propTypes = {
   /** Button variant */
   variant: PropTypes.oneOf(["contained", "outlined", "text"]),
   /** The type of the button */
-  menuConfiguration: PropTypes.array,
+  menuConfiguration: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    icon: PropTypes.any,
+    divider: PropTypes.any,
+    onClick: PropTypes.func
+  })),
   /** The function to execute when the button is clicked. */
   onClick: PropTypes.func
 };
@@ -1913,7 +1917,7 @@ MenuButton.propTypes = {
 const useTag = color => {
   const useStyles = makeStyles(theme => ({
     tag: {
-      borderLeft: `4px solid ${color ? color : theme.palette.primary.main}`
+      borderLeft: `16px solid ${color ? color : theme.palette.primary.main}`
     }
   }));
   return useStyles();
@@ -1950,30 +1954,23 @@ const useStyles$F = makeStyles(theme => ({
 }));
 const titleProps = {
   color: "textPrimary",
-  variant: "h3",
+  variant: "h6",
   style: {
-    fontSize: "1.2rem",
+    fontSize: "1.1rem",
     fontWeight: 500,
-    lineHeight: 1.3,
-    letterSpacing: 0.5,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    lineHeight: 1.43,
+    letterSpacing: "0.01071em"
   }
 };
 const subtitleProps = {
   color: "textSecondary",
+  variant: "body1",
   style: {
-    fontSize: "0.875rem",
-    fontWeight: 400,
-    lineHeight: 1.4,
-    letterSpacing: 0,
+    fontSize: "0.775rem",
+    fontWeight: "bolder",
     display: "inline-flex",
     verticalAlign: "middle",
-    alignItems: "center",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    alignItems: "center"
   }
 };
 const getGradientBackgroundColorArray = arrayIndex => {
@@ -2001,6 +1998,20 @@ const ContentBox = props => {
     return props.children ? /*#__PURE__*/React.cloneElement(props.children) : "";
   };
   titleProps.component = props.titleComponent;
+  if (props.wrapTitle) {
+    titleProps["style"] = _extends({}, titleProps.style, {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    });
+  }
+  if (props.wrapSubtitle) {
+    titleProps["style"] = _extends({}, titleProps.style, {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    });
+  }
   const headerProps = {
     title: props.title,
     disableTypography: false,
@@ -2019,7 +2030,7 @@ const ContentBox = props => {
   }
   if (typeof props.subtitle !== "string" && props.subtitle !== undefined) {
     headerProps.title = /*#__PURE__*/jsx(Typography, {
-      variant: "h3",
+      variant: "h6",
       component: props.titleComponent,
       style: titleProps.style,
       display: "block",
@@ -2030,13 +2041,13 @@ const ContentBox = props => {
     headerProps.subheader = props.subtitle;
   }
   if (props.titleBadge) {
-    headerProps.title = /*#__PURE__*/jsx("div", {
+    headerProps.title = /*#__PURE__*/jsx(Box$1, {
       children: /*#__PURE__*/jsx(StyledBadge$1, {
         badgeContent: props.titleBadge,
         invisible: invisible,
         color: "secondary",
         children: /*#__PURE__*/jsx(Typography, {
-          variant: "h3",
+          variant: "h6",
           component: props.titleComponent,
           style: titleProps.style,
           display: "block",
@@ -2057,12 +2068,13 @@ const ContentBox = props => {
         variant: "body1",
         component: "span",
         noWrap: true,
-        sx: {
-          color: "text.secondary"
-        },
+        color: "textSecondary",
         style: {
-          fontSize: "0.875rem",
-          letterSpacing: 0
+          fontSize: "0.775rem",
+          fontWeight: "bolder",
+          display: "inline-flex",
+          verticalAlign: "middle",
+          alignItems: "center"
         },
         children: props.subtitle
       });
@@ -2074,6 +2086,7 @@ const ContentBox = props => {
   const cardStyle = _extends({
     marginBottom: props.hasGutter ? 8 : 0,
     borderRadius: 16,
+    transition: "border 100ms ease-out",
     boxShadow: props.displayType === "outlined" ? "none" : "rgb(58 53 65 / 10%) 0px 2px 10px 0px"
   }, props.cardStyle);
   if (props.displayType === "outlined") {
@@ -2088,10 +2101,14 @@ const ContentBox = props => {
     height: props.imageHeight,
     backgroundColor: props.imageBackgroundColor ? props.imageBackgroundColor : "transparent"
   } : {};
+  const otherSx = !props.children && !props.description ? {
+    display: "none",
+    visibility: "hidden"
+  } : undefined;
   return /*#__PURE__*/jsxs(Box$1, {
     sx: props.sx,
     style: props.containerStyle,
-    children: [props.header && /*#__PURE__*/jsx("div", {
+    children: [props.header && /*#__PURE__*/jsx(Box$1, {
       className: classes.sectionHeader,
       children: /*#__PURE__*/jsx(Typography, {
         variant: "h6",
@@ -2101,7 +2118,7 @@ const ContentBox = props => {
     }), /*#__PURE__*/jsxs(Card, {
       style: cardStyle,
       className: tag.tag,
-      children: [useHeaderImage && /*#__PURE__*/jsx("div", {
+      children: [useHeaderImage && /*#__PURE__*/jsx(Box$1, {
         style: imageDivStyle,
         className: classes.imageContainer,
         title: props.title,
@@ -2111,8 +2128,15 @@ const ContentBox = props => {
         component: "img",
         alt: "",
         image: props.image
-      }), props.title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps)), props.formatContent && /*#__PURE__*/jsx(CardContent, {
+      }), props.title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps, {
+        sx: {
+          padding: props.dense ? 1 : 2
+        }
+      })), props.formatContent && /*#__PURE__*/jsx(CardContent, {
         className: !props.title ? classes.cardContentWithoutTitle : classes.cardContent,
+        sx: _extends({
+          padding: props.dense ? 1 : 2
+        }, otherSx),
         children: /*#__PURE__*/jsxs(React.Fragment, {
           children: [props.description && /*#__PURE__*/jsx(Typography, {
             variant: "body2",
@@ -2136,6 +2160,9 @@ const ContentBox = props => {
         }), renderChildren()]
       }), props.actions && /*#__PURE__*/jsx(CardActions, {
         disableSpacing: true,
+        sx: {
+          paddingTop: props.dense ? 0 : 1
+        },
         children: props.actions
       }), props.afterActionContent]
     })]
@@ -2147,7 +2174,10 @@ ContentBox.defaultProps = {
   imageHeight: 150,
   hasGutter: true,
   imageBackgroundColor: "transparent",
-  titleComponent: "div"
+  titleComponent: "div",
+  wrapTitle: false,
+  wrapSubtitle: false,
+  dense: false
 };
 ContentBox.propTypes = {
   /** Content of the content box */
@@ -2162,6 +2192,10 @@ ContentBox.propTypes = {
   subtitle: PropTypes.any,
   /** Main title of the content box.  Can be a string or any component. */
   title: PropTypes.any,
+  /** Wrap the title? */
+  wrapTitle: PropTypes.bool,
+  /** Wrap the subtitle? */
+  wrapSubtitle: PropTypes.bool,
   /** Add a badge to the title of the content box. */
   titleBadge: PropTypes.number,
   /** The component to use to render the title. */
@@ -2195,7 +2229,9 @@ ContentBox.propTypes = {
   /** Additional styles for the content box container */
   containerStyle: PropTypes.any,
   /** Additional styles to apply */
-  sx: PropTypes.object
+  sx: PropTypes.object,
+  /** Compact display? */
+  dense: PropTypes.bool
 };
 const defaultColorPalette = {
@@ -2249,10 +2285,10 @@ ClickWrapper.propTypes = {
 const Chip = ({
   id,
   colorPalette,
-  size,
+  size: _size2 = "medium",
   icon,
   label,
-  displayType,
+  displayType: _displayType = "default",
   deleteIcon,
   onDelete,
   canDelete,
@@ -2260,7 +2296,7 @@ const Chip = ({
 }) => {
   const keyValue = useUID();
   const colors = _extends({}, defaultColorPalette, colorPalette);
-  const _size = size === "medium" || size === "large" ? "medium" : size;
+  const _size = _size2 === "medium" || _size2 === "large" ? "medium" : _size2;
   const styles = {
     outlined: {
       borderWidth: 2,
@@ -2280,14 +2316,14 @@ const Chip = ({
     }
   };
   let chipStyles = styles.chip;
-  if (displayType === "outlined") chipStyles = styles.outlined;
-  if (displayType === "withOutline") chipStyles = styles.withOutline;
+  if (_displayType === "outlined") chipStyles = styles.outlined;
+  if (_displayType === "withOutline") chipStyles = styles.withOutline;
   const chipProps = {
     key: id || keyValue,
     icon,
     label,
     sx: chipStyles,
-    variant: displayType === "withOutline" ? "default" : displayType,
+    variant: _displayType === "withOutline" ? "default" : _displayType,
     size: _size,
     deleteIcon: deleteIcon || /*#__PURE__*/jsx(ClickWrapper, {
       label: label,
@@ -2304,12 +2340,21 @@ const Chip = ({
       })
     })
   };
-  const Chip = () => /*#__PURE__*/jsx(Chip$1, _extends({
-    role: role || "presentation",
-    "aria-label": label
-  }, chipProps, canDelete && {
-    onDelete
-  }));
+  // TODO: create FormChip (or similar) and use contextful version there. Pure
+  // and Contextful component should be seperated
+  const formControl = useFormControl();
+  const _canDelete = canDelete && !(formControl != null && formControl.disabled);
+  const Chip = () => {
+    return /*#__PURE__*/jsx(Chip$1, _extends({
+      role: role || "presentation",
+      "aria-label": label
+    }, chipProps, _canDelete && {
+      onDelete
+    }, {
+      disabled: formControl == null ? void 0 : formControl.disabled
+    }));
+  };
   /**return tooltipText ? (
   	<Tooltip title={tooltipText}>
@@ -2349,12 +2394,6 @@ Chip.propTypes = {
   /** ARIA Role attribute */
   role: PropTypes.string
 };
-Chip.defaultProps = {
-  size: "medium",
-  variant: "default",
-  canRemove: false,
-  displayType: "default"
-};
 const colorPalette$v = {
   light: grey[200],
@@ -3296,12 +3335,12 @@ const outcomeConfiguration = {
 // about solution: https://stackoverflow.com/questions/22820162/mustache-js-escaping
 mustache.escape = _ => _;
 function compile() {}
-function render$2(template, data, defaultValue) {
+function render$1(template, data, defaultValue) {
   return template ? mustache.render(template, data) : defaultValue;
 }
 var template = {
   compile,
-  render: render$2
+  render: render$1
 };
 // Copyright (c) 2020 AEFIS, all rights reserved.
@@ -3432,7 +3471,7 @@ CardSectionTitle$1.propTypes = {
   title: PropTypes.string
 };
-const _excluded$i = ["title", "children", "height", "titleComponent"];
+const _excluded$k = ["title", "children", "height", "titleComponent"];
 const CardSection$1 = _ref => {
   let {
       title,
@@ -3440,7 +3479,7 @@ const CardSection$1 = _ref => {
       height,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return /*#__PURE__*/jsxs(Box$1, _extends({
     sx: {
       height: height || "inherit"
@@ -3540,7 +3579,7 @@ SvgImage.propTypes = {
   width: PropTypes.any
 };
-const _excluded$h = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
+const _excluded$j = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
   _excluded2$1 = ["src", "extension"];
 const RenderImage = _ref => {
   let {
@@ -3552,7 +3591,7 @@ const RenderImage = _ref => {
       showSkeleton,
       fallbackImage
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   const altText = decorative ? "" : description;
   const role = decorative ? "presentation" : "img";
   const hidden = !!decorative;
@@ -3630,7 +3669,7 @@ Image.propTypes = {
   extension: PropTypes.string
 };
-const _excluded$g = ["type"];
+const _excluded$i = ["type"];
 const imageProps = {
   award: Award,
   building: Building,
@@ -3656,7 +3695,7 @@ const IsometricImage = _ref => {
   let {
       type
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   const image = getIsometricImage(type);
   return /*#__PURE__*/jsx(Image, _extends({
     src: image
@@ -4339,6 +4378,9 @@ const RenderCard = props => {
       configuration: props.actionsConfiguration,
       data: props.data
     }) : undefined,
+    cardStyle: props.cardStyle || undefined,
+    containerStyle: props.containerStyle || undefined,
+    sx: props.sx || undefined,
     children: /*#__PURE__*/jsxs(Fragment, {
       children: [props.description && /*#__PURE__*/jsx(CardSection, {
         sx: descriptionContainerStyle,
@@ -4372,7 +4414,10 @@ RenderCard.propTypes = {
   avatarIconColor: PropTypes.string,
   gradientColorHeaderImageId: PropTypes.any,
   autoTruncateDescription: PropTypes.bool,
-  avatar: PropTypes.any
+  avatar: PropTypes.any,
+  cardStyle: PropTypes.any,
+  containerStyle: PropTypes.any,
+  sx: PropTypes.object
 };
 const BusinessObjectCard = props => {
   return props.displayType === "skeleton" ? /*#__PURE__*/jsx(RenderSkeleton, {
@@ -4417,16 +4462,22 @@ BusinessObjectCard.propTypes = {
   /** Override the avatar with provided avatar object. */
   avatar: PropTypes.any,
   /** Automatically truncate the description.  For consistency, this should nearly always be set to "true" */
-  autoTruncateDescription: PropTypes.bool
+  autoTruncateDescription: PropTypes.bool,
+  /** Additional styles for the card */
+  cardStyle: PropTypes.any,
+  /** Additional styles for the content box container */
+  containerStyle: PropTypes.any,
+  /** Additional styles to apply */
+  sx: PropTypes.object
 };
-const _excluded$f = ["enableScrollTop", "containerProps"];
+const _excluded$h = ["enableScrollTop", "containerProps"];
 const SwipeableViews = _ref => {
   let {
       enableScrollTop = true,
       containerProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   const containerRef = containerProps.ref || useRef();
   useEffect(() => {
     if (enableScrollTop) {
@@ -4722,19 +4773,26 @@ SwipeableTabPanel.propTypes = {
   appBarComponent: PropTypes.string
 };
-const List = props => {
+const List = ({
+  children,
+  containerStyle,
+  transparentBackground: _transparentBackground = false,
+  display: _display = "vertical",
+  animate: _animate = true,
+  sx
+}) => {
   const theme = useTheme$1();
   const rootStyle = _extends({
-    backgroundColor: props.transparentBackground ? "transparent" : theme.palette.background.paper,
+    backgroundColor: _transparentBackground ? "transparent" : theme.palette.background.paper,
     width: "100%"
-  }, props.containerStyle);
-  const listStyle = {
+  }, containerStyle);
+  const listStyle = _extends({
     margin: 0,
     padding: 0,
     flexWrap: "wrap"
-  };
+  }, sx);
   const listProps = {};
-  if (props.display === "horizontal") {
+  if (_display === "horizontal") {
     listStyle["display"] = "flex";
     listStyle["flexDirection"] = "row";
     listProps["dense"] = true;
@@ -4742,25 +4800,20 @@ const List = props => {
   }
   return /*#__PURE__*/jsx(Box$1, {
     sx: rootStyle,
-    children: props.animate ? /*#__PURE__*/jsx(FadeIn, {
+    children: _animate ? /*#__PURE__*/jsx(FadeIn, {
       in: true,
       children: /*#__PURE__*/jsx(List$2, _extends({
         sx: listStyle
       }, listProps, {
-        children: props.children
+        children: children
       }))
     }) : /*#__PURE__*/jsx(List$2, _extends({
       sx: listStyle
     }, listProps, {
-      children: props.children
+      children: children
     }))
   });
 };
-List.defaultProps = {
-  transparentBackground: false,
-  display: "vertical",
-  animate: true
-};
 List.propTypes = {
   /** Children of the list. Children should be the ListItem component.  */
   children: PropTypes.any.isRequired,
@@ -4771,7 +4824,9 @@ List.propTypes = {
   /** List display type */
   display: PropTypes.oneOf(["horizontal", "vertical"]),
   /** Show the animation? */
-  animate: PropTypes.bool
+  animate: PropTypes.bool,
+  /** Style to apply */
+  sx: PropTypes.any
 };
 const StyledMuiListItemButton = withStyles$1({
@@ -4779,38 +4834,53 @@ const StyledMuiListItemButton = withStyles$1({
     "&:hover": {
       backgroundColor: "rgba(0, 0, 0, 0.02) !important"
     }
-  },
-  selected: {
-    backgroundColor: "#f5fbfe !important"
-  }
-})(ListItem$2);
-const StyledMuiListItem = withStyles$1({
-  selected: {
-    backgroundColor: "#f5fbfe !important"
   }
 })(ListItem$2);
+const StyledMuiListItem = withStyles$1({})(ListItem$2);
 /** List Item component to be used with List component.  Displays items in a list. */
-const ListItem = props => {
-  const listItemStyle = {};
+const ListItem = ({
+  displayType: _displayType = "default",
+  avatar,
+  icon,
+  title,
+  subtitle,
+  hasBorder: _hasBorder = false,
+  borderStyle: _borderStyle = "2px solid",
+  canClick: _canClick = false,
+  onClick,
+  children,
+  id,
+  disabled: _disabled = false,
+  dense: _dense = false,
+  hasGutter: _hasGutter = true,
+  selected: _selected = false,
+  selectedType: _selectedType = "background",
+  display: _display = "vertical",
+  sx
+}) => {
   const keyValue = useUID();
-  if (!props.hasGutter) {
+  const listItemStyle = {
+    backgroundColor: _selected && _selectedType === "background" ? "#f5fbfe" : "#ffffff",
+    border: _selected && _selectedType === "outlined" ? "2px solid #2295f2" : "none"
+  };
+  if (!_hasGutter) {
     listItemStyle.padding = 0;
   }
-  if (props.hasBorder) {
-    listItemStyle.borderBottom = props.borderStyle;
+  if (_hasBorder) {
+    listItemStyle.borderBottom = _borderStyle;
     listItemStyle.borderColor = grey[200];
   }
   const listItemArgs = {
-    key: props.id ? props.id : keyValue,
+    key: id ? id : keyValue,
     style: listItemStyle,
-    disabled: props.disabled,
-    dense: props.dense,
-    selected: props.selected,
+    disabled: _disabled,
+    dense: _dense,
+    selected: _selected,
     component: "li"
   };
-  if (props.display === "horizontal") {
+  if (_display === "horizontal") {
     listItemArgs["sx"] = {
       marginRight: "2px",
       marginBottom: "2px",
@@ -4820,51 +4890,42 @@ const ListItem = props => {
     listItemArgs["disablePadding"] = true;
     listItemArgs["disableGutters"] = true;
   }
-  if (props.canClick) {
+  if (_canClick) {
     listItemArgs.button = true;
-    listItemArgs.onClick = props.onClick;
+    listItemArgs.onClick = onClick;
   }
-  return props.displayType === "default" && props.canClick && /*#__PURE__*/jsxs(StyledMuiListItemButton, _extends({}, listItemArgs, {
-    children: [props.title && props.title !== "" && props.avatar && /*#__PURE__*/jsx(ListItemAvatar, {
-      children: props.avatar
-    }), props.title && props.title !== "" && props.icon && /*#__PURE__*/jsx(ListItemIcon, {
-      children: props.icon
-    }), props.title && props.title !== "" && /*#__PURE__*/jsx(ListItemText, {
-      primary: props.title,
-      secondary: props.subtitle
-    }), !props.title && props.children && /*#__PURE__*/jsx(React.Fragment, {
-      children: props.children
+  return _displayType === "default" && _canClick && /*#__PURE__*/jsxs(StyledMuiListItemButton, _extends({}, listItemArgs, {
+    children: [title && title !== "" && avatar && /*#__PURE__*/jsx(ListItemAvatar, {
+      children: avatar
+    }), title && title !== "" && icon && /*#__PURE__*/jsx(ListItemIcon, {
+      children: icon
+    }), title && title !== "" && /*#__PURE__*/jsx(ListItemText, {
+      primary: title,
+      secondary: subtitle
+    }), !title && children && /*#__PURE__*/jsx(React.Fragment, {
+      children: children
     })]
-  })) || props.displayType === "default" && !props.canClick && /*#__PURE__*/jsxs(StyledMuiListItem, _extends({}, listItemArgs, {
-    children: [props.title && props.title !== "" && props.avatar && /*#__PURE__*/jsx(ListItemAvatar, {
-      children: props.avatar
-    }), props.title && props.title !== "" && props.icon && /*#__PURE__*/jsx(ListItemIcon, {
-      children: props.icon
-    }), props.title && props.title !== "" && /*#__PURE__*/jsx(ListItemText, {
-      primary: props.title,
-      secondary: props.subtitle
-    }), !props.title && props.children && /*#__PURE__*/jsx(React.Fragment, {
-      children: props.children
+  })) || _displayType === "default" && !_canClick && /*#__PURE__*/jsxs(StyledMuiListItem, _extends({}, listItemArgs, {
+    sx: sx,
+    children: [title && title !== "" && avatar && /*#__PURE__*/jsx(ListItemAvatar, {
+      children: avatar
+    }), title && title !== "" && icon && /*#__PURE__*/jsx(ListItemIcon, {
+      children: icon
+    }), title && title !== "" && /*#__PURE__*/jsx(ListItemText, {
+      primary: title,
+      secondary: subtitle
+    }), !title && children && /*#__PURE__*/jsx(React.Fragment, {
+      children: children
     })]
-  })) || props.displayType === "skeleton" && /*#__PURE__*/jsx(StyledMuiListItem, {
+  })) || _displayType === "skeleton" && /*#__PURE__*/jsx(StyledMuiListItem, {
     style: listItemStyle,
+    sx: sx,
     children: /*#__PURE__*/jsx(SkeletonContent, {
       displayType: "listItem",
       withAvatar: true
     })
   }, keyValue);
 };
-ListItem.defaultProps = {
-  displayType: "default",
-  hasBorder: false,
-  disabled: false,
-  dense: false,
-  canClick: false,
-  borderStyle: "2px solid",
-  hasGutter: true,
-  selected: false,
-  display: "vertical"
-};
 ListItem.propTypes = {
   /** The display type of the list item. */
   displayType: PropTypes.oneOf(["default", "skeleton"]),
@@ -4896,8 +4957,12 @@ ListItem.propTypes = {
   hasGutter: PropTypes.bool,
   /** Is the item selected? If selected, the list item will display a background color */
   selected: PropTypes.bool,
+  /** When the list item is selected, use background color or outline. */
+  selectedType: PropTypes.oneOf(["background", "outlined"]),
   /** List display type */
-  display: PropTypes.oneOf(["horizontal", "vertical"])
+  display: PropTypes.oneOf(["horizontal", "vertical"]),
+  /** Styles to apply */
+  sx: PropTypes.any
 };
 const useStyles$z = makeStyles(theme => ({
@@ -5065,7 +5130,7 @@ SectionTitle.propTypes = {
   component: PropTypes.string
 };
-const _excluded$e = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
+const _excluded$g = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
 const Section = _ref => {
   let {
       title,
@@ -5076,7 +5141,7 @@ const Section = _ref => {
       renderList,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   const containerStyle = {
     boxSizing: "border-box",
     width: "100%",
@@ -5713,7 +5778,7 @@ FullPageViewer.propTypes = {
   onMessage: PropTypes.func
 };
-const _excluded$d = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
+const _excluded$f = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
 const useStyles$w = makeStyles(() => ({
   scroller: {
     position: "relative",
@@ -5786,7 +5851,7 @@ const ScrollingContainer = _ref => {
       onScrollReachStart,
       onScrollReachEnd
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   const classes = useStyles$w();
   const [scrolled, setScrolled] = useState(false);
   const rootStyle = {
@@ -6829,7 +6894,7 @@ DataTable.propTypes = {
 };
 const options = {
-  arrayFormat: "index"
+  arrayFormat: "bracket"
 };
 const setQueryStringWithoutPageReload = qsValue => {
   const {
@@ -7537,7 +7602,7 @@ var dataSourceManager = {
   getDataSourceUrl: getDataSourceUrl
 };
-const _excluded$c = ["clearOnChange", "minimumLength"];
+const _excluded$e = ["clearOnChange", "minimumLength"];
 const WAIT_INTERVAL = 1000;
 const ENTER_KEY = 13;
 const TextSearch$1 = _ref => {
@@ -7545,7 +7610,7 @@ const TextSearch$1 = _ref => {
       clearOnChange,
       minimumLength
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const [value, setValue] = useState("");
   const [timer, setTimer] = useState(null);
   const handleChange = e => {
@@ -7580,13 +7645,13 @@ const TextSearch$1 = _ref => {
     value: value,
     onKeyDown: handleKeyDown,
     placeholder: props.placeholder,
-    sx: {
+    sx: _extends({
       input: {
         "&::placeholder": {
           opacity: 0.7
         }
       }
-    }
+    }, props.sx)
   }, props, {
     inputProps: _extends({}, props.inputProps, {
       "aria-label": props.placeholder
@@ -7659,69 +7724,6 @@ TextSearch.propTypes = {
   bottomGutter: PropTypes.number
 };
-const {
-  render: render$1
-} = template;
-/**
- * This function returns unique field inside filter item using render.
- *
- * @param {object} item
- * @param {object} filter
- * @returns {string}
- */
-const getFilterItemId = (item, configItem = {}) => {
-  var _item$data;
-  if (item.id) {
-    return item.id;
-  }
-  const template = configItem.idTemplate || configItem.template || configItem.optionTemplate;
-  if (template) {
-    return render$1(template, item.data || item);
-  }
-  if ((_item$data = item.data) != null && _item$data.id) {
-    return item.data.id;
-  }
-};
-/**
- * This function checks filter items; if index and id fields are missing then
- * try to sets them with possible ways.
- *
- * @param {array} filters
- * @param {array} configuration
- * @returns {array}
- */
-const formatFilters = (filters = [], configuration = []) => filters.map(filter => {
-  var _ref, _filter$index, _filter$id, _configuration$index, _configuration$index2, _configuration$index3, _configuration$index4, _configuration$index5;
-  // TODO: index should be defined on filters. There should not be need of
-  // search of index value throught type or map values.
-  const index = (_ref = (_filter$index = filter == null ? void 0 : filter.index) != null ? _filter$index : findIndexByType(filter, configuration)) != null ? _ref : findIndexByMap(filter, configuration);
-  const id = (_filter$id = filter == null ? void 0 : filter.id) != null ? _filter$id : getFilterItemId(filter, configuration[index]);
-  // TODO: These properties should ONLY be defined either in configuration
-  // or filters; currently data can be defined from both sources. Filter
-  // data prioritised over configuratuon.
-  const {
-    map = (_configuration$index = configuration[index]) == null ? void 0 : _configuration$index.map,
-    type = (_configuration$index2 = configuration[index]) == null ? void 0 : _configuration$index2.type,
-    template = (_configuration$index3 = configuration[index]) == null ? void 0 : _configuration$index3.template,
-    idTemplate = (_configuration$index4 = configuration[index]) == null ? void 0 : _configuration$index4.idTemplate,
-    optionTemplate = (_configuration$index5 = configuration[index]) == null ? void 0 : _configuration$index5.optionTemplate
-  } = filter;
-  return _extends({}, filter, {
-    template,
-    idTemplate,
-    optionTemplate,
-    type,
-    map,
-    index,
-    id
-  });
-});
-const findIndexByType = (filter, configuration) => filter.type !== undefined ? configuration.findIndex(config => config.type === filter.type) : undefined;
-const findIndexByMap = (filter, configuration) => filter.map !== undefined ? configuration.findIndex(config => config.map === filter.map) : undefined;
 const mapFilters = newFilters => {
   const mappedFilters = {};
   newFilters.map(filter => {
@@ -7737,7 +7739,7 @@ const mapFilters = newFilters => {
   return mappedFilters;
 };
-const _excluded$b = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
+const _excluded$d = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
 const useMenuItemStyles = makeStyles(theme => ({
   root: props => ({
     backgroundColor: props.open ? theme.palette.action.hover : "rgba(0,0,0,0)"
@@ -7758,7 +7760,7 @@ const NestedMenuItem = /*#__PURE__*/React.forwardRef(function NestedMenuItem(pro
       tabIndex: tabIndexProp,
       ContainerProps: ContainerPropsProp = {}
     } = props,
-    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$d);
   const {
       ref: containerRefProp
     } = ContainerPropsProp,
@@ -8096,7 +8098,8 @@ const FilterChips = ({
   const Filters = useMemo(() => {
     return /*#__PURE__*/jsx(Box$1, {
       sx: {
-        display: "flex"
+        display: "flex",
+        flexFlow: "wrap"
       },
       children: _filters.map(filter => /*#__PURE__*/jsx(Grow, {
         in: true,
@@ -8111,7 +8114,7 @@ const FilterChips = ({
             displayOptions: {
               hasIcon: filter.type !== "keyword"
             },
-            type: "businessObject",
+            type: filter.type || "businessObject",
             template: filter.template,
             data: filter.data,
             onDelete: () => {
@@ -8122,7 +8125,11 @@ const FilterChips = ({
       }, `filterPanelFilter-${filter.index}-${filter.id}`))
     });
   }, [_filters]);
-  const SortItems = useMemo(() => /*#__PURE__*/jsx(Fragment, {
+  const SortItems = useMemo(() => /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      display: "flex",
+      flexFlow: "wrap"
+    },
     children: _sort.map(sortItem => /*#__PURE__*/jsx(Grow, {
       in: true,
       children: /*#__PURE__*/jsx("div", {
@@ -8360,6 +8367,36 @@ PanelDisplay.propTypes = {
   renderFilterSelection: PropTypes.bool
 };
+const usePrevState = (callback, current) => {
+  const [prev, setPrev] = useState(current);
+  if (prev !== current) {
+    callback(prev, current);
+    setPrev(current);
+  }
+};
+const useFilterState = filtersProp => {
+  const [filters, _setFilters] = useState(filtersProp);
+  const setFilters = useCallback((filters = []) => {
+    const sorted = filters.sort((a, b) => a.index - b.index);
+    _setFilters(sorted);
+  }, []);
+  usePrevState(() => {
+    setFilters(filtersProp);
+  }, filtersProp);
+  return [filters, setFilters];
+};
+const getItemId = (item, filter) => item.id || template.render(filter.idTemplate || filter.optionTemplate, item);
+const formatFilterItem = (index, filter, data) => ({
+  index: index,
+  id: getItemId(data, filter),
+  type: filter.type,
+  template: filter.optionTemplate,
+  idTemplate: filter.idTemplate,
+  map: filter.map,
+  data
+});
 const mapSort = value => value.map(i => i.map);
 const getSearchFilter = newFilters => (newFilters == null ? void 0 : newFilters.filter(filter => (filter == null ? void 0 : filter.type) === "keyword").map(item => item.data.id)) || [];
@@ -8378,7 +8415,7 @@ const FilterPanel = props => {
     searchTooltip,
     searchPlaceHolderText,
     configuration,
-    filters: filtersProp,
+    filters: filtersProp = [],
     displayType,
     limitTags,
     bottomGutter,
@@ -8388,14 +8425,10 @@ const FilterPanel = props => {
     sort: sortProp
   } = props;
   const [menuPosition, setMenuPosition] = useState(null);
-  const [filters, setFilters] = useState([]);
+  const [filters, setFilters] = useFilterState(filtersProp);
   const [sort, setSort] = useState(sortProp || []);
   const [panelSearch, setPanelSearch] = useState([]);
   const [pickerFilters, setPickerFilters] = useState([]);
-  useEffect(() => {
-    const formattedFilters = formatFilters(filtersProp, configuration);
-    setFilters(formattedFilters);
-  }, [filtersProp]);
   // TODO: replace it with useMemo
   useEffect(() => {
@@ -8421,9 +8454,8 @@ const FilterPanel = props => {
       onDataChange(filteredData, filterParameters, filters);
     }
   }, [filters, sort]);
-  const removeFilter = filter => {
-    console.log("remove filter ", filter);
-    const newFilterArray = filters == null ? void 0 : filters.filter(i => i.index !== filter.index || filter.id !== i.id);
+  const removeFilter = (filter = []) => {
+    const newFilterArray = filters.filter(i => i.index !== filter.index || filter.id !== i.id);
     setFilters(newFilterArray);
     if (!onApplyFilters) {
       if ((filter == null ? void 0 : filter.type) === "keyword" && onSearchChange) {
@@ -8460,69 +8492,14 @@ const FilterPanel = props => {
       onChange(mapFilters(newFilterArray), newFilterArray);
     }
   };
-  /** Had to revert this function as filters were not working properly
-  const handleSetFilterType = (inputIndex, configItem, data = []) => {
-  	const newFiltersByUpdatedIndex = data.map((filterItem) => {
-  		return {
-  			index: inputIndex,
-  			id: filterItem.id || getFilterItemId(configItem, filterItem),
-  			type: configItem.type,
-  			template: configItem.optionTemplate,
-  			idTemplate: configItem.idTemplate,
-  			map: configItem.map,
-  			data: filterItem
-  		};
-  	});
-  	const filtersByUnupdatedIndex = filters.filter((i) => i.index !== inputIndex);
-  	const newFilters = [...filtersByUnupdatedIndex, ...newFiltersByUpdatedIndex];
-  		setFilters(newFilters);
-  	if (onChange) {
-  		// TO-CHECK: what does mapFilters do?
-  		onChange(mapFilters(newFilters), newFilters);
-  	}
-  }; */
   const handleSetFilterType = (index, filter, data) => {
-    const getItemId = item => item.id || template.render(filter.idTemplate || filter.optionTemplate, item);
-    if (!Array.isArray(data)) {
-      const _newFilterArray = filters.filter(i => index !== i.index);
-      if (data) {
-        const newItemId = getItemId(data);
-        _newFilterArray.push({
-          index: index,
-          id: newItemId,
-          type: filter.type,
-          template: filter.optionTemplate,
-          idTemplate: filter.idTemplate,
-          map: filter.map,
-          data: data
-        });
-      }
-      setFilters(_newFilterArray);
-      if (onChange && !onApplyFilters) {
-        onChange(mapFilters(_newFilterArray), _newFilterArray);
-      }
-      return;
-    }
-    data.map(item => {
-      const newItemId = getItemId(item);
-      if (!filters.find(i => i.index === index && i.id === newItemId)) {
-        filters.push({
-          index: index,
-          id: newItemId,
-          type: filter.type,
-          template: filter.optionTemplate,
-          idTemplate: filter.idTemplate,
-          map: filter.map,
-          data: item
-        });
-      }
-    });
-    const newFilterArray = filters.filter(i => index !== i.index || index === i.index && data.find(d => i.data.id === d.id));
-    setFilters(newFilterArray);
-    if (onChange && !onApplyFilters) {
-      onChange(mapFilters(newFilterArray), newFilterArray);
-    }
+    let _data = data;
+    if (!Array.isArray(data)) _data = data ? [data] : [];
+    const filtersWithoutUpdatedField = filters.filter(filter => index !== filter.index);
+    const newUpdatedFilters = _data.map(d => formatFilterItem(index, filter, d));
+    const newFilters = filtersWithoutUpdatedField.concat(newUpdatedFilters);
+    setFilters(newFilters);
+    if (!onApplyFilters) onChange == null ? void 0 : onChange(mapFilters(newFilters), newFilters);
   };
   const handleSortChange = value => {
     setSort(value);
@@ -9045,12 +9022,12 @@ Actions.propTypes = {
   onAction: PropTypes.func
 };
-const _excluded$a = ["hasFilters"];
+const _excluded$c = ["hasFilters"];
 const RenderFilterButton = /*#__PURE__*/React.forwardRef(function RenderFilterButton(_ref, ref) {
   let {
       hasFilters
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/jsx(IconButton$1, _extends({}, props, {
     ref: ref,
     children: /*#__PURE__*/jsx(Badge, {
@@ -9143,7 +9120,7 @@ DefaultIconButton.propTypes = {
   onClick: PropTypes.func
 };
-const _excluded$9 = ["filterSet", "onClick", "disableSetDefault", "index"];
+const _excluded$b = ["filterSet", "onClick", "disableSetDefault", "index"];
 const useStyles$m = makeStyles(theme => ({
   operations: {
     display: "flex",
@@ -9215,7 +9192,7 @@ const Item$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const {
     id,
     disabled,
@@ -9271,7 +9248,7 @@ const renderUserDefinedFilters = ({
   index: index
 }, `user-defined-filters-${index}`));
-const _excluded$8 = ["filterSet", "onClick", "disableSetDefault", "index"];
+const _excluded$a = ["filterSet", "onClick", "disableSetDefault", "index"];
 const useStyles$l = makeStyles(() => ({
   operations: {
     display: "flex",
@@ -9313,7 +9290,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   const {
     id,
     disabled,
@@ -9958,13 +9935,13 @@ const Drawer = props => {
   };
   const theme = useTheme$1();
   const appBarStyle = {
-    primary: {
+    primary: _extends({
       color: "#ffffff"
-    },
-    secondary: {
+    }, props.appBarStyle),
+    secondary: _extends({
       backgroundColor: "#ffffff",
       color: "#333333"
-    }
+    }, props.appBarStyle)
   };
   const closeDrawerIconStyle = {
     color: props.headerColor === "secondary" ? "rgba(0, 0, 0, 0.54)" : "#ffffff",
@@ -10172,6 +10149,8 @@ Drawer.propTypes = {
   menuPositionOffset: PropTypes.oneOf(["none", "primaryMenu", "secondaryMenu"]),
   /** Additional styles to apply to the drawer paper. */
   paperStyle: PropTypes.any,
+  /** Additional styles to apply to the appbar. */
+  appBarStyle: PropTypes.any,
   /** Whether or not to show the header divider */
   headerDivider: PropTypes.bool,
   /** The component to use while rendering the drawer title */
@@ -10465,7 +10444,7 @@ const getInfoTextByFilterAndSortingCount = (filterCount, sortCount) => {
   return `${appliedText} applied to the data`;
 };
-const _excluded$7 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
+const _excluded$9 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
 const useDidMount = () => {
   const didMountRef = useRef(false);
   useEffect(() => {
@@ -10580,7 +10559,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       hasNextPage,
       refetch
     } = _useDataSourceInfinit;
-    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$7);
+    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$9);
   const isError = useIsError(status);
   const renderReTryButton = useCallback(status => /*#__PURE__*/jsx(Button, {
     onClick: () => refetch(),
@@ -10962,7 +10941,7 @@ const {
   withEvent: withBOPEvent
 } = createComponentEvent();
-const _excluded$6 = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
+const _excluded$8 = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
 const useDialogOpenEventListener$1 = cb => useBOPEventlistener(event => {
   if (event.name === events.OPEN_ENHANCED_SEARCH_DIALOG) cb(event.payload);
 });
@@ -10976,7 +10955,7 @@ const EnhancedSearchDialog = _ref => {
       dataSource,
       confirmButtonText
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const [selection, setSelection] = useState([]);
   const [open, setOpen] = useState(false);
   useDialogOpenEventListener$1(isOpen => setOpen(isOpen));
@@ -11078,9 +11057,7 @@ const useAutoCompleteValue = (propValue, multiple) => {
 const useSkipOnMount = (fn, deps) => {
   const didMountRef = useRef();
   useEffect(() => {
-    if (didMountRef.current) {
-      fn();
-    }
+    if (didMountRef.current) fn();
     didMountRef.current = true;
   }, deps);
 };
@@ -11093,7 +11070,7 @@ const useDependencyChange = (callback, currentState) => {
   }
 };
-const _excluded$5 = ["visibleValues", "multiple", "dataSource", "optionTemplate", "getOptionLabel", "renderTags", "renderOption", "freeSolo", "newItemTemplate", "loadOnOpen", "openOnFocus", "enhancedSearch", "disableCloseOnSelect", "listSelect", "onAdd", "pageSize", "groupName", "idTemplate", "group", "shouldResetOnParametersChange", "queryParamNames", "enableInfinteScroll", "renderAddItemForm", "AddItemFormModalComponent", "autoCompleteProps"];
+const _excluded$7 = ["visibleValues", "multiple", "dataSource", "optionTemplate", "getOptionLabel", "renderTags", "renderOption", "freeSolo", "newItemTemplate", "loadOnOpen", "openOnFocus", "enhancedSearch", "disableCloseOnSelect", "listSelect", "onAdd", "pageSize", "groupName", "idTemplate", "group", "shouldResetOnParametersChange", "queryParamNames", "enableInfinteScroll", "renderAddItemForm", "AddItemFormModalComponent", "autoCompleteProps", "preventHorizontalExpand"];
 const useStyles$f = makeStyles(theme => ({
   menu: {
     textDecoration: "none",
@@ -11155,9 +11132,10 @@ const BusinessObjectPicker = _ref => {
       enableInfinteScroll,
       renderAddItemForm,
       AddItemFormModalComponent,
-      autoCompleteProps = {}
+      autoCompleteProps = {},
+      preventHorizontalExpand = false
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   const classes = useStyles$f();
   // TODO: implement controlled behaviour
   const [value, setValue] = useAutoCompleteValue(props.value, multiple);
@@ -11360,7 +11338,8 @@ const BusinessObjectPicker = _ref => {
       tooltipText: option.description,
       size: props.size === "medium" || props.size === "small" ? "small" : "large",
       onDelete: () => handleTagDelete(option),
-      canDelete: true
+      canDelete: true,
+      displayType: "default"
     })
   }, getKey(option))), [props.size, getKey, getLabel, handleTagDelete]);
   const renderTypeTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
@@ -11409,7 +11388,11 @@ const BusinessObjectPicker = _ref => {
         value: value,
         renderOption: renderOptionProp || (props.type ? renderBusinessObject : renderOption),
         noOptionsText: status === "error" ? "Error loading options" : "No options",
-        getOptionDisabled: optionItem => (optionItem == null ? void 0 : optionItem.__type) === "loadMore" || (optionItem == null ? void 0 : optionItem.__type) === "noOption",
+        getOptionDisabled: optionItem => {
+          if (props.disabled) return true;
+          const type = optionItem == null ? void 0 : optionItem.__type;
+          return type === "loadMore" || type === "noOption";
+        },
         handleHomeEndKeys: true
         // INFO: freeSolo prevents warning:
         // https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid
@@ -11419,7 +11402,12 @@ const BusinessObjectPicker = _ref => {
         selectOnFocus: false,
         renderTags: renderTags || (props.type ? renderTypeTags : renderCustomTags),
         renderInput: params => /*#__PURE__*/jsx(TextSearch$1, _extends({}, params, props, {
-          type: "text",
+          sx: _extends({}, preventHorizontalExpand && {
+            "&>div.MuiInputBase-root": {
+              flexWrap: "nowrap !important"
+            }
+          }),
+          type: "text",
           inputProps: _extends({}, params.inputProps, {
             "data-testid": "content-input"
           }),
@@ -11437,7 +11425,7 @@ const BusinessObjectPicker = _ref => {
                 style: {
                   color: red[500]
                 }
-              }), listSelect !== true && /*#__PURE__*/jsx(IconButton$1, {
+              }), listSelect !== true && /*#__PURE__*/jsx(IconButton, {
                 "aria-label": open ? `hide options` : "show options",
                 size: "small",
                 onClick: () => {
@@ -11450,7 +11438,7 @@ const BusinessObjectPicker = _ref => {
                     [classes.expandOpen]: open
                   })
                 })
-              }), enhancedSearch && /*#__PURE__*/jsx(IconButton$1, {
+              }), enhancedSearch && /*#__PURE__*/jsx(IconButton, {
                 "aria-label": "search",
                 size: "small",
                 onKeyDown: handleKeyDown,
@@ -11458,6 +11446,7 @@ const BusinessObjectPicker = _ref => {
                   name: events.OPEN_ENHANCED_SEARCH_DIALOG,
                   payload: true
                 }),
+                disabled: props.disabled,
                 children: /*#__PURE__*/jsx(Search, {})
               })]
             })
@@ -11480,13 +11469,14 @@ const BusinessObjectPicker = _ref => {
         flexDirection: "column",
         padding: 1
       },
-      children: /*#__PURE__*/jsx(IconButton$1, {
+      children: /*#__PURE__*/jsx(IconButton, {
         onClick: () => {
           eventDispatch({
             name: events.OPEN_ADD_ITEM_DIALOG,
             payload: true
           });
         },
+        disabled: props.disabled,
         children: /*#__PURE__*/jsx(AddIcon, {
           sx: {
             color: "grey"
@@ -11586,7 +11576,9 @@ BusinessObjectPicker.propTypes = {
   /** render prop to handle form content, render function provided onSubmit callback function	 */
   renderAddItemForm: PropTypes.func,
   /** override props of MUI's AutoComplete components */
-  autoCompleteProps: PropTypes.object
+  autoCompleteProps: PropTypes.object,
+  /** preventHorizontalExpand */
+  preventHorizontalExpand: PropTypes.bool
 };
 BusinessObjectPicker.defaultProps = {
   multiple: false,
@@ -12548,7 +12540,7 @@ CurriculumChart.propTypes = {
   onLoad: PropTypes.func
 };
-const _excluded$4 = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
+const _excluded$6 = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
 const MuiDatePicker = props => {
   const isMobile = useMediaQuery$1(theme => theme.breakpoints.down("md"));
   if (props.type) {
@@ -12588,7 +12580,7 @@ const DatePickerBase = _ref => {
       maximumDate,
       inputEndAdornmentText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const [value, setValue] = useFormItemState(propsValue, isControlled);
   const handleChange = newValue => {
     !isControlled && setValue(newValue);
@@ -15284,6 +15276,539 @@ RubricDistributionChart.propTypes = {
   titleComponent: PropTypes.oneOf(["h1", "h2", "h3", "h4", "div", "p"])
 };
+const _excluded$5 = ["rules"];
+const FieldWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      paddingTop: 1,
+      overflow: "auto"
+    },
+    children: children
+  });
+};
+const TemplateField = ({
+  templateSelectionCode,
+  templateOptions,
+  templateInputMap,
+  onChange
+}) => {
+  const data = useMemo(() => templateOptions.map(({
+    label,
+    code: value
+  }) => ({
+    label,
+    value
+  }), [templateOptions]));
+  const value = useMemo(() => {
+    if (!templateSelectionCode) return undefined;
+    return {
+      value: templateSelectionCode,
+      label: templateInputMap[templateSelectionCode].label
+    };
+  }, [templateSelectionCode]);
+  return /*#__PURE__*/jsx(BusinessObjectPicker$1, {
+    multiple: false,
+    data: data,
+    value: value,
+    onChange: onChange,
+    optionTemplate: "{{label}}",
+    preventHorizontalExpand: true
+  });
+};
+function Row({
+  groupId,
+  index,
+  ruleId,
+  ruleIndex,
+  name: templateSelectionCode,
+  // template selection
+  value: ruleValue,
+  // rule value
+  template: ruleTemplate,
+  onRuleDelete,
+  onRuleMoveUp,
+  onRuleMoveDown,
+  onCreateRuleBelow,
+  onTemplateSelect,
+  onTemplateValueChange,
+  templateInputMap,
+  templateOptions
+}) {
+  const handleChange = useDebounceCallback((value, template) => {
+    onTemplateValueChange({
+      value,
+      template,
+      // TODO: send these as 2nd argument
+      groupId,
+      ruleId
+      // TODO: fix index and ruleIndex lot of re-rendering
+      // index,
+      // ruleIndex
+    });
+  }, 200);
+  const templateValueField = useMemo(() => {
+    if (!templateSelectionCode) return null;
+    const TemplateInputField = templateInputMap[templateSelectionCode].component;
+    return /*#__PURE__*/jsx(TemplateInputField, {
+      value: ruleValue,
+      template: ruleTemplate
+      // TODO:  add debouncer
+      ,
+      onChange: handleChange
+    });
+    // TODO: take out index from here together with onChange handler
+    // index, ruleIndex,
+  }, [groupId, ruleId, templateSelectionCode, ruleValue, ruleTemplate, handleChange]);
+  return /*#__PURE__*/jsxs(Box$1, {
+    sx: {
+      display: "flex",
+      flexWrap: "no-wrap",
+      paddingTop: 1
+    },
+    children: [/*#__PURE__*/jsxs(Grid, {
+      sx: {
+        flex: 1,
+        backgroundColor: "#f9f9f9",
+        marginLeft: 1,
+        paddingTop: 1,
+        paddingLeft: 2,
+        paddingBottom: 1,
+        paddingRight: 2,
+        borderRadius: "8px",
+        marginBottom: "4px"
+      } // this is for grow
+      ,
+      container: true,
+      rowSpacing: 0.5,
+      columnSpacing: 2,
+      direction: "row",
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        sm: 12,
+        md: 4,
+        style: {
+          paddingLeft: 0
+        },
+        children: /*#__PURE__*/jsx(FieldWrapper, {
+          children: /*#__PURE__*/jsx(TemplateField, {
+            templateSelectionCode: templateSelectionCode,
+            templateInputMap: templateInputMap,
+            templateOptions: templateOptions,
+            onChange: valueFieldCode => {
+              onTemplateSelect({
+                templateCode: (valueFieldCode == null ? void 0 : valueFieldCode.value) || null,
+                groupId,
+                ruleId,
+                index,
+                ruleIndex
+              });
+            }
+          })
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        sm: 12,
+        md: 8,
+        children: /*#__PURE__*/jsx(FieldWrapper, {
+          children: templateValueField
+        })
+      })]
+    }), /*#__PURE__*/jsx(Box$1, {
+      sx: {
+        width: "48px",
+        marginTop: "22px"
+      },
+      children: /*#__PURE__*/jsx(MenuButton, {
+        name: "rule operation",
+        displayType: "icon",
+        menuConfiguration: [{
+          name: "Move Up",
+          icon: /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}),
+          onClick: function () {
+            onRuleMoveUp({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
+        }, {
+          name: "Move Down",
+          icon: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {}),
+          onClick: () => {
+            onRuleMoveDown({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
+        }, {
+          name: "Add Rule Below",
+          icon: /*#__PURE__*/jsx(AddIcon, {}),
+          onClick: () => {
+            onCreateRuleBelow({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
+        }, {
+          name: "Delete",
+          icon: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {}),
+          onClick: () => {
+            onRuleDelete({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
+        }]
+      })
+    })]
+  });
+}
+const RuleGroup = /*#__PURE__*/memo(_ref => {
+  let {
+      rules
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  return /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      paddingBottom: 1
+    },
+    children: rules.map(({
+      id,
+      name,
+      value,
+      template
+    }, ruleIndex) => /*#__PURE__*/jsx(Row, _extends({
+      name: name,
+      value: value,
+      template: template,
+      ruleIndex: ruleIndex,
+      ruleId: id
+    }, rest), id))
+  });
+});
+const RuleGroupFooter = /*#__PURE__*/memo(({
+  groupId,
+  onGroupDelete,
+  onRuleAdd
+}) => /*#__PURE__*/jsx(Box$1, {
+  sx: {
+    display: "flex",
+    justifyContent: "end",
+    marginRight: 6
+  },
+  children: /*#__PURE__*/jsxs(Box$1, {
+    sx: {
+      display: "flex",
+      flexDirection: "row"
+    },
+    children: [/*#__PURE__*/jsx(Button
+    // onClick={onGroupDelete}
+    , {
+      onClick: () => onGroupDelete({
+        groupId
+      }),
+      startIcon: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {}),
+      children: "Delete Group"
+    }), /*#__PURE__*/jsx(Button, {
+      onClick: () => onRuleAdd({
+        groupId
+      })
+      // onClick={onRuleAdd}
+      ,
+      startIcon: /*#__PURE__*/jsx(AddIcon, {}),
+      children: "Add Rule"
+    })]
+  })
+}));
+const BuilderHeader = /*#__PURE__*/memo(({
+  onAdd,
+  children
+}) => /*#__PURE__*/jsxs(Box$1, {
+  sx: {
+    display: "flex"
+  },
+  children: [/*#__PURE__*/jsx(Box$1, {
+    sx: {
+      flex: 1
+    },
+    children: children
+  }), /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      display: "flex",
+      justifyContent: "end",
+      paddingBottom: 1
+    },
+    children: /*#__PURE__*/jsx(Button, {
+      startIcon: /*#__PURE__*/jsx(AddIcon, {}),
+      onClick: onAdd,
+      children: "Add Group"
+    })
+  })]
+}));
+const RuleGroupIndex = /*#__PURE__*/memo(({
+  onMovePosition,
+  groupId,
+  index,
+  isFirst,
+  isLast
+}) => /*#__PURE__*/jsx(Box$1, {
+  sx: {
+    width: "40px",
+    height: "88px"
+  },
+  children: /*#__PURE__*/jsxs(Box$1, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      position: "relative",
+      top: "0px",
+      width: "20px"
+    },
+    children: [/*#__PURE__*/jsx(IconButton$1, {
+      sx: {
+        visibility: isFirst ? "hidden" : "none"
+      },
+      "aria-label": "move up",
+      onClick: () => onMovePosition({
+        groupId,
+        index
+      }, true),
+      children: /*#__PURE__*/jsx(KeyboardArrowUpIcon, {
+        sx: {
+          color: "grey"
+        }
+      })
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "body1",
+      color: "#727373",
+      sx: {
+        fontWeight: "500"
+      },
+      children: index + 1
+    }), /*#__PURE__*/jsx(IconButton$1, {
+      "aria-label": "move down",
+      sx: {
+        visibility: isLast ? "hidden" : "none"
+      },
+      onClick: () => onMovePosition({
+        groupId,
+        index
+      }, false),
+      children: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {
+        sx: {
+          color: "grey"
+        }
+      })
+    })]
+  })
+}));
+const _excluded$4 = ["code"];
+const TextBuilder = /*#__PURE__*/memo(({
+  renderHeader,
+  templateOptions,
+  value: _value = [],
+  onChange: _onChange = () => {},
+  defaultRule
+}) => {
+  const templateInputMap = useMemo(() => templateOptions.reduce((obj, _ref) => {
+    let {
+        code
+      } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    return _extends({}, obj, {
+      [code]: rest
+    });
+  }, {}), [templateOptions]);
+  // TODO: change rows => RuleGroups
+  const [rows, setRows] = useState(_value);
+  // TODO: think on better implementation
+  useSkipOnMount(() => {
+    _onChange(rows);
+  }, [rows]);
+  const setMutatableRows = useCallback(setterFn => {
+    setRows(rows => {
+      const res = produce(rows, setterFn);
+      return res;
+    });
+  }, []);
+  const handleAddGroup = () => {
+    // TODO use setMutatableRows
+    setRows([...rows, {
+      index: rows.length,
+      groupId: v4(),
+      rules: [_extends({
+        id: v4()
+      }, defaultRule)]
+    }]);
+  };
+  const handleGroupDelete = ({
+    groupId
+  }) => {
+    const newRows = rows.filter(row => row.groupId !== groupId);
+    setRows(newRows);
+  };
+  const handleRuleDelete = ({
+    index,
+    ruleId
+  }) => {
+    setMutatableRows(groups => {
+      groups[index].rules = groups[index].rules.filter(rule => rule.id !== ruleId);
+    });
+  };
+  const handleRuleMoveUp = ({
+    index,
+    ruleIndex
+  }) => {
+    setMutatableRows(groups => {
+      if (ruleIndex === 0) return;
+      const nextRow = ruleIndex - 1 ;
+      [groups[index].rules[ruleIndex], groups[index].rules[nextRow]] = [groups[index].rules[nextRow], groups[index].rules[ruleIndex]];
+    });
+  };
+  const handleRuleMoveDown = ({
+    index,
+    ruleIndex
+  }) => {
+    setMutatableRows(groups => {
+      if (groups[index].rules.length - 1 === ruleIndex) return;
+      const nextRow = ruleIndex + 1;
+      [groups[index].rules[ruleIndex], groups[index].rules[nextRow]] = [groups[index].rules[nextRow], groups[index].rules[ruleIndex]];
+    });
+  };
+  const handleCreateRuleBelow = ({
+    index,
+    ruleIndex,
+    templateCode
+  }) => {
+    setMutatableRows(groups => {
+      const newRule = _extends({
+        id: v4()
+      }, defaultRule);
+      groups[index].rules = [...groups[index].rules.slice(0, ruleIndex + 1), newRule, ...groups[index].rules.slice(ruleIndex + 1)];
+    });
+  };
+  // TODO change name
+  const handleRuleTemplateSelect = ({
+    index,
+    ruleIndex,
+    templateCode
+  }) => {
+    setMutatableRows(groups => {
+      groups[index].rules[ruleIndex].name = templateCode || null;
+      groups[index].rules[ruleIndex].value = null;
+      groups[index].rules[ruleIndex].template = null;
+    });
+  };
+  const handleRuleTemplateValueChange = ({
+    value,
+    template,
+    groupId,
+    ruleId
+  }) => {
+    setMutatableRows(groups => {
+      const rule = groups.find(group => group.groupId === groupId).rules.find(rule => rule.id === ruleId);
+      rule.value = value;
+      rule.template = template;
+    });
+  };
+  const moveGroupPosition = ({
+    index
+  }, isUp) => {
+    const newRows = rows.slice();
+    const nextRow = isUp ? index - 1 : index + 1;
+    [newRows[index], newRows[nextRow]] = [newRows[nextRow], newRows[index]];
+    setRows(newRows);
+  };
+  const handleAddRule = ({
+    groupId
+  }) => {
+    const newRules = rows.map(row => {
+      if (row.groupId !== groupId) return row;
+      return _extends({}, row, {
+        rules: [...row.rules, _extends({
+          id: v4()
+        }, defaultRule)]
+      });
+    });
+    setRows(newRules);
+  };
+  return /*#__PURE__*/jsxs(ContentBox, {
+    sx: {
+      ".MuiFormControl-root": {
+        background: "white"
+      }
+    },
+    children: [/*#__PURE__*/jsx(BuilderHeader, {
+      onAdd: handleAddGroup,
+      children: renderHeader()
+    }), rows.map(({
+      groupId,
+      rules
+    }, index) => /*#__PURE__*/jsx(ContentBox, {
+      displayType: "outlined",
+      sx: {
+        paddingBottom: 2
+      },
+      children: /*#__PURE__*/jsxs(Box$1, {
+        sx: {
+          display: "flex",
+          flexWrap: "no-wrap",
+          border: "1px solid transparent"
+        },
+        children: [/*#__PURE__*/jsx(RuleGroupIndex, {
+          onMovePosition: moveGroupPosition,
+          isFirst: index === 0,
+          isLast: index === rows.length - 1,
+          index: index,
+          groupId: groupId
+        }), /*#__PURE__*/jsxs(Box$1, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/jsx(RuleGroup, {
+            index: index,
+            rules: rules,
+            groupId: groupId,
+            templateOptions: templateOptions,
+            templateInputMap: templateInputMap,
+            onRuleDelete: handleRuleDelete,
+            onRuleMoveUp: handleRuleMoveUp,
+            onRuleMoveDown: handleRuleMoveDown,
+            onCreateRuleBelow: handleCreateRuleBelow,
+            onTemplateSelect: handleRuleTemplateSelect,
+            onTemplateValueChange: handleRuleTemplateValueChange
+          }), /*#__PURE__*/jsx(RuleGroupFooter, {
+            groupIndex: index,
+            groupId: groupId,
+            onGroupDelete: handleGroupDelete,
+            onRuleAdd: handleAddRule
+          })]
+        })]
+      })
+    }, groupId))]
+  });
+});
 const moreThan = ruleValue => ({
   fieldValue
 }) => {
@@ -16652,14 +17177,6 @@ const render = (value, formState) => {
   }
   return mustache.render(value, formState);
 };
-const renderUrl = (value, formState) => {
-  if (value === undefined || value === null) {
-    return value;
-  }
-  return decodeHtml$2(mustache.render(value, formState));
-};
-const useRenderUrl = template => useSelectFormState(state => renderUrl(template, state));
-const useRender = template => useSelectFormState(state => render(template, state));
 const useQueryTemplateParam = queryTemplate => {
   const selector = useCallback(state => {
@@ -16946,7 +17463,7 @@ const DateSelectReadOnly$1 = ({
   schema
 }) => {
   const value = useMemo(() => {
-    if (formData == undefined) return null;
+    if (!(formData != null && formData.date)) return null;
     const date = new Date(formData.date);
     const options = _extends({}, formData.type === "y" && {
       year: "numeric"
@@ -16996,30 +17513,37 @@ const DateSelect = props => {
     rawErrors,
     disabled
   } = props;
-  const [selectedDate, setSelectedDate] = useState(null);
-  const [dateType, setDateType] = useState(dateTypes.day);
   const serverSideDateFormat = "MM-dd-yyyy";
-  useEffect(() => {
+  const [{
+    selectedDate,
+    dateType
+  }, setFieldValue] = useState(() => {
     if (formData && typeof formData === "object" && formData.date != undefined) {
-      let obj = formData;
-      setDateType(findDateType(obj.type));
-      setSelectedDate(parse$1(obj.date, serverSideDateFormat, new Date()));
+      return {
+        selectedDate: parse$1(formData.date, serverSideDateFormat, new Date()),
+        dateType: findDateType(formData.type)
+      };
     } else {
-      setDateType(dateTypes.day);
-      setSelectedDate(null);
+      return {
+        selectedDate: null,
+        dateType: formData != null && formData.type ? findDateType(formData.type) : dateTypes.day
+      };
     }
-  }, [formData]);
+  });
   const handleDateTypeChange = (event, newDateType) => {
-    if (newDateType != null) {
-      setDateType(newDateType);
-      if (typeof selectedDate !== "undefined" && selectedDate != null) {
-        format$1(selectedDate, serverSideDateFormat);
-        onChange({
-          date: format$1(selectedDate, serverSideDateFormat),
-          type: newDateType.type
-        });
-      }
+    // INFO: toggle sends null value on double click
+    if (!newDateType) return;
+    let newDate = null;
+    if (typeof selectedDate !== "undefined" && selectedDate != null) {
+      newDate = format(selectedDate, serverSideDateFormat);
     }
+    setFieldValue(prev => _extends({}, prev, {
+      dateType: newDateType
+    }));
+    onChange({
+      date: newDate,
+      type: newDateType.type
+    });
   };
   const handleDateChange = newDate => {
     if (newDate != null) {
@@ -17029,13 +17553,17 @@ const DateSelect = props => {
         newDate = setDate(newDate, 1);
         newDate = setMonth(newDate, 0);
       }
-      setSelectedDate(newDate);
+      setFieldValue(prev => _extends({}, prev, {
+        selectedDate: newDate
+      }));
       onChange({
-        date: format$1(newDate, serverSideDateFormat),
+        date: format(newDate, serverSideDateFormat),
         type: dateType.type
       });
     } else {
-      setSelectedDate(newDate);
+      setFieldValue(prev => _extends({}, prev, {
+        selectedDate: null
+      }));
       onChange({
         date: null,
         type: dateType.type
@@ -17105,7 +17633,7 @@ const DateSelect = props => {
         inputVariant: "outlined",
         inputFormat: dateType.format,
         views: dateType.views,
-        value: typeof selectedDate === "undefined" ? null : selectedDate,
+        value: selectedDate || null,
         onChange: handleDateChange,
         disabled: disabled,
         renderInput: params => /*#__PURE__*/jsx(TextField, _extends({}, params, {
@@ -17115,7 +17643,12 @@ const DateSelect = props => {
           sx: dateInputStyles
         })),
         minDate: minDate,
-        maxDate: maxDate
+        maxDate: maxDate,
+        componentsProps: {
+          actionBar: {
+            actions: ["cancel", "clear", "accept"]
+          }
+        }
       })
     })]
   });
@@ -17155,49 +17688,6 @@ const DisableWrapper = ({
   }));
 };
-const ImageUploadReadOnly = ({
-  formData,
-  schema,
-  uiSchema: _uiSchema = {
-    "ui:options": {}
-  }
-}) => {
-  const {
-    downloadUrl: downloadUrlTemplate,
-    extension: extensionTemplate
-  } = _uiSchema["ui:options"];
-  const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  const extension = useRender(extensionTemplate);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Typography, {
-      gutterBottom: true,
-      variant: "subtitle2",
-      children: schema.title
-    }), /*#__PURE__*/jsx(Paper, {
-      sx: {
-        height: 185,
-        justifyContent: "center",
-        display: "flex",
-        padding: 2,
-        overflow: "hidden"
-      },
-      variant: "outlined",
-      children: /*#__PURE__*/jsx(Image, {
-        src: downloadUrl,
-        style: {
-          height: "100%",
-          width: "auto"
-        },
-        extension: extension
-      })
-    })]
-  });
-};
-ImageUploadReadOnly.propTypes = {
-  schema: PropTypes.any,
-  renderedValues: PropTypes.any
-};
 const FieldContainer = props => {
   return /*#__PURE__*/jsx(Box$2, _extends({}, props, {
     sx: _extends({}, props.sx, {
@@ -17209,7 +17699,30 @@ const FieldContainer = props => {
 };
 FieldContainer.propTypes = Box$2.propTypes;
-registerPlugin(FilePondPluginFileValidateType, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
+registerPlugin(FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
+// Check enums below
+// source:https://github.com/pqina/filepond-docs/blob/master/content/patterns/API/filepond-object.md#filepond-status
+const FILE_STATUS = {
+  INIT: 1,
+  IDLE: 2,
+  PROCESSING_QUEUED: 9,
+  PROCESSING: 3,
+  PROCESSING_COMPLETE: 5,
+  // upload complete
+  PROCESSING_ERROR: 6,
+  PROCESSING_REVERT_ERROR: 10,
+  LOADING: 7,
+  LOAD_ERROR: 8
+};
+const FILE_ORIGIN = {
+  INPUT: 1,
+  // add by user
+  LIMBO: 2,
+  // temp file
+  LOCAL: 3 // pre-loaded files
+};
 const Upload = props => {
   const {
     schema,
@@ -17218,67 +17731,108 @@ const Upload = props => {
       "ui:options": {}
     },
     onChange,
-    disabled,
-    required
+    disabled
   } = props;
+  const emptyValue = uiSchema["ui:emptyValue"] || null;
   const isReadOnly = useReadOnly();
   const {
-    documentName: documentNameTemplate,
-    downloadUrl: downloadUrlTemplate,
-    extension: extensionTemplate,
     uploadDataSource,
-    mapUploadResponse,
     acceptedFileTypes,
     message,
-    isImage
-  } = uiSchema["ui:options"];
-  const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
-  const documentName = useRender(documentNameTemplate);
-  const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  useRender(extensionTemplate);
-  const [files, setFiles] = useState([]);
-  const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
+    // TODO: can be handled generic way with HOC
+    isImage = true,
+    // multiple = true, // change to false
-  // INFO: this state is needed to prevent re-load of file during submit
-  const [currentFileId, setCurrentFileId] = useState();
+    isPreviewHidden = false,
+    idTemplate,
+    downloadUrlTemplate,
+    nameTemplate,
+    mapUploadResponseToIdTemplate,
+    maxFiles = 1,
+    maxFileSize = null,
+    maxTotalFileSize = null
+  } = uiSchema["ui:options"];
-  // TODO: change this to useMemo with help of useLastestDeps
-  useEffect(() => {
-    if (formData === currentFileId) return;
-    const files = [{
-      source: documentName || "File",
-      options: {
-        type: "local",
-        metadata: {
-          url: downloadUrl
+  // TODO: implement single vs multipe mode, currently only multiple is active
+  // let _formData = formData; if (multiple && (formData === null ||
+  // formData === undefined)) { _formData = [];
+  // }
+  const _formData = formData || [];
+  const initialFiles = useMemo(() => {
+    return _formData.map(({
+      data
+    }) => {
+      const id = mustache.render(idTemplate, data);
+      const downloadUrl = downloadUrlTemplate ? decodeHtml$2(mustache.render(downloadUrlTemplate, data)) : downloadUrlTemplate;
+      const name = mustache.render(nameTemplate, data);
+      return {
+        // INFO: source appears in preview but also needed to identify
+        // the download URL. Check issue:
+        // https://github.com/pqina/filepond/issues/284
+        source: `${name} id:${id}`,
+        options: {
+          type: "local",
+          origin: downloadUrl,
+          // INFO: id is used in getFileIds function
+          metadata: {
+            url: downloadUrl,
+            id
+          }
         }
-      }
-    }];
-    if (formData != undefined) setFiles(files);
-  }, [formData]);
-  const handleLoad = (source, load, error) => {
-    fetch(downloadUrl).then(res => res.blob()).then(res => {
+      };
+    });
+  }, []);
+  const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
+  const filePondRef = useRef();
+  const getFileIds = () => {
+    var _filePondRef$current;
+    return ((_filePondRef$current = filePondRef.current) == null ? void 0 : _filePondRef$current.getFiles().filter(file => {
+      const {
+        origin,
+        status
+      } = file;
+      if (origin === FILE_ORIGIN.LOCAL) return true;
+      if (origin === FILE_ORIGIN.INPUT && status === FILE_STATUS.PROCESSING_COMPLETE) return true;
+    }).map(file => {
+      if (file.origin === FILE_ORIGIN.LOCAL) return file.getMetadata().id;
+      return file.serverId;
+    }).map(i => i.toString())) || [];
+  };
+  const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
+  const handleLoad = (source, load, error, progress, abort, headers) => {
+    // INFO: source appears in preview but also needed to identify
+    // the download URL. Check issue:
+    // https://github.com/pqina/filepond/issues/284
+    const file = initialFiles.find(item => item.source === source);
+    const loadUrl = file.options.origin;
+    fetch(loadUrl).then(res => res.blob()).then(res => {
       const file = res.type === "jpeg/jfif" || !res.type ? new Blob([res], {
         type: "image/jpeg"
       }) : res;
-      load(file);
+      const preview = isPreviewHidden ? res : file;
+      load(preview);
     }).catch(error);
+    // Should expose an abort method so the request can be cancelled
+    return {
+      abort: () => abort()
+    };
   };
   const handleUploadResponse = res => {
     try {
       const jsonRes = JSON.parse(res);
-      const fileUuid = mapUploadResponse ? mustache.render(mapUploadResponse.fileUuid, jsonRes) : jsonRes.DATA.fileUuid;
-      setCurrentFileId(fileUuid);
-      onChange(fileUuid);
+      const id = mustache.render(mapUploadResponseToIdTemplate, jsonRes);
+      return id;
     } catch (err) {
-      console.log(err);
+      var _window$logger;
+      (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
+        name: `Upload response could not be parsed. ${err}`,
+        data: res
+      });
     }
   };
-  const handleDelete = () => {
-    setCurrentFileId();
-    setFiles([]);
-    onChange();
-  };
+  // TODO: move to message HOC
   const messageProps = {
     title: (message == null ? void 0 : message.title) || undefined,
     description: (message == null ? void 0 : message.description) || undefined,
@@ -17288,48 +17842,91 @@ const Upload = props => {
   const {
     error
   } = useNotify();
-  const filePondProps = {
-    acceptedFileTypes: acceptedFileTypes ? acceptedFileTypes : isImage ? ["image/*"] : null,
-    files,
-    allowMultiple: false,
-    server: {
-      url: uploadUrl,
-      process: {
-        method: "POST",
-        headers: {
-          Methods: "POST"
-        },
-        onload: handleUploadResponse,
-        onerror: e => {
-          var _window$logger;
-          const message = `The image could not be uploaded.`;
-          error(message);
-          (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
-            name: message,
-            data: e
-          });
-        }
+  const handleFileChange = () => {
+    const ids = getFileIds();
+    // TODO: fill the data
+    const value = ids.map(id => ({
+      value: id,
+      data: {}
+    }));
+    if (value.length === 0) onChange(emptyValue);else onChange(value);
+  };
+  // TODO: move to memo component
+  const FileUpload = useMemo(() => {
+    const styles = isReadOnly ? {
+      // INFO: hide drop panel and drop panel
+      "div>div>div.filepond--drop-label": {
+        display: "none"
       },
-      load: handleLoad,
-      revert: handleDelete
-    },
-    onupdatefiles: files => {
-      if (files.length === 0) {
-        onChange(undefined);
+      "button.filepond--action-remove-item": {
+        display: "none"
       }
-      setFiles(files);
-    },
-    allowProcess: false,
-    disabled: isReadOnly,
-    allowDownloadByUrl: true
-  };
-  const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
+    } : null;
+    const getAcceptedFileTypes = () => {
+      if (acceptedFileTypes) return acceptedFileTypes;
+      if (isImage) return ["image/*"];
+      return null;
+    };
+    const filePondProps = {
+      acceptedFileTypes: getAcceptedFileTypes(),
+      files: initialFiles,
+      // files: undefined,
+      allowMultiple: true,
+      server: {
+        url: uploadUrl,
+        process: {
+          method: "POST",
+          headers: {
+            Methods: "POST"
+          },
+          onload: handleUploadResponse,
+          onerror: e => {
+            var _window$logger2;
+            const message = `The image could not be uploaded.`;
+            error(message);
+            (_window$logger2 = window.logger) == null ? void 0 : _window$logger2.sendLog({
+              name: message,
+              data: e
+            });
+          }
+        },
+        load: handleLoad
+      },
+      onprocessfile: () => handleFileChange(),
+      onremovefile: () => handleFileChange(),
+      maxParallelUploads: 3,
+      allowProcess: false,
+      disabled: isReadOnly,
+      allowDownloadByUrl: true,
+      maxFiles: maxFiles,
+      maxFileSize,
+      maxTotalFileSize,
+      // INFO: allowDrop create problem on file type validation       //
+      // (check badge form), for preview image allowDrop: false,      //
+      // labelIdle: "Click Here to Browse File(s)" 					//
+      allowFileTypeValidation: false
+    };
+    const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
+    return /*#__PURE__*/jsx(Box$1, {
+      sx: styles,
+      children: /*#__PURE__*/jsx(FilePond, _extends({
+        ref: filePondRef
+      }, filePondProps, overrideProps))
+    });
+  }, []);
+  // TODO: better implementation
   if (isReadOnly) {
     if (formData == undefined) return /*#__PURE__*/jsx(ReadOnlyView, {
       label: schema.title,
       emptyViewText: "No file uploaded"
     });
-    if (isImage) return /*#__PURE__*/jsx(ImageUploadReadOnly, _extends({}, props));
+    return /*#__PURE__*/jsx(ReadOnlyView, {
+      label: schema.title,
+      renderValue: () => FileUpload
+    });
   }
   return /*#__PURE__*/jsxs(FieldContainer, {
     children: [/*#__PURE__*/jsxs(DisableWrapper, {
@@ -17346,7 +17943,7 @@ const Upload = props => {
         sx: {
           marginTop: 1
         },
-        children: /*#__PURE__*/jsx(FilePond, _extends({}, filePondProps, overrideProps))
+        children: FileUpload
       })]
     }), message && /*#__PURE__*/jsx(Alert, _extends({}, messageProps))]
   });
@@ -18433,7 +19030,13 @@ const DateWidgetRaw = ({
     required: required,
     onChange: handleChange,
     disabled: disabled
-  }, uiSchema == null ? void 0 : uiSchema["ui:props"]));
+  }, uiSchema == null ? void 0 : uiSchema["ui:props"], {
+    componentsProps: {
+      actionBar: {
+        actions: ["cancel", "clear", "accept"]
+      }
+    }
+  }));
 };
 DateWidgetRaw.propTypes = {
   onChange: PropTypes.func,
@@ -18568,1003 +19171,6 @@ const PhoneWidgetReadOnly = props => {
 const HOCs$5 = [...commonWidgetHOCs, withReadyOnly(PhoneWidgetReadOnly)];
 var PhoneWidget$1 = compose(HOCs$5)(PhoneWidget);
-/**
- * react-number-format - 5.1.3
- * Author : Sudhanshu Yadav
- * Copyright (c) 2016, 2023 to Sudhanshu Yadav, released under the MIT license.
- * https://github.com/s-yadav/react-number-format
- */
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        { t[p] = s[p]; } }
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        { for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                { t[p[i]] = s[p[i]]; }
-        } }
-    return t;
-}
-var SourceType;
-(function (SourceType) {
-    SourceType["event"] = "event";
-    SourceType["props"] = "prop";
-})(SourceType || (SourceType = {}));
-// basic noop function
-function noop() { }
-function charIsNumber(char) {
-    return !!(char || '').match(/\d/);
-}
-function isNil(val) {
-    return val === null || val === undefined;
-}
-function isNanValue(val) {
-    return typeof val === 'number' && isNaN(val);
-}
-function escapeRegExp(str) {
-    return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
-}
-function getThousandsGroupRegex(thousandsGroupStyle) {
-    switch (thousandsGroupStyle) {
-        case 'lakh':
-            return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;
-        case 'wan':
-            return /(\d)(?=(\d{4})+(?!\d))/g;
-        case 'thousand':
-        default:
-            return /(\d)(?=(\d{3})+(?!\d))/g;
-    }
-}
-function applyThousandSeparator(str, thousandSeparator, thousandsGroupStyle) {
-    var thousandsGroupRegex = getThousandsGroupRegex(thousandsGroupStyle);
-    var index = str.search(/[1-9]/);
-    index = index === -1 ? str.length : index;
-    return (str.substring(0, index) +
-        str.substring(index, str.length).replace(thousandsGroupRegex, '$1' + thousandSeparator));
-}
-function usePersistentCallback(cb) {
-    var callbackRef = useRef(cb);
-    // keep the callback ref upto date
-    callbackRef.current = cb;
-    /**
-     * initialize a persistent callback which never changes
-     * through out the component lifecycle
-     */
-    var persistentCbRef = useRef(function () {
-        var args = [], len = arguments.length;
-        while ( len-- ) args[ len ] = arguments[ len ];
-        return callbackRef.current.apply(callbackRef, args);
-    });
-    return persistentCbRef.current;
-}
-//spilt a float number into different parts beforeDecimal, afterDecimal, and negation
-function splitDecimal(numStr, allowNegative) {
-    if ( allowNegative === void 0 ) allowNegative = true;
-    var hasNegation = numStr[0] === '-';
-    var addNegation = hasNegation && allowNegative;
-    numStr = numStr.replace('-', '');
-    var parts = numStr.split('.');
-    var beforeDecimal = parts[0];
-    var afterDecimal = parts[1] || '';
-    return {
-        beforeDecimal: beforeDecimal,
-        afterDecimal: afterDecimal,
-        hasNegation: hasNegation,
-        addNegation: addNegation,
-    };
-}
-function fixLeadingZero(numStr) {
-    if (!numStr)
-        { return numStr; }
-    var isNegative = numStr[0] === '-';
-    if (isNegative)
-        { numStr = numStr.substring(1, numStr.length); }
-    var parts = numStr.split('.');
-    var beforeDecimal = parts[0].replace(/^0+/, '') || '0';
-    var afterDecimal = parts[1] || '';
-    return ("" + (isNegative ? '-' : '') + beforeDecimal + (afterDecimal ? ("." + afterDecimal) : ''));
-}
-/**
- * limit decimal numbers to given scale
- * Not used .fixedTo because that will break with big numbers
- */
-function limitToScale(numStr, scale, fixedDecimalScale) {
-    var str = '';
-    var filler = fixedDecimalScale ? '0' : '';
-    for (var i = 0; i <= scale - 1; i++) {
-        str += numStr[i] || filler;
-    }
-    return str;
-}
-function repeat(str, count) {
-    return Array(count + 1).join(str);
-}
-function toNumericString(num) {
-    var _num = num + ''; // typecast number to string
-    // store the sign and remove it from the number.
-    var sign = _num[0] === '-' ? '-' : '';
-    if (sign)
-        { _num = _num.substring(1); }
-    // split the number into cofficient and exponent
-    var ref = _num.split(/[eE]/g);
-    var coefficient = ref[0];
-    var exponent = ref[1];
-    // covert exponent to number;
-    exponent = Number(exponent);
-    // if there is no exponent part or its 0, return the coffiecient with sign
-    if (!exponent)
-        { return sign + coefficient; }
-    coefficient = coefficient.replace('.', '');
-    /**
-     * for scientific notation the current decimal index will be after first number (index 0)
-     * So effective decimal index will always be 1 + exponent value
-     */
-    var decimalIndex = 1 + exponent;
-    var coffiecientLn = coefficient.length;
-    if (decimalIndex < 0) {
-        // if decimal index is less then 0 add preceding 0s
-        // add 1 as join will have
-        coefficient = '0.' + repeat('0', Math.abs(decimalIndex)) + coefficient;
-    }
-    else if (decimalIndex >= coffiecientLn) {
-        // if decimal index is less then 0 add leading 0s
-        coefficient = coefficient + repeat('0', decimalIndex - coffiecientLn);
-    }
-    else {
-        // else add decimal point at proper index
-        coefficient =
-            (coefficient.substring(0, decimalIndex) || '0') + '.' + coefficient.substring(decimalIndex);
-    }
-    return sign + coefficient;
-}
-/**
- * This method is required to round prop value to given scale.
- * Not used .round or .fixedTo because that will break with big numbers
- */
-function roundToPrecision(numStr, scale, fixedDecimalScale) {
-    //if number is empty don't do anything return empty string
-    if (['', '-'].indexOf(numStr) !== -1)
-        { return numStr; }
-    var shouldHaveDecimalSeparator = (numStr.indexOf('.') !== -1 || fixedDecimalScale) && scale;
-    var ref = splitDecimal(numStr);
-    var beforeDecimal = ref.beforeDecimal;
-    var afterDecimal = ref.afterDecimal;
-    var hasNegation = ref.hasNegation;
-    var floatValue = parseFloat(("0." + (afterDecimal || '0')));
-    var floatValueStr = afterDecimal.length <= scale ? ("0." + afterDecimal) : floatValue.toFixed(scale);
-    var roundedDecimalParts = floatValueStr.split('.');
-    var intPart = beforeDecimal
-        .split('')
-        .reverse()
-        .reduce(function (roundedStr, current, idx) {
-        if (roundedStr.length > idx) {
-            return ((Number(roundedStr[0]) + Number(current)).toString() +
-                roundedStr.substring(1, roundedStr.length));
-        }
-        return current + roundedStr;
-    }, roundedDecimalParts[0]);
-    var decimalPart = limitToScale(roundedDecimalParts[1] || '', scale, fixedDecimalScale);
-    var negation = hasNegation ? '-' : '';
-    var decimalSeparator = shouldHaveDecimalSeparator ? '.' : '';
-    return ("" + negation + intPart + decimalSeparator + decimalPart);
-}
-/** set the caret positon in an input field **/
-function setCaretPosition(el, caretPos) {
-    el.value = el.value;
-    // ^ this is used to not only get 'focus', but
-    // to make sure we don't have it everything -selected-
-    // (it causes an issue in chrome, and having it doesn't hurt any other browser)
-    if (el !== null) {
-        /* @ts-ignore */
-        if (el.createTextRange) {
-            /* @ts-ignore */
-            var range = el.createTextRange();
-            range.move('character', caretPos);
-            range.select();
-            return true;
-        }
-        // (el.selectionStart === 0 added for Firefox bug)
-        if (el.selectionStart || el.selectionStart === 0) {
-            el.focus();
-            el.setSelectionRange(caretPos, caretPos);
-            return true;
-        }
-        // fail city, fortunately this never happens (as far as I've tested) :)
-        el.focus();
-        return false;
-    }
-}
-function findChangeRange(prevValue, newValue) {
-    var i = 0, j = 0;
-    var prevLength = prevValue.length;
-    var newLength = newValue.length;
-    while (prevValue[i] === newValue[i] && i < prevLength)
-        { i++; }
-    //check what has been changed from last
-    while (prevValue[prevLength - 1 - j] === newValue[newLength - 1 - j] &&
-        newLength - j > i &&
-        prevLength - j > i) {
-        j++;
-    }
-    return {
-        from: { start: i, end: prevLength - j },
-        to: { start: i, end: newLength - j },
-    };
-}
-/*
-  Returns a number whose value is limited to the given range
-*/
-function clamp(num, min, max) {
-    return Math.min(Math.max(num, min), max);
-}
-function geInputCaretPosition(el) {
-    /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
-    return Math.max(el.selectionStart, el.selectionEnd);
-}
-function addInputMode() {
-    return (typeof navigator !== 'undefined' &&
-        !(navigator.platform && /iPhone|iPod/.test(navigator.platform)));
-}
-function getDefaultChangeMeta(value) {
-    return {
-        from: {
-            start: 0,
-            end: 0,
-        },
-        to: {
-            start: 0,
-            end: value.length,
-        },
-        lastValue: '',
-    };
-}
-function getCaretPosition(newFormattedValue, lastFormattedValue, curValue, curCaretPos, boundary, isValidInputCharacter) {
-    /**
-     * if something got inserted on empty value, add the formatted character before the current value,
-     * This is to avoid the case where typed character is present on format characters
-     */
-    var firstAllowedPosition = boundary.findIndex(function (b) { return b; });
-    var prefixFormat = newFormattedValue.slice(0, firstAllowedPosition);
-    if (!lastFormattedValue && !curValue.startsWith(prefixFormat)) {
-        curValue = prefixFormat + curValue;
-        curCaretPos = curCaretPos + prefixFormat.length;
-    }
-    var curValLn = curValue.length;
-    var formattedValueLn = newFormattedValue.length;
-    // create index map
-    var addedIndexMap = {};
-    var indexMap = new Array(curValLn);
-    for (var i = 0; i < curValLn; i++) {
-        indexMap[i] = -1;
-        for (var j = 0, jLn = formattedValueLn; j < jLn; j++) {
-            if (curValue[i] === newFormattedValue[j] && addedIndexMap[j] !== true) {
-                indexMap[i] = j;
-                addedIndexMap[j] = true;
-                break;
-            }
-        }
-    }
-    /**
-     * For current caret position find closest characters (left and right side)
-     * which are properly mapped to formatted value.
-     * The idea is that the new caret position will exist always in the boundary of
-     * that mapped index
-     */
-    var pos = curCaretPos;
-    while (pos < curValLn && (indexMap[pos] === -1 || !isValidInputCharacter(curValue[pos]))) {
-        pos++;
-    }
-    // if the caret position is on last keep the endIndex as last for formatted value
-    var endIndex = pos === curValLn || indexMap[pos] === -1 ? formattedValueLn : indexMap[pos];
-    pos = curCaretPos - 1;
-    while (pos > 0 && indexMap[pos] === -1)
-        { pos--; }
-    var startIndex = pos === -1 || indexMap[pos] === -1 ? 0 : indexMap[pos] + 1;
-    /**
-     * case where a char is added on suffix and removed from middle, example 2sq345 becoming $2,345 sq
-     * there is still a mapping but the order of start index and end index is changed
-     */
-    if (startIndex > endIndex)
-        { return endIndex; }
-    /**
-     * given the current caret position if it closer to startIndex
-     * keep the new caret position on start index or keep it closer to endIndex
-     */
-    return curCaretPos - startIndex < endIndex - curCaretPos ? startIndex : endIndex;
-}
-/* This keeps the caret within typing area so people can't type in between prefix or suffix or format characters */
-function getCaretPosInBoundary(value, caretPos, boundary, direction) {
-    var valLn = value.length;
-    // clamp caret position to [0, value.length]
-    caretPos = clamp(caretPos, 0, valLn);
-    if (direction === 'left') {
-        while (caretPos >= 0 && !boundary[caretPos])
-            { caretPos--; }
-        // if we don't find any suitable caret position on left, set it on first allowed position
-        if (caretPos === -1)
-            { caretPos = boundary.indexOf(true); }
-    }
-    else {
-        while (caretPos <= valLn && !boundary[caretPos])
-            { caretPos++; }
-        // if we don't find any suitable caret position on right, set it on last allowed position
-        if (caretPos > valLn)
-            { caretPos = boundary.lastIndexOf(true); }
-    }
-    // if we still don't find caret position, set it at the end of value
-    if (caretPos === -1)
-        { caretPos = valLn; }
-    return caretPos;
-}
-function caretUnknownFormatBoundary(formattedValue) {
-    var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function () { return true; });
-    for (var i = 0, ln = boundaryAry.length; i < ln; i++) {
-        // consider caret to be in boundary if it is before or after numeric value
-        boundaryAry[i] = Boolean(charIsNumber(formattedValue[i]) || charIsNumber(formattedValue[i - 1]));
-    }
-    return boundaryAry;
-}
-function useInternalValues(value, defaultValue, valueIsNumericString, format, removeFormatting, onValueChange) {
-    if ( onValueChange === void 0 ) onValueChange = noop;
-    var propValues = useRef();
-    var getValues = usePersistentCallback(function (value) {
-        var formattedValue, numAsString;
-        if (isNil(value) || isNanValue(value)) {
-            numAsString = '';
-            formattedValue = '';
-        }
-        else if (typeof value === 'number' || valueIsNumericString) {
-            numAsString = typeof value === 'number' ? toNumericString(value) : value;
-            formattedValue = format(numAsString);
-        }
-        else {
-            numAsString = removeFormatting(value, undefined);
-            formattedValue = value;
-        }
-        return { formattedValue: formattedValue, numAsString: numAsString };
-    });
-    var ref = useState(function () {
-        return getValues(defaultValue);
-    });
-    var values = ref[0];
-    var setValues = ref[1];
-    var _onValueChange = function (values, sourceInfo) {
-        setValues({
-            formattedValue: values.formattedValue,
-            numAsString: values.value,
-        });
-        onValueChange(values, sourceInfo);
-    };
-    useMemo(function () {
-        //if element is moved to uncontrolled mode, don't reset the value
-        if (!isNil(value)) {
-            propValues.current = getValues(value);
-            setValues(propValues.current);
-        }
-        else {
-            propValues.current = undefined;
-        }
-    }, [value, getValues]);
-    return [values, _onValueChange];
-}
-function defaultRemoveFormatting(value) {
-    return value.replace(/[^0-9]/g, '');
-}
-function defaultFormat(value) {
-    return value;
-}
-function NumberFormatBase(props) {
-    var type = props.type; if ( type === void 0 ) type = 'text';
-    var displayType = props.displayType; if ( displayType === void 0 ) displayType = 'input';
-    var customInput = props.customInput;
-    var renderText = props.renderText;
-    var getInputRef = props.getInputRef;
-    var format = props.format; if ( format === void 0 ) format = defaultFormat;
-    var removeFormatting = props.removeFormatting; if ( removeFormatting === void 0 ) removeFormatting = defaultRemoveFormatting;
-    var defaultValue = props.defaultValue;
-    var valueIsNumericString = props.valueIsNumericString;
-    var onValueChange = props.onValueChange;
-    var isAllowed = props.isAllowed;
-    var onChange = props.onChange; if ( onChange === void 0 ) onChange = noop;
-    var onKeyDown = props.onKeyDown; if ( onKeyDown === void 0 ) onKeyDown = noop;
-    var onMouseUp = props.onMouseUp; if ( onMouseUp === void 0 ) onMouseUp = noop;
-    var onFocus = props.onFocus; if ( onFocus === void 0 ) onFocus = noop;
-    var onBlur = props.onBlur; if ( onBlur === void 0 ) onBlur = noop;
-    var propValue = props.value;
-    var getCaretBoundary = props.getCaretBoundary; if ( getCaretBoundary === void 0 ) getCaretBoundary = caretUnknownFormatBoundary;
-    var isValidInputCharacter = props.isValidInputCharacter; if ( isValidInputCharacter === void 0 ) isValidInputCharacter = charIsNumber;
-    var otherProps = __rest(props, ["type", "displayType", "customInput", "renderText", "getInputRef", "format", "removeFormatting", "defaultValue", "valueIsNumericString", "onValueChange", "isAllowed", "onChange", "onKeyDown", "onMouseUp", "onFocus", "onBlur", "value", "getCaretBoundary", "isValidInputCharacter"]);
-    var ref = useInternalValues(propValue, defaultValue, Boolean(valueIsNumericString), format, removeFormatting, onValueChange);
-    var ref_0 = ref[0];
-    var formattedValue = ref_0.formattedValue;
-    var numAsString = ref_0.numAsString;
-    var onFormattedValueChange = ref[1];
-    var lastUpdatedValue = useRef();
-    var _onValueChange = function (values, source) {
-        lastUpdatedValue.current = values.formattedValue;
-        onFormattedValueChange(values, source);
-    };
-    // check if there is any change in the value due to props change
-    useEffect(function () {
-        var newFormattedValue = format(numAsString);
-        // if the formatted value is not synced to parent, or if the formatted value is different
-        if (lastUpdatedValue.current === undefined || newFormattedValue !== lastUpdatedValue.current) {
-            var input = focusedElm.current;
-            // formatting can remove some of the number chars, so we need to fine number string again
-            var _numAsString = removeFormatting(newFormattedValue, undefined);
-            updateValue({
-                formattedValue: newFormattedValue,
-                numAsString: _numAsString,
-                input: input,
-                setCaretPosition: true,
-                source: SourceType.props,
-                event: undefined,
-            });
-        }
-    });
-    var ref$1 = useState(false);
-    var mounted = ref$1[0];
-    var setMounted = ref$1[1];
-    var focusedElm = useRef(null);
-    var timeout = useRef({
-        setCaretTimeout: null,
-        focusTimeout: null,
-    });
-    useEffect(function () {
-        setMounted(true);
-        return function () {
-            clearTimeout(timeout.current.setCaretTimeout);
-            clearTimeout(timeout.current.focusTimeout);
-        };
-    }, []);
-    var _format = format;
-    var getValueObject = function (formattedValue, numAsString) {
-        var floatValue = parseFloat(numAsString);
-        return {
-            formattedValue: formattedValue,
-            value: numAsString,
-            floatValue: isNaN(floatValue) ? undefined : floatValue,
-        };
-    };
-    var setPatchedCaretPosition = function (el, caretPos, currentValue) {
-        /* setting caret position within timeout of 0ms is required for mobile chrome,
-        otherwise browser resets the caret position after we set it
-        We are also setting it without timeout so that in normal browser we don't see the flickering */
-        setCaretPosition(el, caretPos);
-        timeout.current.setCaretTimeout = setTimeout(function () {
-            if (el.value === currentValue)
-                { setCaretPosition(el, caretPos); }
-        }, 0);
-    };
-    /* This keeps the caret within typing area so people can't type in between prefix or suffix */
-    var correctCaretPosition = function (value, caretPos, direction) {
-        return getCaretPosInBoundary(value, caretPos, getCaretBoundary(value), direction);
-    };
-    var getNewCaretPosition = function (inputValue, newFormattedValue, caretPos) {
-        var caretBoundary = getCaretBoundary(newFormattedValue);
-        var updatedCaretPos = getCaretPosition(newFormattedValue, formattedValue, inputValue, caretPos, caretBoundary, isValidInputCharacter);
-        //correct caret position if its outside of editable area
-        updatedCaretPos = getCaretPosInBoundary(newFormattedValue, updatedCaretPos, caretBoundary);
-        return updatedCaretPos;
-    };
-    var updateValue = function (params) {
-        var newFormattedValue = params.formattedValue; if ( newFormattedValue === void 0 ) newFormattedValue = '';
-        var input = params.input;
-        var setCaretPosition = params.setCaretPosition; if ( setCaretPosition === void 0 ) setCaretPosition = true;
-        var source = params.source;
-        var event = params.event;
-        var numAsString = params.numAsString;
-        var caretPos = params.caretPos;
-        if (input) {
-            //calculate caret position if not defined
-            if (caretPos === undefined && setCaretPosition) {
-                var inputValue = params.inputValue || input.value;
-                var currentCaretPosition = geInputCaretPosition(input);
-                /**
-                 * set the value imperatively, this is required for IE fix
-                 * This is also required as if new caret position is beyond the previous value.
-                 * Caret position will not be set correctly
-                 */
-                input.value = newFormattedValue;
-                //get the caret position
-                caretPos = getNewCaretPosition(inputValue, newFormattedValue, currentCaretPosition);
-            }
-            /**
-             * set the value imperatively, as we set the caret position as well imperatively.
-             * This is to keep value and caret position in sync
-             */
-            input.value = newFormattedValue;
-            //set caret position, and value imperatively when element is provided
-            if (setCaretPosition && caretPos !== undefined) {
-                //set caret position
-                setPatchedCaretPosition(input, caretPos, newFormattedValue);
-            }
-        }
-        if (newFormattedValue !== formattedValue) {
-            // trigger onValueChange synchronously, so parent is updated along with the number format. Fix for #277, #287
-            _onValueChange(getValueObject(newFormattedValue, numAsString), { event: event, source: source });
-        }
-    };
-    var formatInputValue = function (inputValue, event, source) {
-        var changeRange = findChangeRange(formattedValue, inputValue);
-        var changeMeta = Object.assign(Object.assign({}, changeRange), { lastValue: formattedValue });
-        var _numAsString = removeFormatting(inputValue, changeMeta);
-        var _formattedValue = _format(_numAsString);
-        // formatting can remove some of the number chars, so we need to fine number string again
-        _numAsString = removeFormatting(_formattedValue, undefined);
-        if (isAllowed && !isAllowed(getValueObject(_formattedValue, _numAsString))) {
-            //reset the caret position
-            var input = event.target;
-            var currentCaretPosition = geInputCaretPosition(input);
-            var caretPos = getNewCaretPosition(inputValue, formattedValue, currentCaretPosition);
-            setPatchedCaretPosition(input, caretPos, formattedValue);
-            return false;
-        }
-        updateValue({
-            formattedValue: _formattedValue,
-            numAsString: _numAsString,
-            inputValue: inputValue,
-            event: event,
-            source: source,
-            setCaretPosition: true,
-            input: event.target,
-        });
-        return true;
-    };
-    var _onChange = function (e) {
-        var el = e.target;
-        var inputValue = el.value;
-        var changed = formatInputValue(inputValue, e, SourceType.event);
-        if (changed)
-            { onChange(e); }
-    };
-    var _onKeyDown = function (e) {
-        var el = e.target;
-        var key = e.key;
-        var selectionStart = el.selectionStart;
-        var selectionEnd = el.selectionEnd;
-        var value = el.value; if ( value === void 0 ) value = '';
-        var expectedCaretPosition;
-        //Handle backspace and delete against non numerical/decimal characters or arrow keys
-        if (key === 'ArrowLeft' || key === 'Backspace') {
-            expectedCaretPosition = Math.max(selectionStart - 1, 0);
-        }
-        else if (key === 'ArrowRight') {
-            expectedCaretPosition = Math.min(selectionStart + 1, value.length);
-        }
-        else if (key === 'Delete') {
-            expectedCaretPosition = selectionStart;
-        }
-        //if expectedCaretPosition is not set it means we don't want to Handle keyDown
-        // also if multiple characters are selected don't handle
-        if (expectedCaretPosition === undefined || selectionStart !== selectionEnd) {
-            onKeyDown(e);
-            return;
-        }
-        var newCaretPosition = expectedCaretPosition;
-        if (key === 'ArrowLeft' || key === 'ArrowRight') {
-            var direction = key === 'ArrowLeft' ? 'left' : 'right';
-            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, direction);
-        }
-        else if (key === 'Delete' && !isValidInputCharacter(value[expectedCaretPosition])) {
-            // in case of delete go to closest caret boundary on the right side
-            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, 'right');
-        }
-        else if (key === 'Backspace' && !isValidInputCharacter(value[expectedCaretPosition])) {
-            // in case of backspace go to closest caret boundary on the left side
-            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, 'left');
-        }
-        if (newCaretPosition !== expectedCaretPosition) {
-            setPatchedCaretPosition(el, newCaretPosition, value);
-        }
-        /* NOTE: this is just required for unit test as we need to get the newCaretPosition,
-                Remove this when you find different solution */
-        /* @ts-ignore */
-        if (e.isUnitTestRun) {
-            setPatchedCaretPosition(el, newCaretPosition, value);
-        }
-        onKeyDown(e);
-    };
-    /** required to handle the caret position when click anywhere within the input **/
-    var _onMouseUp = function (e) {
-        var el = e.target;
-        /**
-         * NOTE: we have to give default value for value as in case when custom input is provided
-         * value can come as undefined when nothing is provided on value prop.
-         */
-        var selectionStart = el.selectionStart;
-        var selectionEnd = el.selectionEnd;
-        var value = el.value; if ( value === void 0 ) value = '';
-        if (selectionStart === selectionEnd) {
-            var caretPosition = correctCaretPosition(value, selectionStart);
-            if (caretPosition !== selectionStart) {
-                setPatchedCaretPosition(el, caretPosition, value);
-            }
-        }
-        onMouseUp(e);
-    };
-    var _onFocus = function (e) {
-        // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
-        // (onFocus event target selectionStart is always 0 before setTimeout)
-        if (e.persist)
-            { e.persist(); }
-        var el = e.target;
-        focusedElm.current = el;
-        timeout.current.focusTimeout = setTimeout(function () {
-            var selectionStart = el.selectionStart;
-            var selectionEnd = el.selectionEnd;
-            var value = el.value; if ( value === void 0 ) value = '';
-            var caretPosition = correctCaretPosition(value, selectionStart);
-            //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
-            if (caretPosition !== selectionStart &&
-                !(selectionStart === 0 && selectionEnd === value.length)) {
-                setPatchedCaretPosition(el, caretPosition, value);
-            }
-            onFocus(e);
-        }, 0);
-    };
-    var _onBlur = function (e) {
-        focusedElm.current = null;
-        clearTimeout(timeout.current.focusTimeout);
-        clearTimeout(timeout.current.setCaretTimeout);
-        onBlur(e);
-    };
-    // add input mode on element based on format prop and device once the component is mounted
-    var inputMode = mounted && addInputMode() ? 'numeric' : undefined;
-    var inputProps = Object.assign({ inputMode: inputMode }, otherProps, {
-        type: type,
-        value: formattedValue,
-        onChange: _onChange,
-        onKeyDown: _onKeyDown,
-        onMouseUp: _onMouseUp,
-        onFocus: _onFocus,
-        onBlur: _onBlur,
-    });
-    if (displayType === 'text') {
-        return renderText ? (React.createElement(React.Fragment, null, renderText(formattedValue, otherProps) || null)) : (React.createElement("span", Object.assign({}, otherProps, { ref: getInputRef }), formattedValue));
-    }
-    else if (customInput) {
-        var CustomInput = customInput;
-        /* @ts-ignore */
-        return React.createElement(CustomInput, Object.assign({}, inputProps, { ref: getInputRef }));
-    }
-    return React.createElement("input", Object.assign({}, inputProps, { ref: getInputRef }));
-}
-function format(numStr, props) {
-    var decimalScale = props.decimalScale;
-    var fixedDecimalScale = props.fixedDecimalScale;
-    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
-    var suffix = props.suffix; if ( suffix === void 0 ) suffix = '';
-    var allowNegative = props.allowNegative; if ( allowNegative === void 0 ) allowNegative = true;
-    var thousandsGroupStyle = props.thousandsGroupStyle; if ( thousandsGroupStyle === void 0 ) thousandsGroupStyle = 'thousand';
-    // don't apply formatting on empty string or '-'
-    if (numStr === '' || numStr === '-') {
-        return numStr;
-    }
-    var ref = getSeparators(props);
-    var thousandSeparator = ref.thousandSeparator;
-    var decimalSeparator = ref.decimalSeparator;
-    /**
-     * Keep the decimal separator
-     * when decimalScale is not defined or non zero and the numStr has decimal in it
-     * Or if decimalScale is > 0 and fixeDecimalScale is true (even if numStr has no decimal)
-     */
-    var hasDecimalSeparator = (decimalScale !== 0 && numStr.indexOf('.') !== -1) || (decimalScale && fixedDecimalScale);
-    var ref$1 = splitDecimal(numStr, allowNegative);
-    var beforeDecimal = ref$1.beforeDecimal;
-    var afterDecimal = ref$1.afterDecimal;
-    var addNegation = ref$1.addNegation; // eslint-disable-line prefer-const
-    //apply decimal precision if its defined
-    if (decimalScale !== undefined) {
-        afterDecimal = limitToScale(afterDecimal, decimalScale, !!fixedDecimalScale);
-    }
-    if (thousandSeparator) {
-        beforeDecimal = applyThousandSeparator(beforeDecimal, thousandSeparator, thousandsGroupStyle);
-    }
-    //add prefix and suffix when there is a number present
-    if (prefix)
-        { beforeDecimal = prefix + beforeDecimal; }
-    if (suffix)
-        { afterDecimal = afterDecimal + suffix; }
-    //restore negation sign
-    if (addNegation)
-        { beforeDecimal = '-' + beforeDecimal; }
-    numStr = beforeDecimal + ((hasDecimalSeparator && decimalSeparator) || '') + afterDecimal;
-    return numStr;
-}
-function getSeparators(props) {
-    var decimalSeparator = props.decimalSeparator; if ( decimalSeparator === void 0 ) decimalSeparator = '.';
-    var thousandSeparator = props.thousandSeparator;
-    var allowedDecimalSeparators = props.allowedDecimalSeparators;
-    if (thousandSeparator === true) {
-        thousandSeparator = ',';
-    }
-    if (!allowedDecimalSeparators) {
-        allowedDecimalSeparators = [decimalSeparator, '.'];
-    }
-    return {
-        decimalSeparator: decimalSeparator,
-        thousandSeparator: thousandSeparator,
-        allowedDecimalSeparators: allowedDecimalSeparators,
-    };
-}
-function handleNegation(value, allowNegative) {
-    if ( value === void 0 ) value = '';
-    var negationRegex = new RegExp('(-)');
-    var doubleNegationRegex = new RegExp('(-)(.)*(-)');
-    // Check number has '-' value
-    var hasNegation = negationRegex.test(value);
-    // Check number has 2 or more '-' values
-    var removeNegation = doubleNegationRegex.test(value);
-    //remove negation
-    value = value.replace(/-/g, '');
-    if (hasNegation && !removeNegation && allowNegative) {
-        value = '-' + value;
-    }
-    return value;
-}
-function getNumberRegex(decimalSeparator, global) {
-    return new RegExp(("(^-)|[0-9]|" + (escapeRegExp(decimalSeparator))), global ? 'g' : undefined);
-}
-function removeFormatting(value, changeMeta, props) {
-    if ( changeMeta === void 0 ) changeMeta = getDefaultChangeMeta(value);
-    var allowNegative = props.allowNegative; if ( allowNegative === void 0 ) allowNegative = true;
-    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
-    var suffix = props.suffix; if ( suffix === void 0 ) suffix = '';
-    var decimalScale = props.decimalScale;
-    var from = changeMeta.from;
-    var to = changeMeta.to;
-    var start = to.start;
-    var end = to.end;
-    var ref = getSeparators(props);
-    var allowedDecimalSeparators = ref.allowedDecimalSeparators;
-    var decimalSeparator = ref.decimalSeparator;
-    var isBeforeDecimalSeparator = value[end] === decimalSeparator;
-    /** Check for any allowed decimal separator is added in the numeric format and replace it with decimal separator */
-    if (end - start === 1 && allowedDecimalSeparators.indexOf(value[start]) !== -1) {
-        var separator = decimalScale === 0 ? '' : decimalSeparator;
-        value = value.substring(0, start) + separator + value.substring(start + 1, value.length);
-    }
-    var hasNegation = false;
-    /**
-     * if prefix starts with - the number hast to have two - at the start
-     * if suffix starts with - and the value length is same as suffix length, then the - sign is from the suffix
-     * In other cases, if the value starts with - then it is a negation
-     */
-    if (prefix.startsWith('-'))
-        { hasNegation = value.startsWith('--'); }
-    else if (suffix.startsWith('-') && value.length === suffix.length)
-        { hasNegation = false; }
-    else if (value[0] === '-')
-        { hasNegation = true; }
-    // remove negation from start to simplify prefix logic as negation comes before prefix
-    if (hasNegation) {
-        value = value.substring(1);
-        // account for the removal of the negation for start and end index
-        start -= 1;
-        end -= 1;
-    }
-    /**
-     * remove prefix
-     * Remove whole prefix part if its present on the value
-     * If the prefix is partially deleted (in which case change start index will be less the prefix length)
-     * Remove only partial part of prefix.
-     */
-    var startIndex = 0;
-    if (value.startsWith(prefix))
-        { startIndex += prefix.length; }
-    else if (start < prefix.length)
-        { startIndex = start; }
-    value = value.substring(startIndex);
-    // account for deleted prefix for end index
-    end -= startIndex;
-    /**
-     * Remove suffix
-     * Remove whole suffix part if its present on the value
-     * If the suffix is partially deleted (in which case change end index will be greater than the suffixStartIndex)
-     * remove the partial part of suffix
-     */
-    var endIndex = value.length;
-    var suffixStartIndex = value.length - suffix.length;
-    if (value.endsWith(suffix))
-        { endIndex = suffixStartIndex; }
-    else if (end > value.length - suffix.length)
-        { endIndex = end; }
-    value = value.substring(0, endIndex);
-    // add the negation back and handle for double negation
-    value = handleNegation(hasNegation ? ("-" + value) : value, allowNegative);
-    // remove non numeric characters
-    value = (value.match(getNumberRegex(decimalSeparator, true)) || []).join('');
-    // replace the decimalSeparator with ., and only keep the first separator, ignore following ones
-    var firstIndex = value.indexOf(decimalSeparator);
-    value = value.replace(new RegExp(escapeRegExp(decimalSeparator), 'g'), function (match, index) {
-        return index === firstIndex ? '.' : '';
-    });
-    //check if beforeDecimal got deleted and there is nothing after decimal,
-    //clear all numbers in such case while keeping the - sign
-    var ref$1 = splitDecimal(value, allowNegative);
-    var beforeDecimal = ref$1.beforeDecimal;
-    var afterDecimal = ref$1.afterDecimal;
-    var addNegation = ref$1.addNegation; // eslint-disable-line prefer-const
-    //clear only if something got deleted before decimal (cursor is before decimal)
-    if (to.end - to.start < from.end - from.start &&
-        beforeDecimal === '' &&
-        isBeforeDecimalSeparator &&
-        !parseFloat(afterDecimal)) {
-        value = addNegation ? '-' : '';
-    }
-    return value;
-}
-function getCaretBoundary(formattedValue, props) {
-    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
-    var suffix = props.suffix; if ( suffix === void 0 ) suffix = '';
-    var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function () { return true; });
-    var hasNegation = formattedValue[0] === '-';
-    // fill for prefix and negation
-    boundaryAry.fill(false, 0, prefix.length + (hasNegation ? 1 : 0));
-    // fill for suffix
-    var valLn = formattedValue.length;
-    boundaryAry.fill(false, valLn - suffix.length + 1, valLn + 1);
-    return boundaryAry;
-}
-function validateProps(props) {
-    var ref = getSeparators(props);
-    var thousandSeparator = ref.thousandSeparator;
-    var decimalSeparator = ref.decimalSeparator;
-    if (thousandSeparator === decimalSeparator) {
-        throw new Error(("\n        Decimal separator can't be same as thousand separator.\n        thousandSeparator: " + thousandSeparator + " (thousandSeparator = {true} is same as thousandSeparator = \",\")\n        decimalSeparator: " + decimalSeparator + " (default value for decimalSeparator is .)\n     "));
-    }
-}
-function useNumericFormat(props) {
-    var decimalSeparator = props.decimalSeparator; if ( decimalSeparator === void 0 ) decimalSeparator = '.';
-    var allowLeadingZeros = props.allowLeadingZeros;
-    var onKeyDown = props.onKeyDown; if ( onKeyDown === void 0 ) onKeyDown = noop;
-    var onBlur = props.onBlur; if ( onBlur === void 0 ) onBlur = noop;
-    var thousandSeparator = props.thousandSeparator;
-    var decimalScale = props.decimalScale;
-    var fixedDecimalScale = props.fixedDecimalScale;
-    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
-    var defaultValue = props.defaultValue;
-    var value = props.value;
-    var valueIsNumericString = props.valueIsNumericString;
-    var onValueChange = props.onValueChange;
-    var restProps = __rest(props, ["decimalSeparator", "allowedDecimalSeparators", "thousandsGroupStyle", "suffix", "allowNegative", "allowLeadingZeros", "onKeyDown", "onBlur", "thousandSeparator", "decimalScale", "fixedDecimalScale", "prefix", "defaultValue", "value", "valueIsNumericString", "onValueChange"]);
-    // validate props
-    validateProps(props);
-    var _format = function (numStr) { return format(numStr, props); };
-    var _removeFormatting = function (inputValue, changeMeta) { return removeFormatting(inputValue, changeMeta, props); };
-    var _valueIsNumericString = valueIsNumericString;
-    if (!isNil(value)) {
-        _valueIsNumericString = valueIsNumericString !== null && valueIsNumericString !== void 0 ? valueIsNumericString : typeof value === 'number';
-    }
-    else if (!isNil(defaultValue)) {
-        _valueIsNumericString = valueIsNumericString !== null && valueIsNumericString !== void 0 ? valueIsNumericString : typeof defaultValue === 'number';
-    }
-    var roundIncomingValueToPrecision = function (value) {
-        if (isNil(value) || isNanValue(value))
-            { return value; }
-        if (typeof value === 'number') {
-            value = toNumericString(value);
-        }
-        /**
-         * only round numeric or float string values coming through props,
-         * we don't need to do it for onChange events, as we want to prevent typing there
-         */
-        if (_valueIsNumericString && typeof decimalScale === 'number') {
-            return roundToPrecision(value, decimalScale, Boolean(fixedDecimalScale));
-        }
-        return value;
-    };
-    var ref = useInternalValues(roundIncomingValueToPrecision(value), roundIncomingValueToPrecision(defaultValue), Boolean(_valueIsNumericString), _format, _removeFormatting, onValueChange);
-    var ref_0 = ref[0];
-    var numAsString = ref_0.numAsString;
-    var formattedValue = ref_0.formattedValue;
-    var _onValueChange = ref[1];
-    var _onKeyDown = function (e) {
-        var el = e.target;
-        var key = e.key;
-        var selectionStart = el.selectionStart;
-        var selectionEnd = el.selectionEnd;
-        var value = el.value; if ( value === void 0 ) value = '';
-        // if multiple characters are selected and user hits backspace, no need to handle anything manually
-        if (selectionStart !== selectionEnd) {
-            onKeyDown(e);
-            return;
-        }
-        // if user hits backspace, while the cursor is before prefix, and the input has negation, remove the negation
-        if (key === 'Backspace' && value[0] === '-' && selectionStart === prefix.length + 1) {
-            // bring the cursor to after negation
-            setCaretPosition(el, 1);
-        }
-        // don't allow user to delete decimal separator when decimalScale and fixedDecimalScale is set
-        var ref = getSeparators(props);
-        var decimalSeparator = ref.decimalSeparator;
-        var allowedDecimalSeparators = ref.allowedDecimalSeparators;
-        if (key === 'Backspace' &&
-            value[selectionStart - 1] === decimalSeparator &&
-            decimalScale &&
-            fixedDecimalScale) {
-            setCaretPosition(el, selectionStart - 1);
-            e.preventDefault();
-        }
-        // if user presses the allowed decimal separator before the separator, move the cursor after the separator
-        if ((allowedDecimalSeparators === null || allowedDecimalSeparators === void 0 ? void 0 : allowedDecimalSeparators.includes(key)) && value[selectionStart] === decimalSeparator) {
-            setCaretPosition(el, selectionStart + 1);
-        }
-        var _thousandSeparator = thousandSeparator === true ? ',' : thousandSeparator;
-        // move cursor when delete or backspace is pressed before/after thousand separator
-        if (key === 'Backspace' && value[selectionStart - 1] === _thousandSeparator) {
-            setCaretPosition(el, selectionStart - 1);
-        }
-        if (key === 'Delete' && value[selectionStart] === _thousandSeparator) {
-            setCaretPosition(el, selectionStart + 1);
-        }
-        onKeyDown(e);
-    };
-    var _onBlur = function (e) {
-        var _value = numAsString;
-        // if there no no numeric value, clear the input
-        if (!_value.match(/\d/g)) {
-            _value = '';
-        }
-        // clear leading 0s
-        if (!allowLeadingZeros) {
-            _value = fixLeadingZero(_value);
-        }
-        // apply fixedDecimalScale on blur event
-        if (fixedDecimalScale && decimalScale) {
-            _value = roundToPrecision(_value, decimalScale, fixedDecimalScale);
-        }
-        if (_value !== numAsString) {
-            var formattedValue = format(_value, props);
-            _onValueChange({
-                formattedValue: formattedValue,
-                value: _value,
-                floatValue: parseFloat(_value),
-            }, {
-                event: e,
-                source: SourceType.event,
-            });
-        }
-        onBlur(e);
-    };
-    var isValidInputCharacter = function (inputChar) {
-        if (inputChar === decimalSeparator)
-            { return true; }
-        return charIsNumber(inputChar);
-    };
-    return Object.assign(Object.assign({}, restProps), { value: formattedValue, valueIsNumericString: false, isValidInputCharacter: isValidInputCharacter, onValueChange: _onValueChange, format: _format, removeFormatting: _removeFormatting, getCaretBoundary: function (formattedValue) { return getCaretBoundary(formattedValue, props); }, onKeyDown: _onKeyDown, onBlur: _onBlur });
-}
-function NumericFormat(props) {
-    var numericFormatProps = useNumericFormat(props);
-    return React.createElement(NumberFormatBase, Object.assign({}, numericFormatProps));
-}
 const TextWidgetBase = ({
   id,
   onChange,
@@ -20375,5 +19981,5 @@ const DynamicFormHooks = {
   useReadOnly
 };
-export { Actions$1 as Actions, Alert, AvatarBox, AvatarTitle, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ContentBox, CoreProvider, CurriculumChart, DataTable, DatePickerBase as DatePicker, DisplayInFrame, DocViewer, Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableText, FilterPanel, FilterChips$1 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FullPageViewer, Icon$1 as Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable, RubricDistributionChart, RubricLegend, RubricScoreSlider, ScrollToTopButton, ScrollingContainer, SkeletonContent, StatBoxes, StatusMessage, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, Timeline, TitleAndActionHeader, TitleAndDescription, UserAvatar, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
+export { Actions$1 as Actions, Alert, AvatarBox, AvatarTitle, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ContentBox, CoreProvider, CurriculumChart, DataTable, DatePickerBase as DatePicker, DisplayInFrame, DocViewer, Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableText, FilterPanel, FilterChips$1 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FullPageViewer, Icon$1 as Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable, RubricDistributionChart, RubricLegend, RubricScoreSlider, ScrollToTopButton, ScrollingContainer, SkeletonContent, StatBoxes, StatusMessage, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, TextBuilder, Timeline, TitleAndActionHeader, TitleAndDescription, UserAvatar, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
 //# sourceMappingURL=index.modern.js.map