@civic/auth 0.0.1-beta.9 → 0.0.1-tsc.alpha.2

package/dist/cjs/src/shared/providers/TokenProvider.js

@@ -0,0 +1,80 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenContext = exports.TokenProvider = void 0;
+const react_1 = __importStar(require("react"));
+const react_query_1 = require("@tanstack/react-query");
+const useAuth_js_1 = require("../../shared/hooks/useAuth.js");
+const useSession_js_1 = require("../../shared/hooks/useSession.js");
+const jwt_1 = require("oslo/jwt");
+const jwt_js_1 = require("../../lib/jwt.js");
+const TokenContext = (0, react_1.createContext)(undefined);
+exports.TokenContext = TokenContext;
+const TokenProvider = ({ children }) => {
+    const { isLoading, error: authError } = (0, useAuth_js_1.useAuth)();
+    const session = (0, useSession_js_1.useSession)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const refreshTokenMutation = (0, react_query_1.useMutation)({
+        mutationFn: async () => {
+            // Implement token refresh logic here
+            throw new Error("Method not implemented.");
+        },
+        onSuccess: () => {
+            // Invalidate and refetch queries that depend on the auth session
+            queryClient.invalidateQueries({ queryKey: ["session"] });
+        },
+    });
+    const decodeTokens = (0, react_1.useMemo)(() => {
+        if (!session?.idToken)
+            return null;
+        const parsedJWT = (0, jwt_1.parseJWT)(session.idToken);
+        if (!parsedJWT)
+            return null;
+        const { forwardedTokens } = parsedJWT.payload;
+        return forwardedTokens
+            ? (0, jwt_js_1.convertForwardedTokenFormat)(forwardedTokens)
+            : null;
+    }, [session?.idToken]);
+    const value = (0, react_1.useMemo)(() => ({
+        accessToken: session.accessToken || null,
+        idToken: session.idToken || null,
+        forwardedTokens: decodeTokens || {},
+        refreshToken: refreshTokenMutation.mutateAsync,
+        isLoading,
+        error: (authError || refreshTokenMutation.error),
+    }), [
+        session.accessToken,
+        session.idToken,
+        decodeTokens,
+        refreshTokenMutation.mutateAsync,
+        refreshTokenMutation.error,
+        isLoading,
+        authError,
+    ]);
+    return (react_1.default.createElement(TokenContext.Provider, { value: value }, children));
+};
+exports.TokenProvider = TokenProvider;
+//# sourceMappingURL=TokenProvider.js.map

package/dist/cjs/src/shared/providers/TokenProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.js","sourceRoot":"","sources":["../../../../../src/shared/providers/TokenProvider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAAsD;AACtD,uDAAoE;AACpE,0DAAoD;AACpD,gEAA0D;AAE1D,kCAAoC;AACpC,yCAA2D;AAW3D,MAAM,YAAY,GAAG,IAAA,qBAAa,EAA+B,SAAS,CAAC,CAAC;AA0DpD,oCAAY;AAxDpC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC9D,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAClD,MAAM,OAAO,GAAG,IAAA,0BAAU,GAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,IAAA,4BAAc,GAAE,CAAC;IAErC,MAAM,oBAAoB,GAAG,IAAA,yBAAW,EAAC;QACvC,UAAU,EAAE,KAAK,IAAI,EAAE;YACrB,qCAAqC;YACrC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACd,iEAAiE;YACjE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QAC3D,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE,OAAO;YAAE,OAAO,IAAI,CAAC;QAEnC,MAAM,SAAS,GAAG,IAAA,cAAQ,EAAC,OAAO,CAAC,OAAO,CAAmB,CAAC;QAE9D,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC;QAE5B,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;QAE9C,OAAO,eAAe;YACpB,CAAC,CAAC,IAAA,oCAA2B,EAAC,eAAe,CAAC;YAC9C,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,IAAI;QACxC,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,IAAI;QAChC,eAAe,EAAE,YAAY,IAAI,EAAE;QACnC,YAAY,EAAE,oBAAoB,CAAC,WAAW;QAC9C,SAAS;QACT,KAAK,EAAE,CAAC,SAAS,IAAI,oBAAoB,CAAC,KAAK,CAAiB;KACjE,CAAC,EACF;QACE,OAAO,CAAC,WAAW;QACnB,OAAO,CAAC,OAAO;QACf,YAAY;QACZ,oBAAoB,CAAC,WAAW;QAChC,oBAAoB,CAAC,KAAK;QAC1B,SAAS;QACT,SAAS;KACV,CACF,CAAC;IAEF,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAyB,CACxE,CAAC;AACJ,CAAC,CAAC;AAGO,sCAAa","sourcesContent":["\"use client\";\nimport type { ReactNode } from \"react\";\nimport React, { createContext, useMemo } from \"react\";\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport { useAuth } from \"@/shared/hooks/useAuth.js\";\nimport { useSession } from \"@/shared/hooks/useSession.js\";\nimport type { ForwardedTokens, IdToken } from \"@/types.js\";\nimport { parseJWT } from \"oslo/jwt\";\nimport { convertForwardedTokenFormat } from \"@/lib/jwt.js\";\n\ntype TokenContextType = {\n  accessToken: string | null;\n  idToken: string | null;\n  forwardedTokens: ForwardedTokens;\n  refreshToken: () => Promise<void>;\n  isLoading: boolean;\n  error: Error | null;\n};\n\nconst TokenContext = createContext<TokenContextType | undefined>(undefined);\n\nconst TokenProvider = ({ children }: { children: ReactNode }) => {\n  const { isLoading, error: authError } = useAuth();\n  const session = useSession();\n  const queryClient = useQueryClient();\n\n  const refreshTokenMutation = useMutation({\n    mutationFn: async () => {\n      // Implement token refresh logic here\n      throw new Error(\"Method not implemented.\");\n    },\n    onSuccess: () => {\n      // Invalidate and refetch queries that depend on the auth session\n      queryClient.invalidateQueries({ queryKey: [\"session\"] });\n    },\n  });\n\n  const decodeTokens = useMemo(() => {\n    if (!session?.idToken) return null;\n\n    const parsedJWT = parseJWT(session.idToken) as IdToken | null;\n\n    if (!parsedJWT) return null;\n\n    const { forwardedTokens } = parsedJWT.payload;\n\n    return forwardedTokens\n      ? convertForwardedTokenFormat(forwardedTokens)\n      : null;\n  }, [session?.idToken]);\n\n  const value = useMemo(\n    () => ({\n      accessToken: session.accessToken || null,\n      idToken: session.idToken || null,\n      forwardedTokens: decodeTokens || {},\n      refreshToken: refreshTokenMutation.mutateAsync,\n      isLoading,\n      error: (authError || refreshTokenMutation.error) as Error | null,\n    }),\n    [\n      session.accessToken,\n      session.idToken,\n      decodeTokens,\n      refreshTokenMutation.mutateAsync,\n      refreshTokenMutation.error,\n      isLoading,\n      authError,\n    ],\n  );\n\n  return (\n    <TokenContext.Provider value={value}>{children}</TokenContext.Provider>\n  );\n};\n\nexport type { TokenContextType };\nexport { TokenProvider, TokenContext };\n"]}

package/dist/cjs/src/shared/providers/UserProvider.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { JWT } from "oslo/jwt";
+import type { AuthStorage, EmptyObject, User } from "../../types.js";
+import type { AuthContextType } from "../../shared/providers/AuthContext.js";
+type UserContextType<T extends Record<string, unknown> & JWT["payload"] = Record<string, unknown> & JWT["payload"]> = {
+    user: User<T> | null;
+} & Omit<AuthContextType, "isAuthenticated">;
+declare const UserContext: React.Context<UserContextType<Record<string, unknown> & object> | null>;
+declare const UserProvider: <T extends EmptyObject>({ children, storage, user: inputUser, signOut: inputSignOut, }: {
+    children: ReactNode;
+    storage: AuthStorage;
+    user?: User<T> | null;
+    signOut?: () => Promise<void>;
+}) => React.JSX.Element;
+export type { UserContextType };
+export { UserProvider, UserContext };
+//# sourceMappingURL=UserProvider.d.ts.map

package/dist/cjs/src/shared/providers/UserProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProvider.d.ts","sourceRoot":"","sources":["../../../../../src/shared/providers/UserProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAIjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,KAAK,eAAe,CAClB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC1E,GAAG,CAAC,SAAS,CAAC,IACd;IACF,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAE7C,QAAA,MAAM,WAAW,yEAA8C,CAAC;AAEhE,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS,WAAW,kEAKxC;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/B,sBA0CA,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/cjs/src/shared/providers/UserProvider.js

@@ -0,0 +1,65 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserContext = exports.UserProvider = void 0;
+const react_1 = __importStar(require("react"));
+const react_query_1 = require("@tanstack/react-query");
+const useAuth_js_1 = require("../../shared/hooks/useAuth.js");
+const useToken_js_1 = require("../../shared/hooks/useToken.js");
+const useSession_js_1 = require("../../shared/hooks/useSession.js");
+const UserSession_js_1 = require("../../shared/lib/UserSession.js");
+const UserContext = (0, react_1.createContext)(null);
+exports.UserContext = UserContext;
+const UserProvider = ({ children, storage, user: inputUser, signOut: inputSignOut, }) => {
+    const { isLoading: authLoading, error: authError } = (0, useAuth_js_1.useAuth)();
+    const session = (0, useSession_js_1.useSession)();
+    const { accessToken, idToken } = (0, useToken_js_1.useToken)();
+    const { signIn, signOut } = (0, useAuth_js_1.useAuth)();
+    const fetchUser = async () => {
+        if (!accessToken) {
+            return null;
+        }
+        const userSession = new UserSession_js_1.GenericUserSession(storage);
+        return userSession.get();
+    };
+    const { data: user, isLoading: userLoading, error: userError, } = (0, react_query_1.useQuery)({
+        queryKey: ["user", session?.idToken],
+        queryFn: fetchUser,
+        enabled: !!session?.idToken, // Only run the query if we have an access token
+    });
+    const isLoading = authLoading || userLoading;
+    const error = authError || userError;
+    const userWithIdToken = user ? { ...user, idToken } : null;
+    return (react_1.default.createElement(UserContext.Provider, { value: {
+            user: (inputUser || userWithIdToken) ?? null,
+            isLoading,
+            error,
+            signIn,
+            signOut: inputSignOut || signOut,
+        } }, children));
+};
+exports.UserProvider = UserProvider;
+//# sourceMappingURL=UserProvider.js.map

package/dist/cjs/src/shared/providers/UserProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProvider.js","sourceRoot":"","sources":["../../../../../src/shared/providers/UserProvider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAA6C;AAG7C,uDAAiD;AAGjD,0DAAoD;AACpD,4DAAsD;AACtD,gEAA0D;AAE1D,gEAAiE;AASjE,MAAM,WAAW,GAAG,IAAA,qBAAa,EAAyB,IAAI,CAAC,CAAC;AA0DzC,kCAAW;AAxDlC,MAAM,YAAY,GAAG,CAAwB,EAC3C,QAAQ,EACR,OAAO,EACP,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,YAAY,GAMtB,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAC/D,MAAM,OAAO,GAAG,IAAA,0BAAU,GAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAA,sBAAQ,GAAE,CAAC;IAC5C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAEtC,MAAM,SAAS,GAAG,KAAK,IAA0B,EAAE;QACjD,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,WAAW,GAAG,IAAI,mCAAkB,CAAC,OAAO,CAAC,CAAC;QACpD,OAAO,WAAW,CAAC,GAAG,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,EACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,SAAS,GACjB,GAA0C,IAAA,sBAAQ,EAAC;QAClD,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC;QACpC,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,gDAAgD;KAC9E,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,WAAW,IAAI,WAAW,CAAC;IAC7C,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC;IAErC,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAE3D,OAAO,CACL,8BAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,IAAI,EAAE,CAAC,SAAS,IAAI,eAAe,CAAC,IAAI,IAAI;YAC5C,SAAS;YACT,KAAK;YACL,MAAM;YACN,OAAO,EAAE,YAAY,IAAI,OAAO;SACjC,IAEA,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC,CAAC;AAIO,oCAAY","sourcesContent":["\"use client\";\n\nimport React, { createContext } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport type { JWT } from \"oslo/jwt\";\nimport type { AuthStorage, EmptyObject, User } from \"@/types.js\";\nimport { useAuth } from \"@/shared/hooks/useAuth.js\";\nimport { useToken } from \"@/shared/hooks/useToken.js\";\nimport { useSession } from \"@/shared/hooks/useSession.js\";\nimport type { AuthContextType } from \"@/shared/providers/AuthContext.js\";\nimport { GenericUserSession } from \"@/shared/lib/UserSession.js\";\n\ntype UserContextType<\n  T extends Record<string, unknown> & JWT[\"payload\"] = Record<string, unknown> &\n    JWT[\"payload\"],\n> = {\n  user: User<T> | null;\n} & Omit<AuthContextType, \"isAuthenticated\">;\n\nconst UserContext = createContext<UserContextType | null>(null);\n\nconst UserProvider = <T extends EmptyObject>({\n  children,\n  storage,\n  user: inputUser,\n  signOut: inputSignOut,\n}: {\n  children: ReactNode;\n  storage: AuthStorage;\n  user?: User<T> | null;\n  signOut?: () => Promise<void>;\n}) => {\n  const { isLoading: authLoading, error: authError } = useAuth();\n  const session = useSession();\n  const { accessToken, idToken } = useToken();\n  const { signIn, signOut } = useAuth();\n\n  const fetchUser = async (): Promise<User | null> => {\n    if (!accessToken) {\n      return null;\n    }\n    const userSession = new GenericUserSession(storage);\n    return userSession.get();\n  };\n\n  const {\n    data: user,\n    isLoading: userLoading,\n    error: userError,\n  }: UseQueryResult<User<T> | null, Error> = useQuery({\n    queryKey: [\"user\", session?.idToken],\n    queryFn: fetchUser,\n    enabled: !!session?.idToken, // Only run the query if we have an access token\n  });\n\n  const isLoading = authLoading || userLoading;\n  const error = authError || userError;\n\n  const userWithIdToken = user ? { ...user, idToken } : null;\n\n  return (\n    <UserContext.Provider\n      value={{\n        user: (inputUser || userWithIdToken) ?? null,\n        isLoading,\n        error,\n        signIn,\n        signOut: inputSignOut || signOut,\n      }}\n    >\n      {children}\n    </UserContext.Provider>\n  );\n};\n\nexport type { UserContextType };\n\nexport { UserProvider, UserContext };\n"]}

package/dist/cjs/src/styles.css

@@ -0,0 +1,387 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  
+}
+
+.cac-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0
+}
+
+.cac-absolute {
+  position: absolute
+}
+
+.cac-relative {
+  position: relative
+}
+
+.cac-inset-0 {
+  inset: 0px
+}
+
+.cac-left-0 {
+  left: 0px
+}
+
+.cac-right-0 {
+  right: 0px
+}
+
+.cac-right-4 {
+  right: 1rem
+}
+
+.cac-top-0 {
+  top: 0px
+}
+
+.cac-top-4 {
+  top: 1rem
+}
+
+.cac-z-50 {
+  z-index: 50
+}
+
+.cac-mt-2 {
+  margin-top: 0.5rem
+}
+
+.cac-block {
+  display: block
+}
+
+.cac-inline {
+  display: inline
+}
+
+.cac-flex {
+  display: flex
+}
+
+.cac-hidden {
+  display: none
+}
+
+.cac-h-10 {
+  height: 2.5rem
+}
+
+.cac-h-8 {
+  height: 2rem
+}
+
+.cac-h-\[26rem\] {
+  height: 26rem
+}
+
+.cac-h-full {
+  height: 100%
+}
+
+.cac-h-screen {
+  height: 100vh
+}
+
+.cac-w-10 {
+  width: 2.5rem
+}
+
+.cac-w-8 {
+  width: 2rem
+}
+
+.cac-w-full {
+  width: 100%
+}
+
+.cac-w-screen {
+  width: 100vw
+}
+
+.cac-min-w-72 {
+  min-width: 18rem
+}
+
+.cac-shrink-0 {
+  flex-shrink: 0
+}
+
+@keyframes cac-spin {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+.cac-animate-spin {
+  animation: cac-spin 1s linear infinite
+}
+
+.cac-cursor-pointer {
+  cursor: pointer
+}
+
+.cac-items-center {
+  align-items: center
+}
+
+.cac-justify-center {
+  justify-content: center
+}
+
+.cac-justify-between {
+  justify-content: space-between
+}
+
+.cac-gap-2 {
+  gap: 0.5rem
+}
+
+.cac-overflow-hidden {
+  overflow: hidden
+}
+
+.cac-rounded-3xl {
+  border-radius: 1.5rem
+}
+
+.cac-rounded-full {
+  border-radius: 9999px
+}
+
+.cac-rounded-lg {
+  border-radius: 0.5rem
+}
+
+.cac-border {
+  border-width: 1px
+}
+
+.cac-border-none {
+  border-style: none
+}
+
+.cac-border-neutral-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(115 115 115 / var(--tw-border-opacity))
+}
+
+.cac-bg-neutral-950 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 10 10 / var(--tw-bg-opacity))
+}
+
+.cac-bg-transparent {
+  background-color: transparent
+}
+
+.cac-bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+
+.cac-bg-opacity-50 {
+  --tw-bg-opacity: 0.5
+}
+
+.cac-fill-neutral-600 {
+  fill: #525252
+}
+
+.cac-object-cover {
+  -o-object-fit: cover;
+     object-fit: cover
+}
+
+.cac-p-1 {
+  padding: 0.25rem
+}
+
+.cac-p-2 {
+  padding: 0.5rem
+}
+
+.cac-px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem
+}
+
+.cac-px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem
+}
+
+.cac-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem
+}
+
+.cac-text-neutral-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 229 229 / var(--tw-text-opacity))
+}
+
+.cac-text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity))
+}
+
+.cac-text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity))
+}
+
+.cac-shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.cac-shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.cac-transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
+}
+
+.hover\:cac-bg-neutral-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 229 229 / var(--tw-bg-opacity))
+}
+
+.hover\:cac-bg-opacity-50:hover {
+  --tw-bg-opacity: 0.5
+}
+
+@media (min-width: 640px) {
+  .sm\:cac-p-6 {
+    padding: 1.5rem
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:cac-fill-neutral-300 {
+    fill: #d4d4d4
+  }
+
+  .dark\:cac-text-neutral-600 {
+    --tw-text-opacity: 1;
+    color: rgb(82 82 82 / var(--tw-text-opacity))
+  }
+}