@pdg/react-form 1.0.152 → 1.0.153

package/dist/index.esm.js

@@ -1,30 +1,4 @@
-import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useForceUpdate,useAutoUpdateRef,useFirstSkipEffect}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}var css_248z$l = ".simplebar-track.simplebar-vertical {\n  width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n  opacity: 0.3 !important;\n}";
-styleInject(css_248z$l);/******************************************************************************
+import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,businessNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useForceUpdate,useAutoUpdateRef,useFirstSkipEffect}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -1042,8 +1016,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
             !noLine && (React.createElement(Grid, { size: { xs: 12 }, sx: { mt: spacing } },
                 React.createElement(FormDivider, { line: true }))),
             children)));
-};var css_248z$k = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
-styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref) {
+};var FormTextField = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -1374,8 +1347,7 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
             React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
             React.createElement(Box, { component: 'span', style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), placeholder: placeholder, className: classNames(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : error ? errorHelperText : helperText, slotProps: slotProps, disabled: disabled, style: style, select: select, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
 });
-FormTextField.displayName = 'FormTextField';var css_248z$j = ".FormHidden {\n  display: none !important;\n}";
-styleInject(css_248z$j);var FormHidden = React.forwardRef(function (_a, ref) {
+FormTextField.displayName = 'FormTextField';var FormHidden = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormHidden'), type: 'hidden', variant: 'standard' }, props)));
 });
@@ -1631,8 +1603,7 @@ FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, r
      * ******************************************************************************************************************/
     return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormEmail'), type: 'email', validPattern: validPattern, onValue: handleValue }, props)));
 });
-FormEmail.displayName = 'FormEmail';var css_248z$i = ".FormPassword .eye-icon-button-wrap {\n  visibility: hidden;\n}\n.FormPassword.variant-filled .eye-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormPassword:hover .eye-icon-button-wrap.show,\n.FormPassword .MuiInputBase-root.Mui-focused .eye-icon-button-wrap.show {\n  visibility: visible;\n}";
-styleInject(css_248z$i);var StyledEyeInputAdornment = styled(InputAdornment)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
+FormEmail.displayName = 'FormEmail';var StyledEyeInputAdornment = styled(InputAdornment)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
 var FormPassword = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * State
@@ -1792,13 +1763,11 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
      * ******************************************************************************************************************/
     return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormNumber'), disableReturnKey: true, labelShrink: strValueRef.current === '' || strValueRef.current === undefined ? labelShrink : true, slotProps: slotProps, readOnly: readOnly, clear: clear, value: strValueRef.current, onChange: handleChange, onValue: handleValue, onValidate: handleValidate }, props)));
 });
-FormNumber.displayName = 'FormNumber';var css_248z$h = ".FormSearch input[type=search]::-webkit-search-decoration,\n.FormSearch input[type=search]::-webkit-search-cancel-button,\n.FormSearch input[type=search]::-webkit-search-results-button,\n.FormSearch input[type=search]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}";
-styleInject(css_248z$h);var FormSearch = React.forwardRef(function (_a, ref) {
+FormNumber.displayName = 'FormNumber';var FormSearch = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return React.createElement(FormText, __assign({ className: classNames(className, 'FormSearch'), ref: ref, type: 'search' }, props));
 });
-FormSearch.displayName = 'FormSearch';var css_248z$g = ".FormTextarea .MuiInputBase-root .MuiInputBase-input {\n  overflow-y: scroll;\n}\n.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar {\n  width: 8px;\n}\n.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n}";
-styleInject(css_248z$g);var FormTextarea = React.forwardRef(function (_a, ref) {
+FormSearch.displayName = 'FormSearch';var FormTextarea = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.clear, clear = _b === void 0 ? false : _b, _c = _a.rows, rows = _c === void 0 ? 3 : _c, _d = _a.value, value = _d === void 0 ? '' : _d, props = __rest(_a, ["className", "clear", "rows", "value"]);
     return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormTextarea'), clear: clear, rows: rows, value: value }, props, { multiline: true })));
 });
@@ -2119,8 +2088,7 @@ function checkDateAvailable(date, availableDate, type, time) {
 }
 function AutoTypeForwardRef(render) {
     return React.forwardRef(render);
-}var css_248z$f = ".FormSelect.is-selected-placeholder .MuiSelect-select {\n  opacity: 0.38;\n}\n.FormSelect .MuiInputBase-root.MuiInputBase-adornedEnd {\n  padding-right: 25px;\n}\n.FormSelect .MuiSelect-select.MuiSelect-multiple .selected-list:not(:empty) {\n  margin-top: -3px;\n  margin-bottom: -3px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar {\n  width: 12px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n  border-right: 4px transparent solid;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:start:decrement, .FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:end:increment {\n  display: block;\n  height: 4px;\n  background-color: transparent;\n}";
-styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
+}var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * type
      * ******************************************************************************************************************/
@@ -2411,21 +2379,21 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
                     itemLabel));
             })) : (React.createElement(MenuItem, { value: '' })))));
 }));
-FormSelect.displayName = 'FormSelect';var FormCompanyNo = React.forwardRef(function (_a, ref) {
+FormSelect.displayName = 'FormSelect';var FormBusinessNo = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
     var className = _a.className, _b = _a.validPattern, validPattern = _b === void 0 ? /(([0-9]{3})([0-9]{2})([0-9]{5}))|(([0-9]{3})-([0-9]{2})-([0-9]{5}))/ : _b, onValue = _a.onValue, props = __rest(_a, ["className", "validPattern", "onValue"]);
     var handleValue = useCallback(function (value) {
-        var newValue = companyNoAutoDash(value.replace(/[^0-9]/gi, ''));
+        var newValue = businessNoAutoDash(value.replace(/[^0-9]/gi, ''));
         return onValue ? onValue(newValue) : newValue;
     }, [onValue]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormCompanyNo'), maxLength: 12, validPattern: validPattern, onValue: handleValue }, props)));
+    return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormBusinessNo'), maxLength: 12, validPattern: validPattern, onValue: handleValue }, props)));
 });
-FormCompanyNo.displayName = 'FormCompanyNo';var FormPersonalNo = React.forwardRef(function (_a, ref) {
+FormBusinessNo.displayName = 'FormBusinessNo';var FormPersonalNo = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
@@ -2473,8 +2441,7 @@ FormCompanyNo.displayName = 'FormCompanyNo';var FormPersonalNo = React.forwardRe
      * ******************************************************************************************************************/
     return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
 });
-FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n  overflow: visible;\n  padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n  transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 16px;\n}";
-styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
+FormPersonalNo.displayName = 'FormPersonalNo';var FormItemBase = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * FormState
      * ******************************************************************************************************************/
@@ -3151,8 +3118,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
             paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
         }, controlVerticalCenter: !isMultiline, control: control }));
 }));
-FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control {\n  align-items: center !important;\n}\n.FormToggleButtonGroup .ToggleButton {\n  display: inline-flex;\n  padding: 0 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  align-items: center;\n}\n.FormToggleButtonGroup .ToggleButton .__label__ {\n  height: 0;\n  line-height: 0 !important;\n  overflow: visible !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n  padding-left: 3px;\n  padding-right: 5px;\n  border: 0 !important;\n  margin-left: 0 !important;\n  justify-content: flex-start;\n  display: flex;\n  background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n  margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n  margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n  display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n  display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n  display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}";
-styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
+FormRadioGroup.displayName = 'FormRadioGroup';var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * type
      * ******************************************************************************************************************/
@@ -3817,8 +3783,7 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
                 ratingRef.current = ref;
             }, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
 });
-FormRating.displayName = 'FormRating';var css_248z$c = ".FormTextEditor.initializing textarea {\n  display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n  border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n  padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n  display: none;\n}";
-styleInject(css_248z$c);var getFinalValue$8 = function (value) {
+FormRating.displayName = 'FormRating';var getFinalValue$8 = function (value) {
     return value || '';
 };var FormTextEditor = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
@@ -3875,8 +3840,8 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
      * Function - validate
      * ******************************************************************************************************************/
     var validate = useCallback(function (value) {
-        var _a, _b;
-        if (required && empty((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor()) === null || _b === void 0 ? void 0 : _b.getContent())) {
+        var _a;
+        if (required && empty((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
             setErrorErrorHelperText(true, '필수 입력 항목입니다.');
             return false;
         }
@@ -3907,8 +3872,8 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
      * Function - focus
      * ******************************************************************************************************************/
     var focus = useCallback(function () {
-        var _a, _b;
-        (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor()) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [editorRef]);
     /********************************************************************************************************************
      * Commands
@@ -4010,7 +3975,6 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
             React.createElement(Editor, { apiKey: apiKey, value: value, disabled: readOnly || disabled, init: {
                     height: height,
                     menubar: menubar,
-                    disabled: true,
                     language: 'ko_KR',
                     contextmenu: false,
                     content_style: 'body {font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: hsl(0,0%,20%);} p {padding:0; margin:0}',
@@ -4554,8 +4518,638 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
             return (React.createElement(FormTextField, __assign({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: error ? errorHelperText : helperText, slotProps: slotProps, placeholder: placeholder, noFormValueItem: true })));
         } }));
 }));
-FormAutocomplete.displayName = 'FormAutocomplete';var css_248z$b = ".PrivateYearSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: white;\n}\n.PrivateYearSelect button {\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 18px;\n}";
-styleInject(css_248z$b);var PrivateToggleButton = React.forwardRef(function (_a, ref) {
+FormAutocomplete.displayName = 'FormAutocomplete';function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}var weekOfYear$1 = {exports: {}};var weekOfYear = weekOfYear$1.exports;
+
+var hasRequiredWeekOfYear;
+
+function requireWeekOfYear () {
+	if (hasRequiredWeekOfYear) return weekOfYear$1.exports;
+	hasRequiredWeekOfYear = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(weekOfYear,(function(){var e="week",t="year";return function(i,n,r){var f=n.prototype;f.week=function(i){if(void 0===i&&(i=null),null!==i)return this.add(7*(i-this.week()),"day");var n=this.$locale().yearStart||1;if(11===this.month()&&this.date()>25){var f=r(this).startOf(t).add(1,t).date(n),s=r(this).endOf(e);if(f.isBefore(s))return 1}var a=r(this).startOf(t).date(n).startOf(e).subtract(1,"millisecond"),o=this.diff(a,e,true);return o<0?r(this).startOf("week").week():Math.ceil(o)},f.weeks=function(e){return void 0===e&&(e=null),this.week(e)};}})); 
+	} (weekOfYear$1));
+	return weekOfYear$1.exports;
+}var weekOfYearExports = requireWeekOfYear();
+var weekOfYearPlugin = /*@__PURE__*/getDefaultExportFromCjs(weekOfYearExports);var customParseFormat$1 = {exports: {}};var customParseFormat = customParseFormat$1.exports;
+
+var hasRequiredCustomParseFormat;
+
+function requireCustomParseFormat () {
+	if (hasRequiredCustomParseFormat) return customParseFormat$1.exports;
+	hasRequiredCustomParseFormat = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(customParseFormat,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},t=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d/,r=/\d\d/,i=/\d\d?/,o=/\d*[^-_:/,()\s\d]+/,s={},a=function(e){return (e=+e)+(e>68?1900:2e3)};var f=function(e){return function(t){this[e]=+t;}},h=[/[+-]\d\d:?(\d\d)?|Z/,function(e){(this.zone||(this.zone={})).offset=function(e){if(!e)return 0;if("Z"===e)return 0;var t=e.match(/([+-]|\d\d)/g),n=60*t[1]+(+t[2]||0);return 0===n?0:"+"===t[0]?-n:n}(e);}],u=function(e){var t=s[e];return t&&(t.indexOf?t:t.s.concat(t.f))},d=function(e,t){var n,r=s.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?"pm":"PM");return n},c={A:[o,function(e){this.afternoon=d(e,false);}],a:[o,function(e){this.afternoon=d(e,true);}],Q:[n,function(e){this.month=3*(e-1)+1;}],S:[n,function(e){this.milliseconds=100*+e;}],SS:[r,function(e){this.milliseconds=10*+e;}],SSS:[/\d{3}/,function(e){this.milliseconds=+e;}],s:[i,f("seconds")],ss:[i,f("seconds")],m:[i,f("minutes")],mm:[i,f("minutes")],H:[i,f("hours")],h:[i,f("hours")],HH:[i,f("hours")],hh:[i,f("hours")],D:[i,f("day")],DD:[r,f("day")],Do:[o,function(e){var t=s.ordinal,n=e.match(/\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\[|\]/g,"")===e&&(this.day=r);}],w:[i,f("week")],ww:[r,f("week")],M:[i,f("month")],MM:[r,f("month")],MMM:[o,function(e){var t=u("months"),n=(u("monthsShort")||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[o,function(e){var t=u("months").indexOf(e)+1;if(t<1)throw new Error;this.month=t%12||t;}],Y:[/[+-]?\d+/,f("year")],YY:[r,function(e){this.year=a(e);}],YYYY:[/\d{4}/,f("year")],Z:h,ZZ:h};function l(n){var r,i;r=n,i=s&&s.formats;for(var o=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=o.length,f=0;f<a;f+=1){var h=o[f],u=c[h],d=u&&u[0],l=u&&u[1];o[f]=l?{regex:d,parser:l}:h.replace(/^\[|\]$/g,"");}return function(e){for(var t={},n=0,r=0;n<a;n+=1){var i=o[n];if("string"==typeof i)r+=i.length;else {var s=i.regex,f=i.parser,h=e.slice(r),u=s.exec(h)[0];f.call(t,u),e=e.replace(u,"");}}return function(e){var t=e.afternoon;if(void 0!==t){var n=e.hours;t?n<12&&(e.hours+=12):12===n&&(e.hours=0),delete e.afternoon;}}(t),t}}return function(e,t,n){n.p.customParseFormat=true,e&&e.parseTwoDigitYear&&(a=e.parseTwoDigitYear);var r=t.prototype,i=r.parse;r.parse=function(e){var t=e.date,r=e.utc,o=e.args;this.$u=r;var a=o[1];if("string"==typeof a){var f=true===o[2],h=true===o[3],u=f||h,d=o[2];h&&(d=o[2]),s=this.$locale(),!f&&d&&(s=n.Ls[d]),this.$d=function(e,t,n,r){try{if(["x","X"].indexOf(t)>-1)return new Date(("X"===t?1e3:1)*e);var i=l(t)(e),o=i.year,s=i.month,a=i.day,f=i.hours,h=i.minutes,u=i.seconds,d=i.milliseconds,c=i.zone,m=i.week,M=new Date,Y=a||(o||s?1:M.getDate()),p=o||M.getFullYear(),v=0;o&&!s||(v=s>0?s-1:M.getMonth());var D,w=f||0,g=h||0,y=u||0,L=d||0;return c?new Date(Date.UTC(p,v,Y,w,g,y,L+60*c.offset*1e3)):n?new Date(Date.UTC(p,v,Y,w,g,y,L)):(D=new Date(p,v,Y,w,g,y,L),m&&(D=r(D).week(m).toDate()),D)}catch(e){return new Date("")}}(t,a,r,n),this.init(),d&&true!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date("")),s={};}else if(a instanceof Array)for(var c=a.length,m=1;m<=c;m+=1){o[1]=a[m-1];var M=n.apply(this,o);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===c&&(this.$d=new Date(""));}else i.call(this,e);};}})); 
+	} (customParseFormat$1));
+	return customParseFormat$1.exports;
+}var customParseFormatExports = requireCustomParseFormat();
+var customParseFormatPlugin = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);var localizedFormat$1 = {exports: {}};var localizedFormat = localizedFormat$1.exports;
+
+var hasRequiredLocalizedFormat;
+
+function requireLocalizedFormat () {
+	if (hasRequiredLocalizedFormat) return localizedFormat$1.exports;
+	hasRequiredLocalizedFormat = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(localizedFormat,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"};return function(t,o,n){var r=o.prototype,i=r.format;n.en.formats=e,r.format=function(t){ void 0===t&&(t="YYYY-MM-DDTHH:mm:ssZ");var o=this.$locale().formats,n=function(t,o){return t.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var i=r&&r.toUpperCase();return n||o[r]||e[r]||o[i].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,o){return t||o.slice(1)}))}))}(t,void 0===o?{}:o);return i.call(this,n)};}})); 
+	} (localizedFormat$1));
+	return localizedFormat$1.exports;
+}var localizedFormatExports = requireLocalizedFormat();
+var localizedFormatPlugin = /*@__PURE__*/getDefaultExportFromCjs(localizedFormatExports);var isBetween$1 = {exports: {}};var isBetween = isBetween$1.exports;
+
+var hasRequiredIsBetween;
+
+function requireIsBetween () {
+	if (hasRequiredIsBetween) return isBetween$1.exports;
+	hasRequiredIsBetween = 1;
+	(function (module, exports) {
+		!function(e,i){module.exports=i();}(isBetween,(function(){return function(e,i,t){i.prototype.isBetween=function(e,i,s,f){var n=t(e),o=t(i),r="("===(f=f||"()")[0],u=")"===f[1];return (r?this.isAfter(n,s):!this.isBefore(n,s))&&(u?this.isBefore(o,s):!this.isAfter(o,s))||(r?this.isBefore(n,s):!this.isAfter(n,s))&&(u?this.isAfter(o,s):!this.isBefore(o,s))};}})); 
+	} (isBetween$1));
+	return isBetween$1.exports;
+}var isBetweenExports = requireIsBetween();
+var isBetweenPlugin = /*@__PURE__*/getDefaultExportFromCjs(isBetweenExports);var advancedFormat$1 = {exports: {}};var advancedFormat = advancedFormat$1.exports;
+
+var hasRequiredAdvancedFormat;
+
+function requireAdvancedFormat () {
+	if (hasRequiredAdvancedFormat) return advancedFormat$1.exports;
+	hasRequiredAdvancedFormat = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(advancedFormat,(function(){return function(e,t){var r=t.prototype,n=r.format;r.format=function(e){var t=this,r=this.$locale();if(!this.isValid())return n.bind(this)(e);var s=this.$utils(),a=(e||"YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g,(function(e){switch(e){case "Q":return Math.ceil((t.$M+1)/3);case "Do":return r.ordinal(t.$D);case "gggg":return t.weekYear();case "GGGG":return t.isoWeekYear();case "wo":return r.ordinal(t.week(),"W");case "w":case "ww":return s.s(t.week(),"w"===e?1:2,"0");case "W":case "WW":return s.s(t.isoWeek(),"W"===e?1:2,"0");case "k":case "kk":return s.s(String(0===t.$H?24:t.$H),"k"===e?1:2,"0");case "X":return Math.floor(t.$d.getTime()/1e3);case "x":return t.$d.getTime();case "z":return "["+t.offsetName()+"]";case "zzz":return "["+t.offsetName("long")+"]";default:return e}}));return n.bind(this)(a)};}})); 
+	} (advancedFormat$1));
+	return advancedFormat$1.exports;
+}var advancedFormatExports = requireAdvancedFormat();
+var advancedFormatPlugin = /*@__PURE__*/getDefaultExportFromCjs(advancedFormatExports);const warnedOnceCache = new Set();
+
+// TODO move to @base_ui/internals. Base UI, etc. need this helper.
+function warnOnce(message, gravity = 'warning') {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  const cleanMessage = Array.isArray(message) ? message.join('\n') : message;
+  if (!warnedOnceCache.has(cleanMessage)) {
+    warnedOnceCache.add(cleanMessage);
+    if (gravity === 'error') {
+      console.error(cleanMessage);
+    } else {
+      console.warn(cleanMessage);
+    }
+  }
+}dayjs.extend(localizedFormatPlugin);
+dayjs.extend(weekOfYearPlugin);
+dayjs.extend(isBetweenPlugin);
+dayjs.extend(advancedFormatPlugin);
+const formatTokenMap = {
+  // Year
+  YY: 'year',
+  YYYY: {
+    sectionType: 'year',
+    contentType: 'digit',
+    maxLength: 4
+  },
+  // Month
+  M: {
+    sectionType: 'month',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  MM: 'month',
+  MMM: {
+    sectionType: 'month',
+    contentType: 'letter'
+  },
+  MMMM: {
+    sectionType: 'month',
+    contentType: 'letter'
+  },
+  // Day of the month
+  D: {
+    sectionType: 'day',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  DD: 'day',
+  Do: {
+    sectionType: 'day',
+    contentType: 'digit-with-letter'
+  },
+  // Day of the week
+  d: {
+    sectionType: 'weekDay',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  dd: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  ddd: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  dddd: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  // Meridiem
+  A: 'meridiem',
+  a: 'meridiem',
+  // Hours
+  H: {
+    sectionType: 'hours',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  HH: 'hours',
+  h: {
+    sectionType: 'hours',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  hh: 'hours',
+  // Minutes
+  m: {
+    sectionType: 'minutes',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  mm: 'minutes',
+  // Seconds
+  s: {
+    sectionType: 'seconds',
+    contentType: 'digit',
+    maxLength: 2
+  },
+  ss: 'seconds'
+};
+const defaultFormats = {
+  year: 'YYYY',
+  month: 'MMMM',
+  monthShort: 'MMM',
+  dayOfMonth: 'D',
+  dayOfMonthFull: 'Do',
+  weekday: 'dddd',
+  weekdayShort: 'dd',
+  hours24h: 'HH',
+  hours12h: 'hh',
+  meridiem: 'A',
+  minutes: 'mm',
+  seconds: 'ss',
+  fullDate: 'll',
+  keyboardDate: 'L',
+  shortDate: 'MMM D',
+  normalDate: 'D MMMM',
+  normalDateWithWeekday: 'ddd, MMM D',
+  fullTime: 'LT',
+  fullTime12h: 'hh:mm A',
+  fullTime24h: 'HH:mm',
+  keyboardDateTime: 'L LT',
+  keyboardDateTime12h: 'L hh:mm A',
+  keyboardDateTime24h: 'L HH:mm'
+};
+const MISSING_UTC_PLUGIN = ['Missing UTC plugin', 'To be able to use UTC or timezones, you have to enable the `utc` plugin', 'Find more information on https://mui.com/x/react-date-pickers/timezone/#day-js-and-utc'].join('\n');
+const MISSING_TIMEZONE_PLUGIN = ['Missing timezone plugin', 'To be able to use timezones, you have to enable both the `utc` and the `timezone` plugin', 'Find more information on https://mui.com/x/react-date-pickers/timezone/#day-js-and-timezone'].join('\n');
+const withLocale = (dayjs, locale) => !locale ? dayjs : (...args) => dayjs(...args).locale(locale);
+/**
+ * Based on `@date-io/dayjs`
+ *
+ * MIT License
+ *
+ * Copyright (c) 2017 Dmitriy Kovalenko
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+class AdapterDayjs {
+  constructor({
+    locale: _locale,
+    formats
+  } = {}) {
+    this.isMUIAdapter = true;
+    this.isTimezoneCompatible = true;
+    this.lib = 'dayjs';
+    this.dayjs = void 0;
+    this.locale = void 0;
+    this.formats = void 0;
+    this.escapedCharacters = {
+      start: '[',
+      end: ']'
+    };
+    this.formatTokenMap = formatTokenMap;
+    this.setLocaleToValue = value => {
+      const expectedLocale = this.getCurrentLocaleCode();
+      if (expectedLocale === value.locale()) {
+        return value;
+      }
+      return value.locale(expectedLocale);
+    };
+    this.hasUTCPlugin = () => typeof dayjs.utc !== 'undefined';
+    this.hasTimezonePlugin = () => typeof dayjs.tz !== 'undefined';
+    this.isSame = (value, comparing, comparisonTemplate) => {
+      const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+      return value.format(comparisonTemplate) === comparingInValueTimezone.format(comparisonTemplate);
+    };
+    /**
+     * Replaces "default" by undefined and "system" by the system timezone before passing it to `dayjs`.
+     */
+    this.cleanTimezone = timezone => {
+      switch (timezone) {
+        case 'default':
+          {
+            return undefined;
+          }
+        case 'system':
+          {
+            return dayjs.tz.guess();
+          }
+        default:
+          {
+            return timezone;
+          }
+      }
+    };
+    this.createSystemDate = value => {
+      if (this.hasUTCPlugin() && this.hasTimezonePlugin()) {
+        const timezone = dayjs.tz.guess();
+
+        // We can't change the system timezone in the tests
+        /* istanbul ignore next */
+        if (timezone !== 'UTC') {
+          return dayjs.tz(value, timezone);
+        }
+        return dayjs(value);
+      }
+      return dayjs(value);
+    };
+    this.createUTCDate = value => {
+      /* istanbul ignore next */
+      if (!this.hasUTCPlugin()) {
+        throw new Error(MISSING_UTC_PLUGIN);
+      }
+      return dayjs.utc(value);
+    };
+    this.createTZDate = (value, timezone) => {
+      /* istanbul ignore next */
+      if (!this.hasUTCPlugin()) {
+        throw new Error(MISSING_UTC_PLUGIN);
+      }
+
+      /* istanbul ignore next */
+      if (!this.hasTimezonePlugin()) {
+        throw new Error(MISSING_TIMEZONE_PLUGIN);
+      }
+      const keepLocalTime = value !== undefined && !value.endsWith('Z');
+      return dayjs(value).tz(this.cleanTimezone(timezone), keepLocalTime);
+    };
+    this.getLocaleFormats = () => {
+      const locales = dayjs.Ls;
+      const locale = this.locale || 'en';
+      let localeObject = locales[locale];
+      if (localeObject === undefined) {
+        /* istanbul ignore next */
+        if (process.env.NODE_ENV !== 'production') {
+          warnOnce(['MUI X: Your locale has not been found.', 'Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale.', "Or you forget to import the locale from 'dayjs/locale/{localeUsed}'", 'fallback on English locale.']);
+        }
+        localeObject = locales.en;
+      }
+      return localeObject.formats;
+    };
+    /**
+     * If the new day does not have the same offset as the old one (when switching to summer day time for example),
+     * Then dayjs will not automatically adjust the offset (moment does).
+     * We have to parse again the value to make sure the `fixOffset` method is applied.
+     * See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
+     */
+    this.adjustOffset = value => {
+      if (!this.hasTimezonePlugin()) {
+        return value;
+      }
+      const timezone = this.getTimezone(value);
+      if (timezone !== 'UTC') {
+        const fixedValue = value.tz(this.cleanTimezone(timezone), true);
+        // TODO: Simplify the case when we raise the `dayjs` peer dep to 1.11.12 (https://github.com/iamkun/dayjs/releases/tag/v1.11.12)
+        /* istanbul ignore next */
+        // @ts-ignore
+        if (fixedValue.$offset === (value.$offset ?? 0)) {
+          return value;
+        }
+        // Change only what is needed to avoid creating a new object with unwanted data
+        // Especially important when used in an environment where utc or timezone dates are used only in some places
+        // Reference: https://github.com/mui/mui-x/issues/13290
+        // @ts-ignore
+        value.$offset = fixedValue.$offset;
+      }
+      return value;
+    };
+    this.date = (value, timezone = 'default') => {
+      if (value === null) {
+        return null;
+      }
+      let parsedValue;
+      if (timezone === 'UTC') {
+        parsedValue = this.createUTCDate(value);
+      } else if (timezone === 'system' || timezone === 'default' && !this.hasTimezonePlugin()) {
+        parsedValue = this.createSystemDate(value);
+      } else {
+        parsedValue = this.createTZDate(value, timezone);
+      }
+      if (this.locale === undefined) {
+        return parsedValue;
+      }
+      return parsedValue.locale(this.locale);
+    };
+    this.getInvalidDate = () => dayjs(new Date('Invalid date'));
+    this.getTimezone = value => {
+      if (this.hasTimezonePlugin()) {
+        // @ts-ignore
+        const zone = value.$x?.$timezone;
+        if (zone) {
+          return zone;
+        }
+      }
+      if (this.hasUTCPlugin() && value.isUTC()) {
+        return 'UTC';
+      }
+      return 'system';
+    };
+    this.setTimezone = (value, timezone) => {
+      if (this.getTimezone(value) === timezone) {
+        return value;
+      }
+      if (timezone === 'UTC') {
+        /* istanbul ignore next */
+        if (!this.hasUTCPlugin()) {
+          throw new Error(MISSING_UTC_PLUGIN);
+        }
+        return value.utc();
+      }
+
+      // We know that we have the UTC plugin.
+      // Otherwise, the value timezone would always equal "system".
+      // And it would be caught by the first "if" of this method.
+      if (timezone === 'system') {
+        return value.local();
+      }
+      if (!this.hasTimezonePlugin()) {
+        if (timezone === 'default') {
+          return value;
+        }
+
+        /* istanbul ignore next */
+        throw new Error(MISSING_TIMEZONE_PLUGIN);
+      }
+      return dayjs.tz(value, this.cleanTimezone(timezone));
+    };
+    this.toJsDate = value => {
+      return value.toDate();
+    };
+    this.parse = (value, format) => {
+      if (value === '') {
+        return null;
+      }
+      return this.dayjs(value, format, this.locale, true);
+    };
+    this.getCurrentLocaleCode = () => {
+      return this.locale || 'en';
+    };
+    this.is12HourCycleInCurrentLocale = () => {
+      /* istanbul ignore next */
+      return /A|a/.test(this.getLocaleFormats().LT || '');
+    };
+    this.expandFormat = format => {
+      const localeFormats = this.getLocaleFormats();
+
+      // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
+      const t = formatBis => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
+      return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, a, b) => {
+        const B = b && b.toUpperCase();
+        return a || localeFormats[b] || t(localeFormats[B]);
+      });
+    };
+    this.isValid = value => {
+      if (value == null) {
+        return false;
+      }
+      return value.isValid();
+    };
+    this.format = (value, formatKey) => {
+      return this.formatByString(value, this.formats[formatKey]);
+    };
+    this.formatByString = (value, formatString) => {
+      return this.dayjs(value).format(formatString);
+    };
+    this.formatNumber = numberToFormat => {
+      return numberToFormat;
+    };
+    this.isEqual = (value, comparing) => {
+      if (value === null && comparing === null) {
+        return true;
+      }
+      if (value === null || comparing === null) {
+        return false;
+      }
+      return value.toDate().getTime() === comparing.toDate().getTime();
+    };
+    this.isSameYear = (value, comparing) => {
+      return this.isSame(value, comparing, 'YYYY');
+    };
+    this.isSameMonth = (value, comparing) => {
+      return this.isSame(value, comparing, 'YYYY-MM');
+    };
+    this.isSameDay = (value, comparing) => {
+      return this.isSame(value, comparing, 'YYYY-MM-DD');
+    };
+    this.isSameHour = (value, comparing) => {
+      return value.isSame(comparing, 'hour');
+    };
+    this.isAfter = (value, comparing) => {
+      return value > comparing;
+    };
+    this.isAfterYear = (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isAfter(comparing, 'year');
+      }
+      return !this.isSameYear(value, comparing) && value.utc() > comparing.utc();
+    };
+    this.isAfterDay = (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isAfter(comparing, 'day');
+      }
+      return !this.isSameDay(value, comparing) && value.utc() > comparing.utc();
+    };
+    this.isBefore = (value, comparing) => {
+      return value < comparing;
+    };
+    this.isBeforeYear = (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isBefore(comparing, 'year');
+      }
+      return !this.isSameYear(value, comparing) && value.utc() < comparing.utc();
+    };
+    this.isBeforeDay = (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isBefore(comparing, 'day');
+      }
+      return !this.isSameDay(value, comparing) && value.utc() < comparing.utc();
+    };
+    this.isWithinRange = (value, [start, end]) => {
+      return value >= start && value <= end;
+    };
+    this.startOfYear = value => {
+      return this.adjustOffset(value.startOf('year'));
+    };
+    this.startOfMonth = value => {
+      return this.adjustOffset(value.startOf('month'));
+    };
+    this.startOfWeek = value => {
+      return this.adjustOffset(this.setLocaleToValue(value).startOf('week'));
+    };
+    this.startOfDay = value => {
+      return this.adjustOffset(value.startOf('day'));
+    };
+    this.endOfYear = value => {
+      return this.adjustOffset(value.endOf('year'));
+    };
+    this.endOfMonth = value => {
+      return this.adjustOffset(value.endOf('month'));
+    };
+    this.endOfWeek = value => {
+      return this.adjustOffset(this.setLocaleToValue(value).endOf('week'));
+    };
+    this.endOfDay = value => {
+      return this.adjustOffset(value.endOf('day'));
+    };
+    this.addYears = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'year') : value.add(amount, 'year'));
+    };
+    this.addMonths = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'month') : value.add(amount, 'month'));
+    };
+    this.addWeeks = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'week') : value.add(amount, 'week'));
+    };
+    this.addDays = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'day') : value.add(amount, 'day'));
+    };
+    this.addHours = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'hour') : value.add(amount, 'hour'));
+    };
+    this.addMinutes = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'minute') : value.add(amount, 'minute'));
+    };
+    this.addSeconds = (value, amount) => {
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'second') : value.add(amount, 'second'));
+    };
+    this.getYear = value => {
+      return value.year();
+    };
+    this.getMonth = value => {
+      return value.month();
+    };
+    this.getDate = value => {
+      return value.date();
+    };
+    this.getHours = value => {
+      return value.hour();
+    };
+    this.getMinutes = value => {
+      return value.minute();
+    };
+    this.getSeconds = value => {
+      return value.second();
+    };
+    this.getMilliseconds = value => {
+      return value.millisecond();
+    };
+    this.setYear = (value, year) => {
+      return this.adjustOffset(value.set('year', year));
+    };
+    this.setMonth = (value, month) => {
+      return this.adjustOffset(value.set('month', month));
+    };
+    this.setDate = (value, date) => {
+      return this.adjustOffset(value.set('date', date));
+    };
+    this.setHours = (value, hours) => {
+      return this.adjustOffset(value.set('hour', hours));
+    };
+    this.setMinutes = (value, minutes) => {
+      return this.adjustOffset(value.set('minute', minutes));
+    };
+    this.setSeconds = (value, seconds) => {
+      return this.adjustOffset(value.set('second', seconds));
+    };
+    this.setMilliseconds = (value, milliseconds) => {
+      return this.adjustOffset(value.set('millisecond', milliseconds));
+    };
+    this.getDaysInMonth = value => {
+      return value.daysInMonth();
+    };
+    this.getWeekArray = value => {
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
+      let count = 0;
+      let current = start;
+      const nestedWeeks = [];
+      while (current < end) {
+        const weekNumber = Math.floor(count / 7);
+        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+        nestedWeeks[weekNumber].push(current);
+        current = this.addDays(current, 1);
+        count += 1;
+      }
+      return nestedWeeks;
+    };
+    this.getWeekNumber = value => {
+      return value.week();
+    };
+    this.getYearRange = ([start, end]) => {
+      const startDate = this.startOfYear(start);
+      const endDate = this.endOfYear(end);
+      const years = [];
+      let current = startDate;
+      while (this.isBefore(current, endDate)) {
+        years.push(current);
+        current = this.addYears(current, 1);
+      }
+      return years;
+    };
+    this.dayjs = withLocale(dayjs, _locale);
+    this.locale = _locale;
+    this.formats = _extends({}, defaultFormats, formats);
+
+    // Moved plugins to the constructor to allow for users to use options on the library
+    // for reference: https://github.com/mui/mui-x/pull/11151
+    dayjs.extend(customParseFormatPlugin);
+  }
+  getDayOfWeek(value) {
+    return value.day() + 1;
+  }
+}var PrivateToggleButton = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -4643,8 +5237,7 @@ var PrivateYearSelect = function (_a) {
                 return (React.createElement(Grid, { key: y, size: { xs: 3 } },
                     React.createElement(PrivateToggleButton, { "data-id": y, className: "private-year-select-value-".concat(y), fullWidth: true, selected: isSelected, activated: isActive, outlined: isToday, disabled: disabled, onClick: handleClick }, y)));
             })))));
-};var css_248z$a = ".PrivateMonthSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: white;\n}\n.PrivateMonthSelect button {\n  font-size: 15px;\n  font-weight: 400;\n  border-radius: 18px;\n}";
-styleInject(css_248z$a);var MONTHS$1 = new Array(12).fill(0);
+};var MONTHS$1 = new Array(12).fill(0);
 for (var i$5 = 0; i$5 < 12; i$5 += 1) {
     MONTHS$1[i$5] = i$5;
 }
@@ -4663,8 +5256,7 @@ var PrivateMonthSelect = function (_a) {
                     m + 1,
                     "\uC6D4")));
         }))));
-};var css_248z$9 = ".PrivateTimeSelect {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.PrivateTimeSelect button {\n  border-radius: 0;\n}";
-styleInject(css_248z$9);var DEFAULT_MINUTES$3 = new Array(60).fill(0);
+};var DEFAULT_MINUTES$3 = new Array(60).fill(0);
 for (var i$4 = 0; i$4 < DEFAULT_MINUTES$3.length; i$4 += 1) {
     DEFAULT_MINUTES$3[i$4] = i$4;
 }
@@ -4863,8 +5455,7 @@ var PrivateTimeSection = function (_a) {
                             } }))))),
             onClose && (React.createElement(Grid, { className: 'action-buttons' },
                 React.createElement(Button, { variant: 'text', onClick: onClose }, "\uB2EB\uAE30"))))));
-};var css_248z$8 = ".PrivateStaticDatePicker.time {\n  height: 400px;\n}\n.PrivateStaticDatePicker .MuiPickersCalendarHeader-root {\n  display: none;\n}\n.PrivateStaticDatePicker .month-title-container {\n  display: flex;\n  align-items: center;\n  margin-left: 5px;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button {\n  font-size: 15px;\n  padding-left: 8px;\n  padding-right: 0;\n  min-width: 0;\n}\n.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button:not(.active) {\n  color: unset;\n}\n.PrivateStaticDatePicker .action-buttons {\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n}\n.PrivateStaticDatePicker .action-buttons button {\n  min-width: 0;\n  color: inherit;\n}\n.PrivateStaticDatePicker .action-buttons button:not(:first-of-type) {\n  margin-left: 5px;\n}\n.PrivateStaticDatePicker .action-buttons button.disabled {\n  color: rgba(0, 0, 0, 0.5);\n}\n.PrivateStaticDatePicker .time {\n  border-left: 2px solid #bfbfbf;\n}\n.PrivateStaticDatePicker .time .time-container {\n  height: 100%;\n}\n.PrivateStaticDatePicker .time .time-container .time-title {\n  text-align: center;\n  padding: 22px 0;\n  font-size: 15px;\n}\n.PrivateStaticDatePicker .time .time-container .time-select-wrap {\n  flex: 1;\n  border-top: 1px solid #efefef;\n}\n.PrivateStaticDatePicker.time .time .time-container .time-select-wrap > div > div:not(:first-of-type) {\n  border-left: 1px solid #efefef;\n}";
-styleInject(css_248z$8);var DEFAULT_HOURS$1 = new Array(24).fill(0);
+};var DEFAULT_HOURS$1 = new Array(24).fill(0);
 for (var i$2 = 0; i$2 < DEFAULT_HOURS$1.length; i$2 += 1) {
     DEFAULT_HOURS$1[i$2] = i$2;
 }
@@ -5103,8 +5694,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
             boxShadow: theme.shadows[8],
         },
         _b);
-});var css_248z$7 = ".PrivateDatePicker .input-text-field.align-left .MuiInputBase-input {\n  text-align: left;\n}\n.PrivateDatePicker .input-text-field.align-center .MuiInputBase-input {\n  text-align: center;\n}\n.PrivateDatePicker .input-text-field.align-right .MuiInputBase-input {\n  text-align: right;\n}";
-styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, ref) {
+});var PrivateDatePicker = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -5497,9 +6087,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
                     React.createElement("div", { style: { display: fullWidth ? 'block' : 'inline-block' } },
                         React.createElement(DesktopDatePicker, __assign({ value: inputValue, label: labelIcon ? React.createElement(PdgIconText, { icon: labelIcon }, initLabel) : initLabel, open: false, format: format ? format : getDateTimeFormat(type, time), disabled: disabled, readOnly: readOnly, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onClose: function () { return setOpen(false); }, onError: function (reason) { return (datePickerErrorRef.current = reason); }, onChange: function (newValue) { return handleChange('date', newValue); }, slotProps: slotProps, showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth }, otherProps)))),
                 !formColWithHelperText && (helperText || (error && errorHelperText)) && (React.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : helperText))))));
-});var css_248z$6 = ".PrivateDateTimePicker .input-text-field.align-left .MuiInputBase-input {\n  text-align: left;\n}\n.PrivateDateTimePicker .input-text-field.align-center .MuiInputBase-input {\n  text-align: center;\n}\n.PrivateDateTimePicker .input-text-field.align-right .MuiInputBase-input {\n  text-align: right;\n}";
-styleInject(css_248z$6);var css_248z$5 = ".PrivateStaticDateTimePicker.time {\n  height: 400px;\n}\n.PrivateStaticDateTimePicker .MuiPickersCalendarHeader-root {\n  display: none;\n}\n.PrivateStaticDateTimePicker .month-title-container {\n  display: flex;\n  align-items: center;\n  margin-left: 5px;\n}\n.PrivateStaticDateTimePicker .month-title-container .month-title-wrap {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button {\n  font-size: 15px;\n  padding-left: 8px;\n  padding-right: 0;\n  min-width: 0;\n}\n.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button:not(.active) {\n  color: unset;\n}\n.PrivateStaticDateTimePicker .action-buttons {\n  border-top: 1px solid #efefef;\n  padding: 10px;\n  text-align: right;\n}\n.PrivateStaticDateTimePicker .action-buttons button {\n  min-width: 0;\n  color: inherit;\n}\n.PrivateStaticDateTimePicker .action-buttons button:not(:first-of-type) {\n  margin-left: 5px;\n}\n.PrivateStaticDateTimePicker .action-buttons button.disabled {\n  color: rgba(0, 0, 0, 0.5);\n}\n.PrivateStaticDateTimePicker .time {\n  border-left: 2px solid #bfbfbf;\n}\n.PrivateStaticDateTimePicker .time .time-container {\n  height: 100%;\n}\n.PrivateStaticDateTimePicker .time .time-container .time-title {\n  text-align: center;\n  padding: 22px 0;\n  font-size: 15px;\n}\n.PrivateStaticDateTimePicker .time .time-container .time-select-wrap {\n  flex: 1;\n  border-top: 1px solid #efefef;\n}\n.PrivateStaticDateTimePicker.time .time .time-container .time-select-wrap > div > div:not(:first-of-type) {\n  border-left: 1px solid #efefef;\n}";
-styleInject(css_248z$5);var DEFAULT_HOURS = new Array(24).fill(0);
+});var DEFAULT_HOURS = new Array(24).fill(0);
 for (var i$1 = 0; i$1 < DEFAULT_HOURS.length; i$1 += 1) {
     DEFAULT_HOURS[i$1] = i$1;
 }
@@ -6163,8 +6751,7 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
         React.createElement(DialogContent, null, content),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: 'text', onClick: handleClose, autoFocus: true }, "\uD655\uC778"))));
-};var css_248z$4 = ".PrivateInputDatePicker.align-left .MuiInputBase-input {\n  text-align: left;\n}\n.PrivateInputDatePicker.align-center .MuiInputBase-input {\n  text-align: center;\n}\n.PrivateInputDatePicker.align-right .MuiInputBase-input {\n  text-align: right;\n}";
-styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (_a, ref) {
+};var PrivateInputDatePicker = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -7246,8 +7833,7 @@ FormDateTimePicker.displayName = 'FormDateTimePicker';var FormTimePicker = React
     return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { onAddValueItem: handleAddValueItem }) },
         React.createElement(PrivateDateTimePicker, __assign({ className: classNames(className, 'FormTimePicker') }, props, { ref: ref, type: 'time' }))));
 });
-FormTimePicker.displayName = 'FormTimePicker';var css_248z$3 = ".FormDateRangePickerTooltipPicker .MuiPickersCalendarHeader-root {\n  display: none;\n}\n.FormDateRangePickerTooltipPicker .MuiDayPicker-header > span {\n  margin: 0;\n}\n.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content {\n  min-width: 292px;\n}\n.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root > div {\n  width: 292px;\n}\n.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root > div .MuiCalendarPicker-root {\n  width: 292px;\n}\n.FormDateRangePickerTooltipPicker .selected-bg {\n  display: none;\n  position: absolute;\n}\n.FormDateRangePickerTooltipPicker .selected-bg.sel {\n  display: block;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: rgba(66, 165, 245, 0.6);\n}\n.FormDateRangePickerTooltipPicker .selected-bg.sel.ui-start, .FormDateRangePickerTooltipPicker .selected-bg.sel.s-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n.FormDateRangePickerTooltipPicker .selected-bg.sel.ui-end, .FormDateRangePickerTooltipPicker .selected-bg.sel.s-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n.FormDateRangePickerTooltipPicker .selected-bg.sel ~ .MuiPickersDay-root {\n  border: 0;\n}\n.FormDateRangePickerTooltipPicker .selected-bg.sel ~ .MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected) {\n  background-color: transparent;\n}\n.FormDateRangePickerTooltipPicker .focused-bg {\n  display: none;\n  position: absolute;\n}\n.FormDateRangePickerTooltipPicker .focused-bg.focused {\n  display: block;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border: 2px solid #efefef;\n  border-left: 0;\n  border-right: 0;\n}\n.FormDateRangePickerTooltipPicker .focused-bg.focused.ui-start, .FormDateRangePickerTooltipPicker .focused-bg.focused.f-start {\n  border-left: 2px solid #efefef;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n.FormDateRangePickerTooltipPicker .focused-bg.focused.ui-end, .FormDateRangePickerTooltipPicker .focused-bg.focused.f-end {\n  border-right: 2px solid #efefef;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n.FormDateRangePickerTooltipPicker .focused-bg.focused ~ .MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected) {\n  background-color: transparent;\n}";
-styleInject(css_248z$3);var FormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
+FormTimePicker.displayName = 'FormTimePicker';var FormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -7438,8 +8024,7 @@ styleInject(css_248z$3);var FormDateRangePickerTooltipPicker = React.forwardRef(
                 onMonthChange(month);
             setActiveMonthValue(null);
         } }));
-});var css_248z$2 = ".FormDateRangePickerTooltipPickerContainer {\n  display: inline-block;\n  position: relative;\n}\n.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap {\n  position: absolute;\n  top: 15px;\n  left: 0;\n  right: 0;\n}\n.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap > div:first-of-type {\n  padding-left: 20px;\n}\n.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap > div:last-child {\n  padding-right: 20px;\n  text-align: right;\n}\n.FormDateRangePickerTooltipPickerContainer .month-title {\n  text-align: center;\n  padding-top: 13px;\n  padding-bottom: 10px;\n}\n.FormDateRangePickerTooltipPickerContainer .month-title button {\n  font-size: 15px;\n  padding-left: 8px;\n  padding-right: 0;\n  min-width: 0;\n}\n.FormDateRangePickerTooltipPickerContainer .month-title button:not(.active) {\n  color: unset;\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap {\n  position: relative;\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select,\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  border-top: 1px solid #efefef;\n  padding-top: 15px;\n  background-color: white;\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.today:not(.selected),\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.today:not(.selected) {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.active:not(.selected),\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.active:not(.selected) {\n  background-color: #f5f5f5;\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.active:not(.selected):hover,\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.active:not(.selected):hover {\n  background-color: rgb(229, 229, 229);\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select {\n  overflow-y: scroll;\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button {\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 18px;\n}\n.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button {\n  font-size: 15px;\n  font-weight: 400;\n  border-radius: 18px;\n}\n.FormDateRangePickerTooltipPickerContainer .action-buttons button {\n  min-width: 0;\n  color: unset;\n}\n.FormDateRangePickerTooltipPickerContainer .action-buttons button:not(:first-of-type) {\n  margin-left: 5px;\n}\n.FormDateRangePickerTooltipPickerContainer .action-buttons button.disabled {\n  color: rgba(0, 0, 0, 0.5);\n}";
-styleInject(css_248z$2);var YEARS = new Array(200).fill(0);
+});var YEARS = new Array(200).fill(0);
 for (var i = 0; i < 200; i += 1) {
     YEARS[i] = 1900 + i;
 }
@@ -8315,8 +8900,7 @@ FormDateRangePicker.displayName = 'FormDateRangePicker';var LinkDialog = functio
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: 'text', onClick: handleCancel }, "\uCDE8\uC18C"),
             React.createElement(Button, { variant: 'text', onClick: handleSubmit }, "\uD655\uC778"))));
-};var css_248z$1 = ".FormFile .control-wrap {\n  display: inline-flex;\n}\n.FormFile .control-wrap .file-name-wrap .file-name {\n  min-width: 350px;\n}\n.FormFile .control-wrap .file-name-wrap .file-name .MuiInputBase-root {\n  padding-right: 7px;\n}\n.FormFile .control-wrap .input-file {\n  display: none;\n}\n.FormFile .control-wrap .input-file-wrap {\n  display: flex;\n}\n.FormFile .control-wrap .input-file-wrap .input-file-btn:not(.hidden-label) .PdgIcon {\n  margin-left: -3px;\n}\n.FormFile.full-width .control-wrap {\n  display: flex;\n}\n.FormFile.full-width .control-wrap .file-name-wrap {\n  flex: 1;\n}\n.FormFile.variant-standard .file-name-wrap .file-name .MuiInputBase-root {\n  padding-right: 0;\n}\n.FormFile:not(.hide-file-name).variant-outlined .form-file-btn label, .FormFile:not(.hide-file-name).variant-filled .form-file-btn label {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n.FormFile:not(.hide-file-name).variant-standard .form-file-btn label {\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.FormFile:not(.hide-file-name).size-small .form-file-btn label {\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.FormFile.hide-file-name:not(.with-label).variant-outlined .form-file-btn {\n  height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-filled .form-file-btn {\n  height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-standard .form-file-btn {\n  height: 28px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-outlined .form-file-btn {\n  height: 37px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-filled .form-file-btn {\n  height: 44px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-standard .form-file-btn {\n  height: 26px;\n}\n.FormFile.hide-file-name.with-label.variant-outlined .form-file-btn {\n  height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-filled .form-file-btn {\n  height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-standard .form-file-btn {\n  height: 28px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-outlined .form-file-btn {\n  height: 24px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-filled .form-file-btn {\n  height: 31px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-standard .form-file-btn {\n  height: 26px;\n}\n\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-outlined .form-file-btn {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-filled .form-file-btn {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-standard .form-file-btn {\n  height: 28px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-outlined .form-file-btn {\n  height: 24px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-filled .form-file-btn {\n  height: 31px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-standard .form-file-btn {\n  height: 26px;\n}";
-styleInject(css_248z$1);var StyledPdgButton = styled(PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  min-width: 0;\n\n  &.input-file-btn {\n    padding: 0 !important;\n    position: relative;\n\n    .PdgFlexRowBox {\n      height: 100%;\n      label {\n        cursor: pointer;\n        display: flex;\n        flex: 1;\n        width: 100%;\n        height: 100%;\n        justify-content: center;\n        align-items: center;\n        padding: 0 10px;\n\n        .PdgIcon {\n          margin-right: 0.2em;\n        }\n      }\n    }\n  }\n\n  &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  &.MuiButton-outlined {\n    &:first-of-type:not(:last-of-type) {\n      border-right: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    &:last-of-type:not(:first-of-type) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n    &:not(:first-of-type):not(:last-of-type) {\n      border-right: 0;\n      border-radius: 0;\n    }\n  }\n"], ["\n  min-width: 0;\n\n  &.input-file-btn {\n    padding: 0 !important;\n    position: relative;\n\n    .PdgFlexRowBox {\n      height: 100%;\n      label {\n        cursor: pointer;\n        display: flex;\n        flex: 1;\n        width: 100%;\n        height: 100%;\n        justify-content: center;\n        align-items: center;\n        padding: 0 10px;\n\n        .PdgIcon {\n          margin-right: 0.2em;\n        }\n      }\n    }\n  }\n\n  &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  &.MuiButton-outlined {\n    &:first-of-type:not(:last-of-type) {\n      border-right: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    &:last-of-type:not(:first-of-type) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n    &:not(:first-of-type):not(:last-of-type) {\n      border-right: 0;\n      border-radius: 0;\n    }\n  }\n"])));
+};var StyledPdgButton = styled(PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  min-width: 0;\n\n  &.input-file-btn {\n    padding: 0 !important;\n    position: relative;\n\n    .PdgFlexRowBox {\n      height: 100%;\n      label {\n        cursor: pointer;\n        display: flex;\n        flex: 1;\n        width: 100%;\n        height: 100%;\n        justify-content: center;\n        align-items: center;\n        padding: 0 10px;\n\n        .PdgIcon {\n          margin-right: 0.2em;\n        }\n      }\n    }\n  }\n\n  &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  &.MuiButton-outlined {\n    &:first-of-type:not(:last-of-type) {\n      border-right: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    &:last-of-type:not(:first-of-type) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n    &:not(:first-of-type):not(:last-of-type) {\n      border-right: 0;\n      border-radius: 0;\n    }\n  }\n"], ["\n  min-width: 0;\n\n  &.input-file-btn {\n    padding: 0 !important;\n    position: relative;\n\n    .PdgFlexRowBox {\n      height: 100%;\n      label {\n        cursor: pointer;\n        display: flex;\n        flex: 1;\n        width: 100%;\n        height: 100%;\n        justify-content: center;\n        align-items: center;\n        padding: 0 10px;\n\n        .PdgIcon {\n          margin-right: 0.2em;\n        }\n      }\n    }\n  }\n\n  &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  &.MuiButton-outlined {\n    &:first-of-type:not(:last-of-type) {\n      border-right: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    &:last-of-type:not(:first-of-type) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n    &:not(:first-of-type):not(:last-of-type) {\n      border-right: 0;\n      border-radius: 0;\n    }\n  }\n"])));
 var templateObject_1$1;var getFinalValue$5 = function (value) { return value || ''; };var FILE_VALUE = '';
 var FormFile = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
@@ -8612,8 +9196,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
             React.createElement(PrivateAlertDialog, __assign({}, alertDialogProps, { onClose: function () { return setAlertDialogProps({ open: false }); } })),
             React.createElement(LinkDialog, { open: isOpenLinkDialog, onConfirm: handleLinkDialogConfirm, onClose: function () { return setIsOpenLinkDialog(false); } })) }));
 });
-FormFile.displayName = 'FormFile';var css_248z = ".FormImageFile .preview-img {\n  max-width: 100%;\n}\n.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img {\n  padding-right: 14px;\n}";
-styleInject(css_248z);var getFinalValue$4 = function (value) { return value || ''; };var FormImageFile = React.forwardRef(function (_a, ref) {
+FormFile.displayName = 'FormFile';var getFinalValue$4 = function (value) { return value || ''; };var FormImageFile = React.forwardRef(function (_a, ref) {
     var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, _b = _a.accept, accept = _b === void 0 ? '.jpg,.jpeg,.png' : _b, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest(_a, ["className", "imageSize", "preview", "previewMaxHeight", "accept", "value", "onChange", "onFile", "onLink"]);
     var _c = useState({
         open: false,
@@ -8752,7 +9335,18 @@ styleInject(css_248z);var getFinalValue$4 = function (value) { return value || '
                     React.createElement("img", { className: 'preview-img', src: value, style: { maxHeight: previewMaxHeight || undefined }, alt: '' })))) : undefined, onChange: handleChange, onFile: handleFile, onLink: handleLink }, props)),
         React.createElement(PrivateAlertDialog, __assign({}, alertDialogProps, { onClose: function () { return setAlertDialogProps({ open: false }); } }))));
 });
-FormImageFile.displayName = 'FormImageFile';var getFinalValue$3 = function (value) {
+FormImageFile.displayName = 'FormImageFile';var ko$1 = {exports: {}};var ko = ko$1.exports;
+
+var hasRequiredKo;
+
+function requireKo () {
+	if (hasRequiredKo) return ko$1.exports;
+	hasRequiredKo = 1;
+	(function (module, exports) {
+		!function(e,_){module.exports=_(dayjs);}(ko,(function(e){function _(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=_(e),t={name:"ko",weekdays:"일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),weekdaysShort:"일_월_화_수_목_금_토".split("_"),weekdaysMin:"일_월_화_수_목_금_토".split("_"),months:"1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),monthsShort:"1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),ordinal:function(e){return e+"일"},formats:{LT:"A h:mm",LTS:"A h:mm:ss",L:"YYYY.MM.DD.",LL:"YYYY년 MMMM D일",LLL:"YYYY년 MMMM D일 A h:mm",LLLL:"YYYY년 MMMM D일 dddd A h:mm",l:"YYYY.MM.DD.",ll:"YYYY년 MMMM D일",lll:"YYYY년 MMMM D일 A h:mm",llll:"YYYY년 MMMM D일 dddd A h:mm"},meridiem:function(e){return e<12?"오전":"오후"},relativeTime:{future:"%s 후",past:"%s 전",s:"몇 초",m:"1분",mm:"%d분",h:"한 시간",hh:"%d시간",d:"하루",dd:"%d일",M:"한 달",MM:"%d달",y:"일 년",yy:"%d년"}};return d.default.locale(t,null,true),t})); 
+	} (ko$1));
+	return ko$1.exports;
+}requireKo();var getFinalValue$3 = function (value) {
     return value || null;
 };
 var valueToDate$3 = function (v) { return dayjs("".concat(v.year, "-").concat(v.month, "-01")); };
@@ -10823,4 +11417,4 @@ var SearchButton$1 = React.memo(SearchButton);var SearchMenuButton = function (_
                 }
             }
         } }, props, { autoSubmit: true, onSubmit: handleSubmit })));
-});export{Form,FormAutocomplete,FormBlock,FormBody,FormButton$1 as FormButton,FormCheckbox,FormCol,FormCompanyNo,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDateRangePicker,FormDateTimePicker,FormDivider,FormEmail,FormFile,FormFooter,FormHidden,FormImageFile,FormLabel$1 as FormLabel,FormMobile,FormMonthPicker,FormMonthRangePicker,FormNumber,FormPassword,FormPersonalNo,FormRadioGroup,FormRating,FormRow,FormSearch,FormSelect,FormSwitch,FormTag,FormTel,FormText,FormTextEditor,FormTextField,FormTextarea,FormTimePicker,FormToggleButtonGroup,FormUrl,FormYearPicker,FormYearRangePicker,HashSearch,Search,SearchButton$1 as SearchButton,SearchGroup,SearchGroupRow,SearchMenuButton,useFormState};
+});export{Form,FormAutocomplete,FormBlock,FormBody,FormBusinessNo,FormButton$1 as FormButton,FormCheckbox,FormCol,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDateRangePicker,FormDateTimePicker,FormDivider,FormEmail,FormFile,FormFooter,FormHidden,FormImageFile,FormLabel$1 as FormLabel,FormMobile,FormMonthPicker,FormMonthRangePicker,FormNumber,FormPassword,FormPersonalNo,FormRadioGroup,FormRating,FormRow,FormSearch,FormSelect,FormSwitch,FormTag,FormTel,FormText,FormTextEditor,FormTextField,FormTextarea,FormTimePicker,FormToggleButtonGroup,FormUrl,FormYearPicker,FormYearRangePicker,HashSearch,Search,SearchButton$1 as SearchButton,SearchGroup,SearchGroupRow,SearchMenuButton,useFormState};