@sunggang/ui-lib 0.2.99 → 0.3.1

package/index.esm2.js

@@ -18,6 +18,7 @@ import * as locales from 'react-date-range/dist/locale/index.js';
 import addDays from 'date-fns/addDays/index.js';
 import format$1 from 'date-fns/format/index.js';
 import { keyframes, jsx as jsx$1, css as css$2 } from '@emotion/react';
+import { Checkbox, RadioGroup, FormControlLabel, Radio } from '@mui/material';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ChevronRightIcon, CheckIcon, DotFilledIcon } from '@radix-ui/react-icons';
@@ -19579,7 +19580,6 @@ var set = function(object, path, value1) {
         object[key] = newValue;
         object = object[key];
     }
-    return object;
 };
 var EVENTS = {
     BLUR: "blur",
@@ -19692,42 +19692,6 @@ var getProxyFormState = function(formState, control, localProxyFormState) {
     for(var key in formState)_loop(key);
     return result;
 };
-var isEmptyObject = function(value1) {
-    return isObject$a(value1) && !Object.keys(value1).length;
-};
-var shouldRenderFormState = function(formStateData, _proxyFormState, updateFormState, isRoot) {
-    updateFormState(formStateData);
-    formStateData.name; var formState = _object_without_properties$7(formStateData, [
-        "name"
-    ]);
-    return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find(function(key) {
-        return _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all);
-    });
-};
-var convertToArrayPayload = function(value1) {
-    return Array.isArray(value1) ? value1 : [
-        value1
-    ];
-};
-var shouldSubscribeByName = function(name, signalName, exact) {
-    return !name || !signalName || name === signalName || convertToArrayPayload(name).some(function(currentName) {
-        return currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName));
-    });
-};
-function useSubscribe(props) {
-    var _props = React__default.useRef(props);
-    _props.current = props;
-    React__default.useEffect(function() {
-        var subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
-            next: _props.current.next
-        });
-        return function() {
-            subscription && subscription.unsubscribe();
-        };
-    }, [
-        props.disabled
-    ]);
-}
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
  *
@@ -19761,7 +19725,6 @@ function useSubscribe(props) {
     var methods = useFormContext();
     var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, disabled = _ref.disabled, name = _ref.name, exact = _ref.exact;
     var _React_useState = _sliced_to_array$8(React__default.useState(control._formState), 2), formState = _React_useState[0], updateFormState = _React_useState[1];
-    var _mounted = React__default.useRef(true);
     var _localProxyFormState = React__default.useRef({
         isDirty: false,
         isLoading: false,
@@ -19774,19 +19737,22 @@ function useSubscribe(props) {
     });
     var _name = React__default.useRef(name);
     _name.current = name;
-    useSubscribe({
-        disabled: disabled,
-        next: function(value1) {
-            return _mounted.current && shouldSubscribeByName(_name.current, value1.name, exact) && shouldRenderFormState(value1, _localProxyFormState.current, control._updateFormState) && updateFormState(_object_spread$e({}, control._formState, value1));
-        },
-        subject: control._subjects.state
-    });
     React__default.useEffect(function() {
-        _mounted.current = true;
-        _localProxyFormState.current.isValid && control._updateValid(true);
-        return function() {
-            _mounted.current = false;
-        };
+        return control._subscribe({
+            name: _name.current,
+            formState: _localProxyFormState.current,
+            exact: exact,
+            callback: function(formState) {
+                !disabled && updateFormState(_object_spread$e({}, control._formState, formState));
+            }
+        });
+    }, [
+        control,
+        disabled,
+        exact
+    ]);
+    React__default.useEffect(function() {
+        _localProxyFormState.current.isValid && control._setValid(true);
     }, [
         control
     ]);
@@ -19832,16 +19798,24 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
     var methods = useFormContext();
     var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, name = _ref.name, defaultValue = _ref.defaultValue, disabled = _ref.disabled, exact = _ref.exact;
     var _name = React__default.useRef(name);
+    var _defaultValue = React__default.useRef(defaultValue);
     _name.current = name;
-    useSubscribe({
-        disabled: disabled,
-        subject: control._subjects.values,
-        next: function(formState) {
-            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-                updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
+    React__default.useEffect(function() {
+        return control._subscribe({
+            name: _name.current,
+            formState: {
+                values: true
+            },
+            exact: exact,
+            callback: function(formState) {
+                return !disabled && updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current));
             }
-        }
-    });
+        });
+    }, [
+        control,
+        disabled,
+        exact
+    ]);
     var _React_useState = _sliced_to_array$8(React__default.useState(control._getWatch(name, defaultValue)), 2), value1 = _React_useState[0], updateValue = _React_useState[1];
     React__default.useEffect(function() {
         return control._removeUnmounted();
@@ -19886,6 +19860,7 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
         name: name,
         exact: true
     });
+    var _props = React__default.useRef(props);
     var _registerProps = React__default.useRef(control.register(name, _object_spread$e(_object_spread_props$a(_object_spread$e({}, props.rules), {
         value: value1
     }), isBoolean(props.disabled) ? {
@@ -19928,6 +19903,51 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
         formState,
         name
     ]);
+    var onChange = React__default.useCallback(function(event) {
+        return _registerProps.current.onChange({
+            target: {
+                value: getEventValue(event),
+                name: name
+            },
+            type: EVENTS.CHANGE
+        });
+    }, [
+        name
+    ]);
+    var onBlur = React__default.useCallback(function() {
+        return _registerProps.current.onBlur({
+            target: {
+                value: get$2(control._formValues, name),
+                name: name
+            },
+            type: EVENTS.BLUR
+        });
+    }, [
+        name,
+        control._formValues
+    ]);
+    var ref = React__default.useCallback(function(elm) {
+        var field = get$2(control._fields, name);
+        if (field && elm) {
+            field._f.ref = {
+                focus: function() {
+                    return elm.focus();
+                },
+                select: function() {
+                    return elm.select();
+                },
+                setCustomValidity: function(message) {
+                    return elm.setCustomValidity(message);
+                },
+                reportValidity: function() {
+                    return elm.reportValidity();
+                }
+            };
+        }
+    }, [
+        control._fields,
+        name
+    ]);
     var field = React__default.useMemo(function() {
         return _object_spread_props$a(_object_spread$e({
             name: name,
@@ -19935,54 +19955,24 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
         }, isBoolean(disabled) || formState.disabled ? {
             disabled: formState.disabled || disabled
         } : {}), {
-            onChange: function(event) {
-                return _registerProps.current.onChange({
-                    target: {
-                        value: getEventValue(event),
-                        name: name
-                    },
-                    type: EVENTS.CHANGE
-                });
-            },
-            onBlur: function() {
-                return _registerProps.current.onBlur({
-                    target: {
-                        value: get$2(control._formValues, name),
-                        name: name
-                    },
-                    type: EVENTS.BLUR
-                });
-            },
-            ref: function(elm) {
-                var field = get$2(control._fields, name);
-                if (field && elm) {
-                    field._f.ref = {
-                        focus: function() {
-                            return elm.focus();
-                        },
-                        select: function() {
-                            return elm.select();
-                        },
-                        setCustomValidity: function(message) {
-                            return elm.setCustomValidity(message);
-                        },
-                        reportValidity: function() {
-                            return elm.reportValidity();
-                        }
-                    };
-                }
-            }
+            onChange: onChange,
+            onBlur: onBlur,
+            ref: ref
         });
     }, [
         name,
-        control._formValues,
         disabled,
         formState.disabled,
-        value1,
-        control._fields
+        onChange,
+        onBlur,
+        ref,
+        value1
     ]);
     React__default.useEffect(function() {
         var _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+        control.register(name, _object_spread$e({}, _props.current.rules, isBoolean(_props.current.disabled) ? {
+            disabled: _props.current.disabled
+        } : {}));
         var updateMounted = function(name, value1) {
             var field = get$2(control._fields, name);
             if (field && field._f) {
@@ -20008,9 +19998,8 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
         shouldUnregister
     ]);
     React__default.useEffect(function() {
-        control._updateDisabledField({
+        control._setDisabledField({
             disabled: disabled,
-            fields: control._fields,
             name: name
         });
     }, [
@@ -20079,405 +20068,11 @@ var appendErrors = function(name, validateAllFieldCriteria, errors, type, messag
         types: _object_spread_props$a(_object_spread$e({}, errors[name] && errors[name].types ? errors[name].types : {}), _define_property$e({}, type, message || true))
     }) : {};
 };
-var getValidationModes = function(mode) {
-    return {
-        isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-        isOnBlur: mode === VALIDATION_MODE.onBlur,
-        isOnChange: mode === VALIDATION_MODE.onChange,
-        isOnAll: mode === VALIDATION_MODE.all,
-        isOnTouch: mode === VALIDATION_MODE.onTouched
-    };
-};
-var isWatched = function(name, _names, isBlurEvent) {
-    return !isBlurEvent && (_names.watchAll || _names.watch.has(name) || _to_consumable_array$3(_names.watch).some(function(watchName) {
-        return name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length));
-    }));
-};
-var iterateFieldsByAction = function(fields, action, fieldsNames, abortEarly) {
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-    try {
-        for(var _iterator = (fieldsNames || Object.keys(fields))[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-            var _ref = _step.value;
-            var key = _ref;
-            var field = get$2(fields, key);
-            if (field) {
-                var _f = field._f, currentField = _object_without_properties$7(field, [
-                    "_f"
-                ]);
-                if (_f) {
-                    if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
-                        return true;
-                    } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
-                        return true;
-                    } else {
-                        if (iterateFieldsByAction(currentField, action)) {
-                            break;
-                        }
-                    }
-                } else if (isObject$a(currentField)) {
-                    if (iterateFieldsByAction(currentField, action)) {
-                        break;
-                    }
-                }
-            }
-        }
-    } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-    } finally{
-        try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-                _iterator.return();
-            }
-        } finally{
-            if (_didIteratorError) {
-                throw _iteratorError;
-            }
-        }
-    }
-    return;
-};
-var updateFieldArrayRootError = function(errors, error, name) {
-    var fieldArrayErrors = convertToArrayPayload(get$2(errors, name));
-    set(fieldArrayErrors, "root", error[name]);
-    set(errors, name, fieldArrayErrors);
-    return errors;
-};
-var isFileInput = function(element) {
-    return element.type === "file";
-};
-var isFunction$5 = function(value1) {
-    return typeof value1 === "function";
-};
-var isHTMLElement$3 = function(value1) {
-    if (!isWeb) {
-        return false;
-    }
-    var owner = value1 ? value1.ownerDocument : 0;
-    return _instanceof$8(value1, owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
-};
-var isMessage = function(value1) {
-    return isString(value1);
-};
-var isRadioInput = function(element) {
-    return element.type === "radio";
-};
-var isRegex = function(value1) {
-    return _instanceof$8(value1, RegExp);
-};
-var defaultResult = {
-    value: false,
-    isValid: false
-};
-var validResult = {
-    value: true,
-    isValid: true
-};
-var getCheckboxValue = function(options) {
-    if (Array.isArray(options)) {
-        if (options.length > 1) {
-            var values = options.filter(function(option) {
-                return option && option.checked && !option.disabled;
-            }).map(function(option) {
-                return option.value;
-            });
-            return {
-                value: values,
-                isValid: !!values.length
-            };
-        }
-        return options[0].checked && !options[0].disabled ? options[0].attributes && !isUndefined(options[0].attributes.value) ? isUndefined(options[0].value) || options[0].value === "" ? validResult : {
-            value: options[0].value,
-            isValid: true
-        } : validResult : defaultResult;
-    }
-    return defaultResult;
-};
-var defaultReturn = {
-    isValid: false,
-    value: null
-};
-var getRadioValue = function(options) {
-    return Array.isArray(options) ? options.reduce(function(previous, option) {
-        return option && option.checked && !option.disabled ? {
-            isValid: true,
-            value: option.value
-        } : previous;
-    }, defaultReturn) : defaultReturn;
-};
-function getValidateError(result, ref) {
-    var type = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "validate";
-    if (isMessage(result) || Array.isArray(result) && result.every(isMessage) || isBoolean(result) && !result) {
-        return {
-            type: type,
-            message: isMessage(result) ? result : "",
-            ref: ref
-        };
-    }
-}
-var getValueAndMessage = function(validationData) {
-    return isObject$a(validationData) && !isRegex(validationData) ? validationData : {
-        value: validationData,
-        message: ""
-    };
+var convertToArrayPayload = function(value1) {
+    return Array.isArray(value1) ? value1 : [
+        value1
+    ];
 };
-var validateField = function() {
-    var _ref = _async_to_generator$2(function(field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) {
-        var _field__f, ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, inputValue, inputRef, setCustomValidity, error, isRadio, isCheckBox, isRadioOrCheckbox, isEmpty, appendErrorsCurry, getMinMaxMessage, _ref, value1, message, exceedMax, exceedMin, maxOutput, minOutput, valueNumber, valueDate, convertTimeToDate, isTime, isWeek, maxLengthOutput, minLengthOutput, exceedMax1, exceedMin1, _getValueAndMessage, patternValue, message1, result, validateError, validationResult, _tmp, _tmp1, _i, key, validateError1;
-        return _ts_generator$2(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    _field__f = field._f, ref = _field__f.ref, refs = _field__f.refs, required = _field__f.required, maxLength = _field__f.maxLength, minLength = _field__f.minLength, min = _field__f.min, max = _field__f.max, pattern = _field__f.pattern, validate = _field__f.validate, name = _field__f.name, valueAsNumber = _field__f.valueAsNumber, mount = _field__f.mount;
-                    inputValue = get$2(formValues, name);
-                    if (!mount || disabledFieldNames.has(name)) {
-                        return [
-                            2,
-                            {}
-                        ];
-                    }
-                    inputRef = refs ? refs[0] : ref;
-                    setCustomValidity = function(message) {
-                        if (shouldUseNativeValidation && inputRef.reportValidity) {
-                            inputRef.setCustomValidity(isBoolean(message) ? "" : message || "");
-                            inputRef.reportValidity();
-                        }
-                    };
-                    error = {};
-                    isRadio = isRadioInput(ref);
-                    isCheckBox = isCheckBoxInput(ref);
-                    isRadioOrCheckbox = isRadio || isCheckBox;
-                    isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement$3(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
-                    appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
-                    getMinMaxMessage = function(exceedMax, maxLengthMessage, minLengthMessage) {
-                        var maxType = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : INPUT_VALIDATION_RULES.maxLength, minType = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : INPUT_VALIDATION_RULES.minLength;
-                        var message = exceedMax ? maxLengthMessage : minLengthMessage;
-                        error[name] = _object_spread$e({
-                            type: exceedMax ? maxType : minType,
-                            message: message,
-                            ref: ref
-                        }, appendErrorsCurry(exceedMax ? maxType : minType, message));
-                    };
-                    if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required && (!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
-                        _ref = isMessage(required) ? {
-                            value: !!required,
-                            message: required
-                        } : getValueAndMessage(required), value1 = _ref.value, message = _ref.message;
-                        if (value1) {
-                            error[name] = _object_spread$e({
-                                type: INPUT_VALIDATION_RULES.required,
-                                message: message,
-                                ref: inputRef
-                            }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
-                            if (!validateAllFieldCriteria) {
-                                setCustomValidity(message);
-                                return [
-                                    2,
-                                    error
-                                ];
-                            }
-                        }
-                    }
-                    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
-                        maxOutput = getValueAndMessage(max);
-                        minOutput = getValueAndMessage(min);
-                        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
-                            valueNumber = ref.valueAsNumber || (inputValue ? +inputValue : inputValue);
-                            if (!isNullOrUndefined(maxOutput.value)) {
-                                exceedMax = valueNumber > maxOutput.value;
-                            }
-                            if (!isNullOrUndefined(minOutput.value)) {
-                                exceedMin = valueNumber < minOutput.value;
-                            }
-                        } else {
-                            valueDate = ref.valueAsDate || new Date(inputValue);
-                            convertTimeToDate = function(time) {
-                                return new Date(new Date().toDateString() + " " + time);
-                            };
-                            isTime = ref.type == "time";
-                            isWeek = ref.type == "week";
-                            if (isString(maxOutput.value) && inputValue) {
-                                exceedMax = isTime ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) : isWeek ? inputValue > maxOutput.value : valueDate > new Date(maxOutput.value);
-                            }
-                            if (isString(minOutput.value) && inputValue) {
-                                exceedMin = isTime ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) : isWeek ? inputValue < minOutput.value : valueDate < new Date(minOutput.value);
-                            }
-                        }
-                        if (exceedMax || exceedMin) {
-                            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
-                            if (!validateAllFieldCriteria) {
-                                setCustomValidity(error[name].message);
-                                return [
-                                    2,
-                                    error
-                                ];
-                            }
-                        }
-                    }
-                    if ((maxLength || minLength) && !isEmpty && (isString(inputValue) || isFieldArray && Array.isArray(inputValue))) {
-                        maxLengthOutput = getValueAndMessage(maxLength);
-                        minLengthOutput = getValueAndMessage(minLength);
-                        exceedMax1 = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
-                        exceedMin1 = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
-                        if (exceedMax1 || exceedMin1) {
-                            getMinMaxMessage(exceedMax1, maxLengthOutput.message, minLengthOutput.message);
-                            if (!validateAllFieldCriteria) {
-                                setCustomValidity(error[name].message);
-                                return [
-                                    2,
-                                    error
-                                ];
-                            }
-                        }
-                    }
-                    if (pattern && !isEmpty && isString(inputValue)) {
-                        _getValueAndMessage = getValueAndMessage(pattern), patternValue = _getValueAndMessage.value, message1 = _getValueAndMessage.message;
-                        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
-                            error[name] = _object_spread$e({
-                                type: INPUT_VALIDATION_RULES.pattern,
-                                message: message1,
-                                ref: ref
-                            }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message1));
-                            if (!validateAllFieldCriteria) {
-                                setCustomValidity(message1);
-                                return [
-                                    2,
-                                    error
-                                ];
-                            }
-                        }
-                    }
-                    if (!validate) return [
-                        3,
-                        7
-                    ];
-                    if (!isFunction$5(validate)) return [
-                        3,
-                        2
-                    ];
-                    return [
-                        4,
-                        validate(inputValue, formValues)
-                    ];
-                case 1:
-                    result = _state.sent();
-                    validateError = getValidateError(result, inputRef);
-                    if (validateError) {
-                        error[name] = _object_spread$e({}, validateError, appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
-                        if (!validateAllFieldCriteria) {
-                            setCustomValidity(validateError.message);
-                            return [
-                                2,
-                                error
-                            ];
-                        }
-                    }
-                    return [
-                        3,
-                        7
-                    ];
-                case 2:
-                    if (!isObject$a(validate)) return [
-                        3,
-                        7
-                    ];
-                    validationResult = {};
-                    _tmp = [];
-                    for(_tmp1 in validate)_tmp.push(_tmp1);
-                    _i = 0;
-                    _state.label = 3;
-                case 3:
-                    if (!(_i < _tmp.length)) return [
-                        3,
-                        6
-                    ];
-                    key = _tmp[_i];
-                    if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
-                        return [
-                            3,
-                            6
-                        ];
-                    }
-                    return [
-                        4,
-                        validate[key](inputValue, formValues)
-                    ];
-                case 4:
-                    validateError1 = getValidateError.apply(void 0, [
-                        _state.sent(),
-                        inputRef,
-                        key
-                    ]);
-                    if (validateError1) {
-                        validationResult = _object_spread$e({}, validateError1, appendErrorsCurry(key, validateError1.message));
-                        setCustomValidity(validateError1.message);
-                        if (validateAllFieldCriteria) {
-                            error[name] = validationResult;
-                        }
-                    }
-                    _state.label = 5;
-                case 5:
-                    _i++;
-                    return [
-                        3,
-                        3
-                    ];
-                case 6:
-                    if (!isEmptyObject(validationResult)) {
-                        error[name] = _object_spread$e({
-                            ref: inputRef
-                        }, validationResult);
-                        if (!validateAllFieldCriteria) {
-                            return [
-                                2,
-                                error
-                            ];
-                        }
-                    }
-                    _state.label = 7;
-                case 7:
-                    setCustomValidity(true);
-                    return [
-                        2,
-                        error
-                    ];
-            }
-        });
-    });
-    return function validateField(field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) {
-        return _ref.apply(this, arguments);
-    };
-}();
-function baseGet$5(object, updatePath) {
-    var length = updatePath.slice(0, -1).length;
-    var index = 0;
-    while(index < length){
-        object = isUndefined(object) ? index++ : object[updatePath[index++]];
-    }
-    return object;
-}
-function isEmptyArray(obj) {
-    for(var key in obj){
-        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
-            return false;
-        }
-    }
-    return true;
-}
-function unset(object, path) {
-    var paths = Array.isArray(path) ? path : isKey$4(path) ? [
-        path
-    ] : stringToPath$2(path);
-    var childObject = paths.length === 1 ? object : baseGet$5(object, paths);
-    var index = paths.length - 1;
-    var key = paths[index];
-    if (childObject) {
-        delete childObject[key];
-    }
-    if (index !== 0 && (isObject$a(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
-        unset(object, paths.slice(0, -1));
-    }
-    return object;
-}
 var createSubject = function() {
     var _observers = [];
     var next = function(value1) {
@@ -20570,15 +20165,65 @@ function deepEqual(object1, object2) {
     }
     return true;
 }
+var isEmptyObject = function(value1) {
+    return isObject$a(value1) && !Object.keys(value1).length;
+};
+var isFileInput = function(element) {
+    return element.type === "file";
+};
+var isFunction$5 = function(value1) {
+    return typeof value1 === "function";
+};
+var isHTMLElement$3 = function(value1) {
+    if (!isWeb) {
+        return false;
+    }
+    var owner = value1 ? value1.ownerDocument : 0;
+    return _instanceof$8(value1, owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
+};
 var isMultipleSelect = function(element) {
     return element.type === "select-multiple";
 };
+var isRadioInput = function(element) {
+    return element.type === "radio";
+};
 var isRadioOrCheckbox = function(ref) {
     return isRadioInput(ref) || isCheckBoxInput(ref);
 };
 var live = function(ref) {
     return isHTMLElement$3(ref) && ref.isConnected;
 };
+function baseGet$5(object, updatePath) {
+    var length = updatePath.slice(0, -1).length;
+    var index = 0;
+    while(index < length){
+        object = isUndefined(object) ? index++ : object[updatePath[index++]];
+    }
+    return object;
+}
+function isEmptyArray(obj) {
+    for(var key in obj){
+        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+function unset(object, path) {
+    var paths = Array.isArray(path) ? path : isKey$4(path) ? [
+        path
+    ] : stringToPath$2(path);
+    var childObject = paths.length === 1 ? object : baseGet$5(object, paths);
+    var index = paths.length - 1;
+    var key = paths[index];
+    if (childObject) {
+        delete childObject[key];
+    }
+    if (index !== 0 && (isObject$a(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
+        unset(object, paths.slice(0, -1));
+    }
+    return object;
+}
 var objectHasFunction = function(data) {
     for(var key in data){
         if (isFunction$5(data[key])) {
@@ -20622,10 +20267,50 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
 var getDirtyFields = function(defaultValues, formValues) {
     return getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
 };
+var defaultResult = {
+    value: false,
+    isValid: false
+};
+var validResult = {
+    value: true,
+    isValid: true
+};
+var getCheckboxValue = function(options) {
+    if (Array.isArray(options)) {
+        if (options.length > 1) {
+            var values = options.filter(function(option) {
+                return option && option.checked && !option.disabled;
+            }).map(function(option) {
+                return option.value;
+            });
+            return {
+                value: values,
+                isValid: !!values.length
+            };
+        }
+        return options[0].checked && !options[0].disabled ? options[0].attributes && !isUndefined(options[0].attributes.value) ? isUndefined(options[0].value) || options[0].value === "" ? validResult : {
+            value: options[0].value,
+            isValid: true
+        } : validResult : defaultResult;
+    }
+    return defaultResult;
+};
 var getFieldValueAs = function(value1, param) {
     var valueAsNumber = param.valueAsNumber, valueAsDate = param.valueAsDate, setValueAs = param.setValueAs;
     return isUndefined(value1) ? value1 : valueAsNumber ? value1 === "" ? NaN : value1 ? +value1 : value1 : valueAsDate && isString(value1) ? new Date(value1) : setValueAs ? setValueAs(value1) : value1;
 };
+var defaultReturn = {
+    isValid: false,
+    value: null
+};
+var getRadioValue = function(options) {
+    return Array.isArray(options) ? options.reduce(function(previous, option) {
+        return option && option.checked && !option.disabled ? {
+            isValid: true,
+            value: option.value
+        } : previous;
+    }, defaultReturn) : defaultReturn;
+};
 function getFieldValue(_f) {
     var ref = _f.ref;
     if (isFileInput(ref)) {
@@ -20675,9 +20360,21 @@ var getResolverOptions = function(fieldsNames, _fields, criteriaMode, shouldUseN
         shouldUseNativeValidation: shouldUseNativeValidation
     };
 };
+var isRegex = function(value1) {
+    return _instanceof$8(value1, RegExp);
+};
 var getRuleValue = function(rule) {
     return isUndefined(rule) ? rule : isRegex(rule) ? rule.source : isObject$a(rule) ? isRegex(rule.value) ? rule.value.source : rule.value : rule;
 };
+var getValidationModes = function(mode) {
+    return {
+        isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+        isOnBlur: mode === VALIDATION_MODE.onBlur,
+        isOnChange: mode === VALIDATION_MODE.onChange,
+        isOnAll: mode === VALIDATION_MODE.all,
+        isOnTouch: mode === VALIDATION_MODE.onTouched
+    };
+};
 var ASYNC_FUNCTION = "AsyncFunction";
 var hasPromiseValidation = function(fieldReference) {
     return !!fieldReference && !!fieldReference.validate && !!(isFunction$5(fieldReference.validate) && fieldReference.validate.constructor.name === ASYNC_FUNCTION || isObject$a(fieldReference.validate) && Object.values(fieldReference.validate).find(function(validateFunction) {
@@ -20687,6 +20384,55 @@ var hasPromiseValidation = function(fieldReference) {
 var hasValidation = function(options) {
     return options.mount && (options.required || options.min || options.max || options.maxLength || options.minLength || options.pattern || options.validate);
 };
+var isWatched = function(name, _names, isBlurEvent) {
+    return !isBlurEvent && (_names.watchAll || _names.watch.has(name) || _to_consumable_array$3(_names.watch).some(function(watchName) {
+        return name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length));
+    }));
+};
+var iterateFieldsByAction = function(fields, action, fieldsNames, abortEarly) {
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = (fieldsNames || Object.keys(fields))[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var _ref = _step.value;
+            var key = _ref;
+            var field = get$2(fields, key);
+            if (field) {
+                var _f = field._f, currentField = _object_without_properties$7(field, [
+                    "_f"
+                ]);
+                if (_f) {
+                    if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
+                        return true;
+                    } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
+                        return true;
+                    } else {
+                        if (iterateFieldsByAction(currentField, action)) {
+                            break;
+                        }
+                    }
+                } else if (isObject$a(currentField)) {
+                    if (iterateFieldsByAction(currentField, action)) {
+                        break;
+                    }
+                }
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return;
+};
 function schemaErrorLookup(errors, _fields, name) {
     var error = get$2(errors, name);
     if (error || isKey$4(name)) {
@@ -20717,6 +20463,20 @@ function schemaErrorLookup(errors, _fields, name) {
         name: name
     };
 }
+var shouldRenderFormState = function(formStateData, _proxyFormState, updateFormState, isRoot) {
+    updateFormState(formStateData);
+    formStateData.name; var formState = _object_without_properties$7(formStateData, [
+        "name"
+    ]);
+    return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find(function(key) {
+        return _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all);
+    });
+};
+var shouldSubscribeByName = function(name, signalName, exact) {
+    return !name || !signalName || name === signalName || convertToArrayPayload(name).some(function(currentName) {
+        return currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName));
+    });
+};
 var skipValidation = function(isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) {
     if (mode.isOnAll) {
         return false;
@@ -20732,6 +20492,257 @@ var skipValidation = function(isBlurEvent, isTouched, isSubmitted, reValidateMod
 var unsetEmptyArray = function(ref, name) {
     return !compact(get$2(ref, name)).length && unset(ref, name);
 };
+var updateFieldArrayRootError = function(errors, error, name) {
+    var fieldArrayErrors = convertToArrayPayload(get$2(errors, name));
+    set(fieldArrayErrors, "root", error[name]);
+    set(errors, name, fieldArrayErrors);
+    return errors;
+};
+var isMessage = function(value1) {
+    return isString(value1);
+};
+function getValidateError(result, ref) {
+    var type = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "validate";
+    if (isMessage(result) || Array.isArray(result) && result.every(isMessage) || isBoolean(result) && !result) {
+        return {
+            type: type,
+            message: isMessage(result) ? result : "",
+            ref: ref
+        };
+    }
+}
+var getValueAndMessage = function(validationData) {
+    return isObject$a(validationData) && !isRegex(validationData) ? validationData : {
+        value: validationData,
+        message: ""
+    };
+};
+var validateField = function() {
+    var _ref = _async_to_generator$2(function(field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) {
+        var _field__f, ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, inputValue, inputRef, setCustomValidity, error, isRadio, isCheckBox, isRadioOrCheckbox, isEmpty, appendErrorsCurry, getMinMaxMessage, _ref, value1, message, exceedMax, exceedMin, maxOutput, minOutput, valueNumber, valueDate, convertTimeToDate, isTime, isWeek, maxLengthOutput, minLengthOutput, exceedMax1, exceedMin1, _getValueAndMessage, patternValue, message1, result, validateError, validationResult, _tmp, _tmp1, _i, key, validateError1;
+        return _ts_generator$2(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _field__f = field._f, ref = _field__f.ref, refs = _field__f.refs, required = _field__f.required, maxLength = _field__f.maxLength, minLength = _field__f.minLength, min = _field__f.min, max = _field__f.max, pattern = _field__f.pattern, validate = _field__f.validate, name = _field__f.name, valueAsNumber = _field__f.valueAsNumber, mount = _field__f.mount;
+                    inputValue = get$2(formValues, name);
+                    if (!mount || disabledFieldNames.has(name)) {
+                        return [
+                            2,
+                            {}
+                        ];
+                    }
+                    inputRef = refs ? refs[0] : ref;
+                    setCustomValidity = function(message) {
+                        if (shouldUseNativeValidation && inputRef.reportValidity) {
+                            inputRef.setCustomValidity(isBoolean(message) ? "" : message || "");
+                            inputRef.reportValidity();
+                        }
+                    };
+                    error = {};
+                    isRadio = isRadioInput(ref);
+                    isCheckBox = isCheckBoxInput(ref);
+                    isRadioOrCheckbox = isRadio || isCheckBox;
+                    isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement$3(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
+                    appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
+                    getMinMaxMessage = function(exceedMax, maxLengthMessage, minLengthMessage) {
+                        var maxType = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : INPUT_VALIDATION_RULES.maxLength, minType = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : INPUT_VALIDATION_RULES.minLength;
+                        var message = exceedMax ? maxLengthMessage : minLengthMessage;
+                        error[name] = _object_spread$e({
+                            type: exceedMax ? maxType : minType,
+                            message: message,
+                            ref: ref
+                        }, appendErrorsCurry(exceedMax ? maxType : minType, message));
+                    };
+                    if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required && (!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
+                        _ref = isMessage(required) ? {
+                            value: !!required,
+                            message: required
+                        } : getValueAndMessage(required), value1 = _ref.value, message = _ref.message;
+                        if (value1) {
+                            error[name] = _object_spread$e({
+                                type: INPUT_VALIDATION_RULES.required,
+                                message: message,
+                                ref: inputRef
+                            }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
+                            if (!validateAllFieldCriteria) {
+                                setCustomValidity(message);
+                                return [
+                                    2,
+                                    error
+                                ];
+                            }
+                        }
+                    }
+                    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
+                        maxOutput = getValueAndMessage(max);
+                        minOutput = getValueAndMessage(min);
+                        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
+                            valueNumber = ref.valueAsNumber || (inputValue ? +inputValue : inputValue);
+                            if (!isNullOrUndefined(maxOutput.value)) {
+                                exceedMax = valueNumber > maxOutput.value;
+                            }
+                            if (!isNullOrUndefined(minOutput.value)) {
+                                exceedMin = valueNumber < minOutput.value;
+                            }
+                        } else {
+                            valueDate = ref.valueAsDate || new Date(inputValue);
+                            convertTimeToDate = function(time) {
+                                return new Date(new Date().toDateString() + " " + time);
+                            };
+                            isTime = ref.type == "time";
+                            isWeek = ref.type == "week";
+                            if (isString(maxOutput.value) && inputValue) {
+                                exceedMax = isTime ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) : isWeek ? inputValue > maxOutput.value : valueDate > new Date(maxOutput.value);
+                            }
+                            if (isString(minOutput.value) && inputValue) {
+                                exceedMin = isTime ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) : isWeek ? inputValue < minOutput.value : valueDate < new Date(minOutput.value);
+                            }
+                        }
+                        if (exceedMax || exceedMin) {
+                            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+                            if (!validateAllFieldCriteria) {
+                                setCustomValidity(error[name].message);
+                                return [
+                                    2,
+                                    error
+                                ];
+                            }
+                        }
+                    }
+                    if ((maxLength || minLength) && !isEmpty && (isString(inputValue) || isFieldArray && Array.isArray(inputValue))) {
+                        maxLengthOutput = getValueAndMessage(maxLength);
+                        minLengthOutput = getValueAndMessage(minLength);
+                        exceedMax1 = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
+                        exceedMin1 = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
+                        if (exceedMax1 || exceedMin1) {
+                            getMinMaxMessage(exceedMax1, maxLengthOutput.message, minLengthOutput.message);
+                            if (!validateAllFieldCriteria) {
+                                setCustomValidity(error[name].message);
+                                return [
+                                    2,
+                                    error
+                                ];
+                            }
+                        }
+                    }
+                    if (pattern && !isEmpty && isString(inputValue)) {
+                        _getValueAndMessage = getValueAndMessage(pattern), patternValue = _getValueAndMessage.value, message1 = _getValueAndMessage.message;
+                        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
+                            error[name] = _object_spread$e({
+                                type: INPUT_VALIDATION_RULES.pattern,
+                                message: message1,
+                                ref: ref
+                            }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message1));
+                            if (!validateAllFieldCriteria) {
+                                setCustomValidity(message1);
+                                return [
+                                    2,
+                                    error
+                                ];
+                            }
+                        }
+                    }
+                    if (!validate) return [
+                        3,
+                        7
+                    ];
+                    if (!isFunction$5(validate)) return [
+                        3,
+                        2
+                    ];
+                    return [
+                        4,
+                        validate(inputValue, formValues)
+                    ];
+                case 1:
+                    result = _state.sent();
+                    validateError = getValidateError(result, inputRef);
+                    if (validateError) {
+                        error[name] = _object_spread$e({}, validateError, appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
+                        if (!validateAllFieldCriteria) {
+                            setCustomValidity(validateError.message);
+                            return [
+                                2,
+                                error
+                            ];
+                        }
+                    }
+                    return [
+                        3,
+                        7
+                    ];
+                case 2:
+                    if (!isObject$a(validate)) return [
+                        3,
+                        7
+                    ];
+                    validationResult = {};
+                    _tmp = [];
+                    for(_tmp1 in validate)_tmp.push(_tmp1);
+                    _i = 0;
+                    _state.label = 3;
+                case 3:
+                    if (!(_i < _tmp.length)) return [
+                        3,
+                        6
+                    ];
+                    key = _tmp[_i];
+                    if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+                        return [
+                            3,
+                            6
+                        ];
+                    }
+                    return [
+                        4,
+                        validate[key](inputValue, formValues)
+                    ];
+                case 4:
+                    validateError1 = getValidateError.apply(void 0, [
+                        _state.sent(),
+                        inputRef,
+                        key
+                    ]);
+                    if (validateError1) {
+                        validationResult = _object_spread$e({}, validateError1, appendErrorsCurry(key, validateError1.message));
+                        setCustomValidity(validateError1.message);
+                        if (validateAllFieldCriteria) {
+                            error[name] = validationResult;
+                        }
+                    }
+                    _state.label = 5;
+                case 5:
+                    _i++;
+                    return [
+                        3,
+                        3
+                    ];
+                case 6:
+                    if (!isEmptyObject(validationResult)) {
+                        error[name] = _object_spread$e({
+                            ref: inputRef
+                        }, validationResult);
+                        if (!validateAllFieldCriteria) {
+                            return [
+                                2,
+                                error
+                            ];
+                        }
+                    }
+                    _state.label = 7;
+                case 7:
+                    setCustomValidity(true);
+                    return [
+                        2,
+                        error
+                    ];
+            }
+        });
+    });
+    return function validateField(field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) {
+        return _ref.apply(this, arguments);
+    };
+}();
 var defaultOptions = {
     mode: VALIDATION_MODE.onSubmit,
     reValidateMode: VALIDATION_MODE.onChange,
@@ -20756,7 +20767,7 @@ function createFormControl() {
         disabled: _options.disabled || false
     };
     var _fields = {};
-    var _defaultValues = isObject$a(_options.defaultValues) || isObject$a(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
+    var _defaultValues = isObject$a(_options.defaultValues) || isObject$a(_options.values) ? cloneObject(_options.values || _options.defaultValues) || {} : {};
     var _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
     var _state = {
         action: false,
@@ -20781,8 +20792,8 @@ function createFormControl() {
         isValid: false,
         errors: false
     };
+    var _proxySubscribeFormState = _object_spread$e({}, _proxyFormState);
     var _subjects = {
-        values: createSubject(),
         array: createSubject(),
         state: createSubject()
     };
@@ -20795,13 +20806,13 @@ function createFormControl() {
             timer = setTimeout(callback, wait);
         };
     };
-    var _updateValid = function() {
+    var _setValid = function() {
         var _ref = _async_to_generator$2(function(shouldUpdateValid) {
             var isValid, _tmp;
             return _ts_generator$2(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        if (!(!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid))) return [
+                        if (!(!_options.disabled && (_proxyFormState.isValid || _proxySubscribeFormState.isValid || shouldUpdateValid))) return [
                             3,
                             5
                         ];
@@ -20811,7 +20822,7 @@ function createFormControl() {
                         ];
                         return [
                             4,
-                            _executeSchema()
+                            _runSchema()
                         ];
                     case 1:
                         _tmp = isEmptyObject.apply(void 0, [
@@ -20844,12 +20855,12 @@ function createFormControl() {
                 }
             });
         });
-        return function _updateValid(shouldUpdateValid) {
+        return function _setValid(shouldUpdateValid) {
             return _ref.apply(this, arguments);
         };
     }();
     var _updateIsValidating = function(names, isValidating) {
-        if (!_options.disabled && (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
+        if (!_options.disabled && (_proxyFormState.isValidating || _proxyFormState.validatingFields || _proxySubscribeFormState.isValidating || _proxySubscribeFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach(function(name) {
                 if (name) {
                     isValidating ? set(_formState.validatingFields, name, isValidating) : unset(_formState.validatingFields, name);
@@ -20861,7 +20872,7 @@ function createFormControl() {
             });
         }
     };
-    var _updateFieldArray = function(name) {
+    var _setFieldArray = function(name) {
         var values = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [], method = arguments.length > 2 ? arguments[2] : void 0, args = arguments.length > 3 ? arguments[3] : void 0, shouldSetValues = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true, shouldUpdateFieldsAndState = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : true;
         if (args && method && !_options.disabled) {
             _state.action = true;
@@ -20874,11 +20885,11 @@ function createFormControl() {
                 shouldSetValues && set(_formState.errors, name, errors);
                 unsetEmptyArray(_formState.errors, name);
             }
-            if (_proxyFormState.touchedFields && shouldUpdateFieldsAndState && Array.isArray(get$2(_formState.touchedFields, name))) {
+            if ((_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields) && shouldUpdateFieldsAndState && Array.isArray(get$2(_formState.touchedFields, name))) {
                 var touchedFields = method(get$2(_formState.touchedFields, name), args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
-            if (_proxyFormState.dirtyFields) {
+            if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
                 _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
             }
             _subjects.state.next({
@@ -20910,7 +20921,7 @@ function createFormControl() {
         if (field) {
             var defaultValue = get$2(_formValues, name, isUndefined(value1) ? get$2(_defaultValues, name) : value1);
             isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
-            _state.mount && _updateValid();
+            _state.mount && _setValid();
         }
     };
     var updateTouchAndDirty = function(name, fieldValue, isBlurEvent, shouldDirty, shouldRender) {
@@ -20920,25 +20931,24 @@ function createFormControl() {
             name: name
         };
         if (!_options.disabled) {
-            var disabledField = !!(get$2(_fields, name) && get$2(_fields, name)._f && get$2(_fields, name)._f.disabled);
             if (!isBlurEvent || shouldDirty) {
-                if (_proxyFormState.isDirty) {
+                if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
                     isPreviousDirty = _formState.isDirty;
                     _formState.isDirty = output.isDirty = _getDirty();
                     shouldUpdateField = isPreviousDirty !== output.isDirty;
                 }
-                var isCurrentFieldPristine = disabledField || deepEqual(get$2(_defaultValues, name), fieldValue);
-                isPreviousDirty = !!(!disabledField && get$2(_formState.dirtyFields, name));
-                isCurrentFieldPristine || disabledField ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
+                var isCurrentFieldPristine = deepEqual(get$2(_defaultValues, name), fieldValue);
+                isPreviousDirty = !!get$2(_formState.dirtyFields, name);
+                isCurrentFieldPristine ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
                 output.dirtyFields = _formState.dirtyFields;
-                shouldUpdateField = shouldUpdateField || _proxyFormState.dirtyFields && isPreviousDirty !== !isCurrentFieldPristine;
+                shouldUpdateField = shouldUpdateField || (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) && isPreviousDirty !== !isCurrentFieldPristine;
             }
             if (isBlurEvent) {
                 var isPreviousFieldTouched = get$2(_formState.touchedFields, name);
                 if (!isPreviousFieldTouched) {
                     set(_formState.touchedFields, name, isBlurEvent);
                     output.touchedFields = _formState.touchedFields;
-                    shouldUpdateField = shouldUpdateField || _proxyFormState.touchedFields && isPreviousFieldTouched !== isBlurEvent;
+                    shouldUpdateField = shouldUpdateField || (_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields) && isPreviousFieldTouched !== isBlurEvent;
                 }
             }
             shouldUpdateField && shouldRender && _subjects.state.next(output);
@@ -20947,7 +20957,7 @@ function createFormControl() {
     };
     var shouldRenderByError = function(name, isValid, error, fieldState) {
         var previousFieldError = get$2(_formState.errors, name);
-        var shouldUpdateValid = _proxyFormState.isValid && isBoolean(isValid) && _formState.isValid !== isValid;
+        var shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isBoolean(isValid) && _formState.isValid !== isValid;
         if (_options.delayError && error) {
             delayErrorCallback = debounce(function() {
                 return updateErrors(name, error);
@@ -20969,7 +20979,7 @@ function createFormControl() {
             _subjects.state.next(updatedFormState);
         }
     };
-    var _executeSchema = function() {
+    var _runSchema = function() {
         var _ref = _async_to_generator$2(function(name) {
             var result;
             return _ts_generator$2(this, function(_state) {
@@ -20990,7 +21000,7 @@ function createFormControl() {
                 }
             });
         });
-        return function _executeSchema(name) {
+        return function _runSchema(name) {
             return _ref.apply(this, arguments);
         };
     }();
@@ -21002,7 +21012,7 @@ function createFormControl() {
                     case 0:
                         return [
                             4,
-                            _executeSchema(names)
+                            _runSchema(names)
                         ];
                     case 1:
                         errors = _state.sent().errors;
@@ -21202,9 +21212,9 @@ function createFormControl() {
                 } else {
                     fieldReference.ref.value = fieldValue;
                     if (!fieldReference.ref.type) {
-                        _subjects.values.next({
+                        _subjects.state.next({
                             name: name,
-                            values: _object_spread$e({}, _formValues)
+                            values: cloneObject(_formValues)
                         });
                     }
                 }
@@ -21230,9 +21240,9 @@ function createFormControl() {
         if (isFieldArray) {
             _subjects.array.next({
                 name: name,
-                values: _object_spread$e({}, _formValues)
+                values: cloneObject(_formValues)
             });
-            if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) && options.shouldDirty) {
+            if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields || _proxySubscribeFormState.isDirty || _proxySubscribeFormState.dirtyFields) && options.shouldDirty) {
                 _subjects.state.next({
                     name: name,
                     dirtyFields: getDirtyFields(_defaultValues, _formValues),
@@ -21243,14 +21253,14 @@ function createFormControl() {
             field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
         }
         isWatched(name, _names) && _subjects.state.next(_object_spread$e({}, _formState));
-        _subjects.values.next({
+        _subjects.state.next({
             name: _state.mount ? name : undefined,
-            values: _object_spread$e({}, _formValues)
+            values: cloneObject(_formValues)
         });
     };
     var onChange = function() {
         var _ref = _async_to_generator$2(function(event) {
-            var target, name, isFieldValueUpdated, field, getCurrentFieldValue, _updateIsFieldValueUpdated, error, isValid, fieldValue, isBlurEvent, shouldSkipValidation, watched, fieldState, shouldRender, errors, previousErrorLookupResult, errorLookupResult;
+            var target, name, isFieldValueUpdated, field, _updateIsFieldValueUpdated, error, isValid, fieldValue, isBlurEvent, shouldSkipValidation, watched, fieldState, shouldRender, errors, previousErrorLookupResult, errorLookupResult;
             return _ts_generator$2(this, function(_state1) {
                 switch(_state1.label){
                     case 0:
@@ -21259,9 +21269,6 @@ function createFormControl() {
                         name = target.name;
                         isFieldValueUpdated = true;
                         field = get$2(_fields, name);
-                        getCurrentFieldValue = function() {
-                            return target.type ? getFieldValue(field._f) : getEventValue(event);
-                        };
                         _updateIsFieldValueUpdated = function(fieldValue) {
                             isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual(fieldValue, get$2(_formValues, name, fieldValue));
                         };
@@ -21269,7 +21276,7 @@ function createFormControl() {
                             3,
                             7
                         ];
-                        fieldValue = getCurrentFieldValue();
+                        fieldValue = target.type ? getFieldValue(field._f) : getEventValue(event);
                         isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
                         shouldSkipValidation = !hasValidation(field._f) && !_options.resolver && !get$2(_formState.errors, name) && !field._f.deps || skipValidation(isBlurEvent, get$2(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
                         watched = isWatched(name, _names, isBlurEvent);
@@ -21280,19 +21287,21 @@ function createFormControl() {
                         } else if (field._f.onChange) {
                             field._f.onChange(event);
                         }
-                        fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
+                        fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
                         shouldRender = !isEmptyObject(fieldState) || watched;
-                        !isBlurEvent && _subjects.values.next({
+                        !isBlurEvent && _subjects.state.next({
                             name: name,
                             type: event.type,
-                            values: _object_spread$e({}, _formValues)
+                            values: cloneObject(_formValues)
                         });
                         if (shouldSkipValidation) {
-                            if (_proxyFormState.isValid) {
-                                if (_options.mode === "onBlur" && isBlurEvent) {
-                                    _updateValid();
+                            if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
+                                if (_options.mode === "onBlur") {
+                                    if (isBlurEvent) {
+                                        _setValid();
+                                    }
                                 } else if (!isBlurEvent) {
-                                    _updateValid();
+                                    _setValid();
                                 }
                             }
                             return [
@@ -21309,7 +21318,7 @@ function createFormControl() {
                         ];
                         return [
                             4,
-                            _executeSchema([
+                            _runSchema([
                                 name
                             ])
                         ];
@@ -21355,7 +21364,7 @@ function createFormControl() {
                             6
                         ];
                     case 4:
-                        if (!_proxyFormState.isValid) return [
+                        if (!(_proxyFormState.isValid || _proxySubscribeFormState.isValid)) return [
                             3,
                             6
                         ];
@@ -21450,7 +21459,7 @@ function createFormControl() {
                         ];
                     case 3:
                         validationResult = _state.sent().every(Boolean);
-                        !(!validationResult && !_formState.isValid) && _updateValid();
+                        !(!validationResult && !_formState.isValid) && _setValid();
                         return [
                             3,
                             6
@@ -21464,7 +21473,7 @@ function createFormControl() {
                         validationResult = isValid = _state.sent();
                         _state.label = 6;
                     case 6:
-                        _subjects.state.next(_object_spread_props$a(_object_spread$e({}, !isString(name) || _proxyFormState.isValid && isValid !== _formState.isValid ? {} : {
+                        _subjects.state.next(_object_spread_props$a(_object_spread$e({}, !isString(name) || (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isValid !== _formState.isValid ? {} : {
                             name: name
                         }, _options.resolver || !name ? {
                             isValid: isValid
@@ -21528,12 +21537,30 @@ function createFormControl() {
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
     var watch = function(name, defaultValue) {
-        return isFunction$5(name) ? _subjects.values.subscribe({
+        return isFunction$5(name) ? _subjects.state.subscribe({
             next: function(payload) {
                 return name(_getWatch(undefined, defaultValue), payload);
             }
         }) : _getWatch(name, defaultValue, true);
     };
+    var _subscribe = function(props) {
+        return _subjects.state.subscribe({
+            next: function(formState) {
+                if (shouldSubscribeByName(props.name, formState.name, props.exact) && shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
+                    props.callback(_object_spread$e({
+                        values: _object_spread$e({}, _formValues)
+                    }, _formState, formState));
+                }
+            }
+        }).unsubscribe;
+    };
+    var subscribe = function(props) {
+        _state.mount = true;
+        _proxySubscribeFormState = _object_spread$e({}, _proxySubscribeFormState, props.formState);
+        return _subscribe(_object_spread_props$a(_object_spread$e({}, props), {
+            formState: _proxySubscribeFormState
+        }));
+    };
     var unregister = function(name) {
         var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
@@ -21566,19 +21593,18 @@ function createFormControl() {
                 }
             }
         }
-        _subjects.values.next({
-            values: _object_spread$e({}, _formValues)
+        _subjects.state.next({
+            values: cloneObject(_formValues)
         });
         _subjects.state.next(_object_spread$e({}, _formState, !options.keepDirty ? {} : {
             isDirty: _getDirty()
         }));
-        !options.keepIsValid && _updateValid();
+        !options.keepIsValid && _setValid();
     };
-    var _updateDisabledField = function(param) {
-        var disabled = param.disabled, name = param.name, field = param.field, fields = param.fields;
+    var _setDisabledField = function(param) {
+        var disabled = param.disabled, name = param.name;
         if (isBoolean(disabled) && _state.mount || !!disabled || _names.disabled.has(name)) {
             disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
-            updateTouchAndDirty(name, getFieldValue(field ? field._f : get$2(fields, name)._f), false, false, true);
         }
     };
     var register = function(name) {
@@ -21597,8 +21623,7 @@ function createFormControl() {
         }));
         _names.mount.add(name);
         if (field) {
-            _updateDisabledField({
-                field: field,
+            _setDisabledField({
                 disabled: isBoolean(options.disabled) ? options.disabled : _options.disabled,
                 name: name
             });
@@ -21680,7 +21705,7 @@ function createFormControl() {
     var handleSubmit = function(onValid, onInvalid) {
         return function() {
             var _ref = _async_to_generator$2(function(e) {
-                var onValidError, fieldValues, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, name, _ref, errors, values, error;
+                var onValidError, fieldValues, _ref, errors, values, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, name, error;
                 return _ts_generator$2(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -21690,28 +21715,6 @@ function createFormControl() {
                                 e.persist && e.persist();
                             }
                             fieldValues = cloneObject(_formValues);
-                            if (_names.disabled.size) {
-                                _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-                                try {
-                                    for(_iterator = _names.disabled[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                                        name = _step.value;
-                                        set(fieldValues, name, undefined);
-                                    }
-                                } catch (err) {
-                                    _didIteratorError = true;
-                                    _iteratorError = err;
-                                } finally{
-                                    try {
-                                        if (!_iteratorNormalCompletion && _iterator.return != null) {
-                                            _iterator.return();
-                                        }
-                                    } finally{
-                                        if (_didIteratorError) {
-                                            throw _iteratorError;
-                                        }
-                                    }
-                                }
-                            }
                             _subjects.state.next({
                                 isSubmitting: true
                             });
@@ -21721,7 +21724,7 @@ function createFormControl() {
                             ];
                             return [
                                 4,
-                                _executeSchema()
+                                _runSchema()
                             ];
                         case 1:
                             _ref = _state.sent(), errors = _ref.errors, values = _ref.values;
@@ -21740,6 +21743,28 @@ function createFormControl() {
                             _state.sent();
                             _state.label = 4;
                         case 4:
+                            if (_names.disabled.size) {
+                                _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                                try {
+                                    for(_iterator = _names.disabled[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                                        name = _step.value;
+                                        set(fieldValues, name, undefined);
+                                    }
+                                } catch (err) {
+                                    _didIteratorError = true;
+                                    _iteratorError = err;
+                                } finally{
+                                    try {
+                                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                            _iterator.return();
+                                        }
+                                    } finally{
+                                        if (_didIteratorError) {
+                                            throw _iteratorError;
+                                        }
+                                    }
+                                }
+                            }
                             unset(_formState.errors, "root");
                             if (!isEmptyObject(_formState.errors)) return [
                                 3,
@@ -21834,7 +21859,7 @@ function createFormControl() {
             }
             if (!options.keepError) {
                 unset(_formState.errors, name);
-                _proxyFormState.isValid && _updateValid();
+                _proxyFormState.isValid && _setValid();
             }
             _subjects.state.next(_object_spread$e({}, _formState));
         }
@@ -21904,13 +21929,32 @@ function createFormControl() {
                         }
                     }
                 }
-                _fields = {};
+                var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = undefined;
+                try {
+                    for(var _iterator2 = _names.mount[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true){
+                        var fieldName1 = _step2.value;
+                        setValue(fieldName1, get$2(values, fieldName1));
+                    }
+                } catch (err) {
+                    _didIteratorError2 = true;
+                    _iteratorError2 = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+                            _iterator2.return();
+                        }
+                    } finally{
+                        if (_didIteratorError2) {
+                            throw _iteratorError2;
+                        }
+                    }
+                }
             }
-            _formValues = _options.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
+            _formValues = cloneObject(values);
             _subjects.array.next({
                 values: _object_spread$e({}, values)
             });
-            _subjects.values.next({
+            _subjects.state.next({
                 values: _object_spread$e({}, values)
             });
         }
@@ -21951,7 +21995,7 @@ function createFormControl() {
             }
         }
     };
-    var _updateFormState = function(updatedFormState) {
+    var _setFormState = function(updatedFormState) {
         _formState = _object_spread$e({}, _formState, updatedFormState);
     };
     var _resetDefaultValues = function() {
@@ -21962,28 +22006,28 @@ function createFormControl() {
             });
         });
     };
-    return {
+    var methods = {
         control: {
             register: register,
             unregister: unregister,
             getFieldState: getFieldState,
             handleSubmit: handleSubmit,
             setError: setError,
-            _executeSchema: _executeSchema,
+            _subscribe: _subscribe,
+            _runSchema: _runSchema,
             _getWatch: _getWatch,
             _getDirty: _getDirty,
-            _updateValid: _updateValid,
-            _removeUnmounted: _removeUnmounted,
-            _updateFieldArray: _updateFieldArray,
-            _updateDisabledField: _updateDisabledField,
+            _setValid: _setValid,
+            _setFieldArray: _setFieldArray,
+            _setDisabledField: _setDisabledField,
+            _setErrors: _setErrors,
             _getFieldArray: _getFieldArray,
             _reset: _reset,
             _resetDefaultValues: _resetDefaultValues,
-            _updateFormState: _updateFormState,
+            _removeUnmounted: _removeUnmounted,
             _disableForm: _disableForm,
             _subjects: _subjects,
             _proxyFormState: _proxyFormState,
-            _setErrors: _setErrors,
             get _fields () {
                 return _fields;
             },
@@ -22008,9 +22052,6 @@ function createFormControl() {
             get _formState () {
                 return _formState;
             },
-            set _formState (value){
-                _formState = value;
-            },
             get _options () {
                 return _options;
             },
@@ -22018,6 +22059,7 @@ function createFormControl() {
                 _options = _object_spread$e({}, _options, value);
             }
         },
+        subscribe: subscribe,
         trigger: trigger,
         register: register,
         handleSubmit: handleSubmit,
@@ -22032,6 +22074,9 @@ function createFormControl() {
         setFocus: setFocus,
         getFieldState: getFieldState
     };
+    return _object_spread_props$a(_object_spread$e({}, methods), {
+        formControl: methods
+    });
 }
 /**
  * Custom hook to manage the entire form.
@@ -22082,20 +22127,26 @@ function createFormControl() {
         defaultValues: isFunction$5(props.defaultValues) ? undefined : props.defaultValues
     }), 2), formState = _React_useState[0], updateFormState = _React_useState[1];
     if (!_formControl.current) {
-        _formControl.current = _object_spread_props$a(_object_spread$e({}, createFormControl(props)), {
+        _formControl.current = _object_spread_props$a(_object_spread$e({}, props.formControl ? props.formControl : createFormControl(props)), {
             formState: formState
         });
+        if (props.formControl && props.defaultValues && !isFunction$5(props.defaultValues)) {
+            props.formControl.reset(props.defaultValues, props.resetOptions);
+        }
     }
     var control = _formControl.current.control;
     control._options = props;
-    useSubscribe({
-        subject: control._subjects.state,
-        next: function(value1) {
-            if (shouldRenderFormState(value1, control._proxyFormState, control._updateFormState, true)) {
-                updateFormState(_object_spread$e({}, control._formState));
-            }
-        }
-    });
+    React__default.useLayoutEffect(function() {
+        return control._subscribe({
+            formState: control._proxyFormState,
+            callback: function() {
+                return updateFormState(_object_spread$e({}, control._formState));
+            },
+            reRenderRoot: true
+        });
+    }, [
+        control
+    ]);
     React__default.useEffect(function() {
         return control._disableForm(props.disabled);
     }, [
@@ -22130,7 +22181,7 @@ function createFormControl() {
         control
     ]);
     React__default.useEffect(function() {
-        if (props.errors) {
+        if (props.errors && !isEmptyObject(props.errors)) {
             control._setErrors(props.errors);
         }
     }, [
@@ -22139,7 +22190,7 @@ function createFormControl() {
     ]);
     React__default.useEffect(function() {
         if (!control._state.mount) {
-            control._updateValid();
+            control._setValid();
             control._state.mount = true;
         }
         if (control._state.watch) {
@@ -22149,7 +22200,7 @@ function createFormControl() {
         control._removeUnmounted();
     });
     React__default.useEffect(function() {
-        props.shouldUnregister && control._subjects.values.next({
+        props.shouldUnregister && control._subjects.state.next({
             values: control._getWatch()
         });
     }, [
@@ -30550,13 +30601,13 @@ function _instanceof$4(left, right) {
         return left instanceof right;
     }
 }
-var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.16", g = "/*!sc*/\n", S = "undefined" != typeof window && "HTMLElement" in window, w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : "production" !== process.env.NODE_ENV), E = /invalid hook call/i, N = new Set, P = function P(t, n) {
+var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.17", g = "/*!sc*/\n", S = "undefined" != typeof window && "HTMLElement" in window, w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : "production" !== process.env.NODE_ENV), E = /invalid hook call/i, N = new Set, P = function P(t, n) {
     if ("production" !== process.env.NODE_ENV) {
-        var _$r = n ? ' with the id of "'.concat(n, '"') : "", s = "The component ".concat(t).concat(_$r, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i = console.error;
+        var _$o = n ? ' with the id of "'.concat(n, '"') : "", s = "The component ".concat(t).concat(_$o, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i = console.error;
         try {
             var a = !0;
             console.error = function(t) {
-                for(var _$n = [], _$r = 1; _$r < arguments.length; _$r++)_$n[_$r - 1] = arguments[_$r];
+                for(var _$n = [], _$o = 1; _$o < arguments.length; _$o++)_$n[_$o - 1] = arguments[_$o];
                 E.test(t) ? (a = !1, N.delete(s)) : i.apply(void 0, __spreadArray([
                     t
                 ], _$n, !1));
@@ -30771,16 +30822,16 @@ function X(e) {
     var t;
 }
 var Z = Object.defineProperty, K = Object.getOwnPropertyNames, Q = Object.getOwnPropertySymbols, ee = Object.getOwnPropertyDescriptor, te = Object.getPrototypeOf, ne = Object.prototype;
-function re(e, t, n) {
+function oe(e, t, n) {
     if ("string" != typeof t) {
         if (ne) {
-            var _$r = te(t);
-            _$r && _$r !== ne && re(e, _$r, n);
+            var _$o = te(t);
+            _$o && _$o !== ne && oe(e, _$o, n);
         }
-        var o = K(t);
-        Q && (o = o.concat(Q(t)));
-        for(var s = X(e), i = X(t), a = 0; a < o.length; ++a){
-            var c = o[a];
+        var r = K(t);
+        Q && (r = r.concat(Q(t)));
+        for(var s = X(e), i = X(t), a = 0; a < r.length; ++a){
+            var c = r[a];
             if (!(c in H || n && n[c] || i && c in i || s && c in s)) {
                 var l = ee(t, c);
                 try {
@@ -30791,7 +30842,7 @@ function re(e, t, n) {
     }
     return e;
 }
-function oe(e) {
+function re(e) {
     return "function" == typeof e;
 }
 function se(e) {
@@ -30802,7 +30853,7 @@ function ie(e, t) {
 }
 function ae(e, t) {
     if (0 === e.length) return "";
-    for(var n = e[0], _$r = 1; _$r < e.length; _$r++)n += t ? t + e[_$r] : e[_$r];
+    for(var n = e[0], _$o = 1; _$o < e.length; _$o++)n += t ? t + e[_$o] : e[_$o];
     return n;
 }
 function ce(e) {
@@ -30810,8 +30861,8 @@ function ce(e) {
 }
 function le(e, t, n) {
     if (void 0 === n && (n = !1), !n && !ce(e) && !Array.isArray(e)) return t;
-    if (Array.isArray(t)) for(var _$r = 0; _$r < t.length; _$r++)e[_$r] = le(e[_$r], t[_$r]);
-    else if (ce(t)) for(var _$r in t)e[_$r] = le(e[_$r], t[_$r]);
+    if (Array.isArray(t)) for(var _$o = 0; _$o < t.length; _$o++)e[_$o] = le(e[_$o], t[_$o]);
+    else if (ce(t)) for(var _$o in t)e[_$o] = le(e[_$o], t[_$o]);
     return e;
 }
 function ue(e, t) {
@@ -30841,13 +30892,13 @@ var pe = "production" !== process.env.NODE_ENV ? {
 } : {};
 function de() {
     for(var e = [], t = 0; t < arguments.length; t++)e[t] = arguments[t];
-    for(var n = e[0], _$r = [], o = 1, s = e.length; o < s; o += 1)_$r.push(e[o]);
-    return _$r.forEach(function(e) {
+    for(var n = e[0], _$o = [], r = 1, s = e.length; r < s; r += 1)_$o.push(e[r]);
+    return _$o.forEach(function(e) {
         n = n.replace(/%[a-z]/, e);
     }), n;
 }
 function he(t) {
-    for(var n = [], _$r = 1; _$r < arguments.length; _$r++)n[_$r - 1] = arguments[_$r];
+    for(var n = [], _$o = 1; _$o < arguments.length; _$o++)n[_$o - 1] = arguments[_$o];
     return "production" === process.env.NODE_ENV ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([
         pe[t]
     ], n, !1)).trim());
@@ -30861,21 +30912,21 @@ var fe = function() {
         return t;
     }, e.prototype.insertRules = function(e, t) {
         if (e >= this.groupSizes.length) {
-            for(var n = this.groupSizes, _$r = n.length, o = _$r; e >= o;)if ((o <<= 1) < 0) throw he(16, "".concat(e));
-            this.groupSizes = new Uint32Array(o), this.groupSizes.set(n), this.length = o;
-            for(var s = _$r; s < o; s++)this.groupSizes[s] = 0;
+            for(var n = this.groupSizes, _$o = n.length, r = _$o; e >= r;)if ((r <<= 1) < 0) throw he(16, "".concat(e));
+            this.groupSizes = new Uint32Array(r), this.groupSizes.set(n), this.length = r;
+            for(var s = _$o; s < r; s++)this.groupSizes[s] = 0;
         }
         for(var i = this.indexOfGroup(e + 1), a = (s = 0, t.length); s < a; s++)this.tag.insertRule(i, t[s]) && (this.groupSizes[e]++, i++);
     }, e.prototype.clearGroup = function(e) {
         if (e < this.length) {
-            var t = this.groupSizes[e], n = this.indexOfGroup(e), _$r = n + t;
+            var t = this.groupSizes[e], n = this.indexOfGroup(e), _$o = n + t;
             this.groupSizes[e] = 0;
-            for(var o = n; o < _$r; o++)this.tag.deleteRule(n);
+            for(var r = n; r < _$o; r++)this.tag.deleteRule(n);
         }
     }, e.prototype.getGroup = function(e) {
         var t = "";
         if (e >= this.length || 0 === this.groupSizes[e]) return t;
-        for(var n = this.groupSizes[e], _$r = this.indexOfGroup(e), o = _$r + n, s = _$r; s < o; s++)t += "".concat(this.tag.getRule(s)).concat(g);
+        for(var n = this.groupSizes[e], _$o = this.indexOfGroup(e), r = _$o + n, s = _$o; s < r; s++)t += "".concat(this.tag.getRule(s)).concat(g);
         return t;
     }, e;
 }(), me = 1 << 30, ye = new Map, ve = new Map, ge = 1, Se = function Se(e) {
@@ -30887,42 +30938,42 @@ var fe = function() {
 }, we = function we(e, t) {
     ge = t + 1, ye.set(e, t), ve.set(t, e);
 }, be = "style[".concat(f, "][").concat(y, '="').concat(v, '"]'), Ee = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')), Ne = function Ne(e, t, n) {
-    for(var _$r, o = n.split(","), s = 0, i = o.length; s < i; s++)(_$r = o[s]) && e.registerName(t, _$r);
+    for(var _$o, r = n.split(","), s = 0, i = r.length; s < i; s++)(_$o = r[s]) && e.registerName(t, _$o);
 }, Pe = function Pe(e, t) {
-    for(var n, _$r = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), o = [], s = 0, i = _$r.length; s < i; s++){
-        var a = _$r[s].trim();
+    for(var n, _$o = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), r = [], s = 0, i = _$o.length; s < i; s++){
+        var a = _$o[s].trim();
         if (a) {
             var c = a.match(Ee);
             if (c) {
                 var l = 0 | parseInt(c[1], 10), u = c[2];
-                0 !== l && (we(u, l), Ne(e, u, c[3]), e.getTag().insertRules(l, o)), o.length = 0;
-            } else o.push(a);
+                0 !== l && (we(u, l), Ne(e, u, c[3]), e.getTag().insertRules(l, r)), r.length = 0;
+            } else r.push(a);
         }
     }
 }, _e = function _e(e) {
-    for(var t = document.querySelectorAll(be), n = 0, _$r = t.length; n < _$r; n++){
-        var o = t[n];
-        o && o.getAttribute(f) !== m && (Pe(e, o), o.parentNode && o.parentNode.removeChild(o));
+    for(var t = document.querySelectorAll(be), n = 0, _$o = t.length; n < _$o; n++){
+        var r = t[n];
+        r && r.getAttribute(f) !== m && (Pe(e, r), r.parentNode && r.parentNode.removeChild(r));
     }
 };
 function Ce() {
     return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
 }
 var Ie = function Ie(e) {
-    var t = document.head, n = e || t, _$r = document.createElement("style"), o = function(e) {
+    var t = document.head, n = e || t, _$o = document.createElement("style"), r = function(e) {
         var t = Array.from(e.querySelectorAll("style[".concat(f, "]")));
         return t[t.length - 1];
-    }(n), s = void 0 !== o ? o.nextSibling : null;
-    _$r.setAttribute(f, m), _$r.setAttribute(y, v);
+    }(n), s = void 0 !== r ? r.nextSibling : null;
+    _$o.setAttribute(f, m), _$o.setAttribute(y, v);
     var i = Ce();
-    return i && _$r.setAttribute("nonce", i), n.insertBefore(_$r, s), _$r;
+    return i && _$o.setAttribute("nonce", i), n.insertBefore(_$o, s), _$o;
 }, Ae = function() {
     function e(e) {
         this.element = Ie(e), this.element.appendChild(document.createTextNode("")), this.sheet = function(e) {
             if (e.sheet) return e.sheet;
-            for(var t = document.styleSheets, n = 0, _$r = t.length; n < _$r; n++){
-                var o = t[n];
-                if (o.ownerNode === e) return o;
+            for(var t = document.styleSheets, n = 0, _$o = t.length; n < _$o; n++){
+                var r = t[n];
+                if (r.ownerNode === e) return r;
             }
             throw he(17);
         }(this.element), this.length = 0;
@@ -30969,33 +31020,33 @@ var Ie = function Ie(e) {
     isServer: !S,
     useCSSOMInjection: !w
 }, ke = function() {
-    function e(e, n, r) {
+    function e(e, n, o) {
         void 0 === e && (e = C), void 0 === n && (n = {});
-        var o = this;
-        this.options = __assign(__assign({}, Te), e), this.gs = n, this.names = new Map(r), this.server = !!e.isServer, !this.server && S && Re && (Re = !1, _e(this)), ue(this, function() {
+        var r = this;
+        this.options = __assign(__assign({}, Te), e), this.gs = n, this.names = new Map(o), this.server = !!e.isServer, !this.server && S && Re && (Re = !1, _e(this)), ue(this, function() {
             return function(e) {
-                for(var _$t = e.getTag(), _$n = _$t.length, _$r = "", o = function o(n) {
-                    var o = function(e) {
+                for(var _$t = e.getTag(), _$n = _$t.length, _$o = "", r = function r(n) {
+                    var r = function(e) {
                         return ve.get(e);
                     }(n);
-                    if (void 0 === o) return "continue";
-                    var s = e.names.get(o), i = _$t.getGroup(n);
+                    if (void 0 === r) return "continue";
+                    var s = e.names.get(r), i = _$t.getGroup(n);
                     if (void 0 === s || !s.size || 0 === i.length) return "continue";
-                    var a = "".concat(f, ".g").concat(n, '[id="').concat(o, '"]'), c = "";
+                    var a = "".concat(f, ".g").concat(n, '[id="').concat(r, '"]'), c = "";
                     void 0 !== s && s.forEach(function(e) {
                         e.length > 0 && (c += "".concat(e, ","));
-                    }), _$r += "".concat(i).concat(a, '{content:"').concat(c, '"}').concat(g);
-                }, s = 0; s < _$n; s++)o(s);
-                return _$r;
-            }(o);
+                    }), _$o += "".concat(i).concat(a, '{content:"').concat(c, '"}').concat(g);
+                }, s = 0; s < _$n; s++)r(s);
+                return _$o;
+            }(r);
         });
     }
     return e.registerId = function(e) {
         return Se(e);
     }, e.prototype.rehydrate = function() {
         !this.server && S && _e(this);
-    }, e.prototype.reconstructWithOptions = function(n, r) {
-        return void 0 === r && (r = !0), new e(__assign(__assign({}, this.options), n), this.gs, r && this.names || void 0);
+    }, e.prototype.reconstructWithOptions = function(n, o) {
+        return void 0 === o && (o = !0), new e(__assign(__assign({}, this.options), n), this.gs, o && this.names || void 0);
     }, e.prototype.allocateGSInstance = function(e) {
         return this.gs[e] = (this.gs[e] || 0) + 1;
     }, e.prototype.getTag = function() {
@@ -31030,15 +31081,15 @@ function Ve(e, t) {
     });
 }
 function Fe(e) {
-    var t, n, _$r, o = void 0 === e ? C : e, s = o.options, i = void 0 === s ? C : s, a = o.plugins, c = void 0 === a ? _$1 : a, l = function l(e, r, o) {
-        return o.startsWith(n) && o.endsWith(n) && o.replaceAll(n, "").length > 0 ? ".".concat(t) : e;
+    var t, n, _$o, r = void 0 === e ? C : e, s = r.options, i = void 0 === s ? C : s, a = r.plugins, c = void 0 === a ? _$1 : a, l = function l(e, o, r) {
+        return r.startsWith(n) && r.endsWith(n) && r.replaceAll(n, "").length > 0 ? ".".concat(t) : e;
     }, u = c.slice();
     u.push(function(e) {
-        e.type === RULESET && e.value.includes("&") && (e.props[0] = e.props[0].replace(je, n).replace(_$r, l));
+        e.type === RULESET && e.value.includes("&") && (e.props[0] = e.props[0].replace(je, n).replace(_$o, l));
     }), i.prefix && u.push(prefixer), u.push(stringify);
-    var p = function p(e, o, s, a) {
-        void 0 === o && (o = ""), void 0 === s && (s = ""), void 0 === a && (a = "&"), t = a, n = o, _$r = new RegExp("\\".concat(n, "\\b"), "g");
-        var c = e.replace(xe, ""), l = compile(s || o ? "".concat(s, " ").concat(o, " { ").concat(c, " }") : c);
+    var p = function p(e, r, s, a) {
+        void 0 === r && (r = ""), void 0 === s && (s = ""), void 0 === a && (a = "&"), t = a, n = r, _$o = new RegExp("\\".concat(n, "\\b"), "g");
+        var c = e.replace(xe, ""), l = compile(s || r ? "".concat(s, " ").concat(r, " { ").concat(c, " }") : c);
         i.namespace && (l = Ve(l, i.namespace));
         var p = [];
         return serialize(l, middleware(u.concat(rulesheet(function(e) {
@@ -31062,8 +31113,8 @@ var qe = function() {
         var n = this;
         this.inject = function(e, t) {
             void 0 === t && (t = ze);
-            var _$r = n.name + t.hash;
-            e.hasNameForId(n.id, _$r) || e.insertRules(n.id, _$r, t(n.rules, _$r, "@keyframes"));
+            var _$o = n.name + t.hash;
+            e.hasNameForId(n.id, _$o) || e.insertRules(n.id, _$o, t(n.rules, _$o, "@keyframes"));
         }, this.name = e, this.id = "sc-keyframes-".concat(e), this.rules = t, ue(this, function() {
             throw he(12, String(n.name));
         });
@@ -31076,45 +31127,45 @@ var qe = function() {
 };
 function He(e) {
     for(var t = "", n = 0; n < e.length; n++){
-        var _$r = e[n];
-        if (1 === n && "-" === _$r && "-" === e[0]) return e;
-        We(_$r) ? t += "-" + _$r.toLowerCase() : t += _$r;
+        var _$o = e[n];
+        if (1 === n && "-" === _$o && "-" === e[0]) return e;
+        We(_$o) ? t += "-" + _$o.toLowerCase() : t += _$o;
     }
     return t.startsWith("ms-") ? "-" + t : t;
 }
 var Ue = function Ue(e) {
     return null == e || !1 === e || "" === e;
 }, Je = function Je1(t) {
-    var n, _$r, o = [];
+    var n, _$o, r = [];
     for(var s in t){
         var i = t[s];
-        t.hasOwnProperty(s) && !Ue(i) && (Array.isArray(i) && i.isCss || oe(i) ? o.push("".concat(He(s), ":"), i, ";") : ce(i) ? o.push.apply(o, __spreadArray(__spreadArray([
+        t.hasOwnProperty(s) && !Ue(i) && (Array.isArray(i) && i.isCss || re(i) ? r.push("".concat(He(s), ":"), i, ";") : ce(i) ? r.push.apply(r, __spreadArray(__spreadArray([
             "".concat(s, " {")
         ], Je(i), !1), [
             "}"
-        ], !1)) : o.push("".concat(He(s), ": ").concat((n = s, null == (_$r = i) || "boolean" == typeof _$r || "" === _$r ? "" : "number" != typeof _$r || 0 === _$r || n in unitlessKeys || n.startsWith("--") ? String(_$r).trim() : "".concat(_$r, "px")), ";")));
+        ], !1)) : r.push("".concat(He(s), ": ").concat((n = s, null == (_$o = i) || "boolean" == typeof _$o || "" === _$o ? "" : "number" != typeof _$o || 0 === _$o || n in unitlessKeys || n.startsWith("--") ? String(_$o).trim() : "".concat(_$o, "px")), ";")));
     }
-    return o;
+    return r;
 };
-function Xe(e, t, n, r) {
+function Xe(e, t, n, o) {
     if (Ue(e)) return [];
     if (se(e)) return [
         ".".concat(e.styledComponentId)
     ];
-    if (oe(e)) {
-        if (!oe(s = e) || s.prototype && s.prototype.isReactComponent || !t) return [
+    if (re(e)) {
+        if (!re(s = e) || s.prototype && s.prototype.isReactComponent || !t) return [
             e
         ];
-        var o = e(t);
-        return "production" === process.env.NODE_ENV || "object" != typeof o || Array.isArray(o) || _instanceof$4(o, qe) || ce(o) || null === o || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Xe(o, t, n, r);
+        var r = e(t);
+        return "production" === process.env.NODE_ENV || "object" != typeof r || Array.isArray(r) || _instanceof$4(r, qe) || ce(r) || null === r || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Xe(r, t, n, o);
     }
     var s;
-    return _instanceof$4(e, qe) ? n ? (e.inject(n, r), [
-        e.getName(r)
+    return _instanceof$4(e, qe) ? n ? (e.inject(n, o), [
+        e.getName(o)
     ]) : [
         e
     ] : ce(e) ? Je(e) : Array.isArray(e) ? Array.prototype.concat.apply(_$1, e.map(function(e) {
-        return Xe(e, t, n, r);
+        return Xe(e, t, n, o);
     })) : [
         e.toString()
     ];
@@ -31122,7 +31173,7 @@ function Xe(e, t, n, r) {
 function Ze(e) {
     for(var t = 0; t < e.length; t += 1){
         var n = e[t];
-        if (oe(n) && !se(n)) return !1;
+        if (re(n) && !se(n)) return !1;
     }
     return !0;
 }
@@ -31131,15 +31182,15 @@ var Ke = z(v), Qe = function() {
         this.rules = e, this.staticRulesId = "", this.isStatic = "production" === process.env.NODE_ENV && (void 0 === n || n.isStatic) && Ze(e), this.componentId = t, this.baseHash = M(Ke, t), this.baseStyle = n, ke.registerId(t);
     }
     return e.prototype.generateAndInjectStyles = function(e, t, n) {
-        var _$r = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e, t, n) : "";
-        if (this.isStatic && !n.hash) if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) _$r = ie(_$r, this.staticRulesId);
+        var _$o = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e, t, n) : "";
+        if (this.isStatic && !n.hash) if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) _$o = ie(_$o, this.staticRulesId);
         else {
-            var o = ae(Xe(this.rules, e, t, n)), s = x(M(this.baseHash, o) >>> 0);
+            var r = ae(Xe(this.rules, e, t, n)), s = x(M(this.baseHash, r) >>> 0);
             if (!t.hasNameForId(this.componentId, s)) {
-                var i = n(o, ".".concat(s), void 0, this.componentId);
+                var i = n(r, ".".concat(s), void 0, this.componentId);
                 t.insertRules(this.componentId, s, i);
             }
-            _$r = ie(_$r, s), this.staticRulesId = s;
+            _$o = ie(_$o, s), this.staticRulesId = s;
         }
         else {
             for(var a = M(this.baseHash, n.hash), c = "", l = 0; l < this.rules.length; l++){
@@ -31152,55 +31203,55 @@ var Ke = z(v), Qe = function() {
             }
             if (c) {
                 var d = x(a >>> 0);
-                t.hasNameForId(this.componentId, d) || t.insertRules(this.componentId, d, n(c, ".".concat(d), void 0, this.componentId)), _$r = ie(_$r, d);
+                t.hasNameForId(this.componentId, d) || t.insertRules(this.componentId, d, n(c, ".".concat(d), void 0, this.componentId)), _$o = ie(_$o, d);
             }
         }
-        return _$r;
+        return _$o;
     }, e;
 }(), et = React__default.createContext(void 0); et.Consumer;
-var ot = {}, st = new Set;
-function it(e, o, s) {
-    var i = se(e), a = e, c = !L(e), p = o.attrs, d = void 0 === p ? _$1 : p, h = o.componentId, f = void 0 === h ? function(e, t) {
+var rt = {}, st = new Set;
+function it(e, r, s) {
+    var i = se(e), a = e, c = !L(e), p = r.attrs, d = void 0 === p ? _$1 : p, h = r.componentId, f = void 0 === h ? function(e, t) {
         var n = "string" != typeof e ? "sc" : R(e);
-        ot[n] = (ot[n] || 0) + 1;
-        var _$r = "".concat(n, "-").concat($(v + n + ot[n]));
-        return t ? "".concat(t, "-").concat(_$r) : _$r;
-    }(o.displayName, o.parentComponentId) : h, m = o.displayName, y = void 0 === m ? function(e) {
+        rt[n] = (rt[n] || 0) + 1;
+        var _$o = "".concat(n, "-").concat($(v + n + rt[n]));
+        return t ? "".concat(t, "-").concat(_$o) : _$o;
+    }(r.displayName, r.parentComponentId) : h, m = r.displayName, y = void 0 === m ? function(e) {
         return L(e) ? "styled.".concat(e) : "Styled(".concat(B(e), ")");
-    }(e) : m, g = o.displayName && o.componentId ? "".concat(R(o.displayName), "-").concat(o.componentId) : o.componentId || f, S = i && a.attrs ? a.attrs.concat(d).filter(Boolean) : d, w = o.shouldForwardProp;
+    }(e) : m, g = r.displayName && r.componentId ? "".concat(R(r.displayName), "-").concat(r.componentId) : r.componentId || f, S = i && a.attrs ? a.attrs.concat(d).filter(Boolean) : d, w = r.shouldForwardProp;
     if (i && a.shouldForwardProp) {
         var b = a.shouldForwardProp;
-        if (o.shouldForwardProp) {
-            var E = o.shouldForwardProp;
+        if (r.shouldForwardProp) {
+            var E = r.shouldForwardProp;
             w = function w(e, t) {
                 return b(e, t) && E(e, t);
             };
         } else w = b;
     }
     var N = new Qe(s, g, i ? a.componentStyle : void 0);
-    function O(e, o) {
-        return function(e, o, s) {
+    function O(e, r) {
+        return function(e, r, s) {
             var i = e.attrs, a = e.componentStyle, c = e.defaultProps, p = e.foldedComponentIds, d = e.styledComponentId, h = e.target, f = React__default.useContext(et), m = Ge(), y = e.shouldForwardProp || m.shouldForwardProp;
             "production" !== process.env.NODE_ENV && useDebugValue(d);
-            var v = I(o, f, c) || C, g = function(e, n, r) {
-                for(var _$o, _$s = __assign(__assign({}, n), {
+            var v = I(r, f, c) || C, g = function(e, n, o) {
+                for(var _$r, _$s = __assign(__assign({}, n), {
                     className: void 0,
-                    theme: r
+                    theme: o
                 }), i = 0; i < e.length; i += 1){
-                    var a = oe(_$o = e[i]) ? _$o(_$s) : _$o;
+                    var a = re(_$r = e[i]) ? _$r(_$s) : _$r;
                     for(var c in a)_$s[c] = "className" === c ? ie(_$s[c], a[c]) : "style" === c ? __assign(__assign({}, _$s[c]), a[c]) : a[c];
                 }
                 return n.className && (_$s.className = ie(_$s.className, n.className)), _$s;
-            }(i, o, v), S = g.as || h, w = {};
+            }(i, r, v), S = g.as || h, w = {};
             for(var b in g)void 0 === g[b] || "$" === b[0] || "as" === b || "theme" === b && g.theme === v || ("forwardedAs" === b ? w.as = g.forwardedAs : y && !y(b, S) || (w[b] = g[b], y || "development" !== process.env.NODE_ENV || isPropValid(b) || st.has(b) || !A.has(S) || (st.add(b), console.warn('styled-components: it looks like an unknown prop "'.concat(b, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
             var E = function(e, t) {
-                var _$n = Ge(), _$r = e.generateAndInjectStyles(t, _$n.styleSheet, _$n.stylis);
-                return "production" !== process.env.NODE_ENV && useDebugValue(_$r), _$r;
+                var _$n = Ge(), _$o = e.generateAndInjectStyles(t, _$n.styleSheet, _$n.stylis);
+                return "production" !== process.env.NODE_ENV && useDebugValue(_$o), _$o;
             }(a, g);
             "production" !== process.env.NODE_ENV && e.warnTooManyClasses && e.warnTooManyClasses(E);
             var N = ie(p, d);
             return E && (N += " " + E), g.className && (N += " " + g.className), w[L(S) && !A.has(S) ? "class" : "className"] = N, s && (w.ref = s), createElement(S, w);
-        }(D, e, o);
+        }(D, e, r);
     }
     O.displayName = y;
     var D = React__default.forwardRef(O);
@@ -31211,21 +31262,21 @@ function it(e, o, s) {
         set: function set(e) {
             this._foldedDefaultProps = i ? function(e) {
                 for(var t = [], n = 1; n < arguments.length; n++)t[n - 1] = arguments[n];
-                for(var _$r = 0, _$o = t; _$r < _$o.length; _$r++)le(e, _$o[_$r], !0);
+                for(var _$o = 0, _$r = t; _$o < _$r.length; _$o++)le(e, _$r[_$o], !0);
                 return e;
             }({}, a.defaultProps, e) : e;
         }
     }), "production" !== process.env.NODE_ENV && (P(y, g), D.warnTooManyClasses = function(e, t) {
-        var n = {}, _$r = !1;
-        return function(o) {
-            if (!_$r && (n[o] = !0, Object.keys(n).length >= 200)) {
+        var n = {}, _$o = !1;
+        return function(r) {
+            if (!_$o && (n[r] = !0, Object.keys(n).length >= 200)) {
                 var _$s = t ? ' with the id of "'.concat(t, '"') : "";
-                console.warn("Over ".concat(200, " classes were generated for component ").concat(e).concat(_$s, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), _$r = !0, n = {};
+                console.warn("Over ".concat(200, " classes were generated for component ").concat(e).concat(_$s, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), _$o = !0, n = {};
             }
         };
     }(y, g)), ue(D, function() {
         return ".".concat(D.styledComponentId);
-    }), c && re(D, e, {
+    }), c && oe(D, e, {
         attrs: !0,
         componentStyle: !0,
         displayName: !0,
@@ -31238,7 +31289,7 @@ function it(e, o, s) {
 function at(e, t) {
     for(var n = [
         e[0]
-    ], _$r = 0, o = t.length; _$r < o; _$r += 1)n.push(t[_$r], e[_$r + 1]);
+    ], _$o = 0, r = t.length; _$o < r; _$o += 1)n.push(t[_$o], e[_$o + 1]);
     return n;
 }
 var ct = function ct(e) {
@@ -31247,27 +31298,27 @@ var ct = function ct(e) {
     });
 };
 function lt$1(t) {
-    for(var n = [], _$r = 1; _$r < arguments.length; _$r++)n[_$r - 1] = arguments[_$r];
-    if (oe(t) || ce(t)) return ct(Xe(at(_$1, __spreadArray([
+    for(var n = [], _$o = 1; _$o < arguments.length; _$o++)n[_$o - 1] = arguments[_$o];
+    if (re(t) || ce(t)) return ct(Xe(at(_$1, __spreadArray([
         t
     ], n, !0))));
-    var o = t;
-    return 0 === n.length && 1 === o.length && "string" == typeof o[0] ? Xe(o) : ct(Xe(at(o, n)));
+    var r = t;
+    return 0 === n.length && 1 === r.length && "string" == typeof r[0] ? Xe(r) : ct(Xe(at(r, n)));
 }
-function ut(n, r, o) {
-    if (void 0 === o && (o = C), !r) throw he(1, r);
+function ut(n, o, r) {
+    if (void 0 === r && (r = C), !o) throw he(1, o);
     var s = function s(t) {
         for(var s = [], i = 1; i < arguments.length; i++)s[i - 1] = arguments[i];
-        return n(r, o, lt$1.apply(void 0, __spreadArray([
+        return n(o, r, lt$1.apply(void 0, __spreadArray([
             t
         ], s, !1)));
     };
     return s.attrs = function(e) {
-        return ut(n, r, __assign(__assign({}, o), {
-            attrs: Array.prototype.concat(o.attrs, e).filter(Boolean)
+        return ut(n, o, __assign(__assign({}, r), {
+            attrs: Array.prototype.concat(r.attrs, e).filter(Boolean)
         }));
     }, s.withConfig = function(e) {
-        return ut(n, r, __assign(__assign({}, o), e));
+        return ut(n, o, __assign(__assign({}, r), e));
     }, s;
 }
 var pt = function pt(e) {
@@ -46688,7 +46739,7 @@ var CityDistrict = function(param) {
     };
     return /*#__PURE__*/ jsxs("div", {
         className: [
-            "h-24 my-2 mx-0 sm:mx-4 w-full",
+            "h-24 mx-0 sm:mx-4 w-full",
             item === null || item === void 0 ? void 0 : item.className
         ].join(" "),
         children: [
@@ -47209,119 +47260,138 @@ var City = function(param) {
         })
     }, item.name);
 };
-// const CheckboxField: React.FC<FormType> = ({ item }) => {
-//   const {
-//     control,
-//     formState: { errors },
-//   } = useFormContext();
-//   return (
-//     <div className={['w-full min-h-[6rem] h-fit', item?.className].join(' ')}>
-//       <FieldLabel item={item} />
-//       {item?.checkboxes?.length ? (
-//         <div
-//           className={[
-//             item?.direction === 'horizontal' ? 'flex gap-4' : '',
-//           ].join(' ')}
-//         >
-//           {item?.checkboxes?.map((checkbox, index) => (
-//             <div key={index} className="flex items-center gap-1 my-2">
-//               <Controller
-//                 name={checkbox?.name}
-//                 control={control}
-//                 rules={
-//                   checkbox?.validateOption?.required
-//                     ? { required: checkbox?.errorText }
-//                     : undefined
-//                 }
-//                 render={({ field }) => (
-//                   <Checkbox
-//                     {...field}
-//                     {...checkbox?.muiProps}
-//                     sx={{ padding: 0 }}
-//                   />
-//                 )}
-//               />
-//               <div className={checkbox?.checkboxLabelClass}>
-//                 {checkbox?.checkboxLabel}
-//               </div>
-//               {validateMsg(errors, checkbox) && (
-//                 <div className="pt-1 text-xs text-[#EF5533]">
-//                   *{validateMsg(errors, checkbox)}
-//                 </div>
-//               )}
-//             </div>
-//           ))}
-//         </div>
-//       ) : (
-//         <div className="flex items-center gap-2">
-//           <Controller
-//             name={item?.name}
-//             control={control}
-//             rules={
-//               item?.validateOption?.required
-//                 ? { required: item?.errorText }
-//                 : undefined
-//             }
-//             render={({ field }) => (
-//               <Checkbox {...field} {...item?.muiProps} sx={{ padding: 0 }} />
-//             )}
-//           />
-//           <div className={item?.checkboxLabelClass}>{item?.checkboxLabel}</div>
-//           {validateMsg(errors, item) && (
-//             <div className="pt-1 text-xs text-[#EF5533]">
-//               *{validateMsg(errors, item)}
-//             </div>
-//           )}
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-// const RadioField = ({ item }) => {
-//   const {
-//     control,
-//     formState: { errors },
-//   } = useFormContext();
-//   return (
-//     <div className={['w-full min-h-[6rem] h-fit', item?.className].join(' ')}>
-//       {/* 顯示標籤 */}
-//       {item?.label && <FieldLabel item={item} />}
-//       {/* 渲染 RadioGroup */}
-//       <Controller
-//         name={item?.name}
-//         control={control}
-//         rules={
-//           item?.validateOption?.required
-//             ? { required: item?.errorText }
-//             : undefined
-//         }
-//         defaultValue={item?.defaultValue}
-//         render={({ field }) => (
-//           <RadioGroup
-//             {...field}
-//             row={item?.direction === 'horizontal'} // 支援水平或垂直方向
-//             aria-labelledby={`${item?.id}-radio-group-label`}
-//           >
-//             {item?.radioOptions?.map((option, index) => (
-//               <FormControlLabel
-//                 key={index}
-//                 value={option?.value}
-//                 control={<Radio {...item?.muiProps} />}
-//                 label={option?.label}
-//                 disabled={option?.disabled || false}
-//               />
-//             ))}
-//           </RadioGroup>
-//         )}
-//       />
-//       {validateMsg(errors, item) && (
-//         <div className="pt-1 text-xs text-[#EF5533]">
-//           *{validateMsg(errors, item)}
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
+var CheckboxField = function(param) {
+    var item = param.item;
+    var _item_checkboxes, _item_checkboxes1, _item_validateOption;
+    var _useFormContext = useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors;
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            "w-full min-h-[6rem] h-fit",
+            item === null || item === void 0 ? void 0 : item.className
+        ].join(" "),
+        children: [
+            /*#__PURE__*/ jsx(FieldLabel, {
+                item: item
+            }),
+            (item === null || item === void 0 ? void 0 : (_item_checkboxes = item.checkboxes) === null || _item_checkboxes === void 0 ? void 0 : _item_checkboxes.length) ? /*#__PURE__*/ jsx("div", {
+                className: [
+                    (item === null || item === void 0 ? void 0 : item.direction) === "horizontal" ? "flex gap-4" : ""
+                ].join(" "),
+                children: item === null || item === void 0 ? void 0 : (_item_checkboxes1 = item.checkboxes) === null || _item_checkboxes1 === void 0 ? void 0 : _item_checkboxes1.map(function(checkbox, index) {
+                    var _checkbox_validateOption;
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-1 my-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Controller, {
+                                name: checkbox === null || checkbox === void 0 ? void 0 : checkbox.name,
+                                control: control,
+                                rules: (checkbox === null || checkbox === void 0 ? void 0 : (_checkbox_validateOption = checkbox.validateOption) === null || _checkbox_validateOption === void 0 ? void 0 : _checkbox_validateOption.required) ? {
+                                    required: checkbox === null || checkbox === void 0 ? void 0 : checkbox.errorText
+                                } : undefined,
+                                render: function(param) {
+                                    var field = param.field;
+                                    return /*#__PURE__*/ jsx(Checkbox, _object_spread_props$3(_object_spread$6({}, field, checkbox === null || checkbox === void 0 ? void 0 : checkbox.muiProps), {
+                                        sx: {
+                                            padding: 0
+                                        }
+                                    }));
+                                }
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: checkbox === null || checkbox === void 0 ? void 0 : checkbox.checkboxLabelClass,
+                                children: checkbox === null || checkbox === void 0 ? void 0 : checkbox.checkboxLabel
+                            }),
+                            validateMsg(errors, checkbox) && /*#__PURE__*/ jsxs("div", {
+                                className: "pt-1 text-xs text-[#EF5533]",
+                                children: [
+                                    "*",
+                                    validateMsg(errors, checkbox)
+                                ]
+                            })
+                        ]
+                    }, index);
+                })
+            }) : /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ jsx(Controller, {
+                        name: item === null || item === void 0 ? void 0 : item.name,
+                        control: control,
+                        rules: (item === null || item === void 0 ? void 0 : (_item_validateOption = item.validateOption) === null || _item_validateOption === void 0 ? void 0 : _item_validateOption.required) ? {
+                            required: item === null || item === void 0 ? void 0 : item.errorText
+                        } : undefined,
+                        render: function(param) {
+                            var field = param.field;
+                            return /*#__PURE__*/ jsx(Checkbox, _object_spread_props$3(_object_spread$6({}, field, item === null || item === void 0 ? void 0 : item.muiProps), {
+                                sx: {
+                                    padding: 0
+                                }
+                            }));
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: item === null || item === void 0 ? void 0 : item.checkboxLabelClass,
+                        children: item === null || item === void 0 ? void 0 : item.checkboxLabel
+                    }),
+                    validateMsg(errors, item) && /*#__PURE__*/ jsxs("div", {
+                        className: "pt-1 text-xs text-[#EF5533]",
+                        children: [
+                            "*",
+                            validateMsg(errors, item)
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var RadioField = function(param) {
+    var item = param.item;
+    var _item_validateOption;
+    var _useFormContext = useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors;
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            "w-full min-h-[6rem] h-fit",
+            item === null || item === void 0 ? void 0 : item.className
+        ].join(" "),
+        children: [
+            (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx(FieldLabel, {
+                item: item
+            }),
+            /*#__PURE__*/ jsx(Controller, {
+                name: item === null || item === void 0 ? void 0 : item.name,
+                control: control,
+                rules: (item === null || item === void 0 ? void 0 : (_item_validateOption = item.validateOption) === null || _item_validateOption === void 0 ? void 0 : _item_validateOption.required) ? {
+                    required: item === null || item === void 0 ? void 0 : item.errorText
+                } : undefined,
+                defaultValue: item === null || item === void 0 ? void 0 : item.defaultValue,
+                render: function(param) {
+                    var field = param.field;
+                    var _item_radioOptions;
+                    return /*#__PURE__*/ jsx(RadioGroup, _object_spread_props$3(_object_spread$6({}, field), {
+                        row: (item === null || item === void 0 ? void 0 : item.direction) === "horizontal",
+                        "aria-labelledby": "".concat(item === null || item === void 0 ? void 0 : item.id, "-radio-group-label"),
+                        children: item === null || item === void 0 ? void 0 : (_item_radioOptions = item.radioOptions) === null || _item_radioOptions === void 0 ? void 0 : _item_radioOptions.map(function(option, index) {
+                            return /*#__PURE__*/ jsx(FormControlLabel, {
+                                value: option === null || option === void 0 ? void 0 : option.value,
+                                control: /*#__PURE__*/ jsx(Radio, _object_spread$6({}, item === null || item === void 0 ? void 0 : item.muiProps)),
+                                label: option === null || option === void 0 ? void 0 : option.label,
+                                disabled: (option === null || option === void 0 ? void 0 : option.disabled) || false
+                            }, index);
+                        })
+                    }));
+                }
+            }),
+            validateMsg(errors, item) && /*#__PURE__*/ jsxs("div", {
+                className: "pt-1 text-xs text-[#EF5533]",
+                children: [
+                    "*",
+                    validateMsg(errors, item)
+                ]
+            })
+        ]
+    });
+};
 var Textarea = function(param) {
     var item = param.item;
     var _useFormContext = useFormContext(), register = _useFormContext.register, errors = _useFormContext.formState.errors;
@@ -47418,11 +47488,11 @@ var Row = function(param) {
                 return /*#__PURE__*/ jsx(Time, _object_spread$6({}, baseConfig));
             case "switch":
                 return /*#__PURE__*/ jsx(BaseSwitch, _object_spread$6({}, baseConfig));
-            // case 'checkbox':
-            // case 'checkboxGroup':
-            //   return <CheckboxField {...baseConfig} />;
-            // case 'radio':
-            //   return <RadioField {...baseConfig} />;
+            case "checkbox":
+            case "checkboxGroup":
+                return /*#__PURE__*/ jsx(CheckboxField, _object_spread$6({}, baseConfig));
+            case "radio":
+                return /*#__PURE__*/ jsx(RadioField, _object_spread$6({}, baseConfig));
             case "textarea":
                 return /*#__PURE__*/ jsx(Textarea, _object_spread$6({}, baseConfig));
             case "cityOnly":
@@ -47443,10 +47513,13 @@ var Form = {
     SingleSelect: SingleSelect,
     MultipleSelect: MultipleSelect,
     FieldLabel: FieldLabel,
+    RadioField: RadioField,
     Time: Time,
     Textarea: Textarea,
     City: City,
-    CityDistrict: CityDistrict
+    CityDistrict: CityDistrict,
+    CheckboxField: CheckboxField,
+    BaseCkeditor: BaseCkeditor
 };
 
 function _define_property$5(obj, key, value) {