function ChartCard({ type = "bar", data, labels, title = "", height = 300, width = 500 }) { const [chart, setChart] = useState(null); useEffect(()=>{ if (!data || !labels) return; const canvasContext = document.getElementById("chartCanvas").getContext("2d"); const chartConfig = { type, data: { labels, datasets: [ { data, backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40" ] } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: !!title, text: title } } } }; if (chart) chart.destroy(); setChart(new Chart(canvasContext, chartConfig)); }, [ type, data, labels, title ]); return /*#__PURE__*/ React.createElement("div", { className: "font-sans p-4 bg-white rounded-lg shadow-md", style: { width, height }, __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: "chartCanvas", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function ChartCardStory() { const barData = { type: "bar", data: [ 12, 19, 3, 5, 2, 3 ], labels: [ "Red", "Blue", "Yellow", "Green", "Purple", "Orange" ], title: "Bar Chart Example" }; const pieData = { type: "pie", data: [ 300, 50, 100, 200 ], labels: [ "Development", "Design", "Marketing", "Sales" ], title: "Company Budget Distribution" }; const lineData = { type: "line", data: [ 65, 59, 80, 81, 56, 55, 40 ], labels: [ "January", "February", "March", "April", "May", "June", "July" ], title: "Monthly Sales" }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChartCard, { ...barData, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChartCard, { ...pieData, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChartCard, { ...lineData, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this })); } function Navigation({ user = {}, tenant = "Default Org", tenants = [], isAdmin = false, logo = "/logo.png" }) { const [isUserMenuOpen, setIsUserMenuOpen] = useState(false); const [isTenantMenuOpen, setIsTenantMenuOpen] = useState(false); return /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo, alt: "Company logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }), isAdmin && /*#__PURE__*/ React.createElement("div", { className: "relative ml-4", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsTenantMenuOpen(!isTenantMenuOpen), className: "flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 23, columnNumber: 19 }, __self: this }, tenant), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-2 text-xs", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this })), isTenantMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-full left-0 w-48 bg-white rounded-md shadow-lg py-1", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, tenants.map((t)=>/*#__PURE__*/ React.createElement("button", { key: t, className: "block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 29, columnNumber: 23 }, __self: this }, t))))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsUserMenuOpen(!isUserMenuOpen), className: "flex items-center h-full px-3 hover:bg-gray-100", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, user.avatar ? /*#__PURE__*/ React.createElement("img", { src: user.avatar, alt: "User avatar", className: "h-8 w-8 rounded-full", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-gray-600", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-2 text-xs text-gray-600", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this })), isUserMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full w-48 bg-white rounded-md shadow-lg py-1", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 text-sm text-gray-700", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, user.name || "Guest User"), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 text-sm text-gray-500", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, user.email || "No email"), /*#__PURE__*/ React.createElement("hr", { className: "my-1", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Sign out")))))); } function NavigationStory() { const mockUser = { name: "John Doe", email: "john@example.com" }; const mockTenants = [ "Org 1", "Org 2", "Org 3" ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { user: mockUser, tenant: "Current Org", tenants: mockTenants, isAdmin: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function SideMenu({ userRole = "tenant" }) { const [isOpen, setIsOpen] = useState(false); const menuItems = { admin: [ { icon: "fa-solid fa-gauge", label: "Dashboard" }, { icon: "fa-solid fa-users", label: "Users" }, { icon: "fa-solid fa-building", label: "Properties" }, { icon: "fa-solid fa-file", label: "Reports" }, { icon: "fa-solid fa-gear", label: "Settings" } ], tenant: [ { icon: "fa-solid fa-home", label: "My Unit" }, { icon: "fa-solid fa-file-invoice", label: "Payments" }, { icon: "fa-solid fa-wrench", label: "Maintenance" }, { icon: "fa-solid fa-message", label: "Messages" } ] }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-[#1a1a1a] text-white w-[250px] p-4 transition-all duration-300 ${isOpen ? "translate-x-0" : "-translate-x-[200px]"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "absolute right-4 top-4 text-white", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, menuItems[userRole].map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center space-x-3 p-3 hover:bg-[#2a2a2a] rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} w-5`, __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, item.label))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Main Content Area"))); } function SideMenuStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Admin View"), /*#__PURE__*/ React.createElement(SideMenu, { userRole: "admin", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Tenant View"), /*#__PURE__*/ React.createElement(SideMenu, { userRole: "tenant", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }))); } function DataTable({ data, columns, itemsPerPage = 10, searchable = true }) { const [currentPage, setCurrentPage] = useState(1); const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" }); const [searchTerm, setSearchTerm] = useState(""); const filteredData = useMemo(()=>{ return data?.filter((item)=>Object.values(item).some((value)=>String(value).toLowerCase().includes(searchTerm.toLowerCase()))); }, [ data, searchTerm ]); const sortedData = useMemo(()=>{ if (!sortConfig.key) return filteredData; return [ ...filteredData ].sort((a, b)=>{ if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === "asc" ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === "asc" ? 1 : -1; } return 0; }); }, [ filteredData, sortConfig ]); const paginatedData = useMemo(()=>{ const startIndex = (currentPage - 1) * itemsPerPage; return sortedData?.slice(startIndex, startIndex + itemsPerPage); }, [ sortedData, currentPage, itemsPerPage ]); const totalPages = Math.ceil((sortedData?.length || 0) / itemsPerPage); const handleSort = (key)=>{ setSortConfig({ key, direction: sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc" }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, searchable && /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "Search...", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, columns?.map((column)=>/*#__PURE__*/ React.createElement("th", { key: column.key, className: "px-6 py-3 cursor-pointer hover:bg-gray-100", onClick: ()=>handleSort(column.key), __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, column.label, sortConfig.key === column.key && /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 75, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-sort-${sortConfig.direction === "asc" ? "up" : "down"}`, __source: { fileName: "", lineNumber: 76, columnNumber: 25 }, __self: this }))))))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, paginatedData?.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b hover:bg-gray-50", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, columns?.map((column)=>/*#__PURE__*/ React.createElement("td", { key: column.key, className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }, item[column.key]))))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 border-t", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50", onClick: ()=>setCurrentPage((prev)=>Math.max(prev - 1, 1)), disabled: currentPage === 1, __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Page ", currentPage, " of ", totalPages || 1), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50", onClick: ()=>setCurrentPage((prev)=>Math.min(prev + 1, totalPages)), disabled: currentPage === totalPages || !totalPages, __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "Next"))); } function DataTableStory() { const sampleData = [ { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" }, { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User" }, { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor" }, { id: 5, name: "Charlie Wilson", email: "charlie@example.com", role: "User" } ]; const columns = [ { key: "id", label: "ID" }, { key: "name", label: "Name" }, { key: "email", label: "Email" }, { key: "role", label: "Role" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 146, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, "Table Example"), /*#__PURE__*/ React.createElement(DataTable, { data: sampleData, columns: columns, itemsPerPage: 2, __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this })); } function MainComponent() { const [hoveredCard, setHoveredCard] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f9fa] min-h-screen p-6", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow", onMouseEnter: ()=>setHoveredCard(0), onMouseLeave: ()=>setHoveredCard(null), __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Total Calls"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-blue-500", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold mt-2 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "1,234"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-green-500 mt-2", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), " 12% from last month")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow", onMouseEnter: ()=>setHoveredCard(1), onMouseLeave: ()=>setHoveredCard(null), __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Active Calls"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-volume text-green-500", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold mt-2 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "42"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-green-500 mt-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), " 8% from last hour")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow", onMouseEnter: ()=>setHoveredCard(2), onMouseLeave: ()=>setHoveredCard(null), __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Success Rate"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-purple-500", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold mt-2 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "95%"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-500 mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), " 2% from yesterday")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow", onMouseEnter: ()=>setHoveredCard(3), onMouseLeave: ()=>setHoveredCard(null), __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Avg Handle Time"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-orange-500", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold mt-2 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "5:23"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-green-500 mt-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), " 3% improvement"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))); }