@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/charts/WorkspaceUsageChart.tsx

@@ -1,20 +1,21 @@
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "./ActivityChart";
 import { ChartHeader } from "./ChartHeader";
 import type { TimeRangeDays } from "../controls/TimeRangeSelector";
 import { Card } from "../layout/Card";
+import { ChartContainer, ChartTooltip } from "../ui/chart";
 import { formatActivityChartAverage, formatCompactNumber } from "../../format";
 import type { WorkspaceUsageDay } from "./workspaceUsage";
 
 const USAGE_COLOR = "var(--color-violet-400)";
+const chartConfig = { count: { color: USAGE_COLOR, label: "Usage" } };
 
 /** Plot successful Workspace switches for one recipe over a trailing window. */
 export function WorkspaceUsageChart(props: {
@@ -22,12 +23,6 @@ export function WorkspaceUsageChart(props: {
   range: TimeRangeDays;
   workspaceName: string;
 }) {
-  const layout = createActivityChartLayout(200);
-  const step =
-    props.days.length > 0
-      ? layout.plotWidth / props.days.length
-      : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
   const values = props.days.map((day) => day.count);
   const maximum = Math.max(1, ...values);
   const average = activityChartAverage(values);
@@ -43,57 +38,42 @@ export function WorkspaceUsageChart(props: {
         totalLabel={`last ${props.range} days`}
       />
       <div className="relative px-2 py-3 sm:px-4 sm:py-4">
-        <ChartSvg
-          aria-label={`Usage for ${props.workspaceName} during the last ${props.range} days`}
-          className="min-h-40 overflow-visible"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {props.days.map((day, index) => {
-            const x = layout.left + index * step + step / 2;
-            const barHeight = (day.count / maximum) * layout.plotHeight;
-            const renderedHeight = Math.max(day.count ? 2 : 0, barHeight);
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={<ActivityTooltipRows rows={[["usage", day.count]]} />}
-                date={day.date}
-                summary={`${day.count} switches`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill={USAGE_COLOR}
-                    height={renderedHeight}
-                    opacity={day.count ? 0.82 : 0.08}
-                    rx="2"
-                    width={barWidth}
-                    x={x - barWidth / 2}
-                    y={layout.top + layout.plotHeight - renderedHeight}
-                  />
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={step}
-                    x={layout.left + index * step}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            average={average}
-            format={formatActivityChartAverage}
-            layout={layout}
-            maximum={maximum}
-            stroke={USAGE_COLOR}
-          />
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Usage for ${props.workspaceName} during the last ${props.range} days`}
+            data={props.days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={props.days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: WorkspaceUsageDay) => [["usage", day.count]]}
+                />
+              }
+            />
+            <Bar
+              dataKey="count"
+              fill="var(--color-count)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              minPointSize={(value) => (value ? 2 : 0)}
+              radius={2}
+            />
+            <ActivityChartAverageLine
+              average={average}
+              format={formatActivityChartAverage}
+              stroke={USAGE_COLOR}
+            />
+          </BarChart>
+        </ChartContainer>
         {!hasUsage ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No usage in this period.

package/src/client/components/controls/DirectorySortSelect.tsx

@@ -1,4 +1,4 @@
-import { Select } from "../Select";
+import { NativeSelect } from "../ui/native-select";
 
 export type DirectorySortOption = {
   label: string;
@@ -17,7 +17,7 @@ export function DirectorySortSelect(props: {
       <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-sans font-medium text-xs text-dashboard-text-muted">
         Sort
       </span>
-      <Select
+      <NativeSelect
         aria-label={props.ariaLabel}
         variant="sort"
         value={props.value}
@@ -32,7 +32,7 @@ export function DirectorySortSelect(props: {
             {option.label}
           </option>
         ))}
-      </Select>
+      </NativeSelect>
     </label>
   );
 }

package/src/client/components/controls/TimeRangeSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleButton } from "../Button";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
 
 /**
  * Fixed dashboard reporting window.
@@ -124,9 +124,7 @@ function sumHoursIntoSixHours<T extends { date: string }>(args: {
   // Fill the trailing 28 six-hour buckets when enough hour rows exist.
   if (args.hours.length >= 24) {
     const lastHour = args.hours[args.hours.length - 1]?.date;
-    const endMs = lastHour
-      ? Date.parse(`${lastHour}:00:00.000Z`)
-      : Date.now();
+    const endMs = lastHour ? Date.parse(`${lastHour}:00:00.000Z`) : Date.now();
     const end = new Date(endMs);
     end.setUTCMinutes(0, 0, 0);
     end.setUTCHours(Math.floor(end.getUTCHours() / 6) * 6, 0, 0, 0);
@@ -155,21 +153,18 @@ export function TimeRangeSelector(props: {
   value: TimeRangeDays;
 }) {
   return (
-    <div
+    <ToggleGroup
       aria-label="Reporting period"
-      className="flex items-center gap-1"
-      role="group"
+      onValueChange={([next]) => {
+        if (next) props.onChange(Number(next) as TimeRangeDays);
+      }}
+      value={[String(props.value)]}
     >
       {(props.options ?? DEFAULT_OPTIONS).map((days) => (
-        <ToggleButton
-          key={days}
-          onClick={() => props.onChange(days)}
-          pressed={props.value === days}
-          variant="segment"
-        >
+        <ToggleGroupItem key={days} value={String(days)}>
           {timeRangeLabel(days)}
-        </ToggleButton>
+        </ToggleGroupItem>
       ))}
-    </div>
+    </ToggleGroup>
   );
 }

package/src/client/components/layout/DashboardHeader.tsx

@@ -1,13 +1,11 @@
 import { ArrowLeft, Menu, X } from "lucide-react";
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useRef, type ReactNode, type RefObject } from "react";
 import { Link, NavLink } from "react-router";
 
 import { getDashboardAgentName } from "../../agentName";
-import {
-  acquireBodyScrollLock,
-  releaseBodyScrollLock,
-} from "../../bodyScrollLock";
 import { JuniorLogo } from "../JuniorLogo";
+import { Sheet, SheetClose, SheetContent } from "../ui/sheet";
+import { useSheet } from "../ui/useSheet";
 import {
   MobileHeaderActionsSlot,
   MobileHeaderLiveSlot,
@@ -22,15 +20,6 @@ export type DashboardHeaderNavItem = {
   to: string;
 };
 
-const focusableSelector = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled]):not([type='hidden'])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",");
-
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
@@ -50,9 +39,7 @@ export function DashboardHeader(props: {
   version?: string;
   workspaceActive: boolean;
 }) {
-  const sheetRef = useRef<HTMLDivElement>(null);
-  const openButtonRef = useRef<HTMLButtonElement>(null);
-  const previousFocusRef = useRef<HTMLElement | undefined>(undefined);
+  const closeRef = useRef<HTMLButtonElement>(null);
   const onOpenChangeRef = useRef(props.onMobileNavigationOpenChange);
   onOpenChangeRef.current = props.onMobileNavigationOpenChange;
   // Conversation chrome is path-driven. Undefined title keeps the loading
@@ -90,56 +77,7 @@ export function DashboardHeader(props: {
     };
     closeWhenDesktop();
     mobile.addEventListener("change", closeWhenDesktop);
-
-    previousFocusRef.current =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : (openButtonRef.current ?? undefined);
-    acquireBodyScrollLock();
-    const focusFrame = requestAnimationFrame(() => {
-      sheetRef.current
-        ?.querySelector<HTMLElement>("[data-mobile-nav-close]")
-        ?.focus();
-    });
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Tab") return;
-      const sheet = sheetRef.current;
-      const focusable = Array.from(
-        sheet?.querySelectorAll<HTMLElement>(focusableSelector) ?? [],
-      ).filter(
-        (element) =>
-          element.tabIndex >= 0 && element.getClientRects().length > 0,
-      );
-      const first = focusable.at(0);
-      const last = focusable.at(-1);
-      if (!sheet || !first || !last) {
-        event.preventDefault();
-        return;
-      }
-      const active = document.activeElement;
-      if (event.shiftKey && (active === first || !sheet.contains(active))) {
-        event.preventDefault();
-        last.focus();
-      } else if (
-        !event.shiftKey &&
-        (active === last || !sheet.contains(active))
-      ) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      cancelAnimationFrame(focusFrame);
-      mobile.removeEventListener("change", closeWhenDesktop);
-      window.removeEventListener("keydown", onKeyDown);
-      releaseBodyScrollLock();
-      const previousFocus = previousFocusRef.current;
-      previousFocusRef.current = undefined;
-      if (previousFocus?.isConnected) previousFocus.focus();
-    };
+    return () => mobile.removeEventListener("change", closeWhenDesktop);
   }, [props.mobileNavigationOpen]);
 
   return (
@@ -168,7 +106,6 @@ export function DashboardHeader(props: {
             aria-label="Open navigation"
             className="grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70 md:hidden"
             onClick={() => props.onMobileNavigationOpenChange(true)}
-            ref={openButtonRef}
             tabIndex={props.mobileNavigationOpen ? -1 : undefined}
             type="button"
           >
@@ -225,22 +162,9 @@ export function DashboardHeader(props: {
         ) : null}
       </div>
       {props.mobileNavigationOpen ? (
-        <div
-          aria-label="Navigation"
-          aria-modal="true"
-          className="fixed inset-0 z-50 flex flex-col bg-dashboard-bg-elevated md:hidden"
-          id="mobile-navigation"
-          onClick={(event) => {
-            // Close on route taps and sheet actions such as Log out.
-            if (
-              event.target instanceof Element &&
-              event.target.closest("a[href], [data-mobile-nav-dismiss]")
-            ) {
-              onOpenChangeRef.current(false);
-            }
-          }}
-          ref={sheetRef}
-          role="dialog"
+        <MobileNavigationSheet
+          closeRef={closeRef}
+          onClose={() => onOpenChangeRef.current(false)}
         >
           <div className="flex items-center justify-between gap-3 border-b border-dashboard-border-subtle bg-dashboard-surface-raised px-3 py-2 pt-[max(0.5rem,env(safe-area-inset-top))]">
             <Link
@@ -250,15 +174,13 @@ export function DashboardHeader(props: {
             >
               {getDashboardAgentName()}
             </Link>
-            <button
+            <SheetClose
               aria-label="Close navigation"
               className="grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70"
-              data-mobile-nav-close
-              onClick={() => props.onMobileNavigationOpenChange(false)}
-              type="button"
+              ref={closeRef}
             >
               <X aria-hidden="true" size={20} strokeWidth={2} />
-            </button>
+            </SheetClose>
           </div>
           <div className="flex min-h-0 flex-1 flex-col">
             <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3">
@@ -307,8 +229,40 @@ export function DashboardHeader(props: {
               </div>
             ) : null}
           </div>
-        </div>
+        </MobileNavigationSheet>
       ) : null}
     </header>
   );
 }
+
+/** Show the mobile navigation in a full-screen shared sheet. */
+function MobileNavigationSheet(props: {
+  children: ReactNode;
+  closeRef: RefObject<HTMLButtonElement | null>;
+  onClose(): void;
+}) {
+  const sheet = useSheet(props.onClose, props.closeRef);
+  return (
+    <Sheet {...sheet.rootProps}>
+      <SheetContent
+        {...sheet.contentProps}
+        aria-label="Navigation"
+        className="inset-0 gap-0 bg-dashboard-bg-elevated outline-none data-[side=left]:w-full data-[side=left]:border-r-0 data-[side=left]:sm:max-w-none md:hidden"
+        id="mobile-navigation"
+        onClick={(event) => {
+          // Close on route taps and sheet actions such as Log out.
+          if (
+            event.target instanceof Element &&
+            event.target.closest("a[href], [data-mobile-nav-dismiss]")
+          ) {
+            props.onClose();
+          }
+        }}
+        showCloseButton={false}
+        side="left"
+      >
+        {props.children}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/client/components/layout/SecondaryNavigation.tsx

@@ -22,6 +22,7 @@ export type SecondaryNavigationItem = SegmentedNavItem;
  */
 export function SecondaryNavigation(props: {
   ariaLabel: string;
+  className?: string;
   children: ReactNode;
   items: SecondaryNavigationItem[];
 }) {
@@ -34,7 +35,7 @@ export function SecondaryNavigation(props: {
     );
 
   return (
-    <div className="min-w-0">
+    <div className={cn("min-w-0", props.className)}>
       <SecondaryNavigationPortal
         desktop={
           <div className={cn(dashboardContainerClass, "min-w-0 px-4 md:px-8")}>

package/src/client/components/layout/VisualViewportShell.tsx

@@ -6,13 +6,13 @@ import { cn } from "../../styles";
 /**
  * Own the dashboard visual-viewport shell.
  *
- * Only this component may pin the conversation workspace to visualViewport
+ * Only this component may pin pages with separate scroll panes to visualViewport
  * geometry and write the related CSS variables / body scroll lock.
  */
 export function VisualViewportShell(props: {
   children: ReactNode;
   className?: string;
-  /** Pin the shell to the mobile visual viewport (conversation routes). */
+  /** Pin pages with separate scroll panes to the mobile visual viewport. */
   enabled: boolean;
   style?: CSSProperties;
 }) {

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

@@ -0,0 +1,77 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "@dashboard/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+/** Group sections with Base UI disclosure and keyboard behavior. */
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keep one section’s trigger and panel state together. */
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(
+        "not-last:border-b not-last:border-dashboard-border-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Render the section heading and its expand or collapse control. */
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 rounded-sm py-2.5 text-left font-sans text-sm font-medium text-dashboard-text transition-colors hover:text-dashboard-text-solid outline-none focus-visible:outline-2 focus-visible:outline-dashboard-focus aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-dashboard-text-muted",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+/** Reveal section content with measured height and reduced-motion support. */
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-180 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-2.5", className)}>{children}</div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,89 @@
+import type { ComponentProps } from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@dashboard/lib/utils";
+import { Button } from "./button";
+
+/** Require an explicit response before a destructive action. */
+export function AlertDialog(props: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root {...props} />;
+}
+
+/** Show a named confirmation above the page with modal focus handling. */
+export function AlertDialogContent({
+  className,
+  ...props
+}: AlertDialogPrimitive.Popup.Props) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Backdrop className="fixed inset-0 z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0" />
+      <AlertDialogPrimitive.Popup
+        data-dashboard-modal=""
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid grid-cols-1 max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-5 text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+/** Name the action that needs confirmation. */
+export function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("m-0 font-display text-lg font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+/** Describe what the action changes before the user confirms it. */
+export function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn(
+        "m-0 break-words text-sm leading-relaxed text-dashboard-text-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Keep confirmation controls together and reachable on small screens. */
+export function AlertDialogFooter({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-wrap justify-end gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Run the confirmed action; its owner decides when the dialog can close. */
+export function AlertDialogAction(props: ComponentProps<typeof Button>) {
+  return (
+    <Button data-slot="alert-dialog-action" className="min-h-11" {...props} />
+  );
+}
+
+/** Cancel through Base UI so focus returns to the source control. */
+export function AlertDialogCancel(props: AlertDialogPrimitive.Close.Props) {
+  return (
+    <AlertDialogPrimitive.Close
+      render={<Button className="min-h-11" />}
+      {...props}
+    />
+  );
+}

package/src/client/components/ui/alert.tsx

@@ -0,0 +1,64 @@
+import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-dashboard-border-strong bg-dashboard-surface-raised text-dashboard-text",
+        destructive:
+          "border-rose-300/25 bg-dashboard-surface-raised text-rose-50 *:data-[slot=alert-description]:text-rose-100/70 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+/** Show a message in a live region. Pass `role="status"` for polite updates. */
+function Alert({
+  className,
+  variant,
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-dashboard-text",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-dashboard-text-muted md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-dashboard-text [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };