@limboai/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2147 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useDebugValue, useEffect, useId, useMemo, useRef, useState, useTransition } from "react";
+
+//#region src/icons/CRLogo.tsx
+const CR_LOGO_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAfD0lEQVR4nO2de5CedXXHP7zdbnfWdGcns42ZFGMmxjQGSkNMMaYBMxQRU4oMDUoxMjSCUoZ6wSlmrDrDMAxDGUYdpFQjMgxSSyE6iBQF0SLIRS5BkWsI94Ah3EJYQhKS7R/nXfNmeXf3vTzPOb/neb6fmTObkITf+f3e5/m+v8v5nbMPQuyhBvQBM4FBYA4wBPwZML3+3/qA2Q3/Zl6bbTzU8OvHgDeAV4DfA5uBF4CngOfrP98AdrfZhigp+0Q7IEIYAOYC84F3YwI0B9gXmBHoVzOeBZ4BHsUEbj3wQP3XLwX6JQKQYJWfucBCYD9gASZS+wK9kU5lwG5sVnYPJmDr6r9+JNIpkS8SrHIxACwGPoCJ02JgaqhH/ryECdevgZuA24FXQz0SmSHBKjYDwKHABzFxWoDtQ4m9+S1wC3ADcCu2PyYKiASrWPRiy7vDgL+r/7roSztvdgD3Aj8BrsNmYztCPRKiRPQDxwCXApuAEVmmtqk+tsfUx1oI0SajInUFsIX4l7oqth24FjgRC+EQQoxDD3tEaivxL2/VbWf9s1iBZl5C/IHFwIVY0GT0SyprbpuBNfXPSojKMQicCtxN/Msoa8/uA07HbgAIUWoOAC4Bhol/8WTd2XD9s1yEECWiBzgKC2KMfslk+dht2F6XQkxEYRkATgIeJ/6FkvnY48Dn6p+9EIVgCrAaxUxV2TZhz8B0hEiUKcAZ6LRPtse2AucD0xAiEQawb1MJlWw8GwbORUtFEUgvNqPS0k/Wqo0uFSVcwo0asBLYQPwLICumPQmsQpk1RM4swRLFRT/wsnLYOiw9kBCZMgO4HNhF/EMuK59dyd558oXoiNF9KmVMkOVt24CvouBT0SFLsHtj0Q+yrFp2H5agUYiWGAS+hZZ/sli7FOXkEpOwHNhI/MMqk41gz+Jx6DRRjGEqdvNesypZirYWRcsDKkIBcDhwMVarT+zN61gl5kex6sxPYSWzNtb//CH2rsr8CG+t0lzDaiM2/n60WvSfY0GUYytNK8PnW3kG+Gfgx9GORFJlwerB7nmdRrWn3LuxQqQPYML0YP3nU5hYeVeU6cVEbE7d3lP/Ob9uVf+svgN8AXgt2JcQqipY+2P5uudHO+LMDuAurLTVaKXke0M9ap8FWHmzA+s/FwJ9oR758wDwCezzEyVnFdWJq9qE7X+sBg6inEutXqxvp2N9rcrdzm1Ymm1RUgawvaroBy1PGwZuxARqEbbsrRo9WCrq1dhYlD0d9RXoMnXpmEN5g0C3AJdhKXoVt/NWBoEjsTEq6+xrPdXb3igtxwAvE/9QZWkvYqXBlqGrHO2yDBu7ssXbbQWOz26YhDc14MvEP0hZ2TZs+n8k1dtkzoMe9sy8thH/+WZlZ1Htk9RC0o9twEY/PFnYOuAUFDiYJwPYGN9B/OedhV1DOQ9YSsl0ip+zahi7S7YIfVt6swir8lz0zfr7URGM5DmAYu9NPI2dbmk2Fc9ULLVQkTPLbsbi1kSCLKe4hSDuxuLDtIGeHr1YSuy7iX9OOrFt2LshEmIlxdw4vRurCq1lX/rUsM+qiMK1E7uCJhLgNIqXZWEdEqqiMipcRdsn3YVtN4ggasA5xD8I7dgG7GEX5aCIwnUB+qJ0p4YNfPSH36ptAj6F9qjKSC+2//gk8c+ZRCtBiiRWw8DZ6K5XFRjAikgUJRziIhSA7EJRxOpq7A6jqBZzsLJd0c9fK3YtmvXnRlFmVk+ifSoBR2CXkqOfx1ZESzOtjCmCWO0CvoauRIg99APnAtuJfz4nsovQnlZmFEGs1gNL8xoAUXgWkv5pojbiMyL10AXNqkQr9AFnkvZs64Lcel8RTiP+QxzP1mPVoYVohyWkvbel4NIOWUm6EexXoOyeonP6STdd9y50jadtlpPm3cBhLEhQiCxYSZrZcHeiC9MtcwBpZl14ECsPJkSWzCXNDfltWDUiMQHTSTOf1VoUrS7yYwBL2Bj9nI+1zVhVbtGEftL7ptmJ1bsTwoPTsGcu+rlvtPvRKfhbqJFeDvYtWJECITw5HKuKFP38N9o1KEZrL84i/kNptCfRfpWIYzbphT6cl2uPC8QxxH8YjXYnyqku4hkEbib+fWi0ytc9nENax7pr0XpdpEMPaW2VbKXCRS0GSKt8/BqUakOkRw92gTr6/Ri19VT0xDylSN9zc+6rEN2SkmitxYS0MqwiftAlVqJonEI619VOzbmvybA/FjIQPeC7sAdAiCKxijREaxuWNqfU9GCBaNGDvQs4Kee+CpEXJ5GGaK0HpuTc11C+Qfwgj6CZlSg+qcy0Lsm7o1EcSRoDrD0rURZOIf592kUJaxhMBZ4mfnAlVqJspHB6uBlLXFAaLiF+UNfk3kshYkhBtNZSkvuGy4lfCq5FQaGivKQSEX9c3h3Nm0Hi81vdia7biPLTQ/zdw80U/B5udFKyJ1HudVEdBokPG/p+7r3MiWXELgW3oBQxonrMJj6fVuHyyPUSe7F5JwUcNCEy4hBiM5cW7oL0GcQqvNIai6oTXdPz7Py7mA0ziL0ruDb/LgpRCCIzomwD5uXfxe65krhBepCCTUWFyJHowi5X59/F7lhC3OAMo012IcYyl9isvkfk38XOqBGr5qrILERzVhL3Xj5IokHbkYNymUP/hCgyFxH3fn7KoX9t0Q9sIGYw1qPgUCEmo5+4oNJNJLa3vJo49V7i0D8hysBCYDsx7+lqh/61xACmoBGDoHQxQrTHmcS8q8MkkoLmS8QMwDqgz6F/QpSJPuIOx8536N+ETMOU07vju4CDHPonRBmJWhoOE5zN4fwmTnnY1zw6J0SJOYuKzbKmEHMF50mU30qIbukHHsb//d1K0F5W1Mlg6RLeCxHEoVRklhV1Mpj83SQhCkbE3d8tOMdlnZpDJyazYWCOR+eEqBAziTk4c4vL6gUed+jQWCtMfh0hCkbE9s5GnO4Yrgjo3HMkFtovRImIulp3okPfuCmgY8rEIES+RCQvWJd3pw4I6FSy6SmEKBFR6aFyvQt8SUCHFMYghA9H4P9+51YWbBD/04Tcp4xCiL24Ad93fCdWByJzIkIZNLsSwpeINOe5hDh41xm8G1tXCyF88Z5lbQB6suzAYucOaHYlRBwRs6zDs+zAhc7Oa3YlRCx34vvOX56V4/3AZmfnV2blvBCiI47G953fCkzNwnHvyPanUdyVENHUsAIvnu/+ia04NRnHttS97LgA2OHcphBib3bjnyiza60ZxOIkvBR2mIymhUKIrpmCb9XoncDQRA5NNsM6moyPGyfhv4CXHNsTQozPa8B3HdvrAY7v5n9wLb5r2EXdOCuEyJx5+GrAjRM5s88Ef9aPTQe9NsDvBd6LrZ3F3vQBs7GKI/tin807J/k3D2Nj+QDwfN20Nyg64UYsnbIHbwJvZ5yV1kTLvSPwPa37FhIrMEFaDByIlWOaj9216nZp/irwKCZgdwN3AfcAr3f5/xXl52L8BKsH24pquhSdaIZ1BfDRPDxqwhuYqr7q1F5KDGIPw4frP2c7tv06JlzXAT8GfufYdtUZwL6M5mBpit+JfTEN1v+8h4lTgv8n8JU8HWxgClatyutA7EfAR5r9wXiC1YvFQ3kVPfwe8AmntlKgH/sW+Th2JcHzYGM8dgMPYV9UV2EzsSLwJad2vk53s9GpwHLgYGApJkbdrGC+Dny+i3/fLmuAk5zaeg2bwLQ83t53B4/srn+FYQF2zWkrvuPbid0MnEAaYjoRXuMx4XH7OAwBpwG35eCPd4zUIRn63oq1dbfwTEfHNpL+S9Eth2OppXcRIz7d2NPA6diyIEW8xqEdwVqI7fvkmT/OW7B68M373lbtwjscHbuwHccKxmHAr/AXmTzsOWy2kNqXi1f/WxGseVjtTI8vJm/BAjinC3/btftoMQHCNGC7o2PLWhysIjEf28j2GkNPexC/E6NW8Or3RII1gAmI53sTIVgLuvC3E5vZilOet7Q3tTxUxWAKcC6+15mi7Er8DmUmwqu/4wnWUuwEzXv8IwQLfPt6wtjGm025PphVz1rgese28uYQbBp7Buktm/JgBdbfFdGOBFHDPutf0OJMoCT8yLGtg1v5S7/BT0HLcDrYi1WlrsKsajy7CAvViMCrj40zrH5iKkg1WtQM67A2fOzWHp/MmSFHZ4bZEyRXVIaw4//IBzcVuwOY3t1wdoRX/0YFqx+7qhI93lGC1QtsadHHLGyvijpjl4QLM+7cRNwOvOLYXtYswJZES6MdSYSDsPFYEO1IjvQD15DWoYM3O4CfO7a3rPE3YwXLc//qOse2suZwLFwhYkaRMkNYkOTyaEdyoIbvnbqU+aljW++b6A89y/vsn2m3/FhFMQNAPW0bfqLl1ac1jm21YlFLQrBrRV79vG0iR150cmITxTxJk1i1bl6iFd3PKIsULLANcY9+bqfhQKdxSTgXv9vYt2B5b4rEKuxbVuXHWqMP+CGWpkiUj1ud2unFArGBvV8+zw33CbMKJsgxSKw6oRe4DDgg2hGROTc4tvWHg5zGF/BARwfucmyrWw7BXjqJVWcMYSdrMyb7i6JQ3O7Y1ntHf9H4Es5v8hfz4A0sHXIRmIXlh4oKiiwLM7HKvkXctxTNeQRLu+1B0xmW15LwVoqRW7wPEyuFLmTDMuxGgCgHu7EU2x7Mo/5lNypYU/F7MYsyu7oQC4YU2XEGimMqE17v8iD1LYVRwZqH3x7NOqd2umEFLZTNFh2xBkvHIorPHY5tzYE9IjVRsvusSb3QwQzsMq822fNhNpaCRxQfz8Oz+bDnpdzPqdHdpL8k/Aad5e8WrXMSWm6XgWfwq3T1bthzauM1w0q9EstRpJ3f6Vlso/MBLJHaY03+zgB2KrcfdroyH9/6kq3Qg+0Rvg/Voiw6D2BFa/JmLuwRrH0dGoS0BauP+OsOzfg5lif8f7FCqO0yiF3W/hgWdZ5KiMYirO7lf0c7IrridzgLVg0/wbrfqZ1OOB3fIqYT8TpWKHMNViuwG14B/qduQ9hy7POkkd74XOAHFCPMxYMdNJ81NyOV9OJe7/R06iuFfvwubB7v0bMOmAq8TPyF1p1YeaO8xaQfi4nyLJownp3SZV+i/e/kM34Q+zI6DQvzmNvlGERyJH5jNx3snpdXg573FdvhPOIf5NvwT7lzABZmEtnvx+nuRDb6c2vFdmJ1KU+ifFeU5uM3jgvBt6JriqdvU4mtxLwLOIu4ayu9xOd66uagI9LvyWwYmzEXeQY1GZ4rtGMAVjo1toX0TqvAt8r1WNtO/UNIgHOJG4ebuvA7yufJ7EqqU03Hq/TXKoDVTo09nuUIZUQfvgn1G80zK2erRIpWp9sFUf6OZ5uw8JgqcSc+Y3t2DfhTp051e9qVBycQc03kDeAfsFCFlPgi8M2gtj8e1G6W3AW8H9/afSnwglM7gzX8pq0vObXTDp8OaHM3cDLpidUoXwD+L6DdEyh2+pnrgQ/RelhCmegkPrATptfwCyT0yp3TKguIObX8D+B7Ae22yg7gk/iXYBtiTEmnAvED4O9J80vZg9ed2hmo4RdA+LRTO61yckCb92AzmNR5DFseevOxgDa75R5M4Ksc/LrBqZ19a/iFGrzm1E4r9ABHO7f5BsV6sL+Lf2aNw53b65ZXgWMpdkHgLHArKOOZQiUlwVqCfwDfN0k/U0Ujb2JXeDyZiV+q7iz4V6q5ZzWWR5zamV7Dr7TXU07ttMKHndt7BTjHuc0s+BnwW+c2i5KR9HbgO9FOVIxBzz2slPCOk/kmxd2Q9c5g8SHn9jrlCyg1jjv7YAFZHhyMFVCNZgaw0bG9V4B3UVzB6scu63qdJj9DeyXnvJ7fRm7BnmdhDAGbPRryjHv5vWNbE7HUub2rKK5YgR1ZvzPaicS4INqBquK56Z7KScrfOrd3kXN7Il9eBX4c7URVqWKhBc9g0Ufxq90mfPgJfoGSYgxVE6x+LDWvF1c5tiV8uDragSpTNcHyjvG5zrk9kT8/i3agykiw8uNVLFZHlIdnSe9ObKWommB51V8EC7gsyjUc0RpFuqlQSjwFa9CxrfHwrHD9S8e2hA+pVy0vPZ6CNd2xrfGY5dhWyiXNRGd4ZSUQ41C1JeEsx7ZSLhorOiOV4OfKUqM6m4g1LIe7F884tiV80GcaTA2/ayPRFUT2xe8+3Av45bkWojJ4LgmnOLYVTZHvDorxSSlFUiWp4TcTiBYszyKuVVlmVw1dyQnGcw/rHU7tjEcV834JUSpq+H1rpBCH5YVbjmshqkQNv3V5CnFYXnjluBaiUtSArU5tzXZqJwVmRTsgRBmp4RdbMpViV/ZtB6/wCSEqRQ2/6N0hYl9knfAIUXC8I909Lx+P5QnHtjTDEiIHalgaXy/mObYVSXRUvxClpIblbPIKHo2cYb2AX36qgboJITKkhsUMPevU3rud2mnG6/jFR/WiQFUhMmf0LqHXstA7p/pYPOOjovsqROmommB5pgfZ37EtISrBqGCtd2qvj1jR8jxgeK9jW0JUglHB8syO6VnIdCxewgywjOoEygrhwqhgPQTsdmrzQKd2muEpzFOJXwILUSpGBesl/CLeFzi10wzvsvFHOLcnRKlpzDjqVcJoEXbsH8Gr+O5jfcSxLSFKT6NgeRWJHCA24t2zGvMSqhPdL0TuNG4Ke9bRW4pVRo7gDmClY3sfB77i2F4enAr8o2N7x6KSWmISDgBGnGytU5+aMW8Cv/Kw5yj2Zega8CB+4/Uy7RVH8fwsi/w55skQTp9B44PxAH4pWJYSd+T/KL4BpNOBFY7tZc0ifJe19+B3Yi0KRqNgvQnc6tTuNOL2dt4Erndu898obkzWZ53b83oGRQEZO/X22ngHONSxrbFc6dzeXOA05zazYA7wUec2b3RuTxSYI/HbD7jOqU/N6AM2j+NXXrYZmOHRuQy5FN8x2kL7xX09/dMeVnPc9rAiGx7GhCOKS8bxK0+72qVn2bAY2IXv+HRyGOPpnwSrOSGb7mBJ7rzCDfqBw5zaasYVAW0eBZwU0G679AFraH+20y1FEnSRCBfi9411kVOfmlEDHh/HrzxtG3byljLnETMuUzvw1dNHzbCaE7YkBDjasfFNXQxSFnwZv7422kbSzft+HP5LwRE6j83z9FGC1ZxQwZqG7wO7rONh6p4Z2De798s5AmwgPdFaDmwnZjw6vSju6aMEqzmhggV2fcXLgQs7HKSsuAS/vo61DdgNgxRYTpx4P0nnF+I9/ZRgNSdcsM5xdGAjsUGV84GdTfzysheBY3Lv5cSsJE6sRoDVXfju6acEqznhgnWIowMj9fYiuRzf/jazC/B/IXrr7UbsWY3aVuz6Uqd4+irBak64YPVil1C9nLi0s3HKjOhZ1qhtxDa9PcIJDgcedu5fMzu/y354+irBak64YIHFKXk5sYX4wqMXEf/yjtrNmHDlEVi7DPhFAn0cwYKHu63f6OmvBKs5SQjWcY5OjAAntj1M2TID31llK7YROBc4iO5mXbOA04G7E+hTo3U7u8LZXwlWc9wEa58JnJiKxUl5bYjfAhzs1NZ4fA74WrAP4/ECli31Tiyd9SPAK7w1Vc48YBCri3ggdsVmAf5R65PxPPAXWB+6YSQDX1rlbfilYCoSQ9hd2XCuxfcbLIUj/tRmIWW1U1r9QCbB02fNsJoTdpdwLN5pWE52bq8ZnwTeiHai5Pwa+Ha0E6J8DOJ7ejYMTHHp2cR8ifgZSFltG9mWevP0XTOs5iQzw3oF3+yc/aSRzeDfgV9GO1FSzsE3UaSoGCvw/RbbQFzdwkb2BZ4mfkZSJvtVW59Aa3j6rxlWc5IIaxilH//jfu+0vOOxhDQCSstgG7Evgazx7IMEqznJLAnBjnGvyqZfLfNF0jiGvxX4p2gnSsAOrD6jZ7UiUWEW4/+NfJRLz1rjTOJnKEW1XcCq9oe8ZTz7ohlWc5JaEoIFj3oW0xwBbmjVOSc8M7GWyc7tZLDbwLMvEqzmJCdYYFc7vB/2Je04mDM9pJHVoUiWt1jh3B8JVnOSFKwhLE7K8wG5rR0HHejB0rFEC0ERzEOscO6TBKs5SQoWxMwwUtrLGkV7WhObl1iRcz/GmgSrOckK1iJHx0ZtHWmcGI7leOLyn6dqu4DPdDOoHeDZPwlWc5IVLLBlmveLkOcpUzcswfKRRwtFCraFmNmwZx8lWM1JWrCOd3Ru1J4kPsHfeAwBPyVeMCLtPiytTQSe/ZRgNSdpweolpgDpVztx1okacBr+hxIp2BpiX2TPvkqwmpO0YIFVOfF+MYZJr47fWGYBNxEvIh72NJ3XEswSzz5LsJqTvGANYNlIvV8S7/xcnVDDymY9R7yo5GHbsVL2g1kNWJd49l2C1ZzkBQvgbEcnG+3Qbpx2ZACbiaaWJ74b+z5WYSglPPsvwWpOIQRrOlZTzvuleZhiPTjTMOHaTLzgdGK7gB+S1q2DRiRY8RRCsMCqnkS8RGd163gAU4BTsZzxkYVLW7Vh4FvEnf61igQrniSq5rTCNOzE0PuD3AG8H7jHud2sWISlrVlB93X5suRNLKXOZVhKoW4r2nhws2NbH0T5/puRTNWcVoiaZa0jn0KjnvQCh2Bj+BtiZl7DwDVYaupZufZWlJXCLAnB9rKiNpbPzKIDCTENOBqrjfgL8jmJ3YDtSZ2OHWCkkI5aFJvCLAlHWY0VF/BmB/A3wF0BbXsxDZiNxaDNAd6OFbntrf9+LLuBh+q/fgL7MnkCK7z6KFrSiOwp1JIQ7Ag/Ku5oPdoMFSKSQi0JR1nl6PRYuzjLjggh2qKQgtWLbYRHidbKLDsjhGiZQgoW2CZulGC9DMzNukNCiEkprGABXO3o/Fhbh/azhPCm0II1G9jm2IGxpv0sIXwptGCB5a6KEqwRLDeVEMKHwgtWLxZuECVYO7EIciFE/hResAAOc+xEM3sRW54KIfKlFIIFcKljR5rZ/aSTaE6IslIawZpGfB6om7ECqEKIfCiNYAEc59iZ8WwtEi0h8qJUglXDBCNatDyrEQtRJUolWGApaKKXhhItIfKhdIIFVhU4hdTAqVaRFqKolFKwAC7J0PFObRcSLSGypLSCNYXYgNJG0Top574KURVKK1gAC4m9a6iZlhDZUmrBAit3FS1YEi0hsqH0ggVwxQROeZtOD4XonEoI1gBp7Gc1ipaCS4Von0oIFsACYsrdj2eKiBeifSojWADHEy9UjXYzujAtRDtUSrAAziNeqBrtfpSaRohWqZxg1bBy6dFC1WgvoiSAQrRC5QQLbBn2IPFC1Wg7UbplISajkoIFVo49hUvSY+1iVI1HiPGorGABHEQakfBjbR2qeyhEMyotWADLseVYtEiNtZdRhWkhxlJ5wQLbO0ohHU0zuwgtEYUYRYJVJ7q+4UR2P3aRW4iqI8Fq4ALixWk82w6cCfTl1nsh0keC1UCNtEVrBNuQ12xLVBUJ1hhqwJXEC9NEth04C+1tieohwWpCH3At8cI0mT0MHJrTGAiRIhKsceilGKI1gs0IZ+YzDEIkhQRrAvpIf3k4asPAarRMFOVGgjUJRdiIb7QNWMBpLY/BECIYCVYLFE20RrDTxCPyGAwhApFgtcFXSTcifjy7AViSx2AIEYAEq01SvsYzmXAtRUtFUWwkWB1wFGlmeWjF7gaORsIliokEq0MOIs18Wq3aeqxm45SsB0aIHJFgdcFM0stc2q69jB0ozMt4bITIAwlWlwwCPyVeeLKwG7HKQpp1iVSRYGVAjfSq8XRjLwJrsMIYqp0oUkKClSHHk1ax1ixsI1apenGG4yREp0iwMmYBtqEdLTR52CZsv2s5dtdSCG8kWDkwQHq1D7O2LcAPgc8Ac7IZNiEmRYKVEz3A5yhuvFa79jhwOXAicACK8xL54CZY+3j1KDEWAldQvVnIK8DtwL3AHcBvgcdCPRJlYAiLf8ydqgoWWJjABcAJVHvm8SrwAPA7LKvEo3V7BHgD2B3nmigIEixHVmBlu4aiHUmQ3wPPA88CTwGvY0G5AE/Uf0/977zk7ZxIhiH2PBe5IsEypgMXAsdEOyKEGJ8/inYgEV4DrgIeApahDKFCJIkEaw8j2D7OpcA7gP1j3RFCjEWC9VaGgbVYypeDgKmx7gghRpFgjc8j2GxrBPhrdH9PiHC06d4a84CvoXzsQoQiwWqPIzDhUp4qIQLQkrA9HsVSvDwDvA94W6w7QlQLCVb77MI25L+NRYkvAf441CMhKoIEq3O2A7cA38Wu9vwVEi4hckWC1T2vAdcD38HG8y9RXiohckGClR3DmHBdgs249gP+JNQjIUqGTgnzYwAr2fUvwIxgX4QoBRKs/OnF8sp/FkvVLIToEAmWL0uwGdcKFDkvRNtIsGKYgSUOPBmYHeyLEIVBghVLDzbr+jRwFCqWKsSESLDSoR/4KHAscDhaMgrxFiRYaTIIHI3ES4i9kGClz1RMvD6MXb7WslFUFglWsegHlgIfAg7DsqJWueKPqBgSrGIzE8tBfzAmYLMinREibyRY5WIGsBj4AFYsdhHQF+qREBkiwSo3/cD8uh2Iidh8VINRFBQJVjWZjgnXHOA99Z9z6v99MNAvISZEgiUa6cEubc+q2yDwLmymNrP+d+bXfzb+NyFc+H/D6bn+JX+BlgAAAABJRU5ErkJggg==";
+/**
+* Content Credentials (CR) Logo
+*
+* Based on the Content Authenticity Initiative logo
+*/
+const CRLogo = ({ size = 20, className, style }) => {
+	return /* @__PURE__ */ jsx("img", {
+		src: `data:image/png;base64,${CR_LOGO_BASE64}`,
+		width: size,
+		height: size,
+		className,
+		style,
+		alt: "Content Credentials"
+	});
+};
+
+//#endregion
+//#region src/icons/LinkedInIcon.tsx
+/**
+* LinkedIn Icon as inline SVG
+*
+* Used for LinkedIn identity verification links
+*/
+const LinkedInIcon = ({ size = 14, color = "#0077B5", className, style }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: color,
+		className,
+		style,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })
+	});
+};
+
+//#endregion
+//#region src/shared/hooks/useTooltipVisibility.ts
+/**
+* Hook for managing tooltip visibility with delayed hide
+*
+* @example
+* ```tsx
+* const { isVisible, show, hide, toggle } = useTooltipVisibility({
+*   hasCredentials: validation?.has_credentials ?? false,
+*   hideDelay: 300,
+* });
+* ```
+*/
+function useTooltipVisibility({ hasCredentials, initialVisible = false, hideDelay = 300 }) {
+	const [isVisible, setIsVisible] = useState(initialVisible);
+	const timeoutRef = useRef(null);
+	const clearPendingHide = useCallback(() => {
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	useEffect(() => clearPendingHide, [clearPendingHide]);
+	const show = useCallback(() => {
+		clearPendingHide();
+		if (hasCredentials) setIsVisible(true);
+	}, [hasCredentials, clearPendingHide]);
+	const hide = useCallback(() => {
+		clearPendingHide();
+		timeoutRef.current = setTimeout(() => setIsVisible(false), hideDelay);
+	}, [hideDelay, clearPendingHide]);
+	const toggle = useCallback(() => {
+		clearPendingHide();
+		if (hasCredentials) setIsVisible((v) => !v);
+	}, [hasCredentials, clearPendingHide]);
+	const setVisible = useCallback((visible) => {
+		clearPendingHide();
+		if (!visible || hasCredentials) setIsVisible(visible);
+	}, [hasCredentials, clearPendingHide]);
+	useDebugValue({
+		isVisible,
+		hasCredentials
+	});
+	return {
+		isVisible,
+		show,
+		hide,
+		toggle,
+		setVisible
+	};
+}
+
+//#endregion
+//#region src/types/media.ts
+/**
+* Field names available in passport components
+*/
+const PassportFieldName = {
+	Issuer: "issuer",
+	Date: "date"
+};
+/**
+* Passport display variants
+*/
+const PassportVariant = {
+	Basic: "basic",
+	Full: "full"
+};
+
+//#endregion
+//#region src/types/index.ts
+/**
+* Validation status enum with const assertion and satisfies for type safety
+*/
+const ValidationStatus = {
+	Idle: "idle",
+	Error: "error",
+	Success: "success",
+	Loading: "loading"
+};
+
+//#endregion
+//#region src/ui/core/credential/context/CredentialBadgeContext.tsx
+const CredentialBadgeContext = createContext(null);
+
+//#endregion
+//#region src/ui/core/credential/hooks/useCredentialBadgeContext.ts
+/**
+* Access the CredentialBadge context
+*
+* Must be used within a CredentialBadge.Root component
+*
+* @example
+* ```tsx
+* function MyBadgeContent() {
+*   const { status, hasCredentials } = useCredentialBadgeContext();
+*   return <div>{status}</div>;
+* }
+* ```
+*/
+function useCredentialBadgeContext() {
+	const context = useContext(CredentialBadgeContext);
+	if (!context) throw new Error("useCredentialBadgeContext must be used within a CredentialBadge.Root");
+	useDebugValue({
+		status: context.status,
+		hasCredentials: context.hasCredentials
+	});
+	return context;
+}
+
+//#endregion
+//#region src/ui/core/credential/context/CredentialOverlayContext.tsx
+const CredentialOverlayContext = createContext(null);
+
+//#endregion
+//#region src/ui/core/credential/hooks/useCredentialOverlayContext.ts
+/**
+* Access the CredentialOverlay context
+*
+* Must be used within a CredentialOverlay.Root component
+*
+* @example
+* ```tsx
+* function MyTrigger() {
+*   const { show, hide, toggle, isVisible } = useCredentialOverlayContext();
+*   return (
+*     <button
+*       onMouseEnter={show}
+*       onMouseLeave={hide}
+*       onClick={toggle}
+*     >
+*       {isVisible ? "Hide" : "Show"}
+*     </button>
+*   );
+* }
+* ```
+*/
+function useCredentialOverlayContext() {
+	const context = useContext(CredentialOverlayContext);
+	if (!context) throw new Error("useCredentialOverlayContext must be used within a CredentialOverlay.Root");
+	useDebugValue({
+		status: context.status,
+		isVisible: context.isVisible
+	});
+	return context;
+}
+
+//#endregion
+//#region src/ui/core/credential/CredentialBadge.tsx
+/**
+* CredentialBadge.Root - Provider wrapper for the CredentialBadge compound component
+*
+* Provides context with status and hasCredentials to all child components.
+* Children are slot components that render based on the current state.
+*
+* @example
+* ```tsx
+* <CredentialBadge.Root status={status} hasCredentials={hasCredentials}>
+*   <CredentialBadge.Loading>
+*     <Spinner />
+*   </CredentialBadge.Loading>
+*
+*   <CredentialBadge.Verified>
+*     <CheckIcon className="text-green-500" />
+*   </CredentialBadge.Verified>
+*
+*   <CredentialBadge.NoCredentials>
+*     <span>No credentials</span>
+*   </CredentialBadge.NoCredentials>
+*
+*   <CredentialBadge.Error>
+*     <span>Error</span>
+*   </CredentialBadge.Error>
+* </CredentialBadge.Root>
+* ```
+*/
+const CredentialBadgeRoot = forwardRef(({ status, hasCredentials, children, ...props }, ref) => {
+	const contextValue = useMemo(() => ({
+		status,
+		hasCredentials
+	}), [status, hasCredentials]);
+	return /* @__PURE__ */ jsx(CredentialBadgeContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...props,
+			children
+		})
+	});
+});
+CredentialBadgeRoot.displayName = "CredentialBadge.Root";
+function createStatusComponent(displayName, shouldRender) {
+	const Component = ({ children }) => {
+		const { status, hasCredentials } = useCredentialBadgeContext();
+		if (!shouldRender(status, hasCredentials)) return null;
+		return /* @__PURE__ */ jsx(Fragment, { children });
+	};
+	Component.displayName = displayName;
+	return Component;
+}
+/**
+* CredentialBadge.Loading - Renders children only when status is "loading"
+*/
+const CredentialBadgeLoading = createStatusComponent("CredentialBadge.Loading", (status) => status === ValidationStatus.Loading);
+/**
+* CredentialBadge.Error - Renders children only when status is "error"
+*/
+const CredentialBadgeError = createStatusComponent("CredentialBadge.Error", (status) => status === ValidationStatus.Error);
+/**
+* CredentialBadge.Verified - Renders children only when status is "success" and has credentials
+*/
+const CredentialBadgeVerified = createStatusComponent("CredentialBadge.Verified", (status, hasCredentials) => status === ValidationStatus.Success && hasCredentials);
+/**
+* CredentialBadge.Idle - Renders children only when status is "idle"
+*/
+const CredentialBadgeIdle = createStatusComponent("CredentialBadge.Idle", (status) => status === ValidationStatus.Idle);
+/**
+* CredentialBadge.NoCredentials - Renders children only when status is "success" but no credentials
+*/
+const CredentialBadgeNoCredentials = createStatusComponent("CredentialBadge.NoCredentials", (status, hasCredentials) => status === ValidationStatus.Success && !hasCredentials);
+/**
+* CredentialBadge - Headless compound component for displaying credential status
+*
+* @example
+* ```tsx
+* import { CredentialBadge } from "@limboai/react";
+*
+* <CredentialBadge.Root status={status} hasCredentials={hasCredentials}>
+*   <CredentialBadge.Loading>
+*     <div className="animate-pulse bg-blue-500 rounded-full p-2">
+*       <Spinner />
+*     </div>
+*   </CredentialBadge.Loading>
+*
+*   <CredentialBadge.Verified>
+*     <button className="bg-green-500 rounded-full p-2">
+*       <CheckIcon />
+*     </button>
+*   </CredentialBadge.Verified>
+*
+*   <CredentialBadge.NoCredentials>
+*     <span className="bg-red-500 text-white text-xs px-2 py-1 rounded">
+*       No credentials
+*     </span>
+*   </CredentialBadge.NoCredentials>
+*
+*   <CredentialBadge.Error>
+*     <span className="bg-red-500 text-white text-xs px-2 py-1 rounded">
+*       Error
+*     </span>
+*   </CredentialBadge.Error>
+* </CredentialBadge.Root>
+* ```
+*/
+const CredentialBadge = {
+	Root: CredentialBadgeRoot,
+	Loading: CredentialBadgeLoading,
+	Verified: CredentialBadgeVerified,
+	NoCredentials: CredentialBadgeNoCredentials,
+	Error: CredentialBadgeError,
+	Idle: CredentialBadgeIdle
+};
+
+//#endregion
+//#region src/ui/core/credential/CredentialOverlayContent.tsx
+/**
+* CredentialOverlay.Content - Content that appears when the overlay is visible
+*
+* Only renders when the overlay is visible and credentials exist.
+* Use forceMount to always render (useful for CSS transitions).
+*
+* @example
+* ```tsx
+* <CredentialOverlay.Content className="absolute top-12 right-0 bg-white shadow-lg rounded-lg p-4">
+*   <Passport.Root validation={validation}>
+*     ...
+*   </Passport.Root>
+* </CredentialOverlay.Content>
+* ```
+*/
+const CredentialOverlayContent = forwardRef(({ children, forceMount, onMouseLeave, ...props }, ref) => {
+	const { isVisible, hasCredentials, validation, hide } = useCredentialOverlayContext();
+	if (!forceMount && (!isVisible || !hasCredentials || !validation)) return null;
+	const handleMouseLeave = (e) => {
+		hide();
+		onMouseLeave?.(e);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "tooltip",
+		tabIndex: -1,
+		"data-state": isVisible ? "open" : "closed",
+		onMouseLeave: handleMouseLeave,
+		...props,
+		children
+	});
+});
+CredentialOverlayContent.displayName = "CredentialOverlay.Content";
+
+//#endregion
+//#region src/ui/core/credential/CredentialOverlayRoot.tsx
+/**
+* CredentialOverlay.Root - Provider wrapper for the CredentialOverlay compound component
+*
+* Provides context with validation data and visibility state to all child components.
+* Manages tooltip visibility with configurable hide delay.
+*
+* @example
+* ```tsx
+* <CredentialOverlay.Root validation={validation} status="success">
+*   <CredentialOverlay.Trigger className="absolute top-2 right-2">
+*     <button className="bg-green-500 p-2 rounded-full">✓</button>
+*   </CredentialOverlay.Trigger>
+*
+*   <CredentialOverlay.Content className="absolute top-12 right-0 bg-white shadow-lg rounded-lg p-4">
+*     <Passport.Root validation={validation}>
+*       ...
+*     </Passport.Root>
+*   </CredentialOverlay.Content>
+* </CredentialOverlay.Root>
+* ```
+*/
+const CredentialOverlayRoot = forwardRef(({ validation, status = "idle", hideDelay = 300, children, ...props }, ref) => {
+	const overlayId = useId();
+	const hasCredentials = validation?.has_credentials ?? false;
+	const { isVisible, show, hide, toggle } = useTooltipVisibility({
+		hasCredentials,
+		hideDelay
+	});
+	const contextValue = useMemo(() => ({
+		validation,
+		status,
+		hasCredentials,
+		isVisible,
+		show,
+		hide,
+		toggle,
+		overlayId
+	}), [
+		validation,
+		status,
+		hasCredentials,
+		isVisible,
+		show,
+		hide,
+		toggle,
+		overlayId
+	]);
+	return /* @__PURE__ */ jsx(CredentialOverlayContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...props,
+			children
+		})
+	});
+});
+CredentialOverlayRoot.displayName = "CredentialOverlay.Root";
+
+//#endregion
+//#region src/ui/core/Slot.tsx
+/**
+* Compose multiple refs into a single callback ref
+* Handles function refs, object refs, and undefined refs safely
+*/
+function composeRefs(...refs) {
+	return (instance) => {
+		for (const ref of refs) if (typeof ref === "function") ref(instance);
+		else if (ref != null) ref.current = instance;
+	};
+}
+/**
+* Compose event handlers, calling child handler first then slot handler
+*/
+function composeEventHandlers(childHandler, slotHandler) {
+	if (!childHandler && !slotHandler) return void 0;
+	if (!childHandler) return slotHandler;
+	if (!slotHandler) return childHandler;
+	return (event) => {
+		childHandler(event);
+		slotHandler(event);
+	};
+}
+/**
+* Merge props from slot and child element
+* - Event handlers are composed (child first, then slot)
+* - className is concatenated
+* - style is shallow merged (child overrides slot)
+* - Other props: child overrides slot
+*/
+function mergeProps(slotProps, childProps) {
+	const merged = { ...slotProps };
+	for (const key in childProps) {
+		const slotValue = slotProps[key];
+		const childValue = childProps[key];
+		if (/^on[A-Z]/.test(key)) merged[key] = composeEventHandlers(childValue, slotValue);
+		else if (key === "className") merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+		else if (key === "style") merged[key] = {
+			...slotValue,
+			...childValue
+		};
+		else merged[key] = childValue;
+	}
+	return merged;
+}
+/**
+* Slot - Enables the asChild pattern for composable components
+*
+* Renders the child element with merged props and refs from the slot.
+* This enables consumers to use their own elements while inheriting
+* behavior from headless components.
+*
+* Inspired by Radix UI's Slot primitive.
+*
+* @example
+* ```tsx
+* // Component with asChild support
+* const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+*   ({ asChild, ...props }, ref) => {
+*     const Comp = asChild ? Slot : 'button';
+*     return <Comp ref={ref} {...props} />;
+*   }
+* );
+*
+* // Consumer renders their own element
+* <Button asChild onClick={handleClick}>
+*   <a href="/link">Click me</a>
+* </Button>
+* // Renders: <a href="/link" onClick={handleClick}>Click me</a>
+* ```
+*/
+const Slot = forwardRef(({ children, ...slotProps }, forwardedRef) => {
+	const childArray = Children.toArray(children);
+	const slottableChild = childArray.find(isValidElement);
+	if (!slottableChild || !isValidElement(slottableChild)) return /* @__PURE__ */ jsx(Fragment, { children });
+	const child = slottableChild;
+	const grandchildren = childArray.flatMap((c) => c === slottableChild ? Children.toArray(child.props.children) : [c]);
+	return cloneElement(child, {
+		...mergeProps(slotProps, child.props),
+		ref: forwardedRef ? composeRefs(forwardedRef, child.props.ref) : child.props.ref,
+		children: grandchildren.length > 0 ? grandchildren : void 0
+	});
+});
+Slot.displayName = "Slot";
+
+//#endregion
+//#region src/ui/core/credential/CredentialOverlayTrigger.tsx
+/**
+* CredentialOverlay.Trigger - Trigger element for showing/hiding the overlay
+*
+* Attaches hover and click handlers to show/hide the tooltip.
+* Use asChild to render your own element.
+*
+* @example
+* ```tsx
+* <CredentialOverlay.Trigger asChild>
+*   <button className="bg-green-500 p-2 rounded-full">
+*     <CheckIcon />
+*   </button>
+* </CredentialOverlay.Trigger>
+* ```
+*/
+const CredentialOverlayTrigger = forwardRef(({ asChild, children, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+	const { show, hide, toggle, hasCredentials } = useCredentialOverlayContext();
+	const triggerProps = {
+		onMouseEnter: useCallback((e) => {
+			show();
+			onMouseEnter?.(e);
+		}, [show, onMouseEnter]),
+		onMouseLeave: useCallback((e) => {
+			hide();
+			onMouseLeave?.(e);
+		}, [hide, onMouseLeave]),
+		onClick: useCallback((e) => {
+			toggle();
+			onClick?.(e);
+		}, [toggle, onClick]),
+		"aria-label": hasCredentials ? "View content credentials" : "No credentials found",
+		"aria-haspopup": "dialog",
+		...props
+	};
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		...triggerProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...triggerProps,
+		children
+	});
+});
+CredentialOverlayTrigger.displayName = "CredentialOverlay.Trigger";
+
+//#endregion
+//#region src/ui/core/credential/index.ts
+/**
+* CredentialOverlay - Headless compound component for trigger + tooltip pattern
+*
+* @example
+* ```tsx
+* import { CredentialOverlay, Passport, CredentialBadge } from "@limboai/react";
+*
+* <div className="relative">
+*   <img src="/photo.jpg" />
+*
+*   <CredentialOverlay.Root validation={validation} status={status}>
+*     <CredentialOverlay.Trigger className="absolute top-2 right-2">
+*       <CredentialBadge.Root status={status} hasCredentials={hasCredentials}>
+*         <CredentialBadge.Verified>
+*           <button className="bg-green-500 p-2 rounded-full">✓</button>
+*         </CredentialBadge.Verified>
+*       </CredentialBadge.Root>
+*     </CredentialOverlay.Trigger>
+*
+*     <CredentialOverlay.Content className="absolute top-12 right-0 bg-white shadow-lg rounded-lg p-4">
+*       <Passport.Root validation={validation}>
+*         ...
+*       </Passport.Root>
+*     </CredentialOverlay.Content>
+*   </CredentialOverlay.Root>
+* </div>
+* ```
+*/
+const CredentialOverlay = {
+	Root: CredentialOverlayRoot,
+	Trigger: CredentialOverlayTrigger,
+	Content: CredentialOverlayContent
+};
+
+//#endregion
+//#region src/ui/core/passport/context/PassportContext.tsx
+const PassportContext = createContext(null);
+
+//#endregion
+//#region src/ui/core/passport/hooks/usePassportContext.ts
+/**
+* Access the Passport context
+*
+* Must be used within a Passport.Root component
+*
+* @example
+* ```tsx
+* function MyCustomField() {
+*   const { issuer, issuedDate, copied, isPending } = usePassportContext();
+*   return (
+*     <div>
+*       <p>{issuer} - {issuedDate}</p>
+*       {isPending && <span>Copying...</span>}
+*     </div>
+*   );
+* }
+* ```
+*/
+function usePassportContext() {
+	const context = useContext(PassportContext);
+	if (!context) throw new Error("usePassportContext must be used within a Passport.Root");
+	useDebugValue({
+		issuer: context.issuer,
+		copied: context.copied
+	});
+	return context;
+}
+
+//#endregion
+//#region src/ui/core/passport/hooks/usePassportData.ts
+/**
+* Extract actions from c2pa.actions.v2 or c2pa.actions assertion
+*/
+function extractActions(assertions) {
+	const actionsAssertion = assertions.find((a) => a.label === "c2pa.actions.v2" || a.label === "c2pa.actions");
+	if (!actionsAssertion?.value) return [];
+	const value = actionsAssertion.value;
+	if (value.actions && Array.isArray(value.actions)) return value.actions.map((a) => a.action).filter((action) => Boolean(action));
+	if (value.action) return [value.action];
+	return [];
+}
+/**
+* Extract verified identities from cawg.identity assertion
+* Supports both:
+* - Direct format: value.verifiedIdentities
+* - CAWG 1.1 Verifiable Credential format: value.credentialSubject.verifiedIdentities
+*/
+function extractIdentities(assertions) {
+	const identityAssertion = assertions.find((a) => a.label === "cawg.identity");
+	if (!identityAssertion?.value) return [];
+	const value = identityAssertion.value;
+	if (value.credentialSubject?.verifiedIdentities && Array.isArray(value.credentialSubject.verifiedIdentities)) return value.credentialSubject.verifiedIdentities;
+	if (value.verifiedIdentities && Array.isArray(value.verifiedIdentities)) return value.verifiedIdentities;
+	return [];
+}
+/**
+* Format a date string for display
+*/
+function formatDate(dateString) {
+	return new Date(dateString).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	});
+}
+/**
+* Hook to extract and process data from a C2PA validation response
+*
+* Extracts issuer, date, actions, identities, and signers from the validation
+* response for easy consumption by Passport components.
+*
+* @example
+* ```tsx
+* const { issuer, issuedDate, actions, verifiedIdentities, previousSigners } =
+*   usePassportData(validation);
+*
+* return (
+*   <div>
+*     <p>Issued by: {issuer}</p>
+*     <p>Date: {issuedDate}</p>
+*   </div>
+* );
+* ```
+*/
+function usePassportData(validation) {
+	const data = useMemo(() => {
+		const activeManifest = validation.manifest_chain?.find((manifest) => manifest.label === validation.active_manifest_label) || validation.manifest_chain?.[0] || null;
+		const issuer = activeManifest?.signature_info.issuer || "Unknown";
+		const issuedDateRaw = activeManifest?.signature_info.time || null;
+		return {
+			issuer,
+			issuedDate: issuedDateRaw ? formatDate(issuedDateRaw) : "Date unknown",
+			issuedDateRaw,
+			actions: activeManifest?.assertions ? extractActions(activeManifest.assertions) : [],
+			verifiedIdentities: activeManifest?.assertions ? extractIdentities(activeManifest.assertions) : [],
+			previousSigners: validation.manifest_chain?.filter((m) => m.label !== validation.active_manifest_label) || [],
+			activeManifest,
+			validation
+		};
+	}, [validation]);
+	useDebugValue({
+		issuer: data.issuer,
+		hasActions: data.actions.length > 0
+	});
+	return data;
+}
+
+//#endregion
+//#region src/ui/core/passport/PassportActions.tsx
+/**
+* Format action label for display
+* e.g., "c2pa.edited" -> "Edited"
+*/
+function formatActionLabel(action) {
+	const withoutNamespace = action.split(".").pop() || action;
+	return withoutNamespace.charAt(0).toUpperCase() + withoutNamespace.slice(1);
+}
+/**
+* Passport.Actions - Display actions from the manifest
+*
+* Renders actions using a render prop for full styling control.
+* Returns null if there are no actions.
+*
+* @example
+* ```tsx
+* <Passport.Actions className="mt-4">
+*   {(actions) => (
+*     <div className="flex gap-2">
+*       {actions.map((action) => (
+*         <span key={action} className="tag bg-gray-100 px-2 py-1 rounded">
+*           {action}
+*         </span>
+*       ))}
+*     </div>
+*   )}
+* </Passport.Actions>
+* ```
+*/
+const PassportActions = forwardRef(({ children, ...props }, ref) => {
+	const { actions } = usePassportContext();
+	if (actions.length === 0) return null;
+	const formattedActions = actions.map(formatActionLabel);
+	if (typeof children !== "function") return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-passport-actions-label": true,
+			children: "Actions"
+		}), /* @__PURE__ */ jsx("div", {
+			"data-passport-actions-list": true,
+			children: formattedActions.map((action) => /* @__PURE__ */ jsx("span", {
+				"data-passport-action": true,
+				children: action
+			}, action))
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...props,
+		children: children(formattedActions)
+	});
+});
+PassportActions.displayName = "Passport.Actions";
+
+//#endregion
+//#region src/ui/core/passport/PassportCopyButton.tsx
+/**
+* Passport.CopyButton - Copy validation JSON to clipboard
+*
+* Renders a button that copies the validation JSON to clipboard.
+* Supports pending state from React 19's useActionState.
+* Use asChild to provide your own button element.
+*
+* @example
+* ```tsx
+* // Default button
+* <Passport.CopyButton className="btn" />
+*
+* // Custom button with asChild
+* <Passport.CopyButton asChild>
+*   <button className="my-button">
+*     Copy JSON
+*   </button>
+* </Passport.CopyButton>
+*
+* // Access pending state in custom component
+* function CustomCopyButton() {
+*   const { copyJson, copied, isPending } = usePassportContext();
+*   return (
+*     <button onClick={copyJson} disabled={isPending}>
+*       {isPending ? "Copying..." : copied ? "Copied!" : "Copy"}
+*     </button>
+*   );
+* }
+* ```
+*/
+const PassportCopyButton = forwardRef(({ asChild, children, onClick, disabled, ...props }, ref) => {
+	const { copyJson, copied, isPending } = usePassportContext();
+	const handleClick = (e) => {
+		copyJson();
+		onClick?.(e);
+	};
+	const commonProps = {
+		onClick: handleClick,
+		disabled: disabled || isPending,
+		"data-copied": copied || void 0,
+		"data-pending": isPending || void 0,
+		"aria-busy": isPending || void 0,
+		...props
+	};
+	if (asChild && children) return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		...commonProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		...commonProps,
+		children: isPending ? "Copying..." : copied ? "Copied!" : "Copy JSON"
+	});
+});
+PassportCopyButton.displayName = "Passport.CopyButton";
+
+//#endregion
+//#region src/ui/core/passport/PassportField.tsx
+const DEFAULT_LABELS = {
+	[PassportFieldName.Issuer]: "Issued by",
+	[PassportFieldName.Date]: "Date issued"
+};
+/**
+* Passport.Field - Display a field from the passport data
+*
+* Automatically fills the value from context based on the field name.
+* Use a render function for complete control over layout.
+*
+* @example
+* ```tsx
+* // Simple usage with default rendering
+* <Passport.Field name="issuer" className="mb-2" />
+*
+* // Custom label
+* <Passport.Field name="date" label="Signed on" />
+*
+* // Render function for custom layout
+* <Passport.Field name="issuer">
+*   {({ label, value }) => (
+*     <div className="flex justify-between">
+*       <span className="font-bold">{label}</span>
+*       <span>{value}</span>
+*     </div>
+*   )}
+* </Passport.Field>
+* ```
+*/
+const PassportField = forwardRef(({ name, label, children, ...props }, ref) => {
+	const context = usePassportContext();
+	const value = name === PassportFieldName.Issuer ? context.issuer : context.issuedDate;
+	const displayLabel = label ?? DEFAULT_LABELS[name];
+	if (typeof children === "function") return /* @__PURE__ */ jsx("div", {
+		ref,
+		...props,
+		children: children({
+			label: displayLabel,
+			value
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-passport-field-label": true,
+			children: displayLabel
+		}), /* @__PURE__ */ jsx("div", {
+			"data-passport-field-value": true,
+			children: value
+		})]
+	});
+});
+PassportField.displayName = "Passport.Field";
+
+//#endregion
+//#region src/ui/core/passport/PassportFooter.tsx
+/**
+* Passport.Footer - Footer slot for the Passport
+*
+* A simple div wrapper for footer content. Style it yourself.
+*
+* @example
+* ```tsx
+* <Passport.Footer className="mt-4 border-t pt-4 flex justify-end">
+*   <Passport.CopyButton asChild>
+*     <button className="btn-primary">Copy JSON</button>
+*   </Passport.CopyButton>
+* </Passport.Footer>
+* ```
+*/
+const PassportFooter = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...props,
+		children
+	});
+});
+PassportFooter.displayName = "Passport.Footer";
+
+//#endregion
+//#region src/ui/core/passport/PassportHeader.tsx
+/**
+* Passport.Header - Header slot for the Passport
+*
+* A simple div wrapper for header content. Style it yourself.
+*
+* @example
+* ```tsx
+* <Passport.Header className="flex items-center gap-2 mb-4">
+*   <Passport.Logo className="w-6 h-6" />
+*   <Passport.Title className="text-lg font-bold" />
+* </Passport.Header>
+* ```
+*/
+const PassportHeader = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...props,
+		children
+	});
+});
+PassportHeader.displayName = "Passport.Header";
+
+//#endregion
+//#region src/ui/core/passport/PassportIdentities.tsx
+/**
+* Convert VerifiedIdentity to IdentityInfo for easier rendering
+*/
+function toIdentityInfo(identity) {
+	return {
+		username: identity.name,
+		provider: identity.provider.name,
+		uri: identity.uri,
+		verifiedAt: identity.verifiedAt
+	};
+}
+/**
+* Passport.Identities - Display verified identities from the manifest
+*
+* Renders identities using a render prop for full styling control.
+* Returns null if there are no identities.
+*
+* @example
+* ```tsx
+* <Passport.Identities className="mt-4">
+*   {(identities) => (
+*     <ul className="space-y-2">
+*       {identities.map((identity) => (
+*         <li key={identity.provider} className="flex items-center gap-2">
+*           {identity.provider === "LinkedIn" && <LinkedInIcon />}
+*           {identity.uri ? (
+*             <a href={identity.uri} target="_blank" rel="noopener noreferrer">
+*               {identity.username}
+*             </a>
+*           ) : (
+*             <span>{identity.username}</span>
+*           )}
+*         </li>
+*       ))}
+*     </ul>
+*   )}
+* </Passport.Identities>
+* ```
+*/
+const PassportIdentities = forwardRef(({ children, ...props }, ref) => {
+	const { verifiedIdentities } = usePassportContext();
+	if (verifiedIdentities.length === 0) return null;
+	const identities = verifiedIdentities.map(toIdentityInfo);
+	const label = identities.length === 1 ? "Verified Identity" : `Verified Identities (${identities.length})`;
+	if (typeof children !== "function") return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-passport-identities-label": true,
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			"data-passport-identities-list": true,
+			children: identities.map((identity) => /* @__PURE__ */ jsxs("div", {
+				"data-passport-identity": true,
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-passport-identity-provider": true,
+					children: identity.provider
+				}), identity.uri ? /* @__PURE__ */ jsx("a", {
+					href: identity.uri,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					"data-passport-identity-link": true,
+					children: identity.username
+				}) : /* @__PURE__ */ jsx("span", {
+					"data-passport-identity-username": true,
+					children: identity.username
+				})]
+			}, identity.provider))
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...props,
+		children: children(identities)
+	});
+});
+PassportIdentities.displayName = "Passport.Identities";
+
+//#endregion
+//#region src/ui/core/passport/PassportLogo.tsx
+/**
+* Passport.Logo - Logo for the Passport
+*
+* Renders the Content Credentials logo by default.
+* Use asChild to provide your own logo element.
+*
+* @example
+* ```tsx
+* // Default logo
+* <Passport.Logo className="w-6 h-6" />
+*
+* // Custom logo with asChild
+* <Passport.Logo asChild>
+*   <img src="/my-logo.svg" alt="Logo" className="w-6 h-6" />
+* </Passport.Logo>
+* ```
+*/
+const PassportLogo = forwardRef(({ asChild, children, ...props }, ref) => {
+	if (asChild && children) return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(CRLogo, { ...props });
+});
+PassportLogo.displayName = "Passport.Logo";
+
+//#endregion
+//#region src/ui/core/passport/PassportRoot.tsx
+/**
+* Passport.Root - Provider wrapper for the Passport compound component
+*
+* Provides context with processed validation data to all child components.
+* Uses React 19's useTransition for non-blocking copy operations.
+*
+* @example
+* ```tsx
+* <Passport.Root validation={validation} className="my-tooltip bg-white p-4 rounded">
+*   <Passport.Header />
+*   <Passport.Field name="issuer" />
+*   <Passport.Footer />
+* </Passport.Root>
+* ```
+*/
+const PassportRoot = forwardRef(({ validation, children, ...props }, ref) => {
+	const titleId = useId();
+	const passportData = usePassportData(validation);
+	const [copied, setCopied] = useState(false);
+	const [isPending, startTransition] = useTransition();
+	const copyJson = useCallback(async () => {
+		startTransition(async () => {
+			try {
+				await navigator.clipboard.writeText(JSON.stringify(validation, null, 2));
+				setCopied(true);
+				setTimeout(() => setCopied(false), 2e3);
+			} catch (error) {
+				console.error("Failed to copy:", error);
+			}
+		});
+		return true;
+	}, [validation]);
+	const contextValue = useMemo(() => ({
+		...passportData,
+		copyJson,
+		copied,
+		isPending,
+		titleId
+	}), [
+		passportData,
+		copyJson,
+		copied,
+		isPending,
+		titleId
+	]);
+	return /* @__PURE__ */ jsx(PassportContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "dialog",
+			"aria-labelledby": titleId,
+			...props,
+			children
+		})
+	});
+});
+PassportRoot.displayName = "Passport.Root";
+
+//#endregion
+//#region src/ui/core/passport/PassportSigners.tsx
+/**
+* Passport.Signers - Display previous signers in the manifest chain
+*
+* Renders signers using a render prop for full styling control.
+* Returns null if there are no previous signers.
+*
+* @example
+* ```tsx
+* <Passport.Signers className="mt-4">
+*   {(signers) => (
+*     <ul className="space-y-1">
+*       {signers.map((signer) => (
+*         <li key={signer.id} className="text-sm text-gray-600">
+*           {signer.label}
+*         </li>
+*       ))}
+*     </ul>
+*   )}
+* </Passport.Signers>
+* ```
+*/
+const PassportSigners = forwardRef(({ children, ...props }, ref) => {
+	const { previousSigners } = usePassportContext();
+	if (previousSigners.length === 0) return null;
+	const signers = previousSigners.map((manifest) => ({
+		id: manifest.instance_id,
+		label: manifest.signature_info.issuer,
+		signedAt: manifest.signature_info.time ?? void 0
+	}));
+	const label = signers.length === 1 ? "Previous Signer" : `Previous Signers (${signers.length})`;
+	if (typeof children !== "function") return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-passport-signers-label": true,
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			"data-passport-signers-list": true,
+			children: signers.map((signer) => /* @__PURE__ */ jsx("div", {
+				"data-passport-signer": true,
+				children: signer.label
+			}, signer.id))
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...props,
+		children: children(signers)
+	});
+});
+PassportSigners.displayName = "Passport.Signers";
+
+//#endregion
+//#region src/ui/core/passport/PassportTitle.tsx
+/**
+* Passport.Title - Title for the Passport
+*
+* Renders a heading with the passport title. Defaults to "Content Credentials"
+* if no children are provided.
+*
+* @example
+* ```tsx
+* // Default title
+* <Passport.Title className="text-lg font-bold" />
+*
+* // Custom title
+* <Passport.Title className="text-lg font-bold">
+*   My Custom Title
+* </Passport.Title>
+*
+* // With asChild
+* <Passport.Title asChild>
+*   <h1 className="custom-heading">Content Credentials</h1>
+* </Passport.Title>
+* ```
+*/
+const PassportTitle = forwardRef(({ asChild, children, ...props }, ref) => {
+	const Comp = asChild ? Slot : "h2";
+	const content = children ?? "Content Credentials";
+	return /* @__PURE__ */ jsx(Comp, {
+		ref,
+		id: "passport-title",
+		...props,
+		children: content
+	});
+});
+PassportTitle.displayName = "Passport.Title";
+
+//#endregion
+//#region src/ui/core/passport/index.ts
+/**
+* Passport - Headless compound component for displaying C2PA content credentials
+*
+* @example
+* ```tsx
+* import { Passport } from "@limboai/react";
+*
+* <Passport.Root validation={validation} className="my-tooltip">
+*   <Passport.Header className="flex items-center gap-2">
+*     <Passport.Logo className="w-6 h-6" />
+*     <Passport.Title className="text-lg font-bold" />
+*   </Passport.Header>
+*
+*   <Passport.Field name="issuer" className="my-field" />
+*   <Passport.Field name="date" className="my-field" />
+*
+*   <Passport.Actions className="mt-4">
+*     {(actions) => actions.map(a => <span key={a} className="tag">{a}</span>)}
+*   </Passport.Actions>
+*
+*   <Passport.Identities>
+*     {(identities) => identities.map(id => <MyIdentityCard key={id.provider} {...id} />)}
+*   </Passport.Identities>
+*
+*   <Passport.Signers>
+*     {(signers) => signers.map(s => <MySignerRow key={s.id} {...s} />)}
+*   </Passport.Signers>
+*
+*   <Passport.Footer className="mt-4 border-t pt-4">
+*     <Passport.CopyButton asChild>
+*       <button className="btn-primary">Copy JSON</button>
+*     </Passport.CopyButton>
+*   </Passport.Footer>
+* </Passport.Root>
+* ```
+*/
+const Passport = {
+	Root: PassportRoot,
+	Header: PassportHeader,
+	Title: PassportTitle,
+	Logo: PassportLogo,
+	Field: PassportField,
+	Actions: PassportActions,
+	Identities: PassportIdentities,
+	Signers: PassportSigners,
+	Footer: PassportFooter,
+	CopyButton: PassportCopyButton
+};
+
+//#endregion
+//#region src/ui/default/constants.ts
+const BadgePosition = {
+	TopRight: "top-right",
+	TopLeft: "top-left",
+	BottomRight: "bottom-right",
+	BottomLeft: "bottom-left"
+};
+const PassportVariant$1 = {
+	Basic: "basic",
+	Full: "full"
+};
+const Theme = {
+	Light: "light",
+	Dark: "dark"
+};
+const wrapperStyle = {
+	position: "relative",
+	display: "inline-block"
+};
+
+//#endregion
+//#region src/ui/default/LimboBadge.tsx
+const badgeStyles = {
+	light: {
+		backgroundColor: "#ffffff",
+		borderRadius: "9999px",
+		padding: "8px",
+		boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+		cursor: "pointer",
+		border: "1px solid #e5e7eb",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	dark: {
+		backgroundColor: "#1f2937",
+		borderRadius: "9999px",
+		padding: "8px",
+		boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3)",
+		cursor: "pointer",
+		border: "1px solid #374151",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+};
+const badgePositionStyles = {
+	"top-right": {
+		position: "absolute",
+		top: "8px",
+		right: "8px"
+	},
+	"top-left": {
+		position: "absolute",
+		top: "8px",
+		left: "8px"
+	},
+	"bottom-right": {
+		position: "absolute",
+		bottom: "8px",
+		right: "8px"
+	},
+	"bottom-left": {
+		position: "absolute",
+		bottom: "8px",
+		left: "8px"
+	}
+};
+/**
+* LimboBadge - Pre-styled badge component with CRLogo
+*
+* A ready-to-use badge for displaying content credentials status.
+*/
+const LimboBadge = ({ position = BadgePosition.TopRight, theme = Theme.Light, onClick, onMouseEnter, onMouseLeave, style }) => {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		onMouseEnter,
+		onMouseLeave,
+		style: {
+			...badgeStyles[theme],
+			...badgePositionStyles[position],
+			...style
+		},
+		"aria-label": "View content credentials",
+		children: /* @__PURE__ */ jsx(CRLogo, { size: 16 })
+	});
+};
+LimboBadge.displayName = "LimboBadge";
+
+//#endregion
+//#region src/ui/media/hooks/useHeicConversion.ts
+const isHeic = (src) => /\.(heic|heif)$/i.test(src);
+async function convertHeicToJpeg(file, signal) {
+	if (typeof window === "undefined") return void 0;
+	const { default: heic2any } = await import("heic2any");
+	if (signal.aborted) return void 0;
+	const res = await heic2any({
+		blob: file,
+		toType: "image/jpeg"
+	});
+	const blob = res instanceof Blob ? res : res[0];
+	if (!blob) throw new Error("HEIC to JPEG conversion failed");
+	return blob;
+}
+/**
+* Hook for automatic HEIC to JPEG conversion
+*
+* Uses AbortController for proper cleanup and race condition handling.
+* Automatically revokes blob URLs on cleanup.
+*
+* @example
+* ```tsx
+* const { displaySrc, isConverting, error } = useHeicConversion({
+*   src: imageUrl,
+*   enabled: true,
+* });
+*
+* return (
+*   <img
+*     src={displaySrc}
+*     data-converting={isConverting || undefined}
+*   />
+* );
+* ```
+*/
+function useHeicConversion({ src, enabled = true }) {
+	const [displaySrc, setDisplaySrc] = useState(src);
+	const [isConverting, setIsConverting] = useState(false);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		if (!src || !enabled || !isHeic(src)) {
+			setDisplaySrc(src);
+			setIsConverting(false);
+			setError(null);
+			return;
+		}
+		const controller = new AbortController();
+		const { signal } = controller;
+		let blobUrl = null;
+		setIsConverting(true);
+		setError(null);
+		const convert = async () => {
+			try {
+				const response = await fetch(src, { signal });
+				if (!response.ok) throw new Error(`Fetch failed: ${response.status}`);
+				const blob = await convertHeicToJpeg(await response.blob(), signal);
+				if (signal.aborted || !blob) return;
+				blobUrl = URL.createObjectURL(blob);
+				setDisplaySrc(blobUrl);
+				setIsConverting(false);
+			} catch (e) {
+				if (signal.aborted) return;
+				setError(e instanceof Error ? e.message : "HEIC conversion failed");
+				setDisplaySrc(src);
+				setIsConverting(false);
+			}
+		};
+		convert();
+		return () => {
+			controller.abort();
+			if (blobUrl) URL.revokeObjectURL(blobUrl);
+		};
+	}, [src, enabled]);
+	useDebugValue({
+		isConverting,
+		hasError: !!error
+	});
+	return {
+		displaySrc,
+		isConverting,
+		error
+	};
+}
+
+//#endregion
+//#region src/ui/media/context/MediaContext.tsx
+const MediaContext = createContext(null);
+MediaContext.displayName = "MediaContext";
+
+//#endregion
+//#region src/ui/media/hooks/useMediaContext.ts
+/**
+* Hook to access Media context
+*
+* Use this hook inside MediaImage/MediaVideo render props to access
+* the media context including validation data and overlay visibility state.
+*
+* @example
+* ```tsx
+* const { validation, status, isVisible, toggle } = useMediaContext();
+* ```
+*/
+function useMediaContext() {
+	const context = useContext(MediaContext);
+	if (!context) throw new Error("useMediaContext must be used within a MediaImage or MediaVideo component");
+	useDebugValue({
+		status: context.status,
+		isVisible: context.isVisible
+	});
+	return context;
+}
+
+//#endregion
+//#region src/ui/media/hooks/useMediaOverlay.ts
+/**
+* Shared hook for overlay state management in media components
+*
+* Extracts common logic used by both MediaImage and MediaVideo components
+* for managing tooltip visibility and building render props.
+*
+* @example
+* ```tsx
+* const { hasCredentials, contextValue, badgeProps, tooltipProps } = useMediaOverlay({
+*   validation,
+*   validationStatus,
+*   hideDelay: 300,
+* });
+* ```
+*/
+function useMediaOverlay({ validation, validationStatus, hideDelay = 300 }) {
+	const hasCredentials = validation?.has_credentials ?? false;
+	const { isVisible, show, hide, toggle } = useTooltipVisibility({
+		hasCredentials,
+		hideDelay
+	});
+	const contextValue = {
+		validation,
+		status: validationStatus,
+		hasCredentials,
+		isVisible,
+		show,
+		hide,
+		toggle
+	};
+	const badgeProps = {
+		status: validationStatus,
+		hasCredentials,
+		isVisible,
+		show,
+		hide,
+		toggle
+	};
+	const tooltipProps = validation ? {
+		validation,
+		isVisible,
+		onMouseEnter: show,
+		onClose: hide
+	} : null;
+	useDebugValue({
+		isVisible,
+		hasCredentials
+	});
+	return {
+		hasCredentials,
+		contextValue,
+		badgeProps,
+		tooltipProps
+	};
+}
+
+//#endregion
+//#region src/ui/media/MediaImage.tsx
+/**
+* MediaImage - Headless image component with built-in credential overlay support
+*
+* A minimal image component that handles HEIC to JPEG conversion and provides
+* built-in support for displaying credential badges and tooltips via render props.
+*
+* This component is headless - it applies no styles. Users must provide
+* all styling through className, style props, or render functions.
+*
+* @example
+* ```tsx
+* // Basic usage - just the image with HEIC support
+* <MediaImage src="/photo.heic" alt="Photo" className="w-full h-auto" />
+*
+* // With built-in overlay (using render props)
+* <MediaImage
+*   src="/photo.jpg"
+*   alt="Photo"
+*   validation={validation}
+*   validationStatus="success"
+*   wrapperClassName="relative inline-block"
+*   className="w-80 h-60 object-cover rounded-lg"
+*   renderBadge={({ status, hasCredentials, toggle }) => (
+*     <button
+*       onClick={toggle}
+*       className="absolute top-2 right-2 bg-green-500 rounded-full p-2"
+*     >
+*       <CRLogo size={16} />
+*     </button>
+*   )}
+*   renderTooltip={({ validation, isVisible, onClose }) =>
+*     isVisible && (
+*       <div className="absolute top-14 right-0 bg-white shadow-lg rounded-lg p-4">
+*         <Passport.Root validation={validation}>
+*           <Passport.Header>...</Passport.Header>
+*           <Passport.Field name="issuer" />
+*           <Passport.Footer>
+*             <Passport.CopyButton />
+*           </Passport.Footer>
+*         </Passport.Root>
+*       </div>
+*     )
+*   }
+* />
+*
+* // With compound components (external overlay)
+* <div className="relative">
+*   <MediaImage src="/photo.jpg" alt="Photo" className="w-full" />
+*   <CredentialOverlay.Root validation={validation} status="success">
+*     <CredentialOverlay.Trigger className="absolute top-2 right-2">
+*       <CredentialBadge.Root status="success" hasCredentials={true}>
+*         <CredentialBadge.Verified>
+*           <button className="bg-green-500 p-2 rounded-full">OK</button>
+*         </CredentialBadge.Verified>
+*       </CredentialBadge.Root>
+*     </CredentialOverlay.Trigger>
+*     <CredentialOverlay.Content className="absolute top-12 right-0">
+*       <Passport.Root validation={validation}>...</Passport.Root>
+*     </CredentialOverlay.Content>
+*   </CredentialOverlay.Root>
+* </div>
+* ```
+*/
+const MediaImage = forwardRef(({ validation = null, validationStatus = "idle", renderBadge, renderTooltip, wrapperClassName, wrapperStyle, hideDelay = 300, enableHeicConversion = true, src, ...imgProps }, ref) => {
+	const { displaySrc, isConverting } = useHeicConversion({
+		src,
+		enabled: enableHeicConversion
+	});
+	const { contextValue, badgeProps, tooltipProps } = useMediaOverlay({
+		validation,
+		validationStatus,
+		hideDelay
+	});
+	const imageElement = /* @__PURE__ */ jsx("img", {
+		ref,
+		...imgProps,
+		src: displaySrc,
+		alt: imgProps.alt || "",
+		"data-converting": isConverting || void 0
+	});
+	if (!renderBadge && !renderTooltip) return imageElement;
+	return /* @__PURE__ */ jsx(MediaContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: wrapperClassName,
+			style: wrapperStyle,
+			children: [
+				imageElement,
+				renderBadge?.(badgeProps),
+				tooltipProps && renderTooltip?.(tooltipProps)
+			]
+		})
+	});
+});
+MediaImage.displayName = "MediaImage";
+
+//#endregion
+//#region src/ui/media/MediaVideo.tsx
+/**
+* MediaVideo - Headless video component with built-in credential overlay support
+*
+* A minimal video component for use with C2PA credentials. Provides built-in
+* support for displaying credential badges and tooltips via render props.
+*
+* This component is headless - it applies no styles. Users must provide
+* all styling through className, style props, or render functions.
+*
+* @example
+* ```tsx
+* // Basic usage - just the video
+* <MediaVideo src="/video.mp4" controls className="w-full h-auto" />
+*
+* // With built-in overlay (using render props)
+* <MediaVideo
+*   src="/video.mp4"
+*   controls
+*   validation={validation}
+*   validationStatus="success"
+*   wrapperClassName="relative inline-block"
+*   className="w-80 h-60 object-cover rounded-lg"
+*   renderBadge={({ status, hasCredentials, toggle }) => (
+*     <button
+*       onClick={toggle}
+*       className="absolute top-2 right-2 bg-green-500 rounded-full p-2"
+*     >
+*       <CRLogo size={16} />
+*     </button>
+*   )}
+*   renderTooltip={({ validation, isVisible, onClose }) =>
+*     isVisible && (
+*       <div className="absolute top-14 right-0 bg-white shadow-lg rounded-lg p-4">
+*         <Passport.Root validation={validation}>
+*           <Passport.Header>...</Passport.Header>
+*           <Passport.Field name="issuer" />
+*           <Passport.Footer>
+*             <Passport.CopyButton />
+*           </Passport.Footer>
+*         </Passport.Root>
+*       </div>
+*     )
+*   }
+* />
+*
+* // With compound components (external overlay)
+* <div className="relative">
+*   <MediaVideo src="/video.mp4" controls className="w-full" />
+*   <CredentialOverlay.Root validation={validation} status="success">
+*     <CredentialOverlay.Trigger className="absolute top-2 right-2">
+*       <CredentialBadge.Root status="success" hasCredentials={true}>
+*         <CredentialBadge.Verified>
+*           <button className="bg-green-500 p-2 rounded-full">OK</button>
+*         </CredentialBadge.Verified>
+*       </CredentialBadge.Root>
+*     </CredentialOverlay.Trigger>
+*     <CredentialOverlay.Content className="absolute top-12 right-0">
+*       <Passport.Root validation={validation}>...</Passport.Root>
+*     </CredentialOverlay.Content>
+*   </CredentialOverlay.Root>
+* </div>
+* ```
+*/
+const MediaVideo = forwardRef(({ validation = null, validationStatus = "idle", renderBadge, renderTooltip, wrapperClassName, wrapperStyle, hideDelay = 300, ...videoProps }, ref) => {
+	const { contextValue, badgeProps, tooltipProps } = useMediaOverlay({
+		validation,
+		validationStatus,
+		hideDelay
+	});
+	const videoElement = /* @__PURE__ */ jsx("video", {
+		ref,
+		...videoProps
+	});
+	if (!renderBadge && !renderTooltip) return videoElement;
+	return /* @__PURE__ */ jsx(MediaContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: wrapperClassName,
+			style: wrapperStyle,
+			children: [
+				videoElement,
+				renderBadge?.(badgeProps),
+				tooltipProps && renderTooltip?.(tooltipProps)
+			]
+		})
+	});
+});
+MediaVideo.displayName = "MediaVideo";
+
+//#endregion
+//#region src/ui/default/LimboPassport.tsx
+const tooltipPositionStyles = {
+	"top-right": {
+		position: "absolute",
+		top: "56px",
+		right: "0",
+		zIndex: 10
+	},
+	"top-left": {
+		position: "absolute",
+		top: "56px",
+		left: "0",
+		zIndex: 10
+	},
+	"bottom-right": {
+		position: "absolute",
+		bottom: "56px",
+		right: "0",
+		zIndex: 10
+	},
+	"bottom-left": {
+		position: "absolute",
+		bottom: "56px",
+		left: "0",
+		zIndex: 10
+	}
+};
+const passportContainerStyles = {
+	light: {
+		backgroundColor: "#ffffff",
+		border: "1px solid #e5e7eb",
+		borderRadius: "12px",
+		padding: "20px",
+		width: "320px",
+		boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+		fontFamily: "system-ui, -apple-system, sans-serif"
+	},
+	dark: {
+		backgroundColor: "#111827",
+		border: "1px solid #374151",
+		borderRadius: "12px",
+		padding: "20px",
+		width: "320px",
+		boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3)",
+		fontFamily: "system-ui, -apple-system, sans-serif"
+	}
+};
+const fieldLabelStyles = {
+	light: {
+		fontSize: "11px",
+		fontWeight: 500,
+		color: "#6b7280",
+		textTransform: "uppercase",
+		letterSpacing: "0.05em",
+		marginBottom: "4px"
+	},
+	dark: {
+		fontSize: "11px",
+		fontWeight: 500,
+		color: "#9ca3af",
+		textTransform: "uppercase",
+		letterSpacing: "0.05em",
+		marginBottom: "4px"
+	}
+};
+const fieldValueStyles = {
+	light: {
+		fontSize: "13px",
+		color: "#111827"
+	},
+	dark: {
+		fontSize: "13px",
+		color: "#f3f4f6"
+	}
+};
+const passportHeaderStyles = {
+	container: {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+		marginBottom: "16px"
+	},
+	logo: {
+		width: "20px",
+		height: "20px"
+	},
+	title: {
+		light: {
+			fontSize: "16px",
+			fontWeight: 600,
+			color: "#111827"
+		},
+		dark: {
+			fontSize: "16px",
+			fontWeight: 600,
+			color: "#ffffff"
+		}
+	}
+};
+const passportFooterStyles = {
+	container: {
+		light: {
+			marginTop: "16px",
+			paddingTop: "16px",
+			borderTop: "1px solid #f3f4f6",
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center"
+		},
+		dark: {
+			marginTop: "16px",
+			paddingTop: "16px",
+			borderTop: "1px solid #374151",
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center"
+		}
+	},
+	copyButton: {
+		light: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "6px",
+			fontSize: "13px",
+			fontWeight: 500,
+			color: "#4b5563",
+			cursor: "pointer",
+			backgroundColor: "transparent",
+			border: "none",
+			padding: 0
+		},
+		dark: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "6px",
+			fontSize: "13px",
+			fontWeight: 500,
+			color: "#9ca3af",
+			cursor: "pointer",
+			backgroundColor: "transparent",
+			border: "none",
+			padding: 0
+		}
+	},
+	closeButton: {
+		light: {
+			fontSize: "13px",
+			color: "#9ca3af",
+			backgroundColor: "transparent",
+			border: "none",
+			cursor: "pointer"
+		},
+		dark: {
+			fontSize: "13px",
+			color: "#6b7280",
+			backgroundColor: "transparent",
+			border: "none",
+			cursor: "pointer"
+		}
+	}
+};
+const fieldContainerStyle = { marginBottom: "12px" };
+const identityStyles = {
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "6px"
+	},
+	item: {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px"
+	},
+	link: {
+		color: "#3b82f6",
+		textDecoration: "none"
+	}
+};
+const signerStyles = { container: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "4px"
+} };
+const actionTagStyles = {
+	light: {
+		backgroundColor: "#f3f4f6",
+		color: "#374151",
+		fontSize: "12px",
+		padding: "2px 8px",
+		borderRadius: "4px"
+	},
+	dark: {
+		backgroundColor: "#374151",
+		color: "#d1d5db",
+		fontSize: "12px",
+		padding: "2px 8px",
+		borderRadius: "4px"
+	}
+};
+const actionsContainerStyle = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "6px"
+};
+/**
+* LimboPassport - Pre-styled passport tooltip component
+*
+* Renders a passport with configurable variant (basic or full).
+*/
+const LimboPassport = ({ validation, isVisible, theme = Theme.Light, position = BadgePosition.TopRight, variant = PassportVariant$1.Basic, showDate = true, onMouseEnter, onClose, style }) => {
+	if (!isVisible) return null;
+	const containerStyle = {
+		...tooltipPositionStyles[position],
+		...style
+	};
+	const isFull = variant === PassportVariant$1.Full;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tooltip",
+		style: containerStyle,
+		onMouseEnter,
+		onMouseLeave: onClose,
+		children: /* @__PURE__ */ jsxs(Passport.Root, {
+			validation,
+			style: passportContainerStyles[theme],
+			children: [
+				/* @__PURE__ */ jsxs(Passport.Header, {
+					style: passportHeaderStyles.container,
+					children: [/* @__PURE__ */ jsx(Passport.Logo, { style: passportHeaderStyles.logo }), /* @__PURE__ */ jsx(Passport.Title, { style: passportHeaderStyles.title[theme] })]
+				}),
+				/* @__PURE__ */ jsx(Passport.Field, {
+					name: "issuer",
+					style: fieldContainerStyle,
+					children: ({ label, value }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						style: fieldLabelStyles[theme],
+						children: label
+					}), /* @__PURE__ */ jsx("div", {
+						style: fieldValueStyles[theme],
+						children: value
+					})] })
+				}),
+				showDate && /* @__PURE__ */ jsx(Passport.Field, {
+					name: "date",
+					style: fieldContainerStyle,
+					children: ({ label, value }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						style: fieldLabelStyles[theme],
+						children: label
+					}), /* @__PURE__ */ jsx("div", {
+						style: fieldValueStyles[theme],
+						children: value
+					})] })
+				}),
+				isFull && /* @__PURE__ */ jsx(Passport.Identities, {
+					style: fieldContainerStyle,
+					children: (identities) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						style: fieldLabelStyles[theme],
+						children: identities.length === 1 ? "Verified Identity" : `Verified Identities (${identities.length})`
+					}), /* @__PURE__ */ jsx("div", {
+						style: identityStyles.container,
+						children: identities.map((identity) => /* @__PURE__ */ jsxs("div", {
+							style: identityStyles.item,
+							children: [identity.provider.toLowerCase().includes("linkedin") && /* @__PURE__ */ jsx(LinkedInIcon, { size: 16 }), identity.uri ? /* @__PURE__ */ jsx("a", {
+								href: identity.uri,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								style: {
+									...fieldValueStyles[theme],
+									...identityStyles.link
+								},
+								children: identity.username
+							}) : /* @__PURE__ */ jsx("span", {
+								style: fieldValueStyles[theme],
+								children: identity.username
+							})]
+						}, identity.provider))
+					})] })
+				}),
+				isFull && /* @__PURE__ */ jsx(Passport.Signers, {
+					style: fieldContainerStyle,
+					children: (signers) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						style: fieldLabelStyles[theme],
+						children: signers.length === 1 ? "Previous Signer" : `Previous Signers (${signers.length})`
+					}), /* @__PURE__ */ jsx("div", {
+						style: signerStyles.container,
+						children: signers.map((signer) => /* @__PURE__ */ jsx("div", {
+							style: fieldValueStyles[theme],
+							children: signer.label
+						}, signer.id))
+					})] })
+				}),
+				isFull && /* @__PURE__ */ jsx(Passport.Actions, {
+					style: fieldContainerStyle,
+					children: (actions) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						style: fieldLabelStyles[theme],
+						children: "Actions"
+					}), /* @__PURE__ */ jsx("div", {
+						style: actionsContainerStyle,
+						children: actions.map((action) => /* @__PURE__ */ jsx("span", {
+							style: actionTagStyles[theme],
+							children: action
+						}, action))
+					})] })
+				}),
+				/* @__PURE__ */ jsxs(Passport.Footer, {
+					style: passportFooterStyles.container[theme],
+					children: [/* @__PURE__ */ jsx(Passport.CopyButton, { style: passportFooterStyles.copyButton[theme] }), isFull && onClose && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						style: passportFooterStyles.closeButton[theme],
+						children: "Close"
+					})]
+				})
+			]
+		})
+	});
+};
+LimboPassport.displayName = "LimboPassport";
+
+//#endregion
+//#region src/ui/default/LimboImage.tsx
+/**
+* LimboImage - Pre-styled image component with default badge and passport
+*
+* A ready-to-use image component that displays content credentials with
+* a pre-configured badge and passport tooltip.
+*
+* @example
+* ```tsx
+* // Basic usage with click interaction
+* <LimboImage
+*   src="/photo.jpg"
+*   alt="Photo"
+*   validation={validation}
+*   validationStatus="success"
+* />
+*
+* // With hover interaction and dark theme
+* <LimboImage
+*   src="/photo.jpg"
+*   alt="Photo"
+*   validation={validation}
+*   validationStatus="success"
+*   interactionMode="hover"
+*   theme="dark"
+*   badgePosition="bottomRight"
+* />
+*
+* // Full passport variant
+* <LimboImage
+*   src="/photo.jpg"
+*   alt="Photo"
+*   validation={validation}
+*   validationStatus="success"
+*   passportVariant="full"
+* />
+* ```
+*/
+const LimboImage = forwardRef(({ validation = null, validationStatus = "idle", badgePosition = BadgePosition.TopRight, theme = Theme.Light, passportVariant = PassportVariant$1.Basic, interactionMode = "click", showDate = true, hideDelay = 300, enableHeicConversion = true, wrapperStyle: customWrapperStyle, ...imgProps }, ref) => {
+	const combinedWrapperStyle = {
+		...wrapperStyle,
+		...customWrapperStyle
+	};
+	const renderBadge = ({ hasCredentials, toggle, show, hide }) => {
+		if (!hasCredentials) return null;
+		return /* @__PURE__ */ jsx(LimboBadge, {
+			position: badgePosition,
+			theme,
+			...interactionMode === "hover" ? {
+				onMouseEnter: show,
+				onMouseLeave: hide
+			} : { onClick: toggle }
+		});
+	};
+	const renderTooltip = ({ validation: tooltipValidation, isVisible, onMouseEnter, onClose }) => /* @__PURE__ */ jsx(LimboPassport, {
+		validation: tooltipValidation,
+		isVisible,
+		theme,
+		position: badgePosition,
+		variant: passportVariant,
+		showDate,
+		onMouseEnter: interactionMode === "hover" ? onMouseEnter : void 0,
+		onClose
+	});
+	return /* @__PURE__ */ jsx(MediaImage, {
+		ref,
+		...imgProps,
+		validation,
+		validationStatus,
+		hideDelay,
+		enableHeicConversion,
+		wrapperStyle: combinedWrapperStyle,
+		renderBadge,
+		renderTooltip
+	});
+});
+LimboImage.displayName = "LimboImage";
+
+//#endregion
+//#region src/ui/default/LimboVideo.tsx
+/**
+* LimboVideo - Pre-styled video component with default badge and passport
+*
+* A ready-to-use video component that displays content credentials with
+* a pre-configured badge and passport tooltip.
+*
+* @example
+* ```tsx
+* // Basic usage with click interaction
+* <LimboVideo
+*   src="/video.mp4"
+*   controls
+*   validation={validation}
+*   validationStatus="success"
+* />
+*
+* // With hover interaction and dark theme
+* <LimboVideo
+*   src="/video.mp4"
+*   controls
+*   validation={validation}
+*   validationStatus="success"
+*   interactionMode="hover"
+*   theme="dark"
+*   badgePosition="bottomRight"
+* />
+*
+* // Full passport variant
+* <LimboVideo
+*   src="/video.mp4"
+*   controls
+*   validation={validation}
+*   validationStatus="success"
+*   passportVariant="full"
+* />
+* ```
+*/
+const LimboVideo = forwardRef(({ validation = null, validationStatus = "idle", badgePosition = BadgePosition.TopRight, theme = Theme.Light, passportVariant = PassportVariant$1.Basic, interactionMode = "click", showDate = true, hideDelay = 300, wrapperStyle: customWrapperStyle, ...videoProps }, ref) => {
+	const combinedWrapperStyle = {
+		...wrapperStyle,
+		...customWrapperStyle
+	};
+	const renderBadge = ({ hasCredentials, toggle, show, hide }) => {
+		if (!hasCredentials) return null;
+		return /* @__PURE__ */ jsx(LimboBadge, {
+			position: badgePosition,
+			theme,
+			...interactionMode === "hover" ? {
+				onMouseEnter: show,
+				onMouseLeave: hide
+			} : { onClick: toggle }
+		});
+	};
+	const renderTooltip = ({ validation: tooltipValidation, isVisible, onMouseEnter, onClose }) => /* @__PURE__ */ jsx(LimboPassport, {
+		validation: tooltipValidation,
+		isVisible,
+		theme,
+		position: badgePosition,
+		variant: passportVariant,
+		showDate,
+		onMouseEnter: interactionMode === "hover" ? onMouseEnter : void 0,
+		onClose
+	});
+	return /* @__PURE__ */ jsx(MediaVideo, {
+		ref,
+		...videoProps,
+		validation,
+		validationStatus,
+		hideDelay,
+		wrapperStyle: combinedWrapperStyle,
+		renderBadge,
+		renderTooltip
+	});
+});
+LimboVideo.displayName = "LimboVideo";
+
+//#endregion
+export { BadgePosition, CRLogo, CredentialBadge, CredentialOverlay, LimboBadge, LimboImage, LimboPassport, LimboVideo, LinkedInIcon, MediaImage, MediaVideo, Passport, PassportVariant, Theme, ValidationStatus, useCredentialBadgeContext, useCredentialOverlayContext, useHeicConversion, useMediaContext, usePassportContext, usePassportData, useTooltipVisibility };
+//# sourceMappingURL=index.mjs.map