@pdg/react-form 1.0.56 → 1.0.58

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper,Menu}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker}from'@mui/x-date-pickers';/******************************************************************************
+import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper,Menu}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -2193,8 +2193,8 @@ FormFooter.defaultProps = FormFooterDefaultProps;var FormTextFieldDefaultProps =
   } else {
     style.appendChild(document.createTextNode(css));
   }
-}var css_248z$j = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
-styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (_a, ref) {
+}var css_248z$l = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
+styleInject(css_248z$l);var FormTextField = React__default.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var _b;
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
@@ -2500,28 +2500,19 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
     return (React__default.createElement(TextField, __assign$7({}, props, { variant: variant, size: size, color: color, focused: focused || undefined, name: name, label: label, placeholder: placeholder, className: classNames$1(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : helperText, FormHelperTextProps: { component: 'div' }, disabled: disabled, InputProps: muiInputProps, InputLabelProps: muiInputLabelProps, inputProps: ((_b = initInputProps === null || initInputProps === void 0 ? void 0 : initInputProps.className) === null || _b === void 0 ? void 0 : _b.includes('FormTag-Input')) ? initInputProps : inputProps, style: style, select: select, SelectProps: SelectProps, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
 });
 FormTextField.displayName = 'FormText';
-FormTextField.defaultProps = FormTextFieldDefaultProps;var FormTextDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: true, value: '' });var FormText = React__default.forwardRef(function (_a, ref) {
-    // Event Handler ---------------------------------------------------------------------------------------------------
-    var className = _a.className, onValue = _a.onValue, props = __rest$4(_a, ["className", "onValue"]);
-    var handleValue = useCallback(function (value) {
-        var finalValue = value == null ? '' : value;
-        if (onValue) {
-            finalValue = onValue(finalValue);
-        }
-        return finalValue;
-    }, [onValue]);
-    // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(FormTextField, __assign$7({ ref: ref, className: classNames$1(className, 'FormText'), disableReturnKey: true, onValue: handleValue }, props)));
-});
-FormText.displayName = 'FormText';
-FormText.defaultProps = FormTextDefaultProps;var FormHiddenDefaultProps = {};var css_248z$i = ".FormHidden {\n  display: none !important;\n}";
-styleInject(css_248z$i);var FormHidden = React__default.forwardRef(function (_a, ref) {
+FormTextField.defaultProps = FormTextFieldDefaultProps;var FormHiddenDefaultProps = __assign$7({}, FormTextFieldDefaultProps);var css_248z$k = ".FormHidden {\n  display: none !important;\n}";
+styleInject(css_248z$k);var FormHidden = React__default.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest$4(_a, ["className"]);
-    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormHidden'), type: 'hidden', variant: 'standard' }, props)));
+    return (React__default.createElement(FormTextField, __assign$7({ ref: ref, className: classNames$1(className, 'FormHidden'), type: 'hidden', variant: 'standard' }, props)));
 });
 FormHidden.displayName = 'FormHidden';
-FormHidden.defaultProps = FormHiddenDefaultProps;var FormTagDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { value: [], clear: true, formValueSeparator: ',' });var css_248z$h = ".FormTag.FormTextField {\n  min-width: 200px;\n}";
-styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, ref) {
+FormHidden.defaultProps = FormHiddenDefaultProps;var FormTagDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { value: [], clear: true, formValueSeparator: ',' });var FormTextDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: true, value: '' });var FormText = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest$4(_a, ["className"]);
+    return (React__default.createElement(FormTextField, __assign$7({ ref: ref, className: classNames$1(className, 'FormText'), disableReturnKey: true }, props)));
+});
+FormText.displayName = 'FormText';
+FormText.defaultProps = FormTextDefaultProps;var css_248z$j = ".FormTag.FormTextField {\n  min-width: 200px;\n}";
+styleInject(css_248z$j);var FormTag = React__default.forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
     var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, disabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, initHelperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest$4(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
     var _b = useFormState(), formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit, otherFormState = __rest$4(_b, ["fullWidth", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
@@ -2542,9 +2533,9 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
     var _c = useState(function () {
-        return new Set(getFinalValue(initValue));
+        return new Set(getFinalValue(initValue || []));
     }), valueSet = _c[0], setValueSet = _c[1];
-    var _d = useAutoUpdateState$1(initValue, getFinalValue), value = _d[0], setValue = _d[1];
+    var _d = useAutoUpdateState$1(initValue || [], getFinalValue), value = _d[0], setValue = _d[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -2596,8 +2587,8 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
     // Function - getCommands ------------------------------------------------------------------------------------------
     var getCommands = useCallback(function (baseCommands) {
         var lastValue = value;
-        return __assign$7(__assign$7(__assign$7({}, baseCommands), { getReset: function () { return getFinalValue(initValue); }, reset: function () {
-                lastValue = getFinalValue(initValue);
+        return __assign$7(__assign$7(__assign$7({}, baseCommands), { getReset: function () { return getFinalValue(initValue || []); }, reset: function () {
+                lastValue = getFinalValue(initValue || []);
                 setValue(lastValue);
             }, getValue: function () { return lastValue; }, setValue: function (newValue) {
                 var finalValue = getFinalValue(newValue);
@@ -2710,12 +2701,17 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
 });
 FormTag.displayName = 'FormTag';
 FormTag.defaultProps = FormTagDefaultProps;var FormEmailDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { validPattern: /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/g });var FormEmail = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest$4(_a, ["className"]);
-    return React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormEmail'), type: 'email' }, props));
+    var className = _a.className, onValue = _a.onValue, props = __rest$4(_a, ["className", "onValue"]);
+    var handleValue = useCallback(function (value) {
+        var newValue = value.replace(/ /gi, '');
+        return onValue ? onValue(newValue) : newValue;
+    }, [onValue]);
+    // Render ------------------------------------------------------------------------------------------------------------
+    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormEmail'), type: 'email', onValue: handleValue }, props)));
 });
 FormEmail.displayName = 'FormEmail';
-FormEmail.defaultProps = FormEmailDefaultProps;var FormPasswordDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: false, eye: true });var css_248z$g = ".FormPassword .eye-icon-button-wrap {\n  visibility: hidden;\n}\n.FormPassword.variant-filled .eye-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormPassword:hover .eye-icon-button-wrap.show,\n.FormPassword .MuiInputBase-root.Mui-focused .eye-icon-button-wrap.show {\n  visibility: visible;\n}";
-styleInject(css_248z$g);var StyledEyeInputAdornment = styled(InputAdornment)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
+FormEmail.defaultProps = FormEmailDefaultProps;var FormPasswordDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: false, eye: true });var css_248z$i = ".FormPassword .eye-icon-button-wrap {\n  visibility: hidden;\n}\n.FormPassword.variant-filled .eye-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormPassword:hover .eye-icon-button-wrap.show,\n.FormPassword .MuiInputBase-root.Mui-focused .eye-icon-button-wrap.show {\n  visibility: visible;\n}";
+styleInject(css_248z$i);var StyledEyeInputAdornment = styled(InputAdornment)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
 var FormPassword = React__default.forwardRef(function (_a, ref) {
     // State -----------------------------------------------------------------------------------------------------------
     var className = _a.className, initMuiInputProps = _a.InputProps, eye = _a.eye, onChange = _a.onChange, props = __rest$4(_a, ["className", "InputProps", "eye", "onChange"]);
@@ -2741,8 +2737,7 @@ var FormPassword = React__default.forwardRef(function (_a, ref) {
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = useCallback(function (value) {
         setShowEye(notEmpty(value));
-        if (onChange)
-            onChange(value);
+        onChange && onChange(value);
     }, [onChange]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormPassword'), onChange: handleChange, type: type, InputProps: muiInputProps }, props)));
@@ -2752,22 +2747,16 @@ FormPassword.defaultProps = FormPasswordDefaultProps;
 var templateObject_1;var FormTelDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { validPattern: /(^([0-9]{2,3})([0-9]{3,4})([0-9]{4})$)|(^([0-9]{2,3})-([0-9]{3,4})-([0-9]{4})$)|(^([0-9]{4})-([0-9]{4})$)|(^\+(?:[-]?[0-9]){8,}$)/ });var FormTel = React__default.forwardRef(function (_a, ref) {
     // Event Handler ---------------------------------------------------------------------------------------------------
     var className = _a.className, onValue = _a.onValue, props = __rest$4(_a, ["className", "onValue"]);
-    var handleOnValue = useCallback(function (value) {
-        var newValue = value;
-        if (newValue && notEmpty(newValue)) {
-            newValue = newValue.replace(/[^0-9]/gi, '');
-        }
-        newValue = autoDash$2(newValue);
+    var handleValue = useCallback(function (value) {
+        var newValue = autoDash$2(value.replace(/[^0-9]/gi, ''));
         return onValue ? onValue(newValue) : newValue;
     }, [onValue]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormTel'), onValue: handleOnValue, maxLength: 13 }, props)));
+    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormTel'), onValue: handleValue, maxLength: 13 }, props)));
 });
 FormTel.displayName = 'FormTel';
 FormTel.defaultProps = FormTelDefaultProps;
 function autoDash$2(tel) {
-    if (tel == null)
-        return undefined;
     var str = tel.replace(/[^0-9*]/g, '');
     var isLastDash = tel.substring(tel.length - 1, tel.length) === '-';
     if (str.substring(0, 1) !== '0' && !['15', '16', '18'].includes(str.substring(0, 2))) {
@@ -4013,7 +4002,7 @@ function NumericFormat(props) {
                 onChange({ target: { value: values.value } });
         } })));
 });
-NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps = __assign$7({}, FormTextDefaultProps);var FormNumber = React__default.forwardRef(function (_a, ref) {
+NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: true, value: '' });var FormNumber = React__default.forwardRef(function (_a, ref) {
     // Memo --------------------------------------------------------------------------------------------------------------
     var className = _a.className, allowLeadingZeros = _a.allowLeadingZeros, allowNegative = _a.allowNegative, thousandSeparator = _a.thousandSeparator, allowDecimal = _a.allowDecimal, decimalScale = _a.decimalScale, prefix = _a.prefix, suffix = _a.suffix, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initMuiInputProps = _a.InputProps, props = __rest$4(_a, ["className", "allowLeadingZeros", "allowNegative", "thousandSeparator", "allowDecimal", "decimalScale", "prefix", "suffix", "readOnly", "tabIndex", "InputProps"]);
     var muiInputProps = useMemo(function () {
@@ -4049,28 +4038,34 @@ NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps
         thousandSeparator,
     ]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormNumber'), InputProps: muiInputProps, readOnly: readOnly }, props)));
+    return (React__default.createElement(FormTextField, __assign$7({ ref: ref, className: classNames$1(className, 'FormNumber'), disableReturnKey: true, InputProps: muiInputProps, readOnly: readOnly }, props)));
 });
 FormNumber.displayName = 'FormNumber';
-FormNumber.defaultProps = FormNumberDefaultProps;var FormSearchDefaultProps = __assign$7({}, FormTextDefaultProps);var css_248z$f = ".FormSearch input[type=search]::-webkit-search-decoration,\n.FormSearch input[type=search]::-webkit-search-cancel-button,\n.FormSearch input[type=search]::-webkit-search-results-button,\n.FormSearch input[type=search]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}";
-styleInject(css_248z$f);var FormSearch = React__default.forwardRef(function (_a, ref) {
+FormNumber.defaultProps = FormNumberDefaultProps;var FormSearchDefaultProps = __assign$7({}, FormTextDefaultProps);var css_248z$h = ".FormSearch input[type=search]::-webkit-search-decoration,\n.FormSearch input[type=search]::-webkit-search-cancel-button,\n.FormSearch input[type=search]::-webkit-search-results-button,\n.FormSearch input[type=search]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}";
+styleInject(css_248z$h);var FormSearch = React__default.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest$4(_a, ["className"]);
     return React__default.createElement(FormText, __assign$7({ className: classNames$1(className, 'FormSearch'), ref: ref, type: 'search' }, props));
 });
 FormSearch.displayName = 'FormSearch';
-FormSearch.defaultProps = FormSearchDefaultProps;var FormTextareaDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: false, rows: 3, value: '' });var css_248z$e = ".FormTextarea .MuiInputBase-root .MuiInputBase-input {\n  overflow-y: scroll;\n}\n.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar {\n  width: 8px;\n}\n.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n}";
-styleInject(css_248z$e);var FormTextarea = React__default.forwardRef(function (_a, ref) {
+FormSearch.defaultProps = FormSearchDefaultProps;var FormTextareaDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { clear: false, rows: 3, value: '' });var css_248z$g = ".FormTextarea .MuiInputBase-root .MuiInputBase-input {\n  overflow-y: scroll;\n}\n.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar {\n  width: 8px;\n}\n.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n}";
+styleInject(css_248z$g);var FormTextarea = React__default.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest$4(_a, ["className"]);
-    return React__default.createElement(FormTextField, __assign$7({ ref: ref, className: classNames$1(className, 'FormTextarea') }, props, { multiline: true }));
+    return (React__default.createElement(FormTextField, __assign$7({ ref: ref, className: classNames$1(className, 'FormTextarea') }, props, { multiline: true })));
 });
 FormTextarea.displayName = 'FormTextarea';
 FormTextarea.defaultProps = FormTextareaDefaultProps;var FormUrlDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { validPattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'%()*+,;=.]+$/gim });var FormUrl = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest$4(_a, ["className"]);
-    return React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormUrl'), type: 'url' }, props));
+    // Event Handler -----------------------------------------------------------------------------------------------------
+    var className = _a.className, onValue = _a.onValue, props = __rest$4(_a, ["className", "onValue"]);
+    var handleValue = useCallback(function (value) {
+        var newValue = value.replace(/ /gi, '');
+        return onValue ? onValue(newValue) : newValue;
+    }, [onValue]);
+    // Render ------------------------------------------------------------------------------------------------------------
+    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormUrl'), type: 'url', onValue: handleValue }, props)));
 });
 FormUrl.displayName = 'FormUrl';
-FormUrl.defaultProps = FormUrlDefaultProps;var FormSelectDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { formValueSeparator: ',', minWidth: 120 });var css_248z$d = ".FormSelect.is-selected-placeholder .MuiSelect-select {\n  opacity: 0.38;\n}\n.FormSelect .MuiInputBase-root.MuiInputBase-adornedEnd {\n  padding-right: 25px;\n}\n.FormSelect .MuiSelect-select.MuiSelect-multiple .selected-list:not(:empty) {\n  margin-top: -3px;\n  margin-bottom: -3px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar {\n  width: 12px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n  border-right: 4px transparent solid;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:start:decrement, .FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:end:increment {\n  display: block;\n  height: 4px;\n  background-color: transparent;\n}";
-styleInject(css_248z$d);var FormSelect = React__default.forwardRef(function (_a, ref) {
+FormUrl.defaultProps = FormUrlDefaultProps;var FormSelectDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { formValueSeparator: ',', minWidth: 120 });var css_248z$f = ".FormSelect.is-selected-placeholder .MuiSelect-select {\n  opacity: 0.38;\n}\n.FormSelect .MuiInputBase-root.MuiInputBase-adornedEnd {\n  padding-right: 25px;\n}\n.FormSelect .MuiSelect-select.MuiSelect-multiple .selected-list:not(:empty) {\n  margin-top: -3px;\n  margin-bottom: -3px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar {\n  width: 12px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n  border-right: 4px transparent solid;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:start:decrement, .FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:end:increment {\n  display: block;\n  height: 4px;\n  background-color: transparent;\n}";
+styleInject(css_248z$f);var FormSelect = React__default.forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
     var className = _a.className, name = _a.name, initItems = _a.items, initFullWidth = _a.fullWidth, onLoadItems = _a.onLoadItems, readOnly = _a.readOnly, multiple = _a.multiple, checkbox = _a.checkbox, placeholder = _a.placeholder, initStartAdornment = _a.startAdornment, initValue = _a.value, initInputLabelProps = _a.InputLabelProps, initSelectProps = _a.SelectProps, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, width = _a.width, minWidth = _a.minWidth, initLoading = _a.loading, onChange = _a.onChange, onValue = _a.onValue, props = __rest$4(_a, ["className", "name", "items", "fullWidth", "onLoadItems", "readOnly", "multiple", "checkbox", "placeholder", "startAdornment", "value", "InputLabelProps", "SelectProps", "formValueSeparator", "formValueSort", "width", "minWidth", "loading", "onChange", "onValue"]);
     var _b = useFormState(), formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, otherFormState = __rest$4(_b, ["fullWidth", "onAddValueItem", "onValueChange"]);
@@ -4304,7 +4299,7 @@ styleInject(css_248z$d);var FormSelect = React__default.forwardRef(function (_a,
     return (React__default.createElement(FormContextProvider, { value: __assign$7({ fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, 
             // eslint-disable-next-line
             onValueChange: function () { } }, otherFormState) },
-        React__default.createElement(FormText, __assign$7({ select: true, ref: handleRef, name: name, className: classNames$1(className, 'FormSelect', isSelectedPlaceholder && 'is-selected-placeholder'), fullWidth: fullWidth }, props, { startAdornment: startAdornment, value: finalValue, clear: false, readOnly: readOnly || empty(items), InputLabelProps: inputLabelProps, SelectProps: selectProps, onChange: handleChange, onValue: handleValue }),
+        React__default.createElement(FormTextField, __assign$7({ select: true, ref: handleRef, name: name, className: classNames$1(className, 'FormSelect', isSelectedPlaceholder && 'is-selected-placeholder'), fullWidth: fullWidth }, props, { startAdornment: startAdornment, value: finalValue, clear: false, readOnly: readOnly || empty(items), InputLabelProps: inputLabelProps, SelectProps: selectProps, onChange: handleChange, onValue: handleValue }),
             isSelectedPlaceholder && (React__default.createElement(MenuItem, { key: '$$$EmptyValuePlaceholder$$$', value: '', disabled: true, sx: { display: 'none' } }, placeholder)),
             items && notEmpty(items) ? (items.map(function (_a) {
                 var itemLabel = _a.label, itemValue = _a.value, disabled = _a.disabled;
@@ -4317,22 +4312,16 @@ FormSelect.displayName = 'FormSelect';
 FormSelect.defaultProps = FormSelectDefaultProps;var FormCompanyNoDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { validPattern: /(([0-9]{3})([0-9]{2})([0-9]{5}))|(([0-9]{3})-([0-9]{2})-([0-9]{5}))/ });var FormCompanyNo = React__default.forwardRef(function (_a, ref) {
     // Event Handler ---------------------------------------------------------------------------------------------------
     var className = _a.className, onValue = _a.onValue, props = __rest$4(_a, ["className", "onValue"]);
-    var handleOnValue = useCallback(function (value) {
-        var newValue = value;
-        if (newValue && notEmpty(newValue)) {
-            newValue = newValue.replace(/[^0-9]/gi, '');
-        }
-        newValue = autoDash$1(newValue);
+    var handleValue = useCallback(function (value) {
+        var newValue = autoDash$1(value.replace(/[^0-9]/gi, ''));
         return onValue ? onValue(newValue) : newValue;
     }, [onValue]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormCompanyNo'), onValue: handleOnValue, maxLength: 12 }, props)));
+    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormCompanyNo'), maxLength: 12, onValue: handleValue }, props)));
 });
 FormCompanyNo.displayName = 'FormCompanyNo';
 FormCompanyNo.defaultProps = FormCompanyNoDefaultProps;
 function autoDash$1(companyNo) {
-    if (companyNo == null)
-        return undefined;
     var str = companyNo.replace(/[^0-9]/g, '');
     var tmp = '';
     for (var i = 0; i < str.length; i += 1) {
@@ -4345,12 +4334,8 @@ function autoDash$1(companyNo) {
 }var FormPersonalNoDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { validPattern: /(([0-9]{6})([0-9]{7}))|(([0-9]{6})-([0-9]{7}))/ });var FormPersonalNo = React__default.forwardRef(function (_a, ref) {
     // Event Handler ---------------------------------------------------------------------------------------------------
     var className = _a.className, onValue = _a.onValue, onValidate = _a.onValidate, props = __rest$4(_a, ["className", "onValue", "onValidate"]);
-    var handleOnValue = useCallback(function (value) {
-        var newValue = value;
-        if (newValue && notEmpty(newValue)) {
-            newValue = newValue.replace(/[^0-9]/gi, '');
-        }
-        newValue = autoDash(newValue);
+    var handleValue = useCallback(function (value) {
+        var newValue = autoDash(value.replace(/[^0-9]/gi, ''));
         return onValue ? onValue(newValue) : newValue;
     }, [onValue]);
     var handleValidate = useCallback(function (value) {
@@ -4383,13 +4368,11 @@ function autoDash$1(companyNo) {
         }
     }, [onValidate]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormPersonalNo'), onValue: handleOnValue, maxLength: 14, onValidate: handleValidate }, props)));
+    return (React__default.createElement(FormText, __assign$7({ ref: ref, className: classNames$1(className, 'FormPersonalNo'), maxLength: 14, onValue: handleValue, onValidate: handleValidate }, props)));
 });
 FormPersonalNo.displayName = 'FormPersonalNo';
 FormPersonalNo.defaultProps = FormPersonalNoDefaultProps;
 function autoDash(personalNo) {
-    if (personalNo == null)
-        return undefined;
     var str = personalNo.replace(/[^0-9]/g, '');
     var tmp = '';
     for (var i = 0; i < str.length; i += 1) {
@@ -4403,8 +4386,8 @@ function autoDash(personalNo) {
     checked: false,
     value: 1,
     uncheckedValue: 0,
-};var css_248z$c = ".FormItemBase .FormItemBase-InputLabel {\n  overflow: visible;\n  padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n  transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase .FormItemBase-Control-wrap {\n  position: relative;\n}\n.FormItemBase .FormItemBase-Control {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 16px;\n}";
-styleInject(css_248z$c);var FormItemBase = React__default.forwardRef(function (_a, ref) {
+};var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n  overflow: visible;\n  padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n  transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase .FormItemBase-Control-wrap {\n  position: relative;\n}\n.FormItemBase .FormItemBase-Control {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 16px;\n}";
+styleInject(css_248z$e);var FormItemBase = React__default.forwardRef(function (_a, ref) {
     // Ref ---------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
@@ -4556,13 +4539,13 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
     var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
     var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
     // State - checked -------------------------------------------------------------------------------------------------
-    var _k = useAutoUpdateState$1(initChecked), checked = _k[0], setChecked = _k[1];
+    var _k = useAutoUpdateState$1(!!initChecked), checked = _k[0], setChecked = _k[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(checked);
         if (onChange)
-            onChange(!!checked);
-        onValueChange(name, !!checked);
+            onChange(checked);
+        onValueChange(name, checked);
     }, [checked]);
     // Memo --------------------------------------------------------------------------------------------------------------
     var style = useMemo(function () { return (__assign$7({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle)); }, [initStyle, fullWidth, width]);
@@ -4602,16 +4585,16 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
     // Commands --------------------------------------------------------------------------------------------------------
     useLayoutEffect(function () {
         var lastChecked = checked;
-        var lastValue = value;
+        var lastValue = value == null ? 1 : value;
         var lastData = data;
-        var lastUncheckedValue = uncheckedValue;
+        var lastUncheckedValue = uncheckedValue == null ? 0 : uncheckedValue;
         var lastDisabled = !!disabled;
         var commands = {
             getType: function () { return 'FormCheckbox'; },
             getName: function () { return name; },
-            getReset: function () { return initChecked; },
+            getReset: function () { return !!initChecked; },
             reset: function () {
-                lastChecked = initChecked;
+                lastChecked = !!initChecked;
                 setChecked(lastChecked);
             },
             getValue: function () { return lastValue; },
@@ -4629,7 +4612,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
                 lastUncheckedValue = uncheckedValue;
                 setUncheckedValue(lastUncheckedValue);
             },
-            getChecked: function () { return !!lastChecked; },
+            getChecked: function () { return lastChecked; },
             setChecked: function (checked) {
                 lastChecked = checked;
                 setChecked(lastChecked);
@@ -4704,7 +4687,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
         }
     }, [readOnly, setChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default.createElement(FormControlLabel, { ref: labelRef, control: React__default.createElement(Checkbox, __assign$7({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: !!checked, checkedIcon: React__default.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React__default.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
+    return (React__default.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default.createElement(FormControlLabel, { ref: labelRef, control: React__default.createElement(Checkbox, __assign$7({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React__default.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React__default.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
 });
 FormCheckbox.displayName = 'FormCheckbox';
 FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultProps = {
@@ -5023,8 +5006,8 @@ FormRadioGroup.displayName = 'FormRadioGroup';
 FormRadioGroup.defaultProps = FormRadioGroupDefaultProps;var FormToggleButtonGroupDefaultProps = {
     type: 'button',
     formValueSeparator: ',',
-};var css_248z$b = ".FormToggleButtonGroup .ToggleButton {\n  display: inline-block;\n  padding: 0 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n  padding-left: 3px;\n  padding-right: 5px;\n  border: 0 !important;\n  margin-left: 0 !important;\n  justify-content: flex-start;\n  display: flex;\n  background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n  margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n  margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n  display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n  display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n  display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}";
-styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(function (_a, ref) {
+};var css_248z$d = ".FormToggleButtonGroup .ToggleButton {\n  display: inline-block;\n  padding: 0 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n  padding-left: 3px;\n  padding-right: 5px;\n  border: 0 !important;\n  margin-left: 0 !important;\n  justify-content: flex-start;\n  display: flex;\n  background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n  margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n  margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n  display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n  display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n  display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}";
+styleInject(css_248z$d);var FormToggleButtonGroup = React__default.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
@@ -5406,7 +5389,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
         return (items &&
             items.map(function (_a, idx) {
                 var value = _a.value, label = _a.label, itemDisabled = _a.disabled, itemColor = _a.color;
-                var button = (React__default.createElement(ToggleButton, { ref: idx === 0 ? refForButtonResizeHeightDetect : undefined, key: idx, size: size, className: 'ToggleButton', value: value, color: itemColor || color, disabled: disabled || readOnly || itemDisabled, style: buttonStyle, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } },
+                return (React__default.createElement(ToggleButton, { ref: idx === 0 ? refForButtonResizeHeightDetect : undefined, key: idx, size: size, className: 'ToggleButton', value: value, color: itemColor || color, disabled: disabled || readOnly || itemDisabled, style: buttonStyle, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } },
                     type === 'checkbox' ? (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "check_box_outline_blank"),
                         React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "check_box"))) : (type === 'radio' && (React__default.createElement(React__default.Fragment, null,
@@ -5414,7 +5397,6 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
                             React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "radio_button_unchecked"),
                             React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "radio_button_checked"))))),
                     label));
-                return button;
             }));
     }, [
         color,
@@ -7466,8 +7448,9 @@ var Editor = /** @class */ (function (_super) {
 }(React.Component));var FormTextEditorDefaultProps = {
     menubar: true,
     height: 500,
-};var css_248z$a = ".FormTextEditor.initializing textarea {\n  display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n  border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n  padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n  display: none;\n}";
-styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function (_a, ref) {
+    value: '',
+};var css_248z$c = ".FormTextEditor.initializing textarea {\n  display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n  border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n  padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n  display: none;\n}";
+styleInject(css_248z$c);var FormTextEditor = React__default.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7489,7 +7472,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function
     var editorRef = useRef(null);
     var keyDownTime = useRef(0);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateState$1(initValue), value = _d[0], setValue = _d[1];
+    var _d = useAutoUpdateState$1(initValue || ''), value = _d[0], setValue = _d[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -7549,9 +7532,9 @@ styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function
         var commands = {
             getType: function () { return 'FormTextEditor'; },
             getName: function () { return name; },
-            getReset: function () { return initValue; },
+            getReset: function () { return initValue || ''; },
             reset: function () {
-                lastValue = initValue;
+                lastValue = initValue || '';
                 setValue(lastValue);
             },
             getValue: function () { return lastValue; },
@@ -7817,7 +7800,9 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
                 }
             }
         }
-        if ((oldComponentValueRef.current, isSame$2(oldComponentValueRef.current, newComponentValue))) {
+        if (oldComponentValueRef.current &&
+            newComponentValue &&
+            isSame$2(oldComponentValueRef.current, newComponentValue)) {
             return oldComponentValueRef.current;
         }
         else {
@@ -8309,8 +8294,9 @@ Icon.defaultProps = IconDefaultProps;var IconTextDefaultProps = {
 IconText.defaultProps = IconTextDefaultProps;var PrivateDatePickerDefaultProps = {
     showDaysOutsideCurrentMonth: true,
     align: 'center',
-};var PrivateStaticDatePickerDefaultProps = {};var PrivateYearSelectDefaultProps = {};var css_248z$9 = ".PrivateYearSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: white;\n}\n.PrivateYearSelect button {\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 18px;\n}";
-styleInject(css_248z$9);var PrivateToggleButtonDefaultProps = {};var PrivateToggleButton = React__default.forwardRef(function (_a, ref) {
+    value: null,
+};var PrivateStaticDatePickerDefaultProps = {};var PrivateYearSelectDefaultProps = {};var css_248z$b = ".PrivateYearSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: white;\n}\n.PrivateYearSelect button {\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 18px;\n}";
+styleInject(css_248z$b);var PrivateToggleButtonDefaultProps = {};var PrivateToggleButton = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, initClassName = _a.className, selected = _a.selected, activated = _a.activated, outlined = _a.outlined, props = __rest$4(_a, ["children", "className", "selected", "activated", "outlined"]);
     var theme = useTheme();
     var className = useMemo(function () { return classNames$1(initClassName, selected && 'selected', activated && 'activated', outlined && 'outlined'); }, [activated, initClassName, outlined, selected]);
@@ -9896,8 +9882,8 @@ var SimpleBar = React.forwardRef(function (_a, ref) {
             React.createElement("div", { className: classNames.scrollbar }))));
 });
 SimpleBar.displayName = 'SimpleBar';var YEARS$1 = new Array(200).fill(0);
-for (var i$4 = 0; i$4 < 200; i$4 += 1) {
-    YEARS$1[i$4] = 1900 + i$4;
+for (var i$5 = 0; i$5 < 200; i$5 += 1) {
+    YEARS$1[i$5] = 1900 + i$5;
 }
 var PrivateYearSelect = function (_a) {
     // Ref -------------------------------------------------------------------------------------------------------------
@@ -9937,10 +9923,10 @@ var PrivateYearSelect = function (_a) {
             })))));
 };
 PrivateYearSelect.displayName = 'PrivateYearSelect';
-PrivateYearSelect.defaultProps = PrivateYearSelectDefaultProps;var PrivateMonthSelectDefaultProps = {};var css_248z$8 = ".PrivateMonthSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: white;\n}\n.PrivateMonthSelect button {\n  font-size: 15px;\n  font-weight: 400;\n  border-radius: 18px;\n}";
-styleInject(css_248z$8);var MONTHS$1 = new Array(12).fill(0);
-for (var i$3 = 0; i$3 < 12; i$3 += 1) {
-    MONTHS$1[i$3] = i$3;
+PrivateYearSelect.defaultProps = PrivateYearSelectDefaultProps;var PrivateMonthSelectDefaultProps = {};var css_248z$a = ".PrivateMonthSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: white;\n}\n.PrivateMonthSelect button {\n  font-size: 15px;\n  font-weight: 400;\n  border-radius: 18px;\n}";
+styleInject(css_248z$a);var MONTHS$1 = new Array(12).fill(0);
+for (var i$4 = 0; i$4 < 12; i$4 += 1) {
+    MONTHS$1[i$4] = i$4;
 }
 var PrivateMonthSelect = function (_a) {
     var year = _a.year, selectYear = _a.selectYear, selectMonth = _a.selectMonth, activeMonth = _a.activeMonth, availableDate = _a.availableDate, onSelect = _a.onSelect;
@@ -9961,10 +9947,10 @@ var PrivateMonthSelect = function (_a) {
 PrivateMonthSelect.displayName = 'PrivateMonthSelect';
 PrivateMonthSelect.defaultProps = PrivateMonthSelectDefaultProps;var PrivateTimeSelectDefaultProps = {
     cols: 1,
-};var css_248z$7 = ".PrivateTimeSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.PrivateTimeSelect button {\n  border-radius: 0;\n}";
-styleInject(css_248z$7);var DEFAULT_MINUTES$1 = new Array(60).fill(0);
-for (var i$2 = 0; i$2 < DEFAULT_MINUTES$1.length; i$2 += 1) {
-    DEFAULT_MINUTES$1[i$2] = i$2;
+};var css_248z$9 = ".PrivateTimeSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.PrivateTimeSelect button {\n  border-radius: 0;\n}";
+styleInject(css_248z$9);var DEFAULT_MINUTES$2 = new Array(60).fill(0);
+for (var i$3 = 0; i$3 < DEFAULT_MINUTES$2.length; i$3 += 1) {
+    DEFAULT_MINUTES$2[i$3] = i$3;
 }
 var PrivateTimeSelect = React__default.forwardRef(function (_a, ref) {
     // Ref -------------------------------------------------------------------------------------------------------------
@@ -10068,18 +10054,18 @@ var PrivateTimeSelect = React__default.forwardRef(function (_a, ref) {
                 }))))));
 });
 PrivateTimeSelect.displayName = 'PrivateTimeSelect';
-PrivateTimeSelect.defaultProps = PrivateTimeSelectDefaultProps;var css_248z$6 = ".PrivateStaticDatePicker.time {\n  height: 400px;\n}\n.PrivateStaticDatePicker .MuiPickersCalendarHeader-root {\n  display: none;\n}\n.PrivateStaticDatePicker .month-title-container {\n  display: flex;\n  align-items: center;\n  margin-left: 5px;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button {\n  font-size: 15px;\n  padding-left: 8px;\n  padding-right: 0;\n  min-width: 0;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button:not(.active) {\n  color: unset;\n}\n.PrivateStaticDatePicker .action-buttons {\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n}\n.PrivateStaticDatePicker .action-buttons button {\n  min-width: 0;\n  color: inherit;\n}\n.PrivateStaticDatePicker .action-buttons button:not(:first-child) {\n  margin-left: 5px;\n}\n.PrivateStaticDatePicker .action-buttons button.disabled {\n  color: rgba(0, 0, 0, 0.5);\n}\n.PrivateStaticDatePicker .time {\n  border-left: 2px solid #bfbfbf;\n}\n.PrivateStaticDatePicker .time .time-container {\n  height: 100%;\n}\n.PrivateStaticDatePicker .time .time-container .time-title {\n  text-align: center;\n  padding: 22px 0;\n  font-size: 15px;\n}\n.PrivateStaticDatePicker .time .time-container .time-select-wrap {\n  flex: 1;\n  border-top: 1px solid #efefef;\n}\n.PrivateStaticDatePicker.time .time .time-container .time-select-wrap > div > div:not(:first-child) {\n  border-left: 1px solid #efefef;\n}";
-styleInject(css_248z$6);var DEFAULT_HOURS = new Array(24).fill(0);
-for (var i$1 = 0; i$1 < DEFAULT_HOURS.length; i$1 += 1) {
-    DEFAULT_HOURS[i$1] = i$1;
+PrivateTimeSelect.defaultProps = PrivateTimeSelectDefaultProps;var css_248z$8 = ".PrivateStaticDatePicker.time {\n  height: 400px;\n}\n.PrivateStaticDatePicker .MuiPickersCalendarHeader-root {\n  display: none;\n}\n.PrivateStaticDatePicker .month-title-container {\n  display: flex;\n  align-items: center;\n  margin-left: 5px;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button {\n  font-size: 15px;\n  padding-left: 8px;\n  padding-right: 0;\n  min-width: 0;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button:not(.active) {\n  color: unset;\n}\n.PrivateStaticDatePicker .action-buttons {\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n}\n.PrivateStaticDatePicker .action-buttons button {\n  min-width: 0;\n  color: inherit;\n}\n.PrivateStaticDatePicker .action-buttons button:not(:first-child) {\n  margin-left: 5px;\n}\n.PrivateStaticDatePicker .action-buttons button.disabled {\n  color: rgba(0, 0, 0, 0.5);\n}\n.PrivateStaticDatePicker .time {\n  border-left: 2px solid #bfbfbf;\n}\n.PrivateStaticDatePicker .time .time-container {\n  height: 100%;\n}\n.PrivateStaticDatePicker .time .time-container .time-title {\n  text-align: center;\n  padding: 22px 0;\n  font-size: 15px;\n}\n.PrivateStaticDatePicker .time .time-container .time-select-wrap {\n  flex: 1;\n  border-top: 1px solid #efefef;\n}\n.PrivateStaticDatePicker.time .time .time-container .time-select-wrap > div > div:not(:first-child) {\n  border-left: 1px solid #efefef;\n}";
+styleInject(css_248z$8);var DEFAULT_HOURS$1 = new Array(24).fill(0);
+for (var i$2 = 0; i$2 < DEFAULT_HOURS$1.length; i$2 += 1) {
+    DEFAULT_HOURS$1[i$2] = i$2;
 }
-var DEFAULT_MINUTES = new Array(60).fill(0);
-for (var i$1 = 0; i$1 < DEFAULT_MINUTES.length; i$1 += 1) {
-    DEFAULT_MINUTES[i$1] = i$1;
+var DEFAULT_MINUTES$1 = new Array(60).fill(0);
+for (var i$2 = 0; i$2 < DEFAULT_MINUTES$1.length; i$2 += 1) {
+    DEFAULT_MINUTES$1[i$2] = i$2;
 }
-var DEFAULT_SECONDS = new Array(60).fill(0);
-for (var i$1 = 0; i$1 < DEFAULT_SECONDS.length; i$1 += 1) {
-    DEFAULT_SECONDS[i$1] = i$1;
+var DEFAULT_SECONDS$1 = new Array(60).fill(0);
+for (var i$2 = 0; i$2 < DEFAULT_SECONDS$1.length; i$2 += 1) {
+    DEFAULT_SECONDS$1[i$2] = i$2;
 }
 var PrivateStaticDatePicker = React__default.forwardRef(function (_a, ref) {
     // Ref -------------------------------------------------------------------------------------------------------------
@@ -10100,9 +10086,9 @@ var PrivateStaticDatePicker = React__default.forwardRef(function (_a, ref) {
     var _d = useState(false), yearSelectOpen = _d[0], setYearSelectOpen = _d[1];
     var _e = useState(false), monthSelectOpen = _e[0], setMonthSelectOpen = _e[1];
     // Memo --------------------------------------------------------------------------------------------------------------
-    var hours = useMemo(function () { return initHours || DEFAULT_HOURS; }, [initHours]);
-    var minutes = useMemo(function () { return initMinutes || DEFAULT_MINUTES; }, [initMinutes]);
-    var seconds = useMemo(function () { return initSeconds || DEFAULT_SECONDS; }, [initSeconds]);
+    var hours = useMemo(function () { return initHours || DEFAULT_HOURS$1; }, [initHours]);
+    var minutes = useMemo(function () { return initMinutes || DEFAULT_MINUTES$1; }, [initMinutes]);
+    var seconds = useMemo(function () { return initSeconds || DEFAULT_SECONDS$1; }, [initSeconds]);
     var availableDate = useMemo(function () {
         return initAvailableDate ? initAvailableDate : makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture);
     }, [initAvailableDate, minDate, maxDate, disablePast, disableFuture]);
@@ -10177,15 +10163,6 @@ var PrivateStaticDatePicker = React__default.forwardRef(function (_a, ref) {
             rightArrowOnClickRef.current({});
         }
     }, []);
-    var timeSelectScrollToDate = useCallback(function (date, times) {
-        var _a, _b, _c;
-        if (!times || (times === null || times === void 0 ? void 0 : times.includes('hour')))
-            (_a = hourSelectRef.current) === null || _a === void 0 ? void 0 : _a.scrollToValue(date.hour());
-        if (!times || (times === null || times === void 0 ? void 0 : times.includes('minute')))
-            (_b = minuteSelectRef.current) === null || _b === void 0 ? void 0 : _b.scrollToValue(date.minute());
-        if (!times || (times === null || times === void 0 ? void 0 : times.includes('second')))
-            (_c = secondSelectRef.current) === null || _c === void 0 ? void 0 : _c.scrollToValue(date.second());
-    }, []);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleYearSelect = useCallback(function (year) {
         setMonth(month.set('year', year));
@@ -10204,9 +10181,7 @@ var PrivateStaticDatePicker = React__default.forwardRef(function (_a, ref) {
     // Commands --------------------------------------------------------------------------------------------------------
     useLayoutEffect(function () {
         if (ref) {
-            var commands = {
-                timeSelectScrollToDate: timeSelectScrollToDate,
-            };
+            var commands = {};
             if (typeof ref === 'function') {
                 ref(commands);
             }
@@ -10222,7 +10197,7 @@ var PrivateStaticDatePicker = React__default.forwardRef(function (_a, ref) {
                 }
             };
         }
-    }, [ref, timeSelectScrollToDate]);
+    }, [ref]);
     // Render - Function -----------------------------------------------------------------------------------------------
     var getActionButton = useCallback(function (date, label) {
         var disabled = !isDateAvailable(date, availableDate, 'day');
@@ -10366,8 +10341,8 @@ PrivateStaticDatePicker.defaultProps = PrivateStaticDatePickerDefaultProps;var P
             boxShadow: theme.shadows[8],
         },
         _b);
-});var css_248z$5 = ".PrivateDatePicker .input-text-field.align-left .MuiInputBase-input {\n  text-align: left;\n}\n.PrivateDatePicker .input-text-field.align-center .MuiInputBase-input {\n  text-align: center;\n}\n.PrivateDatePicker .input-text-field.align-right .MuiInputBase-input {\n  text-align: right;\n}";
-styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(function (_a, ref) {
+});var css_248z$7 = ".PrivateDatePicker .input-text-field.align-left .MuiInputBase-input {\n  text-align: left;\n}\n.PrivateDatePicker .input-text-field.align-center .MuiInputBase-input {\n  text-align: center;\n}\n.PrivateDatePicker .input-text-field.align-right .MuiInputBase-input {\n  text-align: right;\n}";
+styleInject(css_248z$7);var PrivateDatePicker = React__default.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //--------------------------------------------------------------------------------------------------------------------
@@ -10628,7 +10603,6 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = useCallback(function (unit, newValue, keyboardInputValue) {
-        var _a, _b, _c;
         var updateValue = true;
         if (notEmpty(keyboardInputValue)) {
             if (newValue) {
@@ -10671,22 +10645,6 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
                     onRequestSearchSubmit(name, finalValue);
                 }
             });
-            if (time) {
-                if (finalValue) {
-                    switch (unit) {
-                        case 'date':
-                        case 'action_date':
-                            (_a = privateStaticDatePickerRef.current) === null || _a === void 0 ? void 0 : _a.timeSelectScrollToDate(finalValue);
-                            break;
-                        case 'hour':
-                            (_b = privateStaticDatePickerRef.current) === null || _b === void 0 ? void 0 : _b.timeSelectScrollToDate(finalValue, ['minute', 'second']);
-                            break;
-                        case 'minute':
-                            (_c = privateStaticDatePickerRef.current) === null || _c === void 0 ? void 0 : _c.timeSelectScrollToDate(finalValue, ['second']);
-                            break;
-                    }
-                }
-            }
         }
         setInputValue(finalValue);
     }, [type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
@@ -10804,7 +10762,728 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
                 !formColWithHelperText && helperText && (React__default.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, helperText))))));
 });
 PrivateDatePicker.displayName = 'PrivateDatePicker';
-PrivateDatePicker.defaultProps = PrivateDatePickerDefaultProps;var PrivateAlertDialogDefaultProps = {
+PrivateDatePicker.defaultProps = PrivateDatePickerDefaultProps;var PrivateDateTimePickerDefaultProps = {
+    showDaysOutsideCurrentMonth: true,
+    align: 'center',
+    value: null,
+};var css_248z$6 = ".PrivateDateTimePicker .input-text-field.align-left .MuiInputBase-input {\n  text-align: left;\n}\n.PrivateDateTimePicker .input-text-field.align-center .MuiInputBase-input {\n  text-align: center;\n}\n.PrivateDateTimePicker .input-text-field.align-right .MuiInputBase-input {\n  text-align: right;\n}";
+styleInject(css_248z$6);var PrivateStaticDateTimePickerDefaultProps = {};var css_248z$5 = ".PrivateStaticDateTimePicker.time {\n  height: 400px;\n}\n.PrivateStaticDateTimePicker .MuiPickersCalendarHeader-root {\n  display: none;\n}\n.PrivateStaticDateTimePicker .month-title-container {\n  display: flex;\n  align-items: center;\n  margin-left: 5px;\n}\n.PrivateStaticDateTimePicker .month-title-container .month-title-wrap {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button {\n  font-size: 15px;\n  padding-left: 8px;\n  padding-right: 0;\n  min-width: 0;\n}\n.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button:not(.active) {\n  color: unset;\n}\n.PrivateStaticDateTimePicker .action-buttons {\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n}\n.PrivateStaticDateTimePicker .action-buttons button {\n  min-width: 0;\n  color: inherit;\n}\n.PrivateStaticDateTimePicker .action-buttons button:not(:first-child) {\n  margin-left: 5px;\n}\n.PrivateStaticDateTimePicker .action-buttons button.disabled {\n  color: rgba(0, 0, 0, 0.5);\n}\n.PrivateStaticDateTimePicker .time {\n  border-left: 2px solid #bfbfbf;\n}\n.PrivateStaticDateTimePicker .time .time-container {\n  height: 100%;\n}\n.PrivateStaticDateTimePicker .time .time-container .time-title {\n  text-align: center;\n  padding: 22px 0;\n  font-size: 15px;\n}\n.PrivateStaticDateTimePicker .time .time-container .time-select-wrap {\n  flex: 1;\n  border-top: 1px solid #efefef;\n}\n.PrivateStaticDateTimePicker.time .time .time-container .time-select-wrap > div > div:not(:first-child) {\n  border-left: 1px solid #efefef;\n}";
+styleInject(css_248z$5);var DEFAULT_HOURS = new Array(24).fill(0);
+for (var i$1 = 0; i$1 < DEFAULT_HOURS.length; i$1 += 1) {
+    DEFAULT_HOURS[i$1] = i$1;
+}
+var DEFAULT_MINUTES = new Array(60).fill(0);
+for (var i$1 = 0; i$1 < DEFAULT_MINUTES.length; i$1 += 1) {
+    DEFAULT_MINUTES[i$1] = i$1;
+}
+var DEFAULT_SECONDS = new Array(60).fill(0);
+for (var i$1 = 0; i$1 < DEFAULT_SECONDS.length; i$1 += 1) {
+    DEFAULT_SECONDS[i$1] = i$1;
+}
+var PrivateStaticDateTimePicker = React__default.forwardRef(function (_a, ref) {
+    // Ref -------------------------------------------------------------------------------------------------------------
+    var value = _a.value, initAvailableDate = _a.availableDate, defaultCalendarMonth = _a.defaultCalendarMonth, type = _a.type, time = _a.time, initHours = _a.hours, initMinutes = _a.minutes, initSeconds = _a.seconds, minuteInterval = _a.minuteInterval, secondInterval = _a.secondInterval, minDate = _a.minDate, maxDate = _a.maxDate, disablePast = _a.disablePast, disableFuture = _a.disableFuture, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onClose = _a.onClose, props = __rest$4(_a, ["value", "availableDate", "defaultCalendarMonth", "type", "time", "hours", "minutes", "seconds", "minuteInterval", "secondInterval", "minDate", "maxDate", "disablePast", "disableFuture", "onChange", "onMonthChange", "onClose"]);
+    var hourSelectRef = useRef(null);
+    var minuteSelectRef = useRef(null);
+    var secondSelectRef = useRef(null);
+    // State -----------------------------------------------------------------------------------------------------------
+    var _b = useState(function () {
+        if (value)
+            return value;
+        else if (defaultCalendarMonth)
+            return defaultCalendarMonth;
+        else
+            return dayjs();
+    }), month = _b[0], setMonth = _b[1];
+    var _c = useState(null), activeMonthValue = _c[0], setActiveMonthValue = _c[1];
+    var _d = useState(false), yearSelectOpen = _d[0], setYearSelectOpen = _d[1];
+    var _e = useState(false), monthSelectOpen = _e[0], setMonthSelectOpen = _e[1];
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var hours = useMemo(function () { return initHours || DEFAULT_HOURS; }, [initHours]);
+    var minutes = useMemo(function () { return initMinutes || DEFAULT_MINUTES; }, [initMinutes]);
+    var seconds = useMemo(function () { return initSeconds || DEFAULT_SECONDS; }, [initSeconds]);
+    var availableDate = useMemo(function () {
+        return initAvailableDate ? initAvailableDate : makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture);
+    }, [initAvailableDate, minDate, maxDate, disablePast, disableFuture]);
+    var disableHours = useMemo(function () {
+        var newDisableHours = [];
+        if (time && value && (availableDate[0] || availableDate[1])) {
+            hours.forEach(function (h) {
+                if (!isDateAvailable(value.set('hour', h), availableDate, 'hour')) {
+                    newDisableHours.push(h);
+                }
+            });
+        }
+        return newDisableHours;
+    }, [time, value, availableDate, hours]);
+    var disableMinutes = useMemo(function () {
+        var newDisableMinutes = [];
+        if (time === 'minute' || time === 'second') {
+            if (value && (availableDate[0] || availableDate[1])) {
+                minutes.forEach(function (m) {
+                    if (!isDateAvailable(value.set('minute', m), availableDate, 'minute')) {
+                        newDisableMinutes.push(m);
+                    }
+                });
+            }
+        }
+        return newDisableMinutes;
+    }, [time, value, availableDate, minutes]);
+    var disableSeconds = useMemo(function () {
+        var newDisableSeconds = [];
+        if (time === 'second') {
+            if (value && (availableDate[0] || availableDate[1])) {
+                seconds.forEach(function (s) {
+                    if (!isDateAvailable(value.set('second', s), availableDate, 'second')) {
+                        newDisableSeconds.push(s);
+                    }
+                });
+            }
+        }
+        return newDisableSeconds;
+    }, [time, value, availableDate, seconds]);
+    // Effect ----------------------------------------------------------------------------------------------------------
+    useEffect(function () {
+        if (!yearSelectOpen) {
+            setActiveMonthValue(null);
+        }
+    }, [yearSelectOpen]);
+    //--------------------------------------------------------------------------------------------------------------------
+    var leftArrowOnClickRef = useRef();
+    var rightArrowOnClickRef = useRef();
+    var LeftArrowButton = useState(function () {
+        var ArrowButton = function (props) {
+            leftArrowOnClickRef.current = props.onClick;
+            return React__default.createElement(IconButton, __assign$7({}, props));
+        };
+        return ArrowButton;
+    })[0];
+    var RightArrowButton = useState(function () {
+        var ArrowButton = function (props) {
+            rightArrowOnClickRef.current = props.onClick;
+            return React__default.createElement(IconButton, __assign$7({}, props));
+        };
+        return ArrowButton;
+    })[0];
+    // Function --------------------------------------------------------------------------------------------------------
+    var previousMonth = useCallback(function () {
+        if (leftArrowOnClickRef.current) {
+            leftArrowOnClickRef.current({});
+        }
+    }, []);
+    var nextMonth = useCallback(function () {
+        if (rightArrowOnClickRef.current) {
+            rightArrowOnClickRef.current({});
+        }
+    }, []);
+    var timeSelectScrollToDate = useCallback(function (date, times) {
+        var _a, _b, _c;
+        if (!times || (times === null || times === void 0 ? void 0 : times.includes('hour')))
+            (_a = hourSelectRef.current) === null || _a === void 0 ? void 0 : _a.scrollToValue(date.hour());
+        if (!times || (times === null || times === void 0 ? void 0 : times.includes('minute')))
+            (_b = minuteSelectRef.current) === null || _b === void 0 ? void 0 : _b.scrollToValue(date.minute());
+        if (!times || (times === null || times === void 0 ? void 0 : times.includes('second')))
+            (_c = secondSelectRef.current) === null || _c === void 0 ? void 0 : _c.scrollToValue(date.second());
+    }, []);
+    // Event Handler ---------------------------------------------------------------------------------------------------
+    var handleYearSelect = useCallback(function (year) {
+        setMonth(month.set('year', year));
+        setActiveMonthValue(month.set('year', year));
+        setYearSelectOpen(false);
+        setMonthSelectOpen(true);
+    }, [month]);
+    var handleMonthSelect = useCallback(function (m) {
+        setMonth(month.set('month', m));
+        setActiveMonthValue(month.set('month', m));
+        setMonthSelectOpen(false);
+    }, [month]);
+    var handleRenderDay = useCallback(function (props) {
+        return React__default.createElement(PickersDay, __assign$7({}, props, { selected: props.day.isSame(value, 'date') }));
+    }, [value]);
+    // Commands --------------------------------------------------------------------------------------------------------
+    useLayoutEffect(function () {
+        if (ref) {
+            var commands = {
+                timeSelectScrollToDate: timeSelectScrollToDate,
+            };
+            if (typeof ref === 'function') {
+                ref(commands);
+            }
+            else {
+                ref.current = commands;
+            }
+            return function () {
+                if (typeof ref === 'function') {
+                    ref(null);
+                }
+                else {
+                    ref.current = null;
+                }
+            };
+        }
+    }, [ref, timeSelectScrollToDate]);
+    // Render - Function -----------------------------------------------------------------------------------------------
+    var getActionButton = useCallback(function (date, label) {
+        var disabled = !isDateAvailable(date, availableDate, 'day');
+        return (React__default.createElement(Button, { variant: 'text', className: disabled ? 'disabled' : undefined, disabled: disabled, onClick: function () {
+                var finalDate = date;
+                var checkResult = checkDateAvailable(finalDate, availableDate, type, time);
+                if (checkResult !== 'available') {
+                    var availableDateDate = getAvailableDate(availableDate, type, time);
+                    if (checkResult === 'min') {
+                        if (availableDateDate[0])
+                            finalDate = availableDateDate[0];
+                    }
+                    else if (checkResult === 'max') {
+                        if (availableDateDate[1])
+                            finalDate = availableDateDate[1];
+                    }
+                }
+                onChange('action_date', finalDate);
+            } }, label));
+    }, [type, time, onChange, availableDate]);
+    // Render ----------------------------------------------------------------------------------------------------------
+    return (React__default.createElement(Grid, { container: true, className: classNames$1('PrivateStaticDateTimePicker', type) },
+        type !== 'time' && (React__default.createElement(Grid, { item: true },
+            React__default.createElement(Grid, { container: true, direction: 'column' },
+                React__default.createElement(Grid, { item: true, sx: { p: 2, width: '100%' } },
+                    React__default.createElement(Grid, { container: true, className: 'month-change-arrow-wrap' },
+                        React__default.createElement(Grid, { item: true, flex: 1, className: 'month-title-container' },
+                            React__default.createElement("div", { className: 'month-title-wrap' },
+                                React__default.createElement("div", { className: 'month-title' },
+                                    React__default.createElement(Button, { variant: 'text', className: yearSelectOpen ? 'active' : undefined, onClick: function () {
+                                            if (yearSelectOpen) {
+                                                setYearSelectOpen(false);
+                                            }
+                                            else {
+                                                setYearSelectOpen(true);
+                                                setMonthSelectOpen(false);
+                                            }
+                                        } },
+                                        month.format('YYYY년'),
+                                        React__default.createElement(Icon$1, null, yearSelectOpen ? 'arrow_drop_up' : 'arrow_drop_down'))),
+                                React__default.createElement("div", { className: 'month-title' },
+                                    React__default.createElement(Button, { variant: 'text', className: monthSelectOpen ? 'active' : undefined, onClick: function () {
+                                            if (monthSelectOpen) {
+                                                setMonthSelectOpen(false);
+                                            }
+                                            else {
+                                                setMonthSelectOpen(true);
+                                                setYearSelectOpen(false);
+                                            }
+                                        } },
+                                        month.format('M월'),
+                                        React__default.createElement(Icon$1, null, monthSelectOpen ? 'arrow_drop_up' : 'arrow_drop_down'))))),
+                        !yearSelectOpen && !monthSelectOpen && (React__default.createElement(Grid, { item: true, style: { textAlign: 'right' } },
+                            React__default.createElement(IconButton, { onClick: previousMonth, sx: { mr: 1 } },
+                                React__default.createElement(Icon$1, null, "keyboard_arrow_left")),
+                            React__default.createElement(IconButton, { onClick: nextMonth },
+                                React__default.createElement(Icon$1, null, "keyboard_arrow_right")))))),
+                React__default.createElement(Grid, { item: true, style: { position: 'relative' } },
+                    React__default.createElement(StaticDateTimePicker, __assign$7({}, props, { value: activeMonthValue, defaultCalendarMonth: month, slots: {
+                            previousIconButton: LeftArrowButton,
+                            nextIconButton: RightArrowButton,
+                            day: handleRenderDay,
+                        }, viewRenderers: { hours: null, minutes: null, seconds: null }, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, displayStaticWrapperAs: 'desktop', onChange: function (newValue) {
+                            var finalValue = newValue
+                                ? value
+                                    ? newValue.set('hour', value.hour()).set('minute', value.minute()).set('second', value.second())
+                                    : newValue
+                                : newValue;
+                            onChange('date', finalValue);
+                        }, onMonthChange: function (month) {
+                            setMonth(month);
+                            if (onMonthChange)
+                                onMonthChange(month);
+                        } })),
+                    yearSelectOpen && (React__default.createElement(PrivateYearSelect, { selectYear: value == null ? null : value.year(), activeYear: month.year(), availableDate: availableDate, onSelect: handleYearSelect })),
+                    monthSelectOpen && (React__default.createElement(PrivateMonthSelect, { year: month.year(), selectYear: value == null ? null : value.year(), selectMonth: value == null ? null : value.month(), activeMonth: month.month(), availableDate: availableDate, onSelect: handleMonthSelect }))),
+                React__default.createElement(Grid, { item: true, className: 'action-buttons' },
+                    getActionButton(dayjs()
+                        .startOf('d')
+                        .subtract(1, 'month')
+                        .set('hour', value ? value.hour() : 0)
+                        .set('minute', value ? value.minute() : 0)
+                        .set('second', value ? value.second() : 0), '지난달'),
+                    getActionButton(dayjs()
+                        .startOf('d')
+                        .subtract(7, 'd')
+                        .set('hour', value ? value.hour() : 0)
+                        .set('minute', value ? value.minute() : 0)
+                        .set('second', value ? value.second() : 0), '지난주'),
+                    getActionButton(dayjs()
+                        .startOf('d')
+                        .subtract(1, 'd')
+                        .set('hour', value ? value.hour() : 0)
+                        .set('minute', value ? value.minute() : 0)
+                        .set('second', value ? value.second() : 0), '어제'),
+                    getActionButton(dayjs()
+                        .startOf('d')
+                        .set('hour', value ? value.hour() : 0)
+                        .set('minute', value ? value.minute() : 0)
+                        .set('second', value ? value.second() : 0), '오늘'))))),
+        time && (React__default.createElement(Grid, { item: true, className: 'time' },
+            React__default.createElement(Grid, { container: true, direction: 'column', className: 'time-container' },
+                React__default.createElement(Grid, { item: true, className: 'time-title' },
+                    time === 'hour' && (value ? value.format('HH시') : '00시'),
+                    time === 'minute' && (value ? value.format('HH시 mm분') : '00시 00분'),
+                    time === 'second' && (value ? value.format('HH시 mm분 ss초') : '00시 00분 00초')),
+                React__default.createElement(Grid, { item: true, className: 'time-select-wrap' },
+                    React__default.createElement(Grid, { container: true, style: { height: '100%' } },
+                        React__default.createElement(Grid, { item: true, style: { position: 'relative', width: type === 'time' ? 240 : 80 } },
+                            React__default.createElement(PrivateTimeSelect, { ref: hourSelectRef, value: value && value.hour(), unit: '\uC2DC', list: hours, disableList: disableHours, cols: type === 'time' ? 3 : 1, onSelect: function (newValue) {
+                                    onChange('hour', value ? value.set('hour', newValue) : dayjs().startOf('date').set('hour', newValue));
+                                } })),
+                        (time === 'minute' || time === 'second') && (React__default.createElement(Grid, { item: true, style: { position: 'relative', width: type === 'time' ? 240 : 80 } },
+                            React__default.createElement(PrivateTimeSelect, { ref: minuteSelectRef, value: value && value.minute(), unit: '\uBD84', list: minutes, disableList: disableMinutes, cols: type === 'time' ? 3 : 1, listInterval: minuteInterval, onSelect: function (newValue) {
+                                    onChange('minute', value ? value.set('minute', newValue) : dayjs().startOf('date').set('minute', newValue));
+                                } }))),
+                        time === 'second' && (React__default.createElement(Grid, { item: true, style: { position: 'relative', width: type === 'time' ? 240 : 80 } },
+                            React__default.createElement(PrivateTimeSelect, { ref: secondSelectRef, value: value && value.second(), unit: '\uCD08', list: seconds, disableList: disableSeconds, cols: type === 'time' ? 3 : 1, listInterval: secondInterval, onSelect: function (newValue) {
+                                    onChange('second', value ? value.set('second', newValue) : dayjs().startOf('date').set('second', newValue));
+                                } }))))),
+                onClose && (React__default.createElement(Grid, { item: true, className: 'action-buttons' },
+                    React__default.createElement(Button, { variant: 'text', onClick: onClose }, "\uB2EB\uAE30"))))))));
+});
+PrivateStaticDateTimePicker.displayName = 'PrivateStaticDateTimePicker';
+PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultProps;var PrivateDateTimePicker = React__default.forwardRef(function (_a, ref) {
+    // ID --------------------------------------------------------------------------------------------------------------
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
+    //--------------------------------------------------------------------------------------------------------------------
+    name = _a.name, type = _a.type, time = _a.time, initValue = _a.value, initData = _a.data, initLabel = _a.label, labelIcon = _a.labelIcon, initFormat = _a.format, initFormValueFormat = _a.formValueFormat, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, width = _a.width, initError = _a.error, initHelperText = _a.helperText, minDate = _a.minDate, maxDate = _a.maxDate, disableFuture = _a.disableFuture, disablePast = _a.disablePast, exceptValue = _a.exceptValue, icon = _a.icon, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, align = _a.align, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, minuteInterval = _a.minuteInterval, secondInterval = _a.secondInterval, readOnlyInput = _a.readOnlyInput, hidden = _a.hidden, onChange = _a.onChange, onValidate = _a.onValidate, 
+    //--------------------------------------------------------------------------------------------------------------------
+    className = _a.className, initStyle = _a.style, sx = _a.sx, otherProps = __rest$4(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "type", "time", "value", "data", "label", "labelIcon", "format", "formValueFormat", "required", "readOnly", "disabled", "width", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "exceptValue", "icon", "startAdornment", "endAdornment", "align", "hours", "minutes", "seconds", "minuteInterval", "secondInterval", "readOnlyInput", "hidden", "onChange", "onValidate", "className", "style", "sx"]);
+    var id = useId();
+    // Ref -------------------------------------------------------------------------------------------------------------
+    var privateStaticDateTimePickerRef = useRef(null);
+    var textFieldInputRef = useRef();
+    var closeTimeoutRef = useRef();
+    var mouseDownTimeRef = useRef();
+    var datePickerErrorRef = useRef(null);
+    var openValueRef = useRef(null);
+    // FormState -------------------------------------------------------------------------------------------------------
+    var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColWithHelperText = _b.formColWithHelperText, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
+    // Memo - FormState ------------------------------------------------------------------------------------------------
+    var variant = useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
+    var size = useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
+    var color = useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
+    var focused = useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
+    var labelShrink = useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
+    var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
+    // State - open ----------------------------------------------------------------------------------------------------
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    // State -----------------------------------------------------------------------------------------------------------
+    var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
+    var _e = useState(null), timeError = _e[0], setTimeError = _e[1];
+    var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
+    var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
+    var _h = useAutoUpdateState$1(initData), data = _h[0], setData = _h[1];
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var label = useMemo(function () {
+        if (labelIcon) {
+            return React__default.createElement(IconText, { icon: labelIcon }, initLabel);
+        }
+        else {
+            return initLabel;
+        }
+    }, [initLabel, labelIcon]);
+    var format = useMemo(function () {
+        if (initFormat) {
+            return initFormat;
+        }
+        else {
+            return getDateTimeFormat(type, time);
+        }
+    }, [initFormat, time, type]);
+    var formValueFormat = useMemo(function () {
+        if (initFormValueFormat) {
+            return initFormValueFormat;
+        }
+        else {
+            return getDateTimeFormValueFormat(type, time);
+        }
+    }, [initFormValueFormat, time, type]);
+    var availableDate = useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [disableFuture, disablePast, maxDate, minDate]);
+    // State - style ---------------------------------------------------------------------------------------------------
+    var style = useAutoUpdateState$1(useCallback(function () {
+        if (width != null) {
+            return __assign$7(__assign$7({}, initStyle), { width: width });
+        }
+        else {
+            return initStyle;
+        }
+    }, [initStyle, width]))[0];
+    // Function - getFinalValue ----------------------------------------------------------------------------------------
+    var getFinalValue = useCallback(function (value) {
+        return value;
+    }, []);
+    // State - value ---------------------------------------------------------------------------------------------------
+    var _j = useAutoUpdateState$1(initValue || null, getFinalValue), value = _j[0], setValue = _j[1];
+    var _k = useState(null), inputValue = _k[0], setInputValue = _k[1];
+    // Effect ----------------------------------------------------------------------------------------------------------
+    useEffect(function () {
+        if (value !== initValue) {
+            if (onChange)
+                onChange(value);
+            onValueChange(name, value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useFirstSkipEffect$1(function () {
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
+    useEffect(function () {
+        setInputValue(value);
+    }, [value]);
+    useFirstSkipEffect$1(function () {
+        if (error && !timeError)
+            validate(value);
+    }, [timeError]);
+    useFirstSkipEffect$1(function () {
+        if (open) {
+            openValueRef.current = value;
+        }
+        else {
+            if (openValueRef.current !== value) {
+                var runOnRequestSearchSubmit = void 0;
+                if (openValueRef.current && value) {
+                    runOnRequestSearchSubmit = !openValueRef.current.isSame(value, 'second');
+                }
+                else {
+                    runOnRequestSearchSubmit = true;
+                }
+                if (runOnRequestSearchSubmit) {
+                    onRequestSearchSubmit(name, value);
+                }
+            }
+        }
+    }, [open]);
+    useEffect(function () {
+        if (type !== 'time' && time && value && (availableDate[0] || availableDate[1])) {
+            var availableDateVal = getAvailableDateVal(availableDate, type, time);
+            var valueVal = getDateValForAvailableDate(value, type, time);
+            var timeError_1 = null;
+            if (availableDateVal[0] && valueVal < availableDateVal[0]) {
+                timeError_1 = 'minDate';
+            }
+            if (timeError_1 == null && availableDateVal[1] && valueVal > availableDateVal[1]) {
+                timeError_1 = 'maxDate';
+            }
+            setTimeError(timeError_1);
+        }
+        else {
+            setTimeError(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var wrapStyle = useMemo(function () { return ({
+        display: hidden ? 'none' : fullWidth ? 'block' : 'inline-block',
+        flex: fullWidth ? 1 : undefined,
+    }); }, [hidden, fullWidth]);
+    // Function - focus ------------------------------------------------------------------------------------------------
+    var focus = useCallback(function () {
+        var _a;
+        (_a = textFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [textFieldInputRef]);
+    // Function - setErrorHelperText -----------------------------------------------------------------------------------
+    var setErrorHelperText = useCallback(function (error, helperText) {
+        setError(error);
+        setHelperText(helperText);
+    }, [setError, setHelperText]);
+    // Function - validate ---------------------------------------------------------------------------------------------
+    var validate = useCallback(function (value) {
+        if (required && empty(value)) {
+            setErrorHelperText(true, '필수 입력 항목입니다.');
+            return false;
+        }
+        if (value && !value.isValid()) {
+            setErrorHelperText(true, '형식이 일치하지 않습니다.');
+            return false;
+        }
+        if (datePickerErrorRef.current) {
+            setErrorHelperText(true, getDateValidationErrorText(datePickerErrorRef.current));
+            return false;
+        }
+        if (timeError) {
+            setErrorHelperText(true, getDateValidationErrorText(timeError));
+            return false;
+        }
+        if (onValidate) {
+            var onValidateResult = onValidate(value);
+            if (onValidateResult != null && onValidateResult !== true) {
+                setErrorHelperText(true, onValidateResult);
+                return false;
+            }
+        }
+        setErrorHelperText(false, initHelperText);
+        return true;
+    }, [required, timeError, onValidate, setErrorHelperText, initHelperText]);
+    // Commands --------------------------------------------------------------------------------------------------------
+    useLayoutEffect(function () {
+        if (ref || onAddValueItem) {
+            var lastValue_1 = value;
+            var lastData_1 = data;
+            var lastDisabled_1 = !!disabled;
+            var commands = {
+                getType: function () { return 'default'; },
+                getName: function () { return name; },
+                getReset: function () { return getFinalValue(initValue || null); },
+                reset: function () {
+                    lastValue_1 = getFinalValue(initValue || null);
+                    setValue(lastValue_1);
+                },
+                getValue: function () { return lastValue_1; },
+                setValue: function (value) {
+                    lastValue_1 = getFinalValue(value);
+                    setValue(lastValue_1);
+                },
+                getData: function () { return lastData_1; },
+                setData: function (data) {
+                    lastData_1 = data;
+                    setData(data);
+                },
+                isExceptValue: function () { return !!exceptValue; },
+                isDisabled: function () { return lastDisabled_1; },
+                setDisabled: function (disabled) {
+                    lastDisabled_1 = disabled;
+                    setDisabled(disabled);
+                },
+                focus: focus,
+                focusValidate: focus,
+                validate: function () { return validate(value); },
+                setError: function (error, errorText) {
+                    return setErrorHelperText(error, error ? errorText : initHelperText);
+                },
+                getFormValueFormat: function () { return formValueFormat; },
+            };
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(commands);
+                }
+                else {
+                    ref.current = commands;
+                }
+            }
+            if (onAddValueItem)
+                onAddValueItem(id, commands);
+            return function () {
+                if (ref) {
+                    if (typeof ref === 'function') {
+                        ref(null);
+                    }
+                    else {
+                        ref.current = null;
+                    }
+                }
+                if (onRemoveValueItem)
+                    onRemoveValueItem(id);
+            };
+        }
+    }, [
+        name,
+        initValue,
+        value,
+        getFinalValue,
+        exceptValue,
+        disabled,
+        focus,
+        validate,
+        formValueFormat,
+        ref,
+        onAddValueItem,
+        onRemoveValueItem,
+        id,
+        setValue,
+        setDisabled,
+        setErrorHelperText,
+        initHelperText,
+        data,
+        setData,
+    ]);
+    // Event Handler ---------------------------------------------------------------------------------------------------
+    var handleChange = useCallback(function (unit, newValue, keyboardInputValue) {
+        var _a, _b, _c;
+        var updateValue = true;
+        if (notEmpty(keyboardInputValue)) {
+            if (newValue) {
+                if (!newValue.isValid()) {
+                    updateValue = false;
+                }
+            }
+        }
+        var finalValue = newValue;
+        if (updateValue) {
+            if (type !== 'time' && finalValue != null && keyboardInputValue == null) {
+                var checkResult = checkDateAvailable(finalValue, availableDate, type, time);
+                if (checkResult !== 'available') {
+                    var availableDateDate = getAvailableDate(availableDate, type, time);
+                    if (checkResult === 'min') {
+                        if (availableDateDate[0])
+                            finalValue = availableDateDate[0];
+                    }
+                    else if (checkResult === 'max') {
+                        if (availableDateDate[1])
+                            finalValue = availableDateDate[1];
+                    }
+                }
+            }
+            var runOnRequestSearchSubmit_1 = false;
+            if (notEmpty(keyboardInputValue)) {
+                if (!time || unit !== 'action_date') {
+                    runOnRequestSearchSubmit_1 = !open; // 팝업창 열리지 않은 상태에서 날짜 키보드로 변경
+                    setOpen(false);
+                }
+            }
+            else if (time) {
+                if (time === unit)
+                    setOpen(false);
+            }
+            setValue(finalValue);
+            nextTick(function () {
+                onValueChangeByUser(name, finalValue);
+                if (runOnRequestSearchSubmit_1) {
+                    onRequestSearchSubmit(name, finalValue);
+                }
+            });
+            if (time) {
+                if (finalValue) {
+                    switch (unit) {
+                        case 'date':
+                        case 'action_date':
+                            (_a = privateStaticDateTimePickerRef.current) === null || _a === void 0 ? void 0 : _a.timeSelectScrollToDate(finalValue);
+                            break;
+                        case 'hour':
+                            (_b = privateStaticDateTimePickerRef.current) === null || _b === void 0 ? void 0 : _b.timeSelectScrollToDate(finalValue, ['minute', 'second']);
+                            break;
+                        case 'minute':
+                            (_c = privateStaticDateTimePickerRef.current) === null || _c === void 0 ? void 0 : _c.timeSelectScrollToDate(finalValue, ['second']);
+                            break;
+                    }
+                }
+            }
+        }
+        setInputValue(finalValue);
+    }, [type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
+    var handleContainerFocus = useCallback(function () {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = undefined;
+        }
+    }, []);
+    var handleContainerBlur = useCallback(function () {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = undefined;
+        }
+        if (!mouseDownTimeRef.current || new Date().getTime() - mouseDownTimeRef.current > 100) {
+            closeTimeoutRef.current = setTimeout(function () {
+                closeTimeoutRef.current = undefined;
+                setOpen(false);
+            }, 10);
+        }
+    }, []);
+    var handleContainerMouseDown = useCallback(function () {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = undefined;
+        }
+        mouseDownTimeRef.current = new Date().getTime();
+    }, []);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var slotProps = useMemo(function () {
+        var textFieldInputLabelProps = {};
+        if (labelShrink) {
+            textFieldInputLabelProps.shrink = labelShrink;
+        }
+        var readOnly = readOnlyInput;
+        var inputProps = {
+            readOnly: readOnly,
+        };
+        if (readOnly) {
+            inputProps.tabIndex = -1;
+            inputProps.className = classNames$1(inputProps.className, 'Mui-disabled');
+        }
+        var muiInputProps = { endAdornment: undefined };
+        if (startAdornment || icon || muiInputProps.startAdornment) {
+            muiInputProps.startAdornment = (React__default.createElement(React__default.Fragment, null,
+                icon && (React__default.createElement(InputAdornment, { position: 'start' },
+                    React__default.createElement(FormIcon, { fontSize: 'small' }, icon))),
+                startAdornment && React__default.createElement(InputAdornment, { position: 'start' }, startAdornment),
+                muiInputProps.startAdornment));
+        }
+        if (endAdornment) {
+            muiInputProps.endAdornment = (React__default.createElement(React__default.Fragment, null, endAdornment && React__default.createElement(InputAdornment, { position: 'end' }, endAdornment)));
+        }
+        return {
+            textField: {
+                className: classNames$1('input-text-field', "align-".concat(align)),
+                inputRef: function (ref) {
+                    textFieldInputRef.current = ref;
+                },
+                variant: variant,
+                size: size,
+                color: color,
+                focused: focused,
+                InputLabelProps: textFieldInputLabelProps,
+                InputProps: muiInputProps,
+                inputProps: inputProps,
+                required: required,
+                fullWidth: fullWidth,
+                helperText: undefined,
+                error: !!error || !!timeError,
+                style: style,
+                sx: sx,
+                onFocus: function () {
+                    setOpen(true);
+                },
+                onClick: function () {
+                    setOpen(true);
+                },
+            },
+        };
+    }, [
+        align,
+        color,
+        endAdornment,
+        error,
+        focused,
+        fullWidth,
+        icon,
+        labelShrink,
+        readOnlyInput,
+        required,
+        size,
+        startAdornment,
+        style,
+        sx,
+        timeError,
+        variant,
+    ]);
+    // Render ----------------------------------------------------------------------------------------------------------
+    return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React__default.createElement(ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
+            React__default.createElement("div", { className: classNames$1(className, 'PrivateDateTimePicker'), style: wrapStyle, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
+                React__default.createElement(PrivateStyledTooltip, { open: disabled || readOnly ? false : open, PopperProps: {
+                        modifiers: [
+                            {
+                                name: 'offset',
+                                options: {
+                                    offset: [0, error && helperText ? 8 : -14],
+                                },
+                            },
+                        ],
+                    }, title: React__default.createElement(PrivateStaticDateTimePicker, __assign$7({}, otherProps, { ref: privateStaticDateTimePickerRef, type: type, time: time, value: value, availableDate: availableDate, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, hours: hours, minutes: minutes, seconds: seconds, minuteInterval: minuteInterval, secondInterval: secondInterval, onChange: handleChange, onAccept: function () { return !time && setOpen(false); }, onClose: function () { return setOpen(false); } })) },
+                    React__default.createElement("div", { style: { display: fullWidth ? 'block' : 'inline-block' } },
+                        React__default.createElement(DesktopDateTimePicker, __assign$7({ value: inputValue, label: label, open: false, format: format, disabled: disabled, readOnly: readOnly, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onClose: function () { return setOpen(false); }, onError: function (reason) { return (datePickerErrorRef.current = reason); }, onChange: function (newValue) { return handleChange('date', newValue); }, slotProps: slotProps }, otherProps)))),
+                !formColWithHelperText && helperText && (React__default.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, helperText))))));
+});
+PrivateDateTimePicker.displayName = 'PrivateDateTimePicker';
+PrivateDateTimePicker.defaultProps = PrivateDateTimePickerDefaultProps;var PrivateAlertDialogDefaultProps = {
     color: 'primary',
 };var PrivateAlertDialog = function (_a) {
     var color = _a.color, open = _a.open, title = _a.title, content = _a.content, onClose = _a.onClose;
@@ -10843,7 +11522,7 @@ FormDatePicker.defaultProps = FormDatePickerDefaultProps;var FormDateTimePickerD
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormContextProvider, { value: __assign$7({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default.createElement(PrivateDatePicker, __assign$7({ className: classNames$1(className, 'FormDateTimePicker') }, props, { ref: ref, type: 'date_time' }))));
+        React__default.createElement(PrivateDateTimePicker, __assign$7({ className: classNames$1(className, 'FormDateTimePicker') }, props, { ref: ref, type: 'date_time' }))));
 });
 FormDateTimePicker.displayName = 'FormDateTimePicker';
 FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePickerDefaultProps = {};var FormTimePicker = React__default.forwardRef(function (_a, ref) {
@@ -10857,7 +11536,7 @@ FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePic
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormContextProvider, { value: __assign$7({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default.createElement(PrivateDatePicker, __assign$7({ className: classNames$1(className, 'FormTimePicker') }, props, { ref: ref, type: 'time' }))));
+        React__default.createElement(PrivateDateTimePicker, __assign$7({ className: classNames$1(className, 'FormTimePicker') }, props, { ref: ref, type: 'time' }))));
 });
 FormTimePicker.displayName = 'FormTimePicker';
 FormTimePicker.defaultProps = FormTimePickerDefaultProps;var FormDateRangePickerDefaultProps = {
@@ -11954,7 +12633,9 @@ var FormDateRangePicker = React__default.forwardRef(function (_a, ref) {
                 !formColWithHelperText && helperText && (React__default.createElement(FormHelperText, { error: error || startError || endError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, helperText))))));
 });
 FormDateRangePicker.displayName = 'FormDateRangePicker';
-FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileDefaultProps = {};var LinkDialogDefaultProps = {};var LinkDialog = function (_a) {
+FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileDefaultProps = {
+    value: '',
+};var LinkDialogDefaultProps = {};var LinkDialog = function (_a) {
     // Ref -------------------------------------------------------------------------------------------------------------
     var open = _a.open, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onClose = _a.onClose;
     var inputRef = useRef();
@@ -12029,7 +12710,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
     var fileUploadBtnRef = useRef(null);
     var linkBtnRef = useRef(null);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateState$1(initValue), value = _c[0], setValue = _c[1];
+    var _c = useAutoUpdateState$1(initValue || ''), value = _c[0], setValue = _c[1];
     var fileValue = useState('')[0];
     useFirstSkipEffect$1(function () {
         if (error)
@@ -12102,9 +12783,9 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
         var commands = {
             getType: function () { return 'FormFile'; },
             getName: function () { return name; },
-            getReset: function () { return initValue; },
+            getReset: function () { return initValue || ''; },
             reset: function () {
-                lastValue = initValue;
+                lastValue = initValue || '';
                 setValue(lastValue);
             },
             getValue: function () { return lastValue; },
@@ -12418,7 +13099,7 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
         if (preview && value) {
             return (React__default.createElement("a", { href: value, target: '_blank' },
                 React__default.createElement(Tooltip, { title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } },
-                        React__default.createElement("img", { src: value, style: { maxWidth: '100%', verticalAlign: 'middle' } })) },
+                        React__default.createElement("img", { src: value, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' })) },
                     React__default.createElement("img", { className: 'preview-img', src: value, style: { maxHeight: previewMaxHeight || undefined }, alt: '' }))));
         }
     }, [preview, previewMaxHeight, value]);