@mesob/auth-react 0.3.5 → 0.4.1

package/dist/chunk-35TCGAW3.js

@@ -0,0 +1,98 @@
+import {
+  DataTable
+} from "./chunk-TFVBER3Y.js";
+import {
+  useApi
+} from "./chunk-72YRO3A7.js";
+
+// src/components/iam/permissions.tsx
+import { Badge, Button } from "@mesob/ui/components";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Permissions() {
+  const { hooks } = useApi();
+  const [page, setPage] = useState(1);
+  const limit = 20;
+  const { data, isLoading, error } = hooks.useQuery("get", "/permissions", {
+    params: {
+      query: {
+        page: String(page),
+        limit: String(limit)
+      }
+    }
+  });
+  const columns = [
+    {
+      key: "activity",
+      header: "Permission",
+      cell: (permission) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: permission.activity }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mt-1 font-mono text-xs", children: permission.id })
+      ] })
+    },
+    {
+      key: "application",
+      header: "Application",
+      cell: (permission) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: permission.application })
+    },
+    {
+      key: "feature",
+      header: "Feature",
+      cell: (permission) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: permission.feature })
+    },
+    {
+      key: "description",
+      header: "Description",
+      cell: (permission) => /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: String(permission.description ?? "\u2014") })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-destructive", children: "Error loading permissions" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", children: "Permissions" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "View the permission catalog for this tenant" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Seed Permissions" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        data: data?.permissions || [],
+        columns,
+        isLoading,
+        emptyMessage: "No permissions found"
+      }
+    ),
+    data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage((prev) => prev - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  Permissions
+};
+//# sourceMappingURL=chunk-35TCGAW3.js.map

package/dist/chunk-35TCGAW3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/iam/permissions.tsx"],"sourcesContent":["'use client';\n\nimport { Badge, Button } from '@mesob/ui/components';\nimport { useState } from 'react';\nimport { useApi } from '../../provider';\nimport { DataTable, type DataTableColumn } from '../shared/data-table';\n\n// Permission type from OpenAPI schema\ntype Permission = {\n  id: string;\n  description?: unknown;\n  activity: string;\n  application: string;\n  feature: string;\n};\n\nexport function Permissions() {\n  const { hooks } = useApi();\n  const [page, setPage] = useState(1);\n  const limit = 20;\n\n  // Use openapi-react-query hooks\n  const { data, isLoading, error } = hooks.useQuery('get', '/permissions', {\n    params: {\n      query: {\n        page: String(page),\n        limit: String(limit),\n      },\n    },\n  });\n\n  const columns: DataTableColumn<Permission>[] = [\n    {\n      key: 'activity',\n      header: 'Permission',\n      cell: (permission) => (\n        <div>\n          <p className=\"font-medium\">{permission.activity}</p>\n          <Badge variant=\"outline\" className=\"mt-1 font-mono text-xs\">\n            {permission.id}\n          </Badge>\n        </div>\n      ),\n    },\n    {\n      key: 'application',\n      header: 'Application',\n      cell: (permission) => (\n        <Badge variant=\"secondary\">{permission.application}</Badge>\n      ),\n    },\n    {\n      key: 'feature',\n      header: 'Feature',\n      cell: (permission) => (\n        <Badge variant=\"outline\">{permission.feature}</Badge>\n      ),\n    },\n    {\n      key: 'description',\n      header: 'Description',\n      cell: (permission) => (\n        <p className=\"text-sm text-muted-foreground max-w-xs truncate\">\n          {String(permission.description ?? '—')}\n        </p>\n      ),\n    },\n  ];\n\n  if (error) {\n    return (\n      <div className=\"p-6 text-center\">\n        <p className=\"text-destructive\">Error loading permissions</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full p-6 space-y-4\">\n      <div className=\"flex justify-between items-center\">\n        <div>\n          <h1 className=\"text-3xl font-bold\">Permissions</h1>\n          <p className=\"text-muted-foreground\">\n            View the permission catalog for this tenant\n          </p>\n        </div>\n        <Button variant=\"outline\">Seed Permissions</Button>\n      </div>\n\n      <DataTable\n        data={(data as { permissions: Permission[] })?.permissions || []}\n        columns={columns}\n        isLoading={isLoading}\n        emptyMessage=\"No permissions found\"\n      />\n\n      {data &&\n        'permissions' in data &&\n        data.permissions &&\n        (data.permissions as Permission[]).length >= limit && (\n          <div className=\"flex justify-between items-center\">\n            <Button\n              variant=\"outline\"\n              disabled={page === 1}\n              onClick={() => setPage((prev) => prev - 1)}\n            >\n              Previous\n            </Button>\n            <span className=\"text-sm text-muted-foreground\">Page {page}</span>\n            <Button\n              variant=\"outline\"\n              onClick={() => setPage((prev) => prev + 1)}\n            >\n              Next\n            </Button>\n          </div>\n        )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,OAAO,cAAc;AAC9B,SAAS,gBAAgB;AAiCjB,SACE,KADF;AApBD,SAAS,cAAc;AAC5B,QAAM,EAAE,MAAM,IAAI,OAAO;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,QAAQ;AAGd,QAAM,EAAE,MAAM,WAAW,MAAM,IAAI,MAAM,SAAS,OAAO,gBAAgB;AAAA,IACvE,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,MAAM,OAAO,IAAI;AAAA,QACjB,OAAO,OAAO,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,UAAyC;AAAA,IAC7C;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,CAAC,eACL,qBAAC,SACC;AAAA,4BAAC,OAAE,WAAU,eAAe,qBAAW,UAAS;AAAA,QAChD,oBAAC,SAAM,SAAQ,WAAU,WAAU,0BAChC,qBAAW,IACd;AAAA,SACF;AAAA,IAEJ;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,CAAC,eACL,oBAAC,SAAM,SAAQ,aAAa,qBAAW,aAAY;AAAA,IAEvD;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,CAAC,eACL,oBAAC,SAAM,SAAQ,WAAW,qBAAW,SAAQ;AAAA,IAEjD;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,CAAC,eACL,oBAAC,OAAE,WAAU,mDACV,iBAAO,WAAW,eAAe,QAAG,GACvC;AAAA,IAEJ;AAAA,EACF;AAEA,MAAI,OAAO;AACT,WACE,oBAAC,SAAI,WAAU,mBACb,8BAAC,OAAE,WAAU,oBAAmB,uCAAyB,GAC3D;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,wBACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SACC;AAAA,4BAAC,QAAG,WAAU,sBAAqB,yBAAW;AAAA,QAC9C,oBAAC,OAAE,WAAU,yBAAwB,yDAErC;AAAA,SACF;AAAA,MACA,oBAAC,UAAO,SAAQ,WAAU,8BAAgB;AAAA,OAC5C;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAO,MAAwC,eAAe,CAAC;AAAA,QAC/D;AAAA,QACA;AAAA,QACA,cAAa;AAAA;AAAA,IACf;AAAA,IAEC,QACC,iBAAiB,QACjB,KAAK,eACJ,KAAK,YAA6B,UAAU,SAC3C,qBAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAU,SAAS;AAAA,UACnB,SAAS,MAAM,QAAQ,CAAC,SAAS,OAAO,CAAC;AAAA,UAC1C;AAAA;AAAA,MAED;AAAA,MACA,qBAAC,UAAK,WAAU,iCAAgC;AAAA;AAAA,QAAM;AAAA,SAAK;AAAA,MAC3D;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,QAAQ,CAAC,SAAS,OAAO,CAAC;AAAA,UAC1C;AAAA;AAAA,MAED;AAAA,OACF;AAAA,KAEN;AAEJ;","names":[]}

package/dist/chunk-3BZC4VVD.js

@@ -0,0 +1,36 @@
+import {
+  AppLink,
+  useNavigate
+} from "./chunk-T6P7UHVP.js";
+import {
+  useApi
+} from "./chunk-72YRO3A7.js";
+
+// src/pages/iam/shared/page-helpers.tsx
+import { jsx } from "react/jsx-runtime";
+var authApi$ = {
+  useQuery(...args) {
+    const { hooks } = useApi();
+    return hooks.useQuery(...args);
+  },
+  useMutation(...args) {
+    const { hooks } = useApi();
+    return hooks.useMutation(...args);
+  }
+};
+function Link(props) {
+  return /* @__PURE__ */ jsx(AppLink, { ...props });
+}
+function useRouter() {
+  const navigate = useNavigate();
+  return {
+    push: navigate
+  };
+}
+
+export {
+  authApi$,
+  Link,
+  useRouter
+};
+//# sourceMappingURL=chunk-3BZC4VVD.js.map

package/dist/chunk-3BZC4VVD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/iam/shared/page-helpers.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps } from 'react';\nimport { useApi } from '../../../provider';\nimport { AppLink, useNavigate } from './navigation';\n\nexport { defaultEntityQueryOptions } from '../../../lib/query-options';\n\ntype HookArgs = [string, string, ...unknown[]];\n\nexport const authApi$ = {\n  useQuery(...args: HookArgs) {\n    const { hooks } = useApi();\n\n    return hooks.useQuery(...args);\n  },\n  useMutation(...args: HookArgs) {\n    const { hooks } = useApi();\n\n    return hooks.useMutation(...args);\n  },\n};\n\nexport function Link(props: ComponentProps<typeof AppLink>) {\n  return <AppLink {...props} />;\n}\n\nexport function useRouter() {\n  const navigate = useNavigate();\n\n  return {\n    push: navigate,\n  };\n}\n"],"mappings":";;;;;;;;;AAwBS;AAdF,IAAM,WAAW;AAAA,EACtB,YAAY,MAAgB;AAC1B,UAAM,EAAE,MAAM,IAAI,OAAO;AAEzB,WAAO,MAAM,SAAS,GAAG,IAAI;AAAA,EAC/B;AAAA,EACA,eAAe,MAAgB;AAC7B,UAAM,EAAE,MAAM,IAAI,OAAO;AAEzB,WAAO,MAAM,YAAY,GAAG,IAAI;AAAA,EAClC;AACF;AAEO,SAAS,KAAK,OAAuC;AAC1D,SAAO,oBAAC,WAAS,GAAG,OAAO;AAC7B;AAEO,SAAS,YAAY;AAC1B,QAAM,WAAW,YAAY;AAE7B,SAAO;AAAA,IACL,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/chunk-45UCLKH2.js

@@ -0,0 +1,188 @@
+import {
+  VerificationForm
+} from "./chunk-FFR5UHTS.js";
+import {
+  handleError
+} from "./chunk-55BMNC4S.js";
+import {
+  AuthLayout
+} from "./chunk-DPH2PHK3.js";
+import {
+  useTranslator
+} from "./chunk-QNCE2B5O.js";
+import {
+  useApi,
+  useConfig
+} from "./chunk-72YRO3A7.js";
+
+// src/components/auth/verify-phone.tsx
+import { Alert, AlertDescription, AlertTitle } from "@mesob/ui/components";
+import { useMesob } from "@mesob/ui/providers";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VerifyPhone = ({
+  verificationId,
+  context,
+  phone = "",
+  redirectUrl
+}) => {
+  const { hooks, refresh, setAuth } = useApi();
+  const { config } = useConfig();
+  const mesob = useMesob();
+  const Link = mesob?.navigation?.Link;
+  const t = useTranslator("Auth.verification");
+  const common = useTranslator("Common");
+  const footer = useTranslator("Auth.forgotPassword.footer");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const verifyPhoneMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/confirm"
+  );
+  const requestPhoneMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  useEffect(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
+  const handleSubmit = async (values) => {
+    if (!verificationId) {
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.fallback")
+      });
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await verifyPhoneMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code,
+          context
+        }
+      });
+      if (res && "user" in res && "session" in res && res.session) {
+        setAuth(res);
+        onNavigate(defaultRedirect);
+        return;
+      }
+      await refresh();
+      onNavigate(defaultRedirect);
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleResend = async () => {
+    setError(null);
+    try {
+      const targetPhone = context === "sign-up" ? phone : null;
+      if (!targetPhone) {
+        setError({
+          title: t("errors.fallback"),
+          description: t("phone.missingPhone")
+        });
+        return;
+      }
+      const res = await requestPhoneMutation.mutateAsync({
+        body: {
+          phone: targetPhone,
+          context
+        }
+      });
+      if (res && "verificationId" in res && res.verificationId) {
+        onNavigate(
+          `/auth/verify-phone?context=${context}&verificationId=${res.verificationId}&phone=${targetPhone}`
+        );
+        return;
+      }
+      setError({
+        title: t("errors.fallback"),
+        description: t("phone.resendFailed")
+      });
+    } catch (err) {
+      handleError(err, setError, t);
+    }
+  };
+  if (!verificationId) {
+    return /* @__PURE__ */ jsx(
+      AuthLayout,
+      {
+        title: common("invalidLinkTitle"),
+        description: common("invalidLinkDescription"),
+        footer: /* @__PURE__ */ jsx(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }),
+        children: /* @__PURE__ */ jsx("div", {})
+      }
+    );
+  }
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    AuthLayout,
+    {
+      title: config.ui.name,
+      description: t("phone.description", {
+        target: phone || t("phone.missingPhone")
+      }),
+      logoImage,
+      footer: Link ? /* @__PURE__ */ jsx(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: signInLink,
+          onClick: (e) => {
+            e.preventDefault();
+            onNavigate(signInLink);
+          },
+          className: "text-primary hover:underline",
+          children: footer("backToSignIn")
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          VerificationForm,
+          {
+            verificationId,
+            onSubmit: handleSubmit,
+            onResend: handleResend,
+            isLoading: isLoading || verifyPhoneMutation.isPending || requestPhoneMutation.isPending,
+            error
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: errorContent.description })
+        ] })
+      ]
+    }
+  );
+};
+
+export {
+  VerifyPhone
+};
+//# sourceMappingURL=chunk-45UCLKH2.js.map

package/dist/chunk-45UCLKH2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/auth/verify-phone.tsx"],"sourcesContent":["'use client';\n\nimport { Alert, AlertDescription, AlertTitle } from '@mesob/ui/components';\nimport { useMesob } from '@mesob/ui/providers';\nimport { IconAlertCircle } from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport { toast } from 'sonner';\nimport { useTranslator } from '../../hooks/use-translator';\nimport { useApi, useConfig } from '../../provider';\nimport type { AuthResponse } from '../../types';\nimport type { AuthErrorContent } from '../../utils/handle-error';\nimport { handleError } from '../../utils/handle-error';\nimport { AuthLayout } from './auth-layout';\nimport { VerificationForm } from './verification-form';\n\ntype VerifyPhoneProps = {\n  verificationId: string;\n  context: 'sign-in' | 'sign-up';\n  phone?: string;\n  redirectUrl?: string;\n};\n\nexport const VerifyPhone = ({\n  verificationId,\n  context,\n  phone = '',\n  redirectUrl,\n}: VerifyPhoneProps) => {\n  const { hooks, refresh, setAuth } = useApi();\n  const { config } = useConfig();\n  const mesob = useMesob();\n  const Link = mesob?.navigation?.Link;\n  const t = useTranslator('Auth.verification');\n  const common = useTranslator('Common');\n  const footer = useTranslator('Auth.forgotPassword.footer');\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<AuthErrorContent | null>(null);\n\n  const verifyPhoneMutation = hooks.useMutation(\n    'post',\n    '/phone/verification/confirm',\n  );\n  const requestPhoneMutation = hooks.useMutation(\n    'post',\n    '/phone/verification/request',\n  );\n\n  const signInLink = config.navigation?.links?.signIn || '/auth/sign-in';\n  const onNavigate =\n    config.navigation?.onNavigate ||\n    ((path: string) => {\n      if (typeof window !== 'undefined') {\n        window.location.href = path;\n      }\n    });\n  const logoImage = config.ui.logoImage;\n  const defaultRedirect =\n    redirectUrl || config.navigation?.defaultRedirectUrl || '/';\n\n  useEffect(() => {\n    if (error) {\n      toast.error(error.title || 'Error', {\n        description: error.description,\n      });\n    }\n  }, [error]);\n\n  const handleSubmit = async (values: { code: string }) => {\n    if (!verificationId) {\n      setError({\n        title: t('errors.fallback'),\n        description: t('errors.fallback'),\n      });\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const res = await verifyPhoneMutation.mutateAsync({\n        body: {\n          verificationId,\n          code: values.code,\n          context,\n        },\n      });\n      if (res && 'user' in res && 'session' in res && res.session) {\n        setAuth(res as AuthResponse);\n        onNavigate(defaultRedirect);\n        return;\n      }\n      await refresh();\n      onNavigate(defaultRedirect);\n    } catch (err) {\n      handleError(err, setError, t);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleResend = async () => {\n    setError(null);\n    try {\n      const targetPhone = context === 'sign-up' ? phone : null;\n      if (!targetPhone) {\n        setError({\n          title: t('errors.fallback'),\n          description: t('phone.missingPhone'),\n        });\n        return;\n      }\n      const res = await requestPhoneMutation.mutateAsync({\n        body: {\n          phone: targetPhone,\n          context,\n        },\n      });\n      if (res && 'verificationId' in res && res.verificationId) {\n        onNavigate(\n          `/auth/verify-phone?context=${context}&verificationId=${res.verificationId}&phone=${targetPhone}`,\n        );\n        return;\n      }\n      setError({\n        title: t('errors.fallback'),\n        description: t('phone.resendFailed'),\n      });\n    } catch (err) {\n      handleError(err, setError, t);\n    }\n  };\n\n  if (!verificationId) {\n    return (\n      <AuthLayout\n        title={common('invalidLinkTitle')}\n        description={common('invalidLinkDescription')}\n        footer={\n          <Link href={signInLink} className=\"text-primary hover:underline\">\n            {footer('backToSignIn')}\n          </Link>\n        }\n      >\n        <div />\n      </AuthLayout>\n    );\n  }\n\n  let errorContent: AuthErrorContent | null = null;\n  if (error) {\n    if (typeof error === 'string') {\n      errorContent = { title: 'Error', description: error };\n    } else {\n      errorContent = error;\n    }\n  }\n\n  return (\n    <AuthLayout\n      title={config.ui.name}\n      description={t('phone.description', {\n        target: phone || t('phone.missingPhone'),\n      })}\n      logoImage={logoImage}\n      footer={\n        Link ? (\n          <Link href={signInLink} className=\"text-primary hover:underline\">\n            {footer('backToSignIn')}\n          </Link>\n        ) : (\n          <a\n            href={signInLink}\n            onClick={(e) => {\n              e.preventDefault();\n              onNavigate(signInLink);\n            }}\n            className=\"text-primary hover:underline\"\n          >\n            {footer('backToSignIn')}\n          </a>\n        )\n      }\n    >\n      <VerificationForm\n        verificationId={verificationId}\n        onSubmit={handleSubmit}\n        onResend={handleResend}\n        isLoading={\n          isLoading ||\n          verifyPhoneMutation.isPending ||\n          requestPhoneMutation.isPending\n        }\n        error={error}\n      />\n      {errorContent && (\n        <Alert variant=\"destructive\" className=\"mt-4\">\n          <IconAlertCircle className=\"h-4 w-4\" />\n          <AlertTitle>{errorContent.title}</AlertTitle>\n          <AlertDescription>{errorContent.description}</AlertDescription>\n        </Alert>\n      )}\n    </AuthLayout>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-55BMNC4S.js

@@ -0,0 +1,115 @@
+// src/constants/auth.error.codes.ts
+var AUTH_ERROR_MAPPING = {
+  USER_NOT_FOUND: {
+    title: "Account Not Found",
+    description: "We could not find an account with that identifier. Please check your spelling or sign up."
+  },
+  INVALID_PASSWORD: {
+    title: "Invalid Password",
+    description: "The password you entered is incorrect. Please try again."
+  },
+  USER_EXISTS: {
+    title: "Account Already Exists",
+    description: "An account with this identifier already exists. Please sign in instead."
+  },
+  VERIFICATION_EXPIRED: {
+    title: "Verification Expired",
+    description: "The verification code or link has expired. Please request a new one."
+  },
+  VERIFICATION_MISMATCH: {
+    title: "Invalid Code",
+    description: "The verification code you entered is invalid. Please double-check and try again."
+  },
+  VERIFICATION_NOT_FOUND: {
+    title: "Verification Not Found",
+    description: "We could not find a pending verification request. Please restart the process."
+  },
+  TOO_MANY_ATTEMPTS: {
+    title: "Too Many Attempts",
+    description: "You have made too many requests recently. Please wait a moment before trying again."
+  },
+  REQUIRES_VERIFICATION: {
+    title: "Verification Required",
+    description: "You need to verify your account before you can continue. Please check your email or phone."
+  },
+  UNAUTHORIZED: {
+    title: "Unauthorized",
+    description: "You are not authorized to perform this action. Please sign in again."
+  },
+  ACCESS_DENIED: {
+    title: "Access Denied",
+    description: "You do not have permission to access this resource. Please contact support if you believe this is an error."
+  },
+  HAS_NO_PASSWORD: {
+    title: "No Password Set",
+    description: "Your account does not have a password yet. Continue to set a password before signing in."
+  },
+  PASSWORD_ALREADY_SET: {
+    title: "Password Already Set",
+    description: "This account already has a password. Use the normal sign-in form instead."
+  }
+};
+var validCodes = Object.keys(AUTH_ERROR_MAPPING);
+
+// src/utils/handle-error.ts
+function isAuthError(err) {
+  return typeof err === "object" && err !== null && "message" in err && typeof err.message === "string";
+}
+function extractErrorCode(err) {
+  if (err.code && validCodes.includes(err.code)) {
+    return err.code;
+  }
+  if (err.message) {
+    const messageUpper = err.message.toUpperCase().trim();
+    if (validCodes.includes(messageUpper)) {
+      return messageUpper;
+    }
+  }
+  return "";
+}
+function sanitizeErrorMessage(message) {
+  const lowerMessage = message.toLowerCase();
+  const isDatabaseError = lowerMessage.includes("failed query") || lowerMessage.includes("select") || lowerMessage.includes("insert") || lowerMessage.includes("update") || lowerMessage.includes("delete") || lowerMessage.includes("from") || lowerMessage.includes("where") || lowerMessage.includes("limit") || lowerMessage.includes("params:") || lowerMessage.includes("query") || message.includes('"iam".') || message.includes('"tenants"') || message.includes('"users"') || message.includes('"sessions"') || message.includes('"accounts"') || lowerMessage.includes("relation") || lowerMessage.includes("column") || lowerMessage.includes("syntax error") || lowerMessage.includes("database") || lowerMessage.includes("postgres") || lowerMessage.includes("sql");
+  if (isDatabaseError) {
+    return "An error occurred while processing your request";
+  }
+  return message;
+}
+function handleAuthError(err, setError, t) {
+  const errorCode = extractErrorCode(err);
+  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
+    const mapping = AUTH_ERROR_MAPPING[errorCode];
+    setError({
+      title: mapping.title,
+      description: mapping.description
+    });
+    return;
+  }
+  const sanitizedMessage = sanitizeErrorMessage(
+    err.message || t("errors.fallback")
+  );
+  setError({
+    title: t("errors.fallback"),
+    description: sanitizedMessage
+  });
+}
+function handleGenericError(err, setError, t) {
+  const rawMessage = err instanceof Error ? err.message : t("errors.fallback");
+  const sanitizedMessage = sanitizeErrorMessage(rawMessage);
+  setError({
+    title: "Error",
+    description: sanitizedMessage
+  });
+}
+var handleError = (err, setError, t) => {
+  if (isAuthError(err)) {
+    handleAuthError(err, setError, t);
+  } else {
+    handleGenericError(err, setError, t);
+  }
+};
+
+export {
+  handleError
+};
+//# sourceMappingURL=chunk-55BMNC4S.js.map

package/dist/chunk-55BMNC4S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants/auth.error.codes.ts","../src/utils/handle-error.ts"],"sourcesContent":["export const AUTH_ERROR_MAPPING: Record<\n  string,\n  { title: string; description: string }\n> = {\n  USER_NOT_FOUND: {\n    title: 'Account Not Found',\n    description:\n      'We could not find an account with that identifier. Please check your spelling or sign up.',\n  },\n  INVALID_PASSWORD: {\n    title: 'Invalid Password',\n    description: 'The password you entered is incorrect. Please try again.',\n  },\n  USER_EXISTS: {\n    title: 'Account Already Exists',\n    description:\n      'An account with this identifier already exists. Please sign in instead.',\n  },\n  VERIFICATION_EXPIRED: {\n    title: 'Verification Expired',\n    description:\n      'The verification code or link has expired. Please request a new one.',\n  },\n  VERIFICATION_MISMATCH: {\n    title: 'Invalid Code',\n    description:\n      'The verification code you entered is invalid. Please double-check and try again.',\n  },\n  VERIFICATION_NOT_FOUND: {\n    title: 'Verification Not Found',\n    description:\n      'We could not find a pending verification request. Please restart the process.',\n  },\n  TOO_MANY_ATTEMPTS: {\n    title: 'Too Many Attempts',\n    description:\n      'You have made too many requests recently. Please wait a moment before trying again.',\n  },\n  REQUIRES_VERIFICATION: {\n    title: 'Verification Required',\n    description:\n      'You need to verify your account before you can continue. Please check your email or phone.',\n  },\n  UNAUTHORIZED: {\n    title: 'Unauthorized',\n    description:\n      'You are not authorized to perform this action. Please sign in again.',\n  },\n  ACCESS_DENIED: {\n    title: 'Access Denied',\n    description:\n      'You do not have permission to access this resource. Please contact support if you believe this is an error.',\n  },\n  HAS_NO_PASSWORD: {\n    title: 'No Password Set',\n    description:\n      'Your account does not have a password yet. Continue to set a password before signing in.',\n  },\n  PASSWORD_ALREADY_SET: {\n    title: 'Password Already Set',\n    description:\n      'This account already has a password. Use the normal sign-in form instead.',\n  },\n};\n\nexport const validCodes = Object.keys(AUTH_ERROR_MAPPING);\n","import { AUTH_ERROR_MAPPING, validCodes } from '../constants/auth.error.codes';\nimport type { AuthError } from '../types';\n\nexport type AuthErrorContent = {\n  title: string;\n  description: string;\n};\n\ntype TranslatorFunction = (\n  key: string,\n  params?: Record<string, string | number>,\n) => string;\n\n// Type guard to check if error is an AuthError\nfunction isAuthError(err: unknown): err is AuthError {\n  return (\n    typeof err === 'object' &&\n    err !== null &&\n    'message' in err &&\n    typeof (err as { message: unknown }).message === 'string'\n  );\n}\n\nfunction extractErrorCode(err: AuthError): string {\n  if (err.code && validCodes.includes(err.code)) {\n    return err.code;\n  }\n  if (err.message) {\n    const messageUpper = err.message.toUpperCase().trim();\n    if (validCodes.includes(messageUpper)) {\n      return messageUpper;\n    }\n  }\n  return '';\n}\n\nfunction sanitizeErrorMessage(message: string): string {\n  const lowerMessage = message.toLowerCase();\n  const isDatabaseError =\n    lowerMessage.includes('failed query') ||\n    lowerMessage.includes('select') ||\n    lowerMessage.includes('insert') ||\n    lowerMessage.includes('update') ||\n    lowerMessage.includes('delete') ||\n    lowerMessage.includes('from') ||\n    lowerMessage.includes('where') ||\n    lowerMessage.includes('limit') ||\n    lowerMessage.includes('params:') ||\n    lowerMessage.includes('query') ||\n    message.includes('\"iam\".') ||\n    message.includes('\"tenants\"') ||\n    message.includes('\"users\"') ||\n    message.includes('\"sessions\"') ||\n    message.includes('\"accounts\"') ||\n    lowerMessage.includes('relation') ||\n    lowerMessage.includes('column') ||\n    lowerMessage.includes('syntax error') ||\n    lowerMessage.includes('database') ||\n    lowerMessage.includes('postgres') ||\n    lowerMessage.includes('sql');\n\n  if (isDatabaseError) {\n    return 'An error occurred while processing your request';\n  }\n\n  return message;\n}\n\nfunction handleAuthError(\n  err: AuthError,\n  setError: (error: AuthErrorContent | null) => void,\n  t: TranslatorFunction,\n) {\n  const errorCode = extractErrorCode(err);\n\n  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {\n    const mapping = AUTH_ERROR_MAPPING[errorCode];\n    setError({\n      title: mapping.title,\n      description: mapping.description,\n    });\n    return;\n  }\n\n  const sanitizedMessage = sanitizeErrorMessage(\n    err.message || t('errors.fallback'),\n  );\n  setError({\n    title: t('errors.fallback'),\n    description: sanitizedMessage,\n  });\n}\n\nfunction handleGenericError(\n  err: unknown,\n  setError: (error: AuthErrorContent | null) => void,\n  t: TranslatorFunction,\n) {\n  const rawMessage = err instanceof Error ? err.message : t('errors.fallback');\n  const sanitizedMessage = sanitizeErrorMessage(rawMessage);\n  setError({\n    title: 'Error',\n    description: sanitizedMessage,\n  });\n}\n\nexport const handleError = (\n  err: unknown,\n  setError: (error: AuthErrorContent | null) => void,\n  t: TranslatorFunction,\n) => {\n  if (isAuthError(err)) {\n    handleAuthError(err, setError, t);\n  } else {\n    handleGenericError(err, setError, t);\n  }\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-5F5FZMHE.js

@@ -0,0 +1,94 @@
+import {
+  VerifyChangePhoneForm
+} from "./chunk-ZG6WFZHX.js";
+import {
+  RequestChangePhoneForm
+} from "./chunk-C26NPUPI.js";
+import {
+  useSession
+} from "./chunk-72YRO3A7.js";
+
+// src/components/profile/change-phone-form.tsx
+import {
+  Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@mesob/ui/components";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChangePhoneForm() {
+  const { user } = useSession();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showOtp, setShowOtp] = useState(false);
+  const [verificationId, setVerificationId] = useState(null);
+  const [newPhone, setNewPhone] = useState("");
+  const resetForms = () => {
+    setShowOtp(false);
+    setVerificationId(null);
+    setNewPhone("");
+  };
+  const handleRequestSuccess = (id, phone) => {
+    setVerificationId(id);
+    setNewPhone(phone);
+    setShowOtp(true);
+  };
+  const handleVerifySuccess = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const title = user?.phone ? "Change Phone" : "Add Phone";
+  const description = user?.phone ? "Update your phone number" : "Add a phone number to your account";
+  return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            className: "w-full justify-between p-4 h-auto"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx(
+      VerifyChangePhoneForm,
+      {
+        phone: newPhone,
+        verificationId,
+        onSuccess: handleVerifySuccess,
+        onCancel: handleCancel
+      }
+    ) : /* @__PURE__ */ jsx(
+      RequestChangePhoneForm,
+      {
+        onSuccess: handleRequestSuccess,
+        onCancel: handleCancel,
+        buttonText: title
+      }
+    ) })
+  ] }) });
+}
+
+export {
+  ChangePhoneForm
+};
+//# sourceMappingURL=chunk-5F5FZMHE.js.map

package/dist/chunk-5F5FZMHE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/profile/change-phone-form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@mesob/ui/components';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { useSession } from '../../provider';\nimport { RequestChangePhoneForm } from './request-change-phone-form';\nimport { VerifyChangePhoneForm } from './verify-change-phone-form';\n\nexport function ChangePhoneForm() {\n  const { user } = useSession();\n  const [isOpen, setIsOpen] = useState(false);\n  const [showOtp, setShowOtp] = useState(false);\n  const [verificationId, setVerificationId] = useState<string | null>(null);\n  const [newPhone, setNewPhone] = useState<string>('');\n\n  const resetForms = () => {\n    setShowOtp(false);\n    setVerificationId(null);\n    setNewPhone('');\n  };\n\n  const handleRequestSuccess = (id: string, phone: string) => {\n    setVerificationId(id);\n    setNewPhone(phone);\n    setShowOtp(true);\n  };\n\n  const handleVerifySuccess = () => {\n    resetForms();\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    resetForms();\n    setIsOpen(false);\n  };\n\n  const title = user?.phone ? 'Change Phone' : 'Add Phone';\n  const description = user?.phone\n    ? 'Update your phone number'\n    : 'Add a phone number to your account';\n\n  return (\n    <Collapsible open={isOpen} onOpenChange={setIsOpen}>\n      <div className=\"border rounded-lg\">\n        <CollapsibleTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"w-full justify-between p-4 h-auto\"\n            />\n          }\n        >\n          <div className=\"flex flex-col items-start\">\n            <span className=\"font-medium\">{title}</span>\n            <span className=\"text-sm text-muted-foreground\">{description}</span>\n          </div>\n          <IconChevronDown\n            className={`h-4 w-4 transition-transform ${\n              isOpen ? 'rotate-180' : ''\n            }`}\n          />\n        </CollapsibleTrigger>\n\n        <CollapsibleContent>\n          {showOtp ? (\n            <VerifyChangePhoneForm\n              phone={newPhone}\n              verificationId={verificationId}\n              onSuccess={handleVerifySuccess}\n              onCancel={handleCancel}\n            />\n          ) : (\n            <RequestChangePhoneForm\n              onSuccess={handleRequestSuccess}\n              onCancel={handleCancel}\n              buttonText={title}\n            />\n          )}\n        </CollapsibleContent>\n      </div>\n    </Collapsible>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AA4Cb,cAMF,YANE;AAvCL,SAAS,kBAAkB;AAChC,QAAM,EAAE,KAAK,IAAI,WAAW;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,EAAE;AAEnD,QAAM,aAAa,MAAM;AACvB,eAAW,KAAK;AAChB,sBAAkB,IAAI;AACtB,gBAAY,EAAE;AAAA,EAChB;AAEA,QAAM,uBAAuB,CAAC,IAAY,UAAkB;AAC1D,sBAAkB,EAAE;AACpB,gBAAY,KAAK;AACjB,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,sBAAsB,MAAM;AAChC,eAAW;AACX,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,eAAe,MAAM;AACzB,eAAW;AACX,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,QAAQ,MAAM,QAAQ,iBAAiB;AAC7C,QAAM,cAAc,MAAM,QACtB,6BACA;AAEJ,SACE,oBAAC,eAAY,MAAM,QAAQ,cAAc,WACvC,+BAAC,SAAI,WAAU,qBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QACE;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF;AAAA,+BAAC,SAAI,WAAU,6BACb;AAAA,gCAAC,UAAK,WAAU,eAAe,iBAAM;AAAA,YACrC,oBAAC,UAAK,WAAU,iCAAiC,uBAAY;AAAA,aAC/D;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,gCACT,SAAS,eAAe,EAC1B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,sBACE,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,WAAW;AAAA,QACX,UAAU;AAAA;AAAA,IACZ,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA;AAAA,IACd,GAEJ;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-5M7I7WNH.js

@@ -0,0 +1,31 @@
+// src/components/skeletons/auth-form-skeleton.tsx
+import { Skeleton } from "@mesob/ui/components";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthFormSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48 mx-auto" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64 mx-auto" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-px w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 mx-auto" })
+    ] })
+  ] });
+}
+
+export {
+  AuthFormSkeleton
+};
+//# sourceMappingURL=chunk-5M7I7WNH.js.map

package/dist/chunk-5M7I7WNH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/skeletons/auth-form-skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from '@mesob/ui/components';\n\nexport function AuthFormSkeleton() {\n  return (\n    <div className=\"w-full max-w-md space-y-6 p-6\">\n      <div className=\"space-y-2 text-center\">\n        <Skeleton className=\"h-8 w-48 mx-auto\" />\n        <Skeleton className=\"h-4 w-64 mx-auto\" />\n      </div>\n\n      <div className=\"space-y-4\">\n        <div className=\"space-y-2\">\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n\n        <div className=\"space-y-2\">\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n\n        <Skeleton className=\"h-10 w-full\" />\n      </div>\n\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-px w-full\" />\n        <Skeleton className=\"h-4 w-32 mx-auto\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AAKnB,SACE,KADF;AAHC,SAAS,mBAAmB;AACjC,SACE,qBAAC,SAAI,WAAU,iCACb;AAAA,yBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,YAAS,WAAU,oBAAmB;AAAA,MACvC,oBAAC,YAAS,WAAU,oBAAmB;AAAA,OACzC;AAAA,IAEA,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,aACb;AAAA,4BAAC,YAAS,WAAU,YAAW;AAAA,QAC/B,oBAAC,YAAS,WAAU,eAAc;AAAA,SACpC;AAAA,MAEA,qBAAC,SAAI,WAAU,aACb;AAAA,4BAAC,YAAS,WAAU,YAAW;AAAA,QAC/B,oBAAC,YAAS,WAAU,eAAc;AAAA,SACpC;AAAA,MAEA,oBAAC,YAAS,WAAU,eAAc;AAAA,OACpC;AAAA,IAEA,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,YAAS,WAAU,eAAc;AAAA,MAClC,oBAAC,YAAS,WAAU,oBAAmB;AAAA,OACzC;AAAA,KACF;AAEJ;","names":[]}