@olympusoss/canvas 2.20.1 → 3.1.0

package/src/components/molecules/breadcrumb.tsx

@@ -1,157 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
-	/**
-	 * Custom separator element used between items. Defaults to a chevron
-	 * via `<BreadcrumbSeparator>`.
-	 */
-	separator?: React.ReactNode;
-	/** A `<BreadcrumbList>` containing items. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<nav>` via `cn()`. */
-	className?: string;
-}
-
-const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(({ ...props }, ref) => (
-	<nav ref={ref} aria-label="breadcrumb" {...props} />
-));
-Breadcrumb.displayName = "Breadcrumb";
-
-export interface BreadcrumbListProps extends React.ComponentPropsWithoutRef<"ol"> {
-	/** A flat list of `<BreadcrumbItem>`s, separated by `<BreadcrumbSeparator>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<ol>` via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
-	({ className, ...props }, ref) => (
-		<ol
-			ref={ref}
-			className={cn(
-				"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-BreadcrumbList.displayName = "BreadcrumbList";
-
-export interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<"li"> {
-	/** Typically a `<BreadcrumbLink>` or `<BreadcrumbPage>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<li>` via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-	({ className, ...props }, ref) => (
-		<li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
-	),
-);
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> {
-	/**
-	 * Render as a Radix Slot — useful for wrapping a router `<Link>` so
-	 * it inherits breadcrumb styling.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Anchor target. Used when not in `asChild` mode. */
-	href?: string;
-	/** Link label. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the link via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-	({ asChild, className, ...props }, ref) => {
-		const Comp = asChild ? Slot : "a";
-
-		return (
-			<Comp ref={ref} className={cn("transition-colors hover:text-brand", className)} {...props} />
-		);
-	},
-);
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-export interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<"span"> {
-	/**
-	 * Label of the current page. This is the last breadcrumb item and is
-	 * non-clickable; sets `aria-current="page"` for assistive tech.
-	 */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the page span via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
-	({ className, ...props }, ref) => (
-		<span
-			ref={ref}
-			role="link"
-			aria-disabled="true"
-			aria-current="page"
-			className={cn("font-normal text-foreground", className)}
-			{...props}
-		/>
-	),
-);
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-export interface BreadcrumbSeparatorProps extends React.ComponentProps<"li"> {
-	/**
-	 * Override the default chevron with a custom node (e.g. a slash, an
-	 * arrow icon).
-	 */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the separator via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbSeparator = ({ children, className, ...props }: BreadcrumbSeparatorProps) => (
-	<li
-		role="presentation"
-		aria-hidden="true"
-		className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-		{...props}
-	>
-		{children ?? <ChevronRight />}
-	</li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-export interface BreadcrumbEllipsisProps extends React.ComponentProps<"span"> {
-	/** Tailwind / CSS classes merged onto the ellipsis via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbEllipsis = ({ className, ...props }: BreadcrumbEllipsisProps) => (
-	<span
-		role="presentation"
-		aria-hidden="true"
-		className={cn("flex h-9 w-9 items-center justify-center", className)}
-		{...props}
-	>
-		<MoreHorizontal className="h-4 w-4" />
-		<span className="sr-only">More</span>
-	</span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-	Breadcrumb,
-	BreadcrumbEllipsis,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-};

package/src/components/molecules/button-group.tsx

@@ -1,104 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Separator } from "../atoms/separator";
-
-const buttonGroupVariants = cva(
-	"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-	{
-		variants: {
-			orientation: {
-				horizontal:
-					"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-				vertical:
-					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-			},
-		},
-		defaultVariants: {
-			orientation: "horizontal",
-		},
-	},
-);
-
-export interface ButtonGroupProps
-	extends React.ComponentProps<"div">,
-		VariantProps<typeof buttonGroupVariants> {
-	/**
-	 * `horizontal` (default) lays buttons left-to-right with shared borders;
-	 * `vertical` stacks them with shared horizontal borders.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/** A row/column of `<Button>`s, `<ButtonGroupText>`s, or separators. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps) {
-	return (
-		<div
-			role="group"
-			data-slot="button-group"
-			data-orientation={orientation}
-			className={cn(buttonGroupVariants({ orientation }), className)}
-			{...props}
-		/>
-	);
-}
-
-export interface ButtonGroupTextProps extends React.ComponentProps<"div"> {
-	/**
-	 * Render as a Radix Slot — useful for wrapping a label or icon as the
-	 * group's text element.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Text or icon content. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-function ButtonGroupText({ className, asChild = false, ...props }: ButtonGroupTextProps) {
-	const Comp = asChild ? Slot : "div";
-
-	return (
-		<Comp
-			className={cn(
-				"bg-muted shadow-xs flex items-center gap-2 rounded-md border border-border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export interface ButtonGroupSeparatorProps extends React.ComponentProps<typeof Separator> {
-	/**
-	 * Layout direction.
-	 * @default "vertical"
-	 */
-	orientation?: "horizontal" | "vertical";
-	className?: string;
-}
-
-function ButtonGroupSeparator({
-	className,
-	orientation = "vertical",
-	...props
-}: ButtonGroupSeparatorProps) {
-	return (
-		<Separator
-			data-slot="button-group-separator"
-			orientation={orientation}
-			className={cn(
-				"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/src/components/molecules/calendar.tsx

@@ -1,217 +0,0 @@
-"use client";
-
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import * as React from "react";
-import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
-
-import { cn } from "../../lib/utils";
-import { Button, buttonVariants } from "../atoms/button";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
-	/**
-	 * Variant applied to the prev/next month nav buttons. Maps to the
-	 * `Button` atom's variants.
-	 * @default "ghost"
-	 */
-	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-	/**
-	 * Show days from the previous/next month as faded entries to fill the
-	 * grid.
-	 * @default true
-	 */
-	showOutsideDays?: boolean;
-	/**
-	 * How the month/year heading renders. `label` is plain text, the
-	 * dropdown variants render selectable controls.
-	 * @default "label"
-	 */
-	captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
-	className?: string;
-};
-
-function Calendar({
-	className,
-	classNames,
-	showOutsideDays = true,
-	captionLayout = "label",
-	buttonVariant = "ghost",
-	formatters,
-	components,
-	...props
-}: CalendarProps) {
-	const defaultClassNames = getDefaultClassNames();
-
-	return (
-		<DayPicker
-			showOutsideDays={showOutsideDays}
-			data-slot="calendar"
-			className={cn(
-				"bg-background group/calendar p-4 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-				className,
-			)}
-			captionLayout={captionLayout}
-			formatters={{
-				formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
-				...formatters,
-			}}
-			classNames={{
-				root: cn("w-fit", defaultClassNames.root),
-				months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-				month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
-				nav: cn(
-					"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-					defaultClassNames.nav,
-				),
-				button_previous: cn(
-					buttonVariants({ variant: buttonVariant }),
-					"h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
-					defaultClassNames.button_previous,
-				),
-				button_next: cn(
-					buttonVariants({ variant: buttonVariant }),
-					"h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
-					defaultClassNames.button_next,
-				),
-				month_caption: cn(
-					"flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
-					defaultClassNames.month_caption,
-				),
-				dropdowns: cn(
-					"flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
-					defaultClassNames.dropdowns,
-				),
-				dropdown_root: cn(
-					"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-					defaultClassNames.dropdown_root,
-				),
-				dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
-				caption_label: cn(
-					"select-none font-semibold tracking-tight text-foreground",
-					captionLayout === "label"
-						? "text-sm"
-						: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-					defaultClassNames.caption_label,
-				),
-				table: "w-full border-collapse",
-				weekdays: cn("flex border-b border-border pb-1.5", defaultClassNames.weekdays),
-				weekday: cn(
-					"text-muted-foreground flex-1 select-none rounded-md text-[0.7rem] font-medium uppercase tracking-wider",
-					defaultClassNames.weekday,
-				),
-				week: cn("mt-1.5 flex w-full", defaultClassNames.week),
-				week_number_header: cn(
-					"w-[var(--cell-size)] select-none",
-					defaultClassNames.week_number_header,
-				),
-				week_number: cn(
-					"text-muted-foreground select-none text-[0.8rem]",
-					defaultClassNames.week_number,
-				),
-				day: cn(
-					"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-					defaultClassNames.day,
-				),
-				range_start: cn("bg-brand/10 rounded-l-md", defaultClassNames.range_start),
-				range_middle: cn("bg-brand/10 rounded-none", defaultClassNames.range_middle),
-				range_end: cn("bg-brand/10 rounded-r-md", defaultClassNames.range_end),
-				today: cn(
-					"text-brand font-semibold data-[selected=true]:rounded-none",
-					defaultClassNames.today,
-				),
-				outside: cn(
-					"text-muted-foreground/50 aria-selected:text-muted-foreground",
-					defaultClassNames.outside,
-				),
-				disabled: cn("text-muted-foreground opacity-40", defaultClassNames.disabled),
-				hidden: cn("invisible", defaultClassNames.hidden),
-				...classNames,
-			}}
-			components={{
-				Root: ({ className, rootRef, ...props }) => {
-					return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
-				},
-				Chevron: ({ className, orientation, ...props }) => {
-					if (orientation === "left") {
-						return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
-					}
-
-					if (orientation === "right") {
-						return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
-					}
-
-					return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
-				},
-				DayButton: CalendarDayButton,
-				WeekNumber: ({ children, ...props }) => {
-					return (
-						<td {...props}>
-							<div className="flex size-[var(--cell-size)] items-center justify-center text-center">
-								{children}
-							</div>
-						</td>
-					);
-				},
-				...components,
-			}}
-			{...props}
-		/>
-	);
-}
-
-function CalendarDayButton({
-	className,
-	day,
-	modifiers,
-	...props
-}: React.ComponentProps<typeof DayButton>) {
-	const defaultClassNames = getDefaultClassNames();
-
-	const ref = React.useRef<HTMLButtonElement>(null);
-	React.useEffect(() => {
-		if (modifiers.focused) ref.current?.focus();
-	}, [modifiers.focused]);
-
-	return (
-		<Button
-			ref={ref}
-			variant="ghost"
-			size="icon"
-			data-day={day.date.toLocaleDateString()}
-			data-selected-single={
-				modifiers.selected &&
-				!modifiers.range_start &&
-				!modifiers.range_end &&
-				!modifiers.range_middle
-			}
-			data-range-start={modifiers.range_start}
-			data-range-end={modifiers.range_end}
-			data-range-middle={modifiers.range_middle}
-			className={cn(
-				// base size + typography (small inner inset so adjacent dates breathe)
-				"m-0.5 flex aspect-square h-auto w-[calc(100%-0.25rem)] min-w-[calc(var(--cell-size)-0.25rem)] items-center justify-center rounded-md text-sm font-normal leading-none transition-colors",
-				// hover (when not selected)
-				"hover:bg-accent hover:text-accent-foreground",
-				// today: keep brand text colour from row classNames; add subtle ring
-				"group-[[data-today=true]]/day:ring-1 group-[[data-today=true]]/day:ring-brand/40",
-				// single selection: brand fill, white text, full rounding
-				"data-[selected-single=true]:bg-brand data-[selected-single=true]:text-brand-foreground data-[selected-single=true]:hover:bg-brand/90 data-[selected-single=true]:hover:text-brand-foreground",
-				// range endpoints: brand fill, only outer corners rounded
-				"data-[range-start=true]:bg-brand data-[range-start=true]:text-brand-foreground data-[range-start=true]:hover:bg-brand/90 data-[range-start=true]:hover:text-brand-foreground data-[range-start=true]:rounded-r-none",
-				"data-[range-end=true]:bg-brand data-[range-end=true]:text-brand-foreground data-[range-end=true]:hover:bg-brand/90 data-[range-end=true]:hover:text-brand-foreground data-[range-end=true]:rounded-l-none",
-				// range middle: foreground stays default, no rounding
-				"data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-foreground data-[range-middle=true]:rounded-none",
-				// focus ring (for keyboard nav)
-				"group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-brand/40 group-data-[focused=true]/day:border-brand",
-				// modifier label (e.g. holidays) sub-line
-				"[&>span]:text-xs [&>span]:opacity-70",
-				defaultClassNames.day,
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export { Calendar, CalendarDayButton };

package/src/components/molecules/card.tsx

@@ -1,102 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** `<CardHeader>`, `<CardContent>`, `<CardFooter>` (or any custom layout). */
-	children?: React.ReactNode;
-	/**
-	 * Tailwind / CSS classes merged onto the card via `cn()`. Default
-	 * styling: `rounded-xl` (12px), `border`, `bg-card`, `shadow`.
-	 */
-	className?: string;
-}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
-	<div
-		ref={ref}
-		data-slot="card"
-		className={cn("rounded-xl border border-border bg-card text-card-foreground shadow", className)}
-		{...props}
-	/>
-));
-Card.displayName = "Card";
-
-export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Typically `<CardTitle>` + `<CardDescription>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the header via `cn()`. Default: `p-6 space-y-1.5`. */
-	className?: string;
-}
-
-const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-	),
-);
-CardHeader.displayName = "CardHeader";
-
-export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** The card heading. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the title via `cn()`. */
-	className?: string;
-}
-
-const CardTitle = React.forwardRef<HTMLDivElement, CardTitleProps>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn("font-semibold leading-none tracking-tight", className)}
-			{...props}
-		/>
-	),
-);
-CardTitle.displayName = "CardTitle";
-
-export interface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Subtitle / supporting copy below the title. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the description via `cn()`. */
-	className?: string;
-}
-
-const CardDescription = React.forwardRef<HTMLDivElement, CardDescriptionProps>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-	),
-);
-CardDescription.displayName = "CardDescription";
-
-export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Card body. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the content via `cn()`. Default: `p-6 pt-0`. */
-	className?: string;
-}
-
-const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-	),
-);
-CardContent.displayName = "CardContent";
-
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Card actions / metadata row. */
-	children?: React.ReactNode;
-	/**
-	 * Tailwind / CSS classes merged onto the footer via `cn()`. Default:
-	 * `flex items-center p-6 pt-0`.
-	 */
-	className?: string;
-}
-
-const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-	),
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/components/molecules/client-brand.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface ClientBrandProps {
-	/** OAuth2 client display name (e.g. "Questrade", "Athena"). */
-	clientName: string;
-	/**
-	 * Optional logo URI. Renders as an `<img>` next to the wordmark when
-	 * present. When absent, a tinted monogram tile is rendered using the
-	 * first letter of `clientName`.
-	 */
-	clientLogoUri?: string;
-	/**
-	 * Pixel size of the logo/monogram tile.
-	 * @default 36
-	 */
-	size?: number;
-	/**
-	 * Show the wordmark next to the logo.
-	 * @default true
-	 */
-	showWordmark?: boolean;
-	/**
-	 * Background colour applied to the monogram fallback tile. Honours
-	 * Tailwind classes or a raw CSS colour.
-	 * @default "bg-foreground text-background"
-	 */
-	monogramClassName?: string;
-	/** Tailwind / CSS classes merged onto the root via `cn()`. */
-	className?: string;
-}
-
-/**
- * OAuth2 client lockup. Renders the requesting application's logo + name
- * so users see "you're signing in to [App]", not the identity-provider
- * platform underneath.
- *
- * Provide `clientLogoUri` to render the client's logo image. Falls back to
- * a monogram tile when no URI is supplied or the image fails to load.
- *
- * Designed for the brand slot of `AuthShell` / sign-in pages. Stays a thin
- * presentation primitive: no client-registry lookups, no fetches. Pass the
- * shaped data in from your auth backend.
- */
-const ClientBrand = React.forwardRef<HTMLDivElement, ClientBrandProps>(
-	(
-		{ clientName, clientLogoUri, size = 36, showWordmark = true, monogramClassName, className },
-		ref,
-	) => {
-		const [imgFailed, setImgFailed] = React.useState(false);
-		const showImage = !!clientLogoUri && !imgFailed;
-		const initial = (clientName?.trim()?.[0] || "?").toUpperCase();
-
-		return (
-			<div
-				ref={ref}
-				role="img"
-				aria-label={`Signing in to ${clientName}`}
-				className={cn("flex items-center gap-2.5", className)}
-			>
-				{showImage ? (
-					<img
-						src={clientLogoUri}
-						alt=""
-						width={size}
-						height={size}
-						className="shrink-0 rounded-lg object-contain"
-						style={{ width: size, height: size }}
-						onError={() => setImgFailed(true)}
-					/>
-				) : (
-					<div
-						className={cn(
-							"flex shrink-0 items-center justify-center rounded-lg font-semibold",
-							monogramClassName || "bg-foreground text-background",
-						)}
-						style={{ width: size, height: size, fontSize: Math.round(size * 0.5) }}
-						aria-hidden
-					>
-						{initial}
-					</div>
-				)}
-				{showWordmark && (
-					<span className="text-lg font-semibold tracking-tight text-foreground">{clientName}</span>
-				)}
-			</div>
-		);
-	},
-);
-ClientBrand.displayName = "ClientBrand";
-
-export { ClientBrand };