aefis-core-ui 2.1.14 → 2.1.16

package/dist/index.modern.js

@@ -75,7 +75,7 @@ import get$1 from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import isEmpty from 'lodash/isEmpty';
 import ToggleButton$1 from '@mui/material/ToggleButton';
-import { parse as parse$1, format, setDate, setMonth } from 'date-fns';
+import { parse as parse$1, format as format$1, 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';
@@ -1675,12 +1675,12 @@ const LegacyButtonTheme = createTheme(theme, {
   }
 });
 
-const _excluded$j = ["name"];
+const _excluded$k = ["name"];
 const Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
   let {
       name
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   const isColorDefault = props.color === undefined || props.color === "default";
   const colorThemeName = isColorDefault ? "grey" : props.color;
   const theme = useTheme$1();
@@ -1773,7 +1773,7 @@ AnimatedExpandMoreIcon.propTypes = {
   sx: PropTypes.any
 };
 
-const _excluded$i = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
+const _excluded$j = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
 const AefisButton = withStyles$1({
   root: {
     "&:focus": {
@@ -1795,7 +1795,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
       onClick,
       link
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClick = (event, link, buttonId) => {
     setAnchorEl(event.currentTarget);
@@ -3422,7 +3422,7 @@ CardSectionTitle$1.propTypes = {
   title: PropTypes.string
 };
 
-const _excluded$h = ["title", "children", "height", "titleComponent"];
+const _excluded$i = ["title", "children", "height", "titleComponent"];
 const CardSection$1 = _ref => {
   let {
       title,
@@ -3430,7 +3430,7 @@ const CardSection$1 = _ref => {
       height,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/jsxs(Box$1, _extends({
     sx: {
       height: height || "inherit"
@@ -3530,7 +3530,7 @@ SvgImage.propTypes = {
   width: PropTypes.any
 };
 
-const _excluded$g = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
+const _excluded$h = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
   _excluded2$1 = ["src", "extension"];
 const RenderImage = _ref => {
   let {
@@ -3542,7 +3542,7 @@ const RenderImage = _ref => {
       showSkeleton,
       fallbackImage
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   const altText = decorative ? "" : description;
   const role = decorative ? "presentation" : "img";
   const hidden = !!decorative;
@@ -3620,7 +3620,7 @@ Image.propTypes = {
   extension: PropTypes.string
 };
 
-const _excluded$f = ["type"];
+const _excluded$g = ["type"];
 const imageProps = {
   award: Award,
   building: Building,
@@ -3646,7 +3646,7 @@ const IsometricImage = _ref => {
   let {
       type
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   const image = getIsometricImage(type);
   return /*#__PURE__*/jsx(Image, _extends({
     src: image
@@ -4410,13 +4410,13 @@ BusinessObjectCard.propTypes = {
   autoTruncateDescription: PropTypes.bool
 };
 
-const _excluded$e = ["enableScrollTop", "containerProps"];
+const _excluded$f = ["enableScrollTop", "containerProps"];
 const SwipeableViews = _ref => {
   let {
       enableScrollTop = true,
       containerProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   const containerRef = containerProps.ref || useRef();
   useEffect(() => {
     if (enableScrollTop) {
@@ -5054,7 +5054,7 @@ SectionTitle.propTypes = {
   component: PropTypes.string
 };
 
-const _excluded$d = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
+const _excluded$e = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
 const Section = _ref => {
   let {
       title,
@@ -5065,7 +5065,7 @@ const Section = _ref => {
       renderList,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const containerStyle = {
     boxSizing: "border-box",
     width: "100%",
@@ -5701,7 +5701,7 @@ FullPageViewer.propTypes = {
   onMessage: PropTypes.func
 };
 
-const _excluded$c = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
+const _excluded$d = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
 const useStyles$w = makeStyles(() => ({
   scroller: {
     position: "relative",
@@ -5774,7 +5774,7 @@ const ScrollingContainer = _ref => {
       onScrollReachStart,
       onScrollReachEnd
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const classes = useStyles$w();
   const [scrolled, setScrolled] = useState(false);
   const rootStyle = {
@@ -7530,7 +7530,7 @@ var dataSourceManager = {
   getDataSourceUrl: getDataSourceUrl
 };
 
-const _excluded$b = ["clearOnChange", "minimumLength"];
+const _excluded$c = ["clearOnChange", "minimumLength"];
 const WAIT_INTERVAL = 1000;
 const ENTER_KEY = 13;
 const TextSearch$1 = _ref => {
@@ -7538,7 +7538,7 @@ const TextSearch$1 = _ref => {
       clearOnChange,
       minimumLength
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const [value, setValue] = useState("");
   const [timer, setTimer] = useState(null);
   const handleChange = e => {
@@ -7730,7 +7730,7 @@ const mapFilters = newFilters => {
   return mappedFilters;
 };
 
-const _excluded$a = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
+const _excluded$b = ["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)"
@@ -7751,7 +7751,7 @@ const NestedMenuItem = /*#__PURE__*/React.forwardRef(function NestedMenuItem(pro
       tabIndex: tabIndexProp,
       ContainerProps: ContainerPropsProp = {}
     } = props,
-    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$a);
+    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$b);
   const {
       ref: containerRefProp
     } = ContainerPropsProp,
@@ -9027,12 +9027,12 @@ Actions.propTypes = {
   onAction: PropTypes.func
 };
 
-const _excluded$9 = ["hasFilters"];
+const _excluded$a = ["hasFilters"];
 const RenderFilterButton = /*#__PURE__*/React.forwardRef(function RenderFilterButton(_ref, ref) {
   let {
       hasFilters
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/jsx(IconButton$1, _extends({}, props, {
     ref: ref,
     children: /*#__PURE__*/jsx(Badge, {
@@ -9125,7 +9125,7 @@ DefaultIconButton.propTypes = {
   onClick: PropTypes.func
 };
 
-const _excluded$8 = ["filterSet", "onClick", "disableSetDefault", "index"];
+const _excluded$9 = ["filterSet", "onClick", "disableSetDefault", "index"];
 const useStyles$m = makeStyles(theme => ({
   operations: {
     display: "flex",
@@ -9197,7 +9197,7 @@ const Item$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   const {
     id,
     disabled,
@@ -9253,7 +9253,7 @@ const renderUserDefinedFilters = ({
   index: index
 }, `user-defined-filters-${index}`));
 
-const _excluded$7 = ["filterSet", "onClick", "disableSetDefault", "index"];
+const _excluded$8 = ["filterSet", "onClick", "disableSetDefault", "index"];
 const useStyles$l = makeStyles(() => ({
   operations: {
     display: "flex",
@@ -9295,7 +9295,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const {
     id,
     disabled,
@@ -10447,7 +10447,7 @@ const getInfoTextByFilterAndSortingCount = (filterCount, sortCount) => {
   return `${appliedText} applied to the data`;
 };
 
-const _excluded$6 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
+const _excluded$7 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
 const useDidMount = () => {
   const didMountRef = useRef(false);
   useEffect(() => {
@@ -10562,7 +10562,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       hasNextPage,
       refetch
     } = _useDataSourceInfinit;
-    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$6);
+    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$7);
   const isError = useIsError(status);
   const renderReTryButton = useCallback(status => /*#__PURE__*/jsx(Button, {
     onClick: () => refetch(),
@@ -10935,7 +10935,7 @@ const {
   withEvent: withBOPEvent
 } = createComponentEvent();
 
-const _excluded$5 = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
+const _excluded$6 = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
 const useDialogOpenEventListener$1 = cb => useBOPEventlistener(event => {
   if (event.name === events.OPEN_ENHANCED_SEARCH_DIALOG) cb(event.payload);
 });
@@ -10949,7 +10949,7 @@ const EnhancedSearchDialog = _ref => {
       dataSource,
       confirmButtonText
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const [selection, setSelection] = useState([]);
   const [open, setOpen] = useState(false);
   useDialogOpenEventListener$1(isOpen => setOpen(isOpen));
@@ -11066,7 +11066,7 @@ const useDependencyChange = (callback, currentState) => {
   }
 };
 
-const _excluded$4 = ["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$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 useStyles$f = makeStyles(theme => ({
   menu: {
     textDecoration: "none",
@@ -11129,7 +11129,7 @@ const BusinessObjectPicker = _ref => {
       AddItemFormModalComponent,
       autoCompleteProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   const classes = useStyles$f();
   // TODO: implement controlled behaviour
   const [value, setValue] = useAutoCompleteValue(props.value, multiple);
@@ -12515,7 +12515,7 @@ CurriculumChart.propTypes = {
   onLoad: PropTypes.func
 };
 
-const _excluded$3 = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
+const _excluded$4 = ["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) {
@@ -12555,7 +12555,7 @@ const DatePickerBase = _ref => {
       maximumDate,
       inputEndAdornmentText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const [value, setValue] = useFormItemState(propsValue, isControlled);
   const handleChange = newValue => {
     !isControlled && setValue(newValue);
@@ -15795,8 +15795,8 @@ ToggleButtonWidget.propTypes = {
   label: PropTypes.any
 };
 ToggleButtonWidget.defaultProps = {};
-const HOCs$d = [...commonWidgetHOCs];
-var ToggleButtonWidget$1 = compose(HOCs$d)(ToggleButtonWidget);
+const HOCs$e = [...commonWidgetHOCs];
+var ToggleButtonWidget$1 = compose(HOCs$e)(ToggleButtonWidget);
 
 const DefaultReadOnly = props => {
   return /*#__PURE__*/jsxs(Fragment, {
@@ -15848,7 +15848,7 @@ const withReadyOnly = (ReadOnlyComponent = DefaultReadOnly, options = {
   };
 };
 
-const _excluded$2 = ["value", "inputValue", "onChange", "options", "defaultValue", "onCreateOption", "onDebouncedInputChange", "loading", "status", "optionKey", "createOptionItem", "loadingCreateOption", "onOpen", "createOptionStatus", "disableArrowIcon", "searchCharacterLimit"];
+const _excluded$3 = ["value", "inputValue", "onChange", "options", "defaultValue", "onCreateOption", "onDebouncedInputChange", "loading", "status", "optionKey", "createOptionItem", "loadingCreateOption", "onOpen", "createOptionStatus", "disableArrowIcon", "searchCharacterLimit"];
 const useStyles$2 = makeStyles(theme => ({
   expand: {
     transform: "rotate(180deg)",
@@ -15908,7 +15908,7 @@ const AutoCompleteBase = /*#__PURE__*/forwardRef(function AutoCompleteBase(props
       disableArrowIcon,
       searchCharacterLimit = 0
     } = props,
-    restOfProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+    restOfProps = _objectWithoutPropertiesLoose(props, _excluded$3);
   const classes = useStyles$2();
   const [value, setValue] = useState(defaultValue || valueProp || []);
   const [inputValue, setInputValue] = useState(inputValueProp);
@@ -16354,8 +16354,8 @@ BadgeKeywordField.propTypes = {
   isReadOnly: PropTypes.bool,
   disabled: PropTypes.bool
 };
-const HOCs$c = [...commonFieldHOCs, withReadyOnly(BadgeKeywordFieldReadOnly)];
-var BadgeKeywordField$1 = compose(HOCs$c)(BadgeKeywordField);
+const HOCs$d = [...commonFieldHOCs, withReadyOnly(BadgeKeywordFieldReadOnly)];
+var BadgeKeywordField$1 = compose(HOCs$d)(BadgeKeywordField);
 
 const ReadOnlyView = ({
   label,
@@ -16390,7 +16390,12 @@ const ReadOnlyView = ({
         sx: {
           fontStyle: "italic"
         },
-        description: _emptyViewText,
+        description: /*#__PURE__*/jsx(Box$2, {
+          sx: {
+            paddingRight: 1
+          },
+          children: _emptyViewText
+        }),
         showIcon: false
       });
     }
@@ -16555,10 +16560,10 @@ BusinessObjectPickerField.propTypes = {
   onChange: PropTypes.func
 };
 BusinessObjectPickerField.defaultProps = {};
-const HOCs$b = [...commonFieldHOCs, withReadyOnly(BusinessObjectPickerFieldReadOnly)];
-var BusinessObjectPickerField$1 = compose(HOCs$b)(BusinessObjectPickerField);
+const HOCs$c = [...commonFieldHOCs, withReadyOnly(BusinessObjectPickerFieldReadOnly)];
+var BusinessObjectPickerField$1 = compose(HOCs$c)(BusinessObjectPickerField);
 
-const _excluded$1 = ["minimumDate", "maximumDate"],
+const _excluded$2 = ["minimumDate", "maximumDate"],
   _excluded2 = ["minimumDate", "maximumDate"];
 const getDate$1 = dateStr => {
   try {
@@ -16654,7 +16659,7 @@ const DateRangeField = ({
       minimumDate: startDateMinDate,
       maximumDate: startDateMaxDate
     } = _ref,
-    startDateProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    startDateProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const _ref2 = (uiSchema == null ? void 0 : uiSchema["ui:endDateProps"]) || {},
     {
       minimumDate: endDateMinDate,
@@ -16704,8 +16709,8 @@ DateRangeField.propTypes = {
   required: PropTypes.bool,
   value: PropTypes.any
 };
-const HOCs$a = [...commonFieldHOCs, withReadyOnly(DateSelectReadOnly$2)];
-var DateRangeField$1 = compose(HOCs$a)(DateRangeField);
+const HOCs$b = [...commonFieldHOCs, withReadyOnly(DateSelectReadOnly$2)];
+var DateRangeField$1 = compose(HOCs$b)(DateRangeField);
 
 const useReadOnly = uiSchema => {
   const code = uiSchema == null ? void 0 : uiSchema["eval:readonly"];
@@ -16828,9 +16833,9 @@ const DateSelect = props => {
     if (newDateType != null) {
       setDateType(newDateType);
       if (typeof selectedDate !== "undefined" && selectedDate != null) {
-        format(selectedDate, serverSideDateFormat);
+        format$1(selectedDate, serverSideDateFormat);
         onChange({
-          date: format(selectedDate, serverSideDateFormat),
+          date: format$1(selectedDate, serverSideDateFormat),
           type: newDateType.type
         });
       }
@@ -16846,7 +16851,7 @@ const DateSelect = props => {
       }
       setSelectedDate(newDate);
       onChange({
-        date: format(newDate, serverSideDateFormat),
+        date: format$1(newDate, serverSideDateFormat),
         type: dateType.type
       });
     } else {
@@ -17167,8 +17172,8 @@ Upload.propTypes = {
   acceptedFileTypes: PropTypes.array
 };
 
-const HOCs$9 = [...commonFieldHOCs];
-var UploadField = compose(HOCs$9)(Upload);
+const HOCs$a = [...commonFieldHOCs];
+var UploadField = compose(HOCs$a)(Upload);
 
 const renderUserIcon = userType => {
   let iconButton;
@@ -17524,8 +17529,8 @@ const LinkUserFieldReadOnly = props => {
     })]
   });
 };
-const HOCs$8 = [...commonFieldHOCs, withReadyOnly(LinkUserFieldReadOnly)];
-var LinkUserField$1 = compose(HOCs$8)(LinkUserField);
+const HOCs$9 = [...commonFieldHOCs, withReadyOnly(LinkUserFieldReadOnly)];
+var LinkUserField$1 = compose(HOCs$9)(LinkUserField);
 
 const withEvalDisable = () => Component => {
   const MemoizedComponent = /*#__PURE__*/React.memo(Component);
@@ -17844,8 +17849,8 @@ SelectField.propTypes = {
   value: PropTypes.any,
   disabled: PropTypes.any
 };
-const HOCs$7 = [...commonWidgetHOCs, withEvalDisable()];
-var SelectField$1 = compose(HOCs$7)(SelectField);
+const HOCs$8 = [...commonWidgetHOCs, withEvalDisable()];
+var SelectField$1 = compose(HOCs$8)(SelectField);
 
 // TODO: refactor usage of readonly
 // use the similar usage on each implementation
@@ -18066,8 +18071,8 @@ ArrayTemplateWithReadOnly.propTypes = {
   items: PropTypes.any,
   schema: PropTypes.any
 };
-const HOCs$6 = [withReadyOnly(ArrayTemplateWithReadOnly)];
-var ArrayFieldTemplate$1 = compose(HOCs$6)(ArrayFieldTemplate);
+const HOCs$7 = [withReadyOnly(ArrayTemplateWithReadOnly)];
+var ArrayFieldTemplate$1 = compose(HOCs$7)(ArrayFieldTemplate);
 
 // export default withReadyOnly(ArrayFieldTemplate, ArrayTemplateWithReadOnly);
 
@@ -18237,8 +18242,8 @@ DateWidgetRaw.propTypes = {
   required: PropTypes.bool,
   value: PropTypes.any
 };
-const HOCs$5 = [...commonWidgetHOCs, withReadyOnly(DateSelectReadOnly)];
-const DateWidget = compose(HOCs$5)(DateWidgetRaw);
+const HOCs$6 = [...commonWidgetHOCs, withReadyOnly(DateSelectReadOnly)];
+const DateWidget = compose(HOCs$6)(DateWidgetRaw);
 
 const getError$1 = errors => {
   if (errors) {
@@ -18255,9 +18260,9 @@ const getError$1 = errors => {
   return null;
 };
 
-const _excluded = ["inputRef"];
+const _excluded$1 = ["inputRef"];
 const TextMaskCustom = /*#__PURE__*/forwardRef((props, ref) => {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const other = _objectWithoutPropertiesLoose(props, _excluded$1);
   const placeholderChar = "\u2000";
   const pipe = (conformedValue, config) => {
     var indexes = [1, 2, 3, 6, 7, 8, 10, 11, 12, 13];
@@ -18362,8 +18367,1198 @@ const PhoneWidgetReadOnly = props => {
     })]
   });
 };
-const HOCs$4 = [...commonWidgetHOCs, withReadyOnly(PhoneWidgetReadOnly)];
-var PhoneWidget$1 = compose(HOCs$4)(PhoneWidget);
+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,
+  readonly,
+  options: _options = {},
+  disabled,
+  required,
+  value,
+  uiSchema: _uiSchema = {},
+  schema: _schema = {},
+  overrideProps: _overrideProps = i => i
+}) => {
+  var _uiSchema$uiOptions;
+  // INFO: debouncing added for performance concerns
+  const handleChange = useDebounceCallback(e => {
+    onChange(e.target.value || undefined);
+  }, 100);
+  const {
+    error
+  } = useFormControl();
+  const message = ((_uiSchema$uiOptions = _uiSchema["ui:options"]) == null ? void 0 : _uiSchema$uiOptions.message) || undefined;
+  const messageProps = {
+    title: (message == null ? void 0 : message.title) || undefined,
+    description: (message == null ? void 0 : message.description) || undefined,
+    type: (message == null ? void 0 : message.type) || "info",
+    canDismiss: (message == null ? void 0 : message.canDismiss) || true
+  };
+  const {
+    format: type,
+    placeholder,
+    title: label
+  } = _schema;
+  const InputProps = {
+    readOnly: readonly,
+    startAdornment: _options.prefix ? /*#__PURE__*/jsx(InputAdornment, {
+      position: "start",
+      style: {
+        fontSize: 14
+      },
+      children: _options.prefix
+    }) : null,
+    endAdornment: _options.suffix ? /*#__PURE__*/jsx(InputAdornment, {
+      position: "end",
+      style: {
+        fontSize: 14
+      },
+      children: _options.suffix
+    }) : null
+  };
+  const componentProps = _extends({
+    id,
+    error,
+    disabled,
+    label,
+    placeholder,
+    required,
+    // INFO: for performance concerns, textfield is NOT controlled field.
+    // This will prevent his field to be changed outside of once concurrency
+    // pattern implemented with React 18, it can be controlled as other
+    // fields value={props.value || ""} onChange={(event) =>
+    // props.onChange(event.target.value || null)} value: props.value,
+    defaultValue: value,
+    onChange: handleChange,
+    autoComplete: "off",
+    variant: "outlined",
+    InputProps,
+    sx: {
+      width: "100%"
+    },
+    type
+  }, _uiSchema["ui:props"]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TextField, _extends({}, _overrideProps(componentProps))), message && /*#__PURE__*/jsx(Alert, _extends({
+      sx: {
+        mt: 1
+      }
+    }, messageProps))]
+  });
+};
+TextWidgetBase.propTypes = {
+  disabled: PropTypes.any,
+  id: PropTypes.any,
+  onChange: PropTypes.func,
+  options: PropTypes.shape({
+    prefix: PropTypes.any,
+    suffix: PropTypes.any
+  }),
+  rawErrors: PropTypes.array,
+  readonly: PropTypes.any,
+  required: PropTypes.bool,
+  schema: PropTypes.shape({
+    format: PropTypes.any,
+    placeholder: PropTypes.any,
+    title: PropTypes.any
+  }),
+  uiSchema: PropTypes.any,
+  value: PropTypes.any,
+  overrideProps: PropTypes.func
+};
+
+const _excluded = ["onChange"];
+const TextWidgetReadOnly$1 = props => {
+  const {
+    options: {
+      prefix = "$",
+      decimalScale = 2,
+      thousandSeparator = ",",
+      decimalSeparator = ".",
+      allowNegative = true
+    }
+  } = props;
+  const {
+    value
+  } = useNumericFormat({
+    value: props.value,
+    decimalScale,
+    thousandSeparator,
+    decimalSeparator,
+    allowNegative
+  });
+  const formattedValue = `${prefix === null ? "" : prefix}${value}`;
+  const _value = props.value == undefined ? props.value : formattedValue;
+  return /*#__PURE__*/jsx(ReadOnlyView, {
+    label: props.schema.title,
+    value: _value
+  });
+};
+TextWidgetReadOnly$1.propTypes = {
+  schema: PropTypes.any,
+  value: PropTypes.any
+};
+const CurrencyWidget = props => {
+  var _options$prefix;
+  const {
+    options
+  } = props;
+  const prefix = (_options$prefix = options.prefix) != null ? _options$prefix : "$";
+  const {
+    options: {
+      // INFO: default values
+      decimalScale = 2,
+      thousandSeparator = ",",
+      decimalSeparator = ".",
+      allowNegative = true
+    }
+  } = props;
+  const NumberFormatCustom = useMemo(() => {
+    return /*#__PURE__*/React.forwardRef(function NumberFormatCustom(props, ref) {
+      const {
+          onChange
+        } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded);
+      return /*#__PURE__*/jsx(NumericFormat, _extends({}, rest, {
+        getInputRef: ref,
+        onValueChange: values => {
+          onChange({
+            target: {
+              name: props.name,
+              value: values.value
+            }
+          });
+        },
+        decimalScale: decimalScale,
+        fixedDecimalScale: decimalScale,
+        thousandSeparator: thousandSeparator,
+        decimalSeparator: decimalSeparator,
+        allowNegative: allowNegative,
+        placeholder: props.placeholder
+      }));
+    });
+  }, [decimalScale, thousandSeparator, decimalSeparator, allowNegative]);
+  const overrideProps = _props => {
+    return _extends({}, _props, {
+      InputProps: _extends({}, props.InputProps, {
+        inputComponent: NumberFormatCustom,
+        startAdornment: prefix ? /*#__PURE__*/jsx(InputAdornment, {
+          position: "start",
+          style: {
+            fontSize: 14
+          },
+          children: options.prefix
+        }) : null
+      })
+    });
+  };
+  return /*#__PURE__*/jsx(TextWidgetBase, _extends({}, props, {
+    overrideProps: overrideProps
+  }));
+};
+CurrencyWidget.propTypes = TextWidgetBase.propTypes;
+const HOCs$4 = [...commonWidgetHOCs, withReadyOnly(TextWidgetReadOnly$1), withEvalDisable()];
+var CurrencyWidget$1 = compose(HOCs$4)(CurrencyWidget);
 
 const decodeHtml = html => {
   const textarea = document.createElement("textarea");
@@ -18525,69 +19720,20 @@ const TextareaWidgetReadOnly = props => /*#__PURE__*/jsx(ReadOnlyView, {
   label: props.schema.title,
   value: props.value
 });
-const TextareaWidget = props => {
-  // INFO: debouncing added for performance concerns
-  const handleChange = useDebounceCallback(e => {
-    props.onChange(e.target.value || undefined);
-  }, 100);
-  const {
-    error
-  } = useFormControl();
-  return /*#__PURE__*/jsx(TextField, {
-    id: props.id,
-    error: error,
-    disabled: props.disabled,
-    label: props.schema.title,
-    required: props.required,
-    defaultValue: props.value
-    // INFO: for performance concerns, textfield is NOT controlled field. This will prevent his field to be changed outside of
-    // Once concurrency pattern implemented with React 18, it can be
-    // controlled as other fields value={props.value || ""}
-    // onChange={(event) => props.onChange(event.target.value || null)}
-    ,
-    onChange: handleChange,
-    autoComplete: "off",
-    variant: "outlined",
-    InputProps: {
-      startAdornment: props.schema.prefix ? /*#__PURE__*/jsx(InputAdornment, {
-        position: "start",
-        style: {
-          fontSize: 12
-        },
-        children: props.schema.prefix
-      }) : null,
-      endAdornment: props.schema.suffix ? /*#__PURE__*/jsx(InputAdornment, {
-        position: "end",
-        style: {
-          fontSize: 12
-        },
-        children: props.schema.suffix
-      }) : null
-    },
-    sx: {
-      width: "100%"
-    },
-    type: props.schema.format,
-    placeholder: props.schema.placeholder,
-    multiline: true,
-    rows: 5
-  });
+TextareaWidgetReadOnly.propTypes = {
+  schema: PropTypes.any,
+  value: PropTypes.any
 };
-TextareaWidget.propTypes = {
-  id: PropTypes.any,
-  onChange: PropTypes.func,
-  rawErrors: PropTypes.array,
-  disabled: PropTypes.bool,
-  required: PropTypes.any,
-  schema: PropTypes.shape({
-    disabled: PropTypes.any,
-    format: PropTypes.any,
-    placeholder: PropTypes.any,
-    prefix: PropTypes.any,
-    suffix: PropTypes.any,
-    title: PropTypes.any
-  }),
-  value: PropTypes.string
+const TextareaWidget = props => {
+  const overrideProps = useCallback(rest => {
+    return _extends({}, rest, {
+      multiline: true,
+      rows: 5
+    });
+  }, []);
+  return /*#__PURE__*/jsx(TextWidgetBase, _extends({}, props, {
+    overrideProps: overrideProps
+  }));
 };
 const HOCs$2 = [...commonWidgetHOCs, withReadyOnly(TextareaWidgetReadOnly)];
 var TextareaWidget$1 = compose(HOCs$2)(TextareaWidget);
@@ -18600,92 +19746,9 @@ TextWidgetReadOnly.propTypes = {
   schema: PropTypes.any,
   value: PropTypes.any
 };
-const TextWidget = props => {
-  var _props$uiSchema$uiOp;
-  // INFO: debouncing added for performance concerns
-  const handleChange = useDebounceCallback(e => {
-    props.onChange(e.target.value || undefined);
-  }, 100);
-  const {
-    error
-  } = useFormControl();
-  const message = ((_props$uiSchema$uiOp = props.uiSchema["ui:options"]) == null ? void 0 : _props$uiSchema$uiOp.message) || undefined;
-  const messageProps = {
-    title: (message == null ? void 0 : message.title) || undefined,
-    description: (message == null ? void 0 : message.description) || undefined,
-    type: (message == null ? void 0 : message.type) || "info",
-    canDismiss: (message == null ? void 0 : message.canDismiss) || true
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(TextField, {
-      id: props.id,
-      error: error,
-      disabled: props.disabled,
-      label: props.schema.title,
-      required: props.required,
-      defaultValue: props.value
-      // value={props.value}
-      // INFO: for performance concerns, textfield is NOT controlled field. This will prevent his field to be changed outside of
-      // Once concurrency pattern implemented with React 18, it can be
-      // controlled as other fields value={props.value || ""}
-      // onChange={(event) => props.onChange(event.target.value || null)}
-      ,
-      onChange: handleChange,
-      autoComplete: "off",
-      variant: "outlined",
-      InputProps: {
-        readOnly: props.readonly,
-        startAdornment: props.options.prefix ? /*#__PURE__*/jsx(InputAdornment, {
-          position: "start",
-          style: {
-            fontSize: 14
-          },
-          children: props.options.prefix
-        }) : null,
-        endAdornment: props.options.suffix ? /*#__PURE__*/jsx(InputAdornment, {
-          position: "end",
-          style: {
-            fontSize: 14
-          },
-          children: props.options.suffix
-        }) : null
-      },
-      sx: {
-        width: "100%"
-      },
-      type: props.schema.format,
-      placeholder: props.schema.placeholder
-    }), message && /*#__PURE__*/jsx(Alert, _extends({
-      sx: {
-        mt: 1
-      }
-    }, messageProps))]
-  });
-};
-TextWidget.defaultProps = {
-  uiSchema: {}
-};
-TextWidget.propTypes = {
-  disabled: PropTypes.any,
-  id: PropTypes.any,
-  onChange: PropTypes.func,
-  options: PropTypes.shape({
-    prefix: PropTypes.any,
-    suffix: PropTypes.any
-  }),
-  rawErrors: PropTypes.array,
-  readonly: PropTypes.any,
-  required: PropTypes.bool,
-  schema: PropTypes.shape({
-    format: PropTypes.any,
-    placeholder: PropTypes.any,
-    title: PropTypes.any
-  }),
-  uiSchema: PropTypes.any,
-  value: PropTypes.any
-};
 const HOCs$1 = [...commonWidgetHOCs, withReadyOnly(TextWidgetReadOnly), withEvalDisable()];
-var TextWidget$1 = compose(HOCs$1)(TextWidget);
+const TextWidget = compose(HOCs$1)(TextWidgetBase);
+TextWidget.PropTypes = TextWidgetBase.PropTypes;
 
 const getError = errors => {
   if (errors) {
@@ -18826,11 +19889,12 @@ const defaultWidgets = {
   toggleButton: ToggleButtonWidget$1,
   select: SelectWidget$1,
   LinkedSelects: SelectWidget$1,
-  TextWidget: TextWidget$1,
+  TextWidget: TextWidget,
   TextareaWidget: TextareaWidget$1,
   PhoneWidget: PhoneWidget$1,
   ValidateWidget: ValidateWidget$1,
-  DateWidget
+  DateWidget,
+  CurrencyWidget: CurrencyWidget$1
   // CheckboxWidget
 };