@sunggang/ui-lib 0.3.24 → 0.3.25

package/index.esm2.js

@@ -17826,6 +17826,103 @@ var PrimaryDragDropImage = function(param) {
     });
 };
 
+var ModalContent = function(param) {
+    var title = param.title, setModal = param.setModal, children = param.children, onClick = param.onClick, _param_notice = param.notice, notice = _param_notice === void 0 ? false : _param_notice;
+    return /*#__PURE__*/ jsxs("form", {
+        children: [
+            title && /*#__PURE__*/ jsx("div", {
+                className: "text-2xl text-gray-700 font-medium border-solid border-b border-gray-300 mb-4 p-4",
+                children: title
+            }),
+            children && /*#__PURE__*/ jsx("div", {
+                className: "py-4 px-8",
+                children: children
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center text-base p-4 px-8 justify-around",
+                children: notice ? /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: "w-24 h-10 px-2 text-white bg-gray-600  rounded",
+                    onClick: setModal,
+                    children: "確定"
+                }) : /*#__PURE__*/ jsxs(Fragment$1, {
+                    children: [
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "w-24 h-10 px-2 text-white bg-gray-600  rounded",
+                            onClick: setModal,
+                            children: "取消"
+                        }),
+                        onClick && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "w-24 h-10 mx-3 text-white bg-gray-500 rounded",
+                            onClick: onClick,
+                            children: "送出"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+var ErrorContent = function(param) {
+    var setModal = param.setModal, errmsg = param.errmsg;
+    return /*#__PURE__*/ jsx(ModalContent, {
+        setModal: setModal,
+        onClick: setModal,
+        notice: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "w-full max-w-xl",
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex justify-center items-center mb-6",
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        icon: "fluent-mdl2:status-error-full",
+                        color: "red",
+                        height: 60
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "text-center text-lg text-gray-500",
+                    children: errmsg
+                })
+            ]
+        })
+    });
+};
+
+var Modal = function(param) {
+    var modal = param.modal, _param_unsetModal = param.unsetModal, unsetModal = _param_unsetModal === void 0 ? function() {} : _param_unsetModal;
+    var handleKeyUp = function(e) {
+        var _document_activeElement;
+        if (e.key === "Escape" && ![
+            "INPUT",
+            "SELECT"
+        ].includes((_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.tagName)) {
+            unsetModal();
+        }
+    };
+    useEffect(function() {
+        document.addEventListener("keyup", handleKeyUp);
+        return function() {
+            return document.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [
+        unsetModal
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "fixed top-0 left-0 h-screen z-[2000] duration-300 transition-opacity bg-[#000000b3] w-full",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "w-full h-full flex justify-center items-center p-6",
+            children: /*#__PURE__*/ jsx("div", {
+                className: "bg-white overflow-y-auto w-full m-auto max-w-[455px] rounded-xl",
+                children: modal
+            })
+        })
+    });
+};
+
 function _array_like_to_array$n(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -17937,15 +18034,16 @@ function _unsupported_iterable_to_array$n(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$n(o, minLen);
 }
 var DropImage = function(param) {
-    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, _param_imageStyleType = param.imageStyleType, imageStyleType = _param_imageStyleType === void 0 ? "base" : _param_imageStyleType;
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, _param_imageStyleType = param.imageStyleType, imageStyleType = _param_imageStyleType === void 0 ? "base" : _param_imageStyleType, _param_limitSize = param.limitSize, limitSize = _param_limitSize === void 0 ? 0 : _param_limitSize;
     var _useState = _sliced_to_array$k(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
+    var _useState1 = _sliced_to_array$k(useState(null), 2), uploadError = _useState1[0], setUploadError = _useState1[1];
     useEffect(function() {
         setPreviewFiles(imageUrls);
     }, [
         imageUrls
     ]);
-    var MAX_SIZE_2MB = 2 * 1024 * 1024;
     var MAX_SIZE_5MB = 5 * 1024 * 1024;
+    var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = limitSize || MAX_SIZE_5MB;
     var _useDropzone = useDropzone({
         accept: {
             "image/png": [
@@ -17957,7 +18055,7 @@ var DropImage = function(param) {
             ]
         },
         maxFiles: 10,
-        maxSize: imageStyleType === "primary" ? MAX_SIZE_2MB : MAX_SIZE_5MB,
+        maxSize: DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES,
         onDrop: function(dropFiles) {
             var newFiles = [];
             setFiles(function(prevFiles) {
@@ -17974,6 +18072,42 @@ var DropImage = function(param) {
             setPreviewFiles(function(prev) {
                 return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
             });
+        },
+        onDropRejected: function(rejectedFiles) {
+            var errorItems = rejectedFiles.map(function(param) {
+                var file = param.file; param.errors;
+                return /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "text-center text-lg text-gray-500",
+                        children: [
+                            "檔案太大: ",
+                            file.path,
+                            " - ",
+                            (file.size / 1024 / 1024).toFixed(2),
+                            " MB"
+                        ]
+                    })
+                }, file.path);
+            });
+            setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
+                setModal: function() {
+                    return setUploadError(null);
+                },
+                errmsg: /*#__PURE__*/ jsxs(Fragment$1, {
+                    children: [
+                        errorItems,
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "pt-4",
+                            children: [
+                                "上限：",
+                                (DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES / 1024 / 1024).toFixed(2),
+                                " ",
+                                "MB"
+                            ]
+                        })
+                    ]
+                })
+            }));
         }
     }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
     var onDragEnd = function(result) {
@@ -17994,96 +18128,99 @@ var DropImage = function(param) {
         previewFiles.splice(currentItem, 1);
         setImageUrls(_to_consumable_array$8(previewFiles));
     };
-    return /*#__PURE__*/ jsx("section", {
+    return /*#__PURE__*/ jsxs("section", {
         className: "w-full",
-        children: /*#__PURE__*/ jsxs(DragDropContext, {
-            onDragEnd: onDragEnd,
-            children: [
-                /*#__PURE__*/ jsxs("div", _object_spread_props$j(_object_spread$n({}, getRootProps({
-                    className: "dropzone"
-                })), {
-                    children: [
-                        /*#__PURE__*/ jsx("input", _object_spread$n({}, getInputProps())),
-                        /*#__PURE__*/ jsx("div", {
-                            className: "flex justify-between",
-                            children: imageStyleType === "primary" ? /*#__PURE__*/ jsx("div", {
-                                className: "w-full",
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: "border-2 border-dashed border-[#17340929] rounded-[22px]",
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: "flex justify-center",
-                                            children: /*#__PURE__*/ jsx("div", {
-                                                className: "flex justify-center mt-9 mb-2 py-3 px-6 bg-[#1A1A1A] text-white rounded-[22px] text-sm",
-                                                children: "上傳照片"
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsxs("div", {
-                                            className: "flex items-center flex-col justify-center",
-                                            children: [
-                                                /*#__PURE__*/ jsx("p", {
-                                                    className: "font-normal text-sm text-[#777777] pb-4",
-                                                    children: "檔案可為PNG，JPG，檔案大小須小於2M"
-                                                }),
-                                                /*#__PURE__*/ jsx("h5", {
-                                                    className: "mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",
-                                                    children: "拖曳圖片至此"
+        children: [
+            /*#__PURE__*/ jsxs(DragDropContext, {
+                onDragEnd: onDragEnd,
+                children: [
+                    /*#__PURE__*/ jsxs("div", _object_spread_props$j(_object_spread$n({}, getRootProps({
+                        className: "dropzone"
+                    })), {
+                        children: [
+                            /*#__PURE__*/ jsx("input", _object_spread$n({}, getInputProps())),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "flex justify-between",
+                                children: imageStyleType === "primary" ? /*#__PURE__*/ jsx("div", {
+                                    className: "w-full",
+                                    children: /*#__PURE__*/ jsxs("div", {
+                                        className: "border-2 border-dashed border-[#17340929] rounded-[22px]",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "flex items-center flex-col justify-center",
+                                                children: /*#__PURE__*/ jsx("div", {
+                                                    className: "text-2xl font-medium text-[#777777] p-[30px]",
+                                                    children: "可拖曳檔案至此區域"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "font-normal text-[#777777] pb-2 text-center",
+                                                children: "或用上傳按鈕選擇檔案"
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "flex justify-center",
+                                                children: /*#__PURE__*/ jsx("div", {
+                                                    className: "flex justify-center mb-6 py-3 px-6 bg-[#1A1A1A] text-white rounded-[22px] text-sm",
+                                                    children: "上傳照片"
                                                 })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            }) : /*#__PURE__*/ jsx("div", {
-                                className: "w-full bg-gray-light rounded-lg",
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: "border-2 border-dashed border-[#777777] rounded-lg bg-gray-100",
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: "flex justify-center py-8",
-                                            children: /*#__PURE__*/ jsx(Icon, {
-                                                icon: "material-symbols:upload",
-                                                width: "2.5rem",
-                                                height: "2.5rem"
                                             })
-                                        }),
-                                        /*#__PURE__*/ jsxs("div", {
-                                            className: "flex items-center flex-col justify-center",
-                                            children: [
-                                                /*#__PURE__*/ jsx("p", {
-                                                    className: "font-normal text-sm text-[#777777] pb-4",
-                                                    children: "圖片僅支援 png、jpg、jpeg"
-                                                }),
-                                                /*#__PURE__*/ jsx("h5", {
-                                                    className: "mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",
-                                                    children: "拖曳圖片至此"
+                                        ]
+                                    })
+                                }) : /*#__PURE__*/ jsx("div", {
+                                    className: "w-full bg-gray-light rounded-lg",
+                                    children: /*#__PURE__*/ jsxs("div", {
+                                        className: "border-2 border-dashed border-[#777777] rounded-lg bg-gray-100",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "flex justify-center py-8",
+                                                children: /*#__PURE__*/ jsx(Icon, {
+                                                    icon: "material-symbols:upload",
+                                                    width: "2.5rem",
+                                                    height: "2.5rem"
                                                 })
-                                            ]
-                                        })
-                                    ]
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "flex items-center flex-col justify-center",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        className: "font-normal text-sm text-[#777777] pb-4",
+                                                        children: "圖片僅支援 png、jpg、jpeg"
+                                                    }),
+                                                    /*#__PURE__*/ jsx("h5", {
+                                                        className: "mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",
+                                                        children: "拖曳圖片至此"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
                                 })
                             })
-                        })
-                    ]
-                })),
-                preview && /*#__PURE__*/ jsxs("div", {
-                    className: "flex pt-2 overflow-auto",
-                    children: [
-                        imageStyleType === "base" && /*#__PURE__*/ jsx(DragDropImages, {
-                            imageUrls: previewFiles,
-                            handleRemove: handleRemove
-                        }),
-                        imageStyleType === "custom" && /*#__PURE__*/ jsx(CustomDragDropImages, {
-                            imageUrls: previewFiles,
-                            handleRemove: handleRemove
-                        }),
-                        imageStyleType === "primary" && /*#__PURE__*/ jsx(PrimaryDragDropImage, {
-                            imageUrls: previewFiles,
-                            handleRemove: handleRemove
-                        })
-                    ]
-                })
-            ]
-        })
+                        ]
+                    })),
+                    preview && /*#__PURE__*/ jsxs("div", {
+                        className: "flex pt-2 overflow-auto",
+                        children: [
+                            imageStyleType === "base" && /*#__PURE__*/ jsx(DragDropImages, {
+                                imageUrls: previewFiles,
+                                handleRemove: handleRemove
+                            }),
+                            imageStyleType === "custom" && /*#__PURE__*/ jsx(CustomDragDropImages, {
+                                imageUrls: previewFiles,
+                                handleRemove: handleRemove
+                            }),
+                            imageStyleType === "primary" && /*#__PURE__*/ jsx(PrimaryDragDropImage, {
+                                imageUrls: previewFiles,
+                                handleRemove: handleRemove
+                            })
+                        ]
+                    })
+                ]
+            }),
+            uploadError ? /*#__PURE__*/ jsx(Modal, {
+                modal: uploadError
+            }) : null
+        ]
     });
 };
 
@@ -18997,103 +19134,6 @@ var DropDown = function(param) {
     });
 };
 
-var ModalContent = function(param) {
-    var title = param.title, setModal = param.setModal, children = param.children, onClick = param.onClick, _param_notice = param.notice, notice = _param_notice === void 0 ? false : _param_notice;
-    return /*#__PURE__*/ jsxs("form", {
-        children: [
-            title && /*#__PURE__*/ jsx("div", {
-                className: "text-2xl text-gray-700 font-medium border-solid border-b border-gray-300 mb-4 p-4",
-                children: title
-            }),
-            children && /*#__PURE__*/ jsx("div", {
-                className: "py-4 px-8",
-                children: children
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "flex items-center text-base p-4 px-8 justify-around",
-                children: notice ? /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    className: "w-24 h-10 px-2 text-white bg-gray-600  rounded",
-                    onClick: setModal,
-                    children: "確定"
-                }) : /*#__PURE__*/ jsxs(Fragment$1, {
-                    children: [
-                        /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            className: "w-24 h-10 px-2 text-white bg-gray-600  rounded",
-                            onClick: setModal,
-                            children: "取消"
-                        }),
-                        onClick && /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            className: "w-24 h-10 mx-3 text-white bg-gray-500 rounded",
-                            onClick: onClick,
-                            children: "送出"
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-};
-
-var ErrorContent = function(param) {
-    var setModal = param.setModal, errmsg = param.errmsg;
-    return /*#__PURE__*/ jsx(ModalContent, {
-        setModal: setModal,
-        onClick: setModal,
-        notice: true,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "w-full max-w-xl",
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: "flex justify-center items-center mb-6",
-                    children: /*#__PURE__*/ jsx(Icon, {
-                        icon: "fluent-mdl2:status-error-full",
-                        color: "red",
-                        height: 60
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: "text-center text-lg text-gray-500",
-                    children: errmsg
-                })
-            ]
-        })
-    });
-};
-
-var Modal = function(param) {
-    var modal = param.modal, _param_unsetModal = param.unsetModal, unsetModal = _param_unsetModal === void 0 ? function() {} : _param_unsetModal;
-    var handleKeyUp = function(e) {
-        var _document_activeElement;
-        if (e.key === "Escape" && ![
-            "INPUT",
-            "SELECT"
-        ].includes((_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.tagName)) {
-            unsetModal();
-        }
-    };
-    useEffect(function() {
-        document.addEventListener("keyup", handleKeyUp);
-        return function() {
-            return document.removeEventListener("keyup", handleKeyUp);
-        };
-    }, [
-        unsetModal
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "fixed top-0 left-0 h-screen z-[2000] transition-opacity duration-300 transition-opacity bg-[#000000b3] w-full",
-        children: /*#__PURE__*/ jsx("div", {
-            className: "w-full h-full flex justify-center items-center p-6",
-            children: /*#__PURE__*/ jsx("div", {
-                className: "bg-white rounded overflow-y-auto w-full m-auto max-w-[455px] rounded-xl",
-                children: modal
-            })
-        })
-    });
-};
-
 function _array_like_to_array$l(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -19252,7 +19292,7 @@ function _unsupported_iterable_to_array$k(o, minLen) {
 var CustomUpload$1 = function(param) {
     var className = param.className, children = param.children, file = param.file, setFile = param.setFile, imageUrl = param.imageUrl, setImageUrl = param.setImageUrl;
     var imageMimeType = /image\/(png|jpg|jpeg)/i;
-    var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5120000; // 5000 KB
+    var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5242880;
     var _useState = _sliced_to_array$h(useState(null), 2), modal = _useState[0], setModal = _useState[1];
     var hiddenFileInput = useRef(null);
     var handleImageClick = function() {
@@ -22214,6 +22254,357 @@ function createFormControl() {
         formControl: methods
     });
 }
+var generateId = function() {
+    var d = typeof performance === "undefined" ? Date.now() : performance.now() * 1000;
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+        var r = (Math.random() * 16 + d) % 16 | 0;
+        return (c == "x" ? r : r & 0x3 | 0x8).toString(16);
+    });
+};
+var getFocusFieldName = function(name, index) {
+    var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return options.shouldFocus || isUndefined(options.shouldFocus) ? options.focusName || "".concat(name, ".").concat(isUndefined(options.focusIndex) ? index : options.focusIndex, ".") : "";
+};
+var appendAt = function(data, value1) {
+    return _to_consumable_array$6(data).concat(_to_consumable_array$6(convertToArrayPayload(value1)));
+};
+var fillEmptyArray = function(value1) {
+    return Array.isArray(value1) ? value1.map(function() {
+        return undefined;
+    }) : undefined;
+};
+function insert(data, index, value1) {
+    return _to_consumable_array$6(data.slice(0, index)).concat(_to_consumable_array$6(convertToArrayPayload(value1)), _to_consumable_array$6(data.slice(index)));
+}
+var moveArrayAt = function(data, from, to) {
+    if (!Array.isArray(data)) {
+        return [];
+    }
+    if (isUndefined(data[to])) {
+        data[to] = undefined;
+    }
+    data.splice(to, 0, data.splice(from, 1)[0]);
+    return data;
+};
+var prependAt = function(data, value1) {
+    return _to_consumable_array$6(convertToArrayPayload(value1)).concat(_to_consumable_array$6(convertToArrayPayload(data)));
+};
+function removeAtIndexes(data, indexes) {
+    var i = 0;
+    var temp = _to_consumable_array$6(data);
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = indexes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var index = _step.value;
+            temp.splice(index - i, 1);
+            i++;
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return compact(temp).length ? temp : [];
+}
+var removeArrayAt = function(data, index) {
+    return isUndefined(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort(function(a, b) {
+        return a - b;
+    }));
+};
+var swapArrayAt = function(data, indexA, indexB) {
+    var ref;
+    ref = [
+        data[indexB],
+        data[indexA]
+    ], data[indexA] = ref[0], data[indexB] = ref[1];
+};
+var updateAt = function(fieldValues, index, value1) {
+    fieldValues[index] = value1;
+    return fieldValues;
+};
+/**
+ * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn)
+ *
+ * @param props - useFieldArray props
+ *
+ * @returns methods - functions to manipulate with the Field Arrays (dynamic inputs) {@link UseFieldArrayReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, control, handleSubmit, reset, trigger, setError } = useForm({
+ *     defaultValues: {
+ *       test: []
+ *     }
+ *   });
+ *   const { fields, append } = useFieldArray({
+ *     control,
+ *     name: "test"
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(data => console.log(data))}>
+ *       {fields.map((item, index) => (
+ *          <input key={item.id} {...register(`test.${index}.firstName`)}  />
+ *       ))}
+ *       <button type="button" onClick={() => append({ firstName: "bill" })}>
+ *         append
+ *       </button>
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */ function useFieldArray(props) {
+    var methods = useFormContext();
+    var _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, name = props.name, _props_keyName = props.keyName, keyName = _props_keyName === void 0 ? "id" : _props_keyName, shouldUnregister = props.shouldUnregister, rules = props.rules;
+    var _React_useState = _sliced_to_array$g(React__default.useState(control._getFieldArray(name)), 2), fields = _React_useState[0], setFields = _React_useState[1];
+    var ids = React__default.useRef(control._getFieldArray(name).map(generateId));
+    var _fieldIds = React__default.useRef(fields);
+    var _name = React__default.useRef(name);
+    var _actioned = React__default.useRef(false);
+    _name.current = name;
+    _fieldIds.current = fields;
+    control._names.array.add(name);
+    rules && control.register(name, rules);
+    React__default.useEffect(function() {
+        return control._subjects.array.subscribe({
+            next: function(param) {
+                var values = param.values, fieldArrayName = param.name;
+                if (fieldArrayName === _name.current || !fieldArrayName) {
+                    var fieldValues = get$2(values, _name.current);
+                    if (Array.isArray(fieldValues)) {
+                        setFields(fieldValues);
+                        ids.current = fieldValues.map(generateId);
+                    }
+                }
+            }
+        }).unsubscribe;
+    }, [
+        control
+    ]);
+    var updateValues = React__default.useCallback(function(updatedFieldArrayValues) {
+        _actioned.current = true;
+        control._setFieldArray(name, updatedFieldArrayValues);
+    }, [
+        control,
+        name
+    ]);
+    var append = function(value1, options) {
+        var appendValue = convertToArrayPayload(cloneObject(value1));
+        var updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
+        control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+        ids.current = appendAt(ids.current, appendValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
+            argA: fillEmptyArray(value1)
+        });
+    };
+    var prepend = function(value1, options) {
+        var prependValue = convertToArrayPayload(cloneObject(value1));
+        var updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
+        control._names.focus = getFocusFieldName(name, 0, options);
+        ids.current = prependAt(ids.current, prependValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
+            argA: fillEmptyArray(value1)
+        });
+    };
+    var remove = function(index) {
+        var updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+        ids.current = removeArrayAt(ids.current, index);
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        !Array.isArray(get$2(control._fields, name)) && set(control._fields, name, undefined);
+        control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
+            argA: index
+        });
+    };
+    var insert$1 = function(index, value1, options) {
+        var insertValue = convertToArrayPayload(cloneObject(value1));
+        var updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+        control._names.focus = getFocusFieldName(name, index, options);
+        ids.current = insert(ids.current, index, insertValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, insert, {
+            argA: index,
+            argB: fillEmptyArray(value1)
+        });
+    };
+    var swap = function(indexA, indexB) {
+        var updatedFieldArrayValues = control._getFieldArray(name);
+        swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+        swapArrayAt(ids.current, indexA, indexB);
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
+            argA: indexA,
+            argB: indexB
+        }, false);
+    };
+    var move = function(from, to) {
+        var updatedFieldArrayValues = control._getFieldArray(name);
+        moveArrayAt(updatedFieldArrayValues, from, to);
+        moveArrayAt(ids.current, from, to);
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
+            argA: from,
+            argB: to
+        }, false);
+    };
+    var update = function(index, value1) {
+        var updateValue = cloneObject(value1);
+        var updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
+        ids.current = _to_consumable_array$6(updatedFieldArrayValues).map(function(item, i) {
+            return !item || i === index ? generateId() : ids.current[i];
+        });
+        updateValues(updatedFieldArrayValues);
+        setFields(_to_consumable_array$6(updatedFieldArrayValues));
+        control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
+            argA: index,
+            argB: updateValue
+        }, true, false);
+    };
+    var replace = function(value1) {
+        var updatedFieldArrayValues = convertToArrayPayload(cloneObject(value1));
+        ids.current = updatedFieldArrayValues.map(generateId);
+        updateValues(_to_consumable_array$6(updatedFieldArrayValues));
+        setFields(_to_consumable_array$6(updatedFieldArrayValues));
+        control._setFieldArray(name, _to_consumable_array$6(updatedFieldArrayValues), function(data) {
+            return data;
+        }, {}, true, false);
+    };
+    React__default.useEffect(function() {
+        control._state.action = false;
+        isWatched(name, control._names) && control._subjects.state.next(_object_spread$k({}, control._formState));
+        if (_actioned.current && (!getValidationModes(control._options.mode).isOnSubmit || control._formState.isSubmitted) && !getValidationModes(control._options.reValidateMode).isOnSubmit) {
+            if (control._options.resolver) {
+                control._runSchema([
+                    name
+                ]).then(function(result) {
+                    var error = get$2(result.errors, name);
+                    var existingError = get$2(control._formState.errors, name);
+                    if (existingError ? !error && existingError.type || error && (existingError.type !== error.type || existingError.message !== error.message) : error && error.type) {
+                        error ? set(control._formState.errors, name, error) : unset(control._formState.errors, name);
+                        control._subjects.state.next({
+                            errors: control._formState.errors
+                        });
+                    }
+                });
+            } else {
+                var field = get$2(control._fields, name);
+                if (field && field._f && !(getValidationModes(control._options.reValidateMode).isOnSubmit && getValidationModes(control._options.mode).isOnSubmit)) {
+                    validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then(function(error) {
+                        return !isEmptyObject(error) && control._subjects.state.next({
+                            errors: updateFieldArrayRootError(control._formState.errors, error, name)
+                        });
+                    });
+                }
+            }
+        }
+        control._subjects.state.next({
+            name: name,
+            values: cloneObject(control._formValues)
+        });
+        control._names.focus && iterateFieldsByAction(control._fields, function(ref, key) {
+            if (control._names.focus && key.startsWith(control._names.focus) && ref.focus) {
+                ref.focus();
+                return 1;
+            }
+            return;
+        });
+        control._names.focus = "";
+        control._setValid();
+        _actioned.current = false;
+    }, [
+        fields,
+        name,
+        control
+    ]);
+    React__default.useEffect(function() {
+        !get$2(control._formValues, name) && control._setFieldArray(name);
+        return function() {
+            var updateMounted = function(name, value1) {
+                var field = get$2(control._fields, name);
+                if (field && field._f) {
+                    field._f.mount = value1;
+                }
+            };
+            control._options.shouldUnregister || shouldUnregister ? control.unregister(name) : updateMounted(name, false);
+        };
+    }, [
+        name,
+        control,
+        keyName,
+        shouldUnregister
+    ]);
+    return {
+        swap: React__default.useCallback(swap, [
+            updateValues,
+            name,
+            control
+        ]),
+        move: React__default.useCallback(move, [
+            updateValues,
+            name,
+            control
+        ]),
+        prepend: React__default.useCallback(prepend, [
+            updateValues,
+            name,
+            control
+        ]),
+        append: React__default.useCallback(append, [
+            updateValues,
+            name,
+            control
+        ]),
+        remove: React__default.useCallback(remove, [
+            updateValues,
+            name,
+            control
+        ]),
+        insert: React__default.useCallback(insert$1, [
+            updateValues,
+            name,
+            control
+        ]),
+        update: React__default.useCallback(update, [
+            updateValues,
+            name,
+            control
+        ]),
+        replace: React__default.useCallback(replace, [
+            updateValues,
+            name,
+            control
+        ]),
+        fields: React__default.useMemo(function() {
+            return fields.map(function(field, index) {
+                return _object_spread_props$g(_object_spread$k({}, field), _define_property$l({}, keyName, ids.current[index] || generateId()));
+            });
+        }, [
+            fields,
+            keyName
+        ])
+    };
+}
 /**
  * Custom hook to manage the entire form.
  *
@@ -46990,7 +47381,7 @@ var CityDistrict = function(param) {
                                     /*#__PURE__*/ jsxs("select", _object_spread_props$a(_object_spread$d({
                                         className: [
                                             isDisabled ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
-                                            "customSelect w-full h-11 text-[15px] py-2 pr-4 rounded-lg border border-solid border-gray-300",
+                                            "customSelect w-full h-11 text-[15px] py-2 pr-4 rounded-2xl border border-solid border-[#B4B4B4]",
                                             (item === null || item === void 0 ? void 0 : item.icon) ? "pl-14" : "pl-4"
                                         ].join(" "),
                                         style: item === null || item === void 0 ? void 0 : item.style
@@ -47018,7 +47409,7 @@ var CityDistrict = function(param) {
                                 className: "relative w-full",
                                 children: [
                                     /*#__PURE__*/ jsx("div", {
-                                        className: "absolute w-12 h-11 top-0 right-0 z-5 flex items-center justify-center rounded-r-lg pointer-events-none",
+                                        className: "absolute w-12 h-11 top-0 right-0 z-5 flex items-center justify-center rounded-r-2xl pointer-events-none",
                                         children: !(item === null || item === void 0 ? void 0 : item.hiddenArrow) && /*#__PURE__*/ jsx(Icon, {
                                             className: "h-6 w-6",
                                             icon: "ri:arrow-down-s-line",
@@ -47028,7 +47419,7 @@ var CityDistrict = function(param) {
                                     /*#__PURE__*/ jsxs("select", _object_spread_props$a(_object_spread$d({
                                         className: [
                                             isDisabled ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
-                                            "customSelect w-full h-11 text-[15px] py-2 pr-4 rounded-lg border border-solid border-gray-300",
+                                            "customSelect w-full h-11 text-[15px] py-2 pr-4 rounded-2xl border border-solid border-[#B4B4B4]",
                                             (item === null || item === void 0 ? void 0 : item.subIcon) ? "pl-14" : "pl-4"
                                         ].join(" "),
                                         style: item === null || item === void 0 ? void 0 : item.style
@@ -47111,7 +47502,7 @@ function _unsupported_iterable_to_array$e(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
 var BaseTemplate = function(param) {
-    var item = param.item, file = param.file, imageUrl = param.imageUrl;
+    var item = param.item, file = param.file, imageUrl = param.imageUrl, field = param.field;
     var _useState = _sliced_to_array$b(useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
     useEffect(function() {
         var fileReader;
@@ -47138,45 +47529,112 @@ var BaseTemplate = function(param) {
     ]);
     var imageSource = tempImage || imageUrl;
     var isDisabled = (item === null || item === void 0 ? void 0 : item.disabled) || (item === null || item === void 0 ? void 0 : item.disable);
-    return /*#__PURE__*/ jsx("div", {
-        className: "bg-white rounded-lg shadow-md overflow-hidden items-center",
-        children: /*#__PURE__*/ jsx("div", {
-            className: "px-4 py-6 h-56",
-            children: imageSource ? /*#__PURE__*/ jsx("img", {
-                className: [
-                    "w-full h-full object-contain border-dashed border-2 border-gray-400 p-6 rounded-lg",
-                    isDisabled ? "opacity-50 cursor-not-allowed" : ""
-                ].join(" "),
-                src: imageSource,
-                alt: "uploaded or default"
-            }) : /*#__PURE__*/ jsx("div", {
-                id: "image-preview",
-                className: [
-                    "p-6 bg-gray-100 border-dashed border-2 border-gray-400 rounded-lg items-center mx-auto text-center",
-                    isDisabled ? "opacity-50 cursor-not-allowed" : ""
-                ].join(" "),
+    var type = (item === null || item === void 0 ? void 0 : item.imageStyleType) || "base";
+    return /*#__PURE__*/ jsxs(Fragment$1, {
+        children: [
+            type === "base" && /*#__PURE__*/ jsx("div", {
+                className: "bg-white rounded-lg shadow-md overflow-hidden items-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "px-4 py-6 h-56",
+                    children: imageSource ? /*#__PURE__*/ jsx("img", {
+                        className: [
+                            "w-full h-full object-contain border-dashed border-2 border-gray-400 p-6 rounded-lg",
+                            isDisabled ? "opacity-50 cursor-not-allowed" : ""
+                        ].join(" "),
+                        src: imageSource,
+                        alt: "uploaded or default"
+                    }) : /*#__PURE__*/ jsx("div", {
+                        id: "image-preview",
+                        className: [
+                            "p-6 bg-gray-100 border-dashed border-2 border-gray-400 rounded-lg items-center mx-auto text-center",
+                            isDisabled ? "opacity-50 cursor-not-allowed" : ""
+                        ].join(" "),
+                        children: /*#__PURE__*/ jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex justify-center",
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        icon: "material-symbols:upload",
+                                        width: "2.5rem",
+                                        height: "2.5rem"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "font-normal text-sm text-gray-400 py-4",
+                                    children: "圖片僅支援 png、jpg、jpeg"
+                                }),
+                                /*#__PURE__*/ jsx("h5", {
+                                    className: "mb-2 text-xl font-bold tracking-tight text-gray-700",
+                                    children: "上傳圖片"
+                                })
+                            ]
+                        })
+                    })
+                })
+            }),
+            type === "primary" && /*#__PURE__*/ jsx("div", {
+                className: "rounded-[22px] items-center",
                 children: /*#__PURE__*/ jsxs("div", {
+                    className: [
+                        "relative",
+                        (item === null || item === void 0 ? void 0 : item.className) || "w-80 lg:w-[364px] h-[330px]"
+                    ].join(" "),
                     children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: "flex justify-center",
-                            children: /*#__PURE__*/ jsx(Icon, {
-                                icon: "material-symbols:upload",
-                                width: "2.5rem",
-                                height: "2.5rem"
+                        field.value && /*#__PURE__*/ jsx("div", {
+                            className: "absolute -right-4 top-0",
+                            children: /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: function(e) {
+                                    e.stopPropagation();
+                                    field.onChange(null);
+                                },
+                                className: "text-xl w-9 h-9 font-bold border border-[#000000A6] text-[#000000A6] rounded-full bg-white flex items-center justify-center",
+                                children: "✕"
                             })
                         }),
-                        /*#__PURE__*/ jsx("p", {
-                            className: "font-normal text-sm text-gray-400 py-4",
-                            children: "圖片僅支援 png、jpg、jpeg"
-                        }),
-                        /*#__PURE__*/ jsx("h5", {
-                            className: "mb-2 text-xl font-bold tracking-tight text-gray-700",
-                            children: "上傳圖片"
+                        imageSource ? /*#__PURE__*/ jsx("img", {
+                            className: [
+                                "w-full h-full rounded-[22px]",
+                                isDisabled ? "opacity-50 cursor-not-allowed" : ""
+                            ].join(" "),
+                            src: imageSource,
+                            alt: "uploaded or default"
+                        }) : /*#__PURE__*/ jsx("div", {
+                            id: "image-preview",
+                            className: [
+                                "border-dashed border-2 border-[#17340929] rounded-[22px] flex items-center mx-auto justify-center",
+                                isDisabled ? "opacity-50 cursor-not-allowed" : "",
+                                (item === null || item === void 0 ? void 0 : item.className) || "w-80 lg:w-[364px] h-[330px]"
+                            ].join(" "),
+                            children: /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "flex justify-center",
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            icon: "fluent:image-32-filled",
+                                            width: "84",
+                                            height: "84",
+                                            color: "#C7C7CC"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "font-medium text-2xl text-[#777777] py-4",
+                                        children: "選擇檔案上傳"
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "flex justify-center",
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            className: "flex justify-center mb-6 py-3 px-6 bg-[#1A1A1A] text-white rounded-[22px] text-sm",
+                                            children: "上傳照片"
+                                        })
+                                    })
+                                ]
+                            })
                         })
                     ]
                 })
             })
-        })
+        ]
     });
 };
 
@@ -47236,9 +47694,22 @@ function _unsupported_iterable_to_array$d(o, minLen) {
 var CustomUpload = function(param) {
     var item = param.item, field = param.field;
     var imageMimeType = /image\/(png|jpg|jpeg)/i;
-    var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5120000;
+    var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = (item === null || item === void 0 ? void 0 : item.limitSize) || 5242880;
     var _useState = _sliced_to_array$a(useState(null), 2), modal = _useState[0], setModal = _useState[1];
     var hiddenFileInput = useRef(null);
+    useEffect(function() {
+        if (modal) {
+            document.body.style.overflow = "hidden"; // 鎖住背景 scroll
+        } else {
+            document.body.style.overflow = ""; // 恢復 scroll
+        }
+        // 當元件卸載時，也恢復 scroll
+        return function() {
+            document.body.style.overflow = "";
+        };
+    }, [
+        modal
+    ]);
     var handleImageClick = function() {
         var _hiddenFileInput_current;
         return (_hiddenFileInput_current = hiddenFileInput.current) === null || _hiddenFileInput_current === void 0 ? void 0 : _hiddenFileInput_current.click();
@@ -47249,14 +47720,18 @@ var CustomUpload = function(param) {
         if (!currentFile) return;
         if (!((_currentFile_type = currentFile.type) === null || _currentFile_type === void 0 ? void 0 : _currentFile_type.match(imageMimeType))) {
             setModal(/*#__PURE__*/ jsx(ErrorContent, {
-                setModal: setModal,
+                setModal: function() {
+                    return setModal(null);
+                },
                 errmsg: "圖片僅支援 png、jpg、jpeg!"
             }));
             return;
         }
         if (currentFile.size > DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES) {
             setModal(/*#__PURE__*/ jsx(ErrorContent, {
-                setModal: setModal,
+                setModal: function() {
+                    return setModal(null);
+                },
                 errmsg: /*#__PURE__*/ jsxs(Fragment$1, {
                     children: [
                         "檔案太大：",
@@ -47277,10 +47752,10 @@ var CustomUpload = function(param) {
     return /*#__PURE__*/ jsxs(Fragment$1, {
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: "mb-2",
                 children: /*#__PURE__*/ jsxs("button", {
                     className: [
-                        (item === null || item === void 0 ? void 0 : item.className) || "w-full"
+                        item === null || item === void 0 ? void 0 : item.className,
+                        "w-full"
                     ].join(" "),
                     type: "button",
                     onClick: handleImageClick,
@@ -47288,7 +47763,8 @@ var CustomUpload = function(param) {
                         /*#__PURE__*/ jsx(BaseTemplate, {
                             file: _instanceof$6(field.value, File) ? field.value : undefined,
                             imageUrl: previewUrl,
-                            item: item
+                            item: item,
+                            field: field
                         }),
                         /*#__PURE__*/ jsx("input", {
                             type: "file",
@@ -47301,7 +47777,7 @@ var CustomUpload = function(param) {
                     ]
                 })
             }),
-            !(item === null || item === void 0 ? void 0 : item.hiddenIcon) && field.value && /*#__PURE__*/ jsx("button", {
+            (item === null || item === void 0 ? void 0 : item.imageStyleType) !== "primary" && !(item === null || item === void 0 ? void 0 : item.hiddenIcon) && field.value && /*#__PURE__*/ jsx("button", {
                 type: "button",
                 className: "w-6 h-6 text-[#000]",
                 onClick: function() {
@@ -47410,7 +47886,7 @@ var SelectTrigger = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     return /*#__PURE__*/ jsxs(SelectPrimitive.Trigger, _object_spread_props$9(_object_spread$c({
         ref: ref,
-        className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className)
+        className: cn("flex h-9 w-full min-w-[8rem] items-center justify-between whitespace-nowrap rounded-2xl border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-[#1A1A1A] focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className)
     }, props), {
         children: [
             children,
@@ -47463,7 +47939,7 @@ var SelectContent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     return /*#__PURE__*/ jsx(SelectPrimitive.Portal, {
         children: /*#__PURE__*/ jsxs(SelectPrimitive.Content, _object_spread_props$9(_object_spread$c({
             ref: ref,
-            className: cn("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+            className: cn("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-2xl border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
             position: position
         }, props), {
             children: [
@@ -47495,7 +47971,7 @@ var SelectItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     return /*#__PURE__*/ jsxs(SelectPrimitive.Item, _object_spread_props$9(_object_spread$c({
         ref: ref,
-        className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
+        className: cn("relative flex w-full  cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
     }, props), {
         children: [
             /*#__PURE__*/ jsx("span", {
@@ -47537,7 +48013,7 @@ var optionSizeClassMap = {
 var BaseSelect = function(param) {
     var item = param.item;
     var _useFormContext = useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors;
-    var _item_className = item.className, className = _item_className === void 0 ? "" : _item_className, _item_size = item.size, size = _item_size === void 0 ? "md" : _item_size, _item_groupLabelColor = item.groupLabelColor, groupLabelColor = _item_groupLabelColor === void 0 ? "" : _item_groupLabelColor, _item_bgColor = item.bgColor, bgColor = _item_bgColor === void 0 ? "" : _item_bgColor, _item_optionHoverColor = item.optionHoverColor, optionHoverColor = _item_optionHoverColor === void 0 ? "" : _item_optionHoverColor, _item_optionSelectedBgColor = item.optionSelectedBgColor, optionSelectedBgColor = _item_optionSelectedBgColor === void 0 ? "" : _item_optionSelectedBgColor, _item_option = item.option, option = _item_option === void 0 ? [] : _item_option;
+    var _item_className = item.className, className = _item_className === void 0 ? "border border-[#B4B4B4]" : _item_className, _item_selectContentClassName = item.selectContentClassName, selectContentClassName = _item_selectContentClassName === void 0 ? "border border-[#B4B4B4]" : _item_selectContentClassName, _item_size = item.size, size = _item_size === void 0 ? "md" : _item_size, _item_groupLabelColor = item.groupLabelColor, groupLabelColor = _item_groupLabelColor === void 0 ? "" : _item_groupLabelColor, _item_bgColor = item.bgColor, bgColor = _item_bgColor === void 0 ? "" : _item_bgColor, _item_optionHoverColor = item.optionHoverColor, optionHoverColor = _item_optionHoverColor === void 0 ? "" : _item_optionHoverColor, _item_optionSelectedBgColor = item.optionSelectedBgColor, optionSelectedBgColor = _item_optionSelectedBgColor === void 0 ? "" : _item_optionSelectedBgColor, _item_option = item.option, option = _item_option === void 0 ? [] : _item_option;
     return /*#__PURE__*/ jsxs("div", {
         children: [
             /*#__PURE__*/ jsx(FieldLabel, {
@@ -47560,6 +48036,7 @@ var BaseSelect = function(param) {
                                 })
                             }),
                             /*#__PURE__*/ jsx(SelectContent, {
+                                className: selectContentClassName,
                                 children: option.map(function(item, index) {
                                     var _item_options, _item_options1;
                                     return "options" in item ? /*#__PURE__*/ jsxs(SelectGroup, {
@@ -47733,13 +48210,13 @@ var TextField = function(param) {
                             children: [
                                 /*#__PURE__*/ jsx("div", {
                                     className: [
-                                        validateMsg(errors, item) ? "rounded-lg" : ""
+                                        validateMsg(errors, item) ? "rounded-2xl" : ""
                                     ].join(" "),
                                     children: /*#__PURE__*/ jsx("input", _object_spread_props$8(_object_spread$b({
                                         type: item === null || item === void 0 ? void 0 : item.type,
                                         className: [
                                             isDisabled ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
-                                            "w-full h-11 rounded-lg customInput pr-4 border border-solid border-gray-300",
+                                            "w-full h-11 rounded-2xl customInput pr-4 border border-solid border-[#B4B4B4]",
                                             (item === null || item === void 0 ? void 0 : item.icon) ? "pl-14" : "pl-4"
                                         ].join(" "),
                                         placeholder: item === null || item === void 0 ? void 0 : item.placeholder
@@ -47768,7 +48245,7 @@ var TextField = function(param) {
                                         inputMode: "numeric",
                                         className: [
                                             isDisabled ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
-                                            "w-full h-11 rounded-lg customInput px-4 border border-solid border-gray-300 appearance-none"
+                                            "w-full h-11 rounded-2xl customInput px-4 border border-solid border-[#B4B4B4] appearance-none"
                                         ].join(" "),
                                         placeholder: item === null || item === void 0 ? void 0 : item.placeholder
                                     }, register(item === null || item === void 0 ? void 0 : item.name, _object_spread$b({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
@@ -47825,7 +48302,7 @@ var SingleSelect = function(param) {
                                 return /*#__PURE__*/ jsx("select", _object_spread_props$8(_object_spread$b(_object_spread_props$8(_object_spread$b({
                                     className: [
                                         (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
-                                        "customSelect w-full h-11 py-2 pr-4 rounded-lg border border-solid border-gray-300 pl-4"
+                                        "customSelect w-full h-11 py-2 pr-4 rounded-2xl border border-solid border-[#B4B4B4] pl-4"
                                     ].join(" "),
                                     style: item.style
                                 }, register(item.name, _object_spread$b({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
@@ -47968,7 +48445,7 @@ var Time = function(param) {
                     /*#__PURE__*/ jsx("input", _object_spread$b(_object_spread_props$8(_object_spread$b({
                         className: [
                             (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#0f172a]",
-                            "customTime border border-solid border-gray-300 px-3 py-2 rounded-lg w-full text-[16px]"
+                            "customTime border border-solid border-[#B4B4B4] px-3 py-2 rounded-2xl w-full text-[16px]"
                         ].join(" "),
                         type: (item === null || item === void 0 ? void 0 : item.type) || "time",
                         placeholder: "ex: 16:00"
@@ -48030,7 +48507,7 @@ var City = function(param) {
                         /*#__PURE__*/ jsx("select", _object_spread_props$8(_object_spread$b({
                             className: [
                                 (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f] cursor-pointer",
-                                "customSelect w-full h-11 py-2 pr-4 rounded-lg border border-solid border-gray-300 pl-4 mr-6"
+                                "customSelect w-full h-11 py-2 pr-4 rounded-2xl border border-solid border-[#B4B4B4] pl-4 mr-6"
                             ].join(" "),
                             style: item === null || item === void 0 ? void 0 : item.style
                         }, register(item.name, _object_spread$b({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
@@ -48269,28 +48746,41 @@ var Fields = function(param) {
 };
 var CustomUploadField = function(param) {
     var item = param.item;
-    var control = useFormContext().control;
+    var _useFormContext = useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors;
     return /*#__PURE__*/ jsx(Controller$2, {
         name: item === null || item === void 0 ? void 0 : item.name,
         control: control,
         rules: item === null || item === void 0 ? void 0 : item.validateOption,
         render: function(param) {
-            var field = param.field, fieldState = param.fieldState;
-            var _fieldState_error;
+            var field = param.field;
+            var _item_validateOption;
             return /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-1 flex-col gap-1",
+                className: "flex flex-1 flex-col mb-2",
                 children: [
-                    (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx("label", {
+                    (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsxs("label", {
                         className: "font-medium",
-                        children: item === null || item === void 0 ? void 0 : item.label
+                        children: [
+                            item === null || item === void 0 ? void 0 : item.label,
+                            (item === null || item === void 0 ? void 0 : (_item_validateOption = item.validateOption) === null || _item_validateOption === void 0 ? void 0 : _item_validateOption.required) && /*#__PURE__*/ jsx("span", {
+                                className: "text-red-600 font-bold",
+                                children: "*"
+                            })
+                        ]
+                    }),
+                    (item === null || item === void 0 ? void 0 : item.noticeLabel) && /*#__PURE__*/ jsx("div", {
+                        className: "text-[#777777] font-medium  pb-2",
+                        children: item === null || item === void 0 ? void 0 : item.noticeLabel
                     }),
                     /*#__PURE__*/ jsx(CustomUpload, {
                         item: item,
                         field: field
                     }),
-                    ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) && /*#__PURE__*/ jsx("p", {
-                        className: "text-red-500 text-sm",
-                        children: fieldState.error.message
+                    validateMsg(errors, item) && /*#__PURE__*/ jsxs("div", {
+                        className: "pt-1 text-xs text-[#EF5533]",
+                        children: [
+                            "*",
+                            validateMsg(errors, item)
+                        ]
                     })
                 ]
             });
@@ -78292,4 +78782,4 @@ var useLiffContext = function() {
     return context;
 };
 
-export { verifyId as A, BaseSwitch as B, Controller$2 as C, DropImage as D, verifyTaxId as E, FieldLabel as F, BigCalender as G, DnDCalendar as H, InputOTPs as I, CustomSelect as J, LiffProvider as K, LiffContext as L, useLiffContext as M, FormProvider as N, useForm as O, City as P, Textarea as Q, ReactDateRange as R, Spin as S, TabsPanel as T, UiLibrary as U, Fields as V, CustomUploadField as W, Row as X, Form as Y, __spreadArray as _, __read as a, __extends as b, __assign as c, __makeTemplateObject as d, __awaiter as e, __generator as f, commonjsGlobal as g, __values as h, getAugmentedNamespace as i, getDefaultExportFromCjs as j, DropDown as k, CustomUpload$1 as l, Switch as m, DateRangePicker as n, SingleDatePicker as o, propTypes$1 as p, Button as q, buttonVariants as r, StackCards as s, DataTable as t, useFormContext as u, validateMsg as v, BaseTable as w, Drawer as x, Regex as y, verifyTaiwanIdIntermediateString as z };
+export { CustomUploadField as $, verifyId as A, BaseSwitch as B, Controller$2 as C, DropImage as D, verifyTaxId as E, FieldLabel as F, BigCalender as G, DnDCalendar as H, InputOTPs as I, CustomSelect as J, LiffProvider as K, LiffContext as L, useLiffContext as M, FormProvider as N, useForm as O, useController as P, useFieldArray as Q, ReactDateRange as R, Spin as S, TabsPanel as T, UiLibrary as U, useFormState as V, useWatch as W, City as X, Textarea as Y, Fields as Z, __spreadArray as _, __read as a, Row as a0, Form as a1, __extends as b, __assign as c, __makeTemplateObject as d, __awaiter as e, __generator as f, commonjsGlobal as g, __values as h, getAugmentedNamespace as i, getDefaultExportFromCjs as j, DropDown as k, CustomUpload$1 as l, Switch as m, DateRangePicker as n, SingleDatePicker as o, propTypes$1 as p, Button as q, buttonVariants as r, StackCards as s, DataTable as t, useFormContext as u, validateMsg as v, BaseTable as w, Drawer as x, Regex as y, verifyTaiwanIdIntermediateString as z };