@handled-ai/design-system 0.18.4 → 0.18.5

package/src/components/__tests__/insights-primitives.test.tsx

@@ -0,0 +1,135 @@
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+
+import { DaysOpenCell, getDaysOpenIntent } from "../days-open-cell"
+import { DetailDrawer } from "../detail-drawer"
+import { InsightsFilterBar } from "../insights-filter-bar"
+import { LinkedEntityCell } from "../linked-entity-cell"
+import { KpiStrip } from "../metric-card"
+import { Pill, StatusPill } from "../pill"
+import { QuickSegment } from "../quick-segment"
+
+describe("Insights primitives", () => {
+  it("renders compact InsightsFilterBar without changing default API", () => {
+    const { container } = render(
+      <InsightsFilterBar
+        variant="compact"
+        filters={[{ id: "status", label: "Status", options: ["All", "Open"], defaultValue: "All" }]}
+        values={{ status: "Open" }}
+        onChange={() => {}}
+        onClearAll={() => {}}
+      />
+    )
+
+    const bar = container.querySelector('[data-slot="insights-filter-bar"]')!
+    expect(bar.className).toContain("p-2")
+    expect(bar.className).toContain("gap-2")
+    expect(screen.getByRole("button", { name: /Status: Open/i }).className).toContain("h-7")
+  })
+
+  it("renders KpiStrip items and changes", () => {
+    const { container } = render(
+      <KpiStrip
+        items={[
+          { label: "New", value: 42, unit: "leads", change: { value: "8%", direction: "up" } },
+          { label: "Aging", value: 12, subtitle: "over SLA", change: { value: "3%", direction: "down", isGood: true } },
+        ]}
+      />
+    )
+
+    expect(container.querySelectorAll('[data-slot="kpi-strip-item"]')).toHaveLength(2)
+    expect(screen.getByText("New")).not.toBeNull()
+    expect(screen.getByText("42")).not.toBeNull()
+    expect(screen.getByText("8%")).not.toBeNull()
+  })
+
+  it("renders neutral KpiStrip changes without an up/down icon or red/green intent", () => {
+    const { container } = render(
+      <KpiStrip
+        items={[
+          { label: "Stable", value: 10, change: { value: "0%", direction: "neutral" } },
+        ]}
+      />
+    )
+
+    const change = container.querySelector('[data-slot="kpi-strip-change"]')
+    expect(change?.className).toContain("text-muted-foreground")
+    expect(change?.className).not.toContain("text-red-600")
+    expect(change?.className).not.toContain("text-emerald-600")
+    expect(change?.querySelector("svg")).toBeNull()
+  })
+
+  it("QuickSegment exposes selected state and invokes onSelect", () => {
+    const onSelect = vi.fn()
+    render(<QuickSegment label="At risk" value="risk" count={5} selected onSelect={onSelect} />)
+
+    const button = screen.getByRole("button", { name: /At risk/i })
+    expect(button.getAttribute("aria-pressed")).toBe("true")
+    expect(screen.getByText("5")).not.toBeNull()
+    fireEvent.click(button)
+    expect(onSelect).toHaveBeenCalledWith("risk")
+  })
+
+  it("LinkedEntityCell renders entity links and metadata", () => {
+    const onNavigate = vi.fn()
+    render(
+      <LinkedEntityCell
+        name="Acme Health"
+        href="/accounts/acme"
+        subtitle="Account"
+        meta="Tier 1"
+        onNavigate={onNavigate}
+      />
+    )
+
+    const link = screen.getByRole("link", { name: "Acme Health" })
+    expect(link.getAttribute("href")).toBe("/accounts/acme")
+    expect(screen.getByText(/Tier 1/)).not.toBeNull()
+    fireEvent.click(link)
+    expect(onNavigate).toHaveBeenCalled()
+  })
+
+  it("DaysOpenCell maps thresholds to status intents", () => {
+    expect(getDaysOpenIntent(2, 7, 30)).toBe("success")
+    expect(getDaysOpenIntent(10, 7, 30)).toBe("warning")
+    expect(getDaysOpenIntent(45, 7, 30)).toBe("error")
+
+    render(<DaysOpenCell days={45} />)
+    expect(screen.getByTestId("days-open-pill").getAttribute("data-variant")).toBe("error")
+  })
+
+  it("Pill and StatusPill render wrapper variants", () => {
+    const { container } = render(
+      <div>
+        <Pill variant="info">Info</Pill>
+        <StatusPill status="Blocked" intent="error" />
+      </div>
+    )
+
+    expect(container.querySelector('[data-slot="pill"]')?.getAttribute("data-variant")).toBe("info")
+    expect(container.querySelector('[data-slot="status-pill"]')?.getAttribute("data-variant")).toBe("error")
+    expect(screen.getByText("Blocked")).not.toBeNull()
+  })
+
+  it("DetailDrawer renders title, content, and footer when open", () => {
+    render(
+      <DetailDrawer
+        open
+        onOpenChange={() => {}}
+        title="Referral details"
+        description="A drawer for insights"
+        footer={<button type="button">Done</button>}
+      >
+        <div>Drawer body</div>
+      </DetailDrawer>
+    )
+
+    expect(screen.getByText("Referral details")).not.toBeNull()
+    expect(screen.getByText("A drawer for insights")).not.toBeNull()
+    expect(screen.getByText("Drawer body")).not.toBeNull()
+    expect(screen.getByRole("button", { name: "Done" })).not.toBeNull()
+    expect(document.querySelector('[data-slot="detail-drawer"]')?.className).toContain("flex")
+    expect(document.querySelector('[data-slot="detail-drawer"]')?.className).toContain("flex-col")
+  })
+})

package/src/components/days-open-cell.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { StatusPill, type PillStatus } from "./pill"
+
+export interface DaysOpenCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  days: number | null | undefined
+  warningAt?: number
+  criticalAt?: number
+  emptyLabel?: string
+  suffix?: string
+}
+
+function getDaysOpenIntent(days: number, warningAt: number, criticalAt: number): PillStatus {
+  if (days >= criticalAt) return "error"
+  if (days >= warningAt) return "warning"
+  return "success"
+}
+
+export function DaysOpenCell({
+  days,
+  warningAt = 7,
+  criticalAt = 30,
+  emptyLabel = "—",
+  suffix = "d open",
+  className,
+  ...props
+}: DaysOpenCellProps) {
+  if (days === null || days === undefined) {
+    return (
+      <div data-slot="days-open-cell" className={cn("text-sm text-muted-foreground", className)} {...props}>
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  const intent = getDaysOpenIntent(days, warningAt, criticalAt)
+
+  return (
+    <div data-slot="days-open-cell" className={cn("inline-flex items-center", className)} {...props}>
+      <StatusPill data-testid="days-open-pill" status={`${days} ${suffix}`} intent={intent}>
+        {days} {suffix}
+      </StatusPill>
+    </div>
+  )
+}
+
+export { getDaysOpenIntent }

package/src/components/detail-drawer.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "./sheet"
+
+export interface DetailDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: React.ReactNode
+  description?: React.ReactNode
+  children: React.ReactNode
+  footer?: React.ReactNode
+  side?: "right" | "left"
+  className?: string
+  contentClassName?: string
+}
+
+export function DetailDrawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  className,
+  contentClassName,
+}: DetailDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="detail-drawer"
+        side={side}
+        className={cn("flex w-full flex-col gap-0 p-0 sm:max-w-xl", className)}
+      >
+        <SheetHeader data-slot="detail-drawer-header" className="border-b border-border p-5">
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div data-slot="detail-drawer-content" className={cn("flex-1 overflow-y-auto p-5", contentClassName)}>
+          {children}
+        </div>
+        {footer ? (
+          <SheetFooter data-slot="detail-drawer-footer" className="border-t border-border p-5">
+            {footer}
+          </SheetFooter>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}

package/src/components/feedback-primitives.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ThumbsUp, ThumbsDown, Check, Pencil } from "lucide-react"
+import { ThumbsUp, ThumbsDown } from "lucide-react"
 import { cn } from "../lib/utils"
 
 // ---------------------------------------------------------------------------
@@ -25,19 +25,6 @@ export interface FeedbackSubmitData {
   detail: string
 }
 
-/**
- * Persisted feedback data from a previous submission, used to hydrate the
- * footer into its "already submitted" visual state.
- */
-export interface PersistedFeedbackData {
-  sentiment: "positive" | "negative"
-  reasonTop?: string
-  reasonSub?: string
-  pills?: string[]
-  detail?: string
-  ownershipLabel: "Your feedback" | "Team feedback"
-}
-
 /**
  * Defines a tier-1 chip that may have tier-2 sub-chips.
  */
@@ -198,13 +185,6 @@ export interface FeedbackFooterProps {
   negativeChips?: FeedbackChipTree[]
   positiveChips?: string[]
   className?: string
-  /** Pre-existing feedback to hydrate from (e.g. after page reload). */
-  initialFeedback?: PersistedFeedbackData | null
-  /** Label shown in the transient confirmation pill after submit. */
-  submittedLabel?: string
-  /** Stable key for syncing initialFeedback into local state. When this
-   *  changes, the component resets to the new initialFeedback value. */
-  feedbackKey?: string
 }
 
 const SENTIMENT_BUTTON_ACTIVE: Record<"positive" | "negative", string> = {
@@ -225,9 +205,6 @@ export function FeedbackFooter({
   negativeChips = [],
   positiveChips = [],
   className,
-  initialFeedback,
-  submittedLabel = "Saved",
-  feedbackKey,
 }: FeedbackFooterProps) {
   const [expanded, setExpanded] = React.useState(false)
   const [selectedTier1, setSelectedTier1] = React.useState<string | null>(null)
@@ -237,48 +214,6 @@ export function FeedbackFooter({
   const [activeTreeIndex, setActiveTreeIndex] = React.useState<number | null>(
     null,
   )
-  /** Transient "Saved" confirmation — shown after successful submit. */
-  const [submitted, setSubmitted] = React.useState(false)
-  /** Persisted feedback shown as a clickable indicator (survives reload). */
-  const [persisted, setPersisted] = React.useState<PersistedFeedbackData | null>(
-    initialFeedback ?? null,
-  )
-  /** Tracks whether the user is actively editing (ref to guard against prop overwrites without triggering re-syncs). */
-  const isEditingRef = React.useRef(false)
-  /** Track the last synced feedbackKey to detect key changes. */
-  const lastKeyRef = React.useRef<string | undefined>(feedbackKey)
-
-  /** Helper to update the editing ref. */
-  const setIsEditing = React.useCallback((value: boolean) => {
-    isEditingRef.current = value
-  }, [])
-
-  // Sync initialFeedback into local state via useEffect keyed on feedbackKey.
-  // When feedbackKey changes, reset to new target. Preserve active edits
-  // when feedbackKey stays the same.
-  React.useEffect(() => {
-    const keyChanged = feedbackKey !== lastKeyRef.current
-    lastKeyRef.current = feedbackKey
-
-    if (keyChanged) {
-      // Key changed — full reset to new target
-      setPersisted(initialFeedback ?? null)
-      setSubmitted(false)
-      setExpanded(false)
-      isEditingRef.current = false
-      if (initialFeedback) {
-        onFeedbackChange(initialFeedback.sentiment)
-      } else {
-        onFeedbackChange(null)
-      }
-    } else if (!isEditingRef.current) {
-      // Same key, not actively editing — safe to sync
-      setPersisted(initialFeedback ?? null)
-      if (initialFeedback) {
-        onFeedbackChange(initialFeedback.sentiment)
-      }
-    }
-  }, [initialFeedback, feedbackKey, onFeedbackChange])
 
   // Reset state when feedback collapses
   const resetState = React.useCallback(() => {
@@ -288,8 +223,7 @@ export function FeedbackFooter({
     setAdditionalPills([])
     setDetailText("")
     setActiveTreeIndex(null)
-    setIsEditing(false)
-  }, [setIsEditing])
+  }, [])
 
   const handleSentimentClick = React.useCallback(
     (sentiment: "positive" | "negative") => {
@@ -297,26 +231,10 @@ export function FeedbackFooter({
       // Reset chip state when switching sentiment, then expand
       resetState()
       setExpanded(true)
-      setSubmitted(false)
-      setPersisted(null)
-      setIsEditing(true)
     },
-    [onFeedbackChange, resetState, setIsEditing],
+    [onFeedbackChange, resetState],
   )
 
-  /** Open the persisted indicator for editing. */
-  const handlePersistedClick = React.useCallback(() => {
-    if (!persisted) return
-    onFeedbackChange(persisted.sentiment)
-    setSelectedTier1(persisted.reasonTop ?? null)
-    setSelectedTier2(persisted.reasonSub ?? null)
-    setAdditionalPills(persisted.pills ?? [])
-    setDetailText(persisted.detail ?? "")
-    setExpanded(true)
-    setSubmitted(false)
-    setIsEditing(true)
-  }, [persisted, onFeedbackChange, setIsEditing])
-
   const handleTier1Toggle = React.useCallback(
     (chipLabel: string) => {
       if (selectedTier1 === chipLabel) {
@@ -377,9 +295,6 @@ export function FeedbackFooter({
       pills: additionalPills,
       detail: detailText,
     })
-    // Show transient "Saved" confirmation
-    setSubmitted(true)
-    // Collapse expansion but keep sentiment visible
     resetState()
   }, [
     feedback,
@@ -408,75 +323,38 @@ export function FeedbackFooter({
   const activeTree =
     activeTreeIndex !== null ? negativeChips[activeTreeIndex] : null
 
-  // Determine if we should show the persisted indicator instead of bare buttons
-  const showPersistedIndicator = persisted && !expanded && !submitted
-
   return (
     <div className={cn("space-y-3", className)}>
       {/* Sentiment buttons + meta text bar */}
       <div className="flex items-center justify-between">
-        {showPersistedIndicator ? (
-          /* Persisted feedback indicator — clickable to reopen editor */
+        <div className="flex items-center gap-3">
           <button
             type="button"
-            onClick={handlePersistedClick}
-            className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
-            data-testid="persisted-feedback-indicator"
-          >
-            <span className="font-medium">{persisted.ownershipLabel}:</span>
-            {persisted.sentiment === "positive" ? (
-              <ThumbsUp className="h-[11px] w-[11px]" />
-            ) : (
-              <ThumbsDown className="h-[11px] w-[11px]" />
-            )}
-            {persisted.detail && (
-              <span className="max-w-[200px] truncate text-muted-foreground/70">
-                {persisted.detail}
-              </span>
+            onClick={() => handleSentimentClick("positive")}
+            className={cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "positive"
+                ? SENTIMENT_BUTTON_ACTIVE.positive
+                : SENTIMENT_BUTTON_IDLE,
             )}
-            <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
+          >
+            <ThumbsUp className="h-[11px] w-[11px]" />
+            Helpful
           </button>
-        ) : (
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={() => handleSentimentClick("positive")}
-              className={cn(
-                "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
-                feedback === "positive"
-                  ? SENTIMENT_BUTTON_ACTIVE.positive
-                  : SENTIMENT_BUTTON_IDLE,
-              )}
-            >
-              <ThumbsUp className="h-[11px] w-[11px]" />
-              Helpful
-            </button>
-            <button
-              type="button"
-              onClick={() => handleSentimentClick("negative")}
-              className={cn(
-                "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
-                feedback === "negative"
-                  ? SENTIMENT_BUTTON_ACTIVE.negative
-                  : SENTIMENT_BUTTON_IDLE,
-              )}
-            >
-              <ThumbsDown className="h-[11px] w-[11px]" />
-              Not helpful
-            </button>
-            {/* Transient "Saved" confirmation pill */}
-            {submitted && feedback && (
-              <span
-                className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
-                role="status"
-                data-testid="feedback-submitted-pill"
-              >
-                <Check className="h-[11px] w-[11px]" />
-                {submittedLabel}
-              </span>
+          <button
+            type="button"
+            onClick={() => handleSentimentClick("negative")}
+            className={cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "negative"
+                ? SENTIMENT_BUTTON_ACTIVE.negative
+                : SENTIMENT_BUTTON_IDLE,
             )}
-          </div>
-        )}
+          >
+            <ThumbsDown className="h-[11px] w-[11px]" />
+            Not helpful
+          </button>
+        </div>
         {metaText && (
           <span className="text-[11px] text-muted-foreground">{metaText}</span>
         )}
@@ -544,188 +422,3 @@ export function FeedbackFooter({
     </div>
   )
 }
-
-// ---------------------------------------------------------------------------
-// InlineFeedbackControl — shared thumb+detail inline feedback widget
-// ---------------------------------------------------------------------------
-
-export interface InlineFeedbackControlProps {
-  /** Unique key identifying the feedback target (e.g. factor key). */
-  feedbackKey: string
-  /** Persisted/initial feedback to hydrate from. */
-  initialFeedback?: { type: "up" | "down"; detail: string; ownershipLabel?: string }
-  /** Called when user submits or clears feedback. */
-  onFeedback?: (key: string, type: "up" | "down" | null, detail?: string) => void
-  /** Test ID prefix for all sub-elements. */
-  testIdPrefix?: string
-}
-
-/**
- * Compact inline thumb-up/thumb-down feedback with optional detail text.
- * Used by PriorityFactorRow and any other component that needs
- * a lightweight feedback control.
- */
-export function InlineFeedbackControl({
-  feedbackKey,
-  initialFeedback,
-  onFeedback,
-  testIdPrefix = "inline-feedback",
-}: InlineFeedbackControlProps) {
-  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(
-    initialFeedback?.type ?? null,
-  )
-  const [showInput, setShowInput] = React.useState(false)
-  const [detailText, setDetailText] = React.useState(initialFeedback?.detail ?? "")
-  const [saved, setSaved] = React.useState(!!initialFeedback)
-  const [savedDetail, setSavedDetail] = React.useState(initialFeedback?.detail ?? "")
-  const ownershipLabel = initialFeedback?.ownershipLabel ?? "Your feedback"
-
-  // Sync with initialFeedback prop changes
-  React.useEffect(() => {
-    if (initialFeedback) {
-      setThumbState(initialFeedback.type)
-      setSaved(true)
-      setSavedDetail(initialFeedback.detail)
-    }
-  }, [initialFeedback])
-
-  const handleThumbClick = React.useCallback(
-    (type: "up" | "down") => {
-      if (thumbState === type) {
-        // Toggle off
-        setThumbState(null)
-        setShowInput(false)
-        setSaved(false)
-        onFeedback?.(feedbackKey, null)
-      } else {
-        setThumbState(type)
-        setShowInput(true)
-        setSaved(false)
-      }
-    },
-    [thumbState, feedbackKey, onFeedback],
-  )
-
-  const handleSubmitDetail = React.useCallback(() => {
-    if (!thumbState) return
-    const text = detailText.trim()
-    onFeedback?.(feedbackKey, thumbState, text)
-    setSaved(true)
-    setSavedDetail(text)
-    setShowInput(false)
-  }, [thumbState, detailText, feedbackKey, onFeedback])
-
-  return (
-    <div>
-      {saved && !showInput ? (
-        /* Persisted / saved indicator */
-        <button
-          type="button"
-          onClick={() => {
-            setDetailText(savedDetail)
-            setShowInput(true)
-            setSaved(false)
-          }}
-          className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
-          data-testid={`${testIdPrefix}-feedback-persisted-${feedbackKey}`}
-        >
-          <span className="font-medium">{ownershipLabel}:</span>
-          {thumbState === "up" ? (
-            <ThumbsUp className="h-[10px] w-[10px]" />
-          ) : (
-            <ThumbsDown className="h-[10px] w-[10px]" />
-          )}
-          {savedDetail && (
-            <span className="max-w-[180px] truncate text-muted-foreground/70">
-              {savedDetail}
-            </span>
-          )}
-          <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
-        </button>
-      ) : (
-        <div className="flex items-center gap-1.5">
-          {/* Inline thumb buttons */}
-          <button
-            type="button"
-            onClick={() => handleThumbClick("up")}
-            className={cn(
-              "p-1 rounded transition-colors",
-              thumbState === "up"
-                ? "text-foreground bg-muted"
-                : "text-muted-foreground/40 hover:text-foreground hover:bg-muted/50",
-            )}
-            title="This is accurate"
-            data-testid={`${testIdPrefix}-thumb-up-${feedbackKey}`}
-          >
-            <ThumbsUp className="h-[10px] w-[10px]" />
-          </button>
-          <button
-            type="button"
-            onClick={() => handleThumbClick("down")}
-            className={cn(
-              "p-1 rounded transition-colors",
-              thumbState === "down"
-                ? "text-red-600 bg-red-50"
-                : "text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50",
-            )}
-            title="Report issue"
-            data-testid={`${testIdPrefix}-thumb-down-${feedbackKey}`}
-          >
-            <ThumbsDown className="h-[10px] w-[10px]" />
-          </button>
-
-          {/* Transient "Saved" pill */}
-          {saved && (
-            <span
-              className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
-              role="status"
-              data-testid={`${testIdPrefix}-saved-${feedbackKey}`}
-            >
-              <Check className="h-[10px] w-[10px]" />
-              Saved
-            </span>
-          )}
-        </div>
-      )}
-
-      {/* Inline detail input */}
-      {showInput && thumbState && (
-        <div className="mt-1.5">
-          <input
-            type="text"
-            value={detailText}
-            onChange={(e) => setDetailText(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleSubmitDetail()
-              if (e.key === "Escape") setShowInput(false)
-            }}
-            placeholder={
-              thumbState === "up"
-                ? "What\u2019s accurate? (optional)"
-                : "What\u2019s wrong? (optional)"
-            }
-            className="w-full h-6 rounded border border-border bg-background px-2 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
-            data-testid={`${testIdPrefix}-detail-input-${feedbackKey}`}
-          />
-          <div className="mt-1 flex items-center gap-1.5">
-            <button
-              type="button"
-              onClick={handleSubmitDetail}
-              className="bg-foreground text-background rounded px-2 py-0.5 text-[10px] font-semibold"
-              data-testid={`${testIdPrefix}-submit-${feedbackKey}`}
-            >
-              Submit
-            </button>
-            <button
-              type="button"
-              onClick={() => setShowInput(false)}
-              className="border border-border rounded px-2 py-0.5 text-[10px] font-medium"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}