@akanjs/ui 0.0.151 → 0.0.152

package/cjs/System/Messages.js

@@ -21,6 +21,7 @@ __export(Messages_exports, {
   Messages: () => Messages
 });
 module.exports = __toCommonJS(Messages_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_dictionary = require("@akanjs/dictionary");
 var import_next = require("@akanjs/next");
@@ -66,39 +67,41 @@ const Message = ({ content, type = "info", duration, keyForMessage }) => {
   const iconClassName = type === "loading" ? "text-info" : `text-${type}`;
   const getIcon = (type2) => {
     const icons = {
-      info: /* @__PURE__ */ React.createElement(import_ai.AiOutlineInfoCircle, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
-      success: /* @__PURE__ */ React.createElement(import_ai.AiOutlineCheckCircle, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
-      error: /* @__PURE__ */ React.createElement(import_bs.BsExclamationCircleFill, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
-      warning: /* @__PURE__ */ React.createElement(import_ai.AiOutlineQuestionCircle, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
-      loading: /* @__PURE__ */ React.createElement(import_ai.AiOutlineLoading3Quarters, { className: (0, import_client.clsx)("animate-spin text-2xl", iconClassName) })
+      info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineInfoCircle, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
+      success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineCheckCircle, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
+      error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bs.BsExclamationCircleFill, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
+      warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineQuestionCircle, { className: (0, import_client.clsx)("text-2xl", iconClassName) }),
+      loading: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineLoading3Quarters, { className: (0, import_client.clsx)("animate-spin text-2xl", iconClassName) })
     };
     return icons[type2];
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-state": preBlind,
       className: "animate-zoomIn data-[state=true]:animate-smaller group w-screen px-6 duration-300 md:max-w-[60%]",
       style: {
         paddingTop: pageState.topSafeArea
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: (0, import_client.clsx)(
-          "typo-body1 text-base-content flex w-full items-center gap-2 rounded-[4px] border px-4 py-2 drop-shadow-lg",
-          {
-            "stroke-base-content bg-primary-content border-[#EEEEEE]": type === "loading" || type === "info",
-            "stroke-success bg-success/80 border-success-border": type === "success",
-            "stroke-error bg-error/80 border-error-border": type === "error",
-            "stroke-warning bg-warning/80 border-warning-border": type === "warning"
-          }
-        )
       },
-      /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 flex size-6 items-center justify-center rounded-full" }, getIcon(type)),
-      /* @__PURE__ */ React.createElement("span", { className: "text-base-100 truncate whitespace-nowrap" }, content)
-    )
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: (0, import_client.clsx)(
+            "typo-body1 text-base-content flex w-full items-center gap-2 rounded-[4px] border px-4 py-2 drop-shadow-lg",
+            {
+              "stroke-base-content bg-primary-content border-[#EEEEEE]": type === "loading" || type === "info",
+              "stroke-success bg-success/80 border-success-border": type === "success",
+              "stroke-error bg-error/80 border-error-border": type === "error",
+              "stroke-warning bg-warning/80 border-warning-border": type === "warning"
+            }
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 flex size-6 items-center justify-center rounded-full", children: getIcon(type) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-base-100 truncate whitespace-nowrap", children: content })
+          ]
+        }
+      )
+    }
   );
 };
 const Messages = () => {
@@ -150,21 +153,21 @@ const Messages = () => {
   }, []);
   if (!messages.length)
     return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       id: "toast",
-      className: "fixed top-0 left-0 z-[100] mt-[var(--safe-area-top)] flex h-fit w-screen flex-col items-center justify-start gap-2 pt-2"
-    },
-    messages.map((message) => /* @__PURE__ */ React.createElement(
-      Message,
-      {
-        content: message.content,
-        type: message.type,
-        duration: message.duration,
-        key: message.key,
-        keyForMessage: message.key
-      }
-    ))
+      className: "fixed top-0 left-0 z-[100] mt-[var(--safe-area-top)] flex h-fit w-screen flex-col items-center justify-start gap-2 pt-2",
+      children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Message,
+        {
+          content: message.content,
+          type: message.type,
+          duration: message.duration,
+          keyForMessage: message.key
+        },
+        message.key
+      ))
+    }
   );
 };

package/cjs/System/Reconnect.js

@@ -21,6 +21,7 @@ __export(Reconnect_exports, {
   Reconnect: () => Reconnect
 });
 module.exports = __toCommonJS(Reconnect_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
 var import_signal = require("@akanjs/signal");
@@ -58,7 +59,28 @@ const Reconnect = ({
       return;
     await reconnect();
   }, 5e3);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, dev ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex h-screen flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, "Something's wrong!"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center pt-5" }, /* @__PURE__ */ React.createElement("div", { className: "py-5" }, connectStatus === "disconnected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "text-[100px] text-gray-500" }, /* @__PURE__ */ React.createElement(import_tb.TbPlugConnectedX, null))) : connectStatus === "connecting" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-pulse text-[100px] text-gray-500" }, /* @__PURE__ */ React.createElement(import_tb.TbPlugConnectedX, null))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-pop text-[100px] text-white" }, /* @__PURE__ */ React.createElement(import_tb.TbPlugConnected, null)))), connectStatus === "connected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, "Connected!"), /* @__PURE__ */ React.createElement("div", { className: "animate-pop" }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-500" }, "Redirecting to the previous page in some seconds."))) : connectStatus === "connecting" ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", null, "Try reconnecting to the server"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, Array.from({ length: DOTS_LENGTH }).map(
-    (_, index) => dots >= index ? /* @__PURE__ */ React.createElement("div", { key: index, className: "visible" }, ".") : /* @__PURE__ */ React.createElement("div", { key: index, className: "invisible" }, ".")
-  ))) : /* @__PURE__ */ React.createElement("div", null, "Server disconnected."))), /* @__PURE__ */ React.createElement("span", { className: "text-center text-sm text-gray-500" }, "*Please check your server status."))) : /* @__PURE__ */ React.createElement("div", { className: "flex h-screen items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!"), /* @__PURE__ */ React.createElement(import_Image.Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }), /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4."), /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..."))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dev ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-screen flex-col items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: "Something's wrong!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center pt-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[100px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pulse text-[100px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop text-[100px] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnected, {}) }) }) }),
+        connectStatus === "connected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Connected!" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-500", children: "Redirecting to the previous page in some seconds." }) })
+        ] }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Try reconnecting to the server" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: Array.from({ length: DOTS_LENGTH }).map(
+            (_, index) => dots >= index ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "visible", children: "." }, index) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "invisible", children: "." }, index)
+          ) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Server disconnected." })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-center text-sm text-gray-500", children: "*Please check your server status." })
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Image.Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..." })
+  ] }) }) });
 };

package/cjs/System/Root.js

@@ -21,10 +21,11 @@ __export(Root_exports, {
   Root: () => Root
 });
 module.exports = __toCommonJS(Root_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_dictionary = require("@akanjs/dictionary");
 const Root = ({ children, st }) => {
   if (import_base.baseEnv.operationMode === "local")
     (0, import_dictionary.checkDictCoverage)();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 };

package/cjs/System/SSR.js

@@ -21,13 +21,14 @@ __export(SSR_exports, {
   default: () => SSR_default
 });
 module.exports = __toCommonJS(SSR_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_react = require("react");
 var import_Load = require("../Load");
 var import_Client = require("./Client");
 var import_Common = require("./Common");
 const SSR = () => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 };
 const SSRProvider = ({
   className,
@@ -47,7 +48,7 @@ const SSRProvider = ({
   fetchMe,
   fetchSelf
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Load.Load.Page,
     {
       of,
@@ -57,7 +58,7 @@ const SSRProvider = ({
           import_client.router.init({ type: "next", side: "server", lang, prefix });
         return { lang };
       },
-      render: ({ lang }) => /* @__PURE__ */ React.createElement(
+      render: ({ lang }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Common.Common.Wrapper,
         {
           fetch,
@@ -65,7 +66,7 @@ const SSRProvider = ({
           fetchPing,
           fetchMe,
           fetchSelf,
-          render: ({ mePromise, selfPromise }) => /* @__PURE__ */ React.createElement(
+          render: ({ mePromise, selfPromise }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             SSRWrapper,
             {
               className,
@@ -74,19 +75,26 @@ const SSRProvider = ({
               head,
               fonts,
               prefix,
-              layoutStyle
-            },
-            /* @__PURE__ */ React.createElement(import_Client.ClientWrapper, { theme }, children, /* @__PURE__ */ React.createElement(import_react.Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(import_Client.ClientInner, null)), /* @__PURE__ */ React.createElement(import_react.Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(
-              import_Client.ClientBridge,
-              {
-                env,
-                mePromise,
-                selfPromise,
-                theme,
-                prefix,
-                gaTrackingId
-              }
-            ), /* @__PURE__ */ React.createElement(import_Client.ClientNextBridge, { lang, prefix })))
+              layoutStyle,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Client.ClientWrapper, { theme, children: [
+                children,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.ClientInner, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Suspense, { fallback: null, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_Client.ClientBridge,
+                    {
+                      env,
+                      mePromise,
+                      selfPromise,
+                      theme,
+                      prefix,
+                      gaTrackingId
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.ClientNextBridge, { lang, prefix })
+                ] })
+              ] })
+            }
           )
         }
       )
@@ -103,42 +111,52 @@ const SSRWrapper = ({
   className,
   prefix,
   layoutStyle = "web"
-}) => /* @__PURE__ */ React.createElement("html", { lang, className: `${fonts.map((font) => font.variable).join(" ")} ${className}`, suppressHydrationWarning: true }, /* @__PURE__ */ React.createElement("head", null, head), /* @__PURE__ */ React.createElement("body", { className: "app" }, /* @__PURE__ */ React.createElement("div", { id: "frameRoot", className }, /* @__PURE__ */ React.createElement(import_Client.ClientPathWrapper, { layoutStyle, prefix }, /* @__PURE__ */ React.createElement("div", { id: "topSafeArea", className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0") }), /* @__PURE__ */ React.createElement("div", { id: "pageContainers", className: (0, import_client.clsx)("isolate") }, /* @__PURE__ */ React.createElement("div", { id: "pageContainer" }, /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "pageContent",
-    className: (0, import_client.clsx)("bg-base-100 relative isolate", {
-      "w-screen": layoutStyle === "web",
-      "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile"
-    })
-  },
-  children
-))), /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "topInsetContainer",
-    className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0 isolate", {
-      "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
-      "w-screen": layoutStyle === "web"
-    })
-  },
-  /* @__PURE__ */ React.createElement("div", { id: "topInsetContent", className: (0, import_client.clsx)("relative isolate size-full") })
-), /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "topLeftActionContainer",
-    className: "aspect-1 absolute top-0 left-0 isolate flex items-center justify-center"
-  }
-), /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "bottomInsetContainer",
-    className: (0, import_client.clsx)("fixed inset-x-0 bottom-0 isolate", {
-      "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
-      "w-screen": layoutStyle === "web"
-    })
-  },
-  /* @__PURE__ */ React.createElement("div", { id: "bottomInsetContent", className: "isolate size-full" })
-), /* @__PURE__ */ React.createElement("div", { id: "bottomSafeArea", className: "bg-base-100 fixed inset-x-0" })))));
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", { lang, className: `${fonts.map((font) => font.variable).join(" ")} ${className}`, suppressHydrationWarning: true, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("head", { children: head }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", { className: "app", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "frameRoot", className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Client.ClientPathWrapper, { layoutStyle, prefix, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "topSafeArea", className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "pageContainers", className: (0, import_client.clsx)("isolate"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "pageContainer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: "pageContent",
+        className: (0, import_client.clsx)("bg-base-100 relative isolate", {
+          "w-screen": layoutStyle === "web",
+          "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile"
+        }),
+        children
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: "topInsetContainer",
+        className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0 isolate", {
+          "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+          "w-screen": layoutStyle === "web"
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "topInsetContent", className: (0, import_client.clsx)("relative isolate size-full") })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: "topLeftActionContainer",
+        className: "aspect-1 absolute top-0 left-0 isolate flex items-center justify-center"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: "bottomInsetContainer",
+        className: (0, import_client.clsx)("fixed inset-x-0 bottom-0 isolate", {
+          "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+          "w-screen": layoutStyle === "web"
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "bottomInsetContent", className: "isolate size-full" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "bottomSafeArea", className: "bg-base-100 fixed inset-x-0" })
+  ] }) }) })
+] });
 SSR.Wrapper = SSRWrapper;
 var SSR_default = SSRProvider;

package/cjs/System/SelectLanguage.js

@@ -21,6 +21,7 @@ __export(SelectLanguage_exports, {
   SelectLanguage: () => SelectLanguage
 });
 module.exports = __toCommonJS(SelectLanguage_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
 var import_react = require("react");
@@ -33,26 +34,29 @@ const languageNames = {
 const SelectLanguage = ({ className, languages = ["en", "ko"] }) => {
   const { l, lang } = (0, import_next.usePage)();
   const [open, setOpen] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: "select-language",
-      onClick: () => {
-        setOpen(!open);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: "select-language",
+        onClick: () => {
+          setOpen(!open);
+        },
+        className: "mx-2 my-auto cursor-pointer rounded-3xl border bg-black/50 px-3 text-xs font-light text-white md:mx-4",
+        children: languageNames[lang]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-6 -left-4 w-28 rounded-xl border bg-slate-900/90 py-2 text-center text-white", children: languages.filter((lang2) => !!languageNames[lang2]).map((lang2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        onClick: () => {
+          import_client.router.setLang(lang2);
+          setOpen(false);
+        },
+        className: "cursor-pointer py-1 hover:bg-white/20",
+        children: languageNames[lang2]
       },
-      className: "mx-2 my-auto cursor-pointer rounded-3xl border bg-black/50 px-3 text-xs font-light text-white md:mx-4"
-    },
-    languageNames[lang]
-  ), open ? /* @__PURE__ */ React.createElement("div", { className: "absolute top-6 -left-4 w-28 rounded-xl border bg-slate-900/90 py-2 text-center text-white" }, languages.filter((lang2) => !!languageNames[lang2]).map((lang2) => /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      key: lang2,
-      onClick: () => {
-        import_client.router.setLang(lang2);
-        setOpen(false);
-      },
-      className: "cursor-pointer py-1 hover:bg-white/20"
-    },
-    languageNames[lang2]
-  ))) : null);
+      lang2
+    )) }) : null
+  ] });
 };

package/cjs/System/ThemeToggle.js

@@ -21,6 +21,7 @@ __export(ThemeToggle_exports, {
   ThemeToggle: () => ThemeToggle
 });
 module.exports = __toCommonJS(ThemeToggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_common = require("@akanjs/common");
 var import_next_themes = require("next-themes");
 var import_react = require("react");
@@ -36,5 +37,8 @@ const ThemeToggle = () => {
   if (!mounted) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "form-control" }, /* @__PURE__ */ React.createElement("label", { className: "label cursor-pointer" }, /* @__PURE__ */ React.createElement("span", { className: "label-text mr-2 text-sm whitespace-nowrap" }, (0, import_common.capitalize)(theme ?? "")), /* @__PURE__ */ React.createElement("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "label cursor-pointer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label-text mr-2 text-sm whitespace-nowrap", children: (0, import_common.capitalize)(theme ?? "") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })
+  ] }) });
 };

package/cjs/System/index.js

@@ -31,6 +31,7 @@ __export(System_exports, {
   System: () => System
 });
 module.exports = __toCommonJS(System_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_CSR = __toESM(require("./CSR"));
 var import_DevModeToggle = require("./DevModeToggle");
@@ -41,9 +42,9 @@ var import_SSR = __toESM(require("./SSR"));
 var import_ThemeToggle = require("./ThemeToggle");
 const Provider = (props) => {
   if (import_base.baseClientEnv.renderMode === "csr")
-    return /* @__PURE__ */ React.createElement(import_CSR.default, { ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CSR.default, { ...props });
   else
-    return /* @__PURE__ */ React.createElement(import_SSR.default, { ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SSR.default, { ...props });
 };
 const System = {
   Provider,

package/cjs/Tab/Menu.js

@@ -21,6 +21,7 @@ __export(Menu_exports, {
   Menu: () => Menu
 });
 module.exports = __toCommonJS(Menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_react = require("react");
 var import_context = require("./context");
@@ -46,7 +47,7 @@ const Menu = ({
     if (currentMenu === menu)
       setMenu([...menuSet.current.values()].find((m) => m !== menu) ?? null);
   }, [disabled]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-tip": tooltip,
@@ -63,8 +64,8 @@ const Menu = ({
         setMenu(menu);
         if (scrollToTop)
           window.scrollTo({ top: 0, behavior: "smooth" });
-      }
-    },
-    children
+      },
+      children
+    }
   );
 };

package/cjs/Tab/Menus.js

@@ -21,6 +21,7 @@ __export(Menus_exports, {
   Menus: () => Menus
 });
 module.exports = __toCommonJS(Menus_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 const Menus = ({ className, children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children });
 };

package/cjs/Tab/Panel.js

@@ -21,6 +21,7 @@ __export(Panel_exports, {
   Panel: () => Panel
 });
 module.exports = __toCommonJS(Panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_react = require("react");
 var import_context = require("./context");
@@ -36,7 +37,7 @@ const Panel = ({ className, menu, children, loading = "eager" }) => {
       setLoaded(currentMenu === menu);
   }, [currentMenu]);
   if (loading === "eager")
-    return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)(className, { hidden: currentMenu !== menu }) }, children);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)(className, { hidden: currentMenu !== menu }), children });
   else
-    return loaded ? /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)(className, { hidden: currentMenu !== menu }) }, children) : null;
+    return loaded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)(className, { hidden: currentMenu !== menu }), children }) : null;
 };

package/cjs/Tab/Provider.js

@@ -21,11 +21,12 @@ __export(Provider_exports, {
   Provider: () => Provider
 });
 module.exports = __toCommonJS(Provider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_react = require("react");
 var import_context = require("./context");
 const Provider = ({ className, defaultMenu = null, children }) => {
   const menuSet = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const [menu, setMenu] = (0, import_react.useState)(defaultMenu);
-  return /* @__PURE__ */ React.createElement(import_context.TabContext.Provider, { value: { defaultMenu, menu, setMenu, menuSet } }, /* @__PURE__ */ React.createElement("div", { "data-menu": menu, className: (0, import_client.clsx)(className, "group/tab") }, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.TabContext.Provider, { value: { defaultMenu, menu, setMenu, menuSet }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-menu": menu, className: (0, import_client.clsx)(className, "group/tab"), children }) });
 };

package/cjs/Tab/index.js

@@ -20,12 +20,13 @@ __export(Tab_exports, {
   Tab: () => Tab
 });
 module.exports = __toCommonJS(Tab_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_Menu = require("./Menu");
 var import_Menus = require("./Menus");
 var import_Panel = require("./Panel");
 var import_Provider = require("./Provider");
 const Tab = (props) => {
-  return /* @__PURE__ */ React.createElement(import_Provider.Provider, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Provider.Provider, { ...props });
 };
 Tab.Menu = import_Menu.Menu;
 Tab.Menus = import_Menus.Menus;