@acmekit/dashboard 2.13.6 → 2.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acmekit/dashboard",
-  "version": "2.13.6",
+  "version": "2.13.7",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "../../../node_modules/.bin/vite",
@@ -39,10 +39,10 @@
     "dist"
   ],
   "dependencies": {
-    "@acmekit/admin-shared": "2.13.6",
-    "@acmekit/icons": "2.13.6",
-    "@acmekit/js-sdk": "2.13.6",
-    "@acmekit/ui": "4.1.6",
+    "@acmekit/admin-shared": "2.13.7",
+    "@acmekit/icons": "2.13.7",
+    "@acmekit/js-sdk": "2.13.7",
+    "@acmekit/ui": "4.1.7",
     "@ariakit/react": "^0.4.15",
     "@babel/runtime": "^7.26.10",
     "@dnd-kit/core": "^6.1.0",
@@ -80,10 +80,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@acmekit/admin-shared": "2.13.6",
-    "@acmekit/admin-vite-plugin": "2.13.6",
-    "@acmekit/types": "2.13.6",
-    "@acmekit/ui-preset": "2.13.6"
+    "@acmekit/admin-shared": "2.13.7",
+    "@acmekit/admin-vite-plugin": "2.13.7",
+    "@acmekit/types": "2.13.7",
+    "@acmekit/ui-preset": "2.13.7"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/components/layout/settings-layout/settings-layout.tsx

@@ -1,11 +1,12 @@
 import { ArrowUturnLeft, MinusMini } from "@acmekit/icons"
 import { clx, Divider, IconButton, Text } from "@acmekit/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
-import { useEffect, useState } from "react"
+import { Fragment, useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
 import { useExtension } from "../../../providers/extension-provider"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 import { INavItem, NavItem } from "../nav-item"
 import { Shell } from "../shell"
 import { UserMenu } from "../user-menu"
@@ -18,6 +19,42 @@ export const SettingsLayout = () => {
   )
 }
 
+const useSettingRoutes = (): INavItem[] => {
+  const isTranslationsEnabled = useFeatureFlag("translation")
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      { label: t("store.domain"), to: "/settings/store" },
+      { label: t("users.domain"), to: "/settings/users" },
+      ...(isTranslationsEnabled
+        ? [{ label: t("translations.domain"), to: "/settings/translations" }]
+        : []),
+    ],
+    [t, isTranslationsEnabled]
+  )
+}
+
+const useDeveloperRoutes = (): INavItem[] => {
+  const { t } = useTranslation()
+  return useMemo(
+    () => [
+      { label: t("apiKeyManagement.domain.publishable"), to: "/settings/publishable-api-keys" },
+      { label: t("apiKeyManagement.domain.secret"), to: "/settings/secret-api-keys" },
+      { label: t("workflowExecutions.domain"), to: "/settings/workflows" },
+    ],
+    [t]
+  )
+}
+
+const useMyAccountRoutes = (): INavItem[] => {
+  const { t } = useTranslation()
+  return useMemo(
+    () => [{ label: t("profile.domain"), to: "/settings/profile" }],
+    [t]
+  )
+}
+
 /**
  * Ensure that the `from` prop is not another settings route, to avoid
  * the user getting stuck in a navigation loop.
@@ -26,7 +63,6 @@ const getSafeFromValue = (from: string) => {
   if (from.startsWith("/settings")) {
     return "/"
   }
-
   return from
 }
 
@@ -34,6 +70,9 @@ const SettingsSidebar = () => {
   const { getMenu } = useExtension()
   const extensionRoutes = getMenu("settingsExtensions")
   const { t } = useTranslation()
+  const routes = useSettingRoutes()
+  const developerRoutes = useDeveloperRoutes()
+  const myAccountRoutes = useMyAccountRoutes()
 
   return (
     <aside className="relative flex flex-1 flex-col justify-between overflow-y-auto">
@@ -45,11 +84,34 @@ const SettingsSidebar = () => {
       </div>
       <div className="flex flex-1 flex-col">
         <div className="flex flex-1 flex-col overflow-y-auto">
+          <RadixCollapsibleSection
+            label={t("app.nav.settings.general")}
+            items={routes}
+          />
+          <div className="flex items-center justify-center px-3">
+            <Divider variant="dashed" />
+          </div>
+          <RadixCollapsibleSection
+            label={t("app.nav.settings.developer")}
+            items={developerRoutes}
+          />
+          <div className="flex items-center justify-center px-3">
+            <Divider variant="dashed" />
+          </div>
+          <RadixCollapsibleSection
+            label={t("app.nav.settings.myAccount")}
+            items={myAccountRoutes}
+          />
           {extensionRoutes.length > 0 ? (
-            <RadixCollapsibleSection
-              label={t("app.nav.common.extensions")}
-              items={extensionRoutes}
-            />
+            <Fragment>
+              <div className="flex items-center justify-center px-3">
+                <Divider variant="dashed" />
+              </div>
+              <RadixCollapsibleSection
+                label={t("app.nav.common.extensions")}
+                items={extensionRoutes}
+              />
+            </Fragment>
           ) : null}
         </div>
         <div className="bg-ui-bg-subtle sticky bottom-0">

package/src/dashboard-app/routes/get-route.map.tsx

@@ -18,6 +18,230 @@ function mergeSettingsRouteChildren(
     .flatMap((r) => r.children ?? [])
 }
 
+/** Default framework settings routes (profile, store, users, api-keys, workflows, translations). */
+const defaultSettingsRouteChildren: RouteObject[] = [
+  {
+    path: "profile",
+    errorElement: <ErrorBoundary />,
+    lazy: () => import("../../routes/profile/profile-detail"),
+    handle: { breadcrumb: () => t("profile.domain") },
+    children: [
+      {
+        path: "edit",
+        lazy: () => import("../../routes/profile/profile-edit"),
+      },
+    ],
+  },
+  {
+    path: "store",
+    errorElement: <ErrorBoundary />,
+    lazy: () => import("../../routes/store/store-detail"),
+    handle: { breadcrumb: () => t("store.domain") },
+    children: [
+      { path: "edit", lazy: () => import("../../routes/store/store-edit") },
+      {
+        path: "metadata/edit",
+        lazy: () => import("../../routes/store/store-metadata"),
+      },
+    ],
+  },
+  {
+    path: "users",
+    errorElement: <ErrorBoundary />,
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("users.domain") },
+    children: [
+      {
+        path: "",
+        lazy: () => import("../../routes/users/user-list"),
+        children: [
+          {
+            path: "invite",
+            lazy: () => import("../../routes/users/user-invite"),
+          },
+        ],
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/users/user-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+        children: [
+          { path: "edit", lazy: () => import("../../routes/users/user-edit") },
+          {
+            path: "metadata/edit",
+            lazy: () => import("../../routes/users/user-metadata"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "publishable-api-keys",
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("apiKeyManagement.domain.publishable") },
+    children: [
+      {
+        path: "",
+        element: <Outlet />,
+        children: [
+          {
+            path: "",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-list"),
+            children: [
+              {
+                path: "create",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-create"
+                  ),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/api-key-management/api-key-management-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+        children: [
+          {
+            path: "edit",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-edit"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "secret-api-keys",
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("apiKeyManagement.domain.secret") },
+    children: [
+      {
+        path: "",
+        element: <Outlet />,
+        children: [
+          {
+            path: "",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-list"),
+            children: [
+              {
+                path: "create",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-create"
+                  ),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/api-key-management/api-key-management-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+        children: [
+          {
+            path: "edit",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-edit"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "workflows",
+    errorElement: <ErrorBoundary />,
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("workflowExecutions.domain") },
+    children: [
+      {
+        path: "",
+        lazy: () =>
+          import("../../routes/workflow-executions/workflow-execution-list"),
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/workflow-executions/workflow-execution-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+      },
+    ],
+  },
+  {
+    path: "translations",
+    errorElement: <ErrorBoundary />,
+    handle: { breadcrumb: () => t("translations.domain") },
+    children: [
+      {
+        path: "",
+        lazy: () => import("../../routes/translations/translation-list"),
+        children: [
+          {
+            path: "settings",
+            lazy: () => import("../../routes/translations/settings"),
+          },
+        ],
+      },
+      {
+        path: "edit",
+        lazy: () => import("../../routes/translations/translations-edit"),
+      },
+    ],
+  },
+]
+
 export function getRouteMap({
   settingsRoutes,
   coreRoutes,
@@ -55,6 +279,7 @@ export function getRouteMap({
               errorElement: <ErrorBoundary />,
               lazy: () => import("../../routes/settings"),
             },
+            ...defaultSettingsRouteChildren,
             ...settingsPluginChildren,
           ],
         },

package/src/routes/login/login.tsx

@@ -23,7 +23,7 @@ export const Login = () => {
   const navigate = useNavigate()
   const { getWidgets } = useExtension()
 
-  const from = location.state?.from?.pathname || "/orders"
+  const from = location.state?.from?.pathname || "/"
 
   const form = useForm<z.infer<typeof LoginSchema>>({
     resolver: zodResolver(LoginSchema),

package/dist/chunk-NQEMGMWU.mjs

@@ -1,159 +0,0 @@
-import {
-  queryKeysFactory
-} from "./chunk-QYOO4QR6.mjs";
-import {
-  sdk
-} from "./chunk-4VYJHIB3.mjs";
-
-// src/hooks/api/cloud.tsx
-import {
-  useMutation,
-  useQuery
-} from "@tanstack/react-query";
-var cloudQueryKeys = {
-  all: ["cloud"],
-  auth: () => [...cloudQueryKeys.all, "auth"]
-};
-var useCloudAuthEnabled = (options) => {
-  return useQuery({
-    queryKey: cloudQueryKeys.auth(),
-    queryFn: async () => {
-      return await sdk.client.fetch("/cloud/auth");
-    },
-    ...options
-  });
-};
-var useCreateCloudAuthUser = (options) => {
-  return useMutation({
-    mutationFn: async () => {
-      await sdk.client.fetch("/cloud/auth/users", {
-        method: "POST"
-      });
-    },
-    ...options
-  });
-};
-
-// src/hooks/api/feature-flags.tsx
-import { useQuery as useQuery2 } from "@tanstack/react-query";
-var useFeatureFlags = () => {
-  return useQuery2({
-    queryKey: ["admin", "feature-flags"],
-    queryFn: async () => {
-      const response = await sdk.client.fetch(
-        "/admin/feature-flags",
-        {
-          method: "GET"
-        }
-      );
-      return response.feature_flags;
-    },
-    staleTime: 5 * 60 * 1e3,
-    // Cache for 5 minutes
-    cacheTime: 10 * 60 * 1e3
-    // Keep in cache for 10 minutes
-  });
-};
-
-// src/hooks/api/locales.tsx
-import { useQuery as useQuery3 } from "@tanstack/react-query";
-var LOCALES_QUERY_KEY = "locales";
-var localesQueryKeys = queryKeysFactory(LOCALES_QUERY_KEY);
-
-// src/hooks/api/notification.tsx
-import { useQuery as useQuery4 } from "@tanstack/react-query";
-var NOTIFICATION_QUERY_KEY = "notification";
-var notificationQueryKeys = queryKeysFactory(NOTIFICATION_QUERY_KEY);
-var useNotifications = (query, options) => {
-  const { data, ...rest } = useQuery4({
-    queryFn: () => sdk.admin.notification.list(query),
-    queryKey: notificationQueryKeys.list(query),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-
-// src/hooks/api/plugins.tsx
-import { useQuery as useQuery5 } from "@tanstack/react-query";
-var PLUGINS_QUERY_KEY = "plugins";
-var pluginsQueryKeys = queryKeysFactory(PLUGINS_QUERY_KEY);
-
-// src/hooks/api/translations.tsx
-import {
-  useInfiniteQuery,
-  useMutation as useMutation2,
-  useQuery as useQuery6
-} from "@tanstack/react-query";
-var TRANSLATIONS_QUERY_KEY = "translations";
-var translationsQueryKeys = queryKeysFactory(TRANSLATIONS_QUERY_KEY);
-var TRANSLATION_SETTINGS_QUERY_KEY = "translation_settings";
-var translationSettingsQueryKeys = queryKeysFactory(
-  TRANSLATION_SETTINGS_QUERY_KEY
-);
-var TRANSLATION_STATISTICS_QUERY_KEY = "translation_statistics";
-var translationStatisticsQueryKeys = queryKeysFactory(
-  TRANSLATION_STATISTICS_QUERY_KEY
-);
-var TRANSLATION_ENTITIES_QUERY_KEY = "translation_entities";
-var translationEntitiesQueryKeys = queryKeysFactory(
-  TRANSLATION_ENTITIES_QUERY_KEY
-);
-
-// src/hooks/api/users.tsx
-import {
-  useMutation as useMutation3,
-  useQuery as useQuery7
-} from "@tanstack/react-query";
-var USERS_QUERY_KEY = "users";
-var usersQueryKeys = {
-  ...queryKeysFactory(USERS_QUERY_KEY),
-  me: () => [USERS_QUERY_KEY, "me"]
-};
-var useMe = (query, options) => {
-  const { data, ...rest } = useQuery7({
-    queryFn: () => sdk.admin.user.me(query),
-    queryKey: usersQueryKeys.me(),
-    ...options
-  });
-  return {
-    ...data,
-    ...rest
-  };
-};
-
-// src/hooks/api/views.tsx
-import {
-  useMutation as useMutation4,
-  useQuery as useQuery8
-} from "@tanstack/react-query";
-var VIEWS_QUERY_KEY = "views";
-var _viewsKeys = queryKeysFactory(VIEWS_QUERY_KEY);
-_viewsKeys.columns = function(entity) {
-  return [this.all, "columns", entity];
-};
-_viewsKeys.active = function(entity) {
-  return [this.detail(entity), "active"];
-};
-_viewsKeys.configurations = function(entity, query) {
-  const key = [this.all, "configurations", entity];
-  if (query !== void 0) {
-    key.push(query);
-  }
-  return key;
-};
-
-// src/hooks/api/workflow-executions.tsx
-import { useQuery as useQuery9 } from "@tanstack/react-query";
-var WORKFLOW_EXECUTIONS_QUERY_KEY = "workflow_executions";
-var workflowExecutionsQueryKeys = queryKeysFactory(
-  WORKFLOW_EXECUTIONS_QUERY_KEY
-);
-
-export {
-  useFeatureFlags,
-  useMe,
-  useCloudAuthEnabled,
-  useCreateCloudAuthUser,
-  notificationQueryKeys,
-  useNotifications
-};

package/dist/login-BRUR5XXN.mjs

@@ -1,291 +0,0 @@
-import {
-  useCloudAuthEnabled,
-  useCreateCloudAuthUser
-} from "./chunk-NQEMGMWU.mjs";
-import {
-  useExtension
-} from "./chunk-C5P5PL3E.mjs";
-import {
-  isFetchError
-} from "./chunk-QYOO4QR6.mjs";
-import {
-  AvatarBox
-} from "./chunk-JSJZMTQG.mjs";
-import {
-  Form,
-  sdk,
-  useSignInWithEmailPass
-} from "./chunk-4VYJHIB3.mjs";
-import "./chunk-QZ7TP4HQ.mjs";
-
-// src/routes/login/login.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Alert, Button as Button2, Heading, Hint, Input, Text } from "@acmekit/ui";
-import { useForm } from "react-hook-form";
-import { Trans, useTranslation as useTranslation2 } from "react-i18next";
-import { Link, useLocation, useNavigate as useNavigate2 } from "react-router-dom";
-import * as z from "zod";
-
-// src/routes/login/components/cloud-auth-login.tsx
-import { Spinner } from "@acmekit/icons";
-import { Button, toast } from "@acmekit/ui";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { decodeToken } from "react-jwt";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CLOUD_AUTH_PROVIDER = "cloud";
-var CloudAuthLogin = () => {
-  const { t } = useTranslation();
-  const [searchParams] = useSearchParams();
-  const { data: cloudAuth } = useCloudAuthEnabled();
-  const isAutoLogin = searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER && searchParams.get("auto") === "true";
-  const isCallback = searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER && (searchParams.has("code") || searchParams.has("error"));
-  const { handleLogin, isLoginPending } = useHandleLogin(isAutoLogin);
-  const { handleCallback, isCallbackPending } = useAuthCallback(searchParams);
-  const actionInitiated = useRef(false);
-  useEffect(() => {
-    if (actionInitiated.current) {
-      return;
-    }
-    if (isAutoLogin) {
-      actionInitiated.current = true;
-      handleLogin();
-    } else if (isCallback) {
-      actionInitiated.current = true;
-      handleCallback();
-    }
-  }, [isAutoLogin, isCallback, handleLogin, handleCallback]);
-  if (isAutoLogin || isCallback) {
-    return /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle fixed inset-0 z-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) });
-  }
-  if (!cloudAuth?.enabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("hr", { className: "bg-ui-border-base my-4" }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "secondary",
-        onClick: handleLogin,
-        className: "w-full",
-        disabled: isLoginPending || isCallbackPending,
-        isLoading: isLoginPending || isCallbackPending,
-        children: t("auth.login.cloud")
-      }
-    )
-  ] });
-};
-var useHandleLogin = (isAutoLogin) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [isPending, setIsPending] = useState(false);
-  const handleLogin = useCallback(async () => {
-    setIsPending(true);
-    try {
-      const result = await sdk.auth.login("user", CLOUD_AUTH_PROVIDER, {
-        // setting callback_url in case the admin is on a different domain, or the backend URL is set to just "/" which won't work for the callback
-        callback_url: `${window.location.origin}${window.location.pathname}?auth_provider=${CLOUD_AUTH_PROVIDER}`
-      });
-      if (typeof result === "object" && result.location) {
-        window.location.href = result.location;
-        return;
-      }
-      throw new Error("Unexpected login response");
-    } catch {
-      toast.error(t("auth.login.authenticationFailed"));
-      if (isAutoLogin) {
-        navigate("/login");
-      }
-    }
-    setIsPending(false);
-  }, [t, navigate, isAutoLogin]);
-  return { handleLogin, isLoginPending: isPending };
-};
-var useAuthCallback = (searchParams) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { mutateAsync: createCloudAuthUser } = useCreateCloudAuthUser();
-  const [isPending, setIsPending] = useState(false);
-  const handleCallback = useCallback(async () => {
-    setIsPending(true);
-    try {
-      let token;
-      try {
-        const query = Object.fromEntries(searchParams);
-        delete query.auth_provider;
-        token = await sdk.auth.callback("user", CLOUD_AUTH_PROVIDER, query);
-      } catch (error) {
-        throw new Error("Authentication callback failed");
-      }
-      const decodedToken = decodeToken(token);
-      if (!decodedToken?.actor_id) {
-        await createCloudAuthUser();
-        const refreshedToken = await sdk.auth.refresh({
-          Authorization: `Bearer ${token}`
-          // passing it manually in case the auth type is session
-        });
-        if (!refreshedToken) {
-          throw new Error("Failed to refresh token after user creation");
-        }
-      }
-      navigate("/");
-    } catch (error) {
-      toast.error(t("auth.login.authenticationFailed"));
-      navigate("/login");
-    }
-    setIsPending(false);
-  }, [searchParams, t, createCloudAuthUser, navigate]);
-  return { handleCallback, isCallbackPending: isPending };
-};
-
-// src/routes/login/login.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var LoginSchema = z.object({
-  email: z.string().email(),
-  password: z.string()
-});
-var Login = () => {
-  const { t } = useTranslation2();
-  const location = useLocation();
-  const navigate = useNavigate2();
-  const { getWidgets } = useExtension();
-  const from = location.state?.from?.pathname || "/orders";
-  const form = useForm({
-    resolver: zodResolver(LoginSchema),
-    defaultValues: {
-      email: "",
-      password: ""
-    }
-  });
-  const { mutateAsync, isPending } = useSignInWithEmailPass();
-  const handleSubmit = form.handleSubmit(async ({ email, password }) => {
-    await mutateAsync(
-      {
-        email,
-        password
-      },
-      {
-        onError: (error) => {
-          if (isFetchError(error)) {
-            if (error.status === 401) {
-              form.setError("email", {
-                type: "manual",
-                message: error.message
-              });
-              return;
-            }
-          }
-          form.setError("root.serverError", {
-            type: "manual",
-            message: error.message
-          });
-        },
-        onSuccess: () => {
-          navigate(from, { replace: true });
-        }
-      }
-    );
-  });
-  const serverError = form.formState.errors?.root?.serverError?.message;
-  const validationError = form.formState.errors.email?.message || form.formState.errors.password?.message;
-  return /* @__PURE__ */ jsx2("div", { className: "bg-ui-bg-subtle flex min-h-dvh w-dvw items-center justify-center", children: /* @__PURE__ */ jsxs2("div", { className: "m-4 flex w-full max-w-[280px] flex-col items-center", children: [
-    /* @__PURE__ */ jsx2(AvatarBox, {}),
-    /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx2(Heading, { children: t("login.title") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-ui-fg-subtle text-center", children: t("login.hint") })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-y-3", children: [
-      getWidgets("login.before").map((Component, i) => {
-        return /* @__PURE__ */ jsx2(Component, {}, i);
-      }),
-      /* @__PURE__ */ jsx2(Form, { ...form, children: /* @__PURE__ */ jsxs2(
-        "form",
-        {
-          onSubmit: handleSubmit,
-          className: "flex w-full flex-col gap-y-6",
-          children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsx2(
-                Form.Field,
-                {
-                  control: form.control,
-                  name: "email",
-                  render: ({ field }) => {
-                    return /* @__PURE__ */ jsx2(Form.Item, { children: /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
-                      Input,
-                      {
-                        autoComplete: "email",
-                        ...field,
-                        className: "bg-ui-bg-field-component",
-                        placeholder: t("fields.email")
-                      }
-                    ) }) });
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                Form.Field,
-                {
-                  control: form.control,
-                  name: "password",
-                  render: ({ field }) => {
-                    return /* @__PURE__ */ jsxs2(Form.Item, { children: [
-                      /* @__PURE__ */ jsx2(Form.Label, {}),
-                      /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
-                        Input,
-                        {
-                          type: "password",
-                          autoComplete: "current-password",
-                          ...field,
-                          className: "bg-ui-bg-field-component",
-                          placeholder: t("fields.password")
-                        }
-                      ) })
-                    ] });
-                  }
-                }
-              )
-            ] }),
-            validationError && /* @__PURE__ */ jsx2("div", { className: "text-center", children: /* @__PURE__ */ jsx2(Hint, { className: "inline-flex", variant: "error", children: validationError }) }),
-            serverError && /* @__PURE__ */ jsx2(
-              Alert,
-              {
-                className: "bg-ui-bg-base items-center p-2",
-                dismissible: true,
-                variant: "error",
-                children: serverError
-              }
-            ),
-            /* @__PURE__ */ jsx2(Button2, { className: "w-full", type: "submit", isLoading: isPending, children: t("actions.continueWithEmail") })
-          ]
-        }
-      ) }),
-      [...getWidgets("login.after"), CloudAuthLogin].map(
-        (Component, i) => {
-          return /* @__PURE__ */ jsx2(Component, {}, i);
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted txt-small my-6", children: /* @__PURE__ */ jsx2(
-      Trans,
-      {
-        i18nKey: "login.forgotPassword",
-        components: [
-          /* @__PURE__ */ jsx2(
-            Link,
-            {
-              to: "/reset-password",
-              className: "text-ui-fg-interactive transition-fg hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover font-medium outline-none"
-            },
-            "reset-password-link"
-          )
-        ]
-      }
-    ) })
-  ] }) });
-};
-export {
-  Login as Component
-};