{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "returns-portal",
  "title": "Returns Portal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/returns-portal/ReturnsPortal.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Check,\n  CheckCircle2,\n  ChevronLeft,\n  ChevronRight,\n  CreditCard,\n  Download,\n  Printer,\n  RefreshCw,\n  ShieldCheck,\n  Gift,\n  Shirt,\n  Truck,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Stepper } from '@/components/ui/stepper'\n\nexport interface OrderItem {\n  id: string\n  name: string\n  variant: string\n  sku: string\n  price: number\n  maxQty: number\n}\n\nexport interface ReturnsPortalProps {\n  initialStep?: number\n  initialOrderNumber?: string\n  initialEmail?: string\n  className?: string\n}\n\nconst steps = [\n  { id: 1, title: 'Find Order' },\n  { id: 2, title: 'Select Items' },\n  { id: 3, title: 'Choose Resolution' },\n  { id: 4, title: 'Confirm & Print' },\n]\n\nconst orderItems: OrderItem[] = [\n  {\n    id: 'item-1',\n    name: 'Merino Wool Crewneck Sweater',\n    variant: 'Midnight Navy / Size L',\n    sku: 'MWC-NAV-L',\n    price: 120,\n    maxQty: 1,\n  },\n  {\n    id: 'item-2',\n    name: 'Classic Canvas High-Tops',\n    variant: 'Off-White / US 10.5',\n    sku: 'CCHT-OW-105',\n    price: 85,\n    maxQty: 1,\n  },\n  {\n    id: 'item-3',\n    name: 'Tailored Chino Trousers',\n    variant: 'Olive / 32x32',\n    sku: 'TCT-OLV-32',\n    price: 95,\n    maxQty: 2,\n  },\n]\n\nconst returnReasonsList = ['Wrong size', 'Item defective', 'Not as described', 'Changed mind', 'Arrived late']\n\nconst exchangeSizesList = ['Small (S)', 'Medium (M)', 'Large (L)', 'Extra Large (XL)']\n\nexport function ReturnsPortal({\n  initialStep = 1,\n  initialOrderNumber = '#ORD-84920',\n  initialEmail = 'sarah.connor@example.com',\n  className,\n}: ReturnsPortalProps) {\n  const [step, setStep] = React.useState(initialStep)\n  const [orderNumber, setOrderNumber] = React.useState(initialOrderNumber)\n  const [email, setEmail] = React.useState(initialEmail)\n\n  const [selectedItems, setSelectedItems] = React.useState<Record<string, boolean>>({\n    'item-1': true,\n    'item-2': false,\n    'item-3': false,\n  })\n\n  const [returnQuantities, setReturnQuantities] = React.useState<Record<string, number>>({\n    'item-1': 1,\n    'item-2': 1,\n    'item-3': 1,\n  })\n\n  const [returnReasons, setReturnReasons] = React.useState<Record<string, string>>({\n    'item-1': 'Wrong size',\n    'item-2': 'Changed mind',\n    'item-3': 'Item defective',\n  })\n\n  const [resolution, setResolution] = React.useState<'exchange' | 'store-credit' | 'original-payment'>('store-credit')\n  const [exchangeSize, setExchangeSize] = React.useState('Medium (M)')\n  const [isDownloaded, setIsDownloaded] = React.useState(false)\n\n  React.useEffect(() => {\n    setStep(initialStep)\n  }, [initialStep])\n\n  const selectedItemsCount = orderItems.reduce((acc, item) => {\n    if (selectedItems[item.id]) {\n      return acc + (returnQuantities[item.id] || 1)\n    }\n    return acc\n  }, 0)\n\n  const itemsSubtotal = orderItems.reduce((acc, item) => {\n    if (selectedItems[item.id]) {\n      return acc + item.price * (returnQuantities[item.id] || 1)\n    }\n    return acc\n  }, 0)\n\n  const storeCreditBonus = itemsSubtotal * 0.1\n  const totalStoreCredit = itemsSubtotal + storeCreditBonus\n\n  function formatCurrency(val: number) {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n    }).format(val)\n  }\n\n  function onStepperInput(value: number) {\n    if (value < step && step !== 4) {\n      setStep(value)\n    }\n  }\n\n  function goToNext() {\n    if (step < 4) {\n      setStep(step + 1)\n    }\n  }\n\n  function goToPrevious() {\n    if (step > 1 && step < 4) {\n      setStep(step - 1)\n    }\n  }\n\n  function toggleItemSelection(id: string) {\n    setSelectedItems((prev) => ({\n      ...prev,\n      [id]: !prev[id],\n    }))\n  }\n\n  function reset() {\n    setStep(1)\n    setIsDownloaded(false)\n    setSelectedItems({\n      'item-1': true,\n      'item-2': false,\n      'item-3': false,\n    })\n    setReturnQuantities({\n      'item-1': 1,\n      'item-2': 1,\n      'item-3': 1,\n    })\n    setReturnReasons({\n      'item-1': 'Wrong size',\n      'item-2': 'Changed mind',\n      'item-3': 'Item defective',\n    })\n    setResolution('store-credit')\n    setExchangeSize('Medium (M)')\n  }\n\n  return (\n    <Card data-slot=\"returns-portal\" className={cn('border-border mx-auto w-full max-w-3xl shadow-xs', className)}>\n      <CardHeader className=\"pb-4\">\n        <div className=\"flex items-center justify-between gap-4\">\n          <div>\n            <CardTitle className=\"text-base font-semibold\">Returns & Exchange Portal</CardTitle>\n            <CardDescription className=\"text-xs\">\n              Self-serve return, exchange, or refund for your recent order.\n            </CardDescription>\n          </div>\n          <Badge variant=\"outline\" className=\"shrink-0 text-xs\">\n            <Truck className=\"text-muted-foreground mr-1 size-3\" />\n            Prepaid Shipping\n          </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"space-y-6\">\n        <Stepper steps={steps} value={step} onValueChange={onStepperInput} className=\"mb-6\" />\n\n        {/* Step 1: Find Order */}\n        {step === 1 && (\n          <div className=\"space-y-5\">\n            <div className=\"space-y-1\">\n              <h3 className=\"text-foreground text-sm font-semibold\">Find your order</h3>\n              <p className=\"text-muted-foreground text-xs\">\n                Enter your order number and email address to start a return or exchange.\n              </p>\n            </div>\n\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <div className=\"space-y-1.5\">\n                <label htmlFor=\"returns-order-number\" className=\"text-foreground text-xs font-medium\">\n                  Order number\n                </label>\n                <Input\n                  id=\"returns-order-number\"\n                  value={orderNumber}\n                  onChange={(e) => setOrderNumber(e.target.value)}\n                  placeholder=\"#ORD-84920\"\n                  autoComplete=\"off\"\n                />\n                <p className=\"text-muted-foreground text-xs\">Found on your order confirmation email.</p>\n              </div>\n\n              <div className=\"space-y-1.5\">\n                <label htmlFor=\"returns-email\" className=\"text-foreground text-xs font-medium\">\n                  Email address\n                </label>\n                <Input\n                  id=\"returns-email\"\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  type=\"email\"\n                  placeholder=\"sarah.connor@example.com\"\n                  autoComplete=\"email\"\n                />\n                <p className=\"text-muted-foreground text-xs\">The email address used at checkout.</p>\n              </div>\n            </div>\n\n            <div className=\"border-border bg-muted/40 flex items-start gap-3 rounded-lg border p-3.5\">\n              <ShieldCheck className=\"text-primary mt-0.5 size-4 shrink-0\" />\n              <div className=\"space-y-0.5 text-xs\">\n                <p className=\"text-foreground font-medium\">30-Day Hassle-Free Return Policy</p>\n                <p className=\"text-muted-foreground\">\n                  Eligible items can be returned within 30 days of delivery. Free shipping on all exchanges and store\n                  credit requests.\n                </p>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Step 2: Select Items */}\n        {step === 2 && (\n          <div className=\"space-y-5\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"min-w-[12rem]\">\n                <h3 className=\"text-foreground text-sm font-semibold\">Select items to return</h3>\n                <p className=\"text-muted-foreground text-xs\">\n                  Order {orderNumber || '#ORD-84920'} • Placed Oct 14, 2026 • 3 items eligible\n                </p>\n              </div>\n              <Badge variant=\"secondary\" className=\"text-xs\">\n                {selectedItemsCount} of 3 selected\n              </Badge>\n            </div>\n\n            <div className=\"space-y-3\">\n              {orderItems.map((item) => (\n                <div\n                  key={item.id}\n                  className={cn(\n                    'rounded-lg border p-4 transition-colors',\n                    selectedItems[item.id]\n                      ? 'border-primary/50 bg-primary/[0.02] dark:bg-primary/10 shadow-xs'\n                      : 'border-border bg-card hover:bg-muted/20',\n                  )}\n                >\n                  <div className=\"flex items-start gap-3.5\">\n                    <div className=\"pt-0.5\">\n                      <Checkbox\n                        id={`check-${item.id}`}\n                        checked={selectedItems[item.id]}\n                        onCheckedChange={() => toggleItemSelection(item.id)}\n                      />\n                    </div>\n\n                    <div className=\"border-border bg-muted/60 text-muted-foreground flex size-12 shrink-0 items-center justify-center rounded-md border\">\n                      <Shirt className=\"size-6\" />\n                    </div>\n\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div>\n                          <label\n                            htmlFor={`check-${item.id}`}\n                            className=\"text-foreground cursor-pointer text-sm font-medium select-none\"\n                          >\n                            {item.name}\n                          </label>\n                          <p className=\"text-muted-foreground text-xs\">\n                            {item.variant} • SKU: {item.sku}\n                          </p>\n                        </div>\n                        <span className=\"text-foreground shrink-0 text-sm font-semibold\">\n                          {formatCurrency(item.price)}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n\n                  {selectedItems[item.id] && (\n                    <div className=\"border-border/60 mt-3.5 grid grid-cols-1 gap-3 border-t pt-3.5 sm:grid-cols-2\">\n                      <div className=\"space-y-1.5\">\n                        <label className=\"text-foreground text-xs font-medium\">Qty to return</label>\n                        <Select\n                          value={String(returnQuantities[item.id] || 1)}\n                          onValueChange={(val) => setReturnQuantities((prev) => ({ ...prev, [item.id]: Number(val) }))}\n                        >\n                          <SelectTrigger className=\"h-8 w-full text-xs\">\n                            <SelectValue placeholder=\"Qty\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            {Array.from({ length: item.maxQty }, (_, idx) => idx + 1).map((q) => (\n                              <SelectItem key={q} value={String(q)}>\n                                {q} {q === 1 ? 'item' : 'items'} (of {item.maxQty})\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </div>\n\n                      <div className=\"space-y-1.5\">\n                        <label className=\"text-foreground text-xs font-medium\">Return reason</label>\n                        <Select\n                          value={returnReasons[item.id]}\n                          onValueChange={(val) => setReturnReasons((prev) => ({ ...prev, [item.id]: val }))}\n                        >\n                          <SelectTrigger className=\"h-8 w-full text-xs\">\n                            <SelectValue placeholder=\"Select reason\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            {returnReasonsList.map((reason) => (\n                              <SelectItem key={reason} value={reason}>\n                                {reason}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n\n            <div className=\"border-border bg-muted/40 flex items-center justify-between rounded-lg border p-3 text-xs\">\n              <span className=\"text-muted-foreground\">\n                {selectedItemsCount > 0 ? (\n                  <>\n                    <span className=\"text-foreground font-medium\">{selectedItemsCount}</span> item\n                    {selectedItemsCount === 1 ? '' : 's'} selected\n                  </>\n                ) : (\n                  'No items selected yet'\n                )}\n              </span>\n              <span className=\"text-foreground font-medium\">Estimated Value: {formatCurrency(itemsSubtotal)}</span>\n            </div>\n          </div>\n        )}\n\n        {/* Step 3: Choose Resolution */}\n        {step === 3 && (\n          <div className=\"space-y-5\">\n            <div className=\"space-y-1\">\n              <h3 className=\"text-foreground text-sm font-semibold\">Choose return resolution</h3>\n              <p className=\"text-muted-foreground text-xs\">Select how you would like your return or refund handled.</p>\n            </div>\n\n            <RadioGroup\n              value={resolution}\n              onValueChange={(val) => setResolution(val as typeof resolution)}\n              className=\"gap-3\"\n            >\n              {/* Option A: Exchange */}\n              <div\n                className={cn(\n                  'flex cursor-pointer flex-col gap-3 rounded-lg border p-4 transition-colors',\n                  resolution === 'exchange'\n                    ? 'border-primary bg-primary/[0.02] dark:bg-primary/10 shadow-xs'\n                    : 'border-border hover:bg-muted/40',\n                )}\n                onClick={() => setResolution('exchange')}\n              >\n                <div className=\"flex items-start gap-3\">\n                  <RadioGroupItem id=\"res-exchange\" value=\"exchange\" className=\"mt-0.5\" />\n                  <div className=\"flex-1 space-y-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <RefreshCw className=\"text-primary size-4\" />\n                      <label htmlFor=\"res-exchange\" className=\"text-foreground cursor-pointer text-sm font-medium\">\n                        Exchange for different size / color\n                      </label>\n                      <Badge variant=\"outline\" className=\"text-xs\">\n                        Free shipping\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Reserve replacement item immediately. Ships as soon as carrier scans the return package.\n                    </p>\n                  </div>\n                </div>\n\n                {resolution === 'exchange' && (\n                  <div\n                    className=\"border-border/60 mt-1 space-y-1.5 border-t pt-3 pl-7\"\n                    onClick={(e) => e.stopPropagation()}\n                  >\n                    <label className=\"text-foreground text-xs font-medium\">Select replacement size</label>\n                    <Select value={exchangeSize} onValueChange={setExchangeSize}>\n                      <SelectTrigger className=\"h-8 w-full max-w-xs text-xs\">\n                        <SelectValue placeholder=\"Select replacement size\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        {exchangeSizesList.map((size) => (\n                          <SelectItem key={size} value={size}>\n                            {size}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n                  </div>\n                )}\n              </div>\n\n              {/* Option B: Store Credit (+10% Bonus) */}\n              <div\n                className={cn(\n                  'flex cursor-pointer flex-col gap-3 rounded-lg border p-4 transition-colors',\n                  resolution === 'store-credit'\n                    ? 'border-primary bg-primary/[0.02] dark:bg-primary/10 shadow-xs'\n                    : 'border-border hover:bg-muted/40',\n                )}\n                onClick={() => setResolution('store-credit')}\n              >\n                <div className=\"flex items-start gap-3\">\n                  <RadioGroupItem id=\"res-store-credit\" value=\"store-credit\" className=\"mt-0.5\" />\n                  <div className=\"flex-1 space-y-1\">\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <Gift className=\"text-success size-4\" />\n                      <label htmlFor=\"res-store-credit\" className=\"text-foreground cursor-pointer text-sm font-medium\">\n                        Store Credit (+10% Bonus value)\n                      </label>\n                      <Badge variant=\"success\" className=\"text-xs\">\n                        +10% Bonus\n                      </Badge>\n                      <Badge variant=\"secondary\" className=\"text-xs\">\n                        Fastest refund\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Get <span className=\"text-foreground font-medium\">{formatCurrency(totalStoreCredit)}</span> in\n                      store credit ({formatCurrency(itemsSubtotal)} + {formatCurrency(storeCreditBonus)} bonus). Digital\n                      card delivered by email instantly upon drop-off scan.\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Option C: Original Payment Method */}\n              <div\n                className={cn(\n                  'flex cursor-pointer flex-col gap-3 rounded-lg border p-4 transition-colors',\n                  resolution === 'original-payment'\n                    ? 'border-primary bg-primary/[0.02] dark:bg-primary/10 shadow-xs'\n                    : 'border-border hover:bg-muted/40',\n                )}\n                onClick={() => setResolution('original-payment')}\n              >\n                <div className=\"flex items-start gap-3\">\n                  <RadioGroupItem id=\"res-original\" value=\"original-payment\" className=\"mt-0.5\" />\n                  <div className=\"flex-1 space-y-1\">\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <CreditCard className=\"text-muted-foreground size-4\" />\n                      <label htmlFor=\"res-original\" className=\"text-foreground cursor-pointer text-sm font-medium\">\n                        Original Payment Method\n                      </label>\n                      <Badge variant=\"outline\" className=\"text-xs\">\n                        Visa •••• 4242\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Refund of {formatCurrency(itemsSubtotal)} back to your card. Processed in 3–5 business days after\n                      carrier drop-off.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </RadioGroup>\n\n            {/* Summary calculation box */}\n            <div className=\"border-border bg-muted/40 space-y-2 rounded-lg border p-4 text-xs\">\n              <div className=\"text-muted-foreground flex items-center justify-between\">\n                <span>Selected items subtotal</span>\n                <span className=\"text-foreground font-medium\">{formatCurrency(itemsSubtotal)}</span>\n              </div>\n              {resolution === 'store-credit' && (\n                <div className=\"text-success flex items-center justify-between\">\n                  <span>Bonus store credit (+10%)</span>\n                  <span className=\"font-medium\">+{formatCurrency(storeCreditBonus)}</span>\n                </div>\n              )}\n              <div className=\"text-muted-foreground flex items-center justify-between\">\n                <span>Prepaid return shipping</span>\n                <span className=\"text-success font-medium\">FREE</span>\n              </div>\n              <div className=\"border-border text-foreground flex items-center justify-between border-t pt-2 text-sm font-semibold\">\n                <span>\n                  {resolution === 'store-credit'\n                    ? 'Total Store Credit'\n                    : resolution === 'exchange'\n                      ? 'Exchange Value'\n                      : 'Total Refund'}\n                </span>\n                <span className={resolution === 'store-credit' ? 'text-success' : ''}>\n                  {resolution === 'store-credit' ? formatCurrency(totalStoreCredit) : formatCurrency(itemsSubtotal)}\n                </span>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Step 4: Confirmation & Label */}\n        {step === 4 && (\n          <div className=\"space-y-6\">\n            <div className=\"space-y-2 py-2 text-center\">\n              <div className=\"border-success/20 bg-success/10 text-success relative mx-auto flex size-12 items-center justify-center rounded-full border\">\n                <CheckCircle2 className=\"size-6\" />\n              </div>\n              <h3 className=\"text-foreground text-base font-semibold\">Return Authorized & Confirmed</h3>\n              <p className=\"text-muted-foreground mx-auto max-w-md text-xs\">\n                Your return request has been submitted. A prepaid shipping label and confirmation receipt have been sent\n                to <span className=\"text-foreground font-medium\">{email || 'sarah.connor@example.com'}</span>.\n              </p>\n            </div>\n\n            {/* Return Details Overview */}\n            <div className=\"border-border bg-muted/20 space-y-3 rounded-lg border p-4\">\n              <div className=\"border-border flex flex-wrap items-center justify-between gap-2 border-b pb-3\">\n                <div className=\"space-y-0.5\">\n                  <span className=\"text-muted-foreground text-xs\">Return ID</span>\n                  <p className=\"text-foreground font-mono text-sm font-semibold\">#RET-2026-849</p>\n                </div>\n                <Badge variant=\"success\" className=\"gap-1 text-xs\">\n                  <Check className=\"size-3\" /> Authorized\n                </Badge>\n              </div>\n\n              <div className=\"grid grid-cols-1 gap-3 text-xs sm:grid-cols-3\">\n                <div className=\"space-y-0.5\">\n                  <span className=\"text-muted-foreground\">Carrier</span>\n                  <p className=\"text-foreground font-medium\">USPS Ground Advantage™</p>\n                </div>\n                <div className=\"space-y-0.5\">\n                  <span className=\"text-muted-foreground\">Tracking Number</span>\n                  <p className=\"text-foreground font-mono font-medium\">9400 1118 9956 2849</p>\n                </div>\n                <div className=\"space-y-0.5\">\n                  <span className=\"text-muted-foreground\">Selected Resolution</span>\n                  <p className=\"text-foreground font-medium\">\n                    {resolution === 'store-credit'\n                      ? `Store Credit (${formatCurrency(totalStoreCredit)})`\n                      : resolution === 'exchange'\n                        ? `Exchange (${exchangeSize})`\n                        : `Refund to Visa •••• 4242`}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Action Download Buttons */}\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              <Button\n                aria-label=\"Download attachment\"\n                className=\"flex-1 gap-2\"\n                size=\"default\"\n                onClick={() => setIsDownloaded(true)}\n              >\n                <Download className=\"size-4\" />\n                {isDownloaded ? 'Label Downloaded (PDF)' : 'Download Prepaid Shipping Label (PDF)'}\n              </Button>\n              <Button variant=\"outline\" className=\"gap-2\" size=\"default\">\n                <Printer className=\"size-4\" />\n                Print Return Slip\n              </Button>\n            </div>\n\n            {/* Drop-off instructions & QR code card */}\n            <div className=\"border-border bg-card space-y-4 rounded-lg border p-4\">\n              <div className=\"flex items-center justify-between\">\n                <h4 className=\"text-foreground text-xs font-semibold tracking-wide uppercase\">\n                  Carrier Drop-off Pass & Instructions\n                </h4>\n                <Badge variant=\"outline\" className=\"text-xs\">\n                  No printer required\n                </Badge>\n              </div>\n\n              <div className=\"grid grid-cols-1 items-center gap-4 sm:grid-cols-3\">\n                <div className=\"space-y-3 text-xs sm:col-span-2\">\n                  <div className=\"flex items-start gap-2.5\">\n                    <div className=\"bg-muted text-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                      1\n                    </div>\n                    <div className=\"space-y-0.5\">\n                      <p className=\"text-foreground font-medium\">Pack your items</p>\n                      <p className=\"text-muted-foreground\">\n                        Place returned items with tags inside the original shipping bag or any sturdy box.\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-start gap-2.5\">\n                    <div className=\"bg-muted text-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                      2\n                    </div>\n                    <div className=\"space-y-0.5\">\n                      <p className=\"text-foreground font-medium\">Attach label or show QR code</p>\n                      <p className=\"text-muted-foreground\">\n                        Tape the downloaded shipping label to the box, or present the digital QR pass at the drop-off\n                        counter.\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-start gap-2.5\">\n                    <div className=\"bg-muted text-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                      3\n                    </div>\n                    <div className=\"space-y-0.5\">\n                      <p className=\"text-foreground font-medium\">Drop off before Nov 15, 2026</p>\n                      <p className=\"text-muted-foreground\">\n                        Bring to any USPS Post Office, USPS drop box, or authorized FedEx shipping point.\n                      </p>\n                    </div>\n                  </div>\n                </div>\n\n                {/* QR code visual */}\n                <div className=\"border-border bg-muted/40 flex flex-col items-center justify-center space-y-2 rounded-lg border p-3 text-center sm:col-span-1\">\n                  <svg\n                    className=\"text-foreground size-24\"\n                    viewBox=\"0 0 100 100\"\n                    fill=\"currentColor\"\n                    aria-label=\"Prepaid return shipping QR dropoff code\"\n                  >\n                    {/* Top-left finder */}\n                    <rect\n                      x=\"10\"\n                      y=\"10\"\n                      width=\"24\"\n                      height=\"24\"\n                      rx=\"2\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"4\"\n                    />\n                    <rect x=\"17\" y=\"17\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\" />\n                    {/* Top-right finder */}\n                    <rect\n                      x=\"66\"\n                      y=\"10\"\n                      width=\"24\"\n                      height=\"24\"\n                      rx=\"2\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"4\"\n                    />\n                    <rect x=\"73\" y=\"17\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\" />\n                    {/* Bottom-left finder */}\n                    <rect\n                      x=\"10\"\n                      y=\"66\"\n                      width=\"24\"\n                      height=\"24\"\n                      rx=\"2\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"4\"\n                    />\n                    <rect x=\"17\" y=\"73\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\" />\n                    {/* Data dots */}\n                    <rect x=\"42\" y=\"12\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"52\" y=\"12\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"42\" y=\"24\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"52\" y=\"24\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"12\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"24\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"36\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"48\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"60\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"72\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"84\" y=\"42\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"42\" y=\"54\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"54\" y=\"54\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"66\" y=\"54\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"78\" y=\"54\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"42\" y=\"66\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"54\" y=\"66\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"66\" y=\"78\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"78\" y=\"66\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"42\" y=\"78\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"54\" y=\"78\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                    <rect x=\"84\" y=\"78\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n                  </svg>\n                  <span className=\"text-foreground font-mono text-xs font-semibold\">RET-2026-849</span>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"pt-2 text-center\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-muted-foreground hover:text-foreground text-xs\"\n                onClick={reset}\n              >\n                Start another return\n              </Button>\n            </div>\n          </div>\n        )}\n      </CardContent>\n\n      {step < 4 && (\n        <CardFooter className=\"border-border flex flex-wrap items-center justify-between gap-2 border-t pt-2\">\n          {step > 1 ? (\n            <Button variant=\"ghost\" size=\"sm\" onClick={goToPrevious}>\n              <ChevronLeft className=\"mr-1 size-4\" />\n              Back\n            </Button>\n          ) : (\n            <div />\n          )}\n\n          <span className=\"text-muted-foreground text-xs\">Step {step} of 4</span>\n\n          {step === 1 && (\n            <Button size=\"sm\" disabled={!orderNumber.trim() || !email.trim()} onClick={goToNext}>\n              Find Order\n              <ChevronRight className=\"ml-1 size-4\" />\n            </Button>\n          )}\n\n          {step === 2 && (\n            <Button size=\"sm\" disabled={selectedItemsCount === 0} onClick={goToNext}>\n              Choose Resolution\n              <ChevronRight className=\"ml-1 size-4\" />\n            </Button>\n          )}\n\n          {step === 3 && (\n            <Button size=\"sm\" onClick={goToNext}>\n              Confirm & Print Label\n              <Check className=\"ml-1 size-4\" />\n            </Button>\n          )}\n        </CardFooter>\n      )}\n    </Card>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ReturnsPortal.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/checkbox.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/radio-group.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/stepper.json"
  ],
  "description": "Self-serve e-commerce returns & exchange portal wizard: Stepper header (Find Order → Select Items → Choose Resolution → Confirm & Print Label), order lookup with email and order number, item selection list with return reasons and quantities, resolution selector (size exchange, store credit with +10% bonus, or original payment refund), and confirmation screen with printable prepaid shipping label, QR code drop-off instructions, and return summary.",
  "categories": [
    "commerce",
    "ecommerce",
    "app"
  ]
}