@sanity/sdk-react 0.0.0-alpha.10 → 0.0.0-alpha.11

package/dist/components.d.ts

@@ -57,7 +57,6 @@ declare type LoginErrorProps = FallbackProps & LoginLayoutProps
 
 /**
  * @alpha
- * @internal
  */
 declare interface LoginLayoutProps {
   /** Optional header content rendered at top of card */

package/dist/components.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { AuthStateType, createSanityInstance } from "@sanity/sdk";
-import { Suspense, useEffect, useCallback, useMemo } from "react";
+import { Fragment, Suspense, useEffect, useCallback, useMemo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useLoginUrls, useHandleCallback, useLogOut, useAuthState } from "./_chunks-es/useLogOut.js";
-import { Box, Flex, Inline, Text, Container, Card, Heading, Spinner, Stack, Button } from "@sanity/ui";
 import { SanityLogo } from "@sanity/logos";
 import { SanityProvider } from "./_chunks-es/context.js";
 class AuthError extends Error {
@@ -34,18 +33,9 @@ const LINKS = [
   }
 ];
 function LoginFooter() {
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(SanityLogo, {}) }),
-    /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Inline, { space: 2, paddingY: 3, children: LINKS.map((link) => /* @__PURE__ */ jsx(Text, { size: 0, children: /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: link.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: { color: "inherit" },
-        children: link.title
-      }
-    ) }, link.url)) }) })
+  return /* @__PURE__ */ jsxs("div", { className: "sc-login-footer", children: [
+    /* @__PURE__ */ jsx(SanityLogo, { className: "sc-login-footer__logo" }),
+    /* @__PURE__ */ jsx("ul", { className: "sc-login-footer__links", children: LINKS.map((link) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { className: "sc-login-footer__link", children: /* @__PURE__ */ jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title }) }) }, link.title)) })
   ] });
 }
 function LoginLayout({
@@ -53,38 +43,23 @@ function LoginLayout({
   footer = /* @__PURE__ */ jsx(LoginFooter, {}),
   header
 }) {
-  return /* @__PURE__ */ jsx(Container, { width: 0, children: /* @__PURE__ */ jsxs(Card, { shadow: 1, radius: 2, padding: 4, children: [
-    header && header,
-    children && children,
+  return /* @__PURE__ */ jsx("div", { className: "sc-login-layout", children: /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__card", children: [
+      header && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-header", children: header }),
+      children && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-body", children })
+    ] }),
     footer
   ] }) });
 }
 function Login({ header, footer }) {
-  return /* @__PURE__ */ jsxs(LoginLayout, { header, footer, children: [
-    /* @__PURE__ */ jsx(Heading, { as: "h6", align: "center", children: "Choose login provider:" }),
-    /* @__PURE__ */ jsx(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Spinner, {}) }) }),
-        children: /* @__PURE__ */ jsx(Providers, {})
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login", children: [
+    /* @__PURE__ */ jsx("h1", { className: "sc-login__title", children: "Choose login provider" }),
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "sc-login__loading", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Providers, {}) })
+  ] }) });
 }
 function Providers() {
   const loginUrls = useLoginUrls();
-  return /* @__PURE__ */ jsx(Stack, { space: 3, marginY: 5, children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx(
-    Button,
-    {
-      as: "a",
-      href: url,
-      mode: "ghost",
-      text: title,
-      textAlign: "center",
-      fontSize: 2
-    },
-    url
-  )) });
+  return /* @__PURE__ */ jsx("div", { className: "sc-login-providers", children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx("a", { href: url, children: title }, url)) });
 }
 function LoginCallback({ header, footer }) {
   const handleCallback = useHandleCallback();
@@ -93,10 +68,10 @@ function LoginCallback({ header, footer }) {
     handleCallback(url.toString()).then((replacementLocation) => {
       replacementLocation && history.replaceState(null, "", replacementLocation);
     });
-  }, [handleCallback]), /* @__PURE__ */ jsxs(LoginLayout, { header, footer, children: [
-    /* @__PURE__ */ jsx(Heading, { as: "h6", align: "center", children: "Logging you in\u2026" }),
-    /* @__PURE__ */ jsx(Flex, { paddingY: 5, align: "center", justify: "center", children: /* @__PURE__ */ jsx(Spinner, {}) })
-  ] });
+  }, [handleCallback]), /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-callback", children: [
+    /* @__PURE__ */ jsx("h1", { className: "sc-login-callback__title", children: "Logging you in\u2026" }),
+    /* @__PURE__ */ jsx("div", { className: "sc-login-callback__loading", children: "Loading\u2026" })
+  ] }) });
 }
 function LoginError({
   error,
@@ -108,10 +83,12 @@ function LoginError({
   const logout = useLogOut(), handleRetry = useCallback(async () => {
     await logout(), resetErrorBoundary();
   }, [logout, resetErrorBoundary]);
-  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(Stack, { space: 5, marginBottom: 5, children: [
-    /* @__PURE__ */ jsx(Heading, { as: "h6", align: "center", children: "Authentication Error" }),
-    /* @__PURE__ */ jsx(Text, { align: "center", children: "Please try again or contact support if the problem persists." }),
-    /* @__PURE__ */ jsx(Button, { mode: "ghost", onClick: handleRetry, text: "Retry", fontSize: 2 })
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-error", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sc-login-error__content", children: [
+      /* @__PURE__ */ jsx("h2", { className: "sc-login-error__title", children: "Authentication Error" }),
+      /* @__PURE__ */ jsx("p", { className: "sc-login-error__description", children: "Please try again or contact support if the problem persists." })
+    ] }),
+    /* @__PURE__ */ jsx("button", { className: "sc-login-error__button", onClick: handleRetry, children: "Retry" })
   ] }) });
 }
 typeof window < "u" && window.self !== window.top && import("@sanity/os/bridge");

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n  constructor(error: unknown) {\n    if (\n      typeof error === 'object' &&\n      !!error &&\n      'message' in error &&\n      typeof error.message === 'string'\n    ) {\n      super(error.message)\n    } else {\n      super()\n    }\n\n    this.cause = error\n  }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Box, Flex, Inline, Text} from '@sanity/ui'\n\nconst LINKS = [\n  {\n    url: 'https://slack.sanity.io/',\n    i18nKey: 'workspaces.community-title',\n    title: 'Community',\n  },\n  {\n    url: 'https://www.sanity.io/docs',\n    i18nKey: 'workspaces.docs-title',\n    title: 'Docs',\n  },\n  {\n    url: 'https://www.sanity.io/legal/privacy',\n    i18nKey: 'workspaces.privacy-title',\n    title: 'Privacy',\n  },\n  {\n    url: 'https://www.sanity.io',\n    i18nKey: 'workspaces.sanity-io-title',\n    title: 'sanity.io',\n  },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n  return (\n    <Box>\n      <Flex justify=\"center\">\n        <SanityLogo />\n      </Flex>\n\n      <Flex justify=\"center\">\n        <Inline space={2} paddingY={3}>\n          {LINKS.map((link) => (\n            <Text size={0} key={link.url}>\n              <a\n                href={link.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                style={{color: 'inherit'}}\n              >\n                {link.title}\n              </a>\n            </Text>\n          ))}\n        </Inline>\n      </Flex>\n    </Box>\n  )\n}\n","import {Card, Container} from '@sanity/ui'\n\nimport {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n * @internal\n */\nexport interface LoginLayoutProps {\n  /** Optional header content rendered at top of card */\n  header?: React.ReactNode\n\n  /** Optional footer content rendered below card. Defaults to an internal login footer */\n  footer?: React.ReactNode\n\n  /** Main content rendered in card body */\n  children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n *   return (\n *     <LoginLayout\n *       header={header}\n *       footer={footer}\n *     >\n *       <CustomLoginContent />\n *     </LoginLayout>\n *   )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n *   LoginComponent={CustomLogin}\n *   header={<Logo />}\n * >\n *   <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n  children,\n  footer = <LoginFooter />,\n  header,\n}: LoginLayoutProps): React.ReactNode {\n  return (\n    <Container width={0}>\n      <Card shadow={1} radius={2} padding={4}>\n        {header && header}\n\n        {children && children}\n\n        {footer}\n      </Card>\n    </Container>\n  )\n}\n","import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'\nimport {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n * @internal\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <Heading as=\"h6\" align=\"center\">\n        Choose login provider:\n      </Heading>\n\n      <Suspense\n        fallback={\n          <Box padding={5}>\n            <Flex align=\"center\" justify=\"center\">\n              <Spinner />\n            </Flex>\n          </Box>\n        }\n      >\n        <Providers />\n      </Suspense>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <Stack space={3} marginY={5}>\n      {loginUrls.map(({title, url}) => (\n        <Button\n          key={url}\n          as=\"a\"\n          href={url}\n          mode=\"ghost\"\n          text={title}\n          textAlign=\"center\"\n          fontSize={2}\n        ></Button>\n      ))}\n    </Stack>\n  )\n}\n","import {Flex, Heading, Spinner} from '@sanity/ui'\nimport {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n  const handleCallback = useHandleCallback()\n\n  useEffect(() => {\n    const url = new URL(location.href)\n    handleCallback(url.toString()).then((replacementLocation) => {\n      if (replacementLocation) {\n        // history API with `replaceState` is used to prevent a reload but still\n        // remove the short-lived token from the URL\n        history.replaceState(null, '', replacementLocation)\n      }\n    })\n  }, [handleCallback])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <Heading as=\"h6\" align=\"center\">\n        Logging you in…\n      </Heading>\n      <Flex paddingY={5} align=\"center\" justify=\"center\">\n        <Spinner />\n      </Flex>\n    </LoginLayout>\n  )\n}\n","import {Button, Heading, Stack, Text} from '@sanity/ui'\nimport {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n  error,\n  resetErrorBoundary,\n  header,\n  footer,\n}: LoginErrorProps): React.ReactNode {\n  if (!(error instanceof AuthError)) throw error\n  const logout = useLogOut()\n\n  const handleRetry = useCallback(async () => {\n    await logout()\n    resetErrorBoundary()\n  }, [logout, resetErrorBoundary])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <Stack space={5} marginBottom={5}>\n        <Heading as=\"h6\" align=\"center\">\n          Authentication Error\n        </Heading>\n        <Text align=\"center\">Please try again or contact support if the problem persists.</Text>\n        <Button mode=\"ghost\" onClick={handleRetry} text=\"Retry\" fontSize={2} />\n      </Stack>\n    </LoginLayout>\n  )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n// Only import bridge if we're in an iframe. This assumes that the app is\n// running withing SanityOS if it is in an iframe.\nif (typeof window !== 'undefined' && window.self !== window.top) {\n  import('@sanity/os/bridge')\n}\n\n/**\n * @internal\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n  /**\n   * Custom component to render the login screen.\n   * Receives all login layout props. Defaults to {@link Login}.\n   */\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render during OAuth callback processing.\n   * Receives all login layout props. Defaults to {@link LoginCallback}.\n   */\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render when authentication errors occur.\n   * Receives login layout props and error boundary props. Defaults to\n   * {@link LoginError}\n   */\n  LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <AuthBoundary header={<MyLogo />}>\n *       <ProtectedContent />\n *     </AuthBoundary>\n *   )\n * }\n * ```\n *\n * @internal\n */\nexport function AuthBoundary({\n  LoginErrorComponent = LoginError,\n  ...props\n}: AuthBoundaryProps): React.ReactNode {\n  const {header, footer} = props\n  const FallbackComponent = useMemo(() => {\n    return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n    }\n  }, [header, footer, LoginErrorComponent])\n\n  return (\n    <ErrorBoundary FallbackComponent={FallbackComponent}>\n      <AuthSwitch {...props} />\n    </ErrorBoundary>\n  )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n  LoginComponent = Login,\n  CallbackComponent = LoginCallback,\n  children,\n  ...props\n}: AuthSwitchProps) {\n  const authState = useAuthState()\n\n  switch (authState.type) {\n    case AuthStateType.ERROR: {\n      throw new AuthError(authState.error)\n    }\n    case AuthStateType.LOGGING_IN: {\n      return <CallbackComponent {...props} />\n    }\n    case AuthStateType.LOGGED_IN: {\n      return children\n    }\n    default: {\n      return <LoginComponent {...props} />\n    }\n  }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n */\nexport interface SanityAppProps {\n  sanityConfig: SanityConfig\n  children: React.ReactNode\n}\n\n/**\n * @public\n *\n * The SanityApp component provides your Sanity application with access to your Sanity configuration,\n * as well as application context and state which is used by the Sanity React hooks. Your application\n * must be wrapped with the SanityApp component to function properly.\n *\n * @param props - Your Sanity configuration and the React children to render\n * @returns Your Sanity application, integrated with your Sanity configuration and application context\n *\n * @example\n * ```\n * import { SanityApp } from '@sanity/sdk-react\n *\n * import MyAppRoot from './Root'\n *\n * const mySanityConfig = {\n *   procectId: 'my-project-id',\n *   dataset: 'production',\n * }\n *\n * export default function MyApp() {\n *   return (\n *     <SanityApp sanityConfig={mySanityConfig}>\n *       <MyAppRoot />\n *     </SanityApp>\n *   )\n * }\n * ```\n */\nexport function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement {\n  const sanityInstance = createSanityInstance(sanityConfig)\n\n  return (\n    <SanityProvider sanityInstance={sanityInstance}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.js","sources":["../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n  constructor(error: unknown) {\n    if (\n      typeof error === 'object' &&\n      !!error &&\n      'message' in error &&\n      typeof error.message === 'string'\n    ) {\n      super(error.message)\n    } else {\n      super()\n    }\n\n    this.cause = error\n  }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Fragment} from 'react'\n\nconst LINKS = [\n  {\n    url: 'https://slack.sanity.io/',\n    i18nKey: 'workspaces.community-title',\n    title: 'Community',\n  },\n  {\n    url: 'https://www.sanity.io/docs',\n    i18nKey: 'workspaces.docs-title',\n    title: 'Docs',\n  },\n  {\n    url: 'https://www.sanity.io/legal/privacy',\n    i18nKey: 'workspaces.privacy-title',\n    title: 'Privacy',\n  },\n  {\n    url: 'https://www.sanity.io',\n    i18nKey: 'workspaces.sanity-io-title',\n    title: 'sanity.io',\n  },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n  return (\n    <div className=\"sc-login-footer\">\n      <SanityLogo className=\"sc-login-footer__logo\" />\n\n      <ul className=\"sc-login-footer__links\">\n        {LINKS.map((link) => (\n          <Fragment key={link.title}>\n            <li className=\"sc-login-footer__link\">\n              <a href={link.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                {link.title}\n              </a>\n            </li>\n          </Fragment>\n        ))}\n      </ul>\n    </div>\n  )\n}\n","import {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n */\nexport interface LoginLayoutProps {\n  /** Optional header content rendered at top of card */\n  header?: React.ReactNode\n\n  /** Optional footer content rendered below card. Defaults to an internal login footer */\n  footer?: React.ReactNode\n\n  /** Main content rendered in card body */\n  children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n *   return (\n *     <LoginLayout\n *       header={header}\n *       footer={footer}\n *     >\n *       <CustomLoginContent />\n *     </LoginLayout>\n *   )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n *   LoginComponent={CustomLogin}\n *   header={<Logo />}\n * >\n *   <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n  children,\n  footer = <LoginFooter />,\n  header,\n}: LoginLayoutProps): React.ReactNode {\n  return (\n    <div className=\"sc-login-layout\">\n      <div className=\"sc-login-layout__container\">\n        <div className=\"sc-login-layout__card\">\n          {header && <div className=\"sc-login-layout__card-header\">{header}</div>}\n\n          {children && <div className=\"sc-login-layout__card-body\">{children}</div>}\n        </div>\n\n        {footer}\n      </div>\n    </div>\n  )\n}\n","import {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n * @internal\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login\">\n        <h1 className=\"sc-login__title\">Choose login provider</h1>\n\n        <Suspense fallback={<div className=\"sc-login__loading\">Loading…</div>}>\n          <Providers />\n        </Suspense>\n      </div>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <div className=\"sc-login-providers\">\n      {loginUrls.map(({title, url}) => (\n        <a key={url} href={url}>\n          {title}\n        </a>\n      ))}\n    </div>\n  )\n}\n","import {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n  const handleCallback = useHandleCallback()\n\n  useEffect(() => {\n    const url = new URL(location.href)\n    handleCallback(url.toString()).then((replacementLocation) => {\n      if (replacementLocation) {\n        // history API with `replaceState` is used to prevent a reload but still\n        // remove the short-lived token from the URL\n        history.replaceState(null, '', replacementLocation)\n      }\n    })\n  }, [handleCallback])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-callback\">\n        <h1 className=\"sc-login-callback__title\">Logging you in…</h1>\n        <div className=\"sc-login-callback__loading\">Loading…</div>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n  error,\n  resetErrorBoundary,\n  header,\n  footer,\n}: LoginErrorProps): React.ReactNode {\n  if (!(error instanceof AuthError)) throw error\n  const logout = useLogOut()\n\n  const handleRetry = useCallback(async () => {\n    await logout()\n    resetErrorBoundary()\n  }, [logout, resetErrorBoundary])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-error\">\n        <div className=\"sc-login-error__content\">\n          <h2 className=\"sc-login-error__title\">Authentication Error</h2>\n          <p className=\"sc-login-error__description\">\n            Please try again or contact support if the problem persists.\n          </p>\n        </div>\n\n        <button className=\"sc-login-error__button\" onClick={handleRetry}>\n          Retry\n        </button>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n// Only import bridge if we're in an iframe. This assumes that the app is\n// running withing SanityOS if it is in an iframe.\nif (typeof window !== 'undefined' && window.self !== window.top) {\n  import('@sanity/os/bridge')\n}\n\n/**\n * @internal\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n  /**\n   * Custom component to render the login screen.\n   * Receives all login layout props. Defaults to {@link Login}.\n   */\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render during OAuth callback processing.\n   * Receives all login layout props. Defaults to {@link LoginCallback}.\n   */\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render when authentication errors occur.\n   * Receives login layout props and error boundary props. Defaults to\n   * {@link LoginError}\n   */\n  LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <AuthBoundary header={<MyLogo />}>\n *       <ProtectedContent />\n *     </AuthBoundary>\n *   )\n * }\n * ```\n *\n * @internal\n */\nexport function AuthBoundary({\n  LoginErrorComponent = LoginError,\n  ...props\n}: AuthBoundaryProps): React.ReactNode {\n  const {header, footer} = props\n  const FallbackComponent = useMemo(() => {\n    return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n    }\n  }, [header, footer, LoginErrorComponent])\n\n  return (\n    <ErrorBoundary FallbackComponent={FallbackComponent}>\n      <AuthSwitch {...props} />\n    </ErrorBoundary>\n  )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n  LoginComponent = Login,\n  CallbackComponent = LoginCallback,\n  children,\n  ...props\n}: AuthSwitchProps) {\n  const authState = useAuthState()\n\n  switch (authState.type) {\n    case AuthStateType.ERROR: {\n      throw new AuthError(authState.error)\n    }\n    case AuthStateType.LOGGING_IN: {\n      return <CallbackComponent {...props} />\n    }\n    case AuthStateType.LOGGED_IN: {\n      return children\n    }\n    default: {\n      return <LoginComponent {...props} />\n    }\n  }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n */\nexport interface SanityAppProps {\n  sanityConfig: SanityConfig\n  children: React.ReactNode\n}\n\n/**\n * @public\n *\n * The SanityApp component provides your Sanity application with access to your Sanity configuration,\n * as well as application context and state which is used by the Sanity React hooks. Your application\n * must be wrapped with the SanityApp component to function properly.\n *\n * @param props - Your Sanity configuration and the React children to render\n * @returns Your Sanity application, integrated with your Sanity configuration and application context\n *\n * @example\n * ```\n * import { SanityApp } from '@sanity/sdk-react\n *\n * import MyAppRoot from './Root'\n *\n * const mySanityConfig = {\n *   procectId: 'my-project-id',\n *   dataset: 'production',\n * }\n *\n * export default function MyApp() {\n *   return (\n *     <SanityApp sanityConfig={mySanityConfig}>\n *       <MyAppRoot />\n *     </SanityApp>\n *   )\n * }\n * ```\n */\nexport function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement {\n  const sanityInstance = createSanityInstance(sanityConfig)\n\n  return (\n    <SanityProvider sanityInstance={sanityInstance}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.0-alpha.10",
+  "version": "0.0.0-alpha.11",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -70,10 +70,9 @@
     "@sanity/logos": "^2.1.13",
     "@sanity/os": "^0.2.0",
     "@sanity/types": "^3.67.1",
-    "@sanity/ui": "^2.8.19",
     "react-error-boundary": "^4.1.2",
     "rxjs": "^7.8.1",
-    "@sanity/sdk": "0.0.0-alpha.9"
+    "@sanity/sdk": "0.0.0-alpha.10"
   },
   "devDependencies": {
     "@sanity/client": "^6.27.2",
@@ -96,8 +95,8 @@
     "vitest": "^3.0.5",
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
-    "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1"
+    "@repo/tsconfig": "0.0.1",
+    "@repo/package.config": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/Login/LoginLinks.test.tsx

@@ -0,0 +1,91 @@
+import {AuthStateType, createSanityInstance} from '@sanity/sdk'
+import {SanityProvider} from '@sanity/sdk-react/context'
+import {useAuthState, useLoginUrls} from '@sanity/sdk-react/hooks'
+import {render, screen} from '@testing-library/react'
+import React from 'react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {LoginLinks} from './LoginLinks'
+
+// Mock the hooks and SDK functions
+vi.mock('../../hooks/auth/useLoginUrls', () => ({
+  useLoginUrls: vi.fn(() => [
+    {
+      name: 'google',
+      title: 'Google',
+      url: 'https://google.com/auth',
+    },
+    {
+      name: 'github',
+      title: 'GitHub',
+      url: 'https://github.com/auth',
+    },
+  ]),
+}))
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+
+  return {
+    ...actual,
+    tradeTokenForSession: vi.fn(),
+    getSidUrlHash: vi.fn().mockReturnValue(null),
+    getSidUrlSearch: vi.fn(),
+  }
+})
+
+vi.mock('../../hooks/auth/useAuthState', () => ({
+  useAuthState: vi.fn(() => 'logged-out'),
+}))
+
+vi.mock('../../hooks/auth/useHandleCallback', () => ({
+  useHandleCallback: vi.fn(),
+}))
+
+describe('LoginLinks', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
+  const renderWithWrappers = (ui: React.ReactElement) => {
+    return render(<SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>)
+  }
+
+  it('renders auth provider links correctly when not authenticated', () => {
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGED_OUT,
+      isDestroyingSession: false,
+    })
+    renderWithWrappers(<LoginLinks />)
+
+    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
+
+    const authProviders = useLoginUrls()
+    authProviders.forEach((provider) => {
+      const button = screen.getByRole('link', {name: provider.title})
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveAttribute('href', provider.url)
+    })
+  })
+
+  it('shows loading state while logging in', () => {
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGING_IN,
+      isExchangingToken: false,
+    })
+    renderWithWrappers(<LoginLinks />)
+
+    expect(screen.getByText('Logging in...')).toBeInTheDocument()
+  })
+
+  it('shows success message when logged in', () => {
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGED_IN,
+      token: 'test-token',
+      currentUser: null,
+    })
+    renderWithWrappers(<LoginLinks />)
+
+    expect(screen.getByText('You are logged in')).toBeInTheDocument()
+  })
+})

package/src/components/Login/LoginLinks.tsx

@@ -0,0 +1,58 @@
+import {type ReactElement} from 'react'
+
+import {useAuthState} from '../../hooks/auth/useAuthState'
+import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
+import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
+
+/**
+ * Component that handles Sanity authentication flow and renders login provider options
+ *
+ * @public
+ *
+ * @returns Rendered component
+ *
+ * @remarks
+ * The component handles three states:
+ * 1. Loading state during token exchange
+ * 2. Success state after successful authentication
+ * 3. Provider selection UI when not authenticated
+ *
+ * @example
+ * ```tsx
+ * const config = { projectId: 'your-project-id', dataset: 'production' }
+ * return <LoginLinks sanityInstance={config} />
+ * ```
+ */
+export const LoginLinks = (): ReactElement => {
+  const loginUrls = useLoginUrls()
+  const authState = useAuthState()
+  useHandleCallback()
+
+  if (authState.type === 'logging-in') {
+    return <div className="sc-login-links__logging-in">Logging in...</div>
+  }
+
+  // Show success state after authentication
+  if (authState.type === 'logged-in') {
+    return <div className="sc-login-links__logged-in">You are logged in</div>
+  }
+
+  /**
+   * Render provider selection UI
+   */
+  return (
+    <div className="sc-login-links">
+      <h2 className="sc-login-links__title">Choose login provider</h2>
+
+      <ul className="sc-login-links__list">
+        {loginUrls.map((provider, index) => (
+          <li key={`${provider.url}_${index}`} className="sc-login-links__item">
+            <a href={provider.url} className="sc-login-links__link">
+              {provider.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/components/auth/AuthBoundary.test.tsx

@@ -54,7 +54,7 @@ describe('AuthBoundary', () => {
     renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
 
     // The login screen should show "Choose login provider" by default
-    expect(screen.getByText('Choose login provider:')).toBeInTheDocument()
+    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
     expect(screen.queryByText('Protected Content')).not.toBeInTheDocument()
   })
 

package/src/components/auth/Login.test.tsx

@@ -14,7 +14,7 @@ vi.mock('../../hooks/auth/useLoginUrls', () => ({
 describe('Login', () => {
   it('renders login providers', () => {
     renderWithWrappers(<Login />)
-    expect(screen.getByText('Choose login provider:')).toBeInTheDocument()
+    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
     expect(screen.getByRole('link', {name: 'Provider A'})).toHaveAttribute(
       'href',
       'https://provider-a.com/auth',

package/src/components/auth/Login.tsx

@@ -1,4 +1,3 @@
-import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'
 import {type JSX, Suspense} from 'react'
 
 import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
@@ -14,21 +13,13 @@ import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 export function Login({header, footer}: LoginLayoutProps): JSX.Element {
   return (
     <LoginLayout header={header} footer={footer}>
-      <Heading as="h6" align="center">
-        Choose login provider:
-      </Heading>
+      <div className="sc-login">
+        <h1 className="sc-login__title">Choose login provider</h1>
 
-      <Suspense
-        fallback={
-          <Box padding={5}>
-            <Flex align="center" justify="center">
-              <Spinner />
-            </Flex>
-          </Box>
-        }
-      >
-        <Providers />
-      </Suspense>
+        <Suspense fallback={<div className="sc-login__loading">Loading…</div>}>
+          <Providers />
+        </Suspense>
+      </div>
     </LoginLayout>
   )
 }
@@ -37,18 +28,12 @@ function Providers() {
   const loginUrls = useLoginUrls()
 
   return (
-    <Stack space={3} marginY={5}>
+    <div className="sc-login-providers">
       {loginUrls.map(({title, url}) => (
-        <Button
-          key={url}
-          as="a"
-          href={url}
-          mode="ghost"
-          text={title}
-          textAlign="center"
-          fontSize={2}
-        ></Button>
+        <a key={url} href={url}>
+          {title}
+        </a>
       ))}
-    </Stack>
+    </div>
   )
 }

package/src/components/auth/LoginCallback.tsx

@@ -1,4 +1,3 @@
-import {Flex, Heading, Spinner} from '@sanity/ui'
 import {useEffect} from 'react'
 
 import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
@@ -28,12 +27,10 @@ export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNo
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <Heading as="h6" align="center">
-        Logging you in…
-      </Heading>
-      <Flex paddingY={5} align="center" justify="center">
-        <Spinner />
-      </Flex>
+      <div className="sc-login-callback">
+        <h1 className="sc-login-callback__title">Logging you in…</h1>
+        <div className="sc-login-callback__loading">Loading…</div>
+      </div>
     </LoginLayout>
   )
 }

package/src/components/auth/LoginError.tsx

@@ -1,4 +1,3 @@
-import {Button, Heading, Stack, Text} from '@sanity/ui'
 import {useCallback} from 'react'
 import {type FallbackProps} from 'react-error-boundary'
 
@@ -33,13 +32,18 @@ export function LoginError({
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <Stack space={5} marginBottom={5}>
-        <Heading as="h6" align="center">
-          Authentication Error
-        </Heading>
-        <Text align="center">Please try again or contact support if the problem persists.</Text>
-        <Button mode="ghost" onClick={handleRetry} text="Retry" fontSize={2} />
-      </Stack>
+      <div className="sc-login-error">
+        <div className="sc-login-error__content">
+          <h2 className="sc-login-error__title">Authentication Error</h2>
+          <p className="sc-login-error__description">
+            Please try again or contact support if the problem persists.
+          </p>
+        </div>
+
+        <button className="sc-login-error__button" onClick={handleRetry}>
+          Retry
+        </button>
+      </div>
     </LoginLayout>
   )
 }

package/src/components/auth/LoginFooter.tsx

@@ -1,5 +1,5 @@
 import {SanityLogo} from '@sanity/logos'
-import {Box, Flex, Inline, Text} from '@sanity/ui'
+import {Fragment} from 'react'
 
 const LINKS = [
   {
@@ -32,27 +32,20 @@ const LINKS = [
  */
 export function LoginFooter(): React.ReactNode {
   return (
-    <Box>
-      <Flex justify="center">
-        <SanityLogo />
-      </Flex>
+    <div className="sc-login-footer">
+      <SanityLogo className="sc-login-footer__logo" />
 
-      <Flex justify="center">
-        <Inline space={2} paddingY={3}>
-          {LINKS.map((link) => (
-            <Text size={0} key={link.url}>
-              <a
-                href={link.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{color: 'inherit'}}
-              >
+      <ul className="sc-login-footer__links">
+        {LINKS.map((link) => (
+          <Fragment key={link.title}>
+            <li className="sc-login-footer__link">
+              <a href={link.url} target="_blank" rel="noopener noreferrer">
                 {link.title}
               </a>
-            </Text>
-          ))}
-        </Inline>
-      </Flex>
-    </Box>
+            </li>
+          </Fragment>
+        ))}
+      </ul>
+    </div>
   )
 }

package/src/components/auth/LoginLayout.tsx

@@ -1,10 +1,7 @@
-import {Card, Container} from '@sanity/ui'
-
 import {LoginFooter} from './LoginFooter'
 
 /**
  * @alpha
- * @internal
  */
 export interface LoginLayoutProps {
   /** Optional header content rendered at top of card */
@@ -57,14 +54,16 @@ export function LoginLayout({
   header,
 }: LoginLayoutProps): React.ReactNode {
   return (
-    <Container width={0}>
-      <Card shadow={1} radius={2} padding={4}>
-        {header && header}
+    <div className="sc-login-layout">
+      <div className="sc-login-layout__container">
+        <div className="sc-login-layout__card">
+          {header && <div className="sc-login-layout__card-header">{header}</div>}
 
-        {children && children}
+          {children && <div className="sc-login-layout__card-body">{children}</div>}
+        </div>
 
         {footer}
-      </Card>
-    </Container>
+      </div>
+    </div>
   )
 }

package/src/components/auth/authTestHelpers.tsx

@@ -1,18 +1,11 @@
 import {createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
 import {render, type RenderResult} from '@testing-library/react'
 import React from 'react'
 
 import {SanityProvider} from '../../context/SanityProvider'
 
 const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
-const theme = buildTheme()
 
 export const renderWithWrappers = (ui: React.ReactElement): RenderResult => {
-  return render(
-    <SanityProvider sanityInstance={sanityInstance}>
-      <ThemeProvider theme={theme}>{ui}</ThemeProvider>
-    </SanityProvider>,
-  )
+  return render(<SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>)
 }