npm - @beyondcorp/beyond-ui - Versions diffs - 1.0.34 → 1.0.36 - Mend

@beyondcorp/beyond-ui 1.0.34 → 1.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/components/ComponentShowcase/ComponentShowcase.js CHANGED Viewed

@@ -57,6 +57,7 @@ const componentCategories = {
         icon: jsx(Layout, { className: "h-4 w-4" }),
         components: [
             { name: "DashboardLayout", id: "dashboard-layout" },
+            { name: "Page Layout", id: "page-layout" },
             { name: "DashboardGrid", id: "dashboard-grid" },
             { name: "Sidebar", id: "sidebar" },
             { name: "Navbar", id: "navbar" }

package/dist/components/ComponentShowcase/ComponentShowcase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { useState } from \"react\";\r\nimport {\r\n Search,\r\n Copy,\r\n Check,\r\n Monitor,\r\n Tablet,\r\n Smartphone,\r\n Sun,\r\n Moon,\r\n ChevronRight,\r\n ChevronDown,\r\n Code,\r\n Eye,\r\n Book,\r\n Palette,\r\n Layout,\r\n MousePointer,\r\n AlertCircle,\r\n BarChart3,\r\n Settings,\r\n Shield\r\n} from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../Button\";\r\nimport { Input } from \"../Input\";\r\nimport { Badge } from \"../Badge\";\r\nimport { Toast, showToast } from \"../Toast\";\r\n\r\nimport { showcaseRegistry } from \"./showcaseRegistry\";\r\nimport { componentDocs } from \"./componentDocs\";\r\n\r\n// Component categories and their items\r\nconst componentCategories = {\r\n Forms: {\r\n icon: <MousePointer className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Button\", id: \"button\" },\r\n { name: \"Input\", id: \"input\" },\r\n { name: \"Textarea\", id: \"textarea\" },\r\n { name: \"Checkbox\", id: \"checkbox\" },\r\n { name: \"Switch\", id: \"switch\" }\r\n ]\r\n },\r\n \"Data Display\": {\r\n icon: <BarChart3 className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Card\", id: \"card\" },\r\n { name: \"Badge\", id: \"badge\" },\r\n { name: \"Avatar\", id: \"avatar\" },\r\n { name: \"StatsCard\", id: \"statscard\" },\r\n { name: \"Tabs\", id: \"tabs\" },\r\n { name: \"DataTable\", id: \"datatable\" }\r\n ]\r\n },\r\n Feedback: {\r\n icon: <AlertCircle className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Alert\", id: \"alert\" },\r\n { name: \"Toast\", id: \"toast\" },\r\n { name: \"Modal\", id: \"modal\" },\r\n { name: \"Spinner\", id: \"spinner\" },\r\n { name: \"Skeleton\", id: \"skeleton\" }\r\n ]\r\n },\r\n Authentication: {\r\n icon: <Shield className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Auth System\", id: \"auth\" },\r\n { name: \"Login Page\", id: \"login\" },\r\n { name: \"Signup Page\", id: \"signup\" },\r\n { name: \"Password Reset\", id: \"password-reset\" },\r\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\r\n ]\r\n },\r\n Layout: {\r\n icon: <Layout className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\r\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\r\n { name: \"Sidebar\", id: \"sidebar\" },\r\n { name: \"Navbar\", id: \"navbar\" }\r\n ]\r\n }\r\n};\r\n\r\n// Props\r\ninterface ComponentShowcaseProps {\r\n className?: string;\r\n}\r\n\r\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\r\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\r\n const [searchQuery, setSearchQuery] = useState(\"\");\r\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\r\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\r\n const [viewMode, setViewMode] = useState<\"desktop\" \| \"tablet\" \| \"mobile\">(\"desktop\");\r\n const [darkMode, setDarkMode] = useState(false);\r\n const [copiedCode, setCopiedCode] = useState<string \| null>(null);\r\n\r\n const toggleCategory = (category: string) => {\r\n setExpandedCategories((prev) =>\r\n prev.includes(category)\r\n ? prev.filter((c) => c !== category)\r\n : [...prev, category]\r\n );\r\n };\r\n\r\n const copyToClipboard = async (code: string) => {\r\n try {\r\n await navigator.clipboard.writeText(code);\r\n setCopiedCode(code);\r\n showToast.success(\"Code copied to clipboard!\");\r\n setTimeout(() => setCopiedCode(null), 2000);\r\n } catch (err) {\r\n showToast.error(\"Failed to copy code\");\r\n }\r\n };\r\n\r\n const filteredCategories = Object.entries(componentCategories).reduce(\r\n (acc, [categoryName, categoryData]) => {\r\n const filteredComponents = categoryData.components.filter((component) =>\r\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\r\n );\r\n\r\n if (filteredComponents.length > 0) {\r\n (acc as any)[categoryName] = {\r\n ...categoryData,\r\n components: filteredComponents\r\n };\r\n }\r\n\r\n return acc;\r\n },\r\n {} as Partial<typeof componentCategories>\r\n );\r\n\r\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\r\n\r\n const getViewportClass = () => {\r\n switch (viewMode) {\r\n case \"tablet\":\r\n return \"max-w-2xl\";\r\n case \"mobile\":\r\n return \"max-w-sm\";\r\n default:\r\n return \"w-full\";\r\n }\r\n };\r\n\r\n return (\r\n <div className={cn(\"flex h-screen bg-gray-50\", className)}>\r\n <Toast />\r\n\r\n {/* Sidebar /}\r\n <div\r\n className={cn(\r\n \"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col\",\r\n sidebarCollapsed ? \"w-16\" : \"w-80\"\r\n )}\r\n >\r\n {/ Sidebar Header /}\r\n <div className=\"p-4 border-b border-gray-200\">\r\n {!sidebarCollapsed && (\r\n <div className=\"flex items-center justify-between mb-4\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\r\n <Palette className=\"h-4 w-4 text-white\" />\r\n </div>\r\n <span className=\"font-bold text-lg text-gray-900\">Beyond UI</span>\r\n </div>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(true)}\r\n >\r\n <ChevronRight className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {sidebarCollapsed && (\r\n <div className=\"flex justify-center\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(false)}\r\n >\r\n <Palette className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {!sidebarCollapsed && (\r\n <div className=\"relative\">\r\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\r\n <Input\r\n placeholder=\"Search components...\"\r\n value={searchQuery}\r\n onChange={(e) => setSearchQuery(e.target.value)}\r\n className=\"pl-10\"\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/ Navigation /}\r\n <nav className=\"flex-1 p-4 overflow-y-auto\">\r\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\r\n <div key={categoryName} className=\"mb-4\">\r\n <button\r\n onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\r\n \"hover:bg-gray-100 text-gray-700\",\r\n sidebarCollapsed ? \"justify-center\" : \"justify-between\"\r\n )}\r\n >\r\n <div className=\"flex items-center space-x-2\">\r\n {categoryData.icon}\r\n {!sidebarCollapsed && <span>{categoryName}</span>}\r\n </div>\r\n {!sidebarCollapsed && (\r\n <ChevronDown\r\n className={cn(\r\n \"h-4 w-4 transition-transform\",\r\n expandedCategories.includes(categoryName) && \"rotate-180\"\r\n )}\r\n />\r\n )}\r\n </button>\r\n\r\n {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\r\n <div className=\"mt-2 ml-6 space-y-1\">\r\n {categoryData.components.map((component) => (\r\n <button\r\n key={component.id}\r\n onClick={() => setSelectedComponent(component.id)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors\",\r\n selectedComponent === component.id\r\n ? \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\"\r\n : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\r\n )}\r\n >\r\n {component.name}\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </nav>\r\n </div>\r\n\r\n {/ Main Content /}\r\n <div className=\"flex-1 flex flex-col overflow-hidden\">\r\n {/ Header /}\r\n <header className=\"bg-white border-b border-gray-200 p-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-4\">\r\n <h1 className=\"text-2xl font-bold text-gray-900\">\r\n {currentDoc?.name \|\| \"Component Showcase\"}\r\n </h1>\r\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\r\n </div>\r\n\r\n <div className=\"flex items-center space-x-2\">\r\n {/ Viewport Controls /}\r\n <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\r\n <Button\r\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"desktop\")}\r\n >\r\n <Monitor className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"tablet\")}\r\n >\r\n <Tablet className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"mobile\")}\r\n >\r\n <Smartphone className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n\r\n {/ Dark Mode Toggle /}\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setDarkMode(!darkMode)}\r\n >\r\n {darkMode ? (\r\n <Sun className=\"h-4 w-4\" />\r\n ) : (\r\n <Moon className=\"h-4 w-4\" />\r\n )}\r\n </Button>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/ Content /}\r\n <main className=\"flex-1 overflow-auto p-6\">\r\n {currentDoc ? (\r\n <div className=\"max-w-6xl mx-auto space-y-8\">\r\n {/ Description /}\r\n <div>\r\n <p className=\"text-lg text-gray-600\">{currentDoc.description}</p>\r\n </div>\r\n\r\n {/ Tabs /}\r\n <div>\r\n <div className=\"flex gap-3 mb-4\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Eye className=\"h-4 w-4 mr-2\" />\r\n Preview\r\n </Button>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Code className=\"h-4 w-4 mr-2\" />\r\n Code\r\n </Button>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Settings className=\"h-4 w-4 mr-2\" />\r\n Props\r\n </Button>\r\n </div>\r\n <div>\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n {/ Preview /}\r\n <div\r\n className={cn(\r\n \"mx-auto transition-all duration-300\",\r\n getViewportClass()\r\n )}\r\n >\r\n <div className={cn(darkMode && \"dark\")}>\r\n {showcaseRegistry[selectedComponent]\r\n ? React.createElement(\r\n showcaseRegistry[selectedComponent]\r\n )\r\n : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/ Code Example /}\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <div className=\"flex flex-row items-center justify-between\">\r\n <h2 className=\"text-lg font-semibold mb-0\">\r\n Usage Example\r\n </h2>\r\n <Button\r\n variant=\"outline\"\r\n size=\"sm\"\r\n onClick={() => copyToClipboard(currentDoc.example)}\r\n >\r\n {copiedCode === currentDoc.example ? (\r\n <Check className=\"h-4 w-4 mr-2\" />\r\n ) : (\r\n <Copy className=\"h-4 w-4 mr-2\" />\r\n )}\r\n Copy\r\n </Button>\r\n </div>\r\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\r\n <code>{currentDoc.example}</code>\r\n </pre>\r\n </div>\r\n </div>\r\n\r\n {/ Props Table */}\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <h2 className=\"text-lg font-semibold mb-4\">\r\n Component Props\r\n </h2>\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full border-collapse\">\r\n <thead>\r\n <tr className=\"border-b border-gray-200\">\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Prop\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Type\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Default\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Description\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {currentDoc.props?.map((prop: any, index: number) => (\r\n <tr key={index} className=\"border-b border-gray-100\">\r\n <td className=\"p-3\">\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.name}\r\n </code>\r\n {\"required\" in prop && prop.required && (\r\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\r\n Required\r\n </Badge>\r\n )}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.type}</td>\r\n <td className=\"p-3 text-gray-600\">\r\n {\"default\" in prop && prop.default ? (\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.default}\r\n </code>\r\n ) : null}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.description}</td>\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-center h-full\">\r\n <div className=\"text-center\">\r\n <Book className=\"h-16 w-16 text-gray-400 mx-auto mb-4\" />\r\n <h2 className=\"text-xl font-semibold text-gray-900 mb-2\">\r\n Select a Component\r\n </h2>\r\n <p className=\"text-gray-600\">\r\n Choose a component from the sidebar to view its documentation and examples.\r\n </p>\r\n </div>\r\n </div>\r\n )}\r\n </main>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { useState } from \"react\";\r\nimport {\r\n Search,\r\n Copy,\r\n Check,\r\n Monitor,\r\n Tablet,\r\n Smartphone,\r\n Sun,\r\n Moon,\r\n ChevronRight,\r\n ChevronDown,\r\n Code,\r\n Eye,\r\n Book,\r\n Palette,\r\n Layout,\r\n MousePointer,\r\n AlertCircle,\r\n BarChart3,\r\n Settings,\r\n Shield\r\n} from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../Button\";\r\nimport { Input } from \"../Input\";\r\nimport { Badge } from \"../Badge\";\r\nimport { Toast, showToast } from \"../Toast\";\r\n\r\nimport { showcaseRegistry } from \"./showcaseRegistry\";\r\nimport { componentDocs } from \"./componentDocs\";\r\n\r\n// Component categories and their items\r\nconst componentCategories = {\r\n Forms: {\r\n icon: <MousePointer className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Button\", id: \"button\" },\r\n { name: \"Input\", id: \"input\" },\r\n { name: \"Textarea\", id: \"textarea\" },\r\n { name: \"Checkbox\", id: \"checkbox\" },\r\n { name: \"Switch\", id: \"switch\" }\r\n ]\r\n },\r\n \"Data Display\": {\r\n icon: <BarChart3 className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Card\", id: \"card\" },\r\n { name: \"Badge\", id: \"badge\" },\r\n { name: \"Avatar\", id: \"avatar\" },\r\n { name: \"StatsCard\", id: \"statscard\" },\r\n { name: \"Tabs\", id: \"tabs\" },\r\n { name: \"DataTable\", id: \"datatable\" }\r\n ]\r\n },\r\n Feedback: {\r\n icon: <AlertCircle className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Alert\", id: \"alert\" },\r\n { name: \"Toast\", id: \"toast\" },\r\n { name: \"Modal\", id: \"modal\" },\r\n { name: \"Spinner\", id: \"spinner\" },\r\n { name: \"Skeleton\", id: \"skeleton\" }\r\n ]\r\n },\r\n Authentication: {\r\n icon: <Shield className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Auth System\", id: \"auth\" },\r\n { name: \"Login Page\", id: \"login\" },\r\n { name: \"Signup Page\", id: \"signup\" },\r\n { name: \"Password Reset\", id: \"password-reset\" },\r\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\r\n ]\r\n },\r\n Layout: {\r\n icon: <Layout className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\r\n { name: \"Page Layout\", id: \"page-layout\" },\r\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\r\n { name: \"Sidebar\", id: \"sidebar\" },\r\n { name: \"Navbar\", id: \"navbar\" }\r\n ]\r\n }\r\n};\r\n\r\n// Props\r\ninterface ComponentShowcaseProps {\r\n className?: string;\r\n}\r\n\r\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\r\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\r\n const [searchQuery, setSearchQuery] = useState(\"\");\r\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\r\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\r\n const [viewMode, setViewMode] = useState<\"desktop\" \| \"tablet\" \| \"mobile\">(\"desktop\");\r\n const [darkMode, setDarkMode] = useState(false);\r\n const [copiedCode, setCopiedCode] = useState<string \| null>(null);\r\n\r\n const toggleCategory = (category: string) => {\r\n setExpandedCategories((prev) =>\r\n prev.includes(category)\r\n ? prev.filter((c) => c !== category)\r\n : [...prev, category]\r\n );\r\n };\r\n\r\n const copyToClipboard = async (code: string) => {\r\n try {\r\n await navigator.clipboard.writeText(code);\r\n setCopiedCode(code);\r\n showToast.success(\"Code copied to clipboard!\");\r\n setTimeout(() => setCopiedCode(null), 2000);\r\n } catch (err) {\r\n showToast.error(\"Failed to copy code\");\r\n }\r\n };\r\n\r\n const filteredCategories = Object.entries(componentCategories).reduce(\r\n (acc, [categoryName, categoryData]) => {\r\n const filteredComponents = categoryData.components.filter((component) =>\r\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\r\n );\r\n\r\n if (filteredComponents.length > 0) {\r\n (acc as any)[categoryName] = {\r\n ...categoryData,\r\n components: filteredComponents\r\n };\r\n }\r\n\r\n return acc;\r\n },\r\n {} as Partial<typeof componentCategories>\r\n );\r\n\r\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\r\n\r\n const getViewportClass = () => {\r\n switch (viewMode) {\r\n case \"tablet\":\r\n return \"max-w-2xl\";\r\n case \"mobile\":\r\n return \"max-w-sm\";\r\n default:\r\n return \"w-full\";\r\n }\r\n };\r\n\r\n return (\r\n <div className={cn(\"flex h-screen bg-gray-50\", className)}>\r\n <Toast />\r\n\r\n {/* Sidebar /}\r\n <div\r\n className={cn(\r\n \"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col\",\r\n sidebarCollapsed ? \"w-16\" : \"w-80\"\r\n )}\r\n >\r\n {/ Sidebar Header /}\r\n <div className=\"p-4 border-b border-gray-200\">\r\n {!sidebarCollapsed && (\r\n <div className=\"flex items-center justify-between mb-4\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\r\n <Palette className=\"h-4 w-4 text-white\" />\r\n </div>\r\n <span className=\"font-bold text-lg text-gray-900\">Beyond UI</span>\r\n </div>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(true)}\r\n >\r\n <ChevronRight className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {sidebarCollapsed && (\r\n <div className=\"flex justify-center\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(false)}\r\n >\r\n <Palette className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {!sidebarCollapsed && (\r\n <div className=\"relative\">\r\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\r\n <Input\r\n placeholder=\"Search components...\"\r\n value={searchQuery}\r\n onChange={(e) => setSearchQuery(e.target.value)}\r\n className=\"pl-10\"\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/ Navigation /}\r\n <nav className=\"flex-1 p-4 overflow-y-auto\">\r\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\r\n <div key={categoryName} className=\"mb-4\">\r\n <button\r\n onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\r\n \"hover:bg-gray-100 text-gray-700\",\r\n sidebarCollapsed ? \"justify-center\" : \"justify-between\"\r\n )}\r\n >\r\n <div className=\"flex items-center space-x-2\">\r\n {categoryData.icon}\r\n {!sidebarCollapsed && <span>{categoryName}</span>}\r\n </div>\r\n {!sidebarCollapsed && (\r\n <ChevronDown\r\n className={cn(\r\n \"h-4 w-4 transition-transform\",\r\n expandedCategories.includes(categoryName) && \"rotate-180\"\r\n )}\r\n />\r\n )}\r\n </button>\r\n\r\n {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\r\n <div className=\"mt-2 ml-6 space-y-1\">\r\n {categoryData.components.map((component) => (\r\n <button\r\n key={component.id}\r\n onClick={() => setSelectedComponent(component.id)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors\",\r\n selectedComponent === component.id\r\n ? \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\"\r\n : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\r\n )}\r\n >\r\n {component.name}\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </nav>\r\n </div>\r\n\r\n {/ Main Content /}\r\n <div className=\"flex-1 flex flex-col overflow-hidden\">\r\n {/ Header /}\r\n <header className=\"bg-white border-b border-gray-200 p-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-4\">\r\n <h1 className=\"text-2xl font-bold text-gray-900\">\r\n {currentDoc?.name \|\| \"Component Showcase\"}\r\n </h1>\r\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\r\n </div>\r\n\r\n <div className=\"flex items-center space-x-2\">\r\n {/ Viewport Controls /}\r\n <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\r\n <Button\r\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"desktop\")}\r\n >\r\n <Monitor className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"tablet\")}\r\n >\r\n <Tablet className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"mobile\")}\r\n >\r\n <Smartphone className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n\r\n {/ Dark Mode Toggle /}\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setDarkMode(!darkMode)}\r\n >\r\n {darkMode ? (\r\n <Sun className=\"h-4 w-4\" />\r\n ) : (\r\n <Moon className=\"h-4 w-4\" />\r\n )}\r\n </Button>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/ Content /}\r\n <main className=\"flex-1 overflow-auto p-6\">\r\n {currentDoc ? (\r\n <div className=\"max-w-6xl mx-auto space-y-8\">\r\n {/ Description /}\r\n <div>\r\n <p className=\"text-lg text-gray-600\">{currentDoc.description}</p>\r\n </div>\r\n\r\n {/ Tabs /}\r\n <div>\r\n <div className=\"flex gap-3 mb-4\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Eye className=\"h-4 w-4 mr-2\" />\r\n Preview\r\n </Button>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Code className=\"h-4 w-4 mr-2\" />\r\n Code\r\n </Button>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Settings className=\"h-4 w-4 mr-2\" />\r\n Props\r\n </Button>\r\n </div>\r\n <div>\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n {/ Preview /}\r\n <div\r\n className={cn(\r\n \"mx-auto transition-all duration-300\",\r\n getViewportClass()\r\n )}\r\n >\r\n <div className={cn(darkMode && \"dark\")}>\r\n {showcaseRegistry[selectedComponent]\r\n ? React.createElement(\r\n showcaseRegistry[selectedComponent]\r\n )\r\n : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/ Code Example /}\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <div className=\"flex flex-row items-center justify-between\">\r\n <h2 className=\"text-lg font-semibold mb-0\">\r\n Usage Example\r\n </h2>\r\n <Button\r\n variant=\"outline\"\r\n size=\"sm\"\r\n onClick={() => copyToClipboard(currentDoc.example)}\r\n >\r\n {copiedCode === currentDoc.example ? (\r\n <Check className=\"h-4 w-4 mr-2\" />\r\n ) : (\r\n <Copy className=\"h-4 w-4 mr-2\" />\r\n )}\r\n Copy\r\n </Button>\r\n </div>\r\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\r\n <code>{currentDoc.example}</code>\r\n </pre>\r\n </div>\r\n </div>\r\n\r\n {/ Props Table */}\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <h2 className=\"text-lg font-semibold mb-4\">\r\n Component Props\r\n </h2>\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full border-collapse\">\r\n <thead>\r\n <tr className=\"border-b border-gray-200\">\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Prop\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Type\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Default\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Description\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {currentDoc.props?.map((prop: any, index: number) => (\r\n <tr key={index} className=\"border-b border-gray-100\">\r\n <td className=\"p-3\">\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.name}\r\n </code>\r\n {\"required\" in prop && prop.required && (\r\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\r\n Required\r\n </Badge>\r\n )}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.type}</td>\r\n <td className=\"p-3 text-gray-600\">\r\n {\"default\" in prop && prop.default ? (\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.default}\r\n </code>\r\n ) : null}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.description}</td>\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-center h-full\">\r\n <div className=\"text-center\">\r\n <Book className=\"h-16 w-16 text-gray-400 mx-auto mb-4\" />\r\n <h2 className=\"text-xl font-semibold text-gray-900 mb-2\">\r\n Select a Component\r\n </h2>\r\n <p className=\"text-gray-600\">\r\n Choose a component from the sidebar to view its documentation and examples.\r\n </p>\r\n </div>\r\n </div>\r\n )}\r\n </main>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/ComponentShowcase/componentDocs.d.ts CHANGED Viewed

@@ -188,6 +188,22 @@ export declare const componentDocs: {
         example: string;
         props: never[];
     };
+    "page-layout": {
+        name: string;
+        description: string;
+        example: string;
+        props: ({
+            name: string;
+            type: string;
+            default: string;
+            description: string;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+        })[];
+    };
     login: {
         name: string;
         description: string;

package/dist/components/ComponentShowcase/componentDocs.js CHANGED Viewed

@@ -163,6 +163,43 @@ const componentDocs = {
         example: `<DataTable columns={[]} dataSource={[]} />`,
         props: []
     },
+    "page-layout": {
+        name: "Page Layout",
+        description: "Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.",
+        example: `import { PageLayout, PageHeader, PageContent, PageFooter } from "@/components/PageLayout";
+function Example() {
+  return (
+    <PageLayout variant="default" maxWidth="xl">
+      <PageHeader>
+        <nav>
+          <span>My App</span>
+        </nav>
+      </PageHeader>
+      <PageContent maxWidth="lg">
+        <h1>Welcome!</h1>
+        <p>Your content here...</p>
+      </PageContent>
+      <PageFooter variant="simple">
+        <p>&copy; 2024 My App. All rights reserved.</p>
+      </PageFooter>
+    </PageLayout>
+  );
+}`,
+        props: [
+            { name: "variant", type: "\"default\"|\"centered\"|\"sidebar\"|\"landing\"|\"product\"|\"blog\"", default: "\"default\"", description: "Sets page color and layout preset" },
+            { name: "maxWidth", type: "\"none\"|\"sm\"|\"md\"|\"lg\"|\"xl\"|\"2xl\"|\"full\"", default: "\"xl\"", description: "Limits overall page width for content" },
+            { name: "contentLayout", type: "\"default\"|\"centered\"|\"sidebar\"|\"fullWidth\"", default: "\"default\"", description: "Layout mode for PageLayoutContent" },
+            { name: "contentSpacing", type: "\"none\"|\"sm\"|\"md\"|\"lg\"|\"xl\"", default: "\"md\"", description: "Vertical padding spacing" },
+            { name: "children", type: "ReactNode", description: "Page structure (usually header, content, sidebar, footer)" },
+            // Optionally highlight subcomponent props
+            { name: "PageHeader", type: "Sticky/Transparent, children", description: "Header settings for navigation bar" },
+            { name: "PageHero", type: "fullHeight, backgroundImage, overlay, children", description: "Hero section for landing visuals" },
+            { name: "PageContent", type: "maxWidth, children", description: "Content area for main body text/components" },
+            { name: "PageSidebar", type: "position, width, children", description: "Sidebar area (e.g. for menu or extra info)" },
+            { name: "PageFooter", type: "variant, children", description: "Footer configuration" }
+        ]
+    },
     // --- AUTHENTICATION DEMOS ---
     login: {
         name: "Login Page",

package/dist/components/ComponentShowcase/componentDocs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"componentDocs.js","sources":["../../../src/components/ComponentShowcase/componentDocs.ts"],"sourcesContent":["/*\r\n Centralized docs/config for all showcased components:\r\n * - description, usage example, props table, etc.\r\n * Used for ComponentShowcase main screen documentation.\r\n */\r\nexport const componentDocs = {\r\n button: {\r\n name: \"Button\",\r\n description: \"A versatile button component with multiple variants and sizes.\",\r\n example: `<Button variant=\"primary\" size=\"md\">\r\n Click me\r\n</Button>`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"primary\", description: \"Button style variant\" },\r\n { name: \"size\", type: \"string\", default: \"md\", description: \"Button size\" },\r\n { name: \"disabled\", type: \"boolean\", default: \"false\", description: \"Disable the button\" }\r\n ]\r\n },\r\n input: {\r\n name: \"Input\",\r\n description: \"A flexible input component with validation states and different sizes.\",\r\n example: `<Input placeholder=\"Enter your email\" />`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"default\", description: \"Input variant (default/success/error)\" },\r\n { name: \"inputSize\", type: \"string\", default: \"md\", description: \"Input size\" },\r\n { name: \"placeholder\", type: \"string\", default: \"\", description: \"Placeholder text\" }\r\n ]\r\n },\r\n badge: {\r\n name: \"Badge\",\r\n description: \"A small tag for statuses or classifications.\",\r\n example: `<Badge>Default</Badge>`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"default\", description: \"Badge style variant\" }\r\n ]\r\n },\r\n card: {\r\n name: \"Card\",\r\n description: \"A container element for grouping content.\",\r\n example: `<Card><CardContent>Example</CardContent></Card>`,\r\n props: [\r\n { name: \"children\", type: \"ReactNode\", description: \"Card content\" }\r\n ]\r\n },\r\n textarea: {\r\n name: \"Textarea\",\r\n description: \"A multi-line text input component.\",\r\n example: `<Textarea placeholder=\"Write here...\" />`,\r\n props: [\r\n { name: \"rows\", type: \"number\", default: 3, description: \"Number of rows\" }\r\n ]\r\n },\r\n checkbox: {\r\n name: \"Checkbox\",\r\n description: \"A standard form checkbox.\",\r\n example: `<Checkbox checked={true} />`,\r\n props: [\r\n { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\r\n ]\r\n },\r\n switch: {\r\n name: \"Switch\",\r\n description: \"A boolean toggle control.\",\r\n example: `<Switch checked={true} />`,\r\n props: [\r\n { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\r\n ]\r\n },\r\n avatar: {\r\n name: \"Avatar\",\r\n description: \"Displays a user profile image or initials.\",\r\n example: `<Avatar><AvatarFallback>U</AvatarFallback></Avatar>`,\r\n props: [\r\n { name: \"size\", type: \"\\\"sm\\\"\|\\\"md\\\"\|\\\"lg\\\"\", default: \"md\", description: \"Avatar size\" }\r\n ]\r\n },\r\n alert: {\r\n name: \"Alert\",\r\n description: \"Displays messages for important info.\",\r\n example: `<Alert variant=\"info\"><AlertTitle>Info</AlertTitle></Alert>`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"info\", description: \"Alert type\" }\r\n ]\r\n },\r\n toast: {\r\n name: \"Toast\",\r\n description: \"Transient notification message overlay.\",\r\n example: `<Toast />`,\r\n props: []\r\n },\r\n modal: {\r\n name: \"Modal\",\r\n description: \"A dialog overlay for user attention.\",\r\n example: `<Modal open={true} onOpenChange={() => {}} />`,\r\n props: [\r\n { name: \"open\", type: \"boolean\", description: \"Show or hide the modal\" }\r\n ]\r\n },\r\n spinner: {\r\n name: \"Spinner\",\r\n description: \"Animated indicator for loading states.\",\r\n example: `<Spinner />`,\r\n props: []\r\n },\r\n skeleton: {\r\n name: \"Skeleton\",\r\n description: \"Shimmer placeholder for loading UIs.\",\r\n example: `<Skeleton className=\"h-6 w-32\" />`,\r\n props: [\r\n { name: \"className\", type: \"string\", description: \"Skeleton custom styles\" }\r\n ]\r\n },\r\n statscard: {\r\n name: \"StatsCard\",\r\n description: \"Shows key metrics and trends.\",\r\n example: `<StatsCard title=\"Users\" value=\"2,543\" />`,\r\n props: [\r\n { name: \"title\", type: \"string\", description: \"Card title\" },\r\n { name: \"value\", type: \"string\|number\", description: \"Main value\" }\r\n ]\r\n },\r\n tabs: {\r\n name: \"Tabs\",\r\n description: \"Navigation between content views.\",\r\n example: `<Tabs value=\"tab-1\"><TabsList>...</TabsList></Tabs>`,\r\n props: [\r\n { name: \"value\", type: \"string\", description: \"Selected tab value\" }\r\n ]\r\n },\r\n sidebar: {\r\n name: \"Sidebar\",\r\n description: \"Persistent vertical navigation panel.\",\r\n example: `<Sidebar menuItems={[]} />`,\r\n props: []\r\n },\r\n navbar: {\r\n name: \"Navbar\",\r\n description: \"Top navigation bar for branding and links.\",\r\n example: `<Navbar>...</Navbar>`,\r\n props: []\r\n },\r\n \"dashboard-layout\": {\r\n name: \"DashboardLayout\",\r\n description: \"Layout for dashboards with sidebar and content.\",\r\n example: `<DashboardLayout>...</DashboardLayout>`,\r\n props: []\r\n },\r\n \"dashboard-header\": {\r\n name: \"DashboardHeader\",\r\n description: \"Header for dashboard screens.\",\r\n example: `<DashboardHeader />`,\r\n props: []\r\n },\r\n \"dashboard-grid\": {\r\n name: \"DashboardGrid\",\r\n description: \"Grid container for dashboard widgets.\",\r\n example: `<DashboardGrid>...</DashboardGrid>`,\r\n props: []\r\n },\r\n datatable: {\r\n name: \"DataTable\",\r\n description: \"Advanced table for displaying data collections.\",\r\n example: `<DataTable columns={[]} dataSource={[]} />`,\r\n props: []\r\n },\r\n // --- AUTHENTICATION DEMOS ---\r\n login: {\r\n name: \"Login Page\",\r\n description: \"Showcases the reusable LoginForm component as a full login page example.\",\r\n example: `<LoginForm />`,\r\n props: []\r\n },\r\n signup: {\r\n name: \"Signup Page\",\r\n description: \"Showcases the reusable SignupForm component as a full signup page example.\",\r\n example: `<SignupForm />`,\r\n props: []\r\n },\r\n shield: {\r\n name: \"!isAuthenticated Shield\",\r\n description: \"ProtectedRoute gate which only renders content when authenticated; otherwise shows fallback.\",\r\n example: `<ProtectedRoute>Protected Content</ProtectedRoute>`,\r\n props: []\r\n },\r\n auth: {\r\n name: \"Auth System\",\r\n description: \"Demo of authentication UI and flows.\",\r\n example: `<AuthShowcase />`,\r\n props: []\r\n },\r\n \"password-reset\": {\r\n name: \"Password Reset\",\r\n description: \"Showcases the reusable PasswordResetForm component, allowing users to request a password reset via email.\",\r\n example: `<PasswordResetForm onReset={email => { ... }} />`,\r\n props: [\r\n { name: \"onReset\", type: \"(email: string) => Promise<void> \| void\", description: \"Submit reset request callback\" },\r\n { name: \"isLoading\", type: \"boolean\", description: \"Loading indicator\" },\r\n { name: \"successMessage\", type: \"string\", description: \"Message displayed on success\" },\r\n { name: \"errorMessage\", type: \"string\", description: \"Error feedback message\" }\r\n ],\r\n },\r\n};\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"componentDocs.js","sources":["../../../src/components/ComponentShowcase/componentDocs.ts"],"sourcesContent":["/*\r\n Centralized docs/config for all showcased components:\r\n * - description, usage example, props table, etc.\r\n * Used for ComponentShowcase main screen documentation.\r\n */\r\nexport const componentDocs = {\r\n button: {\r\n name: \"Button\",\r\n description: \"A versatile button component with multiple variants and sizes.\",\r\n example: `<Button variant=\"primary\" size=\"md\">\r\n Click me\r\n</Button>`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"primary\", description: \"Button style variant\" },\r\n { name: \"size\", type: \"string\", default: \"md\", description: \"Button size\" },\r\n { name: \"disabled\", type: \"boolean\", default: \"false\", description: \"Disable the button\" }\r\n ]\r\n },\r\n input: {\r\n name: \"Input\",\r\n description: \"A flexible input component with validation states and different sizes.\",\r\n example: `<Input placeholder=\"Enter your email\" />`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"default\", description: \"Input variant (default/success/error)\" },\r\n { name: \"inputSize\", type: \"string\", default: \"md\", description: \"Input size\" },\r\n { name: \"placeholder\", type: \"string\", default: \"\", description: \"Placeholder text\" }\r\n ]\r\n },\r\n badge: {\r\n name: \"Badge\",\r\n description: \"A small tag for statuses or classifications.\",\r\n example: `<Badge>Default</Badge>`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"default\", description: \"Badge style variant\" }\r\n ]\r\n },\r\n card: {\r\n name: \"Card\",\r\n description: \"A container element for grouping content.\",\r\n example: `<Card><CardContent>Example</CardContent></Card>`,\r\n props: [\r\n { name: \"children\", type: \"ReactNode\", description: \"Card content\" }\r\n ]\r\n },\r\n textarea: {\r\n name: \"Textarea\",\r\n description: \"A multi-line text input component.\",\r\n example: `<Textarea placeholder=\"Write here...\" />`,\r\n props: [\r\n { name: \"rows\", type: \"number\", default: 3, description: \"Number of rows\" }\r\n ]\r\n },\r\n checkbox: {\r\n name: \"Checkbox\",\r\n description: \"A standard form checkbox.\",\r\n example: `<Checkbox checked={true} />`,\r\n props: [\r\n { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\r\n ]\r\n },\r\n switch: {\r\n name: \"Switch\",\r\n description: \"A boolean toggle control.\",\r\n example: `<Switch checked={true} />`,\r\n props: [\r\n { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\r\n ]\r\n },\r\n avatar: {\r\n name: \"Avatar\",\r\n description: \"Displays a user profile image or initials.\",\r\n example: `<Avatar><AvatarFallback>U</AvatarFallback></Avatar>`,\r\n props: [\r\n { name: \"size\", type: \"\\\"sm\\\"\|\\\"md\\\"\|\\\"lg\\\"\", default: \"md\", description: \"Avatar size\" }\r\n ]\r\n },\r\n alert: {\r\n name: \"Alert\",\r\n description: \"Displays messages for important info.\",\r\n example: `<Alert variant=\"info\"><AlertTitle>Info</AlertTitle></Alert>`,\r\n props: [\r\n { name: \"variant\", type: \"string\", default: \"info\", description: \"Alert type\" }\r\n ]\r\n },\r\n toast: {\r\n name: \"Toast\",\r\n description: \"Transient notification message overlay.\",\r\n example: `<Toast />`,\r\n props: []\r\n },\r\n modal: {\r\n name: \"Modal\",\r\n description: \"A dialog overlay for user attention.\",\r\n example: `<Modal open={true} onOpenChange={() => {}} />`,\r\n props: [\r\n { name: \"open\", type: \"boolean\", description: \"Show or hide the modal\" }\r\n ]\r\n },\r\n spinner: {\r\n name: \"Spinner\",\r\n description: \"Animated indicator for loading states.\",\r\n example: `<Spinner />`,\r\n props: []\r\n },\r\n skeleton: {\r\n name: \"Skeleton\",\r\n description: \"Shimmer placeholder for loading UIs.\",\r\n example: `<Skeleton className=\"h-6 w-32\" />`,\r\n props: [\r\n { name: \"className\", type: \"string\", description: \"Skeleton custom styles\" }\r\n ]\r\n },\r\n statscard: {\r\n name: \"StatsCard\",\r\n description: \"Shows key metrics and trends.\",\r\n example: `<StatsCard title=\"Users\" value=\"2,543\" />`,\r\n props: [\r\n { name: \"title\", type: \"string\", description: \"Card title\" },\r\n { name: \"value\", type: \"string\|number\", description: \"Main value\" }\r\n ]\r\n },\r\n tabs: {\r\n name: \"Tabs\",\r\n description: \"Navigation between content views.\",\r\n example: `<Tabs value=\"tab-1\"><TabsList>...</TabsList></Tabs>`,\r\n props: [\r\n { name: \"value\", type: \"string\", description: \"Selected tab value\" }\r\n ]\r\n },\r\n sidebar: {\r\n name: \"Sidebar\",\r\n description: \"Persistent vertical navigation panel.\",\r\n example: `<Sidebar menuItems={[]} />`,\r\n props: []\r\n },\r\n navbar: {\r\n name: \"Navbar\",\r\n description: \"Top navigation bar for branding and links.\",\r\n example: `<Navbar>...</Navbar>`,\r\n props: []\r\n },\r\n \"dashboard-layout\": {\r\n name: \"DashboardLayout\",\r\n description: \"Layout for dashboards with sidebar and content.\",\r\n example: `<DashboardLayout>...</DashboardLayout>`,\r\n props: []\r\n },\r\n \"dashboard-header\": {\r\n name: \"DashboardHeader\",\r\n description: \"Header for dashboard screens.\",\r\n example: `<DashboardHeader />`,\r\n props: []\r\n },\r\n \"dashboard-grid\": {\r\n name: \"DashboardGrid\",\r\n description: \"Grid container for dashboard widgets.\",\r\n example: `<DashboardGrid>...</DashboardGrid>`,\r\n props: []\r\n },\r\n datatable: {\r\n name: \"DataTable\",\r\n description: \"Advanced table for displaying data collections.\",\r\n example: `<DataTable columns={[]} dataSource={[]} />`,\r\n props: []\r\n },\r\n \"page-layout\": {\r\n name: \"Page Layout\",\r\n description: \"Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.\",\r\n example: `import { PageLayout, PageHeader, PageContent, PageFooter } from \"@/components/PageLayout\";\r\n\r\nfunction Example() {\r\n return (\r\n <PageLayout variant=\"default\" maxWidth=\"xl\">\r\n <PageHeader>\r\n <nav>\r\n <span>My App</span>\r\n </nav>\r\n </PageHeader>\r\n <PageContent maxWidth=\"lg\">\r\n <h1>Welcome!</h1>\r\n <p>Your content here...</p>\r\n </PageContent>\r\n <PageFooter variant=\"simple\">\r\n <p>© 2024 My App. All rights reserved.</p>\r\n </PageFooter>\r\n </PageLayout>\r\n );\r\n}`,\r\n props: [\r\n { name: \"variant\", type: \"\\\"default\\\"\|\\\"centered\\\"\|\\\"sidebar\\\"\|\\\"landing\\\"\|\\\"product\\\"\|\\\"blog\\\"\", default: \"\\\"default\\\"\", description: \"Sets page color and layout preset\" },\r\n { name: \"maxWidth\", type: \"\\\"none\\\"\|\\\"sm\\\"\|\\\"md\\\"\|\\\"lg\\\"\|\\\"xl\\\"\|\\\"2xl\\\"\|\\\"full\\\"\", default: \"\\\"xl\\\"\", description: \"Limits overall page width for content\" },\r\n { name: \"contentLayout\", type: \"\\\"default\\\"\|\\\"centered\\\"\|\\\"sidebar\\\"\|\\\"fullWidth\\\"\", default: \"\\\"default\\\"\", description: \"Layout mode for PageLayoutContent\" },\r\n { name: \"contentSpacing\", type: \"\\\"none\\\"\|\\\"sm\\\"\|\\\"md\\\"\|\\\"lg\\\"\|\\\"xl\\\"\", default: \"\\\"md\\\"\", description: \"Vertical padding spacing\" },\r\n { name: \"children\", type: \"ReactNode\", description: \"Page structure (usually header, content, sidebar, footer)\" },\r\n // Optionally highlight subcomponent props\r\n { name: \"PageHeader\", type: \"Sticky/Transparent, children\", description: \"Header settings for navigation bar\" },\r\n { name: \"PageHero\", type: \"fullHeight, backgroundImage, overlay, children\", description: \"Hero section for landing visuals\" },\r\n { name: \"PageContent\", type: \"maxWidth, children\", description: \"Content area for main body text/components\" },\r\n { name: \"PageSidebar\", type: \"position, width, children\", description: \"Sidebar area (e.g. for menu or extra info)\" },\r\n { name: \"PageFooter\", type: \"variant, children\", description: \"Footer configuration\" }\r\n ]\r\n },\r\n // --- AUTHENTICATION DEMOS ---\r\n login: {\r\n name: \"Login Page\",\r\n description: \"Showcases the reusable LoginForm component as a full login page example.\",\r\n example: `<LoginForm />`,\r\n props: []\r\n },\r\n signup: {\r\n name: \"Signup Page\",\r\n description: \"Showcases the reusable SignupForm component as a full signup page example.\",\r\n example: `<SignupForm />`,\r\n props: []\r\n },\r\n shield: {\r\n name: \"!isAuthenticated Shield\",\r\n description: \"ProtectedRoute gate which only renders content when authenticated; otherwise shows fallback.\",\r\n example: `<ProtectedRoute>Protected Content</ProtectedRoute>`,\r\n props: []\r\n },\r\n auth: {\r\n name: \"Auth System\",\r\n description: \"Demo of authentication UI and flows.\",\r\n example: `<AuthShowcase />`,\r\n props: []\r\n },\r\n \"password-reset\": {\r\n name: \"Password Reset\",\r\n description: \"Showcases the reusable PasswordResetForm component, allowing users to request a password reset via email.\",\r\n example: `<PasswordResetForm onReset={email => { ... }} />`,\r\n props: [\r\n { name: \"onReset\", type: \"(email: string) => Promise<void> \| void\", description: \"Submit reset request callback\" },\r\n { name: \"isLoading\", type: \"boolean\", description: \"Loading indicator\" },\r\n { name: \"successMessage\", type: \"string\", description: \"Message displayed on success\" },\r\n { name: \"errorMessage\", type: \"string\", description: \"Error feedback message\" }\r\n ],\r\n },\r\n};\r\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,gEAAgE;AAC7E,QAAA,OAAO,EAAE,CAAA;;AAEH,SAAA,CAAA;AACN,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,sBAAsB,EAAE;AAC5F,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE;AAC3E,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,oBAAoB;AACzF;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,wEAAwE;AACrF,QAAA,OAAO,EAAE,CAAA,wCAAA,CAA0C;AACnD,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uCAAuC,EAAE;AAC7G,YAAA,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE;AAC/E,YAAA,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,kBAAkB;AACpF;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,8CAA8C;AAC3D,QAAA,OAAO,EAAE,CAAA,sBAAA,CAAwB;AACjC,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,qBAAqB;AAC1F;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,WAAW,EAAE,2CAA2C;AACxD,QAAA,OAAO,EAAE,CAAA,+CAAA,CAAiD;AAC1D,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc;AACnE;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,WAAW,EAAE,oCAAoC;AACjD,QAAA,OAAO,EAAE,CAAA,wCAAA,CAA0C;AACnD,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,gBAAgB;AAC1E;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,WAAW,EAAE,2BAA2B;AACxC,QAAA,OAAO,EAAE,CAAA,2BAAA,CAA6B;AACtC,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe;AACjE;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,2BAA2B;AACxC,QAAA,OAAO,EAAE,CAAA,yBAAA,CAA2B;AACpC,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe;AACjE;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,4CAA4C;AACzD,QAAA,OAAO,EAAE,CAAA,mDAAA,CAAqD;AAC9D,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa;AACxF;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,uCAAuC;AACpD,QAAA,OAAO,EAAE,CAAA,2DAAA,CAA6D;AACtE,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY;AAC9E;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,yCAAyC;AACtD,QAAA,OAAO,EAAE,CAAA,SAAA,CAAW;AACpB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,sCAAsC;AACnD,QAAA,OAAO,EAAE,CAAA,6CAAA,CAA+C;AACxD,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,wBAAwB;AACvE;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,WAAW,EAAE,wCAAwC;AACrD,QAAA,OAAO,EAAE,CAAA,WAAA,CAAa;AACtB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,WAAW,EAAE,sCAAsC;AACnD,QAAA,OAAO,EAAE,CAAA,iCAAA,CAAmC;AAC5C,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,wBAAwB;AAC3E;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,WAAW,EAAE,+BAA+B;AAC5C,QAAA,OAAO,EAAE,CAAA,yCAAA,CAA2C;AACpD,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE;YAC5D,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY;AAClE;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,WAAW,EAAE,mCAAmC;AAChD,QAAA,OAAO,EAAE,CAAA,mDAAA,CAAqD;AAC9D,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,oBAAoB;AACnE;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,WAAW,EAAE,uCAAuC;AACpD,QAAA,OAAO,EAAE,CAAA,0BAAA,CAA4B;AACrC,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,4CAA4C;AACzD,QAAA,OAAO,EAAE,CAAA,oBAAA,CAAsB;AAC/B,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,kBAAkB,EAAE;AAClB,QAAA,IAAI,EAAE,iBAAiB;AACvB,QAAA,WAAW,EAAE,iDAAiD;AAC9D,QAAA,OAAO,EAAE,CAAA,sCAAA,CAAwC;AACjD,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,kBAAkB,EAAE;AAClB,QAAA,IAAI,EAAE,iBAAiB;AACvB,QAAA,WAAW,EAAE,+BAA+B;AAC5C,QAAA,OAAO,EAAE,CAAA,mBAAA,CAAqB;AAC9B,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,IAAI,EAAE,eAAe;AACrB,QAAA,WAAW,EAAE,uCAAuC;AACpD,QAAA,OAAO,EAAE,CAAA,kCAAA,CAAoC;AAC7C,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,WAAW,EAAE,iDAAiD;AAC9D,QAAA,OAAO,EAAE,CAAA,0CAAA,CAA4C;AACrD,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,WAAW,EAAE,yLAAyL;AACtM,QAAA,OAAO,EAAE,CAAA;;;;;;;;;;;;;;;;;;;AAmBX,CAAA,CAAA;AACE,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uEAAuE,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,mCAAmC,EAAE;AAC5K,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,uDAAuD,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,uCAAuC,EAAE;AAC5J,YAAA,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,oDAAoD,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,mCAAmC,EAAE;AAC/J,YAAA,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,sCAAsC,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,0BAA0B,EAAE;YACpI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,2DAA2D,EAAE;;YAEjH,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,8BAA8B,EAAE,WAAW,EAAE,oCAAoC,EAAE;YAC/G,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,gDAAgD,EAAE,WAAW,EAAE,kCAAkC,EAAE;YAC7H,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,4CAA4C,EAAE;YAC9G,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,2BAA2B,EAAE,WAAW,EAAE,4CAA4C,EAAE;YACrH,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,sBAAsB;AACrF;AACF,KAAA;;AAED,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,WAAW,EAAE,0EAA0E;AACvF,QAAA,OAAO,EAAE,CAAA,aAAA,CAAe;AACxB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,WAAW,EAAE,4EAA4E;AACzF,QAAA,OAAO,EAAE,CAAA,cAAA,CAAgB;AACzB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,yBAAyB;AAC/B,QAAA,WAAW,EAAE,8FAA8F;AAC3G,QAAA,OAAO,EAAE,CAAA,kDAAA,CAAoD;AAC7D,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,WAAW,EAAE,sCAAsC;AACnD,QAAA,OAAO,EAAE,CAAA,gBAAA,CAAkB;AAC3B,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,IAAI,EAAE,gBAAgB;AACtB,QAAA,WAAW,EAAE,2GAA2G;AACxH,QAAA,OAAO,EAAE,CAAA,gDAAA,CAAkD;AAC3D,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,yCAAyC,EAAE,WAAW,EAAE,+BAA+B,EAAE;YAClH,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,mBAAmB,EAAE;YACxE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,8BAA8B,EAAE;YACvF,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,wBAAwB;AAC9E,SAAA;AACF,KAAA;;;;;"}

package/dist/components/ComponentShowcase/showcaseRegistry.js CHANGED Viewed

@@ -24,6 +24,7 @@ import { LoginFormExample } from '../Auth/LoginForm.example.js';
 import { SignupFormExample } from '../Auth/SignupForm.example.js';
 import { ProtectedRouteExample } from '../Auth/ProtectedRoute.example.js';
 import { PasswordResetFormExample } from '../Auth/PasswordResetForm.example.js';
+import { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase.js';
 /**
  * Showcase registry maps component ids to their example/demo modules.
@@ -56,7 +57,8 @@ const showcaseRegistry = {
     login: LoginFormExample,
     signup: SignupFormExample,
     "password-reset": PasswordResetFormExample,
-    shield: ProtectedRouteExample
+    shield: ProtectedRouteExample,
+    "page-layout": PageLayoutShowcase
     // Extend with other demos as needed
 };

package/dist/components/ComponentShowcase/showcaseRegistry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"showcaseRegistry.js","sources":["../../../src/components/ComponentShowcase/showcaseRegistry.ts"],"sourcesContent":["/*\r\n Showcase registry maps component ids to their example/demo modules.\r\n * Usage: import { showcaseRegistry } from './showcaseRegistry';\r\n * Then: const Demo = showcaseRegistry['button'];\r\n */\r\nimport { ButtonExample } from '../Button/Button.example';\r\nimport { InputExample } from '../Input/Input.example';\r\nimport { TextareaExample } from '../Textarea/Textarea.example';\r\nimport { CheckboxExample } from '../Checkbox/Checkbox.example';\r\nimport { SwitchExample } from '../Switch/Switch.example';\r\nimport { CardExample } from '../Card/Card.example';\r\nimport { BadgeExample } from '../Badge/Badge.example';\r\nimport { AvatarExample } from '../Avatar/Avatar.example';\r\nimport { AlertExample } from '../Alert/Alert.example';\r\nimport { ToastExample } from '../Toast/Toast.example';\r\nimport { ModalExample } from '../Modal/Modal.example';\r\nimport { SpinnerExample } from '../Spinner/Spinner.example';\r\nimport { SkeletonExample } from '../Skeleton/Skeleton.example';\r\nimport { StatsCardExample } from '../StatsCard/StatsCard.example';\r\nimport { TabsExample } from '../Tabs/Tabs.example';\r\nimport { SidebarExample } from '../Sidebar/Sidebar.example';\r\nimport { NavbarExample } from '../Navbar/Navbar.example';\r\nimport { DashboardLayoutExample } from '../DashboardLayout/DashboardLayout.example';\r\nimport { DashboardHeaderExample } from '../DashboardHeader/DashboardHeader.example';\r\nimport { DashboardGridExample } from '../DashboardGrid/DashboardGrid.example';\r\nimport { DataTableShowcase } from '../DataTable/DataTableShowcase';\r\nimport { AuthShowcase } from '../Auth/AuthShowcase';\r\nimport { LoginFormExample } from \"../Auth/LoginForm.example\";\r\nimport { SignupFormExample } from \"../Auth/SignupForm.example\";\r\nimport { ProtectedRouteExample } from \"../Auth/ProtectedRoute.example\";\r\nimport { PasswordResetFormExample } from \"../Auth/PasswordResetForm.example\";\r\n\r\nexport const showcaseRegistry: Record<string, React.FC> = {\r\n button: ButtonExample,\r\n input: InputExample,\r\n textarea: TextareaExample,\r\n checkbox: CheckboxExample,\r\n switch: SwitchExample,\r\n card: CardExample,\r\n badge: BadgeExample,\r\n avatar: AvatarExample,\r\n alert: AlertExample,\r\n toast: ToastExample,\r\n modal: ModalExample,\r\n spinner: SpinnerExample,\r\n skeleton: SkeletonExample,\r\n statscard: StatsCardExample,\r\n tabs: TabsExample,\r\n sidebar: SidebarExample,\r\n navbar: NavbarExample,\r\n \"dashboard-layout\": DashboardLayoutExample,\r\n \"dashboard-header\": DashboardHeaderExample,\r\n \"dashboard-grid\": DashboardGridExample,\r\n datatable: DataTableShowcase,\r\n auth: AuthShowcase,\r\n login: LoginFormExample,\r\n signup: SignupFormExample,\r\n \"password-reset\": PasswordResetFormExample,\r\n shield: ProtectedRouteExample\r\n // Extend with other demos as needed\r\n};"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA;;;;AAIG;~~AA4BI~~,MAAM,gBAAgB,GAA6B;AACxD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,gBAAgB,EAAE,oBAAoB;AACtC,IAAA,SAAS,EAAE,iBAAiB;AAC5B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,MAAM,EAAE,iBAAiB;AACzB,IAAA,gBAAgB,EAAE,wBAAwB;AAC1C,IAAA,MAAM,EAAE;;;;;;"}
1	+ {"version":3,"file":"showcaseRegistry.js","sources":["../../../src/components/ComponentShowcase/showcaseRegistry.ts"],"sourcesContent":["/*\r\n Showcase registry maps component ids to their example/demo modules.\r\n * Usage: import { showcaseRegistry } from './showcaseRegistry';\r\n * Then: const Demo = showcaseRegistry['button'];\r\n */\r\nimport { ButtonExample } from '../Button/Button.example';\r\nimport { InputExample } from '../Input/Input.example';\r\nimport { TextareaExample } from '../Textarea/Textarea.example';\r\nimport { CheckboxExample } from '../Checkbox/Checkbox.example';\r\nimport { SwitchExample } from '../Switch/Switch.example';\r\nimport { CardExample } from '../Card/Card.example';\r\nimport { BadgeExample } from '../Badge/Badge.example';\r\nimport { AvatarExample } from '../Avatar/Avatar.example';\r\nimport { AlertExample } from '../Alert/Alert.example';\r\nimport { ToastExample } from '../Toast/Toast.example';\r\nimport { ModalExample } from '../Modal/Modal.example';\r\nimport { SpinnerExample } from '../Spinner/Spinner.example';\r\nimport { SkeletonExample } from '../Skeleton/Skeleton.example';\r\nimport { StatsCardExample } from '../StatsCard/StatsCard.example';\r\nimport { TabsExample } from '../Tabs/Tabs.example';\r\nimport { SidebarExample } from '../Sidebar/Sidebar.example';\r\nimport { NavbarExample } from '../Navbar/Navbar.example';\r\nimport { DashboardLayoutExample } from '../DashboardLayout/DashboardLayout.example';\r\nimport { DashboardHeaderExample } from '../DashboardHeader/DashboardHeader.example';\r\nimport { DashboardGridExample } from '../DashboardGrid/DashboardGrid.example';\r\nimport { DataTableShowcase } from '../DataTable/DataTableShowcase';\r\nimport { AuthShowcase } from '../Auth/AuthShowcase';\r\nimport { LoginFormExample } from \"../Auth/LoginForm.example\";\r\nimport { SignupFormExample } from \"../Auth/SignupForm.example\";\r\nimport { ProtectedRouteExample } from \"../Auth/ProtectedRoute.example\";\r\nimport { PasswordResetFormExample } from \"../Auth/PasswordResetForm.example\";\r\nimport { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase';\r\n\r\n\r\n\r\nexport const showcaseRegistry: Record<string, React.FC> = {\r\n button: ButtonExample,\r\n input: InputExample,\r\n textarea: TextareaExample,\r\n checkbox: CheckboxExample,\r\n switch: SwitchExample,\r\n card: CardExample,\r\n badge: BadgeExample,\r\n avatar: AvatarExample,\r\n alert: AlertExample,\r\n toast: ToastExample,\r\n modal: ModalExample,\r\n spinner: SpinnerExample,\r\n skeleton: SkeletonExample,\r\n statscard: StatsCardExample,\r\n tabs: TabsExample,\r\n sidebar: SidebarExample,\r\n navbar: NavbarExample,\r\n \"dashboard-layout\": DashboardLayoutExample,\r\n \"dashboard-header\": DashboardHeaderExample,\r\n \"dashboard-grid\": DashboardGridExample,\r\n datatable: DataTableShowcase,\r\n auth: AuthShowcase,\r\n login: LoginFormExample,\r\n signup: SignupFormExample,\r\n \"password-reset\": PasswordResetFormExample,\r\n shield: ProtectedRouteExample,\r\n \"page-layout\": PageLayoutShowcase\r\n // Extend with other demos as needed\r\n};"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;AAIG;AA+BI,MAAM,gBAAgB,GAA6B;AACxD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,gBAAgB,EAAE,oBAAoB;AACtC,IAAA,SAAS,EAAE,iBAAiB;AAC5B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,MAAM,EAAE,iBAAiB;AACzB,IAAA,gBAAgB,EAAE,wBAAwB;AAC1C,IAAA,MAAM,EAAE,qBAAqB;AAC7B,IAAA,aAAa,EAAE;;;;;;"}

package/dist/components/PageLayout/PageLayout.d.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const pageLayoutVariants: (props?: ({
+    variant?: "default" | "product" | "centered" | "sidebar" | "landing" | "blog" | null | undefined;
+    maxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const contentVariants: (props?: ({
+    layout?: "default" | "centered" | "sidebar" | "fullWidth" | null | undefined;
+    spacing?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface PageSection {
+    id?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+interface HeaderProps extends PageSection {
+    sticky?: boolean;
+    transparent?: boolean;
+}
+interface HeroProps extends PageSection {
+    fullHeight?: boolean;
+    backgroundImage?: string;
+    overlay?: boolean;
+}
+interface ContentProps extends PageSection {
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+}
+interface SidebarProps extends PageSection {
+    position?: "left" | "right";
+    width?: "sm" | "md" | "lg";
+}
+interface FooterProps extends PageSection {
+    variant?: "simple" | "detailed" | "minimal";
+}
+declare const PageHeader: React.FC<HeaderProps>;
+declare const PageHero: React.FC<HeroProps>;
+declare const PageContent: React.FC<ContentProps>;
+declare const PageSidebar: React.FC<SidebarProps>;
+declare const PageFooter: React.FC<FooterProps>;
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof pageLayoutVariants> {
+    children: React.ReactNode;
+    contentLayout?: VariantProps<typeof contentVariants>["layout"];
+    contentSpacing?: VariantProps<typeof contentVariants>["spacing"];
+}
+declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageLayoutContent: React.FC<{
+    children: React.ReactNode;
+    layout?: VariantProps<typeof contentVariants>["layout"];
+    spacing?: VariantProps<typeof contentVariants>["spacing"];
+    className?: string;
+}>;
+export { PageLayout, PageLayoutContent, PageHeader, PageHero, PageContent, PageSidebar, PageFooter, pageLayoutVariants, contentVariants, type HeaderProps, type HeroProps, type ContentProps, type SidebarProps, type FooterProps, };

package/dist/components/PageLayout/PageLayout.js ADDED Viewed

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+const pageLayoutVariants = cva("min-h-screen flex flex-col", {
+    variants: {
+        variant: {
+            default: "bg-white",
+            centered: "bg-white",
+            sidebar: "bg-gray-50",
+            landing: "bg-gradient-to-br from-gray-50 to-white",
+            product: "bg-white",
+            blog: "bg-gray-50",
+        },
+        maxWidth: {
+            none: "",
+            sm: "max-w-screen-sm mx-auto",
+            md: "max-w-screen-md mx-auto",
+            lg: "max-w-screen-lg mx-auto",
+            xl: "max-w-screen-xl mx-auto",
+            "2xl": "max-w-screen-2xl mx-auto",
+            full: "max-w-full",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        maxWidth: "xl",
+    },
+});
+const contentVariants = cva("flex-1", {
+    variants: {
+        layout: {
+            default: "w-full",
+            centered: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8",
+            sidebar: "flex flex-col lg:flex-row gap-8 px-4 sm:px-6 lg:px-8",
+            fullWidth: "w-full",
+        },
+        spacing: {
+            none: "py-0",
+            sm: "py-4",
+            md: "py-8",
+            lg: "py-12",
+            xl: "py-16",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+        spacing: "md",
+    },
+});
+// Individual section components
+const PageHeader = ({ children, className, sticky = false, transparent = false, id, ...props }) => (jsx("header", { id: id, className: cn("w-full z-50 transition-all duration-300", sticky && "sticky top-0", transparent ? "bg-transparent" : "bg-white border-b border-gray-200", className), role: "banner", ...props, children: children }));
+const PageHero = ({ children, className, fullHeight = false, backgroundImage, overlay = false, id, ...props }) => (jsxs("section", { id: id, className: cn("relative w-full flex items-center justify-center", fullHeight ? "min-h-screen" : "min-h-[60vh]", backgroundImage && "bg-cover bg-center bg-no-repeat", className), style: backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : undefined, role: "banner", ...props, children: [overlay && backgroundImage && (jsx("div", { className: "absolute inset-0 bg-black bg-opacity-40" })), jsx("div", { className: "relative z-10 w-full", children: children })] }));
+const PageContent = ({ children, className, maxWidth = "xl", id, ...props }) => (jsx("main", { id: id, className: cn("flex-1 w-full", maxWidth === "sm" && "max-w-2xl mx-auto px-4", maxWidth === "md" && "max-w-4xl mx-auto px-4", maxWidth === "lg" && "max-w-6xl mx-auto px-4", maxWidth === "xl" && "max-w-7xl mx-auto px-4", maxWidth === "2xl" && "max-w-screen-2xl mx-auto px-4", maxWidth === "full" && "max-w-full px-4", className), role: "main", ...props, children: children }));
+const PageSidebar = ({ children, className, position = "right", width = "md", id, ...props }) => (jsx("aside", { id: id, className: cn("flex-shrink-0", width === "sm" && "w-full lg:w-64", width === "md" && "w-full lg:w-80", width === "lg" && "w-full lg:w-96", position === "left" && "lg:order-first", className), role: "complementary", ...props, children: children }));
+const PageFooter = ({ children, className, variant = "simple", id, ...props }) => (jsx("footer", { id: id, className: cn("w-full mt-auto", variant === "simple" && "bg-gray-50 border-t border-gray-200 py-8", variant === "detailed" && "bg-gray-900 text-white py-12", variant === "minimal" && "bg-white border-t border-gray-100 py-6", className), role: "contentinfo", ...props, children: children }));
+const PageLayout = React.forwardRef(({ className, variant, maxWidth, contentLayout = "default", contentSpacing = "md", children, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(pageLayoutVariants({ variant, maxWidth }), className), ...props, children: children }));
+});
+PageLayout.displayName = "PageLayout";
+// Layout wrapper for content sections
+const PageLayoutContent = ({ children, layout = "default", spacing = "md", className }) => (jsx("div", { className: cn(contentVariants({ layout, spacing }), className), children: children }));
+export { PageContent, PageFooter, PageHeader, PageHero, PageLayout, PageLayoutContent, PageSidebar, contentVariants, pageLayoutVariants };
+//# sourceMappingURL=PageLayout.js.map

package/dist/components/PageLayout/PageLayout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PageLayout.js","sources":["../../../src/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst pageLayoutVariants = cva(\n \"min-h-screen flex flex-col\",\n {\n variants: {\n variant: {\n default: \"bg-white\",\n centered: \"bg-white\",\n sidebar: \"bg-gray-50\",\n landing: \"bg-gradient-to-br from-gray-50 to-white\",\n product: \"bg-white\",\n blog: \"bg-gray-50\",\n },\n maxWidth: {\n none: \"\",\n sm: \"max-w-screen-sm mx-auto\",\n md: \"max-w-screen-md mx-auto\",\n lg: \"max-w-screen-lg mx-auto\",\n xl: \"max-w-screen-xl mx-auto\",\n \"2xl\": \"max-w-screen-2xl mx-auto\",\n full: \"max-w-full\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n maxWidth: \"xl\",\n },\n }\n);\n\nconst contentVariants = cva(\n \"flex-1\",\n {\n variants: {\n layout: {\n default: \"w-full\",\n centered: \"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\",\n sidebar: \"flex flex-col lg:flex-row gap-8 px-4 sm:px-6 lg:px-8\",\n fullWidth: \"w-full\",\n },\n spacing: {\n none: \"py-0\",\n sm: \"py-4\",\n md: \"py-8\",\n lg: \"py-12\",\n xl: \"py-16\",\n },\n },\n defaultVariants: {\n layout: \"default\",\n spacing: \"md\",\n },\n }\n);\n\n// Layout section interfaces\ninterface PageSection {\n id?: string;\n className?: string;\n children: React.ReactNode;\n}\n\ninterface HeaderProps extends PageSection {\n sticky?: boolean;\n transparent?: boolean;\n}\n\ninterface HeroProps extends PageSection {\n fullHeight?: boolean;\n backgroundImage?: string;\n overlay?: boolean;\n}\n\ninterface ContentProps extends PageSection {\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n}\n\ninterface SidebarProps extends PageSection {\n position?: \"left\" | \"right\";\n width?: \"sm\" | \"md\" | \"lg\";\n}\n\ninterface FooterProps extends PageSection {\n variant?: \"simple\" | \"detailed\" | \"minimal\";\n}\n\n// Individual section components\nconst PageHeader: React.FC<HeaderProps> = ({ \n children, \n className, \n sticky = false, \n transparent = false,\n id,\n ...props \n}) => (\n <header\n id={id}\n className={cn(\n \"w-full z-50 transition-all duration-300\",\n sticky && \"sticky top-0\",\n transparent ? \"bg-transparent\" : \"bg-white border-b border-gray-200\",\n className\n )}\n role=\"banner\"\n {...props}\n >\n {children}\n </header>\n);\n\nconst PageHero: React.FC<HeroProps> = ({ \n children, \n className, \n fullHeight = false,\n backgroundImage,\n overlay = false,\n id,\n ...props \n}) => (\n <section\n id={id}\n className={cn(\n \"relative w-full flex items-center justify-center\",\n fullHeight ? \"min-h-screen\" : \"min-h-[60vh]\",\n backgroundImage && \"bg-cover bg-center bg-no-repeat\",\n className\n )}\n style={backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : undefined}\n role=\"banner\"\n {...props}\n >\n {overlay && backgroundImage && (\n <div className=\"absolute inset-0 bg-black bg-opacity-40\" />\n )}\n <div className=\"relative z-10 w-full\">\n {children}\n </div>\n </section>\n);\n\nconst PageContent: React.FC<ContentProps> = ({ \n children, \n className, \n maxWidth = \"xl\",\n id,\n ...props \n}) => (\n <main\n id={id}\n className={cn(\n \"flex-1 w-full\",\n maxWidth === \"sm\" && \"max-w-2xl mx-auto px-4\",\n maxWidth === \"md\" && \"max-w-4xl mx-auto px-4\",\n maxWidth === \"lg\" && \"max-w-6xl mx-auto px-4\",\n maxWidth === \"xl\" && \"max-w-7xl mx-auto px-4\",\n maxWidth === \"2xl\" && \"max-w-screen-2xl mx-auto px-4\",\n maxWidth === \"full\" && \"max-w-full px-4\",\n className\n )}\n role=\"main\"\n {...props}\n >\n {children}\n </main>\n);\n\nconst PageSidebar: React.FC<SidebarProps> = ({ \n children, \n className, \n position = \"right\",\n width = \"md\",\n id,\n ...props \n}) => (\n <aside\n id={id}\n className={cn(\n \"flex-shrink-0\",\n width === \"sm\" && \"w-full lg:w-64\",\n width === \"md\" && \"w-full lg:w-80\",\n width === \"lg\" && \"w-full lg:w-96\",\n position === \"left\" && \"lg:order-first\",\n className\n )}\n role=\"complementary\"\n {...props}\n >\n {children}\n </aside>\n);\n\nconst PageFooter: React.FC<FooterProps> = ({ \n children, \n className, \n variant = \"simple\",\n id,\n ...props \n}) => (\n <footer\n id={id}\n className={cn(\n \"w-full mt-auto\",\n variant === \"simple\" && \"bg-gray-50 border-t border-gray-200 py-8\",\n variant === \"detailed\" && \"bg-gray-900 text-white py-12\",\n variant === \"minimal\" && \"bg-white border-t border-gray-100 py-6\",\n className\n )}\n role=\"contentinfo\"\n {...props}\n >\n {children}\n </footer>\n);\n\n// Main PageLayout component\nexport interface PageLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof pageLayoutVariants> {\n children: React.ReactNode;\n contentLayout?: VariantProps<typeof contentVariants>[\"layout\"];\n contentSpacing?: VariantProps<typeof contentVariants>[\"spacing\"];\n}\n\nconst PageLayout = React.forwardRef<HTMLDivElement, PageLayoutProps>(\n ({ \n className, \n variant, \n maxWidth, \n contentLayout = \"default\",\n contentSpacing = \"md\",\n children, \n ...props \n }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(pageLayoutVariants({ variant, maxWidth }), className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nPageLayout.displayName = \"PageLayout\";\n\n// Layout wrapper for content sections\nconst PageLayoutContent: React.FC<{\n children: React.ReactNode;\n layout?: VariantProps<typeof contentVariants>[\"layout\"];\n spacing?: VariantProps<typeof contentVariants>[\"spacing\"];\n className?: string;\n}> = ({ children, layout = \"default\", spacing = \"md\", className }) => (\n <div className={cn(contentVariants({ layout, spacing }), className)}>\n {children}\n </div>\n);\n\n// Export all components\nexport {\n PageLayout,\n PageLayoutContent,\n PageHeader,\n PageHero,\n PageContent,\n PageSidebar,\n PageFooter,\n pageLayoutVariants,\n contentVariants,\n type HeaderProps,\n type HeroProps,\n type ContentProps,\n type SidebarProps,\n type FooterProps,\n};\n\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/PageLayout/PageLayoutExamples.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Landing Page Example
+ * Features: Hero section, feature highlights, CTA sections
+ */
+export declare const LandingPageExample: React.FC;
+/**
+ * Product Page Example
+ * Features: Product showcase, specifications, reviews
+ */
+export declare const ProductPageExample: React.FC;
+/**
+ * Blog Post Example
+ * Features: Article content with sidebar, author info, related posts
+ */
+export declare const BlogPostExample: React.FC;

package/dist/components/PageLayout/PageLayoutExamples.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PageLayout, PageHeader, PageHero, PageLayoutContent, PageFooter, PageContent, PageSidebar } from './PageLayout.js';
+import { Button } from '../Button/Button.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Input } from '../Input/Input.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
+import { Globe, ArrowRight, CheckCircle, Star, Mail, Phone, ShoppingCart, Heart, Share2, User, Calendar, Tag } from 'lucide-react';
+/**
+ * Landing Page Example
+ * Features: Hero section, feature highlights, CTA sections
+ */
+const LandingPageExample = () => (jsxs(PageLayout, { variant: "landing", maxWidth: "full", children: [jsx(PageHeader, { sticky: true, transparent: true, children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Globe, { className: "h-5 w-5 text-white" }) }), jsx("span", { className: "font-bold text-xl text-gray-900", children: "Beyond" })] }), jsxs("nav", { className: "hidden md:flex items-center space-x-8", children: [jsx("a", { href: "#features", className: "text-gray-700 hover:text-primary-600", children: "Features" }), jsx("a", { href: "#pricing", className: "text-gray-700 hover:text-primary-600", children: "Pricing" }), jsx("a", { href: "#about", className: "text-gray-700 hover:text-primary-600", children: "About" }), jsx(Button, { variant: "primary", children: "Get Started" })] })] }) }) }), jsx(PageHero, { fullHeight: true, children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsxs("div", { className: "max-w-3xl mx-auto", children: [jsxs("h1", { className: "text-4xl md:text-6xl font-bold text-gray-900 mb-6", children: ["Build Amazing", jsx("span", { className: "text-primary-600", children: " Web Experiences" })] }), jsx("p", { className: "text-xl text-gray-600 mb-8 leading-relaxed", children: "Create stunning, responsive websites with our comprehensive UI component library. Built for developers, designed for users." }), jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [jsxs(Button, { variant: "primary", size: "lg", className: "px-8", children: ["Start Building", jsx(ArrowRight, { className: "ml-2 h-5 w-5" })] }), jsx(Button, { variant: "outline", size: "lg", className: "px-8", children: "View Components" })] })] }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "xl", children: jsxs("section", { id: "features", className: "py-16", children: [jsxs("div", { className: "text-center mb-16", children: [jsx("h2", { className: "text-3xl font-bold text-gray-900 mb-4", children: "Everything You Need" }), jsx("p", { className: "text-xl text-gray-600 max-w-2xl mx-auto", children: "Comprehensive components, responsive design, and developer-friendly APIs" })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [
+                            {
+                                icon: jsx(CheckCircle, { className: "h-8 w-8 text-primary-600" }),
+                                title: "Production Ready",
+                                description: "Battle-tested components used by thousands of developers"
+                            },
+                            {
+                                icon: jsx(Globe, { className: "h-8 w-8 text-primary-600" }),
+                                title: "Responsive Design",
+                                description: "Mobile-first approach with perfect scaling across all devices"
+                            },
+                            {
+                                icon: jsx(Star, { className: "h-8 w-8 text-primary-600" }),
+                                title: "Premium Quality",
+                                description: "Carefully crafted with attention to detail and user experience"
+                            }
+                        ].map((feature, index) => (jsxs(Card, { className: "text-center p-8", children: [jsx("div", { className: "flex justify-center mb-4", children: feature.icon }), jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-3", children: feature.title }), jsx("p", { className: "text-gray-600", children: feature.description })] }, index))) })] }) }), jsx(PageFooter, { variant: "detailed", children: jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", children: [jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(Globe, { className: "h-6 w-6 text-white" }), jsx("span", { className: "font-bold text-xl text-white", children: "Beyond" })] }), jsx("p", { className: "text-gray-300", children: "Building the future of web development, one component at a time." })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Product" }), jsxs("ul", { className: "space-y-2 text-gray-300", children: [jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Components" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Templates" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Documentation" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Company" }), jsxs("ul", { className: "space-y-2 text-gray-300", children: [jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "About" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Blog" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Careers" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Contact" }), jsxs("div", { className: "space-y-2 text-gray-300", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Mail, { className: "h-4 w-4" }), jsx("span", { children: "hello@beyond.com" })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Phone, { className: "h-4 w-4" }), jsx("span", { children: "+1 (555) 123-4567" })] })] })] })] }), jsx("div", { className: "border-t border-gray-700 mt-8 pt-8 text-center text-gray-300", children: jsx("p", { children: "\u00A9 2024 Beyond. All rights reserved." }) })] }) })] }));
+/**
+ * Product Page Example
+ * Features: Product showcase, specifications, reviews
+ */
+const ProductPageExample = () => (jsxs(PageLayout, { variant: "product", maxWidth: "xl", children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(ShoppingCart, { className: "h-6 w-6 text-primary-600" }), jsx("span", { className: "font-bold text-xl", children: "Store" })] }), jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Input, { placeholder: "Search products...", className: "w-64" }), jsx(Button, { variant: "outline", children: "Cart (2)" })] })] }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "lg", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-12", children: [jsxs("div", { children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center", children: jsxs("div", { className: "text-center text-gray-500", children: [jsx(ShoppingCart, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Product Image" })] }) }), jsx("div", { className: "grid grid-cols-4 gap-2", children: [1, 2, 3, 4].map((i) => (jsx("div", { className: "aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer" }, i))) })] }), jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-2 mb-2", children: [jsx(Badge, { variant: "success", children: "In Stock" }), jsx(Badge, { variant: "outline", children: "Free Shipping" })] }), jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: "Premium Wireless Headphones" }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx("div", { className: "flex items-center", children: [1, 2, 3, 4, 5].map((star) => (jsx(Star, { className: "h-5 w-5 text-yellow-400 fill-current" }, star))) }), jsx("span", { className: "text-gray-600", children: "(128 reviews)" })] }), jsxs("div", { className: "mb-6", children: [jsx("span", { className: "text-3xl font-bold text-gray-900", children: "$299.99" }), jsx("span", { className: "text-lg text-gray-500 line-through ml-2", children: "$399.99" }), jsx(Badge, { variant: "danger", className: "ml-2", children: "25% OFF" })] }), jsx("p", { className: "text-gray-600 mb-6 leading-relaxed", children: "Experience premium sound quality with our latest wireless headphones. Featuring active noise cancellation, 30-hour battery life, and premium materials." }), jsx("div", { className: "space-y-4 mb-8", children: jsxs("div", { children: [jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Color" }), jsx("div", { className: "flex space-x-2", children: ['Black', 'White', 'Blue'].map((color) => (jsx("button", { className: "px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500", children: color }, color))) })] }) }), jsxs("div", { className: "flex space-x-4 mb-6", children: [jsxs(Button, { variant: "primary", size: "lg", className: "flex-1", children: [jsx(ShoppingCart, { className: "mr-2 h-5 w-5" }), "Add to Cart"] }), jsx(Button, { variant: "outline", size: "lg", children: jsx(Heart, { className: "h-5 w-5" }) }), jsx(Button, { variant: "outline", size: "lg", children: jsx(Share2, { className: "h-5 w-5" }) })] }), jsxs("div", { className: "border-t pt-6", children: [jsx("h3", { className: "font-semibold text-gray-900 mb-3", children: "Key Features" }), jsxs("ul", { className: "space-y-2 text-gray-600", children: [jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "Active Noise Cancellation"] }), jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "30-Hour Battery Life"] }), jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "Premium Build Quality"] })] })] })] })] }) }), jsx(PageFooter, { variant: "simple", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsx("p", { className: "text-gray-600", children: "\u00A9 2024 Store. All rights reserved." }) }) })] }));
+/**
+ * Blog Post Example
+ * Features: Article content with sidebar, author info, related posts
+ */
+const BlogPostExample = () => (jsxs(PageLayout, { variant: "blog", maxWidth: "xl", children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(User, { className: "h-5 w-5 text-white" }) }), jsx("span", { className: "font-bold text-xl", children: "Blog" })] }), jsxs("nav", { className: "flex items-center space-x-6", children: [jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: "Home" }), jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: "Categories" }), jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: "About" })] })] }) }) }), jsxs(PageLayoutContent, { layout: "sidebar", spacing: "lg", children: [jsxs(PageContent, { maxWidth: "full", className: "lg:flex-1", children: [jsxs("article", { className: "prose prose-lg max-w-none", children: [jsxs("header", { className: "mb-8", children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(Badge, { variant: "default", children: "Technology" }), jsx(Badge, { variant: "outline", children: "React" })] }), jsx("h1", { className: "text-4xl font-bold text-gray-900 mb-4", children: "Building Modern Web Applications with React and TypeScript" }), jsxs("div", { className: "flex items-center space-x-4 text-gray-600 mb-6", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] }), jsx("span", { children: "John Doe" })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Calendar, { className: "h-4 w-4" }), jsx("span", { children: "March 15, 2024" })] }), jsx("span", { children: "8 min read" })] })] }), jsx("div", { className: "aspect-video bg-gray-100 rounded-lg mb-8 flex items-center justify-center", children: jsxs("div", { className: "text-center text-gray-500", children: [jsx(Globe, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Featured Image" })] }) }), jsxs("div", { className: "space-y-6 text-gray-700 leading-relaxed", children: [jsx("p", { children: "Modern web development has evolved significantly over the past few years. With the introduction of React and TypeScript, developers now have powerful tools to build scalable, maintainable applications." }), jsx("p", { children: "In this comprehensive guide, we'll explore the best practices for building modern web applications using React and TypeScript. We'll cover everything from project setup to deployment strategies." }), jsx("h2", { className: "text-2xl font-bold text-gray-900 mt-8 mb-4", children: "Getting Started" }), jsx("p", { children: "The first step in building any React application is setting up your development environment. We recommend using Create React App with TypeScript template for beginners." }), jsxs("div", { className: "bg-gray-50 p-6 rounded-lg border-l-4 border-primary-500", children: [jsx("p", { className: "font-medium text-gray-900 mb-2", children: "Pro Tip:" }), jsx("p", { className: "text-gray-700", children: "Always start with a solid project structure. This will save you countless hours as your application grows." })] })] })] }), jsx("div", { className: "mt-12 p-6 bg-gray-50 rounded-lg", children: jsxs("div", { className: "flex items-start space-x-4", children: [jsxs(Avatar, { size: "lg", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] }), jsxs("div", { children: [jsx("h3", { className: "font-semibold text-gray-900 mb-2", children: "John Doe" }), jsx("p", { className: "text-gray-600 mb-3", children: "Senior Frontend Developer with 8+ years of experience building scalable web applications. Passionate about React, TypeScript, and modern web technologies." }), jsxs("div", { className: "flex space-x-4", children: [jsx(Button, { variant: "outline", size: "sm", children: "Follow" }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Mail, { className: "h-4 w-4" }) })] })] })] }) })] }), jsx(PageSidebar, { position: "right", width: "md", children: jsxs("div", { className: "space-y-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Search" }) }), jsx(CardContent, { children: jsx(Input, { placeholder: "Search articles..." }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Categories" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-2", children: [
+                                                { name: 'Technology', count: 24 },
+                                                { name: 'React', count: 18 },
+                                                { name: 'TypeScript', count: 12 },
+                                                { name: 'Web Design', count: 8 },
+                                            ].map((category) => (jsxs("div", { className: "flex items-center justify-between", children: [jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: category.name }), jsx(Badge, { variant: "outline", children: category.count })] }, category.name))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Recent Posts" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-4", children: [
+                                                'Getting Started with Next.js',
+                                                'CSS Grid vs Flexbox: When to Use Each',
+                                                'Building Accessible Web Components',
+                                            ].map((title, index) => (jsxs("div", { children: [jsx("a", { href: "#", className: "text-gray-900 hover:text-primary-600 font-medium block mb-1", children: title }), jsxs("p", { className: "text-sm text-gray-500", children: ["March ", 10 + index, ", 2024"] })] }, index))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Tags" }) }), jsx(CardContent, { children: jsx("div", { className: "flex flex-wrap gap-2", children: ['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML', 'Node.js', 'GraphQL'].map((tag) => (jsxs(Badge, { variant: "outline", className: "cursor-pointer hover:bg-primary-50", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag))) }) })] })] }) })] }), jsx(PageFooter, { variant: "minimal", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsx("p", { className: "text-gray-600", children: "\u00A9 2024 Blog. All rights reserved." }) }) })] }));
+export { BlogPostExample, LandingPageExample, ProductPageExample };
+//# sourceMappingURL=PageLayoutExamples.js.map

package/dist/components/PageLayout/PageLayoutExamples.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PageLayoutExamples.js","sources":["../../../src/components/PageLayout/PageLayoutExamples.tsx"],"sourcesContent":["import React from 'react';\nimport { \n PageLayout, \n PageHeader, \n PageHero, \n PageContent, \n PageSidebar, \n PageFooter,\n PageLayoutContent\n} from './PageLayout';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Input } from '../Input';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { \n Star, \n ShoppingCart, \n Heart, \n Share2, \n Calendar,\n User,\n Tag,\n ArrowRight,\n CheckCircle,\n Globe,\n Mail,\n Phone\n} from 'lucide-react';\n\n/**\n * Landing Page Example\n * Features: Hero section, feature highlights, CTA sections\n */\nexport const LandingPageExample: React.FC = () => (\n <PageLayout variant=\"landing\" maxWidth=\"full\">\n {/* Header */}\n <PageHeader sticky transparent>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center space-x-2\">\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n <Globe className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"font-bold text-xl text-gray-900\">Beyond</span>\n </div>\n <nav className=\"hidden md:flex items-center space-x-8\">\n <a href=\"#features\" className=\"text-gray-700 hover:text-primary-600\">Features</a>\n <a href=\"#pricing\" className=\"text-gray-700 hover:text-primary-600\">Pricing</a>\n <a href=\"#about\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n <Button variant=\"primary\">Get Started</Button>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n {/* Hero Section */}\n <PageHero fullHeight>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <div className=\"max-w-3xl mx-auto\">\n <h1 className=\"text-4xl md:text-6xl font-bold text-gray-900 mb-6\">\n Build Amazing\n <span className=\"text-primary-600\"> Web Experiences</span>\n </h1>\n <p className=\"text-xl text-gray-600 mb-8 leading-relaxed\">\n Create stunning, responsive websites with our comprehensive UI component library. \n Built for developers, designed for users.\n </p>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <Button variant=\"primary\" size=\"lg\" className=\"px-8\">\n Start Building\n <ArrowRight className=\"ml-2 h-5 w-5\" />\n </Button>\n <Button variant=\"outline\" size=\"lg\" className=\"px-8\">\n View Components\n </Button>\n </div>\n </div>\n </div>\n </PageHero>\n\n {/* Features Section */}\n <PageLayoutContent layout=\"centered\" spacing=\"xl\">\n <section id=\"features\" className=\"py-16\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-bold text-gray-900 mb-4\">\n Everything You Need\n </h2>\n <p className=\"text-xl text-gray-600 max-w-2xl mx-auto\">\n Comprehensive components, responsive design, and developer-friendly APIs\n </p>\n </div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {[\n {\n icon: <CheckCircle className=\"h-8 w-8 text-primary-600\" />,\n title: \"Production Ready\",\n description: \"Battle-tested components used by thousands of developers\"\n },\n {\n icon: <Globe className=\"h-8 w-8 text-primary-600\" />,\n title: \"Responsive Design\",\n description: \"Mobile-first approach with perfect scaling across all devices\"\n },\n {\n icon: <Star className=\"h-8 w-8 text-primary-600\" />,\n title: \"Premium Quality\",\n description: \"Carefully crafted with attention to detail and user experience\"\n }\n ].map((feature, index) => (\n <Card key={index} className=\"text-center p-8\">\n <div className=\"flex justify-center mb-4\">\n {feature.icon}\n </div>\n <h3 className=\"text-xl font-semibold text-gray-900 mb-3\">\n {feature.title}\n </h3>\n <p className=\"text-gray-600\">\n {feature.description}\n </p>\n </Card>\n ))}\n </div>\n </section>\n </PageLayoutContent>\n\n {/* Footer */}\n <PageFooter variant=\"detailed\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <div className=\"flex items-center space-x-2 mb-4\">\n <Globe className=\"h-6 w-6 text-white\" />\n <span className=\"font-bold text-xl text-white\">Beyond</span>\n </div>\n <p className=\"text-gray-300\">\n Building the future of web development, one component at a time.\n </p>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Product</h4>\n <ul className=\"space-y-2 text-gray-300\">\n <li><a href=\"#\" className=\"hover:text-white\">Components</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Templates</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Documentation</a></li>\n </ul>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Company</h4>\n <ul className=\"space-y-2 text-gray-300\">\n <li><a href=\"#\" className=\"hover:text-white\">About</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Blog</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Careers</a></li>\n </ul>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Contact</h4>\n <div className=\"space-y-2 text-gray-300\">\n <div className=\"flex items-center space-x-2\">\n <Mail className=\"h-4 w-4\" />\n <span>hello@beyond.com</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Phone className=\"h-4 w-4\" />\n <span>+1 (555) 123-4567</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-t border-gray-700 mt-8 pt-8 text-center text-gray-300\">\n <p>© 2024 Beyond. All rights reserved.</p>\n </div>\n </div>\n </PageFooter>\n </PageLayout>\n);\n\n/**\n * Product Page Example\n * Features: Product showcase, specifications, reviews\n */\nexport const ProductPageExample: React.FC = () => (\n <PageLayout variant=\"product\" maxWidth=\"xl\">\n {/* Header */}\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center space-x-2\">\n <ShoppingCart className=\"h-6 w-6 text-primary-600\" />\n <span className=\"font-bold text-xl\">Store</span>\n </div>\n <div className=\"flex items-center space-x-4\">\n <Input placeholder=\"Search products...\" className=\"w-64\" />\n <Button variant=\"outline\">Cart (2)</Button>\n </div>\n </div>\n </div>\n </PageHeader>\n\n {/* Product Content */}\n <PageLayoutContent layout=\"centered\" spacing=\"lg\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n {/* Product Images */}\n <div>\n <div className=\"aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center\">\n <div className=\"text-center text-gray-500\">\n <ShoppingCart className=\"h-16 w-16 mx-auto mb-2\" />\n <p>Product Image</p>\n </div>\n </div>\n <div className=\"grid grid-cols-4 gap-2\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer\" />\n ))}\n </div>\n </div>\n\n {/* Product Details */}\n <div>\n <div className=\"flex items-center space-x-2 mb-2\">\n <Badge variant=\"success\">In Stock</Badge>\n <Badge variant=\"outline\">Free Shipping</Badge>\n </div>\n \n <h1 className=\"text-3xl font-bold text-gray-900 mb-4\">\n Premium Wireless Headphones\n </h1>\n \n <div className=\"flex items-center space-x-2 mb-4\">\n <div className=\"flex items-center\">\n {[1, 2, 3, 4, 5].map((star) => (\n <Star key={star} className=\"h-5 w-5 text-yellow-400 fill-current\" />\n ))}\n </div>\n <span className=\"text-gray-600\">(128 reviews)</span>\n </div>\n\n <div className=\"mb-6\">\n <span className=\"text-3xl font-bold text-gray-900\">$299.99</span>\n <span className=\"text-lg text-gray-500 line-through ml-2\">$399.99</span>\n <Badge variant=\"danger\" className=\"ml-2\">25% OFF</Badge>\n </div>\n\n <p className=\"text-gray-600 mb-6 leading-relaxed\">\n Experience premium sound quality with our latest wireless headphones. \n Featuring active noise cancellation, 30-hour battery life, and premium materials.\n </p>\n\n <div className=\"space-y-4 mb-8\">\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">Color</label>\n <div className=\"flex space-x-2\">\n {['Black', 'White', 'Blue'].map((color) => (\n <button\n key={color}\n className=\"px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500\"\n >\n {color}\n </button>\n ))}\n </div>\n </div>\n </div>\n\n <div className=\"flex space-x-4 mb-6\">\n <Button variant=\"primary\" size=\"lg\" className=\"flex-1\">\n <ShoppingCart className=\"mr-2 h-5 w-5\" />\n Add to Cart\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n <Heart className=\"h-5 w-5\" />\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n <Share2 className=\"h-5 w-5\" />\n </Button>\n </div>\n\n <div className=\"border-t pt-6\">\n <h3 className=\"font-semibold text-gray-900 mb-3\">Key Features</h3>\n <ul className=\"space-y-2 text-gray-600\">\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n Active Noise Cancellation\n </li>\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n 30-Hour Battery Life\n </li>\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n Premium Build Quality\n </li>\n </ul>\n </div>\n </div>\n </div>\n </PageLayoutContent>\n\n {/* Footer */}\n <PageFooter variant=\"simple\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <p className=\"text-gray-600\">© 2024 Store. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n);\n\n/**\n * Blog Post Example\n * Features: Article content with sidebar, author info, related posts\n */\nexport const BlogPostExample: React.FC = () => (\n <PageLayout variant=\"blog\" maxWidth=\"xl\">\n {/* Header */}\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center space-x-2\">\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n <User className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"font-bold text-xl\">Blog</span>\n </div>\n <nav className=\"flex items-center space-x-6\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Home</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Categories</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n {/* Blog Content with Sidebar */}\n <PageLayoutContent layout=\"sidebar\" spacing=\"lg\">\n {/* Main Content */}\n <PageContent maxWidth=\"full\" className=\"lg:flex-1\">\n <article className=\"prose prose-lg max-w-none\">\n <header className=\"mb-8\">\n <div className=\"flex items-center space-x-2 mb-4\">\n <Badge variant=\"default\">Technology</Badge>\n <Badge variant=\"outline\">React</Badge>\n </div>\n \n <h1 className=\"text-4xl font-bold text-gray-900 mb-4\">\n Building Modern Web Applications with React and TypeScript\n </h1>\n \n <div className=\"flex items-center space-x-4 text-gray-600 mb-6\">\n <div className=\"flex items-center space-x-2\">\n <Avatar size=\"sm\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n <span>John Doe</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Calendar className=\"h-4 w-4\" />\n <span>March 15, 2024</span>\n </div>\n <span>8 min read</span>\n </div>\n </header>\n\n <div className=\"aspect-video bg-gray-100 rounded-lg mb-8 flex items-center justify-center\">\n <div className=\"text-center text-gray-500\">\n <Globe className=\"h-16 w-16 mx-auto mb-2\" />\n <p>Featured Image</p>\n </div>\n </div>\n\n <div className=\"space-y-6 text-gray-700 leading-relaxed\">\n <p>\n Modern web development has evolved significantly over the past few years. \n With the introduction of React and TypeScript, developers now have powerful \n tools to build scalable, maintainable applications.\n </p>\n \n <p>\n In this comprehensive guide, we'll explore the best practices for building \n modern web applications using React and TypeScript. We'll cover everything \n from project setup to deployment strategies.\n </p>\n\n <h2 className=\"text-2xl font-bold text-gray-900 mt-8 mb-4\">\n Getting Started\n </h2>\n \n <p>\n The first step in building any React application is setting up your \n development environment. We recommend using Create React App with \n TypeScript template for beginners.\n </p>\n\n <div className=\"bg-gray-50 p-6 rounded-lg border-l-4 border-primary-500\">\n <p className=\"font-medium text-gray-900 mb-2\">Pro Tip:</p>\n <p className=\"text-gray-700\">\n Always start with a solid project structure. This will save you \n countless hours as your application grows.\n </p>\n </div>\n </div>\n </article>\n\n {/* Author Bio */}\n <div className=\"mt-12 p-6 bg-gray-50 rounded-lg\">\n <div className=\"flex items-start space-x-4\">\n <Avatar size=\"lg\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n <div>\n <h3 className=\"font-semibold text-gray-900 mb-2\">John Doe</h3>\n <p className=\"text-gray-600 mb-3\">\n Senior Frontend Developer with 8+ years of experience building \n scalable web applications. Passionate about React, TypeScript, \n and modern web technologies.\n </p>\n <div className=\"flex space-x-4\">\n <Button variant=\"outline\" size=\"sm\">Follow</Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Mail className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n </div>\n </PageContent>\n\n {/* Sidebar */}\n <PageSidebar position=\"right\" width=\"md\">\n <div className=\"space-y-6\">\n {/* Search */}\n <Card>\n <CardHeader>\n <CardTitle>Search</CardTitle>\n </CardHeader>\n <CardContent>\n <Input placeholder=\"Search articles...\" />\n </CardContent>\n </Card>\n\n {/* Categories */}\n <Card>\n <CardHeader>\n <CardTitle>Categories</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-2\">\n {[\n { name: 'Technology', count: 24 },\n { name: 'React', count: 18 },\n { name: 'TypeScript', count: 12 },\n { name: 'Web Design', count: 8 },\n ].map((category) => (\n <div key={category.name} className=\"flex items-center justify-between\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">\n {category.name}\n </a>\n <Badge variant=\"outline\">{category.count}</Badge>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/* Recent Posts */}\n <Card>\n <CardHeader>\n <CardTitle>Recent Posts</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-4\">\n {[\n 'Getting Started with Next.js',\n 'CSS Grid vs Flexbox: When to Use Each',\n 'Building Accessible Web Components',\n ].map((title, index) => (\n <div key={index}>\n <a href=\"#\" className=\"text-gray-900 hover:text-primary-600 font-medium block mb-1\">\n {title}\n </a>\n <p className=\"text-sm text-gray-500\">March {10 + index}, 2024</p>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/* Tags */}\n <Card>\n <CardHeader>\n <CardTitle>Tags</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-wrap gap-2\">\n {['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML', 'Node.js', 'GraphQL'].map((tag) => (\n <Badge key={tag} variant=\"outline\" className=\"cursor-pointer hover:bg-primary-50\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n </CardContent>\n </Card>\n </div>\n </PageSidebar>\n </PageLayoutContent>\n\n {/* Footer */}\n <PageFooter variant=\"minimal\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <p className=\"text-gray-600\">© 2024 Blog. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AA8BA;;;AAGG;AACI,MAAM,kBAAkB,GAAa,OAC1CA,IAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CAE3CC,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAA,IAAA,EAAC,WAAW,EAAA,IAAA,EAAA,QAAA,EAC5BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACrDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oEAAoE,EAAA,QAAA,EACjFA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,CAAG,EAAA,CACpC,EACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,CAAA,EAAA,CAC3D,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,WAAW,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,UAAA,EAAA,CAAa,EACjFA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,UAAU,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,SAAA,EAAA,CAAY,EAC/EA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,OAAA,EAAA,CAAU,EAC3EA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,CAAqB,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACK,EAGbA,GAAA,CAAC,QAAQ,EAAA,EAAC,UAAU,EAAA,IAAA,EAAA,QAAA,EAClBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oDAAoD,EAAA,QAAA,EACjED,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,aAChCA,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CAAA,eAAA,EAE/DC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAwB,CAAA,EAAA,CACvD,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,6HAAA,EAAA,CAGrD,EACJD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAA,CAC7DA,IAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAAA,gBAAA,EAElDC,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,CAAA,EAAA,CAChC,EACTA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,CAE3C,CAAA,EAAA,CACL,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACG,EAGXA,GAAA,CAAC,iBAAiB,EAAA,EAAC,MAAM,EAAC,UAAU,EAAC,OAAO,EAAC,IAAI,EAAA,QAAA,EAC/CD,IAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,UAAU,EAAC,SAAS,EAAC,OAAO,EAAA,QAAA,EAAA,CACtCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAChCC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,oCAEhD,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,0EAAA,EAAA,CAElD,CAAA,EAAA,CACA,EAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACnD;AACC,4BAAA;AACE,gCAAA,IAAI,EAAEA,GAAA,CAAC,WAAW,IAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;AAC1D,gCAAA,KAAK,EAAE,kBAAkB;AACzB,gCAAA,WAAW,EAAE;AACd,6BAAA;AACD,4BAAA;AACE,gCAAA,IAAI,EAAEA,GAAA,CAAC,KAAK,IAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;AACpD,gCAAA,KAAK,EAAE,mBAAmB;AAC1B,gCAAA,WAAW,EAAE;AACd,6BAAA;AACD,4BAAA;AACE,gCAAA,IAAI,EAAEA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;AACnD,gCAAA,KAAK,EAAE,iBAAiB;AACxB,gCAAA,WAAW,EAAE;AACd;AACF,yBAAA,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MACnBD,IAAA,CAAC,IAAI,EAAA,EAAa,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC3CC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,QAAA,EACtC,OAAO,CAAC,IAAI,EAAA,CACT,EACNA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,OAAO,CAAC,KAAK,EAAA,CACX,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EACzB,OAAO,CAAC,WAAW,EAAA,CAClB,CAAA,EAAA,EATK,KAAK,CAUT,CACR,CAAC,EAAA,CACE,CAAA,EAAA,CACE,EAAA,CACQ,EAGpBA,GAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,QAAA,EAC5BD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CC,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,CAAG,EACxCA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,CAAA,EAAA,CACxD,EACNA,WAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,kEAAA,EAAA,CAExB,CAAA,EAAA,CACA,EACND,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAAA,SAAA,EAAA,CAAa,EAC1DD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACrCC,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,CAAe,EAAA,CAAK,EAChEA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,WAAA,EAAA,CAAc,EAAA,CAAK,EAC/DA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,CAAkB,EAAA,CAAK,CAAA,EAAA,CAChE,CAAA,EAAA,CACD,EACND,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAAA,SAAA,EAAA,CAAa,EAC1DD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACrCC,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,OAAA,EAAA,CAAU,EAAA,CAAK,EAC3DA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,MAAA,EAAA,CAAS,EAAA,CAAK,EAC1DA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,SAAA,EAAA,CAAY,EAAA,CAAK,CAAA,EAAA,CAC1D,CAAA,EAAA,CACD,EACND,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAAA,SAAA,EAAA,CAAa,EAC1DD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACtCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAC5BA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,CAA6B,CAAA,EAAA,CACzB,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAC7BA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,CAA8B,CAAA,EAAA,CAC1B,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAC3EA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,CAA+C,EAAA,CAC3C,CAAA,EAAA,CACF,EAAA,CACK,CAAA,EAAA,CACF;AAGf;;;AAGG;AACI,MAAM,kBAAkB,GAAa,OAC1CD,IAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAAA,CAEzCC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACrDD,cAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,GAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG,EACrDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CAC5C,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,IAAC,KAAK,EAAA,EAAC,WAAW,EAAC,oBAAoB,EAAC,SAAS,EAAC,MAAM,EAAA,CAAG,EAC3DA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,UAAA,EAAA,CAAkB,CAAA,EAAA,CACvC,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACK,EAGbA,GAAA,CAAC,iBAAiB,EAAA,EAAC,MAAM,EAAC,UAAU,EAAC,OAAO,EAAC,IAAI,EAAA,QAAA,EAC/CD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CAErDA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4EAA4E,YACzFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,wBAAwB,EAAA,CAAG,EACnDA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,eAAA,EAAA,CAAoB,IAChB,EAAA,CACF,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YACpC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAClBA,GAAA,CAAA,KAAA,EAAA,EAAa,SAAS,EAAC,uGAAuG,EAAA,EAApH,CAAC,CAAsH,CAClI,CAAC,EAAA,CACE,CAAA,EAAA,CACF,EAGND,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CC,IAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,UAAA,EAAA,CAAiB,EACzCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,CAAsB,IAC1C,EAENA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,6BAAA,EAAA,CAEhD,EAELD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAC,IAAI,EAAA,EAAY,SAAS,EAAC,sCAAsC,EAAA,EAAtD,IAAI,CAAqD,CACrE,CAAC,EAAA,CACE,EACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,eAAA,EAAA,CAAqB,CAAA,EAAA,CAChD,EAEND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,wBAAe,EACjEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,SAAA,EAAA,CAAe,EACxEA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,CAAA,EAAA,CACpD,EAENA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,yJAAA,EAAA,CAG7C,EAEJA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BD,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,8CAA8C,sBAAc,EAC7EA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC5B,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,MACpCA,GAAA,CAAA,QAAA,EAAA,EAEE,SAAS,EAAC,+FAA+F,EAAA,QAAA,EAExG,KAAK,EAAA,EAHD,KAAK,CAIH,CACV,CAAC,EAAA,CACE,CAAA,EAAA,CACF,EAAA,CACF,EAEND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAClCA,IAAA,CAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAC,YAAY,IAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,aAAA,CAAA,EAAA,CAElC,EACTA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EACjCA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACtB,EACTA,GAAA,CAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EACjCA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,EAAA,CACvB,CAAA,EAAA,CACL,EAEND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,CAC5BC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,cAAA,EAAA,CAAkB,EAClED,aAAI,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACrCA,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,CAAG,EAAA,2BAAA,CAAA,EAAA,CAEpD,EACLD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG,EAAA,sBAAA,CAAA,EAAA,CAEpD,EACLD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,CAAG,6BAEpD,CAAA,EAAA,CACF,CAAA,EAAA,CACD,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EAAA,CACY,EAGpBA,GAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAC1BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oDAAoD,EAAA,QAAA,EACjEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,yCAAA,EAAA,CAA4C,EAAA,CACpE,EAAA,CACK,CAAA,EAAA,CACF;AAGf;;;AAGG;MACU,eAAe,GAAa,OACvCD,IAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAAA,CAEtCC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACrDD,cAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,aAAK,SAAS,EAAC,oEAAoE,EAAA,QAAA,EACjFA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,CAAG,EAAA,CACnC,EACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,MAAA,EAAA,CAAY,IAC3C,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,WAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,MAAA,EAAA,CAAS,EACrEA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,YAAA,EAAA,CAAe,EAC3EA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,OAAA,EAAA,CAAU,IAClE,CAAA,EAAA,CACF,EAAA,CACF,GACK,EAGbD,IAAA,CAAC,iBAAiB,EAAA,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAA,QAAA,EAAA,CAE9CA,KAAC,WAAW,EAAA,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,aAChDA,IAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAA,CAC5CA,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,MAAM,aACtBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CC,IAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,CAAmB,EAC3CA,GAAA,CAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAClC,EAENA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,4DAAA,EAAA,CAEhD,EAELD,cAAK,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAA,CAC7DA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CA,KAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,aACfC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,iGAAiG,GAAG,EACrHA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,EACTA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAqB,CAAA,EAAA,CACjB,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC1CC,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAChCA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,CAA2B,CAAA,EAAA,CACvB,EACNA,uCAAuB,CAAA,EAAA,CACnB,CAAA,EAAA,CACC,EAETA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EACxFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,aACxCC,GAAA,CAAC,KAAK,IAAC,SAAS,EAAC,wBAAwB,EAAA,CAAG,EAC5CA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,CAAqB,CAAA,EAAA,CACjB,EAAA,CACF,EAEND,cAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,2MAAA,EAAA,CAII,EAEJA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,oMAAA,EAAA,CAII,EAEJA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4CAA4C,gCAErD,EAELA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,0KAAA,EAAA,CAII,EAEJD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yDAAyD,EAAA,QAAA,EAAA,CACtEC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gCAAgC,yBAAa,EAC1DA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,2HAGxB,CAAA,EAAA,CACA,CAAA,EAAA,CACF,CAAA,EAAA,CACE,EAGVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC9CD,cAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCA,IAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,CACfC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,iGAAiG,EAAA,CAAG,EACrHA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,IAC5B,EACTD,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,YAAI,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,UAAA,EAAA,CAAc,EAC9DA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,2KAI7B,EACJD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,aAC7BC,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,CAAgB,EACnDA,IAAC,MAAM,EAAA,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,YAC/BA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACrB,CAAA,EAAA,CACL,IACF,CAAA,EAAA,CACF,EAAA,CACF,IACM,EAGdA,GAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,IAAI,EAAA,QAAA,EACtCD,cAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CAExBA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,cACTA,GAAA,CAAC,SAAS,yBAAmB,EAAA,CAClB,EACbA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,oBAAoB,EAAA,CAAG,GAC9B,CAAA,EAAA,CACT,EAGPD,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,YAAA,EAAA,CAAuB,EAAA,CACtB,EACbA,GAAA,CAAC,WAAW,cACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB;AACC,gDAAA,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;AACjC,gDAAA,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;AAC5B,gDAAA,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;AACjC,gDAAA,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE;AACjC,6CAAA,CAAC,GAAG,CAAC,CAAC,QAAQ,MACbD,IAAA,CAAA,KAAA,EAAA,EAAyB,SAAS,EAAC,mCAAmC,aACpEC,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,sCAAsC,YACzD,QAAQ,CAAC,IAAI,EAAA,CACZ,EACJA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAE,QAAQ,CAAC,KAAK,EAAA,CAAS,CAAA,EAAA,EAJzC,QAAQ,CAAC,IAAI,CAKjB,CACP,CAAC,EAAA,CACE,EAAA,CACM,CAAA,EAAA,CACT,EAGPD,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,+BAAyB,EAAA,CACxB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB;gDACC,8BAA8B;gDAC9B,uCAAuC;gDACvC,oCAAoC;AACrC,6CAAA,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACjBD,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,6DAA6D,EAAA,QAAA,EAChF,KAAK,GACJ,EACJD,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAAA,QAAA,EAAQ,EAAE,GAAG,KAAK,EAAA,QAAA,CAAA,EAAA,CAAW,CAAA,EAAA,EAJzD,KAAK,CAKT,CACP,CAAC,EAAA,CACE,EAAA,CACM,CAAA,EAAA,CACT,EAGPA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAiB,EAAA,CAChB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAClC,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAClFD,IAAA,CAAC,KAAK,EAAA,EAAW,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,CAC/EC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAC/B,GAAG,CAAA,EAAA,EAFM,GAAG,CAGP,CACT,CAAC,GACE,EAAA,CACM,CAAA,EAAA,CACT,CAAA,EAAA,CACH,EAAA,CACM,CAAA,EAAA,CACI,EAGpBA,GAAA,CAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAC3BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oDAAoD,YACjEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,wCAAA,EAAA,CAA2C,EAAA,CACnE,EAAA,CACK,CAAA,EAAA,CACF;;;;"}

package/dist/components/PageLayout/PageLayoutShowcase.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export declare const PageLayoutShowcase: React.FC;

package/dist/components/PageLayout/PageLayoutShowcase.js ADDED Viewed

@@ -0,0 +1,167 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Layout, Globe, ShoppingCart, User, Monitor, Tablet, Smartphone, Eye, Code, Check, Copy } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '../Card/Card.js';
+import { Button } from '../Button/Button.js';
+import { Badge } from '../Badge/Badge.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs/Tabs.js';
+import { showToast } from '../Toast/Toast.js';
+import { LandingPageExample, BlogPostExample, ProductPageExample } from './PageLayoutExamples.js';
+const codeExamples = {
+    basic: `import { PageLayout, PageHeader, PageContent, PageFooter } from '@/components/PageLayout';
+function BasicPage() {
+  return (
+    <PageLayout variant="default" maxWidth="xl">
+      <PageHeader>
+        <nav className="max-w-7xl mx-auto px-4">
+          <div className="flex items-center justify-between h-16">
+            <div className="font-bold text-xl">My App</div>
+            <div className="space-x-4">
+              <a href="#" className="text-gray-700 hover:text-primary-600">Home</a>
+              <a href="#" className="text-gray-700 hover:text-primary-600">About</a>
+            </div>
+          </div>
+        </nav>
+      </PageHeader>
+      <PageContent maxWidth="lg" className="py-12">
+        <h1 className="text-3xl font-bold mb-6">Welcome to My App</h1>
+        <p className="text-gray-600">Your content goes here...</p>
+      </PageContent>
+      <PageFooter variant="simple">
+        <div className="text-center py-8">
+          <p>&copy; 2024 My App. All rights reserved.</p>
+        </div>
+      </PageFooter>
+    </PageLayout>
+  );
+}`,
+    landing: `import {
+  PageLayout,
+  PageHeader,
+  PageHero,
+  PageLayoutContent
+} from '@/components/PageLayout';
+function LandingPage() {
+  return (
+    <PageLayout variant="landing" maxWidth="full">
+      <PageHeader sticky transparent>
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="flex items-center justify-between h-16">
+            <div className="font-bold text-xl">Brand</div>
+            <nav className="hidden md:flex space-x-8">
+              <a href="#features">Features</a>
+              <a href="#pricing">Pricing</a>
+              <Button variant="primary">Get Started</Button>
+            </nav>
+          </div>
+        </div>
+      </PageHeader>
+      <PageHero fullHeight>
+        <div className="max-w-4xl mx-auto text-center px-4">
+          <h1 className="text-5xl font-bold mb-6">
+            Build Amazing Products
+          </h1>
+          <p className="text-xl text-gray-600 mb-8">
+            Create stunning experiences with our tools
+          </p>
+          <Button variant="primary" size="lg">
+            Start Building
+          </Button>
+        </div>
+      </PageHero>
+      <PageLayoutContent layout="centered" spacing="xl">
+        {/* Your sections here */}
+      </PageLayoutContent>
+    </PageLayout>
+  );
+}`,
+    sidebar: `import {
+  PageLayout,
+  PageHeader,
+  PageContent,
+  PageSidebar,
+  PageLayoutContent
+} from '@/components/PageLayout';
+function BlogPost() {
+  return (
+    <PageLayout variant="blog" maxWidth="xl">
+      <PageHeader>
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="flex items-center justify-between h-16">
+            <div className="font-bold text-xl">Blog</div>
+            <nav className="flex space-x-6">
+              <a href="#">Home</a>
+              <a href="#">Categories</a>
+            </nav>
+          </div>
+        </div>
+      </PageHeader>
+      <PageLayoutContent layout="sidebar" spacing="lg">
+        <PageContent maxWidth="full">
+          <article className="prose prose-lg">
+            <h1>Article Title</h1>
+            <p>Article content goes here...</p>
+          </article>
+        </PageContent>
+        <PageSidebar position="right" width="md">
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Recent Posts</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {/* Sidebar content */}
+              </CardContent>
+            </Card>
+          </div>
+        </PageSidebar>
+      </PageLayoutContent>
+    </PageLayout>
+  );
+}`
+};
+const PageLayoutShowcase = () => {
+    const [selectedExample, setSelectedExample] = useState('landing');
+    const [viewMode, setViewMode] = useState('desktop');
+    const [copiedCode, setCopiedCode] = useState(null);
+    const copyToClipboard = async (code) => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopiedCode(code);
+            showToast.success('Code copied to clipboard!');
+            setTimeout(() => setCopiedCode(null), 2000);
+        }
+        catch (err) {
+            showToast.error('Failed to copy code');
+        }
+    };
+    const getViewportClass = () => {
+        switch (viewMode) {
+            case 'tablet': return 'max-w-2xl';
+            case 'mobile': return 'max-w-sm';
+            default: return 'w-full';
+        }
+    };
+    const renderExample = () => {
+        switch (selectedExample) {
+            case 'landing': return jsx(LandingPageExample, {});
+            case 'product': return jsx(ProductPageExample, {});
+            case 'blog': return jsx(BlogPostExample, {});
+            default: return jsx(LandingPageExample, {});
+        }
+    };
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Page Layout System" }), jsx("p", { className: "text-gray-600 mt-1", children: "Flexible, responsive layout components for building various page types" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Layout, { className: "h-4 w-4 mr-1" }), "Layout System"] })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxs(Button, { variant: selectedExample === 'landing' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('landing'), children: [jsx(Globe, { className: "h-4 w-4 mr-2" }), "Landing Page"] }), jsxs(Button, { variant: selectedExample === 'product' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('product'), children: [jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), "Product Page"] }), jsxs(Button, { variant: selectedExample === 'blog' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('blog'), children: [jsx(User, { className: "h-4 w-4 mr-2" }), "Blog Post"] })] }), jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === 'desktop' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('desktop'), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'tablet' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('tablet'), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'mobile' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('mobile'), children: jsx(Smartphone, { className: "h-4 w-4" }) })] })] }), jsxs(Tabs, { value: "preview", onValueChange: () => { }, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] })] }), jsx(TabsContent, { value: "preview", className: "mt-6", children: jsx(Card, { children: jsx(CardContent, { className: "p-0", children: jsx("div", { className: `mx-auto transition-all duration-300 ${getViewportClass()}`, children: jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden bg-white", children: jsx("div", { className: "transform scale-75 origin-top-left w-[133.33%] h-[133.33%]", children: renderExample() }) }) }) }) }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsx("div", { className: "space-y-6", children: Object.entries(codeExamples).map(([key, code]) => (jsxs(Card, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsxs(CardTitle, { className: "capitalize", children: [key, " Layout Example"] }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(code), children: [copiedCode === code ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy Code"] })] }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm", children: jsx("code", { children: code }) }) })] }, key))) }) })] }), jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Layout Components" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsxs("li", { children: [jsx("strong", { children: "PageLayout:" }), " Main container with variant support"] }), jsxs("li", { children: [jsx("strong", { children: "PageHeader:" }), " Sticky/transparent header with navigation"] }), jsxs("li", { children: [jsx("strong", { children: "PageHero:" }), " Full-height hero sections with backgrounds"] }), jsxs("li", { children: [jsx("strong", { children: "PageContent:" }), " Main content area with max-width control"] }), jsxs("li", { children: [jsx("strong", { children: "PageSidebar:" }), " Flexible sidebar with positioning"] }), jsxs("li", { children: [jsx("strong", { children: "PageFooter:" }), " Footer with multiple style variants"] }), jsxs("li", { children: [jsx("strong", { children: "PageLayoutContent:" }), " Content wrapper with layout options"] })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Key Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Responsive design with mobile-first approach" }), jsx("li", { children: "\u2022 Flexible layout variants (default, centered, sidebar)" }), jsx("li", { children: "\u2022 Semantic HTML with proper ARIA landmarks" }), jsx("li", { children: "\u2022 TypeScript support with comprehensive interfaces" }), jsx("li", { children: "\u2022 CSS Grid and Flexbox for modern layouts" }), jsx("li", { children: "\u2022 Customizable spacing and max-width controls" }), jsx("li", { children: "\u2022 Production-ready with performance optimizations" })] }) })] })] })] }));
+};
+export { PageLayoutShowcase };
+//# sourceMappingURL=PageLayoutShowcase.js.map

package/dist/components/PageLayout/PageLayoutShowcase.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PageLayoutShowcase.js","sources":["../../../src/components/PageLayout/PageLayoutShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { \n Monitor, \n Tablet, \n Smartphone, \n Code, \n Eye, \n Copy, \n Check,\n Layout,\n Globe,\n ShoppingCart,\n User\n} from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { showToast } from '../Toast';\nimport { LandingPageExample, ProductPageExample, BlogPostExample } from './PageLayoutExamples';\n\nconst codeExamples = {\n basic: `import { PageLayout, PageHeader, PageContent, PageFooter } from '@/components/PageLayout';\n\nfunction BasicPage() {\n return (\n <PageLayout variant=\"default\" maxWidth=\"xl\">\n <PageHeader>\n <nav className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">My App</div>\n <div className=\"space-x-4\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Home</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n </div>\n </div>\n </nav>\n </PageHeader>\n\n <PageContent maxWidth=\"lg\" className=\"py-12\">\n <h1 className=\"text-3xl font-bold mb-6\">Welcome to My App</h1>\n <p className=\"text-gray-600\">Your content goes here...</p>\n </PageContent>\n\n <PageFooter variant=\"simple\">\n <div className=\"text-center py-8\">\n <p>© 2024 My App. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n );\n}`,\n\n landing: `import { \n PageLayout, \n PageHeader, \n PageHero, \n PageLayoutContent \n} from '@/components/PageLayout';\n\nfunction LandingPage() {\n return (\n <PageLayout variant=\"landing\" maxWidth=\"full\">\n <PageHeader sticky transparent>\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">Brand</div>\n <nav className=\"hidden md:flex space-x-8\">\n <a href=\"#features\">Features</a>\n <a href=\"#pricing\">Pricing</a>\n <Button variant=\"primary\">Get Started</Button>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n <PageHero fullHeight>\n <div className=\"max-w-4xl mx-auto text-center px-4\">\n <h1 className=\"text-5xl font-bold mb-6\">\n Build Amazing Products\n </h1>\n <p className=\"text-xl text-gray-600 mb-8\">\n Create stunning experiences with our tools\n </p>\n <Button variant=\"primary\" size=\"lg\">\n Start Building\n </Button>\n </div>\n </PageHero>\n\n <PageLayoutContent layout=\"centered\" spacing=\"xl\">\n {/* Your sections here */}\n </PageLayoutContent>\n </PageLayout>\n );\n}`,\n\n sidebar: `import { \n PageLayout, \n PageHeader, \n PageContent, \n PageSidebar,\n PageLayoutContent \n} from '@/components/PageLayout';\n\nfunction BlogPost() {\n return (\n <PageLayout variant=\"blog\" maxWidth=\"xl\">\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">Blog</div>\n <nav className=\"flex space-x-6\">\n <a href=\"#\">Home</a>\n <a href=\"#\">Categories</a>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n <PageLayoutContent layout=\"sidebar\" spacing=\"lg\">\n <PageContent maxWidth=\"full\">\n <article className=\"prose prose-lg\">\n <h1>Article Title</h1>\n <p>Article content goes here...</p>\n </article>\n </PageContent>\n\n <PageSidebar position=\"right\" width=\"md\">\n <div className=\"space-y-6\">\n <Card>\n <CardHeader>\n <CardTitle>Recent Posts</CardTitle>\n </CardHeader>\n <CardContent>\n {/* Sidebar content */}\n </CardContent>\n </Card>\n </div>\n </PageSidebar>\n </PageLayoutContent>\n </PageLayout>\n );\n}`\n};\n\nexport const PageLayoutShowcase: React.FC = () => {\n const [selectedExample, setSelectedExample] = useState<'landing' | 'product' | 'blog'>('landing');\n const [viewMode, setViewMode] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');\n const [copiedCode, setCopiedCode] = useState<string | null>(null);\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success('Code copied to clipboard!');\n setTimeout(() => setCopiedCode(null), 2000);\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n const getViewportClass = () => {\n switch (viewMode) {\n case 'tablet': return 'max-w-2xl';\n case 'mobile': return 'max-w-sm';\n default: return 'w-full';\n }\n };\n\n const renderExample = () => {\n switch (selectedExample) {\n case 'landing': return <LandingPageExample />;\n case 'product': return <ProductPageExample />;\n case 'blog': return <BlogPostExample />;\n default: return <LandingPageExample />;\n }\n };\n\n return (\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900\">Page Layout System</h1>\n <p className=\"text-gray-600 mt-1\">\n Flexible, responsive layout components for building various page types\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Layout className=\"h-4 w-4 mr-1\" />\n Layout System\n </Badge>\n </div>\n\n {/* Example Selection */}\n <div className=\"flex items-center justify-between\">\n <div className=\"flex bg-gray-100 rounded-lg p-1\">\n <Button\n variant={selectedExample === 'landing' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('landing')}\n >\n <Globe className=\"h-4 w-4 mr-2\" />\n Landing Page\n </Button>\n <Button\n variant={selectedExample === 'product' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('product')}\n >\n <ShoppingCart className=\"h-4 w-4 mr-2\" />\n Product Page\n </Button>\n <Button\n variant={selectedExample === 'blog' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('blog')}\n >\n <User className=\"h-4 w-4 mr-2\" />\n Blog Post\n </Button>\n </div>\n\n {/* Viewport Controls */}\n <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\n <Button\n variant={viewMode === 'desktop' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setViewMode('desktop')}\n >\n <Monitor className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === 'tablet' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setViewMode('tablet')}\n >\n <Tablet className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === 'mobile' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setViewMode('mobile')}\n >\n <Smartphone className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n\n {/* Tabs */}\n <Tabs value=\"preview\" onValueChange={() => {}}>\n <TabsList>\n <TabsTrigger value=\"preview\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"preview\" className=\"mt-6\">\n <Card>\n <CardContent className=\"p-0\">\n <div className={`mx-auto transition-all duration-300 ${getViewportClass()}`}>\n <div className=\"border border-gray-200 rounded-lg overflow-hidden bg-white\">\n <div className=\"transform scale-75 origin-top-left w-[133.33%] h-[133.33%]\">\n {renderExample()}\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Layout Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n {copiedCode === code ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n </Tabs>\n\n {/* Documentation */}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>Layout Components</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li><strong>PageLayout:</strong> Main container with variant support</li>\n <li><strong>PageHeader:</strong> Sticky/transparent header with navigation</li>\n <li><strong>PageHero:</strong> Full-height hero sections with backgrounds</li>\n <li><strong>PageContent:</strong> Main content area with max-width control</li>\n <li><strong>PageSidebar:</strong> Flexible sidebar with positioning</li>\n <li><strong>PageFooter:</strong> Footer with multiple style variants</li>\n <li><strong>PageLayoutContent:</strong> Content wrapper with layout options</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Key Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Responsive design with mobile-first approach</li>\n <li>• Flexible layout variants (default, centered, sidebar)</li>\n <li>• Semantic HTML with proper ARIA landmarks</li>\n <li>• TypeScript support with comprehensive interfaces</li>\n <li>• CSS Grid and Flexbox for modern layouts</li>\n <li>• Customizable spacing and max-width controls</li>\n <li>• Production-ready with performance optimizations</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAqBA,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BP,CAAA,CAAA;AAEA,IAAA,OAAO,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CT,CAAA,CAAA;AAEA,IAAA,OAAO,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,CAAA;CACD;AAEM,MAAM,kBAAkB,GAAa,MAAK;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAiC,SAAS,CAAC;IACjG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkC,SAAS,CAAC;IACpF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;AAEjE,IAAA,MAAM,eAAe,GAAG,OAAO,IAAY,KAAI;AAC7C,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;YACzC,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,SAAS,CAAC,OAAO,CAAC,2BAA2B,CAAC;YAC9C,UAAU,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAC7C;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC;QACxC;AACF,IAAA,CAAC;IAED,MAAM,gBAAgB,GAAG,MAAK;QAC5B,QAAQ,QAAQ;AACd,YAAA,KAAK,QAAQ,EAAE,OAAO,WAAW;AACjC,YAAA,KAAK,QAAQ,EAAE,OAAO,UAAU;AAChC,YAAA,SAAS,OAAO,QAAQ;;AAE5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,eAAe;AACrB,YAAA,KAAK,SAAS,EAAE,OAAOA,GAAA,CAAC,kBAAkB,KAAG;AAC7C,YAAA,KAAK,SAAS,EAAE,OAAOA,GAAA,CAAC,kBAAkB,KAAG;AAC7C,YAAA,KAAK,MAAM,EAAE,OAAOA,GAAA,CAAC,eAAe,KAAG;AACvC,YAAA,SAAS,OAAOA,GAAA,CAAC,kBAAkB,KAAG;;AAE1C,IAAA,CAAC;AAED,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CAExBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAwB,EACxEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,wEAAA,EAAA,CAE7B,CAAA,EAAA,CACA,EACNC,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CACpDD,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,qBAE7B,CAAA,EAAA,CACJ,EAGNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC9CA,IAAA,CAAC,MAAM,IACL,OAAO,EAAE,eAAe,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EAC5D,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,kBAAkB,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,CAE5CD,IAAC,KAAK,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,cAAA,CAAA,EAAA,CAE3B,EACTC,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,eAAe,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EAC5D,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,kBAAkB,CAAC,SAAS,CAAC,aAE5CD,GAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,cAAA,CAAA,EAAA,CAElC,EACTC,KAAC,MAAM,EAAA,EACL,OAAO,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,GAAG,OAAO,EACzD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,kBAAkB,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,CAEzCD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,WAAA,CAAA,EAAA,CAE1B,IACL,EAGNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DD,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EACrD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,EAAA,QAAA,EAErCA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,EAAA,CACxB,EACTA,GAAA,CAAC,MAAM,IACL,OAAO,EAAE,QAAQ,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,EACpD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,EAAA,QAAA,EAEpCA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACvB,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,EACpD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,EAAA,QAAA,EAEpCA,IAAC,UAAU,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC3B,CAAA,EAAA,CACL,CAAA,EAAA,CACF,EAGNC,IAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,aAAa,EAAE,MAAK,EAAE,CAAC,aAC3CA,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPA,IAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,aAC1BD,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,SAAA,CAAA,EAAA,CAEpB,EACdC,KAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,QAAA,EAAA,CACvBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,eAAA,CAAA,EAAA,CAErB,CAAA,EAAA,CACL,EAEXA,GAAA,CAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAC3CA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,KAAK,EAAA,QAAA,EAC1BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,oCAAA,EAAuC,gBAAgB,EAAE,EAAE,EAAA,QAAA,EACzEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4DAA4D,EAAA,QAAA,EACzEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4DAA4D,EAAA,QAAA,EACxE,aAAa,EAAE,GACZ,EAAA,CACF,EAAA,CACF,EAAA,CACM,EAAA,CACT,GACK,EAEdA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACxCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,MAC5CC,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHA,KAAC,UAAU,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAChEA,IAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CAAE,GAAG,uBAA4B,EAClEA,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAEnC,UAAU,KAAK,IAAI,IAClBD,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,KAElCA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,CAAG,CAClC,EAAA,WAAA,CAAA,EAAA,CAEM,CAAA,EAAA,CACE,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kEAAkE,EAAA,QAAA,EAC/EA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,GAAQ,EAAA,CACf,EAAA,CACM,CAAA,EAAA,EApBL,GAAG,CAqBP,CACR,CAAC,EAAA,CACE,EAAA,CACM,IACT,EAGPC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,oCAA8B,EAAA,CAC7B,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CA,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAID,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,EAAA,CAA4B,EAAA,sCAAA,CAAA,EAAA,CAAyC,EACzEC,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAID,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,EAAA,CAA4B,EAAA,4CAAA,CAAA,EAAA,CAA+C,EAC/EC,wBAAID,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,WAAA,EAAA,CAA0B,EAAA,6CAAA,CAAA,EAAA,CAAgD,EAC9EC,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAID,2CAA6B,EAAA,2CAAA,CAAA,EAAA,CAA8C,EAC/EC,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAID,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAA6B,0CAAuC,EACxEC,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAID,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,EAAA,CAA4B,EAAA,sCAAA,CAAA,EAAA,CAAyC,EACzEC,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAID,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAmC,EAAA,sCAAA,CAAA,EAAA,CAAyC,CAAA,EAAA,CAC7E,GACO,CAAA,EAAA,CACT,EAEPC,IAAA,CAAC,IAAI,eACHD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAyB,EAAA,CACxB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,CAAuD,EACvDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,CAAgE,EAChEA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,iDAAA,EAAA,CAAmD,EACnDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,yDAAA,EAAA,CAA2D,EAC3DA,yEAAkD,EAClDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oDAAA,EAAA,CAAsD,EACtDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,wDAAA,EAAA,CAA0D,IACvD,EAAA,CACO,CAAA,EAAA,CACT,CAAA,EAAA,CACH,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/PageLayout/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './PageLayout';
2	+ export * from './PageLayoutExamples';

package/dist/components/PageLayout/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { PageContent, PageFooter, PageHeader, PageHero, PageLayout, PageLayoutContent, PageSidebar, contentVariants, pageLayoutVariants } from './PageLayout.js';
+export { BlogPostExample, LandingPageExample, ProductPageExample } from './PageLayoutExamples.js';
+//# sourceMappingURL=index.js.map

package/dist/components/PageLayout/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index.d.ts CHANGED Viewed

@@ -21,6 +21,7 @@ export * from './components/DashboardGrid';
 export * from './components/DataTable';
 export * from './components/ComponentShowcase';
 export * from './components/Auth';
+export * from './components/PageLayout';
 export * from './hooks/useDarkMode';
 export * from './hooks/useDebounce';
 export * from './hooks/useLocalStorage';
@@ -28,3 +29,5 @@ export * from './hooks/useToggle';
 export * from './hooks/useBreakpoint';
 export * from './utils/cn';
 export * from './theme/default';
+export * from './contexts/AuthContext';
+export * from './services/authService';

package/dist/index.js CHANGED Viewed

@@ -25,6 +25,8 @@ export { SignupForm } from './components/Auth/SignupForm.js';
 export { ProtectedRoute, useRequireRole, withRoleProtection } from './components/Auth/ProtectedRoute.js';
 export { PasswordResetForm } from './components/Auth/PasswordResetForm.js';
 export { AuthShowcase } from './components/Auth/AuthShowcase.js';
+export { PageContent, PageFooter, PageHeader, PageHero, PageLayout, PageLayoutContent, PageSidebar, contentVariants, pageLayoutVariants } from './components/PageLayout/PageLayout.js';
+export { BlogPostExample, LandingPageExample, ProductPageExample } from './components/PageLayout/PageLayoutExamples.js';
 export { useDarkMode } from './hooks/useDarkMode.js';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useLocalStorage } from './hooks/useLocalStorage.js';
@@ -32,4 +34,6 @@ export { useToggle } from './hooks/useToggle.js';
 export { useBreakpoint } from './hooks/useBreakpoint.js';
 export { cn } from './utils/cn.js';
 export { defaultTheme } from './theme/default.js';
+export { AuthProvider, useAuth } from './contexts/AuthContext.js';
+export { authService } from './services/authService.js';
 //# sourceMappingURL=index.js.map

package/dist/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- ,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/! tailwindcss v3.4.17 \| MIT License \| https://tailwindcss.com/,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.left-0{left:0}.left-3{left:.75rem}.left-\[50\%\]{left:50%}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.top-\[50\%\]{top:50%}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-span-1{grid-column:span 1/span 1}.col-span-full{grid-column:1/-1}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.row-span-4{grid-row:span 4/span 4}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.-mb-px{margin-bottom:-1px}.-mt-1{margin-top:-.25rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-16{margin-left:4rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-72{margin-left:18rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[95vh\]{max-height:95vh}.min-h-0{min-height:0}.min-h-\[200px\]{min-height:200px}.min-h-\[400px\]{min-height:400px}.min-h-\[80px\]{min-height:80px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[200px\]{min-width:200px}.min-w-\[32px\]{min-width:32px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-\[95vw\]{max-width:95vw}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-x-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.rotate-180,.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25remvar(--tw-space-x-reverse));margin-left:calc(.25rem(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5remvar(--tw-space-x-reverse));margin-left:calc(.5rem(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75remvar(--tw-space-x-reverse));margin-left:calc(.75rem(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1remvar(--tw-space-x-reverse));margin-left:calc(1rem(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2remvar(--tw-space-x-reverse));margin-left:calc(2rem(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25remvar(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375remvar(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5remvar(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75remvar(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1remvar(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5remvar(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2remvar(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-current{border-color:currentColor}.border-danger-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-danger-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-primary-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-primary-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}.border-primary-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-primary-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.border-success-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-success-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-warning-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-t-transparent{border-top-color:transparent}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-danger-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-danger-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-danger-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-danger-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-primary-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-primary-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-primary-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-secondary-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-success-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-success-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-success-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-success-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-warning-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-warning-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-warning-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-warning-600{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-danger-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-secondary-500{--tw-gradient-from:#64748b var(--tw-gradient-from-position);--tw-gradient-to:rgba(100,116,139,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-success-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-warning-500{--tw-gradient-from:#f59e0b var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,158,11,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-danger-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}.to-primary-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.to-secondary-600{--tw-gradient-to:#475569 var(--tw-gradient-to-position)}.to-success-600{--tw-gradient-to:#16a34a var(--tw-gradient-to-position)}.to-warning-600{--tw-gradient-to:#d97706 var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:.75rem}.pl-8{padding-left:2rem}.pr-10{padding-right:2.5rem}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-current{color:currentColor}.text-danger-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-danger-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-danger-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-gray-950{--tw-text-opacity:1;color:rgb(3 7 18/var(--tw-text-opacity,1))}.text-primary-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-primary-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-primary-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-secondary-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-success-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-success-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-success-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-warning-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-warning-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/80{color:hsla(0,0%,100%,.8)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-offset-white{--tw-ring-offset-color:#fff}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.file\:border-0::file-selector-button{border-width:0}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.placeholder\:text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.placeholder\:text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.hover\:bg-black\/10:hover{background-color:rgba(0,0,0,.1)}.hover\:bg-danger-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-primary-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-secondary-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.hover\:bg-success-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.hover\:bg-warning-700:hover{--tw-bg-opacity:1;background-color:rgb(180 83 9/var(--tw-bg-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-primary-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.hover\:text-primary-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-danger-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-primary-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-danger-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus-visible\:ring-primary-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus-visible\:ring-success-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-white:focus-visible{--tw-ring-offset-color:#fff}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x:1rem}.data-\[state\=checked\]\:translate-x-4[data-state=checked],.data-\[state\=checked\]\:translate-x-5[data-state=checked]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x:1.25rem}.data-\[state\=checked\]\:translate-x-6[data-state=checked]{--tw-translate-x:1.5rem}.data-\[state\=checked\]\:translate-x-6[data-state=checked],.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:0px}.data-\[state\=active\]\:border-b-2[data-state=active]{border-bottom-width:2px}.data-\[state\=active\]\:border-primary-600[data-state=active],.data-\[state\=checked\]\:border-primary-600[data-state=checked]{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.data-\[state\=active\]\:bg-primary-100[data-state=active]{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.data-\[state\=active\]\:bg-white[data-state=active]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.data-\[state\=checked\]\:bg-primary-600[data-state=checked]{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.data-\[state\=unchecked\]\:bg-gray-200[data-state=unchecked]{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.data-\[state\=active\]\:text-gray-950[data-state=active]{--tw-text-opacity:1;color:rgb(3 7 18/var(--tw-text-opacity,1))}.data-\[state\=active\]\:text-primary-600[data-state=active]{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.data-\[state\=active\]\:text-primary-700[data-state=active]{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.data-\[state\=checked\]\:text-white[data-state=checked]{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.data-\[state\=active\]\:shadow-sm[data-state=active]{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.sm\:block{display:block}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5remvar(--tw-space-x-reverse));margin-left:calc(.5rem(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:.5rem}.sm\:text-left{text-align:left}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1280px){.xl\:col-span-6{grid-column:span 6/span 6}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1536px){.\32xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}.\[\&_p\]\:leading-relaxed p{line-height:1.625}
1	+ ,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/! tailwindcss v3.4.17 \| MIT License \| https://tailwindcss.com/,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.left-0{left:0}.left-3{left:.75rem}.left-\[50\%\]{left:50%}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.top-\[50\%\]{top:50%}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-span-1{grid-column:span 1/span 1}.col-span-full{grid-column:1/-1}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.row-span-4{grid-row:span 4/span 4}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.-mb-px{margin-bottom:-1px}.-mt-1{margin-top:-.25rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-16{margin-left:4rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-72{margin-left:18rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[133\.33\%\]{height:133.33%}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[95vh\]{max-height:95vh}.min-h-0{min-height:0}.min-h-\[200px\]{min-height:200px}.min-h-\[400px\]{min-height:400px}.min-h-\[60vh\]{min-height:60vh}.min-h-\[80px\]{min-height:80px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[133\.33\%\]{width:133.33%}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[200px\]{min-width:200px}.min-w-\[32px\]{min-width:32px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[95vw\]{max-width:95vw}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-screen-2xl{max-width:1536px}.max-w-screen-lg{max-width:1024px}.max-w-screen-md{max-width:768px}.max-w-screen-sm{max-width:640px}.max-w-screen-xl{max-width:1280px}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top-left{transform-origin:top left}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-x-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.rotate-180,.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-75,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25remvar(--tw-space-x-reverse));margin-left:calc(.25rem(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5remvar(--tw-space-x-reverse));margin-left:calc(.5rem(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75remvar(--tw-space-x-reverse));margin-left:calc(.75rem(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1remvar(--tw-space-x-reverse));margin-left:calc(1rem(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5remvar(--tw-space-x-reverse));margin-left:calc(1.5rem(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2remvar(--tw-space-x-reverse));margin-left:calc(2rem(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25remvar(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375remvar(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5remvar(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75remvar(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1remvar(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5remvar(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2remvar(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-current{border-color:currentColor}.border-danger-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-danger-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-primary-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-primary-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}.border-primary-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-primary-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.border-success-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-success-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-warning-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-t-transparent{border-top-color:transparent}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-danger-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-danger-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-danger-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-danger-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-primary-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-primary-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-primary-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-secondary-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-success-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-success-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-success-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-success-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-warning-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-warning-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-warning-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-warning-600{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-opacity-40{--tw-bg-opacity:0.4}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-danger-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-50{--tw-gradient-from:#f9fafb var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,250,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-secondary-500{--tw-gradient-from:#64748b var(--tw-gradient-from-position);--tw-gradient-to:rgba(100,116,139,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-success-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-warning-500{--tw-gradient-from:#f59e0b var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,158,11,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-danger-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}.to-primary-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.to-secondary-600{--tw-gradient-to:#475569 var(--tw-gradient-to-position)}.to-success-600{--tw-gradient-to:#16a34a var(--tw-gradient-to-position)}.to-warning-600{--tw-gradient-to:#d97706 var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:.75rem}.pl-8{padding-left:2rem}.pr-10{padding-right:2.5rem}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-current{color:currentColor}.text-danger-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-danger-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-danger-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-gray-950{--tw-text-opacity:1;color:rgb(3 7 18/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-primary-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-primary-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-primary-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-secondary-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-success-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-success-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-success-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-warning-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-warning-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.underline-offset-4{text-underline-offset:4px}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-offset-white{--tw-ring-offset-color:#fff}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.file\:border-0::file-selector-button{border-width:0}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.placeholder\:text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.placeholder\:text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.hover\:border-primary-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.hover\:bg-black\/10:hover{background-color:rgba(0,0,0,.1)}.hover\:bg-danger-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-primary-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-secondary-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.hover\:bg-success-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.hover\:bg-warning-700:hover{--tw-bg-opacity:1;background-color:rgb(180 83 9/var(--tw-bg-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-primary-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.hover\:text-primary-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.focus\:border-primary-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-danger-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-primary-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-danger-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus-visible\:ring-primary-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus-visible\:ring-success-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-white:focus-visible{--tw-ring-offset-color:#fff}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x:1rem}.data-\[state\=checked\]\:translate-x-4[data-state=checked],.data-\[state\=checked\]\:translate-x-5[data-state=checked]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x:1.25rem}.data-\[state\=checked\]\:translate-x-6[data-state=checked]{--tw-translate-x:1.5rem}.data-\[state\=checked\]\:translate-x-6[data-state=checked],.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:0px}.data-\[state\=active\]\:border-b-2[data-state=active]{border-bottom-width:2px}.data-\[state\=active\]\:border-primary-600[data-state=active],.data-\[state\=checked\]\:border-primary-600[data-state=checked]{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.data-\[state\=active\]\:bg-primary-100[data-state=active]{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.data-\[state\=active\]\:bg-white[data-state=active]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.data-\[state\=checked\]\:bg-primary-600[data-state=checked]{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.data-\[state\=unchecked\]\:bg-gray-200[data-state=unchecked]{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.data-\[state\=active\]\:text-gray-950[data-state=active]{--tw-text-opacity:1;color:rgb(3 7 18/var(--tw-text-opacity,1))}.data-\[state\=active\]\:text-primary-600[data-state=active]{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.data-\[state\=active\]\:text-primary-700[data-state=active]{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.data-\[state\=checked\]\:text-white[data-state=checked]{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.data-\[state\=active\]\:shadow-sm[data-state=active]{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.sm\:block{display:block}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5remvar(--tw-space-x-reverse));margin-left:calc(.5rem(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-left{text-align:left}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1024px){.lg\:order-first{order:-9999}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:w-64{width:16rem}.lg\:w-80{width:20rem}.lg\:w-96{width:24rem}.lg\:flex-1{flex:1 1 0%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width:1280px){.xl\:col-span-6{grid-column:span 6/span 6}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1536px){.\32xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}.\[\&_p\]\:leading-relaxed p{line-height:1.625}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "A comprehensive React UI component library built with TypeScript, TailwindCSS, and CVA",
   "type": "module",
   "main": "dist/index.js",