@akanjs/ui 0.0.151 → 0.0.152

package/esm/Data/QueryMaker.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { scalarDefaultMap } from "@akanjs/base";
 import { clsx } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
@@ -69,54 +70,69 @@ function QueryMaker({ className, sliceName, query }) {
   useEffect(() => {
     setQueryOfModel(querySetting);
   }, [querySetting]);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex w-full items-center gap-4", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, "Query", /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      value: querySetting.queryKey,
-      options: Object.keys(summaryQueryMap).map((queryKey) => ({
-        label: l.qry(sliceName, queryKey),
-        value: queryKey
-      })),
-      onChange: (queryKey) => {
-        const filterQueryArgMetas = getFilterArgMetas(filterRef, queryKey);
-        const defaultArg = Object.fromEntries(
-          filterQueryArgMetas.map((queryArgMeta) => [
-            queryArgMeta.name,
-            queryArgMeta.nullable ? null : queryArgMeta.arrDepth ? { $in: [] } : queryArgMeta.default ? typeof queryArgMeta.default === "function" ? queryArgMeta.default() : queryArgMeta.default : scalarDefaultMap.get(queryArgMeta.modelRef) ?? null
-          ])
-        );
-        setQuerySetting({ queryKey, arg: defaultArg });
-      }
-    }
-  )), querySetting.queryKey === "search" ? /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2" }, "Search", /* @__PURE__ */ React.createElement("label", { className: "input flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "text",
-      className: "grow",
-      placeholder: "Type to search...",
-      value: querySetting.arg.$search ?? "",
-      onChange: (e) => {
-        setQuerySetting({ ...querySetting, arg: e.target.value ? { $search: e.target.value } : {} });
-      }
-    }
-  ), /* @__PURE__ */ React.createElement(BiSearch, { className: "size-4 opacity-70" }))) : summaryQueryMap[querySetting.queryKey] ? null : getFilterArgMetas(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2", key: idx }, /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, l.qarg(sliceName, querySetting.queryKey, queryArgMeta.name)), /* @__PURE__ */ React.createElement(
-    QueryArg,
-    {
-      queryArgMeta,
-      value: querySetting.arg[queryArgMeta.name],
-      onChange: (value) => {
-        setQuerySetting({
-          ...querySetting,
-          arg: { ...querySetting.arg, [queryArgMeta.name]: value }
-        });
-      }
-    }
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: clsx("flex w-full items-center gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      "Query",
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: querySetting.queryKey,
+          options: Object.keys(summaryQueryMap).map((queryKey) => ({
+            label: l.qry(sliceName, queryKey),
+            value: queryKey
+          })),
+          onChange: (queryKey) => {
+            const filterQueryArgMetas = getFilterArgMetas(filterRef, queryKey);
+            const defaultArg = Object.fromEntries(
+              filterQueryArgMetas.map((queryArgMeta) => [
+                queryArgMeta.name,
+                queryArgMeta.nullable ? null : queryArgMeta.arrDepth ? { $in: [] } : queryArgMeta.default ? typeof queryArgMeta.default === "function" ? queryArgMeta.default() : queryArgMeta.default : scalarDefaultMap.get(queryArgMeta.modelRef) ?? null
+              ])
+            );
+            setQuerySetting({ queryKey, arg: defaultArg });
+          }
+        }
+      )
+    ] }),
+    querySetting.queryKey === "search" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+      "Search",
+      /* @__PURE__ */ jsxs("label", { className: "input flex w-full items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "grow",
+            placeholder: "Type to search...",
+            value: querySetting.arg.$search ?? "",
+            onChange: (e) => {
+              setQuerySetting({ ...querySetting, arg: e.target.value ? { $search: e.target.value } : {} });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(BiSearch, { className: "size-4 opacity-70" })
+      ] })
+    ] }) : summaryQueryMap[querySetting.queryKey] ? null : getFilterArgMetas(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: l.qarg(sliceName, querySetting.queryKey, queryArgMeta.name) }),
+      /* @__PURE__ */ jsx(
+        QueryArg,
+        {
+          queryArgMeta,
+          value: querySetting.arg[queryArgMeta.name],
+          onChange: (value) => {
+            setQuerySetting({
+              ...querySetting,
+              arg: { ...querySetting.arg, [queryArgMeta.name]: value }
+            });
+          }
+        }
+      )
+    ] }, idx))
+  ] });
 }
 function QueryArg({ queryArgMeta, value, onChange }) {
   const argType = getGqlTypeStr(queryArgMeta.modelRef);
   if (queryArgMeta.enum && queryArgMeta.arrDepth && queryArgMeta.arrDepth < 2)
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       QueryArg.Enum,
       {
         options: queryArgMeta.enum.values,
@@ -126,10 +142,10 @@ function QueryArg({ queryArgMeta, value, onChange }) {
         multiple: queryArgMeta.arrDepth ? queryArgMeta.arrDepth >= 1 : false
       }
     );
-  return argType === "ID" ? /* @__PURE__ */ React.createElement(QueryArg.ID, { queryArgMeta, value, onChange }) : argType === "Int" ? /* @__PURE__ */ React.createElement(QueryArg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ React.createElement(QueryArg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ React.createElement(QueryArg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ React.createElement(QueryArg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ React.createElement(QueryArg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ React.createElement(QueryArg.Json, { value, onChange }) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return argType === "ID" ? /* @__PURE__ */ jsx(QueryArg.ID, { queryArgMeta, value, onChange }) : argType === "Int" ? /* @__PURE__ */ jsx(QueryArg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ jsx(QueryArg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ jsx(QueryArg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ jsx(QueryArg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ jsx(QueryArg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ jsx(QueryArg.Json, { value, onChange }) : /* @__PURE__ */ jsx(Fragment, {});
 }
 const ArgEnum = ({ options, value, onChange, nullable, multiple }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Select,
     {
       options: options.map((option) => ({
@@ -147,7 +163,7 @@ const ArgEnum = ({ options, value, onChange, nullable, multiple }) => {
 QueryArg.Enum = ArgEnum;
 const ArgID = ({ queryArgMeta, value, onChange }) => {
   if (!queryArgMeta.ref)
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Input,
       {
         inputClassName: "w-full",
@@ -159,7 +175,7 @@ const ArgID = ({ queryArgMeta, value, onChange }) => {
       }
     );
   else
-    return /* @__PURE__ */ React.createElement(SelectIDWithRef, { queryArgMeta, value, onChange });
+    return /* @__PURE__ */ jsx(SelectIDWithRef, { queryArgMeta, value, onChange });
 };
 QueryArg.ID = ArgID;
 const SelectIDWithRef = ({ queryArgMeta, value, onChange }) => {
@@ -170,40 +186,46 @@ const SelectIDWithRef = ({ queryArgMeta, value, onChange }) => {
   const modelList = storeUse[`${queryArgMeta.ref}List`]();
   const renderOption = queryArgMeta.renderOption ?? ((value2) => value2.id);
   const selectedModel = value ? modelList.get(value) : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "btn",
-      onClick: () => {
-        setModalOpen(true);
-      }
-    },
-    selectedModel ? renderOption(selectedModel) : `Select ${queryArgMeta.ref}`
-  ), /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      open: modalOpen,
-      onCancel: () => {
-        setModalOpen(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "btn",
+        onClick: () => {
+          setModalOpen(true);
+        },
+        children: selectedModel ? renderOption(selectedModel) : `Select ${queryArgMeta.ref}`
       }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4 pb-[256px]" }, /* @__PURE__ */ React.createElement(QueryMaker, { sliceName: queryArgMeta.ref }), /* @__PURE__ */ React.createElement(
-      Select,
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
       {
-        options: modelList.map((model) => ({
-          label: renderOption(model),
-          value: model.id
-        })),
-        value,
-        onChange: (value2) => {
-          onChange(value2);
-        }
+        open: modalOpen,
+        onCancel: () => {
+          setModalOpen(false);
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4 pb-[256px]", children: [
+          /* @__PURE__ */ jsx(QueryMaker, { sliceName: queryArgMeta.ref }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              options: modelList.map((model) => ({
+                label: renderOption(model),
+                value: model.id
+              })),
+              value,
+              onChange: (value2) => {
+                onChange(value2);
+              }
+            }
+          )
+        ] })
       }
-    ))
-  ));
+    )
+  ] });
 };
 const ArgInt = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Input.Number,
     {
       inputClassName: "w-full",
@@ -217,7 +239,7 @@ const ArgInt = ({ value, onChange }) => {
 };
 QueryArg.Int = ArgInt;
 const ArgFloat = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Input.Number,
     {
       inputClassName: "w-full",
@@ -231,7 +253,7 @@ const ArgFloat = ({ value, onChange }) => {
 };
 QueryArg.Float = ArgFloat;
 const ArgString = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Input,
     {
       inputClassName: "w-full",
@@ -245,7 +267,7 @@ const ArgString = ({ value, onChange }) => {
 };
 QueryArg.String = ArgString;
 const ArgBoolean = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Input.Checkbox,
     {
       className: "w-full",
@@ -258,7 +280,7 @@ const ArgBoolean = ({ value, onChange }) => {
 };
 QueryArg.Boolean = ArgBoolean;
 const ArgDate = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     DatePicker,
     {
       className: "w-full",
@@ -271,7 +293,7 @@ const ArgDate = ({ value, onChange }) => {
 };
 QueryArg.Date = ArgDate;
 const ArgJson = ({ value, onChange }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Input.TextArea,
     {
       validate: (e) => true,

package/esm/Data/TableList.js

@@ -1,8 +1,9 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { capitalize } from "@akanjs/common";
 import { usePage } from "@akanjs/next";
 import { st } from "@akanjs/store";
-import React, { useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Model } from "../Model";
 import { Table } from "../Table";
 import { Action, convToAntdColumn } from "./Item";
@@ -41,7 +42,7 @@ function TableList({
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
   const RenderTemplate = ({ id }) => {
     const Edit = renderTemplate;
-    return Edit ? /* @__PURE__ */ React.createElement(Edit, { ...{ [names.modelId]: id } }) : null;
+    return Edit ? /* @__PURE__ */ jsx(Edit, { ...{ [names.modelId]: id } }) : null;
   };
   useEffect(() => {
     if (queryArgs.length)
@@ -58,15 +59,18 @@ function TableList({
     return [
       {
         ...firstCol,
-        render: (value, model, idx) => /* @__PURE__ */ React.createElement("div", { key: `${model.id}-${idx}`, className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "mr-2" }, firstCol.render ? firstCol.render(value, model) : value), actions && (typeof actions === "function" ? actions(model, idx) : actions).filter((action) => typeof action === "string").map((action, idx2) => /* @__PURE__ */ React.createElement(
-          Action,
-          {
-            key: `${model.id}-${action}`,
-            model,
-            action,
-            sliceName
-          }
-        )))
+        render: (value, model, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-2", children: firstCol.render ? firstCol.render(value, model) : value }),
+          actions && (typeof actions === "function" ? actions(model, idx) : actions).filter((action) => typeof action === "string").map((action, idx2) => /* @__PURE__ */ jsx(
+            Action,
+            {
+              model,
+              action,
+              sliceName
+            },
+            `${model.id}-${action}`
+          ))
+        ] }, `${model.id}-${idx}`)
       },
       ...columns.slice(1).map((col) => ({
         ...convToAntdColumn(col),
@@ -77,33 +81,40 @@ function TableList({
           key: "actions",
           dataIndex: "id",
           title: l("shared.actions"),
-          render: (_, model, idx) => /* @__PURE__ */ React.createElement("div", { className: "flex gap-1" }, (typeof actions === "function" ? actions(model, idx) : actions).filter((action) => typeof action !== "string").map((action, idx2) => /* @__PURE__ */ React.createElement(Action, { key: `${model.id}-${idx2}`, model, action, sliceName })))
+          render: (_, model, idx) => /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: (typeof actions === "function" ? actions(model, idx) : actions).filter((action) => typeof action !== "string").map((action, idx2) => /* @__PURE__ */ jsx(Action, { model, action, sliceName }, `${model.id}-${idx2}`)) })
         }
       ] : []
     ];
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      dataSource: modelListLoading ? [] : [...modelList],
-      columns: cols,
-      loading: !!modelListLoading,
-      size: "small",
-      rowKey: (model) => model.id,
-      pagination: false,
-      onRow: (model, idx) => ({
-        onClick: () => onItemClick?.(model, idx)
-      })
-    }
-  ), /* @__PURE__ */ React.createElement(DataPagination, { sliceName }), !modelListLoading ? modelList.map((model) => /* @__PURE__ */ React.createElement("div", { key: model.id }, /* @__PURE__ */ React.createElement(Model.EditModal, { id: model.id, sliceName, renderTitle }, /* @__PURE__ */ React.createElement(RenderTemplate, { id: model.id })), renderView ? /* @__PURE__ */ React.createElement(
-    Model.ViewModal,
-    {
-      id: model.id,
-      sliceName,
-      renderTitle,
-      renderView
-    }
-  ) : null)) : null);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        dataSource: modelListLoading ? [] : [...modelList],
+        columns: cols,
+        loading: !!modelListLoading,
+        size: "small",
+        rowKey: (model) => model.id,
+        pagination: false,
+        onRow: (model, idx) => ({
+          onClick: () => onItemClick?.(model, idx)
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(DataPagination, { sliceName }),
+    !modelListLoading ? modelList.map((model) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Model.EditModal, { id: model.id, sliceName, renderTitle, children: /* @__PURE__ */ jsx(RenderTemplate, { id: model.id }) }),
+      renderView ? /* @__PURE__ */ jsx(
+        Model.ViewModal,
+        {
+          id: model.id,
+          sliceName,
+          renderTitle,
+          renderView
+        }
+      ) : null
+    ] }, model.id)) : null
+  ] });
 }
 export {
   TableList as default

package/esm/DatePicker.js

@@ -1,10 +1,11 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "react-datepicker/dist/react-datepicker.css";
 import { dayjs } from "@akanjs/base";
 import { clsx } from "@akanjs/client";
 import { msg } from "@akanjs/dictionary";
 import { lazy } from "@akanjs/next";
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { AiOutlineSwapRight } from "react-icons/ai";
 const ReactDatePicker = lazy(() => import("react-datepicker"), { ssr: false });
 const DatePicker = ({
@@ -31,7 +32,7 @@ const DatePicker = ({
     }
     onChange(dayjs(date));
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ReactDatePicker,
     {
       className: clsx("input text-center", className),
@@ -75,36 +76,40 @@ const RangePicker = ({
     onChange([value[0] ?? dayjs(), dayjs(date)]);
   };
   const pickerClassName = "m-0 input focus:outline-hidden z-50 p-3 text-center h-full w-full ";
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("input flex h-full w-fit items-center gap-2 p-0", className) }, /* @__PURE__ */ React.createElement(
-    ReactDatePicker,
-    {
-      className: pickerClassName,
-      selected: value[0] ? value[0].toDate() : void 0,
-      selectsStart: true,
-      startDate: value[0] ? value[0].toDate() : void 0,
-      endDate: value[1] ? value[1].toDate() : void 0,
-      onChange: handleStartDateChange,
-      showTimeSelect: showTime,
-      timeIntervals,
-      filterDate: (date) => !disabledDate?.(dayjs(date)) ? true : false,
-      dateFormat: format
-    }
-  ), /* @__PURE__ */ React.createElement(AiOutlineSwapRight, { className: "text-3xl text-gray-400" }), /* @__PURE__ */ React.createElement(
-    ReactDatePicker,
-    {
-      className: pickerClassName,
-      selected: value[1] ? value[1].toDate() : void 0,
-      selectsEnd: true,
-      startDate: value[0] ? value[0].toDate() : void 0,
-      endDate: value[1] ? value[1].toDate() : void 0,
-      onChange: handleEndDateChange,
-      showTimeSelect: showTime,
-      timeIntervals,
-      filterDate: (date) => !disabledDate?.(dayjs(date)) && !!value[0] && !dayjs(date).add(1, "day").isBefore(value[0]) ? true : false,
-      filterTime: (time) => !!value[0] && dayjs(time).isAfter(value[0]),
-      dateFormat: format
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: clsx("input flex h-full w-fit items-center gap-2 p-0", className), children: [
+    /* @__PURE__ */ jsx(
+      ReactDatePicker,
+      {
+        className: pickerClassName,
+        selected: value[0] ? value[0].toDate() : void 0,
+        selectsStart: true,
+        startDate: value[0] ? value[0].toDate() : void 0,
+        endDate: value[1] ? value[1].toDate() : void 0,
+        onChange: handleStartDateChange,
+        showTimeSelect: showTime,
+        timeIntervals,
+        filterDate: (date) => !disabledDate?.(dayjs(date)) ? true : false,
+        dateFormat: format
+      }
+    ),
+    /* @__PURE__ */ jsx(AiOutlineSwapRight, { className: "text-3xl text-gray-400" }),
+    /* @__PURE__ */ jsx(
+      ReactDatePicker,
+      {
+        className: pickerClassName,
+        selected: value[1] ? value[1].toDate() : void 0,
+        selectsEnd: true,
+        startDate: value[0] ? value[0].toDate() : void 0,
+        endDate: value[1] ? value[1].toDate() : void 0,
+        onChange: handleEndDateChange,
+        showTimeSelect: showTime,
+        timeIntervals,
+        filterDate: (date) => !disabledDate?.(dayjs(date)) && !!value[0] && !dayjs(date).add(1, "day").isBefore(value[0]) ? true : false,
+        filterTime: (time) => !!value[0] && dayjs(time).isAfter(value[0]),
+        dateFormat: format
+      }
+    )
+  ] });
 };
 DatePicker.RangePicker = RangePicker;
 const TimePicker = ({
@@ -122,7 +127,7 @@ const TimePicker = ({
     }
     onChange(dayjs(date));
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ReactDatePicker,
     {
       wrapperClassName: "inline-block",

package/esm/Dialog/Close.js

@@ -1,17 +1,18 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { DialogContext } from "./context";
 const Close = ({ className, children }) => {
   const { setOpen } = useContext(DialogContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "a",
     {
       className,
       onClick: () => {
         setOpen(false);
-      }
-    },
-    children
+      },
+      children
+    }
   );
 };
 export {

package/esm/Dialog/Content.js

@@ -1,7 +1,8 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 const Content = ({ className, children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("block w-full", className) }, children);
+  return /* @__PURE__ */ jsx("div", { className: clsx("block w-full", className), children });
 };
 export {
   Content

package/esm/Dialog/Modal.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -68,58 +69,68 @@ const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) =
     else
       void closeModal({});
   }, [open]);
-  return /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(
-    Dialog.Overlay,
-    {
-      onClick: () => {
-        void closeModal({ confirmClose });
-      }
-    },
-    showBackground ? /* @__PURE__ */ React.createElement("div", { className: "data-[state=open]:animate-fadeIn bg-base-content/50 fixed inset-0 z-10 backdrop-blur-md" }) : null
-  ), /* @__PURE__ */ React.createElement(
-    Dialog.Content,
-    {
-      className: "fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
-      asChild: true,
-      forceMount: true
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "z-10" }, /* @__PURE__ */ React.createElement(a.div, { ref, style: { translateY, opacity } }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        className: "btn btn-circle btn-sm absolute top-[-16px] right-0 z-20 md:top-[-40px]",
-        onClick: () => void closeModal({ confirmClose })
-      },
-      /* @__PURE__ */ React.createElement(BiX, { className: "text-3xl" })
-    ), /* @__PURE__ */ React.createElement(
-      "div",
+  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Overlay,
       {
-        className: clsx(
-          "bg-base-100 animate-fadeIn mx-auto mt-6 flex max-h-[75vh] w-full max-w-[96vw] max-w-screen flex-col items-center justify-center overflow-x-hidden rounded-lg transition-all duration-100 sm:w-[90%] sm:px-2 sm:pb-2 md:mt-0 md:max-h-[90vh] md:pt-0",
-          className
-        )
-      },
-      /* @__PURE__ */ React.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React.createElement(
-        a.div,
-        {
-          ...bind(),
-          className: "animate-fadeIn relative z-10 flex w-full cursor-pointer flex-col items-center justify-center px-4 pt-1"
+        onClick: () => {
+          void closeModal({ confirmClose });
         },
-        /* @__PURE__ */ React.createElement("div", { className: "flex w-full cursor-pointer items-center justify-center pt-1 opacity-50" }, /* @__PURE__ */ React.createElement("div", { className: "h-1 w-24 rounded-full bg-gray-500" })),
-        /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-start" }, /* @__PURE__ */ React.createElement("div", { className: "w-full text-start text-lg font-bold" }, title))
-      )),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: clsx(
-            "border-base-content/30 scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
-            bodyClassName
+        children: showBackground ? /* @__PURE__ */ jsx("div", { className: "data-[state=open]:animate-fadeIn bg-base-content/50 fixed inset-0 z-10 backdrop-blur-md" }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog.Content,
+      {
+        className: "fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
+        asChild: true,
+        forceMount: true,
+        children: /* @__PURE__ */ jsx("div", { className: "z-10", children: /* @__PURE__ */ jsxs(a.div, { ref, style: { translateY, opacity }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "btn btn-circle btn-sm absolute top-[-16px] right-0 z-20 md:top-[-40px]",
+              onClick: () => void closeModal({ confirmClose }),
+              children: /* @__PURE__ */ jsx(BiX, { className: "text-3xl" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx(
+                "bg-base-100 animate-fadeIn mx-auto mt-6 flex max-h-[75vh] w-full max-w-[96vw] max-w-screen flex-col items-center justify-center overflow-x-hidden rounded-lg transition-all duration-100 sm:w-[90%] sm:px-2 sm:pb-2 md:mt-0 md:max-h-[90vh] md:pt-0",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  a.div,
+                  {
+                    ...bind(),
+                    className: "animate-fadeIn relative z-10 flex w-full cursor-pointer flex-col items-center justify-center px-4 pt-1",
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex w-full cursor-pointer items-center justify-center pt-1 opacity-50", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-24 rounded-full bg-gray-500" }) }),
+                      /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-start", children: /* @__PURE__ */ jsx("div", { className: "w-full text-start text-lg font-bold", children: title }) })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "border-base-content/30 scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
+                      bodyClassName
+                    ),
+                    children
+                  }
+                ),
+                action ? /* @__PURE__ */ jsx("div", { className: "w-full", children: action }) : null
+              ]
+            }
           )
-        },
-        children
-      ),
-      action ? /* @__PURE__ */ React.createElement("div", { className: "w-full" }, action) : null
-    )))
-  ));
+        ] }) })
+      }
+    )
+  ] });
 };
 export {
   Modal