@olympusoss/canvas 2.20.1 → 4.0.0

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 };

package/src/components/molecules/code-block.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { Check, Copy } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-	code: string;
-	language?: string;
-	showCopy?: boolean;
-	/**
-	 * `"light"` (default) renders against `bg-muted`; `"dark"` switches to a
-	 * near-black terminal palette (`#0a0a0b` background, `#e4e4e7` text) for
-	 * use on marketing surfaces.
-	 */
-	theme?: "light" | "dark";
-}
-
-const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
-	({ code, language, showCopy = true, theme = "light", className, ...props }, ref) => {
-		const [copied, setCopied] = React.useState(false);
-		const isDark = theme === "dark";
-
-		const handleCopy = React.useCallback(async () => {
-			await navigator.clipboard.writeText(code);
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2000);
-		}, [code]);
-
-		return (
-			<div
-				ref={ref}
-				data-slot="code-block"
-				className={cn(
-					"relative overflow-hidden rounded-md",
-					isDark ? "border border-border" : "bg-muted",
-					className,
-				)}
-				style={isDark ? { background: "#0a0a0b" } : undefined}
-				{...props}
-			>
-				{(language || showCopy) && (
-					<div
-						className={cn(
-							"flex items-center justify-between px-4 py-2",
-							isDark ? undefined : "border-b",
-						)}
-						style={isDark ? { borderBottom: "1px solid #222" } : undefined}
-					>
-						{language ? (
-							<span
-								className={cn("text-xs font-medium", !isDark && "text-muted-foreground")}
-								style={isDark ? { color: "#6b7280" } : undefined}
-							>
-								{language}
-							</span>
-						) : (
-							<span />
-						)}
-						{showCopy && (
-							<Button
-								variant="ghost"
-								size="icon"
-								className={cn(
-									"h-6 w-6",
-									isDark && "text-zinc-400 hover:bg-white/5 hover:text-zinc-100",
-								)}
-								onClick={handleCopy}
-							>
-								{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-							</Button>
-						)}
-					</div>
-				)}
-				<pre className="overflow-x-auto p-4" style={isDark ? { color: "#e4e4e7" } : undefined}>
-					<code className="text-sm">{code}</code>
-				</pre>
-			</div>
-		);
-	},
-);
-CodeBlock.displayName = "CodeBlock";
-
-export { CodeBlock };

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

@@ -1,92 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button, type ButtonProps } from "../atoms/button";
-
-export interface CountdownButtonProps
-	extends Omit<ButtonProps, "disabled" | "onClick" | "children"> {
-	/**
-	 * Seconds to wait before the button becomes clickable. The countdown
-	 * starts when the component mounts and resets every time `triggerKey`
-	 * changes.
-	 * @default 30
-	 */
-	duration?: number;
-	/**
-	 * Bump this value to restart the countdown (e.g. after a successful
-	 * resend, set it to `Date.now()` so the button locks out again).
-	 */
-	triggerKey?: string | number;
-	/** Called when the button is clicked and the countdown has elapsed. */
-	onClick?: () => void;
-	/**
-	 * Render-prop for the button label. Receives `secondsLeft` (0 when
-	 * ready). Default renders `"Resend"` / `"Resend in 23s"`.
-	 */
-	children?: React.ReactNode | ((secondsLeft: number) => React.ReactNode);
-	/**
-	 * Action verb shown in the default label. Used as `${verb}` when ready
-	 * and `${verb} in Ns` while counting down.
-	 * @default "Resend"
-	 */
-	verb?: string;
-}
-
-/**
- * Button that locks out for a duration after mount or after `triggerKey`
- * changes. Renders countdown text while disabled.
- *
- * Use for "resend code" / "resend email" flows where the user shouldn't be
- * able to spam the action. Triggering a new send from elsewhere should
- * update `triggerKey` to restart the lockout.
- */
-const CountdownButton = React.forwardRef<HTMLButtonElement, CountdownButtonProps>(
-	(
-		{ duration = 30, triggerKey, onClick, children, verb = "Resend", className, ...buttonProps },
-		ref,
-	) => {
-		const [secondsLeft, setSecondsLeft] = React.useState(duration);
-
-		React.useEffect(() => {
-			setSecondsLeft(duration);
-			const interval = setInterval(() => {
-				setSecondsLeft((s) => {
-					if (s <= 1) {
-						clearInterval(interval);
-						return 0;
-					}
-					return s - 1;
-				});
-			}, 1000);
-			return () => clearInterval(interval);
-		}, [duration, triggerKey]);
-
-		const ready = secondsLeft <= 0;
-		const labelNode =
-			typeof children === "function"
-				? children(secondsLeft)
-				: children !== undefined
-					? children
-					: ready
-						? verb
-						: `${verb} in ${secondsLeft}s`;
-
-		return (
-			<Button
-				ref={ref}
-				type="button"
-				disabled={!ready}
-				onClick={() => ready && onClick?.()}
-				className={cn(className)}
-				{...buttonProps}
-			>
-				{labelNode}
-			</Button>
-		);
-	},
-);
-CountdownButton.displayName = "CountdownButton";
-
-export { CountdownButton };

package/src/components/molecules/empty-state.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { Inbox } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon?: React.ReactNode;
-	/** Primary message. Renders below the icon pill, 15px font-medium. */
-	title?: string;
-	/**
-	 * @deprecated Use `title`. Retained as an alias so existing call sites
-	 * (e.g. DataTable's empty fallback) keep working.
-	 */
-	message?: string;
-	description?: string;
-	action?: {
-		label: string;
-		onClick: () => void;
-	};
-}
-
-const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
-	({ icon, title, message, description, action, className, ...props }, ref) => {
-		const heading = title ?? message ?? "No items found";
-		return (
-			<div
-				ref={ref}
-				data-slot="empty-state"
-				className={cn(
-					"flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground",
-					className,
-				)}
-				{...props}
-			>
-				<div className="mb-1 inline-flex rounded-full bg-muted p-3 text-muted-foreground">
-					{icon ?? <Inbox className="h-5 w-5" />}
-				</div>
-				<div className="text-center">
-					<p className="text-[15px] font-medium text-foreground">{heading}</p>
-					{description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
-				</div>
-				{action && (
-					<Button variant="outline" size="sm" onClick={action.onClick}>
-						{action.label}
-					</Button>
-				)}
-			</div>
-		);
-	},
-);
-EmptyState.displayName = "EmptyState";
-
-export { EmptyState };

package/src/components/molecules/error-state.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { AlertCircle } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement> {
-	message?: string;
-	onRetry?: () => void;
-	retryLabel?: string;
-}
-
-const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
-	(
-		{ message = "Something went wrong.", onRetry, retryLabel = "Try again", className, ...props },
-		ref,
-	) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex flex-col items-center justify-center gap-3 py-8 text-muted-foreground",
-					className,
-				)}
-				{...props}
-			>
-				<AlertCircle className="h-8 w-8 text-destructive" />
-				<p className="text-sm">{message}</p>
-				{onRetry && (
-					<Button variant="outline" size="sm" onClick={onRetry}>
-						{retryLabel}
-					</Button>
-				)}
-			</div>
-		);
-	},
-);
-ErrorState.displayName = "ErrorState";
-
-export { ErrorState };