@akanjs/ui 0.0.151 → 0.0.153

package/cjs/Field.js

@@ -21,6 +21,7 @@ __export(Field_exports, {
   Field: () => Field
 });
 module.exports = __toCommonJS(Field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_client = require("@akanjs/client");
 var import_common = require("@akanjs/common");
@@ -35,7 +36,16 @@ var import_Input = require("./Input");
 var import_Select = require("./Select");
 var import_ToggleSelect = require("./ToggleSelect");
 const Label = ({ className, label, desc, unit, nullable, mode = "edit" }) => {
-  return /* @__PURE__ */ React.createElement("span", { className: (0, import_client.clsx)("flex shrink-0 items-center gap-1", className) }, (0, import_common.capitalize)(label), unit ? /* @__PURE__ */ React.createElement("span", { className: "animate-fadeIn" }, " (", unit, ")") : null, desc ? /* @__PURE__ */ React.createElement("span", { className: "tooltip tooltip-info tooltip-right", "data-tip": desc }, /* @__PURE__ */ React.createElement(import_bi.BiHelpCircle, null)) : null, nullable ? /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-400" }, "(optional)") : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: (0, import_client.clsx)("flex shrink-0 items-center gap-1", className), children: [
+    (0, import_common.capitalize)(label),
+    unit ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "animate-fadeIn", children: [
+      " (",
+      unit,
+      ")"
+    ] }) : null,
+    desc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tooltip tooltip-info tooltip-right", "data-tip": desc, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiHelpCircle, {}) }) : null,
+    nullable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-400", children: "(optional)" }) : null
+  ] });
 };
 const Field = ({
   className,
@@ -46,7 +56,10 @@ const Field = ({
   nullable,
   children
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("w-full", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("mt-2 flex w-full flex-col gap-4 px-4", containerClassName) }, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("w-full", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("mt-2 flex w-full flex-col gap-4 px-4", containerClassName), children })
+  ] });
 };
 Field.Label = Label;
 const List = ({
@@ -61,26 +74,40 @@ const List = ({
   renderItem
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex w-full flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex w-full flex-col gap-2 rounded-md border border-gray-300 p-2" }, value.map((item, idx) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex h-full w-full items-center justify-between gap-2" }, renderItem(item, idx), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 border-l border-gray-300 pl-2" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn btn-xs btn-error btn-square btn-outline",
-      onClick: () => {
-        onChange(value.filter((_, i) => i !== idx));
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_bi.BiTrash, null)
-  ))), /* @__PURE__ */ React.createElement("div", { className: "h-[0.5px] w-full bg-gray-300 px-2 last:h-0" }))), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn btn-outline",
-      onClick: () => {
-        onAdd();
-      }
-    },
-    "+ ",
-    l("shared.addModel", { model: l("appSubRoute.modelName") })
-  )));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex w-full flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex w-full flex-col gap-2 rounded-md border border-gray-300 p-2", children: [
+      value.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full w-full items-center justify-between gap-2", children: [
+          renderItem(item, idx),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2 border-l border-gray-300 pl-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              className: "btn btn-xs btn-error btn-square btn-outline",
+              onClick: () => {
+                onChange(value.filter((_, i) => i !== idx));
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiTrash, {})
+            }
+          ) })
+        ] }, idx),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[0.5px] w-full bg-gray-300 px-2 last:h-0" })
+      ] })),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: "btn btn-outline",
+          onClick: () => {
+            onAdd();
+          },
+          children: [
+            "+ ",
+            l("shared.addModel", { model: l("appSubRoute.modelName") })
+          ]
+        }
+      )
+    ] })
+  ] });
 };
 Field.List = List;
 const Text = ({
@@ -103,31 +130,34 @@ const Text = ({
   inputStyleType = "bordered"
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Input.Input,
-    {
-      cacheKey: cache ? `${label}-${desc}-text` : void 0,
-      inputStyleType,
-      value: value ?? "",
-      nullable,
-      placeholder,
-      onChange: (value2) => {
-        onChange(transform(value2));
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (text) => {
-        if (text.length < minlength)
-          return l("shared.textTooShortError", { minlength });
-        else if (text.length > maxlength)
-          return l("shared.textTooLongError", { maxlength });
-        else
-          return validate?.(text) ?? true;
-      },
-      onPressEnter
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input,
+      {
+        cacheKey: cache ? `${label}-${desc}-text` : void 0,
+        inputStyleType,
+        value: value ?? "",
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
 };
 Field.Text = (0, import_react.memo)(Text);
 //! 삭제
@@ -150,31 +180,34 @@ const Price = ({
   inputStyleType = "bordered"
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Input.Input,
-    {
-      inputStyleType,
-      value: value ?? "",
-      nullable,
-      placeholder: placeholder ?? `~ ${l("shared.priceUnit")}`,
-      onChange: (value2) => {
-        const withoutComma = value2.replace(/,/g, "").replace(/ /g, "");
-        onChange(transform(withoutComma));
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (text) => {
-        if (text.length < minlength)
-          return l("shared.textTooShortError", { minlength });
-        else if (text.length > maxlength)
-          return l("shared.textTooLongError", { maxlength });
-        else
-          return validate?.(text) ?? true;
-      },
-      onPressEnter
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input,
+      {
+        inputStyleType,
+        value: value ?? "",
+        nullable,
+        placeholder: placeholder ?? `~ ${l("shared.priceUnit")}`,
+        onChange: (value2) => {
+          const withoutComma = value2.replace(/,/g, "").replace(/ /g, "");
+          onChange(transform(withoutComma));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
 };
 Field.Price = (0, import_react.memo)(Price);
 const TextArea = ({
@@ -197,31 +230,34 @@ const TextArea = ({
   inputClassName
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Input.Input.TextArea,
-    {
-      value: value ?? "",
-      cacheKey: cache ? `${label}-${desc}-textArea` : void 0,
-      nullable,
-      placeholder,
-      onChange: (value2) => {
-        onChange(transform(value2));
-      },
-      disabled,
-      rows,
-      className: (0, import_client.clsx)("h-full w-full"),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (text) => {
-        if (text.length < minlength)
-          return l("shared.textTooShortError", { minlength });
-        else if (text.length > maxlength)
-          return l("shared.textTooLongError", { maxlength });
-        else
-          return validate?.(text) ?? true;
-      },
-      onPressEnter
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input.TextArea,
+      {
+        value: value ?? "",
+        cacheKey: cache ? `${label}-${desc}-textArea` : void 0,
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        rows,
+        className: (0, import_client.clsx)("h-full w-full"),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
 };
 Field.TextArea = (0, import_react.memo)(TextArea);
 const Switch = ({
@@ -236,18 +272,24 @@ const Switch = ({
   onDesc,
   offDesc
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: true, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "checkbox",
-      disabled,
-      className: (0, import_client.clsx)("toggle toggle-accent", inputClassName),
-      checked: value,
-      onChange: (e) => {
-        onChange(e.target.checked);
-      }
-    }
-  ), onDesc ?? offDesc ? /* @__PURE__ */ React.createElement("div", { className: "text-info text-sm" }, value ? onDesc : offDesc) : null));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable: true, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          disabled,
+          className: (0, import_client.clsx)("toggle toggle-accent", inputClassName),
+          checked: value,
+          onChange: (e) => {
+            onChange(e.target.checked);
+          }
+        }
+      ),
+      onDesc ?? offDesc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-info text-sm", children: value ? onDesc : offDesc }) : null
+    ] })
+  ] });
 };
 Field.Switch = Switch;
 const ToggleSelect = ({
@@ -267,26 +309,29 @@ const ToggleSelect = ({
 }) => {
   const { l } = (0, import_next.usePage)();
   const isEnum = items instanceof import_base.Enum;
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_ToggleSelect.ToggleSelect,
-    {
-      className: "mt-2",
-      nullable: !!nullable,
-      btnClassName,
-      items: model && field ? (isEnum ? items.values : items).map((item) => ({
-        label: l.enum(model, field, item),
-        value: item
-      })) : isEnum ? items.values : items,
-      value,
-      onChange: (value2, idx) => {
-        onChange(value2);
-      },
-      disabled,
-      validate: (value2) => {
-        return validate?.(value2) ?? true;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ToggleSelect.ToggleSelect,
+      {
+        className: "mt-2",
+        nullable: !!nullable,
+        btnClassName,
+        items: model && field ? (isEnum ? items.values : items).map((item) => ({
+          label: l.enum(model, field, item),
+          value: item
+        })) : isEnum ? items.values : items,
+        value,
+        onChange: (value2, idx) => {
+          onChange(value2);
+        },
+        disabled,
+        validate: (value2) => {
+          return validate?.(value2) ?? true;
+        }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.ToggleSelect = ToggleSelect;
 const MultiToggleSelect = ({
@@ -306,29 +351,32 @@ const MultiToggleSelect = ({
 }) => {
   const { l } = (0, import_next.usePage)();
   const isEnum = items instanceof import_base.Enum;
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !!minlength, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_ToggleSelect.ToggleSelect.Multi,
-    {
-      nullable: !minlength,
-      items: model && field ? (isEnum ? items.values : items).map((item) => ({
-        label: l.enum(model, field, item),
-        value: item
-      })) : isEnum ? items.values : items,
-      value,
-      onChange: (values) => {
-        onChange(values);
-      },
-      disabled,
-      validate: (value2) => {
-        if (minlength && value2.length < minlength)
-          return l("shared.selectTooShortError", { minlength });
-        else if (maxlength && value2.length > maxlength)
-          return l("shared.selectTooLongError", { maxlength });
-        else
-          return validate?.(value2) ?? true;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable: !!minlength, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ToggleSelect.ToggleSelect.Multi,
+      {
+        nullable: !minlength,
+        items: model && field ? (isEnum ? items.values : items).map((item) => ({
+          label: l.enum(model, field, item),
+          value: item
+        })) : isEnum ? items.values : items,
+        value,
+        onChange: (values) => {
+          onChange(values);
+        },
+        disabled,
+        validate: (value2) => {
+          if (minlength && value2.length < minlength)
+            return l("shared.selectTooShortError", { minlength });
+          else if (maxlength && value2.length > maxlength)
+            return l("shared.selectTooLongError", { maxlength });
+          else
+            return validate?.(value2) ?? true;
+        }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.MultiToggleSelect = MultiToggleSelect;
 const TextList = ({
@@ -350,48 +398,61 @@ const TextList = ({
   inputClassName
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "mb-5 h-full gap-2 rounded-md border border-gray-300 p-2" }, /* @__PURE__ */ React.createElement(import_DraggableList.DraggableList, { className: "h-full gap-2", onChange }, value.map((text, idx) => /* @__PURE__ */ React.createElement(import_DraggableList.DraggableList.Item, { key: idx, value: text }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement(import_DraggableList.DraggableList.Cursor, null, /* @__PURE__ */ React.createElement(import_md.MdDragIndicator, { className: "text-xl" })), /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-center gap-5" }, /* @__PURE__ */ React.createElement(
-    import_Input.Input,
-    {
-      value: text,
-      cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
-      onChange: (text2) => {
-        const newValue = [...value];
-        newValue[idx] = transform(text2);
-        onChange(newValue);
-      },
-      validate: (text2) => {
-        if (text2.length < minlength)
-          return l("shared.textTooShortError", { minlength: minTextlength });
-        else if (text2.length > maxlength)
-          return l("shared.textTooLongError", { maxlength: maxTextlength });
-        else
-          return validate?.(text2) ?? true;
-      },
-      className: (0, import_client.clsx)("w-full", inputClassName),
-      inputClassName: "w-full input-sm",
-      placeholder,
-      disabled
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn btn-xs btn-error btn-square btn-outline",
-      onClick: () => {
-        onChange(value.filter((_, i) => i !== idx));
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_bi.BiTrash, null)
-  )))))), /* @__PURE__ */ React.createElement("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }), value.length <= maxTextlength ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn btn-outline w-full",
-      onClick: () => {
-        onChange([...value, ""]);
-      }
-    },
-    "+ New"
-  ) : null));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-5 h-full gap-2 rounded-md border border-gray-300 p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList, { className: "h-full gap-2", onChange, children: value.map((text, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList.Item, { value: text, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList.Cursor, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_md.MdDragIndicator, { className: "text-xl" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center justify-center gap-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Input.Input,
+            {
+              value: text,
+              cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
+              onChange: (text2) => {
+                const newValue = [...value];
+                newValue[idx] = transform(text2);
+                onChange(newValue);
+              },
+              validate: (text2) => {
+                if (text2.length < minlength)
+                  return l("shared.textTooShortError", { minlength: minTextlength });
+                else if (text2.length > maxlength)
+                  return l("shared.textTooLongError", { maxlength: maxTextlength });
+                else
+                  return validate?.(text2) ?? true;
+              },
+              className: (0, import_client.clsx)("w-full", inputClassName),
+              inputClassName: "w-full input-sm",
+              placeholder,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              className: "btn btn-xs btn-error btn-square btn-outline",
+              onClick: () => {
+                onChange(value.filter((_, i) => i !== idx));
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiTrash, {})
+            }
+          )
+        ] })
+      ] }) }, idx)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }),
+      value.length <= maxTextlength ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "btn btn-outline w-full",
+          onClick: () => {
+            onChange([...value, ""]);
+          },
+          children: "+ New"
+        }
+      ) : null
+    ] })
+  ] });
 };
 Field.TextList = TextList;
 const Tags = ({
@@ -421,55 +482,67 @@ const Tags = ({
     setInputVisible(false);
     setTag("");
   };
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "border-base-content/20 flex w-full flex-wrap items-center gap-1 rounded-md border p-2" }, value.map((val, idx) => /* @__PURE__ */ React.createElement("span", { className: "badge badge-outline items-center rounded-full text-xs", key: idx }, /* @__PURE__ */ React.createElement("div", { className: "text-xs italic" }, "#"), val, /* @__PURE__ */ React.createElement(
-    import_bi.BiX,
-    {
-      className: "ml-1 cursor-pointer opacity-50 duration-200 hover:opacity-100",
-      onClick: () => {
-        if (!disabled)
-          onChange(value.filter((v, i) => i !== idx));
-      }
-    }
-  ))), inputVisible ? /* @__PURE__ */ React.createElement(
-    import_Input.Input,
-    {
-      autoFocus: true,
-      icon: /* @__PURE__ */ React.createElement("div", { className: "text-xs italic" }, "#"),
-      className: "h-6 w-24 items-center justify-start rounded-full border px-4",
-      inputClassName: "focus:border-0 border-0 bg-transparent text-xs h-full w-full",
-      placeholder,
-      value: tag,
-      onChange: (value2) => {
-        if (value2.length > maxTextlength)
-          return;
-        setTag(transform(value2));
-      },
-      onBlur: addTag,
-      onPressEnter: addTag,
-      onPressEscape: () => {
-        setInputVisible(false);
-        setTag("");
-      },
-      validate: (text) => {
-        if (text.length < minTextlength)
-          return l("shared.textTooShortError", { minlength: minTextlength });
-        else if (text.length > maxTextlength)
-          return l("shared.textTooLongError", { maxlength: maxTextlength });
-        else
-          return validate?.(text) ?? true;
-      }
-    }
-  ) : !disabled ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "bg-success text-success-content flex items-center gap-2 rounded-full px-2 py-1 text-xs duration-200 hover:cursor-pointer hover:opacity-80",
-      onClick: () => {
-        setInputVisible(true);
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_ai.AiOutlinePlus, null),
-    "New Tag"
-  ) : null));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-base-content/20 flex w-full flex-wrap items-center gap-1 rounded-md border p-2", children: [
+      value.map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "badge badge-outline items-center rounded-full text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs italic", children: "#" }),
+        val,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_bi.BiX,
+          {
+            className: "ml-1 cursor-pointer opacity-50 duration-200 hover:opacity-100",
+            onClick: () => {
+              if (!disabled)
+                onChange(value.filter((v, i) => i !== idx));
+            }
+          }
+        )
+      ] }, idx)),
+      inputVisible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input,
+        {
+          autoFocus: true,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs italic", children: "#" }),
+          className: "h-6 w-24 items-center justify-start rounded-full border px-4",
+          inputClassName: "focus:border-0 border-0 bg-transparent text-xs h-full w-full",
+          placeholder,
+          value: tag,
+          onChange: (value2) => {
+            if (value2.length > maxTextlength)
+              return;
+            setTag(transform(value2));
+          },
+          onBlur: addTag,
+          onPressEnter: addTag,
+          onPressEscape: () => {
+            setInputVisible(false);
+            setTag("");
+          },
+          validate: (text) => {
+            if (text.length < minTextlength)
+              return l("shared.textTooShortError", { minlength: minTextlength });
+            else if (text.length > maxTextlength)
+              return l("shared.textTooLongError", { maxlength: maxTextlength });
+            else
+              return validate?.(text) ?? true;
+          }
+        }
+      ) : !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "bg-success text-success-content flex items-center gap-2 rounded-full px-2 py-1 text-xs duration-200 hover:cursor-pointer hover:opacity-80",
+          onClick: () => {
+            setInputVisible(true);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlinePlus, {}),
+            "New Tag"
+          ]
+        }
+      ) : null
+    ] })
+  ] });
 };
 Field.Tags = Tags;
 const Date = ({
@@ -485,22 +558,25 @@ const Date = ({
   showTime,
   dateClassName
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: showTime ? "datetime-local" : "date",
-      className: (0, import_client.clsx)(
-        "input validator text-xs duration-200 outline-none focus-within:outline-none focus:outline-none",
-        dateClassName
-      ),
-      min: min ? showTime ? (0, import_base.dayjs)(min).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(min).format("YYYY-MM-DD") : void 0,
-      max: max ? showTime ? (0, import_base.dayjs)(max).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(max).format("YYYY-MM-DD") : void 0,
-      value: value ? showTime ? (0, import_base.dayjs)(value).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(value).format("YYYY-MM-DD") : "",
-      onChange: (e) => {
-        onChange((0, import_base.dayjs)(e.target.value));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: showTime ? "datetime-local" : "date",
+        className: (0, import_client.clsx)(
+          "input validator text-xs duration-200 outline-none focus-within:outline-none focus:outline-none",
+          dateClassName
+        ),
+        min: min ? showTime ? (0, import_base.dayjs)(min).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(min).format("YYYY-MM-DD") : void 0,
+        max: max ? showTime ? (0, import_base.dayjs)(max).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(max).format("YYYY-MM-DD") : void 0,
+        value: value ? showTime ? (0, import_base.dayjs)(value).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(value).format("YYYY-MM-DD") : "",
+        onChange: (e) => {
+          onChange((0, import_base.dayjs)(e.target.value));
+        }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.Date = Date;
 const DateRange = ({
@@ -518,33 +594,45 @@ const DateRange = ({
   onChange,
   showTime
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start gap-2 pt-2 text-center md:flex-row md:items-center" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start justify-start" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light" }, "From"), /* @__PURE__ */ React.createElement(
-    Date,
-    {
-      className: "w-full",
-      dateClassName: "w-full",
-      showTime,
-      value: from,
-      max,
-      min,
-      onChange: (value) => {
-        onChangeFrom(value);
-      }
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start gap-2 text-center md:flex-row md:items-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light" }, "To"), /* @__PURE__ */ React.createElement(
-    Date,
-    {
-      className: "w-full",
-      dateClassName: "w-full",
-      showTime,
-      value: to,
-      max,
-      min,
-      onChange: (value) => {
-        onChangeTo(value);
-      }
-    }
-  ))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex w-full flex-col items-start gap-2 pt-2 text-center md:flex-row md:items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex w-full flex-col items-start justify-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light", children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Date,
+          {
+            className: "w-full",
+            dateClassName: "w-full",
+            showTime,
+            value: from,
+            max,
+            min,
+            onChange: (value) => {
+              onChangeFrom(value);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex w-full flex-col items-start gap-2 text-center md:flex-row md:items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light", children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Date,
+          {
+            className: "w-full",
+            dateClassName: "w-full",
+            showTime,
+            value: to,
+            max,
+            min,
+            onChange: (value) => {
+              onChangeTo(value);
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
 };
 Field.DateRange = DateRange;
 const Number = ({
@@ -569,34 +657,37 @@ const Number = ({
   parser
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc, unit }) : null, /* @__PURE__ */ React.createElement(
-    import_Input.Input.Number,
-    {
-      min,
-      max,
-      cacheKey: cache ? `${label}-${desc}-number` : void 0,
-      value,
-      nullable,
-      formatter,
-      parser,
-      placeholder,
-      onChange: (value2) => {
-        onChange(transform(value2 ?? 0));
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)(" w-full", inputClassName),
-      validate: (value2) => {
-        if (min !== void 0 && value2 < min)
-          return l("shared.numberTooSmallError", { min });
-        else if (max !== void 0 && value2 > max)
-          return l("shared.numberTooBigError", { max });
-        else
-          return validate?.(value2) ?? true;
-      },
-      onPressEnter
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc, unit }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input.Number,
+      {
+        min,
+        max,
+        cacheKey: cache ? `${label}-${desc}-number` : void 0,
+        value,
+        nullable,
+        formatter,
+        parser,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2 ?? 0));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)(" w-full", inputClassName),
+        validate: (value2) => {
+          if (min !== void 0 && value2 < min)
+            return l("shared.numberTooSmallError", { min });
+          else if (max !== void 0 && value2 > max)
+            return l("shared.numberTooBigError", { max });
+          else
+            return validate?.(value2) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
 };
 Field.Number = Number;
 const DoubleNumber = ({
@@ -619,55 +710,62 @@ const DoubleNumber = ({
   onPressEnter
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    import_Input.Input.Number,
-    {
-      value: value ? value[0] : 0,
-      nullable,
-      cacheKey: cache ? `${label}-${desc}-number-[0]` : void 0,
-      placeholder,
-      onChange: (num) => {
-        if (num === null)
-          return;
-        onChange([transform(num), value ? value[1] : 0]);
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (value2) => {
-        if (min && value2 < min[0])
-          return l("shared.numberTooSmallError", { min: min[0] });
-        else if (max && value2 > max[0])
-          return l("shared.numberTooBigError", { max: max[0] });
-        else
-          return validate?.(value2) ?? true;
-      },
-      onPressEnter
-    }
-  ), separator, /* @__PURE__ */ React.createElement(
-    import_Input.Input.Number,
-    {
-      cacheKey: cache ? `${label}-${desc}-number-[1]` : void 0,
-      value: value ? value[1] : 0,
-      nullable,
-      placeholder,
-      onChange: (num) => {
-        onChange([value ? value[0] : 0, transform(num ?? 0)]);
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (value2) => {
-        if (min && value2 < min[1])
-          return l("shared.numberTooSmallError", { min: min[1] });
-        else if (max && value2 > max[1])
-          return l("shared.numberTooBigError", { max: max[1] });
-        else
-          return validate?.(value2) ?? true;
-      },
-      onPressEnter
-    }
-  )));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Number,
+        {
+          value: value ? value[0] : 0,
+          nullable,
+          cacheKey: cache ? `${label}-${desc}-number-[0]` : void 0,
+          placeholder,
+          onChange: (num) => {
+            if (num === null)
+              return;
+            onChange([transform(num), value ? value[1] : 0]);
+          },
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (value2) => {
+            if (min && value2 < min[0])
+              return l("shared.numberTooSmallError", { min: min[0] });
+            else if (max && value2 > max[0])
+              return l("shared.numberTooBigError", { max: max[0] });
+            else
+              return validate?.(value2) ?? true;
+          },
+          onPressEnter
+        }
+      ),
+      separator,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Number,
+        {
+          cacheKey: cache ? `${label}-${desc}-number-[1]` : void 0,
+          value: value ? value[1] : 0,
+          nullable,
+          placeholder,
+          onChange: (num) => {
+            onChange([value ? value[0] : 0, transform(num ?? 0)]);
+          },
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (value2) => {
+            if (min && value2 < min[1])
+              return l("shared.numberTooSmallError", { min: min[1] });
+            else if (max && value2 > max[1])
+              return l("shared.numberTooBigError", { max: max[1] });
+            else
+              return validate?.(value2) ?? true;
+          },
+          onPressEnter
+        }
+      )
+    ] })
+  ] });
 };
 Field.DoubleNumber = DoubleNumber;
 const Email = ({
@@ -690,31 +788,34 @@ const Email = ({
   inputStyleType
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Input.Input.Email,
-    {
-      value: value ?? "",
-      cacheKey: cache ? `${label}-${desc}-email` : void 0,
-      nullable,
-      placeholder,
-      onChange: (value2) => {
-        onChange(transform(value2));
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      inputStyleType,
-      validate: (text) => {
-        if (text.length < minlength)
-          return l("shared.textTooShortError", { minlength });
-        else if (text.length > maxlength)
-          return l("shared.textTooLongError", { maxlength });
-        else
-          return validate?.(text) ?? true;
-      },
-      onPressEnter
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input.Email,
+      {
+        value: value ?? "",
+        cacheKey: cache ? `${label}-${desc}-email` : void 0,
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        inputStyleType,
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
 };
 Field.Email = Email;
 const Phone = ({
@@ -735,29 +836,32 @@ const Phone = ({
   inputClassName
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Input.Input,
-    {
-      value: value ?? "",
-      cacheKey: cache ? `${label}-${desc}-phone` : void 0,
-      nullable,
-      placeholder,
-      onChange: (value2) => {
-        onChange(transform(value2));
-      },
-      disabled,
-      maxLength: maxlength,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (text) => {
-        if (!(0, import_common.isPhoneNumber)(text))
-          return l("util.phoneInvalidError");
-        else
-          return validate?.(text) ?? true;
-      },
-      onPressEnter
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input,
+      {
+        value: value ?? "",
+        cacheKey: cache ? `${label}-${desc}-phone` : void 0,
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        maxLength: maxlength,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (!(0, import_common.isPhoneNumber)(text))
+            return l("util.phoneInvalidError");
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
 };
 Field.Phone = Phone;
 const Password = ({
@@ -782,48 +886,54 @@ const Password = ({
   showConfirm
 }) => {
   const { l } = (0, import_next.usePage)();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement(
-    import_Input.Input.Password,
-    {
-      cacheKey: cache ? `${label}-${desc}-password` : void 0,
-      value: value ?? "",
-      nullable,
-      placeholder: placeholder ?? l("user.password"),
-      onChange: (value2) => {
-        onChange(transform(value2));
-      },
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (text) => {
-        if (text.length < minlength)
-          return l("shared.textTooShortError", { minlength });
-        else if (text.length > maxlength)
-          return l("shared.textTooLongError", { maxlength });
-        else
-          return validate?.(text) ?? true;
-      },
-      onPressEnter
-    }
-  ), showConfirm ? /* @__PURE__ */ React.createElement(
-    import_Input.Input.Password,
-    {
-      value: confirmValue ?? "",
-      nullable,
-      placeholder: l("user.passwordConfirm"),
-      onChange: (value2) => onChangeConfirm?.(transform(value2)),
-      disabled,
-      className: (0, import_client.clsx)("w-full", ""),
-      inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
-      validate: (text) => {
-        if (value && text !== value)
-          return l("shared.passwordNotMatchError");
-        else
-          return true;
-      },
-      onPressEnter
-    }
-  ) : null));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Password,
+        {
+          cacheKey: cache ? `${label}-${desc}-password` : void 0,
+          value: value ?? "",
+          nullable,
+          placeholder: placeholder ?? l("user.password"),
+          onChange: (value2) => {
+            onChange(transform(value2));
+          },
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (text) => {
+            if (text.length < minlength)
+              return l("shared.textTooShortError", { minlength });
+            else if (text.length > maxlength)
+              return l("shared.textTooLongError", { maxlength });
+            else
+              return validate?.(text) ?? true;
+          },
+          onPressEnter
+        }
+      ),
+      showConfirm ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Password,
+        {
+          value: confirmValue ?? "",
+          nullable,
+          placeholder: l("user.passwordConfirm"),
+          onChange: (value2) => onChangeConfirm?.(transform(value2)),
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (text) => {
+            if (value && text !== value)
+              return l("shared.passwordNotMatchError");
+            else
+              return true;
+          },
+          onPressEnter
+        }
+      ) : null
+    ] })
+  ] });
 };
 Field.Password = Password;
 const Parent = ({
@@ -861,42 +971,45 @@ const Parent = ({
   };
   const modelList = storeUse[namesOfSlice.modelList]();
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Select.Select,
-    {
-      label,
-      desc,
-      labelClassName,
-      selectClassName,
-      value: value?.id,
-      searchable: true,
-      options: modelList.map((model) => model.id),
-      renderOption: (modelId) => {
-        const model = modelList.get(modelId);
-        if (!model)
-          return null;
-        return renderOption(model);
-      },
-      renderSelected: (modelId) => {
-        const model = modelList.get(modelId);
-        if (!model)
-          return null;
-        return renderSelected(model);
-      },
-      onChange: (modelId) => {
-        onChange(modelList.get(modelId));
-      },
-      onOpen: () => {
-        if (!disabled)
-          void storeDo[namesOfSlice.initModel](...initArgs ?? []);
-      },
-      onSearch: (text) => {
-        if (text) {
-          onSearch?.(text);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        label,
+        desc,
+        labelClassName,
+        selectClassName,
+        value: value?.id,
+        searchable: true,
+        options: modelList.map((model) => model.id),
+        renderOption: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderOption(model);
+        },
+        renderSelected: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderSelected(model);
+        },
+        onChange: (modelId) => {
+          onChange(modelList.get(modelId));
+        },
+        onOpen: () => {
+          if (!disabled)
+            void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
         }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.Parent = Parent;
 const ParentId = ({
@@ -934,42 +1047,45 @@ const ParentId = ({
   };
   const modelList = storeUse[namesOfSlice.modelList]();
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Select.Select,
-    {
-      searchable: true,
-      desc,
-      label,
-      labelClassName,
-      selectClassName,
-      value,
-      options: modelList.map((model) => ({ label: model.id, value: model.id })),
-      renderOption: (renderId) => {
-        const model = modelList.get(renderId);
-        if (!model)
-          return null;
-        return renderOption?.(model);
-      },
-      renderSelected: (renderId) => {
-        const model = modelList.get(renderId);
-        if (!model)
-          return null;
-        return renderSelected?.(model);
-      },
-      onOpen: () => {
-        if (!disabled)
-          void storeDo[namesOfSlice.initModel](...initArgs ?? []);
-      },
-      onChange: (modelId) => {
-        onChange(modelId, modelList.get(modelId));
-      },
-      onSearch: (text) => {
-        if (text) {
-          onSearch?.(text);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        searchable: true,
+        desc,
+        label,
+        labelClassName,
+        selectClassName,
+        value,
+        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        renderOption: (renderId) => {
+          const model = modelList.get(renderId);
+          if (!model)
+            return null;
+          return renderOption?.(model);
+        },
+        renderSelected: (renderId) => {
+          const model = modelList.get(renderId);
+          if (!model)
+            return null;
+          return renderSelected?.(model);
+        },
+        onOpen: () => {
+          if (!disabled)
+            void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+        },
+        onChange: (modelId) => {
+          onChange(modelId, modelList.get(modelId));
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
         }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.ParentId = ParentId;
 const Children = ({
@@ -1011,39 +1127,42 @@ const Children = ({
     if (!disabled)
       void storeDo[namesOfSlice.initModel](...initArgs ?? []);
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Select.Select,
-    {
-      searchable: true,
-      desc,
-      label,
-      labelClassName,
-      selectClassName,
-      multiple: true,
-      value: value.map((model) => model.id),
-      options: modelList.map((model) => model.id),
-      renderOption: (modelId) => {
-        const model = modelList.get(modelId);
-        if (!model)
-          return null;
-        return renderOption(model);
-      },
-      renderSelected: (modelId) => {
-        const model = modelList.get(modelId);
-        if (!model)
-          return null;
-        return renderSelected(model);
-      },
-      onChange: (modelIds) => {
-        onChange(modelIds.map((id) => modelList.get(id)).filter((model) => model !== void 0));
-      },
-      onSearch: (text) => {
-        if (text) {
-          onSearch?.(text);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        searchable: true,
+        desc,
+        label,
+        labelClassName,
+        selectClassName,
+        multiple: true,
+        value: value.map((model) => model.id),
+        options: modelList.map((model) => model.id),
+        renderOption: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderOption(model);
+        },
+        renderSelected: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderSelected(model);
+        },
+        onChange: (modelIds) => {
+          onChange(modelIds.map((id) => modelList.get(id)).filter((model) => model !== void 0));
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
         }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.Children = Children;
 const ChildrenId = ({
@@ -1079,31 +1198,34 @@ const ChildrenId = ({
   };
   const modelList = storeUse[namesOfSlice.modelList]();
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
-    import_Select.Select,
-    {
-      searchable: true,
-      desc,
-      label,
-      labelClassName,
-      multiple: true,
-      value,
-      options: modelList.map((model) => ({ label: model.id, value: model.id })),
-      renderOption: (renderId) => {
-        const model = modelList.get(renderId);
-        if (!model)
-          return null;
-        return renderOption(model);
-      },
-      onChange: (modelIds) => {
-        onChange(modelIds);
-      },
-      onSearch: (text) => {
-        if (text) {
-          onSearch?.(text);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        searchable: true,
+        desc,
+        label,
+        labelClassName,
+        multiple: true,
+        value,
+        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        renderOption: (renderId) => {
+          const model = modelList.get(renderId);
+          if (!model)
+            return null;
+          return renderOption(model);
+        },
+        onChange: (modelIds) => {
+          onChange(modelIds);
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
         }
       }
-    }
-  ));
+    )
+  ] });
 };
 Field.ChildrenId = ChildrenId;