@akanjs/ui 0.0.151 → 0.0.152

package/cjs/Select.js

@@ -21,6 +21,7 @@ __export(Select_exports, {
   Select: () => Select
 });
 module.exports = __toCommonJS(Select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
@@ -116,147 +117,167 @@ const Select = ({
     else
       setSelectedValues([value]);
   }, [value]);
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("relative min-w-[150px]", className), ref: dropdownRef }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-open": isOpen,
-      className: (0, import_client.clsx)(
-        "btn flex h-auto min-h-[40px] w-full cursor-pointer items-center px-0 py-1 pr-5 pl-1 focus:outline-hidden",
-        "bg-base-100 data-[open=true]:border-primary",
-        disabled && "cursor-not-allowed opacity-50",
-        selectClassName,
-        { "border-base-300": isOpen }
-      ),
-      onClick: () => {
-        setIsOpen(!isOpen);
-      }
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex w-full flex-wrap items-center gap-1" }, multiple ? /* @__PURE__ */ React.createElement(React.Fragment, null, value.map((v, index) => {
-      const optionValue = labeledOptions.find((option) => option.value === v);
-      if (!optionValue)
-        return null;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: index,
-          className: "bg-success/70 text-success-content flex items-center gap-2 rounded-lg px-2 py-1 text-xs"
-        },
-        renderSelected ? renderSelected(optionValue.value) : optionValue.label,
-        /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onSelect(optionValue.value, index);
-            },
-            className: "opacity-50 duration-300 hover:opacity-100"
-          },
-          /* @__PURE__ */ React.createElement(import_bi.BiX, { className: "text-base" })
-        )
-      );
-    })) : /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1" }, value ? /* @__PURE__ */ React.createElement(React.Fragment, null, (() => {
-      const optionValue = searchOptions.find((option) => selected(option.value));
-      if (!optionValue)
-        return null;
-      return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
-    })()) : ""), searchable && /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "text",
-        className: "input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none",
-        placeholder: selectedValues.length > 0 ? "" : placeholder,
-        value: searchText,
-        onChange: (e) => {
-          if (!isOpen)
-            setIsOpen(true);
-          if (!onSearch)
-            setSearchOptions(
-              labeledOptions.filter(
-                (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
-              )
-            );
-          setSearchText(e.target.value);
-          debouncedOnSearch(e.target.value);
-        },
-        onClick: (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          setIsOpen(!isOpen);
-        }
-      }
-    )),
-    multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ React.createElement(
-      import_ti.TiDelete,
-      {
-        className: "absolute right-8 z-[2] h-full text-lg duration-300 hover:cursor-pointer hover:opacity-50",
-        onClick: (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          setSearchText("");
-          setSelectedValues([]);
-          if (multiple)
-            onChange([], selectedValues);
-          else
-            onChange(null, selectedValues[0]);
-          setIsOpen(false);
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ React.createElement(
-      import_bi.BiChevronDown,
-      {
-        className: (0, import_client.clsx)("absolute top-1/2 right-2 -translate-y-1/2 text-lg duration-100", { "rotate-180": isOpen })
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-open": isOpen,
-      className: (0, import_client.clsx)(
-        "scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track scrollbar-track-base-content/40 bg-base-200 border-base-300 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md shadow-lg transition-all",
-        "origin-center duration-200 data-[open=false]:h-0 data-[open=false]:border-none data-[open=true]:h-[270px] data-[open=true]:border",
-        selectorClassName
-      )
-    },
-    nullable && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("relative min-w-[150px]", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: "cursor-pointer p-2",
+        "data-open": isOpen,
+        className: (0, import_client.clsx)(
+          "btn flex h-auto min-h-[40px] w-full cursor-pointer items-center px-0 py-1 pr-5 pl-1 focus:outline-hidden",
+          "bg-base-100 data-[open=true]:border-primary",
+          disabled && "cursor-not-allowed opacity-50",
+          selectClassName,
+          { "border-base-300": isOpen }
+        ),
         onClick: () => {
-          setIsOpen(false);
-        }
+          setIsOpen(!isOpen);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex w-full flex-wrap items-center gap-1", children: [
+            multiple ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: value.map((v, index) => {
+              const optionValue = labeledOptions.find((option) => option.value === v);
+              if (!optionValue)
+                return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "bg-success/70 text-success-content flex items-center gap-2 rounded-lg px-2 py-1 text-xs",
+                  children: [
+                    renderSelected ? renderSelected(optionValue.value) : optionValue.label,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          onSelect(optionValue.value, index);
+                        },
+                        className: "opacity-50 duration-300 hover:opacity-100",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiX, { className: "text-base" })
+                      }
+                    )
+                  ]
+                },
+                index
+              );
+            }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-2 py-1", children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (() => {
+              const optionValue = searchOptions.find((option) => selected(option.value));
+              if (!optionValue)
+                return null;
+              return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
+            })() }) : "" }),
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "text",
+                className: "input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none",
+                placeholder: selectedValues.length > 0 ? "" : placeholder,
+                value: searchText,
+                onChange: (e) => {
+                  if (!isOpen)
+                    setIsOpen(true);
+                  if (!onSearch)
+                    setSearchOptions(
+                      labeledOptions.filter(
+                        (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
+                      )
+                    );
+                  setSearchText(e.target.value);
+                  debouncedOnSearch(e.target.value);
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setIsOpen(!isOpen);
+                }
+              }
+            )
+          ] }),
+          multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ti.TiDelete,
+            {
+              className: "absolute right-8 z-[2] h-full text-lg duration-300 hover:cursor-pointer hover:opacity-50",
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setSearchText("");
+                setSelectedValues([]);
+                if (multiple)
+                  onChange([], selectedValues);
+                else
+                  onChange(null, selectedValues[0]);
+                setIsOpen(false);
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_bi.BiChevronDown,
+            {
+              className: (0, import_client.clsx)("absolute top-1/2 right-2 -translate-y-1/2 text-lg duration-100", { "rotate-180": isOpen })
+            }
+          )
+        ]
       }
     ),
-    searchOptions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, searchOptions.map((option, index) => {
-      const isSelected = selected(option.value);
-      return /* @__PURE__ */ React.createElement("div", { key: index, className: "group" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: (0, import_client.clsx)(
-            "hover:bg-base-300 relative m-2 cursor-pointer rounded-sm p-2 duration-100 last:border-b-0",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        "data-open": isOpen,
+        className: (0, import_client.clsx)(
+          "scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track scrollbar-track-base-content/40 bg-base-200 border-base-300 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md shadow-lg transition-all",
+          "origin-center duration-200 data-[open=false]:h-0 data-[open=false]:border-none data-[open=true]:h-[270px] data-[open=true]:border",
+          selectorClassName
+        ),
+        children: [
+          nullable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
             {
-              selectedClassName: !multiple && isSelected,
-              "bg-success/70 text-success-content": isSelected
+              className: "cursor-pointer p-2",
+              onClick: () => {
+                setIsOpen(false);
+              }
             }
           ),
-          onClick: () => {
-            onSelect(option.value, index);
-            setSearchText("");
-          }
-        },
-        renderOption ? renderOption(option.value) : option.label,
-        /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("absolute top-1/2 right-2 -translate-y-1/2 flex-wrap duration-200", {}) }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: (0, import_client.clsx)("duration-200", {
-              "translate-y-0 opacity-100": isSelected,
-              "-translate-y-full opacity-0": !isSelected
-            })
-          },
-          /* @__PURE__ */ React.createElement(import_bi.BiCheck, null)
-        ))
-      ), /* @__PURE__ */ React.createElement("div", { className: "h-px w-full px-2 group-last:hidden" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-content/10 size-full" })));
-    })) : /* @__PURE__ */ React.createElement("div", { className: "text-base-content/50 flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl" }, /* @__PURE__ */ React.createElement(import_bs.BsQuestionCircleFill, null), /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, l("shared.noOptions")))
-  ));
+          searchOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: searchOptions.map((option, index) => {
+            const isSelected = selected(option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: (0, import_client.clsx)(
+                    "hover:bg-base-300 relative m-2 cursor-pointer rounded-sm p-2 duration-100 last:border-b-0",
+                    {
+                      selectedClassName: !multiple && isSelected,
+                      "bg-success/70 text-success-content": isSelected
+                    }
+                  ),
+                  onClick: () => {
+                    onSelect(option.value, index);
+                    setSearchText("");
+                  },
+                  children: [
+                    renderOption ? renderOption(option.value) : option.label,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("absolute top-1/2 right-2 -translate-y-1/2 flex-wrap duration-200", {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_client.clsx)("duration-200", {
+                          "translate-y-0 opacity-100": isSelected,
+                          "-translate-y-full opacity-0": !isSelected
+                        }),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiCheck, {})
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px w-full px-2 group-last:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-content/10 size-full" }) })
+            ] }, index);
+          }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-base-content/50 flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bs.BsQuestionCircleFill, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm", children: l("shared.noOptions") })
+          ] })
+        ]
+      }
+    )
+  ] });
 };

package/cjs/Signal/Arg.js

@@ -31,6 +31,7 @@ __export(Arg_exports, {
   default: () => Arg
 });
 module.exports = __toCommonJS(Arg_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_constant = require("@akanjs/constant");
 var import_next = require("@akanjs/next");
@@ -40,7 +41,7 @@ var import_DatePicker = require("../DatePicker");
 var import_Input = require("../Input");
 var import_Object = __toESM(require("./Object"));
 function Arg({ argType, value, onChange }) {
-  return argType === "ID" ? /* @__PURE__ */ React.createElement(Arg.ID, { value, onChange }) : argType === "Int" ? /* @__PURE__ */ React.createElement(Arg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ React.createElement(Arg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ React.createElement(Arg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ React.createElement(Arg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ React.createElement(Arg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ React.createElement(Arg.Json, { value, onChange }) : argType === "Upload" ? /* @__PURE__ */ React.createElement(Arg.Upload, { value, onChange }) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return argType === "ID" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.ID, { value, onChange }) : argType === "Int" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.Json, { value, onChange }) : argType === "Upload" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg.Upload, { value, onChange }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 }
 const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
   const { l } = (0, import_next.usePage)();
@@ -48,21 +49,36 @@ const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
     void navigator.clipboard.writeText(text);
     import_store.st.do.showMessage({ content: "\uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uBCF5\uC0AC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", type: "success", duration: 3 });
   };
-  return /* @__PURE__ */ React.createElement("table", { className: "table" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "text-bold" }, /* @__PURE__ */ React.createElement("th", null, "Arg Key"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Type"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Enum"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Name"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Description"))), argMetas.map((argMeta, idx) => {
-    const [argRef, argArrDepth] = (0, import_base.getNonArrayModel)(argMeta.returns());
-    return /* @__PURE__ */ React.createElement("tbody", { className: "font-normal", key: idx }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, argMeta.name), /* @__PURE__ */ React.createElement("td", { className: "text-center" }, /* @__PURE__ */ React.createElement(import_Object.default.Type, { objRef: argRef, arrDepth: argArrDepth })), /* @__PURE__ */ React.createElement("td", { width: argMeta.argsOption.enum ? "20%" : "10%", className: "text-center" }, argMeta.argsOption.enum ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, argMeta.argsOption.enum.map((opt, idx2) => /* @__PURE__ */ React.createElement("div", { key: idx2 }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: idx2,
-        "data-tip": l.enum(sigMeta.refName, argMeta.name, opt),
-        onClick: () => {
-          onCopy(opt);
-        },
-        className: "tooltip tooltip-primary btn btn-secondary btn-xs"
-      },
-      opt
-    )))) : "-"), /* @__PURE__ */ React.createElement("td", { className: "text-center" }, l.arg(sigMeta.refName, gqlMeta.key, argMeta.name)), /* @__PURE__ */ React.createElement("td", { className: "text-center" }, l.argdesc(sigMeta.refName, gqlMeta.key, argMeta.name))));
-  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "text-bold", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Arg Key" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "text-center", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "text-center", children: "Enum" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "text-center", children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "text-center", children: "Description" })
+    ] }) }),
+    argMetas.map((argMeta, idx) => {
+      const [argRef, argArrDepth] = (0, import_base.getNonArrayModel)(argMeta.returns());
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: "font-normal", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: argMeta.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Object.default.Type, { objRef: argRef, arrDepth: argArrDepth }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { width: argMeta.argsOption.enum ? "20%" : "10%", className: "text-center", children: argMeta.argsOption.enum ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: argMeta.argsOption.enum.map((opt, idx2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            "data-tip": l.enum(sigMeta.refName, argMeta.name, opt),
+            onClick: () => {
+              onCopy(opt);
+            },
+            className: "tooltip tooltip-primary btn btn-secondary btn-xs",
+            children: opt
+          },
+          idx2
+        ) }, idx2)) }) : "-" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "text-center", children: l.arg(sigMeta.refName, gqlMeta.key, argMeta.name) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "text-center", children: l.argdesc(sigMeta.refName, gqlMeta.key, argMeta.name) })
+      ] }) }, idx);
+    })
+  ] });
 };
 Arg.Table = ArgTable;
 const ArgParam = ({ argMeta, value, onChange }) => {
@@ -72,7 +88,13 @@ const ArgParam = ({ argMeta, value, onChange }) => {
   else if (argArrDepth > 0)
     throw new Error(`Param arg - ${argMeta.key}/${argMeta.name} must not be array`);
   const argType = (0, import_constant.getGqlTypeStr)(argRef);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-36 pl-2" }, "- ", argMeta.name), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(Arg, { argType, value, onChange })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-36 pl-2", children: [
+      "- ",
+      argMeta.name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg, { argType, value, onChange }) })
+  ] });
 };
 Arg.Param = ArgParam;
 const ArgQuery = ({ argMeta, value, onChange }) => {
@@ -82,34 +104,46 @@ const ArgQuery = ({ argMeta, value, onChange }) => {
   else if (argArrDepth > 1)
     throw new Error(`Query arg - ${argMeta.key}/${argMeta.name} must not be more than 2D array`);
   const argType = (0, import_constant.getGqlTypeStr)(argRef);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-36 pl-2" }, "- ", argMeta.name), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, argArrDepth && Array.isArray(value) ? /* @__PURE__ */ React.createElement("div", null, value.map((val, idx) => /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    Arg,
-    {
-      argType,
-      value: val,
-      onChange: (val2) => {
-        onChange([...value.slice(0, idx), val2, ...value.slice(idx + 1)]);
-      }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn btn-sm btn-square",
-      onClick: () => {
-        onChange([...value.slice(0, idx), ...value.slice(idx + 1)]);
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_ai.AiOutlineDelete, null)
-  ))), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn btn-sm",
-      onClick: () => {
-        onChange([...value, (0, import_constant.getScalarExample)(argRef)]);
-      }
-    },
-    "+ Add"
-  )) : /* @__PURE__ */ React.createElement(Arg, { argType, value, onChange })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-36 pl-2", children: [
+      "- ",
+      argMeta.name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: argArrDepth && Array.isArray(value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      value.map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Arg,
+          {
+            argType,
+            value: val,
+            onChange: (val2) => {
+              onChange([...value.slice(0, idx), val2, ...value.slice(idx + 1)]);
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "btn btn-sm btn-square",
+            onClick: () => {
+              onChange([...value.slice(0, idx), ...value.slice(idx + 1)]);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineDelete, {})
+          }
+        )
+      ] }, idx)),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "btn btn-sm",
+          onClick: () => {
+            onChange([...value, (0, import_constant.getScalarExample)(argRef)]);
+          },
+          children: "+ Add"
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg, { argType, value, onChange }) })
+  ] });
 };
 Arg.Query = ArgQuery;
 const ArgFormData = ({ argMeta, value, onChange }) => {
@@ -118,11 +152,17 @@ const ArgFormData = ({ argMeta, value, onChange }) => {
     throw new Error(`FormData arg - ${argMeta.key}/${argMeta.name} must be Upload`);
   else if (argArrDepth < 1)
     throw new Error(`FormData arg - ${argMeta.key}/${argMeta.name} must be array`);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-36 pl-2" }, "- ", argMeta.name), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(Arg, { argType: "Upload", value, onChange })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-36 pl-2", children: [
+      "- ",
+      argMeta.name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arg, { argType: "Upload", value, onChange }) })
+  ] });
 };
 Arg.FormData = ArgFormData;
 const ArgID = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Input.Input,
     {
       inputClassName: "w-full",
@@ -136,7 +176,7 @@ const ArgID = ({ value, onChange }) => {
 };
 Arg.ID = ArgID;
 const ArgInt = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Input.Input.Number,
     {
       inputClassName: "w-full",
@@ -150,7 +190,7 @@ const ArgInt = ({ value, onChange }) => {
 };
 Arg.Int = ArgInt;
 const ArgFloat = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Input.Input.Number,
     {
       inputClassName: "w-full",
@@ -164,7 +204,7 @@ const ArgFloat = ({ value, onChange }) => {
 };
 Arg.Float = ArgFloat;
 const ArgString = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Input.Input,
     {
       inputClassName: "w-full",
@@ -178,7 +218,7 @@ const ArgString = ({ value, onChange }) => {
 };
 Arg.String = ArgString;
 const ArgBoolean = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Input.Input.Checkbox,
     {
       className: "w-full",
@@ -191,7 +231,7 @@ const ArgBoolean = ({ value, onChange }) => {
 };
 Arg.Boolean = ArgBoolean;
 const ArgDate = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DatePicker.DatePicker,
     {
       className: "w-full",
@@ -204,7 +244,7 @@ const ArgDate = ({ value, onChange }) => {
 };
 Arg.Date = ArgDate;
 const ArgJson = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Input.Input.TextArea,
     {
       validate: (e) => true,
@@ -222,7 +262,7 @@ const ArgJson = ({ value, onChange }) => {
 };
 Arg.Json = ArgJson;
 const ArgUpload = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "input",
     {
       type: "file",