@elevasis/ui 1.2.0 → 1.2.1

package/dist/auth/index.js

@@ -1,4 +1,4 @@
 export { useSessionCheck as useRefocusSessionCheck, useSessionCheck, useStableAccessToken } from '../chunk-HBRMWW6V.js';
 export { WorkOSAuthBridge } from '../chunk-NIAVTSMB.js';
-export { useOAuthContext } from '../chunk-KSG4C5DD.js';
+export { useOAuthContext } from '../chunk-QSVZP2NU.js';
 export { AuthProvider, useAuthContext } from '../chunk-7PLEQFHO.js';

package/dist/{chunk-XVPEDNIM.js → chunk-B64YDSAY.js}

@@ -1,11 +1,266 @@
 import { ApiClientProvider, createUseApiClient } from './chunk-GDV44UWF.js';
 import { ElevasisServiceProvider } from './chunk-KA7LO7U5.js';
-import { OAuthProvider } from './chunk-KSG4C5DD.js';
+import { WorkOSAuthBridge } from './chunk-NIAVTSMB.js';
+import { OAuthProvider } from './chunk-QSVZP2NU.js';
 import { useAuthContext } from './chunk-7PLEQFHO.js';
-import { lazy, useMemo, useEffect, useRef, Suspense, useState } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
+import { Tooltip, Text, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Code, Divider, Card, Button, Accordion, createTheme, mergeThemeOverrides, MantineProvider } from '@mantine/core';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { AuthKitProvider } from '@workos-inc/authkit-react';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
 import { jsx } from 'react/jsx-runtime';
 
+var DEFAULT_SIZE = "sm";
+var glassBase = {
+  backdropFilter: "var(--glass-blur)",
+  WebkitBackdropFilter: "var(--glass-blur)",
+  border: "1px solid var(--color-border)"
+};
+var componentThemes = {
+  Accordion: Accordion.extend({
+    styles: {
+      item: {
+        borderColor: "var(--color-border)"
+      },
+      content: {
+        backgroundColor: "var(--color-surface)"
+      }
+    }
+  }),
+  Button: Button.extend({
+    styles: {
+      root: {
+        transition: `all var(--duration-fast) var(--easing)`
+      }
+    }
+  }),
+  Card: Card.extend({
+    defaultProps: {
+      p: DEFAULT_SIZE
+    },
+    styles: {
+      root: {
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
+        boxShadow: "var(--card-shadow)"
+      }
+    }
+  }),
+  // Checkbox styles are in custom.css to support :checked pseudo-selector
+  Divider: Divider.extend({
+    styles: {
+      root: {
+        borderColor: "var(--color-border)"
+      }
+    }
+  }),
+  Code: Code.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Flex: Flex.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  Grid: Grid.extend({
+    defaultProps: {
+      gutter: DEFAULT_SIZE
+    }
+  }),
+  Group: Group.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  HoverCard: HoverCard.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Input: Input.extend({
+    styles: {
+      input: {
+        backgroundColor: "var(--color-surface)",
+        border: "none",
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "0"
+      }
+    }
+  }),
+  Menu: Menu.extend({
+    styles: {
+      dropdown: {
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Modal: Modal.extend({
+    styles: {
+      content: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Notification: Notification.extend({
+    styles: {
+      root: {
+        backgroundColor: "color-mix(in srgb, var(--color-surface) 90%, transparent)",
+        ...glassBase
+      }
+    }
+  }),
+  Popover: Popover.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)",
+        ...glassBase,
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Paper: Paper.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
+        boxShadow: "var(--card-shadow)",
+        padding: `var(--mantine-spacing-${DEFAULT_SIZE})`
+      }
+    }
+  }),
+  ScrollArea: ScrollArea.extend({
+    defaultProps: {
+      scrollbarSize: 8
+    },
+    styles: {
+      scrollbar: {
+        background: "transparent",
+        '&[data-orientation="vertical"]': {
+          width: "8px"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "8px"
+        }
+      },
+      thumb: {
+        borderRadius: "var(--mantine-radius-default)",
+        background: "color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border))",
+        "&:hover": {
+          background: "var(--color-text-subtle)"
+        }
+      }
+    }
+  }),
+  SegmentedControl: SegmentedControl.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)"
+      },
+      indicator: {
+        backgroundColor: "var(--color-surface-hover)",
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Combobox: Combobox.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "red"
+      }
+    }
+  }),
+  Select: Select.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)"
+      }
+    }
+  }),
+  // Switch styles are in custom.css to support [data-checked] attribute selector
+  SimpleGrid: SimpleGrid.extend({
+    defaultProps: {
+      spacing: DEFAULT_SIZE,
+      verticalSpacing: DEFAULT_SIZE
+    }
+  }),
+  Stack: Stack.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  Table: Table.extend({
+    defaultProps: {
+      highlightOnHover: true
+    },
+    styles: {
+      table: {
+        "--table-border-color": "var(--color-border)",
+        "--table-highlight-on-hover-color": "var(--color-surface-hover)"
+      }
+    }
+  }),
+  Tabs: Tabs.extend({}),
+  Text: Text.extend({
+    styles: {
+      root: {
+        fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+      }
+    }
+  }),
+  // Timeline styles are in custom.css to override color-scheme-specific selectors
+  Tooltip: Tooltip.extend({
+    styles: {
+      tooltip: {
+        backgroundColor: "var(--color-surface)",
+        color: "var(--color-text)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  })
+  // Pagination styles are in custom.css to support :not([data-active]) selector
+};
+
+// src/theme/MantineThemeOverride.ts
+var mantineThemeOverride = createTheme({
+  defaultRadius: "xs",
+  fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  cursorType: "pointer",
+  spacing: {
+    xs: "0.5rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  radius: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem"
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem"
+  },
+  components: componentThemes
+});
+
 // src/theme/presets/utils.ts
 function hexToRgb(hex) {
   const h = hex.replace("#", "");
@@ -1111,7 +1366,6 @@ function createCssVariablesResolver(tokens, preset) {
     dark: { ...darkShades, ...darkDefaults, ...flat, ...dark }
   });
 }
-var LazyCoreAuthKitInner = lazy(() => import('./CoreAuthKitInner-KM72EYJS.js').then((m) => ({ default: m.CoreAuthKitInner })));
 var defaultQueryClient = null;
 function getDefaultQueryClient() {
   if (!defaultQueryClient) {
@@ -1122,56 +1376,7 @@ function getDefaultQueryClient() {
   return defaultQueryClient;
 }
 var defaultUseOrganizations = () => ({ isInitializing: false, isOrgRefreshing: false });
-function useResolvedColorScheme(scheme) {
-  const [resolved, setResolved] = useState(() => {
-    if (scheme && scheme !== "auto") return scheme;
-    if (typeof window === "undefined") return "dark";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  });
-  useEffect(() => {
-    if (scheme && scheme !== "auto") {
-      setResolved(scheme);
-      return;
-    }
-    const mql = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (e) => setResolved(e.matches ? "dark" : "light");
-    setResolved(mql.matches ? "dark" : "light");
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, [scheme]);
-  return resolved;
-}
-function buildCssVarStyles(theme) {
-  const preset = getPreset(theme?.preset ?? "default");
-  const tokens = theme?.tokens;
-  function toVarDeclarations(overrides) {
-    const lines = [];
-    for (const [key, varName] of Object.entries(TOKEN_VAR_MAP)) {
-      const value = overrides[key];
-      if (value) lines.push(`  ${varName}: ${value};`);
-    }
-    return lines.join("\n");
-  }
-  const flatTokens = {};
-  if (tokens) {
-    for (const key of Object.keys(TOKEN_VAR_MAP)) {
-      if (tokens[key] !== void 0) flatTokens[key] = tokens[key];
-    }
-  }
-  const darkMerged = { ...preset.dark, ...flatTokens, ...tokens?.dark };
-  const lightMerged = { ...preset.light, ...flatTokens, ...tokens?.light };
-  const darkBlock = toVarDeclarations(darkMerged);
-  const lightBlock = toVarDeclarations(lightMerged);
-  return [
-    `:root[data-elevasis-scheme="dark"] {
-${darkBlock}
-}`,
-    `:root[data-elevasis-scheme="light"] {
-${lightBlock}
-}`
-  ].join("\n\n");
-}
-function ElevasisCoreProvider({
+function ElevasisUIProvider({
   auth,
   theme,
   organizationId = null,
@@ -1183,35 +1388,12 @@ function ElevasisCoreProvider({
 }) {
   if (auth.mode === "apiKey") {
     throw new Error(
-      `ElevasisCoreProvider: auth mode 'apiKey' is not yet implemented. Only 'authkit' and 'oauth' modes are supported.`
+      `ElevasisUIProvider: auth mode 'apiKey' is not yet implemented. Only 'authkit' and 'oauth' modes are supported.`
     );
   }
   const resolvedQueryClient = queryClient ?? getDefaultQueryClient();
-  const resolvedScheme = useResolvedColorScheme(theme?.colorScheme);
+  const resolvedColorScheme = theme?.colorScheme ?? "dark";
   const preset = useMemo(() => getPreset(theme?.preset ?? "default"), [theme?.preset]);
-  useEffect(() => {
-    document.documentElement.setAttribute("data-elevasis-scheme", resolvedScheme);
-    return () => {
-      document.documentElement.removeAttribute("data-elevasis-scheme");
-    };
-  }, [resolvedScheme]);
-  const styleRef = useRef(null);
-  useEffect(() => {
-    const css = buildCssVarStyles(theme);
-    if (!styleRef.current) {
-      const el = document.createElement("style");
-      el.setAttribute("data-elevasis-vars", "");
-      document.head.appendChild(el);
-      styleRef.current = el;
-    }
-    styleRef.current.textContent = css;
-    return () => {
-      if (styleRef.current) {
-        styleRef.current.remove();
-        styleRef.current = null;
-      }
-    };
-  }, [theme?.preset, theme?.tokens, resolvedScheme]);
   useEffect(() => {
     if (!preset.fontImports?.length) return;
     const links = [];
@@ -1230,8 +1412,22 @@ function ElevasisCoreProvider({
       document.documentElement.style.removeProperty("--elevasis-font-family-subtitle");
     };
   }, [preset.fontImports, preset.subtitleFontFamily, preset.mantine?.headings?.fontFamily, preset.mantine?.fontFamily]);
+  const resolvedTheme = useMemo(() => {
+    const primaryHex = theme?.tokens?.primary ?? preset.dark.primary;
+    const primaryOverride = {
+      primaryColor: "primary",
+      colors: { primary: generateShades(primaryHex) }
+    };
+    let base = mergeThemeOverrides(mantineThemeOverride, primaryOverride);
+    if (preset.mantine) base = mergeThemeOverrides(base, preset.mantine);
+    return theme?.mantine ? mergeThemeOverrides(base, theme.mantine) : base;
+  }, [theme?.mantine, preset, theme?.tokens?.primary]);
+  const cssVariablesResolver = useMemo(
+    () => createCssVariablesResolver(theme?.tokens, theme?.preset),
+    [theme?.tokens, theme?.preset]
+  );
   const content = apiUrl ? /* @__PURE__ */ jsx(
-    CoreServiceBridge,
+    ServiceBridge,
     {
       apiUrl,
       organizationId,
@@ -1240,13 +1436,33 @@ function ElevasisCoreProvider({
       children
     }
   ) : children;
-  const AuthInner = auth.mode === "authkit" ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyCoreAuthKitInner, { auth, children: content }) }) : /* @__PURE__ */ jsx(CoreOAuthInner, { auth, children: content });
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: resolvedQueryClient, children: AuthInner });
+  const AuthInner = auth.mode === "authkit" ? /* @__PURE__ */ jsx(AuthKitInner, { auth, children: content }) : /* @__PURE__ */ jsx(OAuthInner, { auth, children: content });
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme: resolvedTheme,
+      defaultColorScheme: resolvedColorScheme,
+      cssVariablesResolver,
+      children: /* @__PURE__ */ jsx(QueryClientProvider, { client: resolvedQueryClient, children: AuthInner })
+    }
+  );
+}
+function AuthKitInner({ auth, children }) {
+  return /* @__PURE__ */ jsx(
+    AuthKitProvider,
+    {
+      clientId: auth.clientId,
+      apiHostname: auth.apiHostname ?? "api.workos.com",
+      redirectUri: auth.redirectUri,
+      devMode: auth.devMode ?? false,
+      children: /* @__PURE__ */ jsx(WorkOSAuthBridge, { children })
+    }
+  );
 }
-function CoreOAuthInner({ auth, children }) {
+function OAuthInner({ auth, children }) {
   return /* @__PURE__ */ jsx(OAuthProvider, { config: auth, children });
 }
-function CoreServiceBridge({
+function ServiceBridge({
   apiUrl,
   organizationId,
   isOrganizationReady,
@@ -1261,11 +1477,11 @@ function CoreServiceBridge({
       organizationId,
       isOrganizationReady: isOrganizationReady ?? !!organizationId,
       onError,
-      children: /* @__PURE__ */ jsx(CoreServiceBridgeInner, { apiUrl, organizationId, isOrganizationReady, children })
+      children: /* @__PURE__ */ jsx(ServiceBridgeInner, { apiUrl, organizationId, isOrganizationReady, children })
     }
   );
 }
-function CoreServiceBridgeInner({
+function ServiceBridgeInner({
   apiUrl,
   organizationId,
   isOrganizationReady,
@@ -1283,5 +1499,6 @@ function CoreServiceBridgeInner({
     }
   );
 }
+var ElevasisProvider = ElevasisUIProvider;
 
-export { ElevasisCoreProvider, createCssVariablesResolver, generateShades, getPreset };
+export { ElevasisProvider, ElevasisUIProvider, createCssVariablesResolver, generateShades, getPreset, mantineThemeOverride };

package/dist/{chunk-KSG4C5DD.js → chunk-QSVZP2NU.js}

@@ -150,6 +150,7 @@ function OAuthProvider({ config, children }) {
         client_id: config.clientId,
         redirect_uri: config.redirectUri,
         response_type: "code",
+        provider: config.provider ?? "authkit",
         code_challenge: challenge,
         code_challenge_method: "S256",
         state: oauthState
@@ -160,7 +161,7 @@ function OAuthProvider({ config, children }) {
       window.location.href = `https://api.workos.com/user_management/authorize?${params.toString()}`;
     };
     void start();
-  }, [config.clientId, config.redirectUri, config.organizationId]);
+  }, [config.clientId, config.redirectUri, config.organizationId, config.provider]);
   useEffect(() => {
     const url = new URL(window.location.href);
     const code = url.searchParams.get("code");

package/dist/chunk-ZQVPUAGR.js

@@ -0,0 +1,89 @@
+import { ApiClientProvider, createUseApiClient } from './chunk-GDV44UWF.js';
+import { ElevasisServiceProvider } from './chunk-KA7LO7U5.js';
+import { OAuthProvider } from './chunk-QSVZP2NU.js';
+import { useAuthContext } from './chunk-7PLEQFHO.js';
+import { lazy, Suspense, useRef } from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { jsx } from 'react/jsx-runtime';
+
+var LazyCoreAuthKitInner = lazy(() => import('./CoreAuthKitInner-KM72EYJS.js').then((m) => ({ default: m.CoreAuthKitInner })));
+var defaultQueryClient = null;
+function getDefaultQueryClient() {
+  if (!defaultQueryClient) {
+    defaultQueryClient = new QueryClient({
+      defaultOptions: { queries: { retry: 1 } }
+    });
+  }
+  return defaultQueryClient;
+}
+var defaultUseOrganizations = () => ({ isInitializing: false, isOrgRefreshing: false });
+function ElevasisCoreProvider({
+  auth,
+  organizationId = null,
+  queryClient,
+  apiUrl,
+  onError,
+  isOrganizationReady,
+  children
+}) {
+  if (auth.mode === "apiKey") {
+    throw new Error(
+      `ElevasisCoreProvider: auth mode 'apiKey' is not yet implemented. Only 'authkit' and 'oauth' modes are supported.`
+    );
+  }
+  const resolvedQueryClient = queryClient ?? getDefaultQueryClient();
+  const content = apiUrl ? /* @__PURE__ */ jsx(
+    CoreServiceBridge,
+    {
+      apiUrl,
+      organizationId,
+      isOrganizationReady,
+      onError,
+      children
+    }
+  ) : children;
+  const AuthInner = auth.mode === "authkit" ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyCoreAuthKitInner, { auth, children: content }) }) : /* @__PURE__ */ jsx(CoreOAuthInner, { auth, children: content });
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: resolvedQueryClient, children: AuthInner });
+}
+function CoreOAuthInner({ auth, children }) {
+  return /* @__PURE__ */ jsx(OAuthProvider, { config: auth, children });
+}
+function CoreServiceBridge({
+  apiUrl,
+  organizationId,
+  isOrganizationReady,
+  onError,
+  children
+}) {
+  const { getAccessToken } = useAuthContext();
+  return /* @__PURE__ */ jsx(
+    ApiClientProvider,
+    {
+      getAccessToken,
+      organizationId,
+      isOrganizationReady: isOrganizationReady ?? !!organizationId,
+      onError,
+      children: /* @__PURE__ */ jsx(CoreServiceBridgeInner, { apiUrl, organizationId, isOrganizationReady, children })
+    }
+  );
+}
+function CoreServiceBridgeInner({
+  apiUrl,
+  organizationId,
+  isOrganizationReady,
+  children
+}) {
+  const useApiClient = useRef(createUseApiClient(defaultUseOrganizations, apiUrl)).current;
+  const { apiRequest } = useApiClient();
+  return /* @__PURE__ */ jsx(
+    ElevasisServiceProvider,
+    {
+      apiRequest,
+      organizationId,
+      isReady: isOrganizationReady ?? !!organizationId,
+      children
+    }
+  );
+}
+
+export { ElevasisCoreProvider };

package/dist/index.d.ts

@@ -144,6 +144,8 @@ interface OAuthConfig {
     tokenStorage?: 'session';
     /** Pre-select organization in WorkOS flow. */
     organizationId?: string;
+    /** Auth provider for the authorize request. Defaults to 'authkit' (hosted login UI). */
+    provider?: 'authkit' | 'GoogleOAuth' | 'MicrosoftOAuth' | 'GitHubOAuth' | 'AppleOAuth';
 }
 /** Deferred -- will throw at runtime. */
 interface ApiKeyConfig {
@@ -184,6 +186,12 @@ interface ElevasisCoreProviderProps {
      * Command-center passes `!!currentMembership` for its stricter readiness requirement.
      */
     isOrganizationReady?: boolean;
+    /**
+     * Whether to inject CSS variables, `data-elevasis-scheme` attribute, and font links.
+     * Set to `false` when the consumer has its own complete design system and only
+     * needs auth + API from this provider. Defaults to `true`.
+     */
+    injectStyles?: boolean;
     children: ReactNode;
 }
 interface ElevasisProviderProps {
@@ -5802,9 +5810,9 @@ declare const ElevasisProvider: typeof ElevasisUIProvider;
 /**
  * Headless root provider for Elevasis-powered applications.
  *
- * Same capabilities as ElevasisUIProvider but without any Mantine dependency.
- * Injects CSS variables via a `<style>` tag and sets `data-elevasis-scheme`
- * on the `<html>` element.
+ * Pure auth + API provider with no style side-effects. Does not inject CSS
+ * variables, set `data-elevasis-scheme`, or load fonts. Consumers that need
+ * Elevasis theming should use `ElevasisProvider` (Mantine) instead.
  *
  * Composes: QueryClientProvider + auth provider + auth bridge.
  * When apiUrl is provided, also composes ApiClientProvider + ElevasisServiceProvider.
@@ -5820,7 +5828,7 @@ declare const ElevasisProvider: typeof ElevasisUIProvider;
  * </ElevasisCoreProvider>
  * ```
  */
-declare function ElevasisCoreProvider({ auth, theme, organizationId, queryClient, apiUrl, onError, isOrganizationReady, children }: ElevasisCoreProviderProps): react_jsx_runtime.JSX.Element;
+declare function ElevasisCoreProvider({ auth, organizationId, queryClient, apiUrl, onError, isOrganizationReady, children }: ElevasisCoreProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to access the ElevasisServiceProvider context.

package/dist/index.js

@@ -20,13 +20,13 @@ export { BaseEdge, BaseNode, GRAPH_CONSTANTS, GlowingHandle, GraphBackground, Gr
 export { APIErrorAlert, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, JsonViewer, ListSkeleton, NavigationButton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from './chunk-OUHGHTE7.js';
 export { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import './chunk-YZ6GTZXL.js';
-export { ElevasisProvider, ElevasisUIProvider, mantineThemeOverride } from './chunk-QGEFP2EU.js';
-export { ElevasisCoreProvider, createCssVariablesResolver, generateShades, getPreset } from './chunk-XVPEDNIM.js';
+export { ElevasisProvider, ElevasisUIProvider, createCssVariablesResolver, generateShades, getPreset, mantineThemeOverride } from './chunk-B64YDSAY.js';
+export { ElevasisCoreProvider } from './chunk-ZQVPUAGR.js';
 export { ApiClientProvider, createUseApiClient, useApiClientContext } from './chunk-GDV44UWF.js';
 export { ElevasisServiceProvider, useElevasisServices } from './chunk-KA7LO7U5.js';
 export { APIClientError, formatDate, formatErrorMessage, getErrorInfo, getErrorTitle, getResourceColor, getResourceIcon, isAPIClientError, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, validateEmail } from './chunk-7AI5ZYJ4.js';
 export { useSessionCheck as useRefocusSessionCheck, useSessionCheck, useStableAccessToken } from './chunk-HBRMWW6V.js';
 export { WorkOSAuthBridge } from './chunk-NIAVTSMB.js';
-export { useOAuthContext } from './chunk-KSG4C5DD.js';
+export { useOAuthContext } from './chunk-QSVZP2NU.js';
 export { AuthProvider, useAuthContext } from './chunk-7PLEQFHO.js';
 export { RouterProvider, useRouterContext } from './chunk-Q7DJKLEN.js';

package/dist/provider/index.d.ts

@@ -94,6 +94,8 @@ interface OAuthConfig {
     tokenStorage?: 'session';
     /** Pre-select organization in WorkOS flow. */
     organizationId?: string;
+    /** Auth provider for the authorize request. Defaults to 'authkit' (hosted login UI). */
+    provider?: 'authkit' | 'GoogleOAuth' | 'MicrosoftOAuth' | 'GitHubOAuth' | 'AppleOAuth';
 }
 /** Deferred -- will throw at runtime. */
 interface ApiKeyConfig {
@@ -134,6 +136,12 @@ interface ElevasisCoreProviderProps {
      * Command-center passes `!!currentMembership` for its stricter readiness requirement.
      */
     isOrganizationReady?: boolean;
+    /**
+     * Whether to inject CSS variables, `data-elevasis-scheme` attribute, and font links.
+     * Set to `false` when the consumer has its own complete design system and only
+     * needs auth + API from this provider. Defaults to `true`.
+     */
+    injectStyles?: boolean;
     children: ReactNode;
 }
 interface ElevasisProviderProps {
@@ -238,9 +246,9 @@ declare const ElevasisProvider: typeof ElevasisUIProvider;
 /**
  * Headless root provider for Elevasis-powered applications.
  *
- * Same capabilities as ElevasisUIProvider but without any Mantine dependency.
- * Injects CSS variables via a `<style>` tag and sets `data-elevasis-scheme`
- * on the `<html>` element.
+ * Pure auth + API provider with no style side-effects. Does not inject CSS
+ * variables, set `data-elevasis-scheme`, or load fonts. Consumers that need
+ * Elevasis theming should use `ElevasisProvider` (Mantine) instead.
  *
  * Composes: QueryClientProvider + auth provider + auth bridge.
  * When apiUrl is provided, also composes ApiClientProvider + ElevasisServiceProvider.
@@ -256,7 +264,7 @@ declare const ElevasisProvider: typeof ElevasisUIProvider;
  * </ElevasisCoreProvider>
  * ```
  */
-declare function ElevasisCoreProvider({ auth, theme, organizationId, queryClient, apiUrl, onError, isOrganizationReady, children }: ElevasisCoreProviderProps): react_jsx_runtime.JSX.Element;
+declare function ElevasisCoreProvider({ auth, organizationId, queryClient, apiUrl, onError, isOrganizationReady, children }: ElevasisCoreProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to access the ElevasisServiceProvider context.

package/dist/provider/index.js

@@ -1,8 +1,8 @@
-export { ElevasisProvider, ElevasisUIProvider } from '../chunk-QGEFP2EU.js';
-export { ElevasisCoreProvider } from '../chunk-XVPEDNIM.js';
+export { ElevasisProvider, ElevasisUIProvider } from '../chunk-B64YDSAY.js';
+export { ElevasisCoreProvider } from '../chunk-ZQVPUAGR.js';
 import '../chunk-GDV44UWF.js';
 export { ElevasisServiceProvider, useElevasisServices } from '../chunk-KA7LO7U5.js';
 import '../chunk-7AI5ZYJ4.js';
 import '../chunk-NIAVTSMB.js';
-import '../chunk-KSG4C5DD.js';
+import '../chunk-QSVZP2NU.js';
 import '../chunk-7PLEQFHO.js';

package/dist/provider/published.d.ts

@@ -81,6 +81,8 @@ interface OAuthConfig {
     tokenStorage?: 'session';
     /** Pre-select organization in WorkOS flow. */
     organizationId?: string;
+    /** Auth provider for the authorize request. Defaults to 'authkit' (hosted login UI). */
+    provider?: 'authkit' | 'GoogleOAuth' | 'MicrosoftOAuth' | 'GitHubOAuth' | 'AppleOAuth';
 }
 /** Deferred -- will throw at runtime. */
 interface ApiKeyConfig {
@@ -121,6 +123,12 @@ interface ElevasisCoreProviderProps {
      * Command-center passes `!!currentMembership` for its stricter readiness requirement.
      */
     isOrganizationReady?: boolean;
+    /**
+     * Whether to inject CSS variables, `data-elevasis-scheme` attribute, and font links.
+     * Set to `false` when the consumer has its own complete design system and only
+     * needs auth + API from this provider. Defaults to `true`.
+     */
+    injectStyles?: boolean;
     children: ReactNode;
 }
 /**
@@ -145,9 +153,9 @@ interface ElevasisServiceProviderProps {
 /**
  * Headless root provider for Elevasis-powered applications.
  *
- * Same capabilities as ElevasisUIProvider but without any Mantine dependency.
- * Injects CSS variables via a `<style>` tag and sets `data-elevasis-scheme`
- * on the `<html>` element.
+ * Pure auth + API provider with no style side-effects. Does not inject CSS
+ * variables, set `data-elevasis-scheme`, or load fonts. Consumers that need
+ * Elevasis theming should use `ElevasisProvider` (Mantine) instead.
  *
  * Composes: QueryClientProvider + auth provider + auth bridge.
  * When apiUrl is provided, also composes ApiClientProvider + ElevasisServiceProvider.
@@ -163,7 +171,7 @@ interface ElevasisServiceProviderProps {
  * </ElevasisCoreProvider>
  * ```
  */
-declare function ElevasisCoreProvider({ auth, theme, organizationId, queryClient, apiUrl, onError, isOrganizationReady, children }: ElevasisCoreProviderProps): react_jsx_runtime.JSX.Element;
+declare function ElevasisCoreProvider({ auth, organizationId, queryClient, apiUrl, onError, isOrganizationReady, children }: ElevasisCoreProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to access the ElevasisServiceProvider context.

package/dist/provider/published.js

@@ -1,6 +1,6 @@
-export { ElevasisCoreProvider } from '../chunk-XVPEDNIM.js';
+export { ElevasisCoreProvider } from '../chunk-ZQVPUAGR.js';
 import '../chunk-GDV44UWF.js';
 export { ElevasisServiceProvider, useElevasisServices } from '../chunk-KA7LO7U5.js';
 import '../chunk-7AI5ZYJ4.js';
-import '../chunk-KSG4C5DD.js';
+import '../chunk-QSVZP2NU.js';
 import '../chunk-7PLEQFHO.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elevasis/ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "UI components and platform-aware hooks for building custom frontends on the Elevasis platform",
   "type": "module",
   "license": "MIT",

package/dist/chunk-QGEFP2EU.js

@@ -1,399 +0,0 @@
-import { getPreset, generateShades, createCssVariablesResolver } from './chunk-XVPEDNIM.js';
-import { ApiClientProvider, createUseApiClient } from './chunk-GDV44UWF.js';
-import { ElevasisServiceProvider } from './chunk-KA7LO7U5.js';
-import { WorkOSAuthBridge } from './chunk-NIAVTSMB.js';
-import { OAuthProvider } from './chunk-KSG4C5DD.js';
-import { useAuthContext } from './chunk-7PLEQFHO.js';
-import { useMemo, useEffect, useRef } from 'react';
-import { Tooltip, Text, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Code, Divider, Card, Button, Accordion, createTheme, mergeThemeOverrides, MantineProvider } from '@mantine/core';
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { AuthKitProvider } from '@workos-inc/authkit-react';
-import '@mantine/core/styles.css';
-import '@mantine/notifications/styles.css';
-import { jsx } from 'react/jsx-runtime';
-
-var DEFAULT_SIZE = "sm";
-var glassBase = {
-  backdropFilter: "var(--glass-blur)",
-  WebkitBackdropFilter: "var(--glass-blur)",
-  border: "1px solid var(--color-border)"
-};
-var componentThemes = {
-  Accordion: Accordion.extend({
-    styles: {
-      item: {
-        borderColor: "var(--color-border)"
-      },
-      content: {
-        backgroundColor: "var(--color-surface)"
-      }
-    }
-  }),
-  Button: Button.extend({
-    styles: {
-      root: {
-        transition: `all var(--duration-fast) var(--easing)`
-      }
-    }
-  }),
-  Card: Card.extend({
-    defaultProps: {
-      p: DEFAULT_SIZE
-    },
-    styles: {
-      root: {
-        backgroundColor: "var(--glass-background)",
-        ...glassBase,
-        boxShadow: "var(--card-shadow)"
-      }
-    }
-  }),
-  // Checkbox styles are in custom.css to support :checked pseudo-selector
-  Divider: Divider.extend({
-    styles: {
-      root: {
-        borderColor: "var(--color-border)"
-      }
-    }
-  }),
-  Code: Code.extend({
-    styles: {
-      root: {
-        backgroundColor: "var(--color-surface)",
-        border: "1px solid var(--color-border)"
-      }
-    }
-  }),
-  Flex: Flex.extend({
-    defaultProps: {
-      gap: DEFAULT_SIZE
-    }
-  }),
-  Grid: Grid.extend({
-    defaultProps: {
-      gutter: DEFAULT_SIZE
-    }
-  }),
-  Group: Group.extend({
-    defaultProps: {
-      gap: DEFAULT_SIZE
-    }
-  }),
-  HoverCard: HoverCard.extend({
-    styles: {
-      dropdown: {
-        backgroundColor: "var(--color-surface)",
-        border: "1px solid var(--color-border)",
-        boxShadow: "var(--standard-box-shadow)"
-      }
-    }
-  }),
-  Input: Input.extend({
-    styles: {
-      input: {
-        backgroundColor: "var(--color-surface)",
-        border: "none",
-        borderBottom: "1px solid var(--color-border)",
-        borderRadius: "0"
-      }
-    }
-  }),
-  Menu: Menu.extend({
-    styles: {
-      dropdown: {
-        background: "var(--color-surface)",
-        border: "1px solid var(--color-border)"
-      }
-    }
-  }),
-  Modal: Modal.extend({
-    styles: {
-      content: {
-        backgroundColor: "var(--color-surface)",
-        border: "1px solid var(--color-border)"
-      }
-    }
-  }),
-  Notification: Notification.extend({
-    styles: {
-      root: {
-        backgroundColor: "color-mix(in srgb, var(--color-surface) 90%, transparent)",
-        ...glassBase
-      }
-    }
-  }),
-  Popover: Popover.extend({
-    styles: {
-      dropdown: {
-        backgroundColor: "var(--color-surface)",
-        ...glassBase,
-        boxShadow: "var(--standard-box-shadow)"
-      }
-    }
-  }),
-  Paper: Paper.extend({
-    styles: {
-      root: {
-        backgroundColor: "var(--glass-background)",
-        ...glassBase,
-        boxShadow: "var(--card-shadow)",
-        padding: `var(--mantine-spacing-${DEFAULT_SIZE})`
-      }
-    }
-  }),
-  ScrollArea: ScrollArea.extend({
-    defaultProps: {
-      scrollbarSize: 8
-    },
-    styles: {
-      scrollbar: {
-        background: "transparent",
-        '&[data-orientation="vertical"]': {
-          width: "8px"
-        },
-        '&[data-orientation="horizontal"]': {
-          height: "8px"
-        }
-      },
-      thumb: {
-        borderRadius: "var(--mantine-radius-default)",
-        background: "color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border))",
-        "&:hover": {
-          background: "var(--color-text-subtle)"
-        }
-      }
-    }
-  }),
-  SegmentedControl: SegmentedControl.extend({
-    styles: {
-      root: {
-        backgroundColor: "var(--color-surface)"
-      },
-      indicator: {
-        backgroundColor: "var(--color-surface-hover)",
-        boxShadow: "var(--standard-box-shadow)"
-      }
-    }
-  }),
-  Combobox: Combobox.extend({
-    styles: {
-      dropdown: {
-        backgroundColor: "red"
-      }
-    }
-  }),
-  Select: Select.extend({
-    styles: {
-      dropdown: {
-        backgroundColor: "var(--color-surface)"
-      }
-    }
-  }),
-  // Switch styles are in custom.css to support [data-checked] attribute selector
-  SimpleGrid: SimpleGrid.extend({
-    defaultProps: {
-      spacing: DEFAULT_SIZE,
-      verticalSpacing: DEFAULT_SIZE
-    }
-  }),
-  Stack: Stack.extend({
-    defaultProps: {
-      gap: DEFAULT_SIZE
-    }
-  }),
-  Table: Table.extend({
-    defaultProps: {
-      highlightOnHover: true
-    },
-    styles: {
-      table: {
-        "--table-border-color": "var(--color-border)",
-        "--table-highlight-on-hover-color": "var(--color-surface-hover)"
-      }
-    }
-  }),
-  Tabs: Tabs.extend({}),
-  Text: Text.extend({
-    styles: {
-      root: {
-        fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-      }
-    }
-  }),
-  // Timeline styles are in custom.css to override color-scheme-specific selectors
-  Tooltip: Tooltip.extend({
-    styles: {
-      tooltip: {
-        backgroundColor: "var(--color-surface)",
-        color: "var(--color-text)",
-        border: "1px solid var(--color-border)"
-      }
-    }
-  })
-  // Pagination styles are in custom.css to support :not([data-active]) selector
-};
-
-// src/theme/MantineThemeOverride.ts
-var mantineThemeOverride = createTheme({
-  defaultRadius: "xs",
-  fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-  cursorType: "pointer",
-  spacing: {
-    xs: "0.5rem",
-    sm: "0.75rem",
-    md: "1rem",
-    lg: "1.5rem",
-    xl: "2rem"
-  },
-  radius: {
-    xs: "0.25rem",
-    sm: "0.5rem",
-    md: "0.75rem",
-    lg: "1rem",
-    xl: "1.5rem"
-  },
-  fontSizes: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    md: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem"
-  },
-  components: componentThemes
-});
-var defaultQueryClient = null;
-function getDefaultQueryClient() {
-  if (!defaultQueryClient) {
-    defaultQueryClient = new QueryClient({
-      defaultOptions: { queries: { retry: 1 } }
-    });
-  }
-  return defaultQueryClient;
-}
-var defaultUseOrganizations = () => ({ isInitializing: false, isOrgRefreshing: false });
-function ElevasisUIProvider({
-  auth,
-  theme,
-  organizationId = null,
-  queryClient,
-  apiUrl,
-  onError,
-  isOrganizationReady,
-  children
-}) {
-  if (auth.mode === "apiKey") {
-    throw new Error(
-      `ElevasisUIProvider: auth mode 'apiKey' is not yet implemented. Only 'authkit' and 'oauth' modes are supported.`
-    );
-  }
-  const resolvedQueryClient = queryClient ?? getDefaultQueryClient();
-  const resolvedColorScheme = theme?.colorScheme ?? "dark";
-  const preset = useMemo(() => getPreset(theme?.preset ?? "default"), [theme?.preset]);
-  useEffect(() => {
-    if (!preset.fontImports?.length) return;
-    const links = [];
-    for (const href of preset.fontImports) {
-      if (document.querySelector(`link[href="${href}"]`)) continue;
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = href;
-      document.head.appendChild(link);
-      links.push(link);
-    }
-    const subtitleFont = preset.subtitleFontFamily ?? preset.mantine?.headings?.fontFamily ?? preset.mantine?.fontFamily ?? "";
-    document.documentElement.style.setProperty("--elevasis-font-family-subtitle", subtitleFont);
-    return () => {
-      links.forEach((l) => l.remove());
-      document.documentElement.style.removeProperty("--elevasis-font-family-subtitle");
-    };
-  }, [preset.fontImports, preset.subtitleFontFamily, preset.mantine?.headings?.fontFamily, preset.mantine?.fontFamily]);
-  const resolvedTheme = useMemo(() => {
-    const primaryHex = theme?.tokens?.primary ?? preset.dark.primary;
-    const primaryOverride = {
-      primaryColor: "primary",
-      colors: { primary: generateShades(primaryHex) }
-    };
-    let base = mergeThemeOverrides(mantineThemeOverride, primaryOverride);
-    if (preset.mantine) base = mergeThemeOverrides(base, preset.mantine);
-    return theme?.mantine ? mergeThemeOverrides(base, theme.mantine) : base;
-  }, [theme?.mantine, preset, theme?.tokens?.primary]);
-  const cssVariablesResolver = useMemo(
-    () => createCssVariablesResolver(theme?.tokens, theme?.preset),
-    [theme?.tokens, theme?.preset]
-  );
-  const content = apiUrl ? /* @__PURE__ */ jsx(
-    ServiceBridge,
-    {
-      apiUrl,
-      organizationId,
-      isOrganizationReady,
-      onError,
-      children
-    }
-  ) : children;
-  const AuthInner = auth.mode === "authkit" ? /* @__PURE__ */ jsx(AuthKitInner, { auth, children: content }) : /* @__PURE__ */ jsx(OAuthInner, { auth, children: content });
-  return /* @__PURE__ */ jsx(
-    MantineProvider,
-    {
-      theme: resolvedTheme,
-      defaultColorScheme: resolvedColorScheme,
-      cssVariablesResolver,
-      children: /* @__PURE__ */ jsx(QueryClientProvider, { client: resolvedQueryClient, children: AuthInner })
-    }
-  );
-}
-function AuthKitInner({ auth, children }) {
-  return /* @__PURE__ */ jsx(
-    AuthKitProvider,
-    {
-      clientId: auth.clientId,
-      apiHostname: auth.apiHostname ?? "api.workos.com",
-      redirectUri: auth.redirectUri,
-      devMode: auth.devMode ?? false,
-      children: /* @__PURE__ */ jsx(WorkOSAuthBridge, { children })
-    }
-  );
-}
-function OAuthInner({ auth, children }) {
-  return /* @__PURE__ */ jsx(OAuthProvider, { config: auth, children });
-}
-function ServiceBridge({
-  apiUrl,
-  organizationId,
-  isOrganizationReady,
-  onError,
-  children
-}) {
-  const { getAccessToken } = useAuthContext();
-  return /* @__PURE__ */ jsx(
-    ApiClientProvider,
-    {
-      getAccessToken,
-      organizationId,
-      isOrganizationReady: isOrganizationReady ?? !!organizationId,
-      onError,
-      children: /* @__PURE__ */ jsx(ServiceBridgeInner, { apiUrl, organizationId, isOrganizationReady, children })
-    }
-  );
-}
-function ServiceBridgeInner({
-  apiUrl,
-  organizationId,
-  isOrganizationReady,
-  children
-}) {
-  const useApiClient = useRef(createUseApiClient(defaultUseOrganizations, apiUrl)).current;
-  const { apiRequest } = useApiClient();
-  return /* @__PURE__ */ jsx(
-    ElevasisServiceProvider,
-    {
-      apiRequest,
-      organizationId,
-      isReady: isOrganizationReady ?? !!organizationId,
-      children
-    }
-  );
-}
-var ElevasisProvider = ElevasisUIProvider;
-
-export { ElevasisProvider, ElevasisUIProvider, mantineThemeOverride };