@health-samurai/react-components 0.0.0-alpha.1

package/src/components/request-line-editor.tsx

@@ -0,0 +1,103 @@
+import type * as React from "react";
+import { Input } from "#shadcn/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "#shadcn/components/ui/select";
+import { cn } from "#shadcn/lib/utils";
+import { CopyIcon } from "./copy-icon";
+
+interface RequestLineEditorProps extends React.ComponentProps<"div"> {
+	selectedMethod: string;
+	setMethod: (value: string) => void;
+	methods: string[];
+	inputValue?: string | undefined;
+	onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const METHOD_COLORS = {
+	GET: {
+		text: "text-[#6D9F0F] [&_svg]:text-[#6D9F0F]!",
+		background: "bg-green-200",
+		border:
+			"border-fg-success-secondary! hover:border-fg-success-secondary ring-green-200!",
+	},
+	POST: {
+		text: "text-yellow-600 [&_svg]:text-yellow-600!",
+		background: "bg-yellow-200",
+		border: "border-[#F4CB00]! hover:border-[#F4CB00] ring-yellow-200!",
+	},
+	PUT: {
+		text: "text-blue-500 [&_svg]:text-blue-500!",
+		background: "bg-blue-200",
+		border: "border-blue-400! hover:border-blue-400 ring-blue-200!",
+	},
+	PATCH: {
+		text: "text-violet-600 [&_svg]:text-violet-600",
+		background: "bg-violet-200",
+		border: "border-violet-400! hover:border-violet-400 ring-violet-200!",
+	},
+	DELETE: {
+		text: "text-red-600 [&_svg]:text-red-600!",
+		background: "bg-red-200",
+		border: "border-red-300! hover:border-red-300 ring-red-200!",
+	},
+};
+
+function RequestMethodSelector({
+	selectedMethod,
+	setMethod,
+	methods,
+}: RequestLineEditorProps) {
+	return (
+		<Select value={selectedMethod} onValueChange={setMethod}>
+			<SelectTrigger
+				className={`min-w-26 border-r-0 rounded-r-none shadow-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].text} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].background} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}
+			>
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				{methods.map((method) => (
+					<SelectItem key={method} value={method}>
+						<span
+							className={`${METHOD_COLORS[method as keyof typeof METHOD_COLORS].text}`}
+						>
+							{" "}
+							{method}{" "}
+						</span>
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}
+
+function RequestLineEditor({
+	className,
+	selectedMethod,
+	setMethod,
+	methods,
+	inputValue,
+	onInputChange,
+}: RequestLineEditorProps) {
+	return (
+		<div className={cn("flex", className)}>
+			<RequestMethodSelector
+				selectedMethod={selectedMethod}
+				setMethod={setMethod}
+				methods={methods}
+			/>
+			<Input
+				className={`rounded-l-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}
+				value={inputValue}
+				rightSlot={<CopyIcon text={`${selectedMethod} ${inputValue}`} />}
+				{...(onInputChange !== undefined ? { onChange: onInputChange } : {})}
+			/>
+		</div>
+	);
+}
+
+export { RequestLineEditor, type RequestLineEditorProps, METHOD_COLORS };

package/src/deps.css

@@ -0,0 +1,3 @@
+/* All external dependencies */
+@import "tailwindcss";
+@import "tw-animate-css";

package/src/full.css

@@ -0,0 +1,2 @@
+@import "./deps.css";
+@import "./index.css";

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css" {}

package/src/index.css

@@ -0,0 +1,98 @@
+/* External dependencies should go to deps.css */
+@import "./shadcn/shadcn.css";
+@import "./tokens.css";
+@import "./typography.css";
+
+@theme {
+	--color-selection: var(--color-blue-300);
+	--color-ring-red: var(--color-red-200);
+	--color-ring-green: var(--color-green-200);
+	--color-ring-yellow: var(--color-yellow-200);
+	--color-ring-purple: var(--color-purple-200);
+	--color-ring-orange: var(--color-orange-200);
+	--color-ring-pink: var(--color-pink-200);
+	--color-ring-blue: var(--color-blue-300);
+	--color-ring-red: var(--color-red-200);
+	--color-text-primary: var(--color-neutral-900);
+	--color-text-secondary: var(--color-neutral-500);
+	--color-text-secondary_hover: var(--color-neutral-600);
+	--color-text-primary_on-brand: var(--color-neutral-50);
+	--color-text-secondary_on-brand: var(--color-neutral-100);
+	--color-text-tertiary: var(--color-neutral-400);
+	--color-text-quternary: var(--color-neutral-400);
+	--color-text-quternary_hover: var(--color-neutral-500);
+	--color-text-quternary_on-brand: var(--color-neutral-200);
+	--color-text-disabled: var(--color-neutral-300);
+	--color-text-link: var(--color-blue-500);
+	--color-text-link_hover: var(--color-blue-600);
+	--color-text-link_disabled: var(--color-blue-400);
+	--color-text-brand-primary: var(--color-brand-500);
+	--color-text-brand-secondary: var(--color-brand-300);
+	--color-text-brand-secondary_hover: var(--color-brand-400);
+	--color-text-error-primary: var(--color-red-500);
+	--color-text-error-secondary: var(--color-red-400);
+	--color-text-success-primary: var(--color-green-500);
+	--color-text-warning-primary: var(--color-yellow-500);
+	--color-white: #ffffff;
+	--color-border-primary: var(--color-neutral-300);
+	--color-border-primary_hover: var(--color-neutral-400);
+	--color-border-secondary: var(--color-neutral-200);
+	--color-border-separator: var(--color-neutral-200);
+	--color-border-disabled: var(--color-neutral-100);
+	--color-border-brand: var(--color-brand-500);
+	--color-border-link: var(--color-blue-500);
+	--color-border-error: var(--color-red-500);
+	--color-border-error_inverse: var(--color-red-400);
+	--color-border-error_inverse_hover: var(--color-red-300);
+	--color-border-success: var(--color-green-500);
+	--color-bg-primary: #ffffff;
+	--color-bg-primary_inverse: var(--color-neutral-900);
+	--color-bg-secondary: var(--color-neutral-50);
+	--color-bg-tertiary: var(--color-neutral-100);
+	--color-bg-quaternary: var(--color-neutral-200);
+	--color-bg-overlay: var(--color-neutral-900);
+	--color-bg-disabled: var(--color-neutral-300);
+	--color-bg-brand-primary: var(--color-brand-50);
+	--color-bg-brand-primary_inverse: var(--color-brand-500);
+	--color-bg-brand-secondary: var(--color-brand-100);
+	--color-bg-brand-tertiary: var(--color-brand-200);
+
+	--color-bg-link: var(--color-blue-500);
+	--color-bg-link_hover: var(--color-blue-600);
+	--color-bg-error-primary: var(--color-red-50);
+	--color-bg-error-primary_inverse: var(--color-red-500);
+	--color-bg-error-primary_inverse_hover: var(--color-red-700);
+	--color-bg-error-secondary: var(--color-red-100);
+	--color-bg-error-tertiary: var(--color-red-200);
+	--color-bg-success-primary: var(--color-green-50);
+	--color-bg-success-primary_inverse: var(--color-green-500);
+	--color-bg-success-secondary: var(--color-green-100);
+	--color-bg-warning-primary: var(--color-yellow-50);
+	--color-bg-warning-primary_inverse: var(--color-yellow-500);
+	--color-bg-warning-secondary: var(--color-yellow-100);
+	--color-fg-primary: var(--color-neutral-900);
+	--color-fg-primary_inverse: var(--white);
+	--color-fg-primary_on-brand: var(--color-neutral-50);
+	--color-fg-secondary: var(--color-neutral-700);
+	--color-fg-secondary_inverse: var(--color-neutral-400);
+	--color-fg-secondary_hover: var(--color-neutral-800);
+	--color-fg-secondary_on-brand: var(--color-neutral-100);
+	--color-fg-tertiary: var(--color-neutral-400);
+	--color-fg-tertiary_hover: var(--color-neutral-600);
+	--color-fg-tertiary_on-brand: var(--color-neutral-200);
+	--color-fg-disabled: var(--color-neutral-300);
+	--color-fg-brand-primary: var(--color-brand-500);
+	--color-fg-brand-secondary: var(--color-brand-300);
+	--color-fg-link: var(--color-blue-500);
+	--color-fg-error-primary: var(--color-red-500);
+	--color-fg-error-secondary: var(--color-red-400);
+	--color-fg-success-primary: var(--color-green-500);
+	--color-fg-success-secondary: var(--color-green-400);
+	--color-fg-warning-primary: var(--color-yellow-500);
+	--color-fg-warning-secondary: var(--color-yellow-400);
+}
+
+@theme inline {
+	--font-family-sans: "Inter", system-ui, sans-serif;
+	--font-family-mono: "JetBrains Mono", monospace;
+}

package/src/index.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "./index";
+
+const meta = {
+	title: "Button",
+	component: Button,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+	args: {
+		children: "Hello",
+	},
+};

package/src/index.tsx

@@ -0,0 +1,54 @@
+// Shadcn Components
+
+export * from "./components/code-editor";
+export * from "./components/copy-icon";
+export * from "./components/request-line-editor";
+export * from "./shadcn/components/ui/accordion";
+export * from "./shadcn/components/ui/alert";
+export * from "./shadcn/components/ui/alert-dialog";
+export * from "./shadcn/components/ui/aspect-ratio";
+export * from "./shadcn/components/ui/avatar";
+export * from "./shadcn/components/ui/badge";
+export * from "./shadcn/components/ui/breadcrumb";
+export * from "./shadcn/components/ui/button";
+export * from "./shadcn/components/ui/calendar";
+export * from "./shadcn/components/ui/card";
+export * from "./shadcn/components/ui/carousel";
+export * from "./shadcn/components/ui/chart";
+export * from "./shadcn/components/ui/checkbox";
+export * from "./shadcn/components/ui/collapsible";
+export * from "./shadcn/components/ui/command";
+export * from "./shadcn/components/ui/context-menu";
+export * from "./shadcn/components/ui/dialog";
+export * from "./shadcn/components/ui/drawer";
+export * from "./shadcn/components/ui/dropdown-menu";
+export * from "./shadcn/components/ui/form";
+export * from "./shadcn/components/ui/hover-card";
+export * from "./shadcn/components/ui/input";
+export * from "./shadcn/components/ui/input-otp";
+export * from "./shadcn/components/ui/label";
+export * from "./shadcn/components/ui/menubar";
+export * from "./shadcn/components/ui/navigation-menu";
+export * from "./shadcn/components/ui/pagination";
+export * from "./shadcn/components/ui/popover";
+export * from "./shadcn/components/ui/progress";
+export * from "./shadcn/components/ui/radio-group";
+export * from "./shadcn/components/ui/resizable";
+export * from "./shadcn/components/ui/scroll-area";
+export * from "./shadcn/components/ui/select";
+export * from "./shadcn/components/ui/separator";
+export * from "./shadcn/components/ui/sheet";
+export * from "./shadcn/components/ui/sidebar";
+export * from "./shadcn/components/ui/skeleton";
+export * from "./shadcn/components/ui/slider";
+export * from "./shadcn/components/ui/sonner";
+export * from "./shadcn/components/ui/switch";
+export * from "./shadcn/components/ui/table";
+export * from "./shadcn/components/ui/tabs";
+export * from "./shadcn/components/ui/textarea";
+export * from "./shadcn/components/ui/toggle";
+export * from "./shadcn/components/ui/toggle-group";
+export * from "./shadcn/components/ui/tooltip";
+
+// Hooks
+export * from "./shadcn/hooks/use-mobile";

package/src/shadcn/components/ui/accordion.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "#shadcn/components/ui/accordion";
+
+const meta = {
+	title: "Component/Accordion",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Accordion
+			className="w-full"
+			defaultValue="item-1"
+			type="single"
+			collapsible
+		>
+			<AccordionItem value="item-1">
+				<AccordionTrigger>Product Information</AccordionTrigger>
+				<AccordionContent className="flex flex-col gap-4 text-balance">
+					<p>
+						Our flagship product combines cutting-edge technology with sleek
+						design. Built with premium materials, it offers unparalleled
+						performance and reliability.
+					</p>
+					<p>
+						Key features include advanced processing capabilities, and an
+						intuitive user interface designed for both beginners and experts.
+					</p>
+				</AccordionContent>
+			</AccordionItem>
+			<AccordionItem value="item-2">
+				<AccordionTrigger>Shipping Details</AccordionTrigger>
+				<AccordionContent className="flex flex-col gap-4 text-balance">
+					<p>
+						We offer worldwide shipping through trusted courier partners.
+						Standard delivery takes 3-5 business days, while express shipping
+						ensures delivery within 1-2 business days.
+					</p>
+					<p>
+						All orders are carefully packaged and fully insured. Track your
+						shipment in real-time through our dedicated tracking portal.
+					</p>
+				</AccordionContent>
+			</AccordionItem>
+			<AccordionItem value="item-3">
+				<AccordionTrigger>Return Policy</AccordionTrigger>
+				<AccordionContent className="flex flex-col gap-4 text-balance">
+					<p>
+						We stand behind our products with a comprehensive 30-day return
+						policy. If you&apos;re not completely satisfied, simply return the
+						item in its original condition.
+					</p>
+					<p>
+						Our hassle-free return process includes free return shipping and
+						full refunds processed within 48 hours of receiving the returned
+						item.
+					</p>
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	),
+} satisfies Story;

package/src/shadcn/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Accordion({
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+	className,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+	return (
+		<AccordionPrimitive.Item
+			data-slot="accordion-item"
+			className={cn("border-b last:border-b-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function AccordionTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
+				className={cn(
+					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	);
+}
+
+function AccordionContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+	return (
+		<AccordionPrimitive.Content
+			data-slot="accordion-content"
+			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			{...props}
+		>
+			<div className={cn("pt-0 pb-4", className)}>{children}</div>
+		</AccordionPrimitive.Content>
+	);
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/shadcn/components/ui/alert-dialog.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "#shadcn/components/ui/alert-dialog";
+import { Button } from "#shadcn/components/ui/button";
+
+const meta = {
+	title: "Component/Alert dialog",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary">Show Dialog</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete your
+						account and remove your data from our servers.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction>Continue</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	),
+} satisfies Story;

package/src/shadcn/components/ui/alert-dialog.tsx

@@ -0,0 +1,154 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+import { buttonVariants } from "#shadcn/components/ui/button";
+import { cn } from "#shadcn/lib/utils";
+
+function AlertDialog({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+	return (
+		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+	);
+}
+
+function AlertDialogPortal({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return (
+		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+	);
+}
+
+function AlertDialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogContent({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogFooter({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn("text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+	return (
+		<AlertDialogPrimitive.Action
+			className={cn(buttonVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogCancel({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+	return (
+		<AlertDialogPrimitive.Cancel
+			className={cn(buttonVariants({ variant: "secondary" }), className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};

package/src/shadcn/components/ui/alert.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react";
+import {
+	Alert,
+	AlertDescription,
+	AlertTitle,
+} from "#shadcn/components/ui/alert";
+
+const meta = {
+	title: "Component/Alert",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<div className="grid w-full max-w-xl items-start gap-4">
+			<Alert>
+				<CheckCircle2Icon />
+				<AlertTitle>Success! Your changes have been saved</AlertTitle>
+				<AlertDescription>
+					This is an alert with icon, title and description.
+				</AlertDescription>
+			</Alert>
+			<Alert>
+				<PopcornIcon />
+				<AlertTitle>
+					This Alert has a title and an icon. No description.
+				</AlertTitle>
+			</Alert>
+			<Alert variant="destructive">
+				<AlertCircleIcon />
+				<AlertTitle>Unable to process your payment.</AlertTitle>
+				<AlertDescription>
+					<p>Please verify your billing information and try again.</p>
+					<ul className="list-inside list-disc text-sm">
+						<li>Check your card details</li>
+						<li>Ensure sufficient funds</li>
+						<li>Verify billing address</li>
+					</ul>
+				</AlertDescription>
+			</Alert>
+		</div>
+	),
+} satisfies Story;