@opble/auth0-react 1.1.6 → 1.1.7

package/dist/components/AccessForbidden.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAuth0 } from '@auth0/auth0-react';
 export function AccessForbidden({ homeUrl = '/', supportEmail, supportUrl, } = {}) {
     const { logout } = useAuth0();
-    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-linear-to-b from-white to-gray-100 dark:from-slate-900 dark:to-slate-800 transition-colors px-4", children: _jsxs("div", { className: "w-full max-w-lg p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur-sm", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [_jsx("div", { className: "shrink-0 h-16 w-16 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center mb-4", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8 text-red-600 dark:text-red-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }) }), _jsx("h1", { className: "text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2", children: "Access Forbidden" }), _jsx("p", { className: "text-base text-slate-600 dark:text-slate-300 mb-6", children: "You don't have permission to access this page. Please contact your administrator if you believe this is an error." }), _jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-full bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 mb-8", children: [_jsx("svg", { className: "h-4 w-4 text-red-600 dark:text-red-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), _jsx("span", { className: "text-sm font-medium text-red-700 dark:text-red-300", children: "Error 403" })] }), _jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [_jsxs("button", { onClick: () => (window.location.href = homeUrl), className: "flex-1 px-6 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium transition-colors shadow-lg shadow-indigo-500/20 cursor-pointer flex items-center justify-center gap-2", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Go to Home"] }), _jsxs("button", { onClick: () => logout(), className: "flex-1 px-6 py-3 rounded-lg bg-red-600 hover:bg-red-700 dark:bg-red-700/80 dark:hover:bg-red-700 text-white font-medium transition-colors shadow-lg shadow-red-500/20 dark:shadow-red-900/30 cursor-pointer flex items-center justify-center gap-2", children: ["Sign Out", _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] })] })] }), _jsx("button", { onClick: () => window.history.back(), className: "text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 underline underline-offset-4 transition-colors cursor-pointer", children: "\u2190 Go back to previous page" })] })] }), (supportEmail || supportUrl) && (_jsx("div", { className: "mt-8 pt-6 border-t border-slate-200 dark:border-slate-700", children: _jsxs("p", { className: "text-sm text-slate-500 dark:text-slate-400 text-center", children: ["Need help?", ' ', _jsx("a", { href: supportUrl || `mailto:${supportEmail}`, className: "text-indigo-600 dark:text-indigo-400 hover:underline font-medium cursor-pointer", children: "Contact support" })] }) }))] }) }));
+    return (_jsx("div", { className: "obar:min-h-screen obar:flex obar:items-center obar:justify-center obar:bg-linear-to-b obar:from-white obar:to-gray-100 obar:dark:from-slate-900 obar:dark:to-slate-800 obar:transition-colors obar:px-4", children: _jsxs("div", { className: "obar:w-full obar:max-w-lg obar:p-8 obar:rounded-2xl obar:shadow-xl obar:border obar:border-gray-100 obar:dark:border-slate-700 obar:bg-white/70 obar:dark:bg-slate-900/60 obar:backdrop-blur-sm", children: [_jsxs("div", { className: "obar:flex obar:flex-col obar:items-center obar:text-center", children: [_jsx("div", { className: "obar:shrink-0 obar:h-16 obar:w-16 obar:rounded-full obar:bg-red-100 obar:dark:bg-red-900/20 obar:flex obar:items-center obar:justify-center obar:mb-4", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-8 obar:w-8 obar:text-red-600 obar:dark:text-red-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }) }), _jsx("h1", { className: "obar:text-3xl obar:font-bold obar:text-slate-900 obar:dark:text-slate-100 obar:mb-2", children: "Access Forbidden" }), _jsx("p", { className: "obar:text-base obar:text-slate-600 obar:dark:text-slate-300 obar:mb-6", children: "You don't have permission to access this page. Please contact your administrator if you believe this is an error." }), _jsxs("div", { className: "obar:inline-flex obar:items-center obar:gap-2 obar:px-4 obar:py-2 obar:rounded-full obar:bg-red-50 obar:dark:bg-red-900/10 obar:border obar:border-red-200 obar:dark:border-red-800 obar:mb-8", children: [_jsx("svg", { className: "obar:h-4 obar:w-4 obar:text-red-600 obar:dark:text-red-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), _jsx("span", { className: "obar:text-sm obar:font-medium obar:text-red-700 obar:dark:text-red-300", children: "Error 403" })] }), _jsxs("div", { className: "obar:flex obar:flex-col obar:gap-4 obar:w-full", children: [_jsxs("div", { className: "obar:flex obar:flex-col obar:sm:flex-row obar:gap-3", children: [_jsxs("button", { onClick: () => (window.location.href = homeUrl), className: "obar:flex-1 obar:px-6 obar:py-3 obar:rounded-lg obar:bg-indigo-600 obar:hover:bg-indigo-700 obar:text-white obar:font-medium obar:transition-colors obar:shadow-lg obar:shadow-indigo-500/20 obar:cursor-pointer obar:flex obar:items-center obar:justify-center obar:gap-2", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-5 obar:w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Go to Home"] }), _jsxs("button", { onClick: () => logout(), className: "obar:flex-1 obar:px-6 obar:py-3 obar:rounded-lg obar:bg-red-600 obar:hover:bg-red-700 obar:dark:bg-red-700/80 obar:dark:hover:bg-red-700 obar:text-white obar:font-medium obar:transition-colors obar:shadow-lg obar:shadow-red-500/20 obar:dark:shadow-red-900/30 obar:cursor-pointer obar:flex obar:items-center obar:justify-center obar:gap-2", children: ["Sign Out", _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-5 obar:w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] })] })] }), _jsx("button", { onClick: () => window.history.back(), className: "obar:text-sm obar:text-slate-500 obar:hover:text-slate-700 obar:dark:text-slate-400 obar:dark:hover:text-slate-200 obar:underline obar:underline-offset-4 obar:transition-colors obar:cursor-pointer", children: "\u2190 Go back to previous page" })] })] }), (supportEmail || supportUrl) && (_jsx("div", { className: "obar:mt-8 obar:pt-6 obar:border-t obar:border-slate-200 obar:dark:border-slate-700", children: _jsxs("p", { className: "obar:text-sm obar:text-slate-500 obar:dark:text-slate-400 obar:text-center", children: ["Need help?", ' ', _jsx("a", { href: supportUrl || `mailto:${supportEmail}`, className: "obar:text-indigo-600 obar:dark:text-indigo-400 obar:hover:underline obar:font-medium obar:cursor-pointer", children: "Contact support" })] }) }))] }) }));
 }

package/dist/components/AuthClearing.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function AuthClearing() {
-    return (_jsxs("div", { className: "min-h-screen flex items-center justify-center bg-linear-to-b from-white to-gray-100 dark:from-slate-900 dark:to-slate-800 transition-colors", children: [_jsx("div", { className: "w-full max-w-lg p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur-sm", children: _jsxs("div", { className: "flex flex-col items-center text-center", children: [_jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: "shrink-0 h-16 w-16 rounded-full bg-indigo-100 dark:bg-indigo-900/20 flex items-center justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8 text-indigo-600 dark:text-indigo-400 animate-pulse", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] }) }), _jsx("div", { className: "absolute inset-0 rounded-full bg-indigo-400/30 dark:bg-indigo-600/20 animate-ping" })] }), _jsx("h1", { className: "text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2", children: "Signing You Out" }), _jsx("p", { className: "text-base text-slate-600 dark:text-slate-300 mb-6", children: "Please wait while we securely clear your session..." }), _jsx("div", { className: "w-full max-w-xs", children: _jsx("div", { className: "h-1.5 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-indigo-600 dark:bg-indigo-500 rounded-full animate-progress" }) }) }), _jsx("p", { className: "mt-6 text-sm text-slate-500 dark:text-slate-400", children: "You'll be redirected shortly" })] }) }), _jsx("style", { children: `
+    return (_jsxs("div", { className: "obar:min-h-screen obar:flex obar:items-center obar:justify-center obar:bg-linear-to-b obar:from-white obar:to-gray-100 obar:dark:from-slate-900 obar:dark:to-slate-800 obar:transition-colors", children: [_jsx("div", { className: "obar:w-full obar:max-w-lg obar:p-8 obar:rounded-2xl obar:shadow-xl obar:border obar:border-gray-100 obar:dark:border-slate-700 obar:bg-white/70 obar:dark:bg-slate-900/60 obar:backdrop-blur-sm", children: _jsxs("div", { className: "obar:flex obar:flex-col obar:items-center obar:text-center", children: [_jsxs("div", { className: "obar:relative obar:mb-6", children: [_jsx("div", { className: "obar:shrink-0 obar:h-16 obar:w-16 obar:rounded-full obar:bg-indigo-100 obar:dark:bg-indigo-900/20 obar:flex obar:items-center obar:justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-8 obar:w-8 obar:text-indigo-600 obar:dark:text-indigo-400 obar:animate-pulse", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] }) }), _jsx("div", { className: "obar:absolute obar:inset-0 obar:rounded-full obar:bg-indigo-400/30 obar:dark:bg-indigo-600/20 obar:animate-ping" })] }), _jsx("h1", { className: "obar:text-2xl obar:font-bold obar:text-slate-900 obar:dark:text-slate-100 obar:mb-2", children: "Signing You Out" }), _jsx("p", { className: "obar:text-base obar:text-slate-600 obar:dark:text-slate-300 obar:mb-6", children: "Please wait while we securely clear your session..." }), _jsx("div", { className: "obar:w-full obar:max-w-xs", children: _jsx("div", { className: "obar:h-1.5 obar:bg-slate-200 obar:dark:bg-slate-700 obar:rounded-full obar:overflow-hidden", children: _jsx("div", { className: "obar:h-full obar:bg-indigo-600 obar:dark:bg-indigo-500 obar:rounded-full animate-progress" }) }) }), _jsx("p", { className: "obar:mt-6 obar:text-sm obar:text-slate-500 obar:dark:text-slate-400", children: "You'll be redirected shortly" })] }) }), _jsx("style", { children: `
         @keyframes progress {
           0% {
             width: 0%;

package/dist/components/AuthError.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAuth0 } from '@auth0/auth0-react';
 export function AuthError({ homeUrl = '/', supportEmail, supportUrl, error = null, } = {}) {
     const { loginWithRedirect } = useAuth0();
-    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-linear-to-b from-white to-gray-100 dark:from-slate-900 dark:to-slate-800 transition-colors px-4", children: _jsxs("div", { className: "w-full max-w-lg p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur-sm", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [_jsx("div", { className: "shrink-0 h-16 w-16 rounded-full bg-red-50 dark:bg-red-900/10 flex items-center justify-center mb-4", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8 text-red-600 dark:text-red-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4" }), _jsx("path", { d: "M12 16h.01" })] }) }), _jsx("h1", { className: "text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2", children: "Authentication Error" }), _jsx("p", { className: "text-base text-slate-600 dark:text-slate-300 mb-6", children: "Authentication failed. Sign out and sign back in to resolve transient errors, or return home." }), error && (_jsx("div", { className: "mb-4 w-full px-4 py-3 rounded-md bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800 text-sm text-red-700 dark:text-red-200", children: typeof error === 'string' ? error : error.message })), _jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [_jsxs("button", { onClick: () => (window.location.href = homeUrl), className: "flex-1 px-6 py-3 rounded-lg bg-transparent border border-gray-200 dark:border-white/5 text-slate-700 dark:text-slate-200 hover:bg-gray-50 dark:hover:bg-slate-800 font-medium transition-colors shadow-sm cursor-pointer flex items-center justify-center gap-2", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Go to Home"] }), _jsxs("button", { onClick: () => loginWithRedirect(), className: "flex-1 px-6 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium transition-colors shadow-lg shadow-indigo-500/20 dark:bg-indigo-500 dark:hover:bg-indigo-600 cursor-pointer flex items-center justify-center gap-2", children: ["Sign In", _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }), _jsx("polyline", { points: "10 17 15 12 10 7" }), _jsx("line", { x1: "15", y1: "12", x2: "3", y2: "12" })] })] })] }), _jsx("button", { onClick: () => window.history.back(), className: "text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 underline underline-offset-4 transition-colors cursor-pointer", children: "\u2190 Go back to previous page" })] })] }), (supportEmail || supportUrl) && (_jsx("div", { className: "mt-8 pt-6 border-t border-slate-200 dark:border-slate-700", children: _jsxs("p", { className: "text-sm text-slate-500 dark:text-slate-400 text-center", children: ["Need help?", ' ', _jsx("a", { href: supportUrl || `mailto:${supportEmail}`, className: "text-indigo-600 dark:text-indigo-400 hover:underline font-medium cursor-pointer", children: "Contact support" })] }) }))] }) }));
+    return (_jsx("div", { className: "obar:min-h-screen obar:flex obar:items-center obar:justify-center obar:bg-linear-to-b obar:from-white obar:to-gray-100 obar:dark:from-slate-900 obar:dark:to-slate-800 obar:transition-colors obar:px-4", children: _jsxs("div", { className: "obar:w-full obar:max-w-lg obar:p-8 obar:rounded-2xl obar:shadow-xl obar:border obar:border-gray-100 obar:dark:border-slate-700 obar:bg-white/70 obar:dark:bg-slate-900/60 obar:backdrop-blur-sm", children: [_jsxs("div", { className: "obar:flex obar:flex-col obar:items-center obar:text-center", children: [_jsx("div", { className: "obar:shrink-0 obar:h-16 obar:w-16 obar:rounded-full obar:bg-red-50 obar:dark:bg-red-900/10 obar:flex obar:items-center obar:justify-center obar:mb-4", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-8 obar:w-8 obar:text-red-600 obar:dark:text-red-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4" }), _jsx("path", { d: "M12 16h.01" })] }) }), _jsx("h1", { className: "obar:text-3xl obar:font-bold obar:text-slate-900 obar:dark:text-slate-100 obar:mb-2", children: "Authentication Error" }), _jsx("p", { className: "obar:text-base obar:text-slate-600 obar:dark:text-slate-300 obar:mb-6", children: "Authentication failed. Sign out and sign back in to resolve transient errors, or return home." }), error && (_jsx("div", { className: "obar:mb-4 obar:w-full obar:px-4 obar:py-3 obar:rounded-md obar:bg-red-50 obar:dark:bg-red-900/10 obar:border obar:border-red-100 obar:dark:border-red-800 obar:text-sm obar:text-red-700 obar:dark:text-red-200", children: typeof error === 'string' ? error : error.message })), _jsxs("div", { className: "obar:flex obar:flex-col obar:gap-4 obar:w-full", children: [_jsxs("div", { className: "obar:flex obar:flex-col obar:sm:flex-row obar:gap-3", children: [_jsxs("button", { onClick: () => (window.location.href = homeUrl), className: "obar:flex-1 obar:px-6 obar:py-3 obar:rounded-lg obar:bg-transparent obar:border obar:border-gray-200 obar:dark:border-white/5 obar:text-slate-700 obar:dark:text-slate-200 obar:hover:bg-gray-50 obar:dark:hover:bg-slate-800 obar:font-medium obar:transition-colors obar:shadow-sm obar:cursor-pointer obar:flex obar:items-center obar:justify-center obar:gap-2", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-5 obar:w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Go to Home"] }), _jsxs("button", { onClick: () => loginWithRedirect(), className: "obar:flex-1 obar:px-6 obar:py-3 obar:rounded-lg obar:bg-indigo-600 obar:hover:bg-indigo-700 obar:text-white obar:font-medium obar:transition-colors obar:shadow-lg obar:shadow-indigo-500/20 obar:dark:bg-indigo-500 obar:dark:hover:bg-indigo-600 obar:cursor-pointer obar:flex obar:items-center obar:justify-center obar:gap-2", children: ["Sign In", _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-5 obar:w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }), _jsx("polyline", { points: "10 17 15 12 10 7" }), _jsx("line", { x1: "15", y1: "12", x2: "3", y2: "12" })] })] })] }), _jsx("button", { onClick: () => window.history.back(), className: "obar:text-sm obar:text-slate-500 obar:hover:text-slate-700 obar:dark:text-slate-400 obar:dark:hover:text-slate-200 obar:underline obar:underline-offset-4 obar:transition-colors obar:cursor-pointer", children: "\u2190 Go back to previous page" })] })] }), (supportEmail || supportUrl) && (_jsx("div", { className: "obar:mt-8 obar:pt-6 obar:border-t obar:border-slate-200 obar:dark:border-slate-700", children: _jsxs("p", { className: "obar:text-sm obar:text-slate-500 obar:dark:text-slate-400 obar:text-center", children: ["Need help?", ' ', _jsx("a", { href: supportUrl || `mailto:${supportEmail}`, className: "obar:text-indigo-600 obar:dark:text-indigo-400 obar:hover:underline obar:font-medium obar:cursor-pointer", children: "Contact support" })] }) }))] }) }));
 }
 export default AuthError;

package/dist/components/AuthLoading.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function AuthLoading() {
-    return (_jsxs("div", { className: "min-h-screen flex items-center justify-center bg-linear-to-b from-white to-gray-100 dark:from-slate-900 dark:to-slate-800 transition-colors", children: [_jsxs("div", { className: "w-full max-w-lg p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur-sm", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "shrink-0 h-14 w-14 rounded-lg bg-indigo-600 flex items-center justify-center text-white", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-7", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 2v10l3-3" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7" })] }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-slate-900 dark:text-slate-100", children: "Signing you in" }), _jsx("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-300", children: "Hang tight \u2014 we're securely authenticating your account." })] })] }), _jsxs("div", { className: "mt-8 flex flex-col items-center", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("svg", { className: "h-8 w-8 text-indigo-600 animate-spin", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }), _jsx("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: "Authenticating\u2026" })] }), _jsx("p", { className: "mt-4 text-xs text-slate-500 dark:text-slate-400 text-center", children: "If this takes longer than a few seconds, try refreshing the page or checking your network connection." })] })] }), _jsx("div", { className: "absolute bottom-6 text-xs text-slate-500 dark:text-slate-400", children: "opble \u2022 secure authentication" })] }));
+    return (_jsxs("div", { className: "obar:min-h-screen obar:flex obar:items-center obar:justify-center obar:bg-linear-to-b obar:from-white obar:to-gray-100 obar:dark:from-slate-900 obar:dark:to-slate-800 obar:transition-colors", children: [_jsxs("div", { className: "obar:w-full obar:max-w-lg obar:p-8 obar:rounded-2xl obar:shadow-xl obar:border obar:border-gray-100 obar:dark:border-slate-700 obar:bg-white/70 obar:dark:bg-slate-900/60 obar:backdrop-blur-sm", children: [_jsxs("div", { className: "obar:flex obar:items-center obar:gap-4", children: [_jsx("div", { className: "obar:shrink-0 obar:h-14 obar:w-14 obar:rounded-lg obar:bg-indigo-600 obar:flex obar:items-center obar:justify-center obar:text-white", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-7 obar:w-7", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 2v10l3-3" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7" })] }) }), _jsxs("div", { children: [_jsx("h2", { className: "obar:text-lg obar:font-semibold obar:text-slate-900 obar:dark:text-slate-100", children: "Signing you in" }), _jsx("p", { className: "obar:mt-1 obar:text-sm obar:text-slate-600 obar:dark:text-slate-300", children: "Hang tight \u2014 we're securely authenticating your account." })] })] }), _jsxs("div", { className: "obar:mt-8 obar:flex obar:flex-col obar:items-center", children: [_jsxs("div", { className: "obar:flex obar:items-center obar:gap-3", children: [_jsxs("svg", { className: "obar:h-8 obar:w-8 obar:text-indigo-600 obar:animate-spin", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { className: "obar:opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "obar:opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }), _jsx("span", { className: "obar:text-sm obar:text-slate-700 obar:dark:text-slate-200", children: "Authenticating\u2026" })] }), _jsx("p", { className: "obar:mt-4 obar:text-xs obar:text-slate-500 obar:dark:text-slate-400 obar:text-center", children: "If this takes longer than a few seconds, try refreshing the page or checking your network connection." })] })] }), _jsx("div", { className: "obar:absolute obar:bottom-6 obar:text-xs obar:text-slate-500 obar:dark:text-slate-400", children: "opble \u2022 secure authentication" })] }));
 }

package/dist/components/Unauthorized.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAuth0 } from '@auth0/auth0-react';
 export function Unauthorized({ homeUrl = '/', supportEmail, supportUrl, } = {}) {
     const { loginWithRedirect } = useAuth0();
-    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-linear-to-b from-white to-gray-100 dark:from-slate-900 dark:to-slate-800 transition-colors px-4", children: _jsxs("div", { className: "w-full max-w-lg p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur-sm", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [_jsx("div", { className: "shrink-0 h-16 w-16 rounded-full bg-yellow-50 dark:bg-yellow-900/10 flex items-center justify-center mb-4", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8 text-yellow-600 dark:text-yellow-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M12 2l7 4v6c0 5-3.6 9.7-7 11-3.4-1.3-7-6-7-11V6l7-4z" }), _jsx("path", { d: "M9.5 11.5l1.5 1.5 3-3" })] }) }), _jsx("h1", { className: "text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2", children: "Unauthorized" }), _jsx("p", { className: "text-base text-slate-600 dark:text-slate-300 mb-6", children: "You need to sign in to access this page. Please sign in with your account or return home." }), _jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [_jsxs("button", { onClick: () => (window.location.href = homeUrl), className: "flex-1 px-6 py-3 rounded-lg bg-transparent border border-gray-200 dark:border-white/5 text-slate-700 dark:text-slate-200 hover:bg-gray-50 dark:hover:bg-slate-800 font-medium transition-colors shadow-sm cursor-pointer flex items-center justify-center gap-2", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Go to Home"] }), _jsxs("button", { onClick: () => loginWithRedirect(), className: "flex-1 px-6 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-slate-700 dark:text-slate-200 font-medium transition-colors shadow-lg shadow-indigo-500/20 dark:bg-indigo-500 dark:hover:bg-indigo-600 cursor-pointer flex items-center justify-center gap-2", children: ["Sign In", _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }), _jsx("polyline", { points: "10 17 15 12 10 7" }), _jsx("line", { x1: "15", y1: "12", x2: "3", y2: "12" })] })] })] }), _jsx("button", { onClick: () => window.history.back(), className: "text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 underline underline-offset-4 transition-colors cursor-pointer", children: "\u2190 Go back to previous page" })] })] }), (supportEmail || supportUrl) && (_jsx("div", { className: "mt-8 pt-6 border-t border-slate-200 dark:border-slate-700", children: _jsxs("p", { className: "text-sm text-slate-500 dark:text-slate-400 text-center", children: ["Need help?", ' ', _jsx("a", { href: supportUrl || `mailto:${supportEmail}`, className: "text-indigo-600 dark:text-indigo-400 hover:underline font-medium cursor-pointer", children: "Contact support" })] }) }))] }) }));
+    return (_jsx("div", { className: "obar:min-h-screen obar:flex obar:items-center obar:justify-center obar:bg-linear-to-b obar:from-white obar:to-gray-100 obar:dark:from-slate-900 obar:dark:to-slate-800 obar:transition-colors obar:px-4", children: _jsxs("div", { className: "obar:w-full obar:max-w-lg obar:p-8 obar:rounded-2xl obar:shadow-xl obar:border obar:border-gray-100 obar:dark:border-slate-700 obar:bg-white/70 obar:dark:bg-slate-900/60 obar:backdrop-blur-sm", children: [_jsxs("div", { className: "obar:flex obar:flex-col obar:items-center obar:text-center", children: [_jsx("div", { className: "obar:shrink-0 obar:h-16 obar:w-16 obar:rounded-full obar:bg-yellow-50 obar:dark:bg-yellow-900/10 obar:flex obar:items-center obar:justify-center obar:mb-4", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-8 obar:w-8 obar:text-yellow-600 obar:dark:text-yellow-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M12 2l7 4v6c0 5-3.6 9.7-7 11-3.4-1.3-7-6-7-11V6l7-4z" }), _jsx("path", { d: "M9.5 11.5l1.5 1.5 3-3" })] }) }), _jsx("h1", { className: "obar:text-3xl obar:font-bold obar:text-slate-900 obar:dark:text-slate-100 obar:mb-2", children: "Unauthorized" }), _jsx("p", { className: "obar:text-base obar:text-slate-600 obar:dark:text-slate-300 obar:mb-6", children: "You need to sign in to access this page. Please sign in with your account or return home." }), _jsxs("div", { className: "obar:flex obar:flex-col obar:gap-4 obar:w-full", children: [_jsxs("div", { className: "obar:flex obar:flex-col obar:sm:flex-row obar:gap-3", children: [_jsxs("button", { onClick: () => (window.location.href = homeUrl), className: "obar:flex-1 obar:px-6 obar:py-3 obar:rounded-lg obar:bg-transparent obar:border obar:border-gray-200 obar:dark:border-white/5 obar:text-slate-700 obar:dark:text-slate-200 obar:hover:bg-gray-50 obar:dark:hover:bg-slate-800 obar:font-medium obar:transition-colors obar:shadow-sm obar:cursor-pointer obar:flex obar:items-center obar:justify-center obar:gap-2", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-5 obar:w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Go to Home"] }), _jsxs("button", { onClick: () => loginWithRedirect(), className: "obar:flex-1 obar:px-6 obar:py-3 obar:rounded-lg obar:bg-indigo-600 obar:hover:bg-indigo-700 obar:text-slate-700 obar:dark:text-slate-200 obar:font-medium obar:transition-colors obar:shadow-lg obar:shadow-indigo-500/20 obar:dark:bg-indigo-500 obar:dark:hover:bg-indigo-600 obar:cursor-pointer obar:flex obar:items-center obar:justify-center obar:gap-2", children: ["Sign In", _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "obar:h-5 obar:w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }), _jsx("polyline", { points: "10 17 15 12 10 7" }), _jsx("line", { x1: "15", y1: "12", x2: "3", y2: "12" })] })] })] }), _jsx("button", { onClick: () => window.history.back(), className: "obar:text-sm obar:text-slate-500 obar:hover:text-slate-700 obar:dark:text-slate-400 obar:dark:hover:text-slate-200 obar:underline obar:underline-offset-4 obar:transition-colors obar:cursor-pointer", children: "\u2190 Go back to previous page" })] })] }), (supportEmail || supportUrl) && (_jsx("div", { className: "obar:mt-8 obar:pt-6 obar:border-t obar:border-slate-200 obar:dark:border-slate-700", children: _jsxs("p", { className: "obar:text-sm obar:text-slate-500 obar:dark:text-slate-400 obar:text-center", children: ["Need help?", ' ', _jsx("a", { href: supportUrl || `mailto:${supportEmail}`, className: "obar:text-indigo-600 obar:dark:text-indigo-400 obar:hover:underline obar:font-medium obar:cursor-pointer", children: "Contact support" })] }) }))] }) }));
 }
 export default Unauthorized;

package/dist/style.css

@@ -1,678 +1,648 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
+@layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --color-red-50: oklch(97.1% 0.013 17.38);
-    --color-red-100: oklch(93.6% 0.032 17.717);
-    --color-red-200: oklch(88.5% 0.062 18.334);
-    --color-red-300: oklch(80.8% 0.114 19.571);
-    --color-red-400: oklch(70.4% 0.191 22.216);
-    --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-red-700: oklch(50.5% 0.213 27.518);
-    --color-red-800: oklch(44.4% 0.177 26.899);
-    --color-red-900: oklch(39.6% 0.141 25.723);
-    --color-yellow-50: oklch(98.7% 0.026 102.212);
-    --color-yellow-400: oklch(85.2% 0.199 91.936);
-    --color-yellow-600: oklch(68.1% 0.162 75.834);
-    --color-yellow-900: oklch(42.1% 0.095 57.708);
-    --color-indigo-100: oklch(93% 0.034 272.788);
-    --color-indigo-400: oklch(67.3% 0.182 276.935);
-    --color-indigo-500: oklch(58.5% 0.233 277.117);
-    --color-indigo-600: oklch(51.1% 0.262 276.966);
-    --color-indigo-700: oklch(45.7% 0.24 277.023);
-    --color-indigo-900: oklch(35.9% 0.144 278.697);
-    --color-slate-100: oklch(96.8% 0.007 247.896);
-    --color-slate-200: oklch(92.9% 0.013 255.508);
-    --color-slate-300: oklch(86.9% 0.022 252.894);
-    --color-slate-400: oklch(70.4% 0.04 256.788);
-    --color-slate-500: oklch(55.4% 0.046 257.417);
-    --color-slate-600: oklch(44.6% 0.043 257.281);
-    --color-slate-700: oklch(37.2% 0.044 257.287);
-    --color-slate-800: oklch(27.9% 0.041 260.031);
-    --color-slate-900: oklch(20.8% 0.042 265.755);
-    --color-gray-50: oklch(98.5% 0.002 247.839);
-    --color-gray-100: oklch(96.7% 0.003 264.542);
-    --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --container-xs: 20rem;
-    --container-lg: 32rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
-    --text-3xl: 1.875rem;
-    --text-3xl--line-height: calc(2.25 / 1.875);
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-2xl: 1rem;
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --animate-spin: spin 1s linear infinite;
-    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --blur-sm: 8px;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --obar-color-red-50: oklch(97.1% 0.013 17.38);
+    --obar-color-red-100: oklch(93.6% 0.032 17.717);
+    --obar-color-red-200: oklch(88.5% 0.062 18.334);
+    --obar-color-red-300: oklch(80.8% 0.114 19.571);
+    --obar-color-red-400: oklch(70.4% 0.191 22.216);
+    --obar-color-red-500: oklch(63.7% 0.237 25.331);
+    --obar-color-red-600: oklch(57.7% 0.245 27.325);
+    --obar-color-red-700: oklch(50.5% 0.213 27.518);
+    --obar-color-red-800: oklch(44.4% 0.177 26.899);
+    --obar-color-red-900: oklch(39.6% 0.141 25.723);
+    --obar-color-yellow-50: oklch(98.7% 0.026 102.212);
+    --obar-color-yellow-400: oklch(85.2% 0.199 91.936);
+    --obar-color-yellow-600: oklch(68.1% 0.162 75.834);
+    --obar-color-yellow-900: oklch(42.1% 0.095 57.708);
+    --obar-color-indigo-100: oklch(93% 0.034 272.788);
+    --obar-color-indigo-400: oklch(67.3% 0.182 276.935);
+    --obar-color-indigo-500: oklch(58.5% 0.233 277.117);
+    --obar-color-indigo-600: oklch(51.1% 0.262 276.966);
+    --obar-color-indigo-700: oklch(45.7% 0.24 277.023);
+    --obar-color-indigo-900: oklch(35.9% 0.144 278.697);
+    --obar-color-slate-100: oklch(96.8% 0.007 247.896);
+    --obar-color-slate-200: oklch(92.9% 0.013 255.508);
+    --obar-color-slate-300: oklch(86.9% 0.022 252.894);
+    --obar-color-slate-400: oklch(70.4% 0.04 256.788);
+    --obar-color-slate-500: oklch(55.4% 0.046 257.417);
+    --obar-color-slate-600: oklch(44.6% 0.043 257.281);
+    --obar-color-slate-700: oklch(37.2% 0.044 257.287);
+    --obar-color-slate-800: oklch(27.9% 0.041 260.031);
+    --obar-color-slate-900: oklch(20.8% 0.042 265.755);
+    --obar-color-gray-50: oklch(98.5% 0.002 247.839);
+    --obar-color-gray-100: oklch(96.7% 0.003 264.542);
+    --obar-color-gray-200: oklch(92.8% 0.006 264.531);
+    --obar-color-white: #fff;
+    --obar-spacing: 0.25rem;
+    --obar-container-xs: 20rem;
+    --obar-container-lg: 32rem;
+    --obar-text-xs: 0.75rem;
+    --obar-text-xs--line-height: calc(1 / 0.75);
+    --obar-text-sm: 0.875rem;
+    --obar-text-sm--line-height: calc(1.25 / 0.875);
+    --obar-text-base: 1rem;
+    --obar-text-base--line-height: calc(1.5 / 1);
+    --obar-text-lg: 1.125rem;
+    --obar-text-lg--line-height: calc(1.75 / 1.125);
+    --obar-text-2xl: 1.5rem;
+    --obar-text-2xl--line-height: calc(2 / 1.5);
+    --obar-text-3xl: 1.875rem;
+    --obar-text-3xl--line-height: calc(2.25 / 1.875);
+    --obar-font-weight-medium: 500;
+    --obar-font-weight-semibold: 600;
+    --obar-font-weight-bold: 700;
+    --obar-radius-md: 0.375rem;
+    --obar-radius-lg: 0.5rem;
+    --obar-radius-2xl: 1rem;
+    --obar-animate-spin: spin 1s linear infinite;
+    --obar-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --obar-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --obar-blur-sm: 8px;
+    --obar-default-transition-duration: 150ms;
+    --obar-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
 @layer utilities {
-  .absolute {
+  .obar\:absolute {
     position: absolute;
   }
-  .relative {
+  .obar\:relative {
     position: relative;
   }
-  .inset-0 {
-    inset: calc(var(--spacing) * 0);
+  .obar\:inset-0 {
+    inset: calc(var(--obar-spacing) * 0);
   }
-  .bottom-6 {
-    bottom: calc(var(--spacing) * 6);
+  .obar\:bottom-6 {
+    bottom: calc(var(--obar-spacing) * 6);
   }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
+  .obar\:mt-1 {
+    margin-top: calc(var(--obar-spacing) * 1);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
+  .obar\:mt-4 {
+    margin-top: calc(var(--obar-spacing) * 4);
   }
-  .mt-6 {
-    margin-top: calc(var(--spacing) * 6);
+  .obar\:mt-6 {
+    margin-top: calc(var(--obar-spacing) * 6);
   }
-  .mt-8 {
-    margin-top: calc(var(--spacing) * 8);
+  .obar\:mt-8 {
+    margin-top: calc(var(--obar-spacing) * 8);
   }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
+  .obar\:mb-2 {
+    margin-bottom: calc(var(--obar-spacing) * 2);
   }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
+  .obar\:mb-4 {
+    margin-bottom: calc(var(--obar-spacing) * 4);
   }
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
+  .obar\:mb-6 {
+    margin-bottom: calc(var(--obar-spacing) * 6);
   }
-  .mb-8 {
-    margin-bottom: calc(var(--spacing) * 8);
+  .obar\:mb-8 {
+    margin-bottom: calc(var(--obar-spacing) * 8);
   }
-  .flex {
+  .obar\:flex {
     display: flex;
   }
-  .inline {
-    display: inline;
-  }
-  .inline-flex {
+  .obar\:inline-flex {
     display: inline-flex;
   }
-  .h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
+  .obar\:h-1\.5 {
+    height: calc(var(--obar-spacing) * 1.5);
   }
-  .h-4 {
-    height: calc(var(--spacing) * 4);
+  .obar\:h-4 {
+    height: calc(var(--obar-spacing) * 4);
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
+  .obar\:h-5 {
+    height: calc(var(--obar-spacing) * 5);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
+  .obar\:h-7 {
+    height: calc(var(--obar-spacing) * 7);
   }
-  .h-8 {
-    height: calc(var(--spacing) * 8);
+  .obar\:h-8 {
+    height: calc(var(--obar-spacing) * 8);
   }
-  .h-14 {
-    height: calc(var(--spacing) * 14);
+  .obar\:h-14 {
+    height: calc(var(--obar-spacing) * 14);
   }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
+  .obar\:h-16 {
+    height: calc(var(--obar-spacing) * 16);
   }
-  .h-full {
+  .obar\:h-full {
     height: 100%;
   }
-  .min-h-screen {
+  .obar\:min-h-screen {
     min-height: 100vh;
   }
-  .w-4 {
-    width: calc(var(--spacing) * 4);
+  .obar\:w-4 {
+    width: calc(var(--obar-spacing) * 4);
   }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
+  .obar\:w-5 {
+    width: calc(var(--obar-spacing) * 5);
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
+  .obar\:w-7 {
+    width: calc(var(--obar-spacing) * 7);
   }
-  .w-8 {
-    width: calc(var(--spacing) * 8);
+  .obar\:w-8 {
+    width: calc(var(--obar-spacing) * 8);
   }
-  .w-14 {
-    width: calc(var(--spacing) * 14);
+  .obar\:w-14 {
+    width: calc(var(--obar-spacing) * 14);
   }
-  .w-16 {
-    width: calc(var(--spacing) * 16);
+  .obar\:w-16 {
+    width: calc(var(--obar-spacing) * 16);
   }
-  .w-full {
+  .obar\:w-full {
     width: 100%;
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
+  .obar\:max-w-lg {
+    max-width: var(--obar-container-lg);
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
+  .obar\:max-w-xs {
+    max-width: var(--obar-container-xs);
   }
-  .flex-1 {
+  .obar\:flex-1 {
     flex: 1;
   }
-  .shrink-0 {
+  .obar\:shrink-0 {
     flex-shrink: 0;
   }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
-  .animate-ping {
-    animation: var(--animate-ping);
+  .obar\:animate-ping {
+    animation: var(--obar-animate-ping);
   }
-  .animate-pulse {
-    animation: var(--animate-pulse);
+  .obar\:animate-pulse {
+    animation: var(--obar-animate-pulse);
   }
-  .animate-spin {
-    animation: var(--animate-spin);
+  .obar\:animate-spin {
+    animation: var(--obar-animate-spin);
   }
-  .cursor-pointer {
+  .obar\:cursor-pointer {
     cursor: pointer;
   }
-  .flex-col {
+  .obar\:flex-col {
     flex-direction: column;
   }
-  .items-center {
+  .obar\:items-center {
     align-items: center;
   }
-  .justify-center {
+  .obar\:justify-center {
     justify-content: center;
   }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
+  .obar\:gap-2 {
+    gap: calc(var(--obar-spacing) * 2);
   }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
+  .obar\:gap-3 {
+    gap: calc(var(--obar-spacing) * 3);
   }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
+  .obar\:gap-4 {
+    gap: calc(var(--obar-spacing) * 4);
   }
-  .overflow-hidden {
+  .obar\:overflow-hidden {
     overflow: hidden;
   }
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
+  .obar\:rounded-2xl {
+    border-radius: var(--obar-radius-2xl);
   }
-  .rounded-full {
+  .obar\:rounded-full {
     border-radius: calc(infinity * 1px);
   }
-  .rounded-lg {
-    border-radius: var(--radius-lg);
+  .obar\:rounded-lg {
+    border-radius: var(--obar-radius-lg);
   }
-  .rounded-md {
-    border-radius: var(--radius-md);
+  .obar\:rounded-md {
+    border-radius: var(--obar-radius-md);
   }
-  .border {
+  .obar\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-t {
+  .obar\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
-  .border-gray-100 {
-    border-color: var(--color-gray-100);
+  .obar\:border-gray-100 {
+    border-color: var(--obar-color-gray-100);
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
+  .obar\:border-gray-200 {
+    border-color: var(--obar-color-gray-200);
   }
-  .border-red-100 {
-    border-color: var(--color-red-100);
+  .obar\:border-red-100 {
+    border-color: var(--obar-color-red-100);
   }
-  .border-red-200 {
-    border-color: var(--color-red-200);
+  .obar\:border-red-200 {
+    border-color: var(--obar-color-red-200);
   }
-  .border-slate-200 {
-    border-color: var(--color-slate-200);
+  .obar\:border-slate-200 {
+    border-color: var(--obar-color-slate-200);
   }
-  .bg-indigo-100 {
-    background-color: var(--color-indigo-100);
+  .obar\:bg-indigo-100 {
+    background-color: var(--obar-color-indigo-100);
   }
-  .bg-indigo-400\/30 {
-    background-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 30%, transparent);
+  .obar\:bg-indigo-400\/30 {
+    background-color: var(--obar-color-indigo-400);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-indigo-400) 30%, transparent);
+      background-color: color-mix(in oklab, var(--obar-color-indigo-400) 30%, transparent);
     }
   }
-  .bg-indigo-600 {
-    background-color: var(--color-indigo-600);
+  .obar\:bg-indigo-600 {
+    background-color: var(--obar-color-indigo-600);
   }
-  .bg-red-50 {
-    background-color: var(--color-red-50);
+  .obar\:bg-red-50 {
+    background-color: var(--obar-color-red-50);
   }
-  .bg-red-100 {
-    background-color: var(--color-red-100);
+  .obar\:bg-red-100 {
+    background-color: var(--obar-color-red-100);
   }
-  .bg-red-600 {
-    background-color: var(--color-red-600);
+  .obar\:bg-red-600 {
+    background-color: var(--obar-color-red-600);
   }
-  .bg-slate-200 {
-    background-color: var(--color-slate-200);
+  .obar\:bg-slate-200 {
+    background-color: var(--obar-color-slate-200);
   }
-  .bg-transparent {
+  .obar\:bg-transparent {
     background-color: transparent;
   }
-  .bg-white\/70 {
-    background-color: color-mix(in srgb, #fff 70%, transparent);
+  .obar\:bg-white\/70 {
+    background-color: var(--obar-color-white);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+      background-color: color-mix(in oklab, var(--obar-color-white) 70%, transparent);
     }
   }
-  .bg-yellow-50 {
-    background-color: var(--color-yellow-50);
+  .obar\:bg-yellow-50 {
+    background-color: var(--obar-color-yellow-50);
   }
-  .bg-linear-to-b {
+  .obar\:bg-linear-to-b {
     --tw-gradient-position: to bottom;
     @supports (background-image: linear-gradient(in lab, red, red)) {
       --tw-gradient-position: to bottom in oklab;
     }
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-white {
-    --tw-gradient-from: var(--color-white);
+  .obar\:from-white {
+    --tw-gradient-from: var(--obar-color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-gray-100 {
-    --tw-gradient-to: var(--color-gray-100);
+  .obar\:to-gray-100 {
+    --tw-gradient-to: var(--obar-color-gray-100);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .p-8 {
-    padding: calc(var(--spacing) * 8);
+  .obar\:p-8 {
+    padding: calc(var(--obar-spacing) * 8);
   }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
+  .obar\:px-4 {
+    padding-inline: calc(var(--obar-spacing) * 4);
   }
-  .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
+  .obar\:px-6 {
+    padding-inline: calc(var(--obar-spacing) * 6);
   }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
+  .obar\:py-2 {
+    padding-block: calc(var(--obar-spacing) * 2);
   }
-  .py-3 {
-    padding-block: calc(var(--spacing) * 3);
+  .obar\:py-3 {
+    padding-block: calc(var(--obar-spacing) * 3);
   }
-  .pt-6 {
-    padding-top: calc(var(--spacing) * 6);
+  .obar\:pt-6 {
+    padding-top: calc(var(--obar-spacing) * 6);
   }
-  .text-center {
+  .obar\:text-center {
     text-align: center;
   }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  .obar\:text-2xl {
+    font-size: var(--obar-text-2xl);
+    line-height: var(--tw-leading, var(--obar-text-2xl--line-height));
   }
-  .text-3xl {
-    font-size: var(--text-3xl);
-    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  .obar\:text-3xl {
+    font-size: var(--obar-text-3xl);
+    line-height: var(--tw-leading, var(--obar-text-3xl--line-height));
   }
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
+  .obar\:text-base {
+    font-size: var(--obar-text-base);
+    line-height: var(--tw-leading, var(--obar-text-base--line-height));
   }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
+  .obar\:text-lg {
+    font-size: var(--obar-text-lg);
+    line-height: var(--tw-leading, var(--obar-text-lg--line-height));
   }
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+  .obar\:text-sm {
+    font-size: var(--obar-text-sm);
+    line-height: var(--tw-leading, var(--obar-text-sm--line-height));
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .obar\:text-xs {
+    font-size: var(--obar-text-xs);
+    line-height: var(--tw-leading, var(--obar-text-xs--line-height));
   }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
+  .obar\:font-bold {
+    --tw-font-weight: var(--obar-font-weight-bold);
+    font-weight: var(--obar-font-weight-bold);
   }
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
+  .obar\:font-medium {
+    --tw-font-weight: var(--obar-font-weight-medium);
+    font-weight: var(--obar-font-weight-medium);
   }
-  .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
+  .obar\:font-semibold {
+    --tw-font-weight: var(--obar-font-weight-semibold);
+    font-weight: var(--obar-font-weight-semibold);
   }
-  .text-indigo-600 {
-    color: var(--color-indigo-600);
+  .obar\:text-indigo-600 {
+    color: var(--obar-color-indigo-600);
   }
-  .text-red-600 {
-    color: var(--color-red-600);
+  .obar\:text-red-600 {
+    color: var(--obar-color-red-600);
   }
-  .text-red-700 {
-    color: var(--color-red-700);
+  .obar\:text-red-700 {
+    color: var(--obar-color-red-700);
   }
-  .text-slate-500 {
-    color: var(--color-slate-500);
+  .obar\:text-slate-500 {
+    color: var(--obar-color-slate-500);
   }
-  .text-slate-600 {
-    color: var(--color-slate-600);
+  .obar\:text-slate-600 {
+    color: var(--obar-color-slate-600);
   }
-  .text-slate-700 {
-    color: var(--color-slate-700);
+  .obar\:text-slate-700 {
+    color: var(--obar-color-slate-700);
   }
-  .text-slate-900 {
-    color: var(--color-slate-900);
+  .obar\:text-slate-900 {
+    color: var(--obar-color-slate-900);
   }
-  .text-white {
-    color: var(--color-white);
+  .obar\:text-white {
+    color: var(--obar-color-white);
   }
-  .text-yellow-600 {
-    color: var(--color-yellow-600);
+  .obar\:text-yellow-600 {
+    color: var(--obar-color-yellow-600);
   }
-  .underline {
+  .obar\:underline {
     text-decoration-line: underline;
   }
-  .underline-offset-4 {
+  .obar\:underline-offset-4 {
     text-underline-offset: 4px;
   }
-  .opacity-25 {
+  .obar\:opacity-25 {
     opacity: 25%;
   }
-  .opacity-75 {
+  .obar\:opacity-75 {
     opacity: 75%;
   }
-  .shadow-lg {
+  .obar\:shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-sm {
+  .obar\:shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
+  .obar\:shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-indigo-500\/20 {
-    --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);
+  .obar\:shadow-indigo-500\/20 {
+    --tw-shadow-color: var(--obar-color-indigo-500);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--obar-color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-red-500\/20 {
-    --tw-shadow-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
+  .obar\:shadow-red-500\/20 {
+    --tw-shadow-color: var(--obar-color-red-500);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--obar-color-red-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .backdrop-blur-sm {
-    --tw-backdrop-blur: blur(var(--blur-sm));
+  .obar\:backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--obar-blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .transition-colors {
+  .obar\:transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
+    transition-timing-function: var(--tw-ease, var(--obar-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--obar-default-transition-duration));
   }
-  .hover\:bg-gray-50 {
+  .obar\:hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-50);
+        background-color: var(--obar-color-gray-50);
       }
     }
   }
-  .hover\:bg-indigo-700 {
+  .obar\:hover\:bg-indigo-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-indigo-700);
+        background-color: var(--obar-color-indigo-700);
       }
     }
   }
-  .hover\:bg-red-700 {
+  .obar\:hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-700);
+        background-color: var(--obar-color-red-700);
       }
     }
   }
-  .hover\:text-slate-700 {
+  .obar\:hover\:text-slate-700 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-slate-700);
+        color: var(--obar-color-slate-700);
       }
     }
   }
-  .hover\:underline {
+  .obar\:hover\:underline {
     &:hover {
       @media (hover: hover) {
         text-decoration-line: underline;
       }
     }
   }
-  .sm\:flex-row {
+  .obar\:sm\:flex-row {
     @media (width >= 40rem) {
       flex-direction: row;
     }
   }
-  .dark\:border-red-800 {
+  .obar\:dark\:border-red-800 {
     @media (prefers-color-scheme: dark) {
-      border-color: var(--color-red-800);
+      border-color: var(--obar-color-red-800);
     }
   }
-  .dark\:border-slate-700 {
+  .obar\:dark\:border-slate-700 {
     @media (prefers-color-scheme: dark) {
-      border-color: var(--color-slate-700);
+      border-color: var(--obar-color-slate-700);
     }
   }
-  .dark\:border-white\/5 {
+  .obar\:dark\:border-white\/5 {
     @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, #fff 5%, transparent);
+      border-color: var(--obar-color-white);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        border-color: color-mix(in oklab, var(--obar-color-white) 5%, transparent);
       }
     }
   }
-  .dark\:bg-indigo-500 {
+  .obar\:dark\:bg-indigo-500 {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-indigo-500);
+      background-color: var(--obar-color-indigo-500);
     }
   }
-  .dark\:bg-indigo-600\/20 {
+  .obar\:dark\:bg-indigo-600\/20 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(51.1% 0.262 276.966) 20%, transparent);
+      background-color: var(--obar-color-indigo-600);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-indigo-600) 20%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-indigo-600) 20%, transparent);
       }
     }
   }
-  .dark\:bg-indigo-900\/20 {
+  .obar\:dark\:bg-indigo-900\/20 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 20%, transparent);
+      background-color: var(--obar-color-indigo-900);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-indigo-900) 20%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-indigo-900) 20%, transparent);
       }
     }
   }
-  .dark\:bg-red-700\/80 {
+  .obar\:dark\:bg-red-700\/80 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 80%, transparent);
+      background-color: var(--obar-color-red-700);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-red-700) 80%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-red-700) 80%, transparent);
       }
     }
   }
-  .dark\:bg-red-900\/10 {
+  .obar\:dark\:bg-red-900\/10 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 10%, transparent);
+      background-color: var(--obar-color-red-900);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-red-900) 10%, transparent);
       }
     }
   }
-  .dark\:bg-red-900\/20 {
+  .obar\:dark\:bg-red-900\/20 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
+      background-color: var(--obar-color-red-900);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-red-900) 20%, transparent);
       }
     }
   }
-  .dark\:bg-slate-700 {
+  .obar\:dark\:bg-slate-700 {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-slate-700);
+      background-color: var(--obar-color-slate-700);
     }
   }
-  .dark\:bg-slate-900\/60 {
+  .obar\:dark\:bg-slate-900\/60 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
+      background-color: var(--obar-color-slate-900);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-slate-900) 60%, transparent);
       }
     }
   }
-  .dark\:bg-yellow-900\/10 {
+  .obar\:dark\:bg-yellow-900\/10 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 10%, transparent);
+      background-color: var(--obar-color-yellow-900);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-yellow-900) 10%, transparent);
+        background-color: color-mix(in oklab, var(--obar-color-yellow-900) 10%, transparent);
       }
     }
   }
-  .dark\:from-slate-900 {
+  .obar\:dark\:from-slate-900 {
     @media (prefers-color-scheme: dark) {
-      --tw-gradient-from: var(--color-slate-900);
+      --tw-gradient-from: var(--obar-color-slate-900);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
-  .dark\:to-slate-800 {
+  .obar\:dark\:to-slate-800 {
     @media (prefers-color-scheme: dark) {
-      --tw-gradient-to: var(--color-slate-800);
+      --tw-gradient-to: var(--obar-color-slate-800);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
-  .dark\:text-indigo-400 {
+  .obar\:dark\:text-indigo-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-indigo-400);
+      color: var(--obar-color-indigo-400);
     }
   }
-  .dark\:text-red-200 {
+  .obar\:dark\:text-red-200 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-200);
+      color: var(--obar-color-red-200);
     }
   }
-  .dark\:text-red-300 {
+  .obar\:dark\:text-red-300 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-300);
+      color: var(--obar-color-red-300);
     }
   }
-  .dark\:text-red-400 {
+  .obar\:dark\:text-red-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-400);
+      color: var(--obar-color-red-400);
     }
   }
-  .dark\:text-slate-100 {
+  .obar\:dark\:text-slate-100 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-slate-100);
+      color: var(--obar-color-slate-100);
     }
   }
-  .dark\:text-slate-200 {
+  .obar\:dark\:text-slate-200 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-slate-200);
+      color: var(--obar-color-slate-200);
     }
   }
-  .dark\:text-slate-300 {
+  .obar\:dark\:text-slate-300 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-slate-300);
+      color: var(--obar-color-slate-300);
     }
   }
-  .dark\:text-slate-400 {
+  .obar\:dark\:text-slate-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-slate-400);
+      color: var(--obar-color-slate-400);
     }
   }
-  .dark\:text-yellow-400 {
+  .obar\:dark\:text-yellow-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-yellow-400);
+      color: var(--obar-color-yellow-400);
     }
   }
-  .dark\:shadow-red-900\/30 {
+  .obar\:dark\:shadow-red-900\/30 {
     @media (prefers-color-scheme: dark) {
-      --tw-shadow-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
+      --tw-shadow-color: var(--obar-color-red-900);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-900) 30%, transparent) var(--tw-shadow-alpha), transparent);
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--obar-color-red-900) 30%, transparent) var(--tw-shadow-alpha), transparent);
       }
     }
   }
-  .dark\:hover\:bg-indigo-600 {
+  .obar\:dark\:hover\:bg-indigo-600 {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-indigo-600);
+          background-color: var(--obar-color-indigo-600);
         }
       }
     }
   }
-  .dark\:hover\:bg-red-700 {
+  .obar\:dark\:hover\:bg-red-700 {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-red-700);
+          background-color: var(--obar-color-red-700);
         }
       }
     }
   }
-  .dark\:hover\:bg-slate-800 {
+  .obar\:dark\:hover\:bg-slate-800 {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-slate-800);
+          background-color: var(--obar-color-slate-800);
         }
       }
     }
   }
-  .dark\:hover\:text-slate-200 {
+  .obar\:dark\:hover\:text-slate-200 {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-slate-200);
+          color: var(--obar-color-slate-200);
         }
       }
     }
   }
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -825,10 +795,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -848,11 +814,6 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
@@ -887,7 +848,6 @@
       --tw-backdrop-opacity: initial;
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
-      --tw-ease: initial;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opble/auth0-react",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -48,8 +48,8 @@
     "nodemon": "^3.1.11",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.9.3",
-    "@opble/typescript-config": "0.0.0",
-    "@opble/eslint-config": "0.0.0"
+    "@opble/eslint-config": "0.0.0",
+    "@opble/typescript-config": "0.0.0"
   },
   "dependencies": {
     "@opble/debug": "^1.0.0",