@atproto/oauth-provider-ui 0.1.0 → 0.1.1

package/src/components/layouts/layout-title-page.tsx

@@ -1,78 +0,0 @@
-import { clsx } from 'clsx'
-import { JSX, ReactNode } from 'react'
-import { Override } from '../../lib/util.ts'
-import { LocaleSelector } from '../../locales/locale-selector.tsx'
-
-export type LayoutTitlePageProps = Override<
-  JSX.IntrinsicElements['div'],
-  {
-    title?: string
-    subtitle?: ReactNode
-    children?: ReactNode
-  }
->
-
-export function LayoutTitlePage({
-  children,
-  title,
-  subtitle,
-
-  // HTMLDivElement
-  className,
-  ...props
-}: LayoutTitlePageProps) {
-  return (
-    <div
-      {...props}
-      className={clsx(
-        className,
-        'flex flex-col items-center',
-        'md:flex md:flex-row md:items-center md:justify-stretch',
-        'min-w-screen min-h-screen',
-        'bg-white text-slate-900',
-        'dark:bg-slate-900 dark:text-slate-100',
-      )}
-    >
-      {title && <title>{title}</title>}
-
-      <div
-        className={clsx(
-          'px-6 pt-4',
-          'w-full',
-          'md:max-w-lg',
-          'flex flex-row items-start',
-          'md:flex-col md:items-end',
-          'md:self-stretch',
-          'md:max-w-fix md:w-1/2 md:p-4',
-          'md:text-right',
-          'md:dark:border-r md:dark:border-slate-700',
-          'md:bg-slate-100 md:dark:bg-slate-800',
-        )}
-      >
-        <div className="grid grow content-center md:justify-items-end">
-          {title && (
-            <h1
-              key="title"
-              className="text-primary text-xl font-semibold md:my-4 md:text-2xl lg:text-5xl"
-            >
-              {title}
-            </h1>
-          )}
-
-          {subtitle && (
-            <p
-              key="subtitle"
-              className="hidden max-w-xs text-slate-600 md:block dark:text-slate-400"
-            >
-              {subtitle}
-            </p>
-          )}
-        </div>
-
-        <LocaleSelector key="localeSelector" className="m-1 md:m-2" />
-      </div>
-
-      <main className="w-full p-6 md:max-w-3xl md:px-12">{children}</main>
-    </div>
-  )
-}

package/src/components/layouts/layout-welcome.tsx

@@ -1,78 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { clsx } from 'clsx'
-import { JSX } from 'react'
-import type { CustomizationData } from '@atproto/oauth-provider-api'
-import { Override } from '../../lib/util.ts'
-import { LocaleSelector } from '../../locales/locale-selector.tsx'
-import { LinkAnchor } from '../utils/link-anchor.tsx'
-
-export type LayoutWelcomeProps = Override<
-  JSX.IntrinsicElements['div'],
-  {
-    customizationData: CustomizationData | undefined
-    title?: string
-  }
->
-
-export function LayoutWelcome({
-  customizationData: { logo, name, links } = {},
-  title = name,
-
-  // div
-  className,
-  children,
-  ...props
-}: LayoutWelcomeProps) {
-  const { t } = useLingui()
-
-  return (
-    <div
-      {...props}
-      className={clsx(
-        'min-h-screen w-full',
-        'flex flex-col items-center justify-center',
-        'bg-white text-slate-900',
-        'dark:bg-slate-900 dark:text-slate-100',
-        className,
-      )}
-    >
-      {title && <title>{title}</title>}
-
-      <main className="flex w-full grow flex-col items-center justify-center overflow-hidden p-6">
-        {logo && (
-          <img
-            src={logo}
-            alt={name || t`Logo`}
-            aria-hidden
-            className="mb-4 h-16 w-16 md:mb-8 md:h-24 md:w-24"
-          />
-        )}
-
-        {name && (
-          <h1 className="mx-4 mb-4 text-center text-2xl font-bold md:mb-8 md:text-4xl">
-            {name}
-          </h1>
-        )}
-
-        {children}
-      </main>
-
-      <footer className="bg-contrast-25 dark:bg-contrast-50 flex w-full flex-wrap items-center justify-between overflow-hidden px-4 md:px-6">
-        <nav className="flex flex-wrap items-center justify-start">
-          {links?.map((link, i) => (
-            <LinkAnchor
-              key={i}
-              link={link}
-              className="text-text-light m-2 text-xs hover:underline md:m-4 md:text-sm"
-            />
-          ))}
-        </nav>
-
-        <LocaleSelector
-          className="m-1 text-xs md:m-2 md:text-sm"
-          key="localeSelector"
-        />
-      </footer>
-    </div>
-  )
-}

package/src/components/utils/account-identifier.tsx

@@ -1,23 +0,0 @@
-import { JSX } from 'react'
-import type { Account } from '@atproto/oauth-provider-api'
-import { Override } from '../../lib/util.ts'
-
-export type AccountIdentifierProps = Override<
-  Omit<JSX.IntrinsicElements['b'], 'children'>,
-  {
-    account: Account
-  }
->
-
-export function AccountIdentifier({
-  account,
-
-  // b
-  ...props
-}: AccountIdentifierProps) {
-  return (
-    <b {...props}>
-      {account.preferred_username || account.email || account.sub}
-    </b>
-  )
-}

package/src/components/utils/account-image.tsx

@@ -1,33 +0,0 @@
-import { useEffect, useState } from 'react'
-import { AccountIcon } from './icons.tsx'
-
-export type AccountIconProps = {
-  src?: string
-  alt: string
-}
-
-export function AccountImage({ src, alt }: AccountIconProps) {
-  const [errored, setErrored] = useState(false)
-
-  useEffect(() => {
-    setErrored(false)
-  }, [src])
-
-  return src && !errored ? (
-    <img
-      aria-hidden
-      crossOrigin="anonymous"
-      src={src}
-      alt={alt}
-      className="-ml-1 h-6 w-6 rounded-full"
-      onError={() => setErrored(true)}
-    />
-  ) : (
-    <div
-      aria-hidden
-      className="bg-primary border-primary h-6 w-6 overflow-hidden rounded-full border-2 border-solid text-white"
-    >
-      <AccountIcon className="-mx-1 -mb-1" />
-    </div>
-  )
-}

package/src/components/utils/admonition.tsx

@@ -1,52 +0,0 @@
-import { clsx } from 'clsx'
-import { JSX, memo } from 'react'
-import { Override } from '../../lib/util.ts'
-import { AlertIcon, EyeIcon } from './icons.tsx'
-
-export type AdmonitionProps = Override<
-  JSX.IntrinsicElements['div'],
-  {
-    role: 'alert' | 'status' | 'info'
-  }
->
-
-export const Admonition = memo(function Admonition({
-  role = 'alert',
-  children,
-  className,
-  ...props
-}: AdmonitionProps) {
-  return (
-    <div
-      {...props}
-      role={role}
-      className={clsx(
-        'flex flex-row',
-        'gap-2',
-        'p-3',
-        'rounded-lg',
-        'border',
-        'border-gray-300 dark:border-gray-700',
-        role === 'alert' && 'bg-error text-error-contrast',
-        className,
-      )}
-    >
-      {role === 'info' ? (
-        <EyeIcon
-          aria-hidden
-          className={clsx('h-6 w-6 fill-current', 'text-primary')}
-        />
-      ) : (
-        <AlertIcon
-          aria-hidden
-          className={clsx(
-            'h-6 w-6 fill-current',
-            role === 'alert' ? 'text-inherit' : 'text-primary',
-          )}
-        />
-      )}
-
-      <div className="flex flex-1 flex-col">{children}</div>
-    </div>
-  )
-})

package/src/components/utils/client-name.tsx

@@ -1,71 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { JSX, useMemo } from 'react'
-import type { OAuthClientMetadata } from '@atproto/oauth-types'
-import { Override } from '../../lib/util.ts'
-import { UrlViewer } from './url-viewer.tsx'
-
-export type ClientNameProps = Override<
-  Omit<JSX.IntrinsicElements['span'], 'children'>,
-  {
-    clientId: string
-    clientMetadata: OAuthClientMetadata
-    clientTrusted: boolean
-  }
->
-
-export function ClientName({
-  clientId,
-  clientMetadata,
-  clientTrusted,
-
-  // span
-  ...attrs
-}: ClientNameProps) {
-  const url = useMemo(() => {
-    try {
-      return new URL(clientId)
-    } catch {
-      return null
-    }
-  }, [clientId])
-
-  if (clientTrusted && clientMetadata.client_name) {
-    return <span {...attrs}>{clientMetadata.client_name}</span>
-  }
-
-  // @NOTE: not using isOAuthClientIdLoopback & isOAuthClientIdDiscoverable from
-  // @atproto/oauth-types here because 1) we don't need to validate here and 2)
-  // we prefer not to import un-necessary code to improve bundle size.
-
-  if (url?.protocol === 'http:') {
-    return (
-      <span {...attrs}>
-        <Trans>An application on your device</Trans>
-      </span>
-    )
-  }
-
-  if (url?.protocol === 'https:') {
-    // Only display the url details if the client id does not follow our
-    // convention.
-    const simplifiedView =
-      url.protocol === 'https:' &&
-      url.pathname === '/oauth-client-metadata.json' &&
-      !url.port &&
-      !url.search
-
-    return (
-      <UrlViewer
-        {...attrs}
-        url={url}
-        proto={!simplifiedView}
-        host={true}
-        path={!simplifiedView}
-        query={!simplifiedView}
-        hash={false}
-      />
-    )
-  }
-
-  return <span {...attrs}>{clientId}</span>
-}

package/src/components/utils/error-card.tsx

@@ -1,93 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { memo, useEffect, useMemo, useState } from 'react'
-import { useRandomString } from '../../hooks/use-random-string.ts'
-import { Api } from '../../lib/api.ts'
-import { JsonErrorResponse } from '../../lib/json-client.ts'
-import { Override } from '../../lib/util.ts'
-import { Admonition, AdmonitionProps } from './admonition.tsx'
-import { ErrorMessage } from './error-message.tsx'
-
-export type ErrorCardProps = Override<
-  Omit<AdmonitionProps, 'role'>,
-  {
-    error: unknown
-  }
->
-export const ErrorCard = memo(function ErrorCard({
-  error,
-
-  // Admonition
-  children,
-  onClick,
-  onKeyDown,
-  ...props
-}: ErrorCardProps) {
-  const [inputCount, setInputCount] = useState(0)
-  // Every 5th input will toggle showing the details
-  const showDetails = ((inputCount / 5) | 0) % 2 === 1
-
-  const detailsDivId = useRandomString('error-card-')
-
-  const parsedError = useMemo(
-    () =>
-      error instanceof JsonErrorResponse
-        ? // Already parsed:
-          error
-        : // If "error" is a json object, try parsing it as a JsonErrorResponse:
-          Api.parseError(error) ?? error,
-    [error],
-  )
-
-  useEffect(() => {
-    // For debugging purposes
-    console.warn('Displayed error details:', parsedError)
-
-    // Reset the input count when the error changes
-    setInputCount(0)
-  }, [parsedError])
-
-  return (
-    <Admonition
-      role="alert"
-      aria-controls={detailsDivId}
-      tabIndex={0}
-      onKeyDown={(event) => {
-        onKeyDown?.(event)
-        if (!event.defaultPrevented) {
-          setInputCount((c) => c + 1)
-        }
-      }}
-      onClick={(event) => {
-        onClick?.(event)
-        if (!event.defaultPrevented) {
-          setInputCount((c) => c + 1)
-        }
-      }}
-      {...props}
-    >
-      <ErrorMessage error={parsedError} />
-
-      {children && <div className="mt-2">{children}</div>}
-
-      <div hidden={!showDetails} id={detailsDivId} aria-hidden={!showDetails}>
-        {parsedError instanceof JsonErrorResponse ? (
-          <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-2 text-sm">
-            <dt className="font-semibold">
-              <Trans>Code</Trans>
-            </dt>
-            <dd>
-              <code>{parsedError.error}</code>
-            </dd>
-
-            <dt className="font-semibold">
-              <Trans>Description</Trans>
-            </dt>
-            <dd>{parsedError.description}</dd>
-          </dl>
-        ) : (
-          <pre className="text-xs">{JSON.stringify(parsedError, null, 2)}</pre>
-        )}
-      </div>
-    </Admonition>
-  )
-})

package/src/components/utils/error-message.tsx

@@ -1,88 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { ReactNode, memo } from 'react'
-import {
-  AccessDeniedError,
-  EmailTakenError,
-  HandleUnavailableError,
-  InvalidCredentialsError,
-  InvalidInviteCodeError,
-  InvalidRequestError,
-  RequestExpiredError,
-  SecondAuthenticationFactorRequiredError,
-  UnknownRequestUriError,
-} from '../../lib/api.ts'
-import { JsonErrorResponse } from '../../lib/json-client.ts'
-
-export type ApiErrorMessageProps = {
-  error: unknown
-}
-
-export const ErrorMessage = memo(function ErrorMessage({
-  error,
-}: ApiErrorMessageProps): ReactNode {
-  // Matches the order of the error checks in the API's parseError method (must
-  // be from most specific to least specific to avoid unreachable code paths).
-
-  if (error instanceof SecondAuthenticationFactorRequiredError) {
-    return <Trans>A second authentication factor is required</Trans>
-  }
-
-  if (error instanceof InvalidCredentialsError) {
-    return <Trans>Wrong identifier or password</Trans>
-  }
-
-  if (error instanceof InvalidInviteCodeError) {
-    return <Trans>The invite code is not valid</Trans>
-  }
-
-  if (error instanceof HandleUnavailableError) {
-    switch (error.reason) {
-      case 'syntax':
-        return <Trans>The handle is invalid</Trans>
-      case 'domain':
-        return <Trans>The domain name is not allowed</Trans>
-      case 'slur':
-        return <Trans>The handle contains inappropriate language</Trans>
-      case 'taken':
-        if (error.description === 'Reserved handle') {
-          return <Trans>This handle is reserved</Trans>
-        }
-        return <Trans>The handle is already in use</Trans>
-      default:
-        return <Trans>That handle cannot be used</Trans>
-    }
-  }
-
-  if (error instanceof EmailTakenError) {
-    return <Trans>This email is already used</Trans>
-  }
-
-  if (
-    error instanceof UnknownRequestUriError ||
-    error instanceof RequestExpiredError
-  ) {
-    return <Trans>This sign-in session has expired</Trans>
-  }
-
-  if (error instanceof InvalidRequestError) {
-    return (
-      <Trans>
-        The data you submitted is invalid. Please check the form and try again.
-      </Trans>
-    )
-  }
-
-  if (error instanceof AccessDeniedError) {
-    return (
-      <Trans>
-        This authorization request has been denied. Please try again.
-      </Trans>
-    )
-  }
-
-  if (error instanceof JsonErrorResponse) {
-    return <Trans>Unexpected server response</Trans>
-  }
-
-  return <Trans>An unknown error occurred</Trans>
-})

package/src/components/utils/help-card.tsx

@@ -1,46 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { clsx } from 'clsx'
-import { JSX } from 'react'
-import type { LinkDefinition } from '@atproto/oauth-provider-api'
-import { Override } from '../../lib/util.ts'
-
-export type HelpCardProps = Override<
-  Omit<JSX.IntrinsicElements['p'], 'children'>,
-  {
-    links?: readonly LinkDefinition[]
-  }
->
-
-export function HelpCard({
-  links,
-
-  className,
-  ...props
-}: HelpCardProps) {
-  const helpLink = links?.find((l) => l.rel === 'help')
-
-  if (!helpLink) return null
-
-  return (
-    <p
-      {...props}
-      className={clsx(
-        'rounded-md bg-slate-100 p-3 text-sm text-slate-800 dark:bg-slate-800 dark:text-slate-400',
-        className,
-      )}
-    >
-      <Trans>
-        Having trouble?{' '}
-        <a
-          role="link"
-          href={helpLink.href}
-          rel={helpLink.rel}
-          target="_blank"
-          className="text-primary"
-        >
-          <Trans>Contact support</Trans>
-        </a>
-      </Trans>
-    </p>
-  )
-}

package/src/components/utils/icons.tsx

@@ -1,88 +0,0 @@
-import type { FunctionComponent, JSX } from 'react'
-import { Override } from '../../lib/util.ts'
-
-export type IconProps = Override<
-  Omit<JSX.IntrinsicElements['svg'], 'viewBox' | 'children' | 'xmlns'>,
-  {
-    /**
-     * The title of the icon, used for accessibility.
-     */
-    title?: string
-  }
->
-
-const makeSvgComponent = (path: string, displayName: string) => {
-  const SvgComponent: FunctionComponent<IconProps> = ({ title, ...props }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      {...props}
-      aria-hidden={!title}
-    >
-      {title && <title>{title}</title>}
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d={path}
-      ></path>
-    </svg>
-  )
-  SvgComponent.displayName = displayName
-  return SvgComponent
-}
-
-export const AccountIcon = makeSvgComponent(
-  'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z',
-  'AccountIcon',
-)
-
-export const AlertIcon = makeSvgComponent(
-  'M11.14 4.494a.995.995 0 0 1 1.72 0l7.001 12.008a.996.996 0 0 1-.86 1.498H4.999a.996.996 0 0 1-.86-1.498L11.14 4.494Zm3.447-1.007c-1.155-1.983-4.019-1.983-5.174 0L2.41 15.494C1.247 17.491 2.686 20 4.998 20h14.004c2.312 0 3.751-2.509 2.587-4.506L14.587 3.487ZM13 9.019a1 1 0 1 0-2 0v2.994a1 1 0 1 0 2 0V9.02Zm-1 4.731a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z',
-  'AlertIcon',
-)
-
-export const AtSymbolIcon = makeSvgComponent(
-  'M12 4a8 8 0 1 0 4.21 14.804 1 1 0 0 1 1.054 1.7A9.958 9.958 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 1.104-.27 2.31-.949 3.243-.716.984-1.849 1.6-3.331 1.465a4.207 4.207 0 0 1-2.93-1.585c-.94 1.21-2.388 1.94-3.985 1.715-2.53-.356-4.04-2.91-3.682-5.458.358-2.547 2.514-4.586 5.044-4.23.905.127 1.68.536 2.286 1.126a1 1 0 0 1 1.964.368l-.515 3.545v.002a2.222 2.222 0 0 0 1.999 2.526c.75.068 1.212-.21 1.533-.65.358-.493.566-1.245.566-2.067a8 8 0 0 0-8-8Zm-.112 5.13c-1.195-.168-2.544.819-2.784 2.529-.24 1.71.784 3.03 1.98 3.198 1.195.168 2.543-.819 2.784-2.529.24-1.71-.784-3.03-1.98-3.198Z',
-  'AtSymbolIcon',
-)
-
-export const CaretRightIcon = makeSvgComponent(
-  'M8.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 0-1.414Z',
-  'CaretRightIcon',
-)
-
-export const CheckMarkIcon = makeSvgComponent(
-  'M21.59 3.193a1 1 0 0 1 .217 1.397l-11.706 16a1 1 0 0 1-1.429.193l-6.294-5a1 1 0 1 1 1.244-1.566l5.48 4.353 11.09-15.16a1 1 0 0 1 1.398-.217Z',
-  'CheckMarkIcon',
-)
-
-export const EmailIcon = makeSvgComponent(
-  'M4.568 4h14.864c.252 0 .498 0 .706.017.229.019.499.063.77.201a2 2 0 0 1 .874.874c.138.271.182.541.201.77.017.208.017.454.017.706v10.864c0 .252 0 .498-.017.706a2.022 2.022 0 0 1-.201.77 2 2 0 0 1-.874.874 2.022 2.022 0 0 1-.77.201c-.208.017-.454.017-.706.017H4.568c-.252 0-.498 0-.706-.017a2.022 2.022 0 0 1-.77-.201 2 2 0 0 1-.874-.874 2.022 2.022 0 0 1-.201-.77C2 17.93 2 17.684 2 17.432V6.568c0-.252 0-.498.017-.706.019-.229.063-.499.201-.77a2 2 0 0 1 .874-.874c.271-.138.541-.182.77-.201C4.07 4 4.316 4 4.568 4Zm.456 2L12 11.708 18.976 6H5.024ZM20 7.747l-6.733 5.509a2 2 0 0 1-2.534 0L4 7.746V17.4a8.187 8.187 0 0 0 .011.589h.014c.116.01.278.011.575.011h14.8a8.207 8.207 0 0 0 .589-.012v-.013c.01-.116.011-.279.011-.575V7.747Z',
-  'EmailIcon',
-)
-
-export const EyeIcon = makeSvgComponent(
-  'M12 6.5c3.79 0 7.17 2.13 8.82 5.5-1.65 3.37-5.02 5.5-8.82 5.5S4.83 15.37 3.18 12C4.83 8.63 8.21 6.5 12 6.5m0-2C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5m0 5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5-2.5-1.12-2.5-2.5 1.12-2.5 2.5-2.5m0-2c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5',
-  'EyeIcon',
-)
-
-export const EyeSlashIcon = makeSvgComponent(
-  'M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6m-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14M2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45zm7.5 7.5 2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13m-3.4-3.4 1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53',
-  'EyeSlashIcon',
-)
-
-export const LockIcon = makeSvgComponent(
-  'M7 7a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h1V7Zm-1 4v9h12v-9H6Zm9-2H9V7a3 3 0 1 1 6 0v2Zm-3 4a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z',
-  'LockIcon',
-)
-
-export const TokenIcon = makeSvgComponent(
-  'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z',
-  'TokenIcon',
-)
-
-export const XMarkIcon = makeSvgComponent(
-  'M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414Z',
-  'XMarkIcon',
-)

package/src/components/utils/link-anchor.tsx

@@ -1,28 +0,0 @@
-import { JSX } from 'react'
-import type { LinkDefinition } from '@atproto/oauth-provider-api'
-import { Override } from '../../lib/util.ts'
-import { LinkTitle } from './link-title.tsx'
-
-export type LinkAnchorProps = Override<
-  JSX.IntrinsicElements['a'],
-  {
-    link: LinkDefinition
-  }
->
-export function LinkAnchor({
-  link,
-
-  // a
-  children = <LinkTitle link={link} />,
-  role = 'link',
-  target = '_blank',
-  href = link.href,
-  rel = link.rel,
-  ...props
-}: LinkAnchorProps) {
-  return (
-    <a {...props} role={role} target={target} href={href} rel={rel}>
-      {children}
-    </a>
-  )
-}