{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flight-status-card",
  "type": "registry:ui",
  "title": "Flight Status Card",
  "description": "A detailed flight status widget with dot-matrix airport codes, progress tracking, and ETA information.",
  "dependencies": ["framer-motion"],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/flight-status-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { motion } from \"framer-motion\"\n\nconst DOT_MATRIX: Record<string, number[][]> = {\n  Y: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0]],\n  Z: [[1,1,1,1,1],[0,0,0,1,0],[0,0,1,0,0],[0,1,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,1]],\n  H: [[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1]],\n  N: [[1,0,0,0,1],[1,1,0,0,1],[1,0,1,0,1],[1,0,0,1,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1]],\n  D: [[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0]],\n  A: [[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1],[1,1,1,1,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1]],\n  B: [[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0]],\n  C: [[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,1],[0,1,1,1,0]],\n  E: [[1,1,1,1,1],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,1]],\n  F: [[1,1,1,1,1],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0]],\n  G: [[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,0],[1,0,1,1,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],\n  I: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[1,1,1,1,1]],\n  J: [[0,0,1,1,1],[0,0,0,1,0],[0,0,0,1,0],[0,0,0,1,0],[1,0,0,1,0],[1,0,0,1,0],[0,1,1,0,0]],\n  K: [[1,0,0,0,1],[1,0,0,1,0],[1,0,1,0,0],[1,1,0,0,0],[1,0,1,0,0],[1,0,0,1,0],[1,0,0,0,1]],\n  L: [[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,1]],\n  M: [[1,0,0,0,1],[1,1,0,1,1],[1,0,1,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1]],\n  O: [[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],\n  P: [[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0]],\n  Q: [[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,1,0,1],[1,0,0,1,0],[0,1,1,0,1]],\n  R: [[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0],[1,0,1,0,0],[1,0,0,1,0],[1,0,0,0,1]],\n  S: [[0,1,1,1,1],[1,0,0,0,0],[1,0,0,0,0],[0,1,1,1,0],[0,0,0,0,1],[0,0,0,0,1],[1,1,1,1,0]],\n  T: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0]],\n  U: [[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],\n  V: [[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,0,1,0],[0,1,0,1,0],[0,0,1,0,0]],\n  W: [[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,1,0,1],[1,0,1,0,1],[1,1,0,1,1],[1,0,0,0,1]],\n  X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]]\n}\n\ninterface DotMatrixCharProps {\n  char: string\n  dotSize?: number\n  gap?: number\n  activeColor?: string\n  inactiveColor?: string\n  className?: string\n  delay?: number\n}\n\nfunction DotMatrixChar({\n  char,\n  dotSize = 4,\n  gap = 2,\n  activeColor = \"#b4f54e\",\n  inactiveColor = \"rgba(180, 245, 78, 0.1)\",\n  className,\n  delay = 0,\n}: DotMatrixCharProps) {\n  const matrix = DOT_MATRIX[char.toUpperCase()] ?? DOT_MATRIX[\"A\"]!\n  const width = 5 * dotSize + 4 * gap\n  const height = 7 * dotSize + 6 * gap\n\n  return (\n    <motion.svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      className={className}\n      initial=\"hidden\"\n      animate=\"visible\"\n    >\n      {matrix!.map((row, rowIndex) =>\n        row.map((cell, colIndex) => (\n          <motion.rect\n            key={`${rowIndex}-${colIndex}`}\n            x={colIndex * (dotSize + gap)}\n            y={rowIndex * (dotSize + gap)}\n            width={dotSize}\n            height={dotSize}\n            rx={dotSize / 2}\n            ry={dotSize / 2}\n            fill={cell ? activeColor : inactiveColor}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{\n              delay: delay + colIndex * 0.05 + rowIndex * 0.05,\n              duration: 0.2,\n            }}\n            style={cell ? { filter: \"drop-shadow(0 0 3px rgba(180, 245, 78, 0.6))\" } : {}}\n          />\n        ))\n      )}\n    </motion.svg>\n  )\n}\n\ninterface DotMatrixTextProps {\n  text: string\n  dotSize?: number\n  gap?: number\n  charGap?: number\n  activeColor?: string\n  inactiveColor?: string\n  className?: string\n}\n\nfunction DotMatrixText({\n  text,\n  dotSize = 4,\n  gap = 2,\n  charGap = 8,\n  activeColor = \"#b4f54e\",\n  inactiveColor = \"rgba(180, 245, 78, 0.1)\",\n  className,\n}: DotMatrixTextProps) {\n  return (\n    <div className={cn(\"flex items-center\", className)} style={{ gap: charGap }}>\n      {text.split(\"\").map((char, index) => (\n        <DotMatrixChar\n          key={index}\n          char={char}\n          dotSize={dotSize}\n          gap={gap}\n          activeColor={activeColor}\n          inactiveColor={inactiveColor}\n          delay={index * 0.1}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction HalftonePattern({ className }: { className?: string }) {\n  return (\n    <motion.svg\n      className={cn(\"absolute inset-0 pointer-events-none\", className)}\n      width=\"100%\"\n      height=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      animate={{ backgroundPosition: [\"0% 0%\", \"100% 100%\"] }}\n      transition={{ duration: 20, repeat: Infinity, ease: \"linear\" }}\n    >\n      <defs>\n        <pattern id=\"halftone\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" patternUnits=\"userSpaceOnUse\">\n          <motion.circle\n            cx=\"2\"\n            cy=\"2\"\n            r=\"1.2\"\n            fill=\"rgba(180, 245, 78, 0.15)\"\n            animate={{ opacity: [0.3, 0.6, 0.3] }}\n            transition={{ duration: 4, repeat: Infinity, ease: \"easeInOut\" }}\n          />\n        </pattern>\n        <linearGradient id=\"halftone-fade\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0.8\" />\n          <stop offset=\"50%\" stopColor=\"white\" stopOpacity=\"0.3\" />\n          <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"halftone-mask\">\n          <rect width=\"100%\" height=\"100%\" fill=\"url(#halftone-fade)\" />\n        </mask>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#halftone)\" mask=\"url(#halftone-mask)\" />\n    </motion.svg>\n  )\n}\n\nfunction PlaneIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z\" />\n    </svg>\n  )\n}\n\nfunction SwapIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M7 16V4m0 0L3 8m4-4l4 4\" />\n      <path d=\"M17 8v12m0 0l4-4m-4 4l-4-4\" />\n    </svg>\n  )\n}\n\ninterface FlightStatusCardProps {\n  departureCode?: string\n  arrivalCode?: string\n  departureCity?: string\n  arrivalCity?: string\n  departureTime?: string\n  arrivalTime?: string\n  eta?: string\n  timezone?: string\n  nextEvent?: string\n  nextEventTime?: string\n  progress?: number\n  remainingTime?: string\n  className?: string\n}\n\nfunction FlightStatusCard({\n  departureCode = \"YYZ\",\n  arrivalCode = \"HND\",\n  departureCity = \"Toronto\",\n  arrivalCity = \"Tokyo\",\n  departureTime = \"MON, 6:14 PM\",\n  arrivalTime = \"TUE, 7:14 AM\",\n  eta = \"ETA 2:15 PM\",\n  timezone = \"Tokyo Time\",\n  nextEvent = \"DINNER IN\",\n  nextEventTime = \"2:34H\",\n  progress = 45,\n  remainingTime = \"-7H 01M\",\n  className,\n}: FlightStatusCardProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.6, ease: \"easeOut\" }}\n      className={cn(\n        \"relative w-full max-w-[480px] rounded-[28px] p-6 overflow-hidden\",\n        \"bg-[#1a1a1a] dark:bg-[#1a1a1a]\",\n        \"shadow-[0_20px_60px_-10px_rgba(0,0,0,0.5),0_10px_30px_-5px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.05)]\",\n        className\n      )}\n      style={{ background: \"linear-gradient(145deg, #1e1e1e 0%, #1a1a1a 50%, #161616 100%)\" }}\n    >\n      <HalftonePattern className=\"opacity-60\" />\n      <div className=\"relative z-10\">\n        <div className=\"flex items-start justify-between mb-6\">\n          <div className=\"flex items-center gap-4\">\n            <div className=\"flex flex-col items-start\">\n              <DotMatrixText text={departureCode} dotSize={5} gap={2} charGap={6} />\n              <motion.span initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.3 }} className=\"text-[#8a8a8a] text-sm mt-2 font-medium\">{departureCity}</motion.span>\n              <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} className=\"text-[#6a6a6a] text-xs mt-0.5 uppercase tracking-wide\">{departureTime}</motion.span>\n            </div>\n            <div className=\"flex items-center px-2 mt-1\">\n              <motion.svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" className=\"text-orange-500\" initial={{ scaleX: 0, opacity: 0 }} animate={{ scaleX: 1, opacity: 1 }} transition={{ delay: 0.4, type: \"spring\" }}>\n                <path d=\"M5 12h14m0 0l-4-4m4 4l-4 4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </motion.svg>\n            </div>\n            <div className=\"flex flex-col items-start\">\n              <DotMatrixText text={arrivalCode} dotSize={5} gap={2} charGap={6} />\n              <motion.span initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.3 }} className=\"text-[#8a8a8a] text-sm mt-2 font-medium\">{arrivalCity}</motion.span>\n              <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} className=\"text-[#6a6a6a] text-xs mt-0.5 uppercase tracking-wide\">{arrivalTime}</motion.span>\n            </div>\n          </div>\n          <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6 }} className=\"flex flex-col bg-[#252525] rounded-xl p-3 min-w-[130px] border border-[#333]\">\n            <div className=\"flex items-center justify-between mb-1\">\n              <span className=\"text-white text-sm font-semibold\">{eta}</span>\n              <button className=\"p-1 hover:bg-[#333] rounded-full transition-colors\">\n                <SwapIcon className=\"w-4 h-4 text-[#8a8a8a]\" />\n              </button>\n            </div>\n            <span className=\"text-[#6a6a6a] text-xs\">{timezone}</span>\n            <span className=\"text-orange-500 text-xs font-bold mt-1 tracking-wide\">{nextEvent} {nextEventTime}</span>\n          </motion.div>\n        </div>\n        <div className=\"relative mt-4\">\n          <div className=\"relative h-12 bg-[#252525] rounded-full overflow-hidden border border-[#333]\">\n            <motion.div\n              className=\"absolute inset-y-0 left-0 rounded-full flex items-center justify-end pr-2\"\n              initial={{ width: \"0%\" }}\n              animate={{ width: `${Math.max(progress, 15)}%` }}\n              transition={{ duration: 1.5, ease: \"circOut\", delay: 0.5 }}\n              style={{\n                background: \"linear-gradient(90deg, #7cb518 0%, #a4de02 50%, #b4f54e 100%)\",\n                boxShadow: \"0 0 20px rgba(180, 245, 78, 0.6), 0 0 40px rgba(180, 245, 78, 0.3), inset 0 2px 4px rgba(255,255,255,0.2)\",\n              }}\n            >\n              <motion.div\n                className=\"relative flex items-center justify-center w-8 h-8 rounded-full\"\n                animate={{ y: [0, -2, 0] }}\n                transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n                style={{ background: \"rgba(255,255,255,0.2)\" }}\n              >\n                <PlaneIcon className=\"w-5 h-5 text-white transform rotate-45\" />\n              </motion.div>\n            </motion.div>\n            <motion.div\n              className=\"absolute inset-y-0 left-0 rounded-full pointer-events-none\"\n              initial={{ width: \"0%\" }}\n              animate={{ width: `${Math.max(progress, 15)}%` }}\n              transition={{ duration: 1.5, ease: \"circOut\", delay: 0.5 }}\n              style={{\n                background: \"radial-gradient(ellipse at right, rgba(180, 245, 78, 0.4) 0%, transparent 70%)\",\n                filter: \"blur(8px)\",\n              }}\n            />\n          </div>\n          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2 }} className=\"absolute right-4 top-1/2 -translate-y-1/2 text-[#6a6a6a] text-sm font-mono font-medium\">{remainingTime}</motion.div>\n        </div>\n      </div>\n    </motion.div>\n  )\n}\n\nfunction FlightStatusCardLight({\n  departureCode = \"YYZ\",\n  arrivalCode = \"HND\",\n  departureCity = \"Toronto\",\n  arrivalCity = \"Tokyo\",\n  departureTime = \"MON, 6:14 PM\",\n  arrivalTime = \"TUE, 7:14 AM\",\n  eta = \"ETA 2:15 PM\",\n  timezone = \"Tokyo Time\",\n  nextEvent = \"DINNER IN\",\n  nextEventTime = \"2:34H\",\n  progress = 45,\n  remainingTime = \"-7H 01M\",\n  className,\n}: FlightStatusCardProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.6, ease: \"easeOut\" }}\n      className={cn(\n        \"relative w-full max-w-[480px] rounded-[28px] p-6 overflow-hidden\",\n        \"bg-[#f8f8f8]\",\n        \"shadow-[0_20px_60px_-10px_rgba(0,0,0,0.15),0_10px_30px_-5px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.8)]\",\n        className\n      )}\n      style={{ background: \"linear-gradient(145deg, #ffffff 0%, #f8f8f8 50%, #f0f0f0 100%)\" }}\n    >\n      <HalftoneLightPattern className=\"opacity-40\" />\n      <div className=\"relative z-10\">\n        <div className=\"flex items-start justify-between mb-6\">\n          <div className=\"flex items-center gap-4\">\n            <div className=\"flex flex-col items-start\">\n              <DotMatrixText text={departureCode} dotSize={5} gap={2} charGap={6} activeColor=\"#2d7a2d\" inactiveColor=\"rgba(45, 122, 45, 0.15)\" />\n              <motion.span initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.3 }} className=\"text-[#555] text-sm mt-2 font-medium\">{departureCity}</motion.span>\n              <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} className=\"text-[#888] text-xs mt-0.5 uppercase tracking-wide\">{departureTime}</motion.span>\n            </div>\n            <div className=\"flex items-center px-2 mt-1\">\n              <motion.svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" className=\"text-orange-600\" initial={{ scaleX: 0, opacity: 0 }} animate={{ scaleX: 1, opacity: 1 }} transition={{ delay: 0.4, type: \"spring\" }}>\n                <path d=\"M5 12h14m0 0l-4-4m4 4l-4 4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </motion.svg>\n            </div>\n            <div className=\"flex flex-col items-start\">\n              <DotMatrixText text={arrivalCode} dotSize={5} gap={2} charGap={6} activeColor=\"#2d7a2d\" inactiveColor=\"rgba(45, 122, 45, 0.15)\" />\n              <motion.span initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.3 }} className=\"text-[#555] text-sm mt-2 font-medium\">{arrivalCity}</motion.span>\n              <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} className=\"text-[#888] text-xs mt-0.5 uppercase tracking-wide\">{arrivalTime}</motion.span>\n            </div>\n          </div>\n          <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6 }} className=\"flex flex-col bg-white rounded-xl p-3 min-w-[130px] border border-[#e0e0e0] shadow-sm\">\n            <div className=\"flex items-center justify-between mb-1\">\n              <span className=\"text-[#222] text-sm font-semibold\">{eta}</span>\n              <button className=\"p-1 hover:bg-[#f0f0f0] rounded-full transition-colors\">\n                <SwapIcon className=\"w-4 h-4 text-[#666]\" />\n              </button>\n            </div>\n            <span className=\"text-[#888] text-xs\">{timezone}</span>\n            <span className=\"text-orange-600 text-xs font-bold mt-1 tracking-wide\">{nextEvent} {nextEventTime}</span>\n          </motion.div>\n        </div>\n        <div className=\"relative mt-4\">\n          <div className=\"relative h-12 bg-[#e8e8e8] rounded-full overflow-hidden border border-[#ddd]\">\n            <motion.div\n              className=\"absolute inset-y-0 left-0 rounded-full flex items-center justify-end pr-2\"\n              initial={{ width: \"0%\" }}\n              animate={{ width: `${Math.max(progress, 15)}%` }}\n              transition={{ duration: 1.5, ease: \"circOut\", delay: 0.5 }}\n              style={{\n                background: \"linear-gradient(90deg, #4a9c4a 0%, #5cb85c 50%, #7ed17e 100%)\",\n                boxShadow: \"0 0 15px rgba(92, 184, 92, 0.4), inset 0 2px 4px rgba(255,255,255,0.3)\",\n              }}\n            >\n              <motion.div\n                className=\"relative flex items-center justify-center w-8 h-8 rounded-full\"\n                animate={{ y: [0, -2, 0] }}\n                transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n                style={{ background: \"rgba(255,255,255,0.3)\" }}\n              >\n                <PlaneIcon className=\"w-5 h-5 text-white transform rotate-45\" />\n              </motion.div>\n            </motion.div>\n          </div>\n          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2 }} className=\"absolute right-4 top-1/2 -translate-y-1/2 text-[#666] text-sm font-mono font-medium\">{remainingTime}</motion.div>\n        </div>\n      </div>\n    </motion.div>\n  )\n}\n\nfunction HalftoneLightPattern({ className }: { className?: string }) {\n  return (\n    <svg className={cn(\"absolute inset-0 pointer-events-none\", className)} width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <pattern id=\"halftone-light\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" patternUnits=\"userSpaceOnUse\">\n          <circle cx=\"2\" cy=\"2\" r=\"1.2\" fill=\"rgba(45, 122, 45, 0.12)\" />\n        </pattern>\n        <linearGradient id=\"halftone-fade-light\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n          <stop offset=\"50%\" stopColor=\"white\" stopOpacity=\"0.5\" />\n          <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"halftone-mask-light\">\n          <rect width=\"100%\" height=\"100%\" fill=\"url(#halftone-fade-light)\" />\n        </mask>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#halftone-light)\" mask=\"url(#halftone-mask-light)\" />\n    </svg>\n  )\n}\n\nfunction FlightStatusCardAdaptive(props: FlightStatusCardProps) {\n  return (\n    <>\n      <div className=\"hidden dark:block\">\n        <FlightStatusCard {...props} />\n      </div>\n      <div className=\"block dark:hidden\">\n        <FlightStatusCardLight {...props} />\n      </div>\n    </>\n  )\n}\n\nexport { FlightStatusCard, FlightStatusCardLight, FlightStatusCardAdaptive, DotMatrixText, DotMatrixChar }\n"
    }
  ],
  "tailwind": {},
  "cssVars": {},
  "meta": {}
}