@civic/auth 0.3.6-beta.1 → 0.3.7

package/dist/cjs/reactjs/components/UserButton.js

@@ -0,0 +1,145 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const index_js_1 = require("../../reactjs/hooks/index.js");
+const react_1 = require("react");
+const ButtonContentOrLoader_js_1 = require("./ButtonContentOrLoader.js");
+const types_js_1 = require("../../types.js");
+const utils_js_1 = require("./utils.js");
+const ChevronDown = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-down", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }));
+const ChevronUp = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-up", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }));
+const UserButton = ({ className, wrapperClassName, style, wrapperStyle, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [buttonWidth, setButtonWidth] = (0, react_1.useState)(null);
+    const { user, signIn, signOut, authStatus, displayMode } = (0, index_js_1.useUser)();
+    const buttonRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [userActionStarted, setUserActionStarted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if ([types_js_1.AuthStatus.AUTHENTICATED, types_js_1.AuthStatus.UNAUTHENTICATED].includes(authStatus)) {
+            setUserActionStarted(false);
+        }
+    }, [authStatus]);
+    (0, react_1.useEffect)(() => {
+        if (buttonRef.current) {
+            setButtonWidth(buttonRef.current.offsetWidth);
+        }
+    }, [isOpen]);
+    const handleClickOutside = (0, react_1.useCallback)((event) => {
+        const target = event.target;
+        if (buttonRef.current &&
+            dropdownRef.current &&
+            !buttonRef.current.contains(target) &&
+            !dropdownRef.current.contains(target)) {
+            setIsOpen(false);
+        }
+    }, []);
+    const handleSignOut = (0, react_1.useCallback)(async () => {
+        setIsOpen(false);
+        await signOut();
+    }, [signOut]);
+    const handleSignIn = (0, react_1.useCallback)(async () => {
+        setIsOpen(false);
+        await signIn();
+    }, [signIn]);
+    const handleEscape = (0, react_1.useCallback)((event) => {
+        if (event.key === "Escape") {
+            setIsOpen(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            window.addEventListener("click", handleClickOutside);
+            window.addEventListener("keydown", handleEscape);
+        }
+        return () => {
+            window.removeEventListener("click", handleClickOutside);
+            window.removeEventListener("keydown", handleEscape);
+        };
+    }, [handleClickOutside, handleEscape, isOpen]);
+    if (user) {
+        return ((0, jsx_runtime_1.jsxs)("div", { css: { position: "relative", width: "auto" }, className: wrapperClassName, style: wrapperStyle, id: "civic-dropdown-container", children: [(0, jsx_runtime_1.jsx)("button", { ref: buttonRef, css: {
+                        cursor: "pointer",
+                        display: "flex",
+                        minWidth: "10rem",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: "0.5rem",
+                        borderRadius: "9999px",
+                        border: "1px solid #6b7280",
+                        padding: "0.75rem 1rem",
+                        color: "#6b7280",
+                        transition: "background-color 0.2s",
+                        "&:hover": {
+                            backgroundColor: "#f3f4f6",
+                        },
+                    }, className: className, style: style, onClick: () => {
+                        setUserActionStarted(true);
+                        authStatus !== types_js_1.AuthStatus.SIGNING_OUT &&
+                            setIsOpen((isOpen) => !isOpen);
+                    }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [user?.picture ? ((0, jsx_runtime_1.jsx)("span", { css: {
+                                    position: "relative",
+                                    display: "flex",
+                                    height: "1.5rem",
+                                    width: "1.5rem",
+                                    flexShrink: 0,
+                                    gap: "0.5rem",
+                                    overflow: "hidden",
+                                    borderRadius: "9999px",
+                                }, children: (0, jsx_runtime_1.jsx)("img", { css: {
+                                        height: "100%",
+                                        width: "100%",
+                                        objectFit: "cover",
+                                    }, src: user.picture, alt: user?.name || user?.email }) })) : ((0, jsx_runtime_1.jsx)("span", { css: { display: "block" } })), (0, jsx_runtime_1.jsx)(ButtonContentOrLoader_js_1.ButtonContentOrLoader, { authStatus: authStatus, displayMode: displayMode, userActionStarted: userActionStarted, children: user?.name || user?.email }), (0, jsx_runtime_1.jsx)("span", { css: {
+                                    display: "block",
+                                    pointerEvents: "none",
+                                    visibility: (0, utils_js_1.shouldShowLoader)(authStatus, displayMode)
+                                        ? "hidden"
+                                        : "visible",
+                                }, children: isOpen ? (0, jsx_runtime_1.jsx)(ChevronUp, {}) : (0, jsx_runtime_1.jsx)(ChevronDown, {}) })] }) }), (0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, css: isOpen
+                        ? {
+                            position: "absolute",
+                            left: 0,
+                            width: buttonWidth || "auto",
+                            marginTop: "0.5rem",
+                            borderRadius: "0.5rem",
+                            backgroundColor: "white",
+                            padding: "0.5rem 0",
+                            color: "#6b7280",
+                            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+                            zIndex: 1000,
+                        }
+                        : { display: "none" }, children: (0, jsx_runtime_1.jsx)("ul", { css: { listStyleType: "none", margin: 0, padding: 0 }, children: (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { css: {
+                                    display: "block",
+                                    width: "100%",
+                                    padding: "0.5rem 1rem",
+                                    transition: "background-color 0.2s",
+                                    background: "none",
+                                    border: "none",
+                                    textAlign: "center",
+                                    cursor: "pointer",
+                                }, onClick: () => {
+                                    setUserActionStarted(true);
+                                    !(0, utils_js_1.shouldShowLoader)(authStatus, displayMode) && handleSignOut();
+                                }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = "#f3f4f6"), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = "transparent"), children: "Logout" }) }) }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, "data-testid": "sign-in-button", css: {
+            cursor: "pointer",
+            borderRadius: "9999px",
+            border: "1px solid #6b7280",
+            padding: "0.75rem 1rem",
+            background: "none",
+            transition: "background-color 0.2s",
+            minWidth: "9em", // this stops the button from going too small when in loading mode
+            "&:hover": {
+                backgroundColor: "#f3f4f6",
+            },
+        }, className: className, style: style, onClick: () => {
+            setUserActionStarted(true);
+            !(0, utils_js_1.shouldShowLoader)(authStatus, displayMode) && handleSignIn();
+        }, children: (0, jsx_runtime_1.jsx)(ButtonContentOrLoader_js_1.ButtonContentOrLoader, { authStatus: authStatus, displayMode: displayMode, userActionStarted: userActionStarted, children: "Sign in" }) }));
+};
+exports.UserButton = UserButton;
+//# sourceMappingURL=UserButton.js.map

package/dist/cjs/reactjs/components/UserButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AACb,uDAAmD;AACnD,iCAMe;AACf,yEAAmE;AACnE,yCAAwC;AACxC,yCAA8C;AAE9C,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,4BAA4B,YAEtC,iCAAM,CAAC,EAAC,cAAc,GAAG,GACrB,CACP,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,0BAA0B,YAEpC,iCAAM,CAAC,EAAC,gBAAgB,GAAG,GACvB,CACP,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,YAAY,GAMb,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IACpE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAO,GAAE,CAAC;IACrE,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IACE,CAAC,qBAAU,CAAC,aAAa,EAAE,qBAAU,CAAC,eAAe,CAAC,CAAC,QAAQ,CAC7D,UAAU,CACX,EACD,CAAC;YACD,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAChD,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAiB,EAAE,EAAE;QAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IACE,SAAS,CAAC,OAAO;YACjB,WAAW,CAAC,OAAO;YACnB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;YACnC,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EACrC,CAAC;YACD,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC3C,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,MAAM,OAAO,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC1C,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,MAAM,MAAM,EAAE,CAAC;IACjB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAoB,EAAE,EAAE;QACxD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YAErD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YAExD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/C,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,iCACE,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5C,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,EACnB,EAAE,EAAC,0BAA0B,aAE7B,mCACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE;wBACH,MAAM,EAAE,SAAS;wBACjB,OAAO,EAAE,MAAM;wBACf,QAAQ,EAAE,OAAO;wBACjB,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,eAAe;wBAC/B,GAAG,EAAE,QAAQ;wBACb,YAAY,EAAE,QAAQ;wBACtB,MAAM,EAAE,mBAAmB;wBAC3B,OAAO,EAAE,cAAc;wBACvB,KAAK,EAAE,SAAS;wBAChB,UAAU,EAAE,uBAAuB;wBACnC,SAAS,EAAE;4BACT,eAAe,EAAE,SAAS;yBAC3B;qBACF,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,oBAAoB,CAAC,IAAI,CAAC,CAAC;wBAC3B,UAAU,KAAK,qBAAU,CAAC,WAAW;4BACnC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;oBACnC,CAAC,YAED,6DACG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CACf,iCACE,GAAG,EAAE;oCACH,QAAQ,EAAE,UAAU;oCACpB,OAAO,EAAE,MAAM;oCACf,MAAM,EAAE,QAAQ;oCAChB,KAAK,EAAE,QAAQ;oCACf,UAAU,EAAE,CAAC;oCACb,GAAG,EAAE,QAAQ;oCACb,QAAQ,EAAE,QAAQ;oCAClB,YAAY,EAAE,QAAQ;iCACvB,YAED,gCACE,GAAG,EAAE;wCACH,MAAM,EAAE,MAAM;wCACd,KAAK,EAAE,MAAM;wCACb,SAAS,EAAE,OAAO;qCACnB,EACD,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,KAAK,GAC9B,GACG,CACR,CAAC,CAAC,CAAC,CACF,iCAAM,GAAG,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAI,CACpC,EAED,uBAAC,gDAAqB,IACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,YAEnC,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,KAAK,GACJ,EACxB,iCACE,GAAG,EAAE;oCACH,OAAO,EAAE,OAAO;oCAChB,aAAa,EAAE,MAAM;oCACrB,UAAU,EAAE,IAAA,2BAAgB,EAAC,UAAU,EAAE,WAAW,CAAC;wCACnD,CAAC,CAAC,QAAQ;wCACV,CAAC,CAAC,SAAS;iCACd,YAEA,MAAM,CAAC,CAAC,CAAC,uBAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uBAAC,WAAW,KAAG,GACpC,IACN,GACI,EACT,gCACE,GAAG,EAAE,WAAW,EAChB,GAAG,EACD,MAAM;wBACJ,CAAC,CAAC;4BACE,QAAQ,EAAE,UAAU;4BACpB,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,WAAW,IAAI,MAAM;4BAC5B,SAAS,EAAE,QAAQ;4BACnB,YAAY,EAAE,QAAQ;4BACtB,eAAe,EAAE,OAAO;4BACxB,OAAO,EAAE,UAAU;4BACnB,KAAK,EAAE,SAAS;4BAChB,SAAS,EACP,yEAAyE;4BAC3E,MAAM,EAAE,IAAI;yBACb;wBACH,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,YAGzB,+BAAI,GAAG,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,YACvD,yCACE,mCACE,GAAG,EAAE;oCACH,OAAO,EAAE,OAAO;oCAChB,KAAK,EAAE,MAAM;oCACb,OAAO,EAAE,aAAa;oCACtB,UAAU,EAAE,uBAAuB;oCACnC,UAAU,EAAE,MAAM;oCAClB,MAAM,EAAE,MAAM;oCACd,SAAS,EAAE,QAAQ;oCACnB,MAAM,EAAE,SAAS;iCAClB,EACD,OAAO,EAAE,GAAG,EAAE;oCACZ,oBAAoB,CAAC,IAAI,CAAC,CAAC;oCAC3B,CAAC,IAAA,2BAAgB,EAAC,UAAU,EAAE,WAAW,CAAC,IAAI,aAAa,EAAE,CAAC;gCAChE,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAClB,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,EAErD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAClB,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC,uBAIlD,GACN,GACF,GACD,IACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,mCACE,GAAG,EAAE,SAAS,iBACF,gBAAgB,EAC5B,GAAG,EAAE;YACH,MAAM,EAAE,SAAS;YACjB,YAAY,EAAE,QAAQ;YACtB,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,uBAAuB;YACnC,QAAQ,EAAE,KAAK,EAAE,kEAAkE;YACnF,SAAS,EAAE;gBACT,eAAe,EAAE,SAAS;aAC3B;SACF,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,oBAAoB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC,IAAA,2BAAgB,EAAC,UAAU,EAAE,WAAW,CAAC,IAAI,YAAY,EAAE,CAAC;QAC/D,CAAC,YAED,uBAAC,gDAAqB,IACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,wBAGd,GACjB,CACV,CAAC;AACJ,CAAC,CAAC;AAEO,gCAAU","sourcesContent":["\"use client\";\nimport { useUser } from \"@/reactjs/hooks/index.js\";\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport { ButtonContentOrLoader } from \"./ButtonContentOrLoader.js\";\nimport { AuthStatus } from \"@/types.js\";\nimport { shouldShowLoader } from \"./utils.js\";\n\nconst ChevronDown = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"lucide lucide-chevron-down\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n);\n\nconst ChevronUp = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"lucide lucide-chevron-up\"\n  >\n    <path d=\"m18 15-6-6-6 6\" />\n  </svg>\n);\n\nconst UserButton = ({\n  className,\n  wrapperClassName,\n  style,\n  wrapperStyle,\n}: {\n  className?: string;\n  wrapperClassName?: string;\n  style?: CSSProperties;\n  wrapperStyle?: CSSProperties;\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [buttonWidth, setButtonWidth] = useState<number | null>(null);\n  const { user, signIn, signOut, authStatus, displayMode } = useUser();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [userActionStarted, setUserActionStarted] = useState(false);\n\n  useEffect(() => {\n    if (\n      [AuthStatus.AUTHENTICATED, AuthStatus.UNAUTHENTICATED].includes(\n        authStatus,\n      )\n    ) {\n      setUserActionStarted(false);\n    }\n  }, [authStatus]);\n\n  useEffect(() => {\n    if (buttonRef.current) {\n      setButtonWidth(buttonRef.current.offsetWidth);\n    }\n  }, [isOpen]);\n\n  const handleClickOutside = useCallback((event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (\n      buttonRef.current &&\n      dropdownRef.current &&\n      !buttonRef.current.contains(target) &&\n      !dropdownRef.current.contains(target)\n    ) {\n      setIsOpen(false);\n    }\n  }, []);\n\n  const handleSignOut = useCallback(async () => {\n    setIsOpen(false);\n    await signOut();\n  }, [signOut]);\n\n  const handleSignIn = useCallback(async () => {\n    setIsOpen(false);\n    await signIn();\n  }, [signIn]);\n\n  const handleEscape = useCallback((event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      setIsOpen(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen) {\n      window.addEventListener(\"click\", handleClickOutside);\n\n      window.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      window.removeEventListener(\"click\", handleClickOutside);\n\n      window.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [handleClickOutside, handleEscape, isOpen]);\n\n  if (user) {\n    return (\n      <div\n        css={{ position: \"relative\", width: \"auto\" }}\n        className={wrapperClassName}\n        style={wrapperStyle}\n        id=\"civic-dropdown-container\"\n      >\n        <button\n          ref={buttonRef}\n          css={{\n            cursor: \"pointer\",\n            display: \"flex\",\n            minWidth: \"10rem\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            gap: \"0.5rem\",\n            borderRadius: \"9999px\",\n            border: \"1px solid #6b7280\",\n            padding: \"0.75rem 1rem\",\n            color: \"#6b7280\",\n            transition: \"background-color 0.2s\",\n            \"&:hover\": {\n              backgroundColor: \"#f3f4f6\",\n            },\n          }}\n          className={className}\n          style={style}\n          onClick={() => {\n            setUserActionStarted(true);\n            authStatus !== AuthStatus.SIGNING_OUT &&\n              setIsOpen((isOpen) => !isOpen);\n          }}\n        >\n          <>\n            {user?.picture ? (\n              <span\n                css={{\n                  position: \"relative\",\n                  display: \"flex\",\n                  height: \"1.5rem\",\n                  width: \"1.5rem\",\n                  flexShrink: 0,\n                  gap: \"0.5rem\",\n                  overflow: \"hidden\",\n                  borderRadius: \"9999px\",\n                }}\n              >\n                <img\n                  css={{\n                    height: \"100%\",\n                    width: \"100%\",\n                    objectFit: \"cover\",\n                  }}\n                  src={user.picture}\n                  alt={user?.name || user?.email}\n                />\n              </span>\n            ) : (\n              <span css={{ display: \"block\" }} />\n            )}\n\n            <ButtonContentOrLoader\n              authStatus={authStatus}\n              displayMode={displayMode}\n              userActionStarted={userActionStarted}\n            >\n              {user?.name || user?.email}\n            </ButtonContentOrLoader>\n            <span\n              css={{\n                display: \"block\",\n                pointerEvents: \"none\",\n                visibility: shouldShowLoader(authStatus, displayMode)\n                  ? \"hidden\"\n                  : \"visible\",\n              }}\n            >\n              {isOpen ? <ChevronUp /> : <ChevronDown />}\n            </span>\n          </>\n        </button>\n        <div\n          ref={dropdownRef}\n          css={\n            isOpen\n              ? {\n                  position: \"absolute\",\n                  left: 0,\n                  width: buttonWidth || \"auto\",\n                  marginTop: \"0.5rem\",\n                  borderRadius: \"0.5rem\",\n                  backgroundColor: \"white\",\n                  padding: \"0.5rem 0\",\n                  color: \"#6b7280\",\n                  boxShadow:\n                    \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n                  zIndex: 1000,\n                }\n              : { display: \"none\" }\n          }\n        >\n          <ul css={{ listStyleType: \"none\", margin: 0, padding: 0 }}>\n            <li>\n              <button\n                css={{\n                  display: \"block\",\n                  width: \"100%\",\n                  padding: \"0.5rem 1rem\",\n                  transition: \"background-color 0.2s\",\n                  background: \"none\",\n                  border: \"none\",\n                  textAlign: \"center\",\n                  cursor: \"pointer\",\n                }}\n                onClick={() => {\n                  setUserActionStarted(true);\n                  !shouldShowLoader(authStatus, displayMode) && handleSignOut();\n                }}\n                onMouseEnter={(e) =>\n                  (e.currentTarget.style.backgroundColor = \"#f3f4f6\")\n                }\n                onMouseLeave={(e) =>\n                  (e.currentTarget.style.backgroundColor = \"transparent\")\n                }\n              >\n                Logout\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <button\n      ref={buttonRef}\n      data-testid=\"sign-in-button\"\n      css={{\n        cursor: \"pointer\",\n        borderRadius: \"9999px\",\n        border: \"1px solid #6b7280\",\n        padding: \"0.75rem 1rem\",\n        background: \"none\",\n        transition: \"background-color 0.2s\",\n        minWidth: \"9em\", // this stops the button from going too small when in loading mode\n        \"&:hover\": {\n          backgroundColor: \"#f3f4f6\",\n        },\n      }}\n      className={className}\n      style={style}\n      onClick={() => {\n        setUserActionStarted(true);\n        !shouldShowLoader(authStatus, displayMode) && handleSignIn();\n      }}\n    >\n      <ButtonContentOrLoader\n        authStatus={authStatus}\n        displayMode={displayMode}\n        userActionStarted={userActionStarted}\n      >\n        Sign in\n      </ButtonContentOrLoader>\n    </button>\n  );\n};\n\nexport { UserButton };\n"]}

package/dist/cjs/reactjs/components/index.d.ts

@@ -0,0 +1,6 @@
+export { CivicAuthIframe } from "../../shared/components/CivicAuthIframe.js";
+export { CivicAuthIframeContainer } from "../../shared/components/CivicAuthIframeContainer.js";
+export { UserButton } from "../../reactjs/components/UserButton.js";
+export { SignInButton } from "../../reactjs/components/SignInButton.js";
+export { SignOutButton } from "../../reactjs/components/SignOutButton.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/reactjs/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/cjs/reactjs/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignOutButton = exports.SignInButton = exports.UserButton = exports.CivicAuthIframeContainer = exports.CivicAuthIframe = void 0;
+var CivicAuthIframe_js_1 = require("../../shared/components/CivicAuthIframe.js");
+Object.defineProperty(exports, "CivicAuthIframe", { enumerable: true, get: function () { return CivicAuthIframe_js_1.CivicAuthIframe; } });
+var CivicAuthIframeContainer_js_1 = require("../../shared/components/CivicAuthIframeContainer.js");
+Object.defineProperty(exports, "CivicAuthIframeContainer", { enumerable: true, get: function () { return CivicAuthIframeContainer_js_1.CivicAuthIframeContainer; } });
+var UserButton_js_1 = require("../../reactjs/components/UserButton.js");
+Object.defineProperty(exports, "UserButton", { enumerable: true, get: function () { return UserButton_js_1.UserButton; } });
+var SignInButton_js_1 = require("../../reactjs/components/SignInButton.js");
+Object.defineProperty(exports, "SignInButton", { enumerable: true, get: function () { return SignInButton_js_1.SignInButton; } });
+var SignOutButton_js_1 = require("../../reactjs/components/SignOutButton.js");
+Object.defineProperty(exports, "SignOutButton", { enumerable: true, get: function () { return SignOutButton_js_1.SignOutButton; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/reactjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/reactjs/components/index.ts"],"names":[],"mappings":";;;AAAA,6EAAyE;AAAhE,qHAAA,eAAe,OAAA;AACxB,+FAA2F;AAAlF,uIAAA,wBAAwB,OAAA;AACjC,oEAAgE;AAAvD,2GAAA,UAAU,OAAA;AACnB,wEAAoE;AAA3D,+GAAA,YAAY,OAAA;AACrB,0EAAsE;AAA7D,iHAAA,aAAa,OAAA","sourcesContent":["export { CivicAuthIframe } from \"@/shared/components/CivicAuthIframe.js\";\nexport { CivicAuthIframeContainer } from \"@/shared/components/CivicAuthIframeContainer.js\";\nexport { UserButton } from \"@/reactjs/components/UserButton.js\";\nexport { SignInButton } from \"@/reactjs/components/SignInButton.js\";\nexport { SignOutButton } from \"@/reactjs/components/SignOutButton.js\";\n"]}

package/dist/cjs/reactjs/components/utils.d.ts

@@ -0,0 +1,13 @@
+import { AuthStatus, type DisplayMode } from "../../types.js";
+/**
+ * decide whether to show the loader based on the auth status and display mode
+ * if the display mode is new_tab, the loader should not be shown
+ * if the auth status is authenticating, the loader should be shown if the user
+ * has started an action
+ * @param {AuthStatus} authStatus
+ * @param {DisplayMode} displayMode
+ * @param {boolean} userActionStarted
+ * @returns {boolean}
+ */
+export declare const shouldShowLoader: (authStatus: AuthStatus, displayMode: DisplayMode, userActionStarted?: boolean) => boolean | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/dist/cjs/reactjs/components/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/components/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,eACf,UAAU,eACT,WAAW,sBACJ,OAAO,wBAe5B,CAAC"}

package/dist/cjs/reactjs/components/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowLoader = void 0;
+const types_js_1 = require("../../types.js");
+/**
+ * decide whether to show the loader based on the auth status and display mode
+ * if the display mode is new_tab, the loader should not be shown
+ * if the auth status is authenticating, the loader should be shown if the user
+ * has started an action
+ * @param {AuthStatus} authStatus
+ * @param {DisplayMode} displayMode
+ * @param {boolean} userActionStarted
+ * @returns {boolean}
+ */
+const shouldShowLoader = (authStatus, displayMode, userActionStarted) => {
+    if (displayMode === "new_tab") {
+        return false;
+    }
+    if (authStatus === types_js_1.AuthStatus.AUTHENTICATING) {
+        if (displayMode === "iframe") {
+            return userActionStarted;
+        }
+        return true;
+    }
+    if (authStatus === types_js_1.AuthStatus.SIGNING_OUT) {
+        return true;
+    }
+    return false;
+};
+exports.shouldShowLoader = shouldShowLoader;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/reactjs/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/reactjs/components/utils.ts"],"names":[],"mappings":";;;AAAA,yCAA0D;AAE1D;;;;;;;;;GASG;AACI,MAAM,gBAAgB,GAAG,CAC9B,UAAsB,EACtB,WAAwB,EACxB,iBAA2B,EAC3B,EAAE;IACF,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,UAAU,KAAK,qBAAU,CAAC,cAAc,EAAE,CAAC;QAC7C,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO,iBAAiB,CAAC;QAC3B,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,UAAU,KAAK,qBAAU,CAAC,WAAW,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B","sourcesContent":["import { AuthStatus, type DisplayMode } from \"@/types.js\";\n\n/**\n * decide whether to show the loader based on the auth status and display mode\n * if the display mode is new_tab, the loader should not be shown\n * if the auth status is authenticating, the loader should be shown if the user\n * has started an action\n * @param {AuthStatus} authStatus\n * @param {DisplayMode} displayMode\n * @param {boolean} userActionStarted\n * @returns {boolean}\n */\nexport const shouldShowLoader = (\n  authStatus: AuthStatus,\n  displayMode: DisplayMode,\n  userActionStarted?: boolean,\n) => {\n  if (displayMode === \"new_tab\") {\n    return false;\n  }\n  if (authStatus === AuthStatus.AUTHENTICATING) {\n    if (displayMode === \"iframe\") {\n      return userActionStarted;\n    }\n    return true;\n  }\n  if (authStatus === AuthStatus.SIGNING_OUT) {\n    return true;\n  }\n  return false;\n};\n"]}

package/dist/cjs/reactjs/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useUser } from "../../reactjs/hooks/useUser.js";
+export { useToken } from "../../shared/hooks/useToken.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/reactjs/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/cjs/reactjs/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToken = exports.useUser = void 0;
+var useUser_js_1 = require("../../reactjs/hooks/useUser.js");
+Object.defineProperty(exports, "useUser", { enumerable: true, get: function () { return useUser_js_1.useUser; } });
+var useToken_js_1 = require("../../shared/hooks/useToken.js");
+Object.defineProperty(exports, "useToken", { enumerable: true, get: function () { return useToken_js_1.useToken; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/reactjs/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/reactjs/hooks/index.ts"],"names":[],"mappings":";;;AAAA,yDAAqD;AAA5C,qGAAA,OAAO,OAAA;AAChB,0DAAsD;AAA7C,uGAAA,QAAQ,OAAA","sourcesContent":["export { useUser } from \"@/reactjs/hooks/useUser.js\";\nexport { useToken } from \"@/shared/hooks/useToken.js\";\n"]}

package/dist/cjs/reactjs/hooks/useClientTokenExchangeSession.d.ts

@@ -0,0 +1,3 @@
+declare const useClientTokenExchangeSession: () => import("../../reactjs/providers/ClientTokenExchangeSessionProvider.js").ClientTokenExchangeSessionProviderOutput;
+export { useClientTokenExchangeSession };
+//# sourceMappingURL=useClientTokenExchangeSession.d.ts.map

package/dist/cjs/reactjs/hooks/useClientTokenExchangeSession.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientTokenExchangeSession.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/hooks/useClientTokenExchangeSession.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,6BAA6B,oHAMlC,CAAC;AAEF,OAAO,EAAE,6BAA6B,EAAE,CAAC"}

package/dist/cjs/reactjs/hooks/useClientTokenExchangeSession.js

@@ -0,0 +1,16 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClientTokenExchangeSession = void 0;
+const react_1 = require("react");
+const ClientTokenExchangeSessionProvider_js_1 = require("../../reactjs/providers/ClientTokenExchangeSessionProvider.js");
+// TokenProvider will use this internal context to access session
+const useClientTokenExchangeSession = () => {
+    const context = (0, react_1.useContext)(ClientTokenExchangeSessionProvider_js_1.ClientTokenExchangeSessionContext);
+    if (!context) {
+        throw new Error("useSession must be used within an SessionProvider");
+    }
+    return context;
+};
+exports.useClientTokenExchangeSession = useClientTokenExchangeSession;
+//# sourceMappingURL=useClientTokenExchangeSession.js.map

package/dist/cjs/reactjs/hooks/useClientTokenExchangeSession.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientTokenExchangeSession.js","sourceRoot":"","sources":["../../../../src/reactjs/hooks/useClientTokenExchangeSession.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,iCAAmC;AACnC,qHAA8G;AAE9G,iEAAiE;AACjE,MAAM,6BAA6B,GAAG,GAAG,EAAE;IACzC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,yEAAiC,CAAC,CAAC;IAC9D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEO,sEAA6B","sourcesContent":["\"use client\";\nimport { useContext } from \"react\";\nimport { ClientTokenExchangeSessionContext } from \"@/reactjs/providers/ClientTokenExchangeSessionProvider.js\";\n\n// TokenProvider will use this internal context to access session\nconst useClientTokenExchangeSession = () => {\n  const context = useContext(ClientTokenExchangeSessionContext);\n  if (!context) {\n    throw new Error(\"useSession must be used within an SessionProvider\");\n  }\n  return context;\n};\n\nexport { useClientTokenExchangeSession };\n"]}

package/dist/cjs/reactjs/hooks/useUser.d.ts

@@ -0,0 +1,4 @@
+import { type UserContextType } from "../../shared/providers/UserProvider.js";
+declare const useUser: <T extends Record<string, unknown> = Record<string, never>>() => UserContextType<T>;
+export { useUser };
+//# sourceMappingURL=useUser.d.ts.map

package/dist/cjs/reactjs/hooks/useUser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUser.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/hooks/useUser.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAC;AAE5C,QAAA,MAAM,OAAO,GACX,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,+BAC9B,eAAe,CAAC,CAAC,CAQrB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/cjs/reactjs/hooks/useUser.js

@@ -0,0 +1,15 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUser = void 0;
+const react_1 = require("react");
+const UserProvider_js_1 = require("../../shared/providers/UserProvider.js");
+const useUser = () => {
+    const context = (0, react_1.useContext)(UserProvider_js_1.UserContext);
+    if (!context) {
+        throw new Error("useUser must be used within a UserProvider");
+    }
+    return context;
+};
+exports.useUser = useUser;
+//# sourceMappingURL=useUser.js.map

package/dist/cjs/reactjs/hooks/useUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUser.js","sourceRoot":"","sources":["../../../../src/reactjs/hooks/useUser.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,iCAAmC;AACnC,wEAG4C;AAE5C,MAAM,OAAO,GAAG,GAEQ,EAAE;IACxB,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,6BAAW,CAAC,CAAC;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IAChE,CAAC;IAED,OAAO,OAA6B,CAAC;AACvC,CAAC,CAAC;AAEO,0BAAO","sourcesContent":["\"use client\";\nimport { useContext } from \"react\";\nimport {\n  UserContext,\n  type UserContextType,\n} from \"@/shared/providers/UserProvider.js\";\n\nconst useUser = <\n  T extends Record<string, unknown> = Record<string, never>,\n>(): UserContextType<T> => {\n  const context = useContext(UserContext);\n\n  if (!context) {\n    throw new Error(\"useUser must be used within a UserProvider\");\n  }\n\n  return context as UserContextType<T>;\n};\n\nexport { useUser };\n"]}

package/dist/cjs/reactjs/index.d.ts

@@ -0,0 +1,6 @@
+export * from "../reactjs/hooks/index.js";
+export { CivicAuthProvider, type CivicAuthProviderProps, } from "../reactjs/providers/index.js";
+export type { AuthContextType, TokenContextType, UserContextType, } from "../reactjs/providers/index.js";
+export { CivicAuthIframeContainer } from "../shared/components/CivicAuthIframeContainer.js";
+export { UserButton, SignInButton, SignOutButton, } from "../reactjs/components/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/reactjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/reactjs/index.ts"],"names":[],"mappings":"AAMA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAC3F,OAAO,EACL,UAAU,EACV,YAAY,EACZ,aAAa,GACd,MAAM,+BAA+B,CAAC"}

package/dist/cjs/reactjs/index.js

@@ -0,0 +1,32 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignOutButton = exports.SignInButton = exports.UserButton = exports.CivicAuthIframeContainer = exports.CivicAuthProvider = void 0;
+// These are the default exports of the project.
+// They are limited by design to ensure that the public API does not expose any internal implementation details.
+// Do not change this without thinking carefully about the impact on the client-facing public API.
+const index_js_1 = require("../shared/index.js");
+(0, index_js_1.printVersion)();
+__exportStar(require("../reactjs/hooks/index.js"), exports);
+var index_js_2 = require("../reactjs/providers/index.js");
+Object.defineProperty(exports, "CivicAuthProvider", { enumerable: true, get: function () { return index_js_2.CivicAuthProvider; } });
+var CivicAuthIframeContainer_js_1 = require("../shared/components/CivicAuthIframeContainer.js");
+Object.defineProperty(exports, "CivicAuthIframeContainer", { enumerable: true, get: function () { return CivicAuthIframeContainer_js_1.CivicAuthIframeContainer; } });
+var index_js_3 = require("../reactjs/components/index.js");
+Object.defineProperty(exports, "UserButton", { enumerable: true, get: function () { return index_js_3.UserButton; } });
+Object.defineProperty(exports, "SignInButton", { enumerable: true, get: function () { return index_js_3.SignInButton; } });
+Object.defineProperty(exports, "SignOutButton", { enumerable: true, get: function () { return index_js_3.SignOutButton; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/reactjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/reactjs/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAgD;AAChD,gHAAgH;AAChH,kGAAkG;AAClG,gDAAiD;AACjD,IAAA,uBAAY,GAAE,CAAC;AAEf,2DAAyC;AACzC,yDAGsC;AAFpC,6GAAA,iBAAiB,OAAA;AAQnB,+FAA2F;AAAlF,uIAAA,wBAAwB,OAAA;AACjC,0DAIuC;AAHrC,sGAAA,UAAU,OAAA;AACV,wGAAA,YAAY,OAAA;AACZ,yGAAA,aAAa,OAAA","sourcesContent":["// These are the default exports of the project.\n// They are limited by design to ensure that the public API does not expose any internal implementation details.\n// Do not change this without thinking carefully about the impact on the client-facing public API.\nimport { printVersion } from \"@/shared/index.js\";\nprintVersion();\n\nexport * from \"@/reactjs/hooks/index.js\";\nexport {\n  CivicAuthProvider,\n  type CivicAuthProviderProps,\n} from \"@/reactjs/providers/index.js\";\nexport type {\n  AuthContextType,\n  TokenContextType,\n  UserContextType,\n} from \"@/reactjs/providers/index.js\";\nexport { CivicAuthIframeContainer } from \"@/shared/components/CivicAuthIframeContainer.js\";\nexport {\n  UserButton,\n  SignInButton,\n  SignOutButton,\n} from \"@/reactjs/components/index.js\";\n"]}

package/dist/cjs/reactjs/providers/AuthProvider.d.ts

@@ -0,0 +1,10 @@
+import { type SessionData } from "../../types.js";
+import type { PKCEConsumer } from "../../services/types.js";
+import type { AuthProviderProps } from "../../shared/providers/types.js";
+export type InternalAuthProviderProps = AuthProviderProps & {
+    sessionData?: SessionData;
+    pkceConsumer?: PKCEConsumer;
+};
+declare const AuthProvider: ({ children, onSignIn, onSignOut, pkceConsumer, iframeMode, displayMode, }: InternalAuthProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export { AuthProvider };
+//# sourceMappingURL=AuthProvider.d.ts.map

package/dist/cjs/reactjs/providers/AuthProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/providers/AuthProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAerE,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GAAG;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,YAAY,8EAOf,yBAAyB,qDAoF3B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/cjs/reactjs/providers/AuthProvider.js

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthProvider = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const AuthContext_js_1 = require("../../shared/providers/AuthContext.js");
+const useSignIn_js_1 = require("../../shared/hooks/useSignIn.js");
+const useIframe_js_1 = require("../../shared/hooks/useIframe.js");
+const useCivicAuthConfig_js_1 = require("../../shared/hooks/useCivicAuthConfig.js");
+const useSession_js_1 = require("../../shared/hooks/useSession.js");
+const IFrameAndLoading_js_1 = require("../../shared/components/IFrameAndLoading.js");
+const useIsInIframe_js_1 = require("../../shared/hooks/useIsInIframe.js");
+const useCurrentUrl_js_1 = require("../../shared/hooks/useCurrentUrl.js");
+// Global this object setup
+let globalThisObject;
+if (typeof window !== "undefined") {
+    globalThisObject = window;
+}
+else if (typeof global !== "undefined") {
+    globalThisObject = global;
+}
+else {
+    globalThisObject = Function("return this")();
+}
+globalThisObject.globalThis = globalThisObject;
+const AuthProvider = ({ children, onSignIn, onSignOut, pkceConsumer, iframeMode = "modal", displayMode = "iframe", }) => {
+    const authConfig = (0, useCivicAuthConfig_js_1.useCivicAuthConfig)();
+    const { redirectUrl } = authConfig || {};
+    const { iframeRef } = (0, useIframe_js_1.useIframe)();
+    const currentUrl = (0, useCurrentUrl_js_1.useCurrentUrl)();
+    const { signIn, signOut, authStatus, startSignIn } = (0, useSignIn_js_1.useSignIn)({
+        preSignOut: onSignOut,
+        pkceConsumer,
+        displayMode,
+    });
+    const [localSessionData, setLocalSessionData] = (0, react_1.useState)();
+    const { data: session, error: tokenExchangeError, isLoading: tokenExchangeInProgress, } = (0, useSession_js_1.useSession)();
+    (0, react_1.useEffect)(() => {
+        if (session) {
+            setLocalSessionData(session);
+            if (session.authenticated) {
+                onSignIn?.();
+            }
+        }
+    }, [onSignIn, session]);
+    const isAuthenticated = (0, react_1.useMemo)(() => {
+        return !!localSessionData?.idToken;
+    }, [localSessionData]);
+    (0, react_1.useEffect)(() => {
+        if (redirectUrl &&
+            !isAuthenticated &&
+            iframeRef?.current &&
+            displayMode === "iframe" &&
+            !currentUrl?.includes("code=")) {
+            startSignIn();
+        }
+    }, [
+        currentUrl,
+        iframeMode,
+        redirectUrl,
+        isAuthenticated,
+        iframeRef,
+        displayMode,
+        startSignIn,
+    ]);
+    const isInIframe = (0, useIsInIframe_js_1.useIsInIframe)();
+    // if the SDK loads in an iframe, we show the loading spinner as the iframe
+    // will be waiting to be minimized
+    const isLoading = tokenExchangeInProgress || !authConfig || isInIframe;
+    const value = (0, react_1.useMemo)(() => ({
+        isLoading,
+        error: tokenExchangeError,
+        signOut,
+        authStatus,
+        isAuthenticated,
+        signIn,
+        displayMode,
+    }), [
+        isLoading,
+        tokenExchangeError,
+        signOut,
+        authStatus,
+        isAuthenticated,
+        signIn,
+        displayMode,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(AuthContext_js_1.AuthContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(IFrameAndLoading_js_1.IFrameAndLoading, { error: tokenExchangeError, isLoading: isLoading }), children] }));
+};
+exports.AuthProvider = AuthProvider;
+//# sourceMappingURL=AuthProvider.js.map

package/dist/cjs/reactjs/providers/AuthProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.js","sourceRoot":"","sources":["../../../../src/reactjs/providers/AuthProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { type SessionData } from \"@/types.js\";\nimport { AuthContext } from \"@/shared/providers/AuthContext.js\";\nimport type { PKCEConsumer } from \"@/services/types.js\";\nimport { useSignIn } from \"@/shared/hooks/useSignIn.js\";\nimport { useIframe } from \"@/shared/hooks/useIframe.js\";\nimport { useCivicAuthConfig } from \"@/shared/hooks/useCivicAuthConfig.js\";\nimport { useSession } from \"@/shared/hooks/useSession.js\";\nimport { IFrameAndLoading } from \"@/shared/components/IFrameAndLoading.js\";\nimport type { AuthProviderProps } from \"@/shared/providers/types.js\";\nimport { useIsInIframe } from \"@/shared/hooks/useIsInIframe.js\";\nimport { useCurrentUrl } from \"@/shared/hooks/useCurrentUrl.js\";\n\n// Global this object setup\nlet globalThisObject;\nif (typeof window !== \"undefined\") {\n  globalThisObject = window;\n} else if (typeof global !== \"undefined\") {\n  globalThisObject = global;\n} else {\n  globalThisObject = Function(\"return this\")();\n}\nglobalThisObject.globalThis = globalThisObject;\n\nexport type InternalAuthProviderProps = AuthProviderProps & {\n  sessionData?: SessionData;\n  pkceConsumer?: PKCEConsumer;\n};\n\nconst AuthProvider = ({\n  children,\n  onSignIn,\n  onSignOut,\n  pkceConsumer,\n  iframeMode = \"modal\",\n  displayMode = \"iframe\",\n}: InternalAuthProviderProps) => {\n  const authConfig = useCivicAuthConfig();\n  const { redirectUrl } = authConfig || {};\n  const { iframeRef } = useIframe();\n  const currentUrl = useCurrentUrl();\n  const { signIn, signOut, authStatus, startSignIn } = useSignIn({\n    preSignOut: onSignOut,\n    pkceConsumer,\n    displayMode,\n  });\n\n  const [localSessionData, setLocalSessionData] =\n    useState<SessionData | null>();\n\n  const {\n    data: session,\n    error: tokenExchangeError,\n    isLoading: tokenExchangeInProgress,\n  } = useSession();\n\n  useEffect(() => {\n    if (session) {\n      setLocalSessionData(session);\n      if (session.authenticated) {\n        onSignIn?.();\n      }\n    }\n  }, [onSignIn, session]);\n\n  const isAuthenticated = useMemo(() => {\n    return !!localSessionData?.idToken;\n  }, [localSessionData]);\n\n  useEffect(() => {\n    if (\n      redirectUrl &&\n      !isAuthenticated &&\n      iframeRef?.current &&\n      displayMode === \"iframe\" &&\n      !currentUrl?.includes(\"code=\")\n    ) {\n      startSignIn();\n    }\n  }, [\n    currentUrl,\n    iframeMode,\n    redirectUrl,\n    isAuthenticated,\n    iframeRef,\n    displayMode,\n    startSignIn,\n  ]);\n\n  const isInIframe = useIsInIframe();\n  // if the SDK loads in an iframe, we show the loading spinner as the iframe\n  // will be waiting to be minimized\n  const isLoading = tokenExchangeInProgress || !authConfig || isInIframe;\n  const value = useMemo(\n    () => ({\n      isLoading,\n      error: tokenExchangeError as Error | null,\n      signOut,\n      authStatus,\n      isAuthenticated,\n      signIn,\n      displayMode,\n    }),\n    [\n      isLoading,\n      tokenExchangeError,\n      signOut,\n      authStatus,\n      isAuthenticated,\n      signIn,\n      displayMode,\n    ],\n  );\n\n  return (\n    <AuthContext.Provider value={value}>\n      <IFrameAndLoading error={tokenExchangeError} isLoading={isLoading} />\n      {children}\n    </AuthContext.Provider>\n  );\n};\n\nexport { AuthProvider };\n"]}

package/dist/cjs/reactjs/providers/CivicAuthProvider.d.ts

@@ -0,0 +1,5 @@
+import type { AuthProviderProps } from "../../shared/providers/types.js";
+type CivicAuthProviderProps = Omit<AuthProviderProps, "pkceConsumer">;
+declare const CivicAuthProvider: ({ children, ...props }: CivicAuthProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export { CivicAuthProvider, type CivicAuthProviderProps };
+//# sourceMappingURL=CivicAuthProvider.d.ts.map

package/dist/cjs/reactjs/providers/CivicAuthProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CivicAuthProvider.d.ts","sourceRoot":"","sources":["../../../../src/reactjs/providers/CivicAuthProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAErE,KAAK,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAqCtE,QAAA,MAAM,iBAAiB,2BAA4B,sBAAsB,qDAgBxE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,CAAC"}

package/dist/cjs/reactjs/providers/CivicAuthProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CivicAuthProvider = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const AuthProvider_js_1 = require("../../reactjs/providers/AuthProvider.js");
+const PKCE_js_1 = require("../../services/PKCE.js");
+const UserProvider_js_1 = require("../../shared/providers/UserProvider.js");
+const storage_js_1 = require("../../browser/storage.js");
+const CivicAuthConfigContext_js_1 = require("../../shared/providers/CivicAuthConfigContext.js");
+const IframeProvider_js_1 = require("../../shared/providers/IframeProvider.js");
+const ClientTokenExchangeSessionProvider_js_1 = require("../../reactjs/providers/ClientTokenExchangeSessionProvider.js");
+const SessionProvider_js_1 = require("../../shared/providers/SessionProvider.js");
+const useClientTokenExchangeSession_js_1 = require("../../reactjs/hooks/useClientTokenExchangeSession.js");
+const TokenProvider_js_1 = require("../../shared/providers/TokenProvider.js");
+const useAuth_js_1 = require("../../shared/hooks/useAuth.js");
+const WrapperUserProvider = ({ children }) => {
+    const { signIn, signOut, displayMode, authStatus } = (0, useAuth_js_1.useAuth)();
+    return ((0, jsx_runtime_1.jsx)(UserProvider_js_1.UserProvider, { storage: new storage_js_1.LocalStorageAdapter(), signIn: signIn, signOut: signOut, user: null, authStatus: authStatus, displayMode: displayMode, children: children }));
+};
+const WrapperSessionAuthProvider = ({ children, ...props }) => {
+    const sessionData = (0, useClientTokenExchangeSession_js_1.useClientTokenExchangeSession)();
+    return ((0, jsx_runtime_1.jsx)(SessionProvider_js_1.SessionProvider, { ...sessionData, children: (0, jsx_runtime_1.jsx)(IframeProvider_js_1.IframeProvider, { iframeMode: props.iframeMode, children: (0, jsx_runtime_1.jsx)(AuthProvider_js_1.AuthProvider, { ...props, pkceConsumer: new PKCE_js_1.BrowserPublicClientPKCEProducer(), children: (0, jsx_runtime_1.jsx)(TokenProvider_js_1.TokenProvider, { children: (0, jsx_runtime_1.jsx)(WrapperUserProvider, { children: children }) }) }) }) }));
+};
+const CivicAuthProvider = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(CivicAuthConfigContext_js_1.CivicAuthConfigProvider, { oauthServer: props?.config?.oauthServer, clientId: props?.clientId, redirectUrl: props?.redirectUrl, nonce: props?.nonce, logoutRedirectUrl: props?.logoutRedirectUrl, children: (0, jsx_runtime_1.jsx)(ClientTokenExchangeSessionProvider_js_1.ClientTokenExchangeSessionProvider, { children: (0, jsx_runtime_1.jsx)(WrapperSessionAuthProvider, { ...props, children: children }) }) }));
+};
+exports.CivicAuthProvider = CivicAuthProvider;
+//# sourceMappingURL=CivicAuthProvider.js.map

package/dist/cjs/reactjs/providers/CivicAuthProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CivicAuthProvider.js","sourceRoot":"","sources":["../../../../src/reactjs/providers/CivicAuthProvider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,yEAAmE;AACnE,gDAAqE;AACrE,wEAAkE;AAClE,qDAA2D;AAC3D,4FAAuF;AACvF,4EAAsE;AACtE,qHAA+G;AAC/G,8EAAwE;AACxE,uGAAiG;AACjG,0EAAoE;AACpE,0DAAoD;AAKpD,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC1E,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAA,oBAAO,GAAE,CAAC;IAC/D,OAAO,CACL,uBAAC,8BAAY,IACX,OAAO,EAAE,IAAI,gCAAmB,EAAE,EAClC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,YAEvB,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,0BAA0B,GAAG,CAAC,EAClC,QAAQ,EACR,GAAG,KAAK,EACe,EAAE,EAAE;IAC3B,MAAM,WAAW,GAAG,IAAA,gEAA6B,GAAE,CAAC;IACpD,OAAO,CACL,uBAAC,oCAAe,OAAK,WAAW,YAC9B,uBAAC,kCAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAC1C,uBAAC,8BAAY,OACP,KAAK,EACT,YAAY,EAAE,IAAI,yCAA+B,EAAE,YAEnD,uBAAC,gCAAa,cACZ,uBAAC,mBAAmB,cAAE,QAAQ,GAAuB,GACvC,GACH,GACA,GACD,CACnB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA0B,EAAE,EAAE;IAC3E,OAAO,CACL,uBAAC,mDAAuB,IACtB,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EACvC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EACzB,WAAW,EAAE,KAAK,EAAE,WAAW,EAC/B,KAAK,EAAE,KAAK,EAAE,KAAK,EACnB,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,YAE3C,uBAAC,0EAAkC,cACjC,uBAAC,0BAA0B,OAAK,KAAK,YAClC,QAAQ,GACkB,GACM,GACb,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEO,8CAAiB","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { AuthProvider } from \"@/reactjs/providers/AuthProvider.js\";\nimport { BrowserPublicClientPKCEProducer } from \"@/services/PKCE.js\";\nimport { UserProvider } from \"@/shared/providers/UserProvider.js\";\nimport { LocalStorageAdapter } from \"@/browser/storage.js\";\nimport { CivicAuthConfigProvider } from \"@/shared/providers/CivicAuthConfigContext.js\";\nimport { IframeProvider } from \"@/shared/providers/IframeProvider.js\";\nimport { ClientTokenExchangeSessionProvider } from \"@/reactjs/providers/ClientTokenExchangeSessionProvider.js\";\nimport { SessionProvider } from \"@/shared/providers/SessionProvider.js\";\nimport { useClientTokenExchangeSession } from \"@/reactjs/hooks/useClientTokenExchangeSession.js\";\nimport { TokenProvider } from \"@/shared/providers/TokenProvider.js\";\nimport { useAuth } from \"@/shared/hooks/useAuth.js\";\nimport type { AuthProviderProps } from \"@/shared/providers/types.js\";\n\ntype CivicAuthProviderProps = Omit<AuthProviderProps, \"pkceConsumer\">;\n\nconst WrapperUserProvider = ({ children }: { children: React.ReactNode }) => {\n  const { signIn, signOut, displayMode, authStatus } = useAuth();\n  return (\n    <UserProvider\n      storage={new LocalStorageAdapter()}\n      signIn={signIn}\n      signOut={signOut}\n      user={null}\n      authStatus={authStatus}\n      displayMode={displayMode}\n    >\n      {children}\n    </UserProvider>\n  );\n};\nconst WrapperSessionAuthProvider = ({\n  children,\n  ...props\n}: CivicAuthProviderProps) => {\n  const sessionData = useClientTokenExchangeSession();\n  return (\n    <SessionProvider {...sessionData}>\n      <IframeProvider iframeMode={props.iframeMode}>\n        <AuthProvider\n          {...props}\n          pkceConsumer={new BrowserPublicClientPKCEProducer()}\n        >\n          <TokenProvider>\n            <WrapperUserProvider>{children}</WrapperUserProvider>\n          </TokenProvider>\n        </AuthProvider>\n      </IframeProvider>\n    </SessionProvider>\n  );\n};\nconst CivicAuthProvider = ({ children, ...props }: CivicAuthProviderProps) => {\n  return (\n    <CivicAuthConfigProvider\n      oauthServer={props?.config?.oauthServer}\n      clientId={props?.clientId}\n      redirectUrl={props?.redirectUrl}\n      nonce={props?.nonce}\n      logoutRedirectUrl={props?.logoutRedirectUrl}\n    >\n      <ClientTokenExchangeSessionProvider>\n        <WrapperSessionAuthProvider {...props}>\n          {children}\n        </WrapperSessionAuthProvider>\n      </ClientTokenExchangeSessionProvider>\n    </CivicAuthConfigProvider>\n  );\n};\n\nexport { CivicAuthProvider, type CivicAuthProviderProps };\n"]}

package/dist/cjs/reactjs/providers/ClientTokenExchangeSessionProvider.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import React from "react";
+import type { SessionData } from "../../types.js";
+export type ClientTokenExchangeSessionProviderOutput = {
+    data: SessionData | null;
+    error: Error | null;
+    isLoading: boolean;
+    doTokenExchange: null | ((url: string) => Promise<void>);
+};
+declare const ClientTokenExchangeSessionContext: React.Context<ClientTokenExchangeSessionProviderOutput>;
+type ClientTokenExchangeSessionContextType = {
+    children: ReactNode;
+};
+declare const ClientTokenExchangeSessionProvider: ({ children, }: ClientTokenExchangeSessionContextType) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type { ClientTokenExchangeSessionContextType as SessionContextType };
+export { ClientTokenExchangeSessionProvider, ClientTokenExchangeSessionContext, };
+//# sourceMappingURL=ClientTokenExchangeSessionProvider.d.ts.map