@pdg/react-form 1.0.77 → 1.0.79

package/dist/index.js

@@ -849,6 +849,20 @@ function AutoTypeForwardRef(render) {
                     else
                         throw new Error("'".concat(name, "' \uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."));
                 },
+                isHidden: function (name) {
+                    var valueItem = findValueItem_1(name);
+                    if (valueItem)
+                        return valueItem.isHidden();
+                    else
+                        throw new Error("'".concat(name, "' \uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."));
+                },
+                setHidden: function (name, hidden) {
+                    var valueItem = findValueItem_1(name);
+                    if (valueItem)
+                        valueItem.setHidden(hidden);
+                    else
+                        throw new Error("'".concat(name, "' \uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."));
+                },
                 focus: function (name) {
                     var valueItem = findValueItem_1(name);
                     if (valueItem)
@@ -962,9 +976,9 @@ FormIcon.defaultProps = FormIconDefaultProps;var FormButton = React.forwardRef(f
         children));
 });
 FormButton.displayName = 'FormButton';
-FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconFormIcon = material.styled(FormIcon)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  vertical-align: middle;\n  margin-right: 3px;\n  margin-top: -4px;\n  margin-bottom: -2px;\n"], ["\n  vertical-align: middle;\n  margin-right: 3px;\n  margin-top: -4px;\n  margin-bottom: -2px;\n"])));
-var ChildrenSpan = material.styled('span')(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  vertical-align: middle;\n"], ["\n  vertical-align: middle;\n"])));
-var templateObject_1$f, templateObject_2$7;var FormLabel = React.forwardRef(function (_a, ref) {
+FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconFormIcon = material.styled(FormIcon)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  vertical-align: middle;\n  margin-right: 3px;\n  margin-top: -4px;\n  margin-bottom: -2px;\n"], ["\n  vertical-align: middle;\n  margin-right: 3px;\n  margin-top: -4px;\n  margin-bottom: -2px;\n"])));
+var ChildrenSpan = material.styled('span')(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  vertical-align: middle;\n"], ["\n  vertical-align: middle;\n"])));
+var templateObject_1$g, templateObject_2$8;var FormLabel = React.forwardRef(function (_a, ref) {
     // Use ---------------------------------------------------------------------------------------------------------------
     var children = _a.children, icon = _a.icon, size = _a.size, style = _a.style, error = _a.error, warning = _a.warning, props = __rest$4(_a, ["children", "icon", "size", "style", "error", "warning"]);
     var theme = material.useTheme();
@@ -984,7 +998,7 @@ var templateObject_1$f, templateObject_2$7;var FormLabel = React.forwardRef(func
 FormLabel.displayName = 'FormLabel';
 FormLabel.defaultProps = FormLabelDefaultProps;var FormBlockDefaultProps = {};var FormDividerDefaultProps = {
     lineVerticalMargin: 9,
-};var StyledLineBox = material.styled(material.Box)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"], ["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"])));
+};var StyledLineBox = material.styled(material.Box)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"], ["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"])));
 var StyledErrorLineBox = material.styled(material.Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -1007,7 +1021,7 @@ var StyledWarningLineBox = material.styled(material.Box)(function (_a) {
         opacity: 0.4,
     });
 });
-var templateObject_1$e;var DEFAULT_LINE_STYLE = { flex: 1, position: 'relative' };
+var templateObject_1$f;var DEFAULT_LINE_STYLE = { flex: 1, position: 'relative' };
 var FormDivider = React.forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
     var initSize = _a.size, 
@@ -1124,8 +1138,8 @@ FormDivider.defaultProps = FormDividerDefaultProps;function useFirstSkipEffect$1
         }
     }, []);
     return [_state.current, setState];
-}var StyledWrapGrid$1 = material.styled(material.Grid)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var templateObject_1$d;var FormBlock = React.forwardRef(function (_a, ref) {
+}var StyledWrapGrid$1 = material.styled(material.Grid)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var templateObject_1$e;var FormBlock = React.forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
@@ -1177,8 +1191,8 @@ var templateObject_1$d;var FormBlock = React.forwardRef(function (_a, ref) {
                                 React.createElement(material.Grid, { className: 'FormBlock-content', container: true, spacing: spacing }, children)))))))));
 });
 FormBlock.displayName = 'FormBlock';
-FormBlock.defaultProps = FormBlockDefaultProps;var FormRowDefaultProps = {};var StyledWrapGrid = material.styled(material.Grid)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var templateObject_1$c;var FormRow = React.forwardRef(function (_a, ref) {
+FormBlock.defaultProps = FormBlockDefaultProps;var FormRowDefaultProps = {};var StyledWrapGrid = material.styled(material.Grid)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var templateObject_1$d;var FormRow = React.forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
@@ -2211,9 +2225,9 @@ var isDOMElement = function (element) {
                     React.createElement(material.FormHelperText, { component: 'div', error: error, style: { marginLeft: helperTextShift ? 14 : 5 } }, helperText)))))));
 });
 FormCol.displayName = 'FormCol';
-FormCol.defaultProps = FormColDefaultProps;var FormBodyDefaultProps = {};var StyledContainerDiv = material.styled('div')(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n"], ["\n  flex: 1;\n  position: relative;\n"])));
-var StyledContentDiv = material.styled('div')(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"])));
-var templateObject_1$b, templateObject_2$6;var FormBody = function (_a) {
+FormCol.defaultProps = FormColDefaultProps;var FormBodyDefaultProps = {};var StyledContainerDiv = material.styled('div')(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n"], ["\n  flex: 1;\n  position: relative;\n"])));
+var StyledContentDiv = material.styled('div')(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"])));
+var templateObject_1$c, templateObject_2$7;var FormBody = function (_a) {
     // Ref ---------------------------------------------------------------------------------------------------------------
     var children = _a.children, hidden = _a.hidden;
     var containerRef = React.useRef(null);
@@ -2290,7 +2304,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     var _b;
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, helperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, hidden = _a.hidden, disableReturnKey = _a.disableReturnKey, 
+    name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, helperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, initHidden = _a.hidden, disableReturnKey = _a.disableReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, 
     //----------------------------------------------------------------------------------------------------------------
@@ -2314,7 +2328,8 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     var _e = React.useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
     var _f = React.useState(false), showClear = _f[0], setShowClear = _f[1];
     var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState$1(initData), data = _h[0], setData = _h[1];
+    var _h = useAutoUpdateState$1(initHidden), hidden = _h[0], setHidden = _h[1];
+    var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
     // Memo - muiInputLabelProps ---------------------------------------------------------------------------------------
     var muiInputLabelProps = React.useMemo(function () {
         if (labelShrink || placeholder) {
@@ -2363,7 +2378,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
         return onValue ? onValue(value) : value;
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _j = useAutoUpdateState$1(initValue, getFinalValue), value = _j[0], setValue = _j[1];
+    var _k = useAutoUpdateState$1(initValue, getFinalValue), value = _k[0], setValue = _k[1];
     React.useEffect(function () {
         setShowClear(clear ? notEmpty(value) : false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2481,6 +2496,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             var lastValue_1 = value;
             var lastData_1 = data;
             var lastDisabled_1 = !!disabled;
+            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'default'; },
                 getName: function () { return name; },
@@ -2505,6 +2521,11 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
                     lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
+                isHidden: function () { return lastHidden_1; },
+                setHidden: function (hidden) {
+                    lastHidden_1 = hidden;
+                    setHidden(hidden);
+                },
                 focus: focus,
                 focusValidate: focus,
                 validate: function () { return validate(lastValue_1); },
@@ -2554,6 +2575,8 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
         setDisabled,
         setErrorErrorHelperText,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (e) {
@@ -2804,7 +2827,7 @@ FormTag.defaultProps = FormTagDefaultProps;var FormEmailDefaultProps = __assign$
 });
 FormEmail.displayName = 'FormEmail';
 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 = material.styled(material.InputAdornment)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
+styleInject(css_248z$i);var StyledEyeInputAdornment = material.styled(material.InputAdornment)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
 var FormPassword = React.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"]);
@@ -2837,7 +2860,7 @@ var FormPassword = React.forwardRef(function (_a, ref) {
 });
 FormPassword.displayName = 'FormPassword';
 FormPassword.defaultProps = FormPasswordDefaultProps;
-var templateObject_1$a;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.forwardRef(function (_a, ref) {
+var templateObject_1$b;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.forwardRef(function (_a, ref) {
     // Event Handler ---------------------------------------------------------------------------------------------------
     var className = _a.className, onValue = _a.onValue, props = __rest$4(_a, ["className", "onValue"]);
     var handleValue = React.useCallback(function (value) {
@@ -4633,9 +4656,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initChecked = _a.checked, initInputRef = _a.inputRef, initAction = _a.action, readOnly = _a.readOnly, initDisabled = _a.disabled, text = _a.text, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, initUncheckedValue = _a.uncheckedValue, exceptValue = _a.exceptValue, hidden = _a.hidden, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initChecked = _a.checked, initInputRef = _a.inputRef, initAction = _a.action, readOnly = _a.readOnly, initDisabled = _a.disabled, initHidden = _a.hidden, text = _a.text, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, initUncheckedValue = _a.uncheckedValue, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
-    className = _a.className, initStyle = _a.style, sx = _a.sx, props = __rest$4(_a, ["variant", "size", "color", "focused", "fullWidth", "name", "labelIcon", "label", "checked", "inputRef", "action", "readOnly", "disabled", "text", "error", "helperText", "value", "data", "uncheckedValue", "exceptValue", "hidden", "onChange", "onValidate", "className", "style", "sx"]);
+    className = _a.className, initStyle = _a.style, sx = _a.sx, props = __rest$4(_a, ["variant", "size", "color", "focused", "fullWidth", "name", "labelIcon", "label", "checked", "inputRef", "action", "readOnly", "disabled", "hidden", "text", "error", "helperText", "value", "data", "uncheckedValue", "exceptValue", "onChange", "onValidate", "className", "style", "sx"]);
     var id = React.useId();
     // Use ---------------------------------------------------------------------------------------------------------------
     var theme = material.useTheme();
@@ -4663,9 +4686,10 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
     var _f = useAutoUpdateState$1(initError), error = _f[0], setError = _f[1];
     var _g = React.useState(), errorHelperText = _g[0], setErrorHelperText = _g[1];
     var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
-    var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
+    var _j = useAutoUpdateState$1(initHidden), hidden = _j[0], setHidden = _j[1];
+    var _k = useAutoUpdateState$1(initData), data = _k[0], setData = _k[1];
     // State - checked -------------------------------------------------------------------------------------------------
-    var _k = useAutoUpdateState$1(!!initChecked), checked = _k[0], setChecked = _k[1];
+    var _l = useAutoUpdateState$1(!!initChecked), checked = _l[0], setChecked = _l[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(checked);
@@ -4715,6 +4739,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
         var lastData = data;
         var lastUncheckedValue = uncheckedValue == null ? 0 : uncheckedValue;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormCheckbox'; },
             getName: function () { return name; },
@@ -4749,6 +4774,11 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(checked); },
@@ -4797,6 +4827,8 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (e, checked) {
@@ -4820,7 +4852,7 @@ FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultPr
 };var PADDING_LEFT = 3;
 var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
     // type ------------------------------------------------------------------------------------------------------------
-    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, hidden = _a.hidden, 
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, initHidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, initWidth = _a.width, labelIcon = _a.labelIcon, label = _a.label, inline = _a.inline, initLoading = _a.loading, nowrap = _a.nowrap, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, onLoadItems = _a.onLoadItems, onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -4848,13 +4880,14 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
     var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
     var _f = React.useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
     var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = React.useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
-    var _j = useAutoUpdateState$1(initLoading), loading = _j[0], setLoading = _j[1];
-    var _k = useAutoUpdateState$1(initWidth || '100%'), width = _k[0], setWidth = _k[1];
-    var _l = React.useState(), formColWrapRect = _l[0], setFormColWrapRect = _l[1];
-    var _m = useAutoUpdateState$1(initData), data = _m[0], setData = _m[1];
+    var _h = useAutoUpdateState$1(initHidden), hidden = _h[0], setHidden = _h[1];
+    var _j = React.useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
+    var _k = useAutoUpdateState$1(initLoading), loading = _k[0], setLoading = _k[1];
+    var _l = useAutoUpdateState$1(initWidth || '100%'), width = _l[0], setWidth = _l[1];
+    var _m = React.useState(), formColWrapRect = _m[0], setFormColWrapRect = _m[1];
+    var _o = useAutoUpdateState$1(initData), data = _o[0], setData = _o[1];
     // State - radioGroupNoWrapRect (ResizeDetector) -------------------------------------------------------------------
-    var _o = React.useState(), radioGroupNoWrapRect = _o[0], setRadioGroupNoWrapRect = _o[1];
+    var _p = React.useState(), radioGroupNoWrapRect = _p[0], setRadioGroupNoWrapRect = _p[1];
     var resizeWidthDetectorRef = useResizeDetector({
         handleWidth: true,
         handleHeight: false,
@@ -4864,13 +4897,13 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
         },
     }).ref;
     // State - height (ResizeDetector) ---------------------------------------------------------------------------------
-    var _p = useResizeDetector(), height = _p.height, resizeHeightDetectorRef = _p.ref;
+    var _q = useResizeDetector(), height = _q.height, resizeHeightDetectorRef = _q.ref;
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         return onValue ? onValue(value) : value;
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _q = useAutoUpdateState$1(initValue, getFinalValue), value = _q[0], setValue = _q[1];
+    var _r = useAutoUpdateState$1(initValue, getFinalValue), value = _r[0], setValue = _r[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -4979,6 +5012,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
         var lastItems = items;
         var lastLoading = loading;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormRadioGroup'; },
             getName: function () { return name; },
@@ -5003,6 +5037,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -5062,6 +5101,8 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
         setLoading,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     React.useEffect(function () {
         if (onLoadItems) {
@@ -5136,7 +5177,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
     // type ------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, hidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, initHidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -5194,7 +5235,8 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
     var _j = React.useState(), errorHelperText = _j[0], setErrorHelperText = _j[1];
     var _k = useAutoUpdateState$1(initLoading), loading = _k[0], setLoading = _k[1];
     var _l = useAutoUpdateState$1(initDisabled), disabled = _l[0], setDisabled = _l[1];
-    var _m = useAutoUpdateState$1(initData), data = _m[0], setData = _m[1];
+    var _m = useAutoUpdateState$1(initHidden), hidden = _m[0], setHidden = _m[1];
+    var _o = useAutoUpdateState$1(initData), data = _o[0], setData = _o[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var itemsValues = React.useMemo(function () {
         if (items) {
@@ -5280,7 +5322,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         return onValue ? onValue(finalValue) : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _o = useAutoUpdateState$1(initValue, getFinalValue), value = _o[0], setValue = _o[1];
+    var _p = useAutoUpdateState$1(initValue, getFinalValue), value = _p[0], setValue = _p[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     React.useEffect(function () {
         if (value !== initValue) {
@@ -5359,6 +5401,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
             var lastItems_1 = items;
             var lastLoading_1 = loading;
             var lastDisabled_1 = !!disabled;
+            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'FormToggleButtonGroup'; },
                 getName: function () { return name; },
@@ -5383,6 +5426,11 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
                     lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
+                isHidden: function () { return lastHidden_1; },
+                setHidden: function (hidden) {
+                    lastHidden_1 = hidden;
+                    setHidden(hidden);
+                },
                 focus: focus,
                 focusValidate: focus,
                 validate: function () { return validate(value); },
@@ -5451,6 +5499,8 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         setLoading,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (e, newValue) {
@@ -5561,7 +5611,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    precision = _a.precision, highlightSelectedOnly = _a.highlightSelectedOnly, icon = _a.icon, emptyIcon = _a.emptyIcon, max = _a.max, hidden = _a.hidden, 
+    precision = _a.precision, highlightSelectedOnly = _a.highlightSelectedOnly, icon = _a.icon, emptyIcon = _a.emptyIcon, max = _a.max, initHidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, readOnly = _a.readOnly, required = _a.required, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, onValue = _a.onValue, 
     //----------------------------------------------------------------------------------------------------------------
@@ -5582,19 +5632,20 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
     var _e = React.useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
     var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
-    var _g = useAutoUpdateState$1(initData), data = _g[0], setData = _g[1];
+    var _g = useAutoUpdateState$1(initHidden), hidden = _g[0], setHidden = _g[1];
+    var _h = useAutoUpdateState$1(initData), data = _h[0], setData = _h[1];
     // State - width, height -------------------------------------------------------------------------------------------
-    var _h = useResizeDetector({
+    var _j = useResizeDetector({
         targetRef: ratingRef,
         handleWidth: true,
         handleHeight: true,
-    }), width = _h.width, height = _h.height;
+    }), width = _j.width, height = _j.height;
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         return onValue ? onValue(value) : value;
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _j = useAutoUpdateState$1(initValue || 0, getFinalValue), value = _j[0], setValue = _j[1];
+    var _k = useAutoUpdateState$1(initValue || 0, getFinalValue), value = _k[0], setValue = _k[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -5649,6 +5700,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormRating'; },
             getName: function () { return name; },
@@ -5673,6 +5725,11 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -5718,6 +5775,8 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (e, value) {
@@ -7580,7 +7639,7 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
     // ---------------------------------------------------------------------------------------------------------------
     apiKey = _a.apiKey, toolbar = _a.toolbar, 
     //----------------------------------------------------------------------------------------------------------------
-    menubar = _a.menubar, height = _a.height, hidden = _a.hidden, onImageUpload = _a.onImageUpload, 
+    menubar = _a.menubar, height = _a.height, initHidden = _a.hidden, onImageUpload = _a.onImageUpload, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, readOnly = _a.readOnly, required = _a.required, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7611,7 +7670,8 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
     var _f = React.useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
     var _g = React.useState(false), initialized = _g[0], setInitialized = _g[1];
     var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
-    var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
+    var _j = useAutoUpdateState$1(initHidden), hidden = _j[0], setHidden = _j[1];
+    var _k = useAutoUpdateState$1(initData), data = _k[0], setData = _k[1];
     // Function - focus ------------------------------------------------------------------------------------------------
     var focus = React.useCallback(function () {
         var _a;
@@ -7644,6 +7704,7 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormTextEditor'; },
             getName: function () { return name; },
@@ -7668,6 +7729,11 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -7712,6 +7778,8 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
         data,
         setData,
         validate,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleEditorChange = React.useCallback(function (value) {
@@ -7784,7 +7852,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     // type ------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, hidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, initHidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7811,8 +7879,9 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     var _f = React.useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
     var _g = useAutoUpdateState$1(initLoading), loading = _g[0], setLoading = _g[1];
     var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
-    var _j = React.useState(undefined), inputValue = _j[0], setInputValue = _j[1];
-    var _k = useAutoUpdateState$1(initData), data = _k[0], setData = _k[1];
+    var _j = useAutoUpdateState$1(initHidden), hidden = _j[0], setHidden = _j[1];
+    var _k = React.useState(undefined), inputValue = _k[0], setInputValue = _k[1];
+    var _l = useAutoUpdateState$1(initData), data = _l[0], setData = _l[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var itemsValues = React.useMemo(function () {
         if (items) {
@@ -7885,8 +7954,8 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         return onValue ? onValue(finalValue) : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _l = useAutoUpdateState$1(initValue, getFinalValue), value = _l[0], setValue = _l[1];
-    var _m = React.useState(null), valueItem = _m[0], setValueItem = _m[1];
+    var _m = useAutoUpdateState$1(initValue, getFinalValue), value = _m[0], setValue = _m[1];
+    var _o = React.useState(null), valueItem = _o[0], setValueItem = _o[1];
     var componentValue = React.useMemo(function () {
         var finalValue = value;
         if (finalValue != null) {
@@ -8079,6 +8148,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             var lastItems_1 = items;
             var lastLoading_1 = loading;
             var lastDisabled_1 = !!disabled;
+            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'FormAutocomplete'; },
                 getName: function () { return name; },
@@ -8103,6 +8173,11 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
                     lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
+                isHidden: function () { return lastHidden_1; },
+                setHidden: function (hidden) {
+                    lastHidden_1 = hidden;
+                    setHidden(hidden);
+                },
                 focus: focus,
                 focusValidate: focus,
                 validate: function () { return validate(value); },
@@ -8171,6 +8246,8 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         setLoading,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (componentValue, reason, details) {
@@ -10473,7 +10550,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
     // 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, helperText = _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, 
+    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, helperText = _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, initHidden = _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 = React.useId();
@@ -10500,7 +10577,8 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
     var _e = React.useState(null), timeError = _e[0], setTimeError = _e[1];
     var _f = React.useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
     var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState$1(initData), data = _h[0], setData = _h[1];
+    var _h = useAutoUpdateState$1(initHidden), hidden = _h[0], setHidden = _h[1];
+    var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var label = React.useMemo(function () {
         if (labelIcon) {
@@ -10541,8 +10619,8 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
         return value;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _j = useAutoUpdateState$1(initValue || null, getFinalValue), value = _j[0], setValue = _j[1];
-    var _k = React.useState(null), inputValue = _k[0], setInputValue = _k[1];
+    var _k = useAutoUpdateState$1(initValue || null, getFinalValue), value = _k[0], setValue = _k[1];
+    var _l = React.useState(null), inputValue = _l[0], setInputValue = _l[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     React.useEffect(function () {
         if (value !== initValue) {
@@ -10652,6 +10730,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
             var lastValue_1 = value;
             var lastData_1 = data;
             var lastDisabled_1 = !!disabled;
+            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'default'; },
                 getName: function () { return name; },
@@ -10676,6 +10755,11 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
                     lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
+                isHidden: function () { return lastHidden_1; },
+                setHidden: function (hidden) {
+                    lastHidden_1 = hidden;
+                    setHidden(hidden);
+                },
                 focus: focus,
                 focusValidate: focus,
                 validate: function () { return validate(value); },
@@ -10726,6 +10810,8 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (unit, newValue, keyboardInputValue) {
@@ -11176,7 +11262,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
     // 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, helperText = _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, 
+    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, helperText = _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, initHidden = _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 = React.useId();
@@ -11203,7 +11289,8 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
     var _e = React.useState(null), timeError = _e[0], setTimeError = _e[1];
     var _f = React.useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
     var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState$1(initData), data = _h[0], setData = _h[1];
+    var _h = useAutoUpdateState$1(initHidden), hidden = _h[0], setHidden = _h[1];
+    var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var label = React.useMemo(function () {
         if (labelIcon) {
@@ -11244,8 +11331,8 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
         return value;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _j = useAutoUpdateState$1(initValue || null, getFinalValue), value = _j[0], setValue = _j[1];
-    var _k = React.useState(null), inputValue = _k[0], setInputValue = _k[1];
+    var _k = useAutoUpdateState$1(initValue || null, getFinalValue), value = _k[0], setValue = _k[1];
+    var _l = React.useState(null), inputValue = _l[0], setInputValue = _l[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     React.useEffect(function () {
         if (value !== initValue) {
@@ -11355,6 +11442,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
             var lastValue_1 = value;
             var lastData_1 = data;
             var lastDisabled_1 = !!disabled;
+            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'default'; },
                 getName: function () { return name; },
@@ -11379,6 +11467,11 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
                     lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
+                isHidden: function () { return lastHidden_1; },
+                setHidden: function (hidden) {
+                    lastHidden_1 = hidden;
+                    setHidden(hidden);
+                },
                 focus: focus,
                 focusValidate: focus,
                 validate: function () { return validate(value); },
@@ -11429,6 +11522,8 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (unit, newValue, keyboardInputValue) {
@@ -11722,9 +11817,9 @@ PrivateInputDatePicker.displayName = 'PrivateInputDatePicker';
 PrivateInputDatePicker.defaultProps = PrivateInputDatePickerDefaultProps;var PrivateYearRangePickerDefaultProps = {
     minYear: 2020,
     maxYear: 2050,
-};var PrivateYearRangePickerYearListDefaultProps = {};var PrivateYearRangePickerYearDefaultProps = {};var StyledContainer$6 = material.styled(material.Grid)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  padding: 4px;\n  position: relative;\n"], ["\n  padding: 4px;\n  position: relative;\n"])));
-var StyledButton$2 = material.styled(material.Button)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"], ["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"])));
-var templateObject_1$9, templateObject_2$5;var PrivateYearRangePickerYear = React.forwardRef(function (_a, ref) {
+};var PrivateYearRangePickerYearListDefaultProps = {};var PrivateYearRangePickerYearDefaultProps = {};var StyledContainer$6 = material.styled(material.Grid)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  padding: 4px;\n  position: relative;\n"], ["\n  padding: 4px;\n  position: relative;\n"])));
+var StyledButton$2 = material.styled(material.Button)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"], ["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"])));
+var templateObject_1$a, templateObject_2$6;var PrivateYearRangePickerYear = React.forwardRef(function (_a, ref) {
     var year = _a.year, disabled = _a.disabled, isDefault = _a.isDefault, selected = _a.selected, selectedStart = _a.selectedStart, selectedEnd = _a.selectedEnd, selectedTemp = _a.selectedTemp, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
     var className = React.useMemo(function () {
         return classNames$1(isDefault && 'default', selected && 'selected', selectedStart && 'selected-start', selectedEnd && 'selected-end', selectedTemp && 'selected-temp', disabled && 'disabled');
@@ -11733,8 +11828,8 @@ var templateObject_1$9, templateObject_2$5;var PrivateYearRangePickerYear = Reac
         React.createElement(StyledButton$2, { className: className, disabled: disabled, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, year)));
 });
 PrivateYearRangePickerYear.displayName = 'PrivateYearRangePickerYear';
-PrivateYearRangePickerYear.defaultProps = PrivateYearRangePickerYearDefaultProps;var StyledContainer$5 = material.styled(material.Grid)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"], ["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"])));
-var templateObject_1$8;var _lastCloseTime$1 = 0;
+PrivateYearRangePickerYear.defaultProps = PrivateYearRangePickerYearDefaultProps;var StyledContainer$5 = material.styled(material.Grid)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"], ["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"])));
+var templateObject_1$9;var _lastCloseTime$1 = 0;
 var PrivateYearRangePickerYearList = function (_a) {
     // Ref ---------------------------------------------------------------------------------------------------------------
     var value = _a.value, displayValue = _a.displayValue, selectType = _a.selectType, minYear = _a.minYear, maxYear = _a.maxYear, disablePast = _a.disablePast, disableFuture = _a.disableFuture, onChange = _a.onChange;
@@ -11850,14 +11945,16 @@ var PrivateYearRangePickerYearList = function (_a) {
         }, year: info.year, isDefault: info.isDefault, selected: info.selected, selectedStart: info.selectedStart, selectedEnd: info.selectedEnd, selectedTemp: info.selectedTemp, disabled: info.disabled, onClick: function () { return onChange(info.year); }, onMouseEnter: function () { return mouseOver(info.year); }, onMouseLeave: function () { return mouseOver(undefined); } })); })));
 };
 PrivateYearRangePickerYearList.displayName = 'PrivateYearRangePickerYearList';
-PrivateYearRangePickerYearList.defaultProps = PrivateYearRangePickerYearListDefaultProps;var StyledTitleContainer$1 = material.styled('div')(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"])));
-var StyledYear = material.styled('span')(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject([""], [""])));
-var StyledYearError = material.styled('span')(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+PrivateYearRangePickerYearList.defaultProps = PrivateYearRangePickerYearListDefaultProps;var StyledTitleContainer$1 = material.styled('div')(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"])));
+var StyledYear = material.styled('span')(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject([""], [""])));
+var StyledYearError = material.styled('span')(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.error.main;
 });
 var StyledTitleGap = material.styled('span')(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  padding: 0 7px;\n  opacity: 0.5;\n"], ["\n  padding: 0 7px;\n  opacity: 0.5;\n"])));
-var templateObject_1$7, templateObject_2$4, templateObject_3$2, templateObject_4$2;var DEFAULT_VALUE$5 = [null, null];
+var StyledActionContainer$1 = material.styled('div')(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n  &:empty {\n    display: none;\n  }\n"], ["\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n  &:empty {\n    display: none;\n  }\n"])));
+var StyledActionButton$1 = material.styled(material.Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-width: 0;\n  color: unset;\n  &:not(:first-child) {\n    margin-left: 5px;\n  }\n  &.disabled {\n    color: rgba(0, 0, 0, 0.5);\n  }\n"], ["\n  min-width: 0;\n  color: unset;\n  &:not(:first-child) {\n    margin-left: 5px;\n  }\n  &.disabled {\n    color: rgba(0, 0, 0, 0.5);\n  }\n"])));
+var templateObject_1$8, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6;var DEFAULT_VALUE$5 = [null, null];
 var PrivateYearRangePicker = function (_a) {
     // State -------------------------------------------------------------------------------------------------------------
     var selectType = _a.selectType, initValue = _a.value, initMinYear = _a.minYear, initMaxYear = _a.maxYear, disablePast = _a.disablePast, disableFuture = _a.disableFuture, hideHeader = _a.hideHeader, onChange = _a.onChange;
@@ -11901,6 +11998,28 @@ var PrivateYearRangePicker = function (_a) {
         displayValue[0] < minAvailableYear || displayValue[0] > maxAvailableYear,
         displayValue[1] < minAvailableYear || displayValue[1] > maxAvailableYear,
     ]; }, [displayValue, minAvailableYear, maxAvailableYear]);
+    // action button -----------------------------------------------------------------------------------------------------
+    var getActionButton = React.useCallback(function (fromYear, toYear, label) {
+        if (fromYear < minAvailableYear || toYear > maxAvailableYear) {
+            return undefined;
+        }
+        else {
+            var newValue_1 = [
+                Math.max(fromYear, minAvailableYear),
+                Math.min(toYear, maxAvailableYear),
+            ];
+            return (React.createElement(StyledActionButton$1, { variant: 'text', onClick: function () {
+                    setValue(newValue_1);
+                    onChange(newValue_1, 'end');
+                } }, label));
+        }
+    }, [maxAvailableYear, minAvailableYear, onChange, setValue]);
+    var actionButtons = React.useMemo(function () {
+        return (React.createElement(StyledActionContainer$1, null,
+            getActionButton(nowYear - 2, nowYear, '최근 3년'),
+            getActionButton(nowYear - 4, nowYear, '최근 5년'),
+            getActionButton(nowYear - 9, nowYear, '최근 10년')));
+    }, [getActionButton, nowYear]);
     // Event Handler -----------------------------------------------------------------------------------------------------
     var handleYearChange = React.useCallback(function (valueYear) {
         var newValue = __spreadArray([], value, true);
@@ -11951,25 +12070,26 @@ var PrivateYearRangePicker = function (_a) {
                 displayValue[1],
                 "\uB144")))),
         React.createElement("div", null,
-            React.createElement(PrivateYearRangePickerYearList, { value: value, selectType: selectType, displayValue: displayValue, minYear: minYear, maxYear: maxYear, disablePast: disablePast, disableFuture: disableFuture, onChange: handleYearChange }))));
+            React.createElement(PrivateYearRangePickerYearList, { value: value, selectType: selectType, displayValue: displayValue, minYear: minYear, maxYear: maxYear, disablePast: disablePast, disableFuture: disableFuture, onChange: handleYearChange })),
+        actionButtons));
 };
 PrivateYearRangePicker.displayName = 'PrivateYearRangePicker';
 PrivateYearRangePicker.defaultProps = PrivateYearRangePickerDefaultProps;var PrivateYearPickerDefaultProps = {
     minYear: 2020,
     maxYear: 2050,
-};var PrivateYearPickerYearListDefaultProps = {};var PrivateYearPickerYearDefaultProps = {};var StyledContainer$4 = material.styled(material.Grid)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  padding: 4px;\n  position: relative;\n"], ["\n  padding: 4px;\n  position: relative;\n"])));
-var StyledButton$1 = material.styled(material.Button)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"], ["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"])));
-var templateObject_1$6, templateObject_2$3;var PrivateYearPickerYear = React.forwardRef(function (_a, ref) {
-    var year = _a.year, disabled = _a.disabled, active = _a.active, isDefault = _a.isDefault, selected = _a.selected, selectedStart = _a.selectedStart, selectedEnd = _a.selectedEnd, selectedTemp = _a.selectedTemp, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+};var PrivateYearPickerYearListDefaultProps = {};var PrivateYearPickerYearDefaultProps = {};var StyledContainer$4 = material.styled(material.Grid)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  padding: 4px;\n  position: relative;\n"], ["\n  padding: 4px;\n  position: relative;\n"])));
+var StyledButton$1 = material.styled(material.Button)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n\n    &.range:not(.active) {\n      background-color: rgba(25, 118, 210, 0.8);\n    }\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"], ["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n\n    &.range:not(.active) {\n      background-color: rgba(25, 118, 210, 0.8);\n    }\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    border: 1px solid transparent;\n    background-color: rgba(66, 165, 245, 0.3);\n  }\n"])));
+var templateObject_1$7, templateObject_2$4;var PrivateYearPickerYear = React.forwardRef(function (_a, ref) {
+    var year = _a.year, disabled = _a.disabled, active = _a.active, range = _a.range, isDefault = _a.isDefault, selected = _a.selected, selectedStart = _a.selectedStart, selectedEnd = _a.selectedEnd, selectedTemp = _a.selectedTemp, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
     var className = React.useMemo(function () {
-        return classNames$1(isDefault && 'default', selected && 'selected', selectedStart && 'selected-start', selectedEnd && 'selected-end', selectedTemp && 'selected-temp', active && 'active', disabled && 'disabled');
-    }, [isDefault, selected, selectedStart, selectedEnd, selectedTemp, active, disabled]);
+        return classNames$1(range && 'range', isDefault && 'default', selected && 'selected', selectedStart && 'selected-start', selectedEnd && 'selected-end', selectedTemp && 'selected-temp', active && 'active', disabled && 'disabled');
+    }, [range, isDefault, selected, selectedStart, selectedEnd, selectedTemp, active, disabled]);
     return (React.createElement(StyledContainer$4, { className: 'PrivateYearPickerYear', ref: ref, item: true, xs: 4 },
         React.createElement(StyledButton$1, { className: className, disabled: disabled, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, year)));
 });
 PrivateYearPickerYear.displayName = 'PrivateYearPickerYear';
-PrivateYearPickerYear.defaultProps = PrivateYearPickerYearDefaultProps;var StyledContainer$3 = material.styled(material.Grid)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"], ["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"])));
-var templateObject_1$5;var _lastCloseTime = 0;
+PrivateYearPickerYear.defaultProps = PrivateYearPickerYearDefaultProps;var StyledContainer$3 = material.styled(material.Grid)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"], ["\n  width: 240px;\n  height: inherit;\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n"])));
+var templateObject_1$6;var _lastCloseTime = 0;
 var PrivateYearPickerYearList = function (_a) {
     // Ref ---------------------------------------------------------------------------------------------------------------
     var value = _a.value, minYear = _a.minYear, maxYear = _a.maxYear, disablePast = _a.disablePast, disableFuture = _a.disableFuture, selectFromYear = _a.selectFromYear, selectToYear = _a.selectToYear, onChange = _a.onChange;
@@ -12055,9 +12175,11 @@ var PrivateYearPickerYearList = function (_a) {
         var newYears = [];
         var startYear = selectFromYear ? selectFromYear : value ? value : 0;
         var endYear = selectToYear ? selectToYear : value ? value : 0;
+        var range = !!selectFromYear || !!selectToYear;
         for (var i = minYear; i <= maxYear; i += 1) {
             newYears.push({
                 year: i,
+                range: range,
                 isDefault: !value && !selectFromYear && !selectToYear && i === defaultYear,
                 active: (!!selectFromYear || !!selectToYear) && i === value,
                 selected: i >= startYear && i <= endYear,
@@ -12111,17 +12233,17 @@ var PrivateYearPickerYearList = function (_a) {
             else if (info.isDefault) {
                 defaultButtonRef.current = ref;
             }
-        }, year: info.year, isDefault: info.isDefault, active: info.active, selected: info.selected, selectedStart: info.selectedStart, selectedEnd: info.selectedEnd, selectedTemp: info.selectedTemp, disabled: info.disabled, onClick: function () { return onChange(info.year); }, onMouseEnter: function () { return mouseOver(info.year); }, onMouseLeave: function () { return mouseOver(undefined); } })); })));
+        }, year: info.year, range: info.range, isDefault: info.isDefault, active: info.active, selected: info.selected, selectedStart: info.selectedStart, selectedEnd: info.selectedEnd, selectedTemp: info.selectedTemp, disabled: info.disabled, onClick: function () { return onChange(info.year); }, onMouseEnter: function () { return mouseOver(info.year); }, onMouseLeave: function () { return mouseOver(undefined); } })); })));
 };
 PrivateYearPickerYearList.displayName = 'PrivateYearPickerYearList';
-PrivateYearPickerYearList.defaultProps = PrivateYearPickerYearListDefaultProps;var StyledTitleContainer = material.styled('div')(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"])));
-var StyledIconButton$1 = material.styled(material.IconButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"])));
-var StyledYearMonth$1 = material.styled('div')(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  flex: 1;\n  text-align: center;\n"], ["\n  flex: 1;\n  text-align: center;\n"])));
+PrivateYearPickerYearList.defaultProps = PrivateYearPickerYearListDefaultProps;var StyledTitleContainer = material.styled('div')(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"])));
+var StyledIconButton$1 = material.styled(material.IconButton)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"])));
+var StyledYearMonth$1 = material.styled('div')(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  flex: 1;\n  text-align: center;\n"], ["\n  flex: 1;\n  text-align: center;\n"])));
 var StyledYearMonthError$1 = material.styled('div')(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  flex: 1;\n  text-align: center;\n  color: ", ";\n"], ["\n  flex: 1;\n  text-align: center;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.error.main;
 });
-var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1;var PrivateYearPicker = function (_a) {
+var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1;var PrivateYearPicker = function (_a) {
     // State -------------------------------------------------------------------------------------------------------------
     var initValue = _a.value, initMinYear = _a.minYear, initMaxYear = _a.maxYear, disablePast = _a.disablePast, disableFuture = _a.disableFuture, hideHeader = _a.hideHeader, selectFromYear = _a.selectFromYear, selectToYear = _a.selectToYear, onChange = _a.onChange;
     var _b = useAutoUpdateState$1(initValue || null), value = _b[0], setValue = _b[1];
@@ -12217,13 +12339,13 @@ PrivateYearPicker.defaultProps = PrivateYearPickerDefaultProps;var PrivateMonthP
         year: 2050,
         month: 12,
     },
-};var PrivateMonthPickerMonthListDefaultProps = {};var PrivateMonthPickerMonthDefaultProps = {};var StyledContainer$2 = material.styled(material.Grid)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  padding: 4px;\n  position: relative;\n"], ["\n  padding: 4px;\n  position: relative;\n"])));
-var StyledButton = material.styled(material.Button)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    background-color: rgba(66, 165, 245, 0.3);\n    border: 1px solid transparent;\n  }\n"], ["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: #1976d2;\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    background-color: rgba(66, 165, 245, 0.3);\n    border: 1px solid transparent;\n  }\n"])));
-var templateObject_1$3, templateObject_2$1;var PrivateMonthPickerMonth = React.forwardRef(function (_a, ref) {
-    var month = _a.month, disabled = _a.disabled, isDefault = _a.isDefault, active = _a.active, selected = _a.selected, selectedStart = _a.selectedStart, selectedEnd = _a.selectedEnd, selectedTemp = _a.selectedTemp, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+};var PrivateMonthPickerMonthListDefaultProps = {};var PrivateMonthPickerMonthDefaultProps = {};var StyledContainer$2 = material.styled(material.Grid)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  padding: 4px;\n  position: relative;\n"], ["\n  padding: 4px;\n  position: relative;\n"])));
+var StyledButton = material.styled(material.Button)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n\n    &.range:not(.active) {\n      background-color: rgba(25, 118, 210, 0.8);\n    }\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    background-color: rgba(66, 165, 245, 0.3);\n    border: 1px solid transparent;\n  }\n"], ["\n  font-size: 12px;\n  background-color: transparent;\n  color: unset;\n  outline: 0;\n  font-weight: 400;\n  line-height: 1.75;\n  border-radius: 18px;\n  cursor: pointer;\n  width: 100%;\n  border: 1px solid transparent;\n\n  &:focus {\n    background-color: rgba(0, 0, 0, 0.12);\n  }\n\n  &.default {\n    background-color: #efefef;\n  }\n  &.selected,\n  &.selected-temp {\n    background-color: rgba(66, 165, 245, 0.6);\n  }\n  &.selected-start,\n  &.selected-end {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n\n    &.range:not(.active) {\n      background-color: rgba(25, 118, 210, 0.8);\n    }\n  }\n  &.active {\n    color: #fff;\n    background-color: rgba(25, 118, 210, 1);\n    box-shadow: inset 1px 1px 1px 1px #05569f;\n  }\n  &.disabled {\n    opacity: 0.8;\n    border: 1px solid transparent;\n  }\n  &:hover:not(.disabled):not(.selected-start):not(.selected-end) {\n    color: inherit;\n    background-color: rgba(66, 165, 245, 0.3);\n    border: 1px solid transparent;\n  }\n"])));
+var templateObject_1$4, templateObject_2$2;var PrivateMonthPickerMonth = React.forwardRef(function (_a, ref) {
+    var month = _a.month, range = _a.range, disabled = _a.disabled, isDefault = _a.isDefault, active = _a.active, selected = _a.selected, selectedStart = _a.selectedStart, selectedEnd = _a.selectedEnd, selectedTemp = _a.selectedTemp, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
     var className = React.useMemo(function () {
-        return classNames$1(isDefault && 'default', active && 'active', selected && 'selected', selectedStart && 'selected-start', selectedEnd && 'selected-end', selectedTemp && 'selected-temp', disabled && 'disabled');
-    }, [isDefault, active, selected, selectedStart, selectedEnd, selectedTemp, disabled]);
+        return classNames$1(range && 'range', isDefault && 'default', active && 'active', selected && 'selected', selectedStart && 'selected-start', selectedEnd && 'selected-end', selectedTemp && 'selected-temp', disabled && 'disabled');
+    }, [range, isDefault, active, selected, selectedStart, selectedEnd, selectedTemp, disabled]);
     var handleClick = React.useCallback(function () {
         onClick && onClick(month);
     }, [month, onClick]);
@@ -12233,8 +12355,8 @@ var templateObject_1$3, templateObject_2$1;var PrivateMonthPickerMonth = React.f
             "\uC6D4")));
 });
 PrivateMonthPickerMonth.displayName = 'PrivateMonthPickerMonth';
-PrivateMonthPickerMonth.defaultProps = PrivateMonthPickerMonthDefaultProps;var StyledContainer$1 = material.styled(material.Grid)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  width: 240px;\n  padding: 4px;\n"], ["\n  width: 240px;\n  padding: 4px;\n"])));
-var templateObject_1$2;var PrivateMonthPickerMonthList = function (_a) {
+PrivateMonthPickerMonth.defaultProps = PrivateMonthPickerMonthDefaultProps;var StyledContainer$1 = material.styled(material.Grid)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  width: 240px;\n  padding: 4px;\n"], ["\n  width: 240px;\n  padding: 4px;\n"])));
+var templateObject_1$3;var PrivateMonthPickerMonthList = function (_a) {
     // Function ----------------------------------------------------------------------------------------------------------
     var value = _a.value, initDefaultValue = _a.defaultValue, minAvailableValue = _a.minAvailableValue, maxAvailableValue = _a.maxAvailableValue, disablePast = _a.disablePast, disableFuture = _a.disableFuture, selectFromValue = _a.selectFromValue, selectToValue = _a.selectToValue, onChange = _a.onChange;
     var valueToYm = React.useCallback(function (v) { return v.year * 100 + v.month; }, []);
@@ -12264,12 +12386,14 @@ var templateObject_1$2;var PrivateMonthPickerMonthList = function (_a) {
     var currentYear = React.useMemo(function () { return (value ? value.year : defaultYear); }, [value, defaultYear]);
     var months = React.useMemo(function () {
         var newMonths = [];
+        var range = !!selectFromValue || !!selectToValue;
         var startYm = selectFromValue ? valueToYm(selectFromValue) : value ? valueToYm(value) : 0;
         var endYm = selectToValue ? valueToYm(selectToValue) : value ? valueToYm(value) : 0;
         for (var i = 1; i <= 12; i += 1) {
             var ym = currentYear * 100 + i;
             newMonths.push({
                 month: i,
+                range: range,
                 isDefault: !value && i === defaultMonth,
                 active: (!!selectFromValue || !!selectToValue) && !!value && ym === valueToYm(value),
                 selected: !!value && ym >= startYm && ym <= endYm,
@@ -12296,18 +12420,18 @@ var templateObject_1$2;var PrivateMonthPickerMonthList = function (_a) {
         onChange({ year: currentYear, month: month });
     }, [currentYear, onChange]);
     // Render ------------------------------------------------------------------------------------------------------------
-    return (React.createElement(StyledContainer$1, { className: 'PrivateMonthPickerMonthList', container: true }, months.map(function (info) { return (React.createElement(PrivateMonthPickerMonth, { key: info.month, month: info.month, isDefault: info.isDefault, active: info.active, selected: info.selected, selectedStart: info.selectedStart, selectedEnd: info.selectedEnd, selectedTemp: info.selectedTemp, disabled: info.disabled, onClick: handleMonthChange })); })));
+    return (React.createElement(StyledContainer$1, { className: 'PrivateMonthPickerMonthList', container: true }, months.map(function (info) { return (React.createElement(PrivateMonthPickerMonth, { key: info.month, month: info.month, range: info.range, isDefault: info.isDefault, active: info.active, selected: info.selected, selectedStart: info.selectedStart, selectedEnd: info.selectedEnd, selectedTemp: info.selectedTemp, disabled: info.disabled, onClick: handleMonthChange })); })));
 };
 PrivateMonthPickerMonthList.displayName = 'PrivateMonthPickerMonthList';
-PrivateMonthPickerMonthList.defaultProps = PrivateMonthPickerMonthListDefaultProps;var StyledContainer = material.styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  .PrivateYearPickerYearList {\n    max-height: 130px;\n  }\n"], ["\n  .PrivateYearPickerYearList {\n    max-height: 130px;\n  }\n"])));
-var TitleContainer = material.styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"])));
-var StyledIconButton = material.styled(material.IconButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"])));
+PrivateMonthPickerMonthList.defaultProps = PrivateMonthPickerMonthListDefaultProps;var StyledContainer = material.styled('div')(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .PrivateYearPickerYearList {\n    max-height: 130px;\n  }\n"], ["\n  .PrivateYearPickerYearList {\n    max-height: 130px;\n  }\n"])));
+var TitleContainer = material.styled('div')(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #efefef;\n  padding: 10px;\n  font-size: 14px;\n"])));
+var StyledIconButton = material.styled(material.IconButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -8px;\n  margin-bottom: -10px;\n"])));
 var StyledYearMonth = material.styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var StyledYearMonthError = material.styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n"], ["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.error.main;
 });
-var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;var PrivateMonthPicker = function (_a) {
+var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5;var PrivateMonthPicker = function (_a) {
     // State -------------------------------------------------------------------------------------------------------------
     var initValue = _a.value, initMinValue = _a.minValue, initMaxValue = _a.maxValue, disablePast = _a.disablePast, disableFuture = _a.disableFuture, selectFromValue = _a.selectFromValue, selectToValue = _a.selectToValue, onChange = _a.onChange;
     var _b = useAutoUpdateState$1(initValue || null), value = _b[0], setValue = _b[1];
@@ -12435,14 +12559,17 @@ PrivateMonthPicker.defaultProps = PrivateMonthPickerDefaultProps;var PrivateMont
         year: 2050,
         month: 12,
     },
-};var StyledDiv = material.styled(material.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  width: 30px;\n  border-left: 1px solid #efefef;\n  border-right: 1px solid #efefef;\n  background-color: #fafafa;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  width: 30px;\n  border-left: 1px solid #efefef;\n  border-right: 1px solid #efefef;\n  background-color: #fafafa;\n"])));
-var templateObject_1;var PrivateMonthRangePicker = function (_a) {
+};var StyledDiv = material.styled(material.Grid)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  width: 30px;\n  border-left: 1px solid #efefef;\n  border-right: 1px solid #efefef;\n  background-color: #fafafa;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  width: 30px;\n  border-left: 1px solid #efefef;\n  border-right: 1px solid #efefef;\n  background-color: #fafafa;\n"])));
+var StyledActionContainer = material.styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n  &:empty {\n    display: none;\n  }\n"], ["\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n  &:empty {\n    display: none;\n  }\n"])));
+var StyledActionButton = material.styled(material.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 0;\n  color: unset;\n  &:not(:first-child) {\n    margin-left: 5px;\n  }\n  &.disabled {\n    color: rgba(0, 0, 0, 0.5);\n  }\n"], ["\n  min-width: 0;\n  color: unset;\n  &:not(:first-child) {\n    margin-left: 5px;\n  }\n  &.disabled {\n    color: rgba(0, 0, 0, 0.5);\n  }\n"])));
+var templateObject_1$1, templateObject_2, templateObject_3;var PrivateMonthRangePicker = function (_a) {
     // Function ----------------------------------------------------------------------------------------------------------
     var value = _a.value, initMinValue = _a.minValue, initMaxValue = _a.maxValue, disablePast = _a.disablePast, disableFuture = _a.disableFuture, onChange = _a.onChange;
     var valueToYm = React.useCallback(function (v) { return v.year * 100 + v.month; }, []);
     var dateToValue = React.useCallback(function (v) { return ({ year: v.year(), month: v.month() + 1 }); }, []);
     // Memo --------------------------------------------------------------------------------------------------------------
-    var nowValue = React.useMemo(function () { return dateToValue(dayjs()); }, [dateToValue]);
+    var nowDate = React.useMemo(function () { return dayjs(); }, []);
+    var nowValue = React.useMemo(function () { return dateToValue(nowDate); }, [dateToValue, nowDate]);
     var nowYm = React.useMemo(function () { return valueToYm(nowValue); }, [nowValue, valueToYm]);
     var minValue = React.useMemo(function () { return initMinValue || PrivateMonthRangePickerDefaultProps.minValue; }, [initMinValue]);
     var maxValue = React.useMemo(function () { return initMaxValue || PrivateMonthRangePickerDefaultProps.maxValue; }, [initMaxValue]);
@@ -12500,6 +12627,33 @@ var templateObject_1;var PrivateMonthRangePicker = function (_a) {
         }
         return finalValue;
     }, [maxAvailableValue, maxAvailableYm, minAvailableValue, minAvailableYm, valueToYm]);
+    // action button -----------------------------------------------------------------------------------------------------
+    var getActionButton = React.useCallback(function (fromDate, toDate, label, strict) {
+        var fromValue = dateToValue(fromDate);
+        var fromYm = valueToYm(fromValue);
+        var toValue = dateToValue(toDate);
+        var toYm = valueToYm(toValue);
+        if (strict && (fromYm < minAvailableYm || toYm > maxAvailableYm)) {
+            return undefined;
+        }
+        else if (!strict &&
+            ((fromYm < minAvailableYm && toYm < minAvailableYm) || (fromYm > maxAvailableYm && toYm > maxAvailableYm))) {
+            return undefined;
+        }
+        else {
+            return (React.createElement(StyledActionButton, { variant: 'text', onClick: function () { return onChange(getFinalValue([fromValue, toValue], 'end'), 'end', true); } }, label));
+        }
+    }, [dateToValue, getFinalValue, maxAvailableYm, minAvailableYm, onChange, valueToYm]);
+    var actionButtons = React.useMemo(function () {
+        return (React.createElement(StyledActionContainer, null,
+            getActionButton(dayjs(nowDate).subtract(2, 'months'), nowDate, '최근 3개월', true),
+            getActionButton(dayjs(nowDate).subtract(5, 'months'), nowDate, '최근 6개월', true),
+            getActionButton(dayjs(nowDate).subtract(11, 'months'), nowDate, '최근 12개월', true),
+            getActionButton(dayjs(nowDate).subtract(23, 'months'), nowDate, '최근 24개월', true),
+            getActionButton(dayjs(nowDate).subtract(2, 'years').set('months', 0), dayjs(nowDate).subtract(2, 'years').set('months', 11), '재작년'),
+            getActionButton(dayjs(nowDate).subtract(1, 'years').set('months', 0), dayjs(nowDate).subtract(1, 'years').set('months', 11), '작년'),
+            getActionButton(dayjs(nowDate).set('months', 0), dayjs(nowDate).set('months', 11), '올해')));
+    }, [getActionButton, nowDate]);
     // Event Handler -----------------------------------------------------------------------------------------------------
     var handleStartMonthChange = React.useCallback(function (v, isMonthSelect) {
         var finalValue = getFinalValue([v, value[1]], 'start');
@@ -12510,12 +12664,14 @@ var templateObject_1;var PrivateMonthRangePicker = function (_a) {
         onChange(finalValue, 'end', isMonthSelect);
     }, [getFinalValue, onChange, value]);
     // Render ------------------------------------------------------------------------------------------------------------
-    return (React.createElement(material.Grid, { container: true, className: 'PrivateMonthRangePicker' },
-        React.createElement(material.Grid, { item: true },
-            React.createElement(PrivateMonthPicker, { value: value[0], selectToValue: value[1], minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, onChange: handleStartMonthChange })),
-        React.createElement(StyledDiv, null, "~"),
-        React.createElement(material.Grid, { item: true },
-            React.createElement(PrivateMonthPicker, { value: value[1], selectFromValue: value[0], minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, onChange: handleEndMonthChange }))));
+    return (React.createElement("div", null,
+        React.createElement(material.Grid, { container: true, className: 'PrivateMonthRangePicker' },
+            React.createElement(material.Grid, { item: true },
+                React.createElement(PrivateMonthPicker, { value: value[0], selectToValue: value[1], minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, onChange: handleStartMonthChange })),
+            React.createElement(StyledDiv, null, "~"),
+            React.createElement(material.Grid, { item: true },
+                React.createElement(PrivateMonthPicker, { value: value[1], selectFromValue: value[0], minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, onChange: handleEndMonthChange }))),
+        actionButtons));
 };
 PrivateMonthRangePicker.displayName = 'PrivateMonthRangePicker';
 PrivateMonthRangePicker.defaultProps = PrivateMonthRangePickerDefaultProps;var FormDatePicker = React.forwardRef(function (_a, ref) {
@@ -13035,7 +13191,7 @@ var FormDateRangePicker = React.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, initValue = _a.value, initData = _a.data, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, initCalendarCount = _a.calendarCount, initFormat = _a.format, formValueFormat = _a.formValueFormat, allowSingleSelect = _a.allowSingleSelect, required = _a.required, requiredStart = _a.requiredStart, requiredEnd = _a.requiredEnd, readOnly = _a.readOnly, readOnlyStart = _a.readOnlyStart, readOnlyEnd = _a.readOnlyEnd, readOnlyInput = _a.readOnlyInput, initDisabled = _a.disabled, inputWidth = _a.inputWidth, exceptValue = _a.exceptValue, initError = _a.error, helperText = _a.helperText, formValueFromNameSuffix = _a.formValueFromNameSuffix, formValueToNameSuffix = _a.formValueToNameSuffix, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, startAdornment = _a.startAdornment, startStartAdornment = _a.startStartAdornment, endStartAdornment = _a.endStartAdornment, endAdornment = _a.endAdornment, startEndAdornment = _a.startEndAdornment, endEndAdornment = _a.endEndAdornment, disablePast = _a.disablePast, disableFuture = _a.disableFuture, minDate = _a.minDate, maxDate = _a.maxDate, hidden = _a.hidden, align = _a.align, onGetActionButtons = _a.onGetActionButtons, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, initValue = _a.value, initData = _a.data, fromLabel = _a.fromLabel, fromLabelIcon = _a.fromLabelIcon, toLabel = _a.toLabel, toLabelIcon = _a.toLabelIcon, initCalendarCount = _a.calendarCount, initFormat = _a.format, formValueFormat = _a.formValueFormat, allowSingleSelect = _a.allowSingleSelect, required = _a.required, requiredStart = _a.requiredStart, requiredEnd = _a.requiredEnd, readOnly = _a.readOnly, readOnlyStart = _a.readOnlyStart, readOnlyEnd = _a.readOnlyEnd, readOnlyInput = _a.readOnlyInput, initDisabled = _a.disabled, inputWidth = _a.inputWidth, exceptValue = _a.exceptValue, initError = _a.error, helperText = _a.helperText, formValueFromNameSuffix = _a.formValueFromNameSuffix, formValueToNameSuffix = _a.formValueToNameSuffix, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, startAdornment = _a.startAdornment, startStartAdornment = _a.startStartAdornment, endStartAdornment = _a.endStartAdornment, endAdornment = _a.endAdornment, startEndAdornment = _a.startEndAdornment, endEndAdornment = _a.endEndAdornment, disablePast = _a.disablePast, disableFuture = _a.disableFuture, minDate = _a.minDate, maxDate = _a.maxDate, initHidden = _a.hidden, align = _a.align, onGetActionButtons = _a.onGetActionButtons, onChange = _a.onChange, onValidate = _a.onValidate, 
     // -------------------------------------------------------------------------------------------------------------------
     className = _a.className;
     var id = React.useId();
@@ -13059,13 +13215,14 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
     var openValueRef = React.useRef();
     // State -----------------------------------------------------------------------------------------------------------
     var _c = useAutoUpdateState$1(initDisabled), disabled = _c[0], setDisabled = _c[1];
-    var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
-    var _e = React.useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
-    var _f = React.useState(false), startError = _f[0], setStartError = _f[1];
-    var _g = React.useState(), startErrorHelperText = _g[0], setStartErrorHelperText = _g[1];
-    var _h = React.useState(false), endError = _h[0], setEndError = _h[1];
-    var _j = React.useState(), endErrorHelperText = _j[0], setEndErrorHelperText = _j[1];
-    var _k = useAutoUpdateState$1(initData), data = _k[0], setData = _k[1];
+    var _d = useAutoUpdateState$1(initHidden), hidden = _d[0], setHidden = _d[1];
+    var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
+    var _f = React.useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
+    var _g = React.useState(false), fromError = _g[0], setFromError = _g[1];
+    var _h = React.useState(), fromErrorHelperText = _h[0], setFromErrorHelperText = _h[1];
+    var _j = React.useState(false), toError = _j[0], setToError = _j[1];
+    var _k = React.useState(), toErrorHelperText = _k[0], setToErrorHelperText = _k[1];
+    var _l = useAutoUpdateState$1(initData), data = _l[0], setData = _l[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var format = React.useMemo(function () { return initFormat || DEFAULT_FORMAT$4; }, [initFormat]);
     // Function - getFinalValue ----------------------------------------------------------------------------------------
@@ -13079,25 +13236,25 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
     }, [startDateTextFieldRef]);
     var focusValidate = React.useCallback(function () {
         var _a, _b;
-        if (endError) {
+        if (toError) {
             (_a = endDateTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
         else {
             (_b = startDateTextFieldRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
-    }, [endError, startDateTextFieldRef, endDateTextFieldRef]);
+    }, [toError, startDateTextFieldRef, endDateTextFieldRef]);
     // Function - setErrorErrorHelperText -----------------------------------------------------------------------------------
     var setErrorErrorHelperText = React.useCallback(function (error, errorHelperText) {
         setError(error);
         setErrorHelperText(errorHelperText);
     }, [setError]);
-    var setStartErrorErrorHelperText = React.useCallback(function (error, startErrorHelperText) {
-        setStartError(error);
-        setStartErrorHelperText(startErrorHelperText);
+    var setFromErrorErrorHelperText = React.useCallback(function (error, fromErrorHelperText) {
+        setFromError(error);
+        setFromErrorHelperText(fromErrorHelperText);
     }, []);
-    var setEndErrorErrorHelperText = React.useCallback(function (error, endErrorHelperText) {
-        setEndError(error);
-        setEndErrorHelperText(endErrorHelperText);
+    var setToErrorErrorHelperText = React.useCallback(function (error, toErrorHelperText) {
+        setToError(error);
+        setToErrorHelperText(toErrorHelperText);
     }, []);
     // Function - validate ---------------------------------------------------------------------------------------------
     var validate = React.useCallback(function (value) {
@@ -13107,46 +13264,46 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                 setErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else if (value[0] == null) {
-                setStartErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setFromErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else {
-                setEndErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setToErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             return false;
         }
         if (requiredStart && value[0] == null) {
-            setStartErrorErrorHelperText(true, '필수 입력 항목입니다.');
+            setFromErrorErrorHelperText(true, '필수 입력 항목입니다.');
             return false;
         }
         if (requiredEnd && value[1] == null) {
-            setEndErrorErrorHelperText(true, '필수 입력 항목입니다.');
+            setToErrorErrorHelperText(true, '필수 입력 항목입니다.');
             return false;
         }
         if (!allowSingleSelect && (value[0] || value[1]) && (value[0] == null || value[1] == null)) {
             if (value[0] == null) {
-                setStartErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setFromErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else {
-                setEndErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setToErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             return false;
         }
         var startInputValue = ((_a = startDateTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.value) || '';
         var endInputValue = ((_b = endDateTextFieldRef.current) === null || _b === void 0 ? void 0 : _b.value) || '';
         if (notEmpty(startInputValue) && !dayjs(startInputValue, format).isValid()) {
-            setStartErrorErrorHelperText(true, '형식이 일치하지 않습니다.');
+            setFromErrorErrorHelperText(true, '형식이 일치하지 않습니다.');
             return false;
         }
         if (notEmpty(endInputValue) && !dayjs(endInputValue, format).isValid()) {
-            setEndErrorErrorHelperText(true, '형식이 일치하지 않습니다.');
+            setToErrorErrorHelperText(true, '형식이 일치하지 않습니다.');
             return false;
         }
         if (startInputDatePickerErrorRef.current) {
-            setStartErrorErrorHelperText(true, getDateValidationErrorText(startInputDatePickerErrorRef.current));
+            setFromErrorErrorHelperText(true, getDateValidationErrorText(startInputDatePickerErrorRef.current));
             return false;
         }
         if (endInputDatePickerErrorRef.current) {
-            setEndErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
+            setToErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
             return false;
         }
         if (onValidate) {
@@ -13157,8 +13314,8 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
             }
         }
         setErrorErrorHelperText(false, undefined);
-        setStartError(false);
-        setEndError(false);
+        setFromError(false);
+        setToError(false);
         return true;
     }, [
         required,
@@ -13168,8 +13325,8 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         format,
         onValidate,
         setErrorErrorHelperText,
-        setStartErrorErrorHelperText,
-        setEndErrorErrorHelperText,
+        setFromErrorErrorHelperText,
+        setToErrorErrorHelperText,
     ]);
     // Function activeMonth --------------------------------------------------------------------------------------------
     var activeMonth = React.useCallback(function (month) {
@@ -13178,16 +13335,16 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.activeMonth(month);
     }, [containerRef]);
     // State -----------------------------------------------------------------------------------------------------------
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
-    var _m = React.useState('start'), selectType = _m[0], setSelectType = _m[1];
-    var _o = useAutoUpdateState$1(React.useCallback(function () {
+    var _m = React.useState(false), open = _m[0], setOpen = _m[1];
+    var _o = React.useState('start'), selectType = _o[0], setSelectType = _o[1];
+    var _p = useAutoUpdateState$1(React.useCallback(function () {
         return initValue || DEFAULT_VALUE$4;
-    }, [initValue])), value = _o[0], setValue = _o[1];
+    }, [initValue])), value = _p[0], setValue = _p[1];
     var calendarCount = useAutoUpdateState$1(initCalendarCount || 2)[0];
-    var _p = React.useState(function () {
+    var _q = React.useState(function () {
         var now = dayjs();
         return [now, now.add(1, 'month'), now.add(2, 'month')];
-    }), months = _p[0], setMonths = _p[1];
+    }), months = _q[0], setMonths = _q[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var inputDatePickerProps = React.useMemo(function () { return ({
         align: align,
@@ -13227,7 +13384,7 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useFirstSkipEffect$1(function () {
-        if (error || startError || endError)
+        if (error || fromError || toError)
             validate(value);
         if (onChange)
             onChange(value);
@@ -13277,9 +13434,9 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
     var handleChange = React.useCallback(function (newValue) {
         setValue(newValue);
         setOpen(false);
-        setStartErrorErrorHelperText(false, undefined);
-        setEndErrorErrorHelperText(false, undefined);
-    }, [setEndErrorErrorHelperText, setStartErrorErrorHelperText, setValue]);
+        setFromErrorErrorHelperText(false, undefined);
+        setToErrorErrorHelperText(false, undefined);
+    }, [setToErrorErrorHelperText, setFromErrorErrorHelperText, setValue]);
     var handleValueChange = React.useCallback(function (selectType, newValue, fromInput) {
         var _a;
         var finalValue;
@@ -13308,7 +13465,7 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                         }
                     }
                 }
-                setStartErrorErrorHelperText(false, undefined);
+                setFromErrorErrorHelperText(false, undefined);
                 if (fromInput && newValue) {
                     activeMonth(newValue);
                 }
@@ -13319,7 +13476,7 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                     if (fromInput && newValue) {
                         activeMonth(newValue.subtract(calendarCount - 1, 'month'));
                     }
-                    setStartErrorErrorHelperText(false, undefined);
+                    setFromErrorErrorHelperText(false, undefined);
                 }
                 else {
                     finalValue = [value[0], newValue];
@@ -13340,7 +13497,7 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                             (_a = startDateTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                         });
                     }
-                    setEndErrorErrorHelperText(false, undefined);
+                    setToErrorErrorHelperText(false, undefined);
                 }
                 break;
         }
@@ -13351,10 +13508,10 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
     }, [
         setValue,
         value,
-        setStartErrorErrorHelperText,
+        setFromErrorErrorHelperText,
         activeMonth,
         calendarCount,
-        setEndErrorErrorHelperText,
+        setToErrorErrorHelperText,
         open,
         onRequestSearchSubmit,
         name,
@@ -13375,10 +13532,10 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         }
         switch (selectType) {
             case 'start':
-                setStartError(error);
+                setFromError(error);
                 break;
             case 'end':
-                setEndError(error);
+                setToError(error);
                 break;
         }
     }, [handleValueChange]);
@@ -13448,6 +13605,7 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
             var lastValue_1 = value;
             var lastData_1 = data;
             var lastDisabled_1 = !!disabled;
+            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'FormDateRangePicker'; },
                 getName: function () { return name; },
@@ -13482,6 +13640,11 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                     lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
+                isHidden: function () { return lastHidden_1; },
+                setHidden: function (hidden) {
+                    lastHidden_1 = hidden;
+                    setHidden(hidden);
+                },
                 focus: focus,
                 focusValidate: focusValidate,
                 validate: function () { return validate(value); },
@@ -13547,6 +13710,8 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React.createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
@@ -13560,8 +13725,8 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                                     offset: [
                                         0,
                                         (error && errorHelperText) ||
-                                            (startError && startErrorHelperText) ||
-                                            (endError && endErrorHelperText)
+                                            (fromError && fromErrorHelperText) ||
+                                            (toError && toErrorHelperText)
                                             ? 8
                                             : -14,
                                     ],
@@ -13572,21 +13737,15 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                         React.createElement(FormDateRangePickerTooltipPickerContainer, { ref: containerRef, calendarCount: calendarCount, selectType: selectType, value: value, months: months, disablePast: disablePast, disableFuture: disableFuture, minDate: minDate, maxDate: maxDate, onGetActionButtons: onGetActionButtons, onChange: handleChange, onValueChange: handleValueChange, onMonthsChange: setMonths })) },
                     React.createElement(material.Grid, { container: true, alignItems: 'center' },
                         React.createElement(material.Grid, { item: true, flex: 1 },
-                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, value: value[0], label: startLabel, labelIcon: startLabelIcon, error: error || startError, focused: focused || (open && selectType === 'start'), required: required || requiredStart, readOnly: readOnly || readOnlyStart, readOnlyInput: readOnlyInput, icon: startIcon || icon, startAdornment: startStartAdornment || startAdornment, endAdornment: startEndAdornment || endAdornment, inputRef: startDateTextFieldRef, onChange: function (newValue) { return handleInputDatePickerChange('start', newValue); }, onFocus: function () { return handleInputDatePickerFocus('start'); }, onError: function (reason) { return (startInputDatePickerErrorRef.current = reason); } }))),
+                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, value: value[0], label: fromLabel, labelIcon: fromLabelIcon, error: error || fromError, focused: focused || (open && selectType === 'start'), required: required || requiredStart, readOnly: readOnly || readOnlyStart, readOnlyInput: readOnlyInput, icon: startIcon || icon, startAdornment: startStartAdornment || startAdornment, endAdornment: startEndAdornment || endAdornment, inputRef: startDateTextFieldRef, onChange: function (newValue) { return handleInputDatePickerChange('start', newValue); }, onFocus: function () { return handleInputDatePickerFocus('start'); }, onError: function (reason) { return (startInputDatePickerErrorRef.current = reason); } }))),
                         React.createElement(material.Grid, { item: true, sx: { px: 1 } }, "~"),
                         React.createElement(material.Grid, { item: true, flex: 1 },
-                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, value: value[1], label: endLabel, labelIcon: endLabelIcon, error: error || endError, focused: focused || (open && selectType === 'end'), required: required || requiredEnd, readOnly: readOnly || readOnlyEnd, readOnlyInput: readOnlyInput, icon: endIcon || icon, startAdornment: endStartAdornment || startAdornment, endAdornment: endEndAdornment || endAdornment, inputRef: endDateTextFieldRef, onChange: function (newValue) { return handleInputDatePickerChange('end', newValue); }, onFocus: function () { return handleInputDatePickerFocus('end'); }, onError: function (reason) { return (endInputDatePickerErrorRef.current = reason); } }))))),
+                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, value: value[1], label: toLabel, labelIcon: toLabelIcon, error: error || toError, focused: focused || (open && selectType === 'end'), required: required || requiredEnd, readOnly: readOnly || readOnlyEnd, readOnlyInput: readOnlyInput, icon: endIcon || icon, startAdornment: endStartAdornment || startAdornment, endAdornment: endEndAdornment || endAdornment, inputRef: endDateTextFieldRef, onChange: function (newValue) { return handleInputDatePickerChange('end', newValue); }, onFocus: function () { return handleInputDatePickerFocus('end'); }, onError: function (reason) { return (endInputDatePickerErrorRef.current = reason); } }))))),
                 !formColWithHelperText &&
                     (helperText ||
                         (error && errorHelperText) ||
-                        (startError && startErrorHelperText) ||
-                        (endError && endErrorHelperText)) && (React.createElement(material.FormHelperText, { error: error || startError || endError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error
-                    ? errorHelperText
-                    : startError
-                        ? startErrorHelperText
-                        : endError
-                            ? endErrorHelperText
-                            : helperText))))));
+                        (fromError && fromErrorHelperText) ||
+                        (toError && toErrorHelperText)) && (React.createElement(material.FormHelperText, { error: error || fromError || toError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : fromError ? fromErrorHelperText : toError ? toErrorHelperText : helperText))))));
 });
 FormDateRangePicker.displayName = 'FormDateRangePicker';
 FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileDefaultProps = {
@@ -13646,7 +13805,7 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    accept = _a.accept, hideUrl = _a.hideUrl, uploadLabel = _a.uploadLabel, uploadTabIndex = _a.uploadTabIndex, hideUpload = _a.hideUpload, hideUploadLabel = _a.hideUploadLabel, linkLabel = _a.linkLabel, linkTabIndex = _a.linkTabIndex, hideLink = _a.hideLink, hideLinkLabel = _a.hideLinkLabel, removeLabel = _a.removeLabel, removeTabIndex = _a.removeTabIndex, hideRemove = _a.hideRemove, hideRemoveLabel = _a.hideRemoveLabel, maxFileSize = _a.maxFileSize, preview = _a.preview, hidden = _a.hidden, onFile = _a.onFile, onLink = _a.onLink, 
+    accept = _a.accept, hideUrl = _a.hideUrl, uploadLabel = _a.uploadLabel, uploadTabIndex = _a.uploadTabIndex, hideUpload = _a.hideUpload, hideUploadLabel = _a.hideUploadLabel, linkLabel = _a.linkLabel, linkTabIndex = _a.linkTabIndex, hideLink = _a.hideLink, hideLinkLabel = _a.hideLinkLabel, removeLabel = _a.removeLabel, removeTabIndex = _a.removeTabIndex, hideRemove = _a.hideRemove, hideRemoveLabel = _a.hideRemoveLabel, maxFileSize = _a.maxFileSize, preview = _a.preview, initHidden = _a.hidden, onFile = _a.onFile, onLink = _a.onLink, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, initLabel = _a.label, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -13679,9 +13838,10 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
     var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
     var _e = React.useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
     var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
-    var _g = React.useState(false), isOpenLinkDialog = _g[0], setIsOpenLinkDialog = _g[1];
-    var _h = useAutoUpdateState$1(initData), data = _h[0], setData = _h[1];
-    var _j = React.useState({ open: false }), alertDialogProps = _j[0], setAlertDialogProps = _j[1];
+    var _g = useAutoUpdateState$1(initHidden), hidden = _g[0], setHidden = _g[1];
+    var _h = React.useState(false), isOpenLinkDialog = _h[0], setIsOpenLinkDialog = _h[1];
+    var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
+    var _k = React.useState({ open: false }), alertDialogProps = _k[0], setAlertDialogProps = _k[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var label = React.useMemo(function () {
         return labelIcon ? (React.createElement(React.Fragment, null,
@@ -13736,6 +13896,7 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormFile'; },
             getName: function () { return name; },
@@ -13760,6 +13921,11 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -13804,6 +13970,8 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Function --------------------------------------------------------------------------------------------------------
     var fileSizeCheck = React.useCallback(function (file) {
@@ -14082,7 +14250,7 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    hidden = _a.hidden, 
+    initHidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, readOnly = _a.readOnly, required = _a.required, initFullWidth = _a.fullWidth, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     // -------------------------------------------------------------------------------------------------------------------
@@ -14110,16 +14278,17 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
     var _c = useAutoUpdateState$1(initError), error = _c[0], setError = _c[1];
     var _d = React.useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
     var _e = useAutoUpdateState$1(initDisabled), disabled = _e[0], setDisabled = _e[1];
-    var _f = useAutoUpdateState$1(initData), data = _f[0], setData = _f[1];
-    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
+    var _f = useAutoUpdateState$1(initHidden), hidden = _f[0], setHidden = _f[1];
+    var _g = useAutoUpdateState$1(initData), data = _g[0], setData = _g[1];
+    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         return value || DEFAULT_VALUE$3;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _h = useAutoUpdateState$1(React.useCallback(function () {
+    var _j = useAutoUpdateState$1(React.useCallback(function () {
         return initValue || DEFAULT_VALUE$3;
-    }, [initValue])), value = _h[0], setValue = _h[1];
+    }, [initValue])), value = _j[0], setValue = _j[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -14231,6 +14400,7 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormMonthPicker'; },
             getName: function () { return name; },
@@ -14273,6 +14443,11 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -14332,6 +14507,8 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
         setData,
         formValueYearNameSuffix,
         formValueMonthNameSuffix,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleContainerMouseDown = React.useCallback(function () {
@@ -14433,9 +14610,9 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    hidden = _a.hidden, 
+    initHidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, readOnly = _a.readOnly, required = _a.required, initFullWidth = _a.fullWidth, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, fromLabel = _a.fromLabel, fromLabelIcon = _a.fromLabelIcon, toLabel = _a.toLabel, toLabelIcon = _a.toLabelIcon, readOnly = _a.readOnly, required = _a.required, initFullWidth = _a.fullWidth, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     // -------------------------------------------------------------------------------------------------------------------
     icon = _a.icon, initFormat = _a.format, initLabelShrink = _a.labelShrink, disablePast = _a.disablePast, disableFuture = _a.disableFuture, initMinValue = _a.minValue, initMaxValue = _a.maxValue, inputWidth = _a.inputWidth, readOnlyInput = _a.readOnlyInput, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, formValueFromYearNameSuffix = _a.formValueFromYearNameSuffix, formValueFromMonthNameSuffix = _a.formValueFromMonthNameSuffix, formValueToYearNameSuffix = _a.formValueToYearNameSuffix, formValueToMonthNameSuffix = _a.formValueToMonthNameSuffix, align = _a.align, 
     //----------------------------------------------------------------------------------------------------------------
@@ -14459,23 +14636,24 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
     // State -----------------------------------------------------------------------------------------------------------
     var _c = useAutoUpdateState$1(initError), error = _c[0], setError = _c[1];
     var _d = React.useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
-    var _e = React.useState(false), startError = _e[0], setStartError = _e[1];
-    var _f = React.useState(), startErrorHelperText = _f[0], setStartErrorHelperText = _f[1];
-    var _g = React.useState(false), endError = _g[0], setEndError = _g[1];
-    var _h = React.useState(), endErrorHelperText = _h[0], setEndErrorHelperText = _h[1];
+    var _e = React.useState(false), fromError = _e[0], setFromError = _e[1];
+    var _f = React.useState(), fromErrorHelperText = _f[0], setFromErrorHelperText = _f[1];
+    var _g = React.useState(false), toError = _g[0], setToError = _g[1];
+    var _h = React.useState(), toErrorHelperText = _h[0], setToErrorHelperText = _h[1];
     var _j = useAutoUpdateState$1(initDisabled), disabled = _j[0], setDisabled = _j[1];
-    var _k = useAutoUpdateState$1(initData), data = _k[0], setData = _k[1];
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
+    var _k = useAutoUpdateState$1(initHidden), hidden = _k[0], setHidden = _k[1];
+    var _l = useAutoUpdateState$1(initData), data = _l[0], setData = _l[1];
+    var _m = React.useState(false), open = _m[0], setOpen = _m[1];
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         return value || DEFAULT_VALUE$2;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _m = useAutoUpdateState$1(React.useCallback(function () {
+    var _o = useAutoUpdateState$1(React.useCallback(function () {
         return initValue || DEFAULT_VALUE$2;
-    }, [initValue])), value = _m[0], setValue = _m[1];
+    }, [initValue])), value = _o[0], setValue = _o[1];
     useFirstSkipEffect$1(function () {
-        if (error || startError || endError)
+        if (error || fromError || toError)
             validate(value);
         if (onChange)
             onChange(value);
@@ -14552,13 +14730,13 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
         var _a;
         (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    var setStartErrorErrorHelperText = React.useCallback(function (error, startErrorHelperText) {
-        setStartError(error);
-        setStartErrorHelperText(startErrorHelperText);
+    var setFromErrorErrorHelperText = React.useCallback(function (error, fromErrorHelperText) {
+        setFromError(error);
+        setFromErrorHelperText(fromErrorHelperText);
     }, []);
-    var setEndErrorErrorHelperText = React.useCallback(function (error, endErrorHelperText) {
-        setEndError(error);
-        setEndErrorHelperText(endErrorHelperText);
+    var setToErrorErrorHelperText = React.useCallback(function (error, toErrorHelperText) {
+        setToError(error);
+        setToErrorHelperText(toErrorHelperText);
     }, []);
     var setErrorErrorHelperText = React.useCallback(function (error, errorHelperText) {
         setError(error);
@@ -14570,22 +14748,22 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                 setErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else if (value[0] == null) {
-                setStartErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setFromErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else {
-                setEndErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setToErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             return false;
         }
         if (startInputDatePickerErrorRef.current) {
-            setStartErrorErrorHelperText(true, getDateValidationErrorText(startInputDatePickerErrorRef.current));
+            setFromErrorErrorHelperText(true, getDateValidationErrorText(startInputDatePickerErrorRef.current));
             if (endInputDatePickerErrorRef.current) {
-                setEndErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
+                setToErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
             }
             return false;
         }
         if (endInputDatePickerErrorRef.current) {
-            setEndErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
+            setToErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
             return false;
         }
         if (onValidate) {
@@ -14596,15 +14774,16 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
             }
         }
         setErrorErrorHelperText(false, undefined);
-        setStartErrorErrorHelperText(false, undefined);
-        setEndErrorErrorHelperText(false, undefined);
+        setFromErrorErrorHelperText(false, undefined);
+        setToErrorErrorHelperText(false, undefined);
         return true;
-    }, [onValidate, required, setEndErrorErrorHelperText, setErrorErrorHelperText, setStartErrorErrorHelperText]);
+    }, [onValidate, required, setToErrorErrorHelperText, setErrorErrorHelperText, setFromErrorErrorHelperText]);
     // Commands --------------------------------------------------------------------------------------------------------
     React.useLayoutEffect(function () {
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormMonthRangePicker'; },
             getName: function () { return name; },
@@ -14687,6 +14866,11 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -14760,6 +14944,8 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
         formValueFromMonthNameSuffix,
         formValueToYearNameSuffix,
         formValueToMonthNameSuffix,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleContainerChange = React.useCallback(function (newValue, selectType, isMonthSelect) {
@@ -14789,7 +14975,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                             newValue[1] = newValue[0];
                         }
                     }
-                    if (startError) {
+                    if (fromError) {
                         validate(newValue);
                     }
                     nextTick(function () {
@@ -14808,7 +14994,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                             newValue[0] = newValue[1];
                         }
                     }
-                    if (endError) {
+                    if (toError) {
                         validate(newValue);
                     }
                     nextTick(function () {
@@ -14820,13 +15006,13 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
         }
     }, [
         dateToValue,
-        endError,
+        toError,
         maxAvailableYm,
         minAvailableYm,
         name,
         onValueChangeByUser,
         setValue,
-        startError,
+        fromError,
         validate,
         valueToYm,
     ]);
@@ -14880,21 +15066,15 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                         React.createElement(PrivateMonthRangePicker, { minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, value: value, onChange: handleContainerChange })) },
                     React.createElement(material.Grid, { container: true, alignItems: 'center' },
                         React.createElement(material.Grid, { item: true, flex: 1 },
-                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[0], label: startLabel, labelIcon: startLabelIcon, error: error || startError, focused: focused || open, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: startInputRef, onChange: function (v) { return handleInputDatePickerChange('start', v); }, onFocus: function () { return handleInputDatePickerFocus('start'); }, onError: function (reason) { return (startInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))),
+                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[0], label: fromLabel, labelIcon: fromLabelIcon, error: error || fromError, focused: focused || open, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: startInputRef, onChange: function (v) { return handleInputDatePickerChange('start', v); }, onFocus: function () { return handleInputDatePickerFocus('start'); }, onError: function (reason) { return (startInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))),
                         React.createElement(material.Grid, { item: true, sx: { px: 1 } }, "~"),
                         React.createElement(material.Grid, { item: true, flex: 1 },
-                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[1], label: endLabel, labelIcon: endLabelIcon, error: error || endError, focused: focused || open, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: endInputRef, onChange: function (v) { return handleInputDatePickerChange('end', v); }, onFocus: function () { return handleInputDatePickerFocus('end'); }, onError: function (reason) { return (endInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))))),
+                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[1], label: toLabel, labelIcon: toLabelIcon, error: error || toError, focused: focused || open, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: endInputRef, onChange: function (v) { return handleInputDatePickerChange('end', v); }, onFocus: function () { return handleInputDatePickerFocus('end'); }, onError: function (reason) { return (endInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))))),
                 !formColWithHelperText &&
                     (helperText ||
                         (error && errorHelperText) ||
-                        (startError && startErrorHelperText) ||
-                        (endError && endErrorHelperText)) && (React.createElement(material.FormHelperText, { error: error || startError || endError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error
-                    ? errorHelperText
-                    : startError
-                        ? startErrorHelperText
-                        : endError
-                            ? endErrorHelperText
-                            : helperText))))));
+                        (fromError && fromErrorHelperText) ||
+                        (toError && toErrorHelperText)) && (React.createElement(material.FormHelperText, { error: error || fromError || toError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : fromError ? fromErrorHelperText : toError ? toErrorHelperText : helperText))))));
 });
 FormMonthRangePicker.displayName = 'FormMonthRangePicker';
 FormMonthRangePicker.defaultProps = FormMonthRangePickerDefaultProps;var FormYearPickerDefaultProps = {
@@ -14907,7 +15087,7 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    hidden = _a.hidden, 
+    initHidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, readOnly = _a.readOnly, required = _a.required, initFullWidth = _a.fullWidth, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     // -------------------------------------------------------------------------------------------------------------------
@@ -14935,16 +15115,17 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
     var _c = useAutoUpdateState$1(initError), error = _c[0], setError = _c[1];
     var _d = React.useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
     var _e = useAutoUpdateState$1(initDisabled), disabled = _e[0], setDisabled = _e[1];
-    var _f = useAutoUpdateState$1(initData), data = _f[0], setData = _f[1];
-    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
+    var _f = useAutoUpdateState$1(initHidden), hidden = _f[0], setHidden = _f[1];
+    var _g = useAutoUpdateState$1(initData), data = _g[0], setData = _g[1];
+    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         return value || DEFAULT_VALUE$1;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _h = useAutoUpdateState$1(React.useCallback(function () {
+    var _j = useAutoUpdateState$1(React.useCallback(function () {
         return initValue || DEFAULT_VALUE$1;
-    }, [initValue])), value = _h[0], setValue = _h[1];
+    }, [initValue])), value = _j[0], setValue = _j[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -15030,6 +15211,7 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormYearPicker'; },
             getName: function () { return name; },
@@ -15054,6 +15236,11 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -15099,6 +15286,8 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
         setErrorErrorHelperText,
         data,
         setData,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleContainerMouseDown = React.useCallback(function () {
@@ -15198,9 +15387,9 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    hidden = _a.hidden, 
+    initHidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, readOnly = _a.readOnly, required = _a.required, initFullWidth = _a.fullWidth, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, fromLabel = _a.fromLabel, fromLabelIcon = _a.fromLabelIcon, toLabel = _a.toLabel, toLabelIcon = _a.toLabelIcon, readOnly = _a.readOnly, required = _a.required, initFullWidth = _a.fullWidth, initDisabled = _a.disabled, initError = _a.error, helperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     // -------------------------------------------------------------------------------------------------------------------
     icon = _a.icon, initFormat = _a.format, initLabelShrink = _a.labelShrink, disablePast = _a.disablePast, disableFuture = _a.disableFuture, initMinYear = _a.minYear, initMaxYear = _a.maxYear, inputWidth = _a.inputWidth, readOnlyInput = _a.readOnlyInput, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, formValueFromNameSuffix = _a.formValueFromNameSuffix, formValueToNameSuffix = _a.formValueToNameSuffix, align = _a.align, 
     //----------------------------------------------------------------------------------------------------------------
@@ -15224,24 +15413,25 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
     // State -----------------------------------------------------------------------------------------------------------
     var _c = useAutoUpdateState$1(initError), error = _c[0], setError = _c[1];
     var _d = React.useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
-    var _e = React.useState(false), startError = _e[0], setStartError = _e[1];
-    var _f = React.useState(), startErrorHelperText = _f[0], setStartErrorHelperText = _f[1];
-    var _g = React.useState(false), endError = _g[0], setEndError = _g[1];
-    var _h = React.useState(), endErrorHelperText = _h[0], setEndErrorHelperText = _h[1];
+    var _e = React.useState(false), fromError = _e[0], setFromError = _e[1];
+    var _f = React.useState(), fromErrorHelperText = _f[0], setFromErrorHelperText = _f[1];
+    var _g = React.useState(false), toError = _g[0], setToError = _g[1];
+    var _h = React.useState(), toErrorHelperText = _h[0], setToErrorHelperText = _h[1];
     var _j = useAutoUpdateState$1(initDisabled), disabled = _j[0], setDisabled = _j[1];
-    var _k = useAutoUpdateState$1(initData), data = _k[0], setData = _k[1];
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
-    var _m = React.useState('start'), selectType = _m[0], setSelectType = _m[1];
+    var _k = useAutoUpdateState$1(initHidden), hidden = _k[0], setHidden = _k[1];
+    var _l = useAutoUpdateState$1(initData), data = _l[0], setData = _l[1];
+    var _m = React.useState(false), open = _m[0], setOpen = _m[1];
+    var _o = React.useState('start'), selectType = _o[0], setSelectType = _o[1];
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         return value || DEFAULT_VALUE;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _o = useAutoUpdateState$1(React.useCallback(function () {
+    var _p = useAutoUpdateState$1(React.useCallback(function () {
         return initValue || DEFAULT_VALUE;
-    }, [initValue])), value = _o[0], setValue = _o[1];
+    }, [initValue])), value = _p[0], setValue = _p[1];
     useFirstSkipEffect$1(function () {
-        if (error || startError || endError)
+        if (error || fromError || toError)
             validate(value);
         if (onChange)
             onChange(value);
@@ -15295,13 +15485,13 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
         var _a;
         (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    var setStartErrorErrorHelperText = React.useCallback(function (error, startErrorHelperText) {
-        setStartError(error);
-        setStartErrorHelperText(startErrorHelperText);
+    var setFromErrorErrorHelperText = React.useCallback(function (error, fromErrorHelperText) {
+        setFromError(error);
+        setFromErrorHelperText(fromErrorHelperText);
     }, []);
-    var setEndErrorErrorHelperText = React.useCallback(function (error, endErrorHelperText) {
-        setEndError(error);
-        setEndErrorHelperText(endErrorHelperText);
+    var setToErrorErrorHelperText = React.useCallback(function (error, toErrorHelperText) {
+        setToError(error);
+        setToErrorHelperText(toErrorHelperText);
     }, []);
     var setErrorErrorHelperText = React.useCallback(function (error, errorHelperText) {
         setError(error);
@@ -15313,22 +15503,22 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                 setErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else if (value[0] == null) {
-                setStartErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setFromErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             else {
-                setEndErrorErrorHelperText(true, '필수 입력 항목입니다.');
+                setToErrorErrorHelperText(true, '필수 입력 항목입니다.');
             }
             return false;
         }
         if (startInputDatePickerErrorRef.current) {
-            setStartErrorErrorHelperText(true, getDateValidationErrorText(startInputDatePickerErrorRef.current));
+            setFromErrorErrorHelperText(true, getDateValidationErrorText(startInputDatePickerErrorRef.current));
             if (endInputDatePickerErrorRef.current) {
-                setEndErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
+                setToErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
             }
             return false;
         }
         if (endInputDatePickerErrorRef.current) {
-            setEndErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
+            setToErrorErrorHelperText(true, getDateValidationErrorText(endInputDatePickerErrorRef.current));
             return false;
         }
         if (onValidate) {
@@ -15339,15 +15529,16 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
             }
         }
         setErrorErrorHelperText(false, undefined);
-        setStartErrorErrorHelperText(false, undefined);
-        setEndErrorErrorHelperText(false, undefined);
+        setFromErrorErrorHelperText(false, undefined);
+        setToErrorErrorHelperText(false, undefined);
         return true;
-    }, [onValidate, required, setEndErrorErrorHelperText, setErrorErrorHelperText, setStartErrorErrorHelperText]);
+    }, [onValidate, required, setToErrorErrorHelperText, setErrorErrorHelperText, setFromErrorErrorHelperText]);
     // Commands --------------------------------------------------------------------------------------------------------
     React.useLayoutEffect(function () {
         var lastValue = value;
         var lastData = data;
         var lastDisabled = !!disabled;
+        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormYearRangePicker'; },
             getName: function () { return name; },
@@ -15382,6 +15573,11 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                 lastDisabled = disabled;
                 setDisabled(disabled);
             },
+            isHidden: function () { return lastHidden; },
+            setHidden: function (hidden) {
+                lastHidden = hidden;
+                setHidden(hidden);
+            },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(value); },
@@ -15439,6 +15635,8 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
         setData,
         formValueFromNameSuffix,
         formValueToNameSuffix,
+        hidden,
+        setHidden,
     ]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleContainerChange = React.useCallback(function (newValue, selectType) {
@@ -15467,7 +15665,7 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                             newValue[1] = newValue[0];
                         }
                     }
-                    if (startError) {
+                    if (fromError) {
                         validate(newValue);
                     }
                     nextTick(function () {
@@ -15484,7 +15682,7 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                             newValue[0] = newValue[1];
                         }
                     }
-                    if (endError) {
+                    if (toError) {
                         validate(newValue);
                     }
                     nextTick(function () {
@@ -15494,7 +15692,7 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                 });
             }
         }
-    }, [dateToValue, endError, maxYear, minYear, name, onValueChangeByUser, setValue, startError, validate]);
+    }, [dateToValue, toError, maxYear, minYear, name, onValueChangeByUser, setValue, fromError, validate]);
     var handleInputDatePickerFocus = React.useCallback(function (selectType) {
         var _a;
         if (readOnly || disabled)
@@ -15545,21 +15743,15 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                         React.createElement(PrivateYearRangePicker, { selectType: selectType, minYear: minYear, maxYear: maxYear, disablePast: disablePast, disableFuture: disableFuture, value: value, onChange: handleContainerChange })) },
                     React.createElement(material.Grid, { container: true, alignItems: 'center' },
                         React.createElement(material.Grid, { item: true, flex: 1 },
-                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[0], label: startLabel, labelIcon: startLabelIcon, error: error || startError, focused: focused || (open && selectType === 'start'), required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: startInputRef, onChange: function (v) { return handleInputDatePickerChange('start', v); }, onFocus: function () { return handleInputDatePickerFocus('start'); }, onError: function (reason) { return (startInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))),
+                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[0], label: fromLabel, labelIcon: fromLabelIcon, error: error || fromError, focused: focused || (open && selectType === 'start'), required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: startInputRef, onChange: function (v) { return handleInputDatePickerChange('start', v); }, onFocus: function () { return handleInputDatePickerFocus('start'); }, onError: function (reason) { return (startInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))),
                         React.createElement(material.Grid, { item: true, sx: { px: 1 } }, "~"),
                         React.createElement(material.Grid, { item: true, flex: 1 },
-                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[1], label: endLabel, labelIcon: endLabelIcon, error: error || endError, focused: focused || (open && selectType === 'end'), required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: endInputRef, onChange: function (v) { return handleInputDatePickerChange('end', v); }, onFocus: function () { return handleInputDatePickerFocus('end'); }, onError: function (reason) { return (endInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))))),
+                            React.createElement(PrivateInputDatePicker, __assign$7({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate[1], label: toLabel, labelIcon: toLabelIcon, error: error || toError, focused: focused || (open && selectType === 'end'), required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: endInputRef, onChange: function (v) { return handleInputDatePickerChange('end', v); }, onFocus: function () { return handleInputDatePickerFocus('end'); }, onError: function (reason) { return (endInputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear }))))),
                 !formColWithHelperText &&
                     (helperText ||
                         (error && errorHelperText) ||
-                        (startError && startErrorHelperText) ||
-                        (endError && endErrorHelperText)) && (React.createElement(material.FormHelperText, { error: error || startError || endError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error
-                    ? errorHelperText
-                    : startError
-                        ? startErrorHelperText
-                        : endError
-                            ? endErrorHelperText
-                            : helperText))))));
+                        (fromError && fromErrorHelperText) ||
+                        (toError && toErrorHelperText)) && (React.createElement(material.FormHelperText, { error: error || fromError || toError, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : fromError ? fromErrorHelperText : toError ? toErrorHelperText : helperText))))));
 });
 FormYearRangePicker.displayName = 'FormYearRangePicker';
 FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var SearchDefaultProps = {
@@ -15648,7 +15840,8 @@ SearchGroupRow.defaultProps = SearchGroupRowDefaultProps;var Search = React.forw
 Search.displayName = 'Search';
 Search.defaultProps = SearchDefaultProps;var SearchGroupDefaultProps = {
     spacing: 1.5,
-};var isReactFragment = function (child) {
+};var StyledItem = material.styled(material.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &:has(> [style*='display: none;']) {\n    display: none;\n  }\n"], ["\n  &:has(> [style*='display: none;']) {\n    display: none;\n  }\n"])));
+var templateObject_1;var isReactFragment = function (child) {
     try {
         return child.type.toString() === React.Fragment.toString();
     }
@@ -15671,15 +15864,15 @@ var removeReactFragment = function (el) {
                 });
             }
             else {
-                return (React.createElement(material.Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
+                return (React.createElement(StyledItem, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
             }
         }
         else {
-            return (React.createElement(material.Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
+            return (React.createElement(StyledItem, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
         }
     }
     else {
-        return (React.createElement(material.Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
+        return (React.createElement(StyledItem, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
     }
 };
 var SearchGroup = function (_a) {