@beyondcorp/beyond-ui 1.0.40 → 1.0.41

package/dist/components/Card/Card.js

@@ -3,7 +3,9 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
 
-const cardVariants = cva("rounded-lg border bg-white text-gray-950 shadow-sm", {
+const cardVariants = cva(
+// Mobile-first responsive, content-fitting, vertical stacking
+"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm", {
     variants: {
         variant: {
             default: "border-gray-200",
@@ -12,9 +14,9 @@ const cardVariants = cva("rounded-lg border bg-white text-gray-950 shadow-sm", {
         },
         padding: {
             none: "p-0",
-            sm: "p-4",
-            md: "p-6",
-            lg: "p-8",
+            sm: "p-2 sm:p-4",
+            md: "p-3 sm:p-6",
+            lg: "p-4 sm:p-8",
         },
     },
     defaultVariants: {
@@ -24,15 +26,15 @@ const cardVariants = cva("rounded-lg border bg-white text-gray-950 shadow-sm", {
 });
 const Card = React.forwardRef(({ className, variant, padding, ...props }, ref) => (jsx("div", { ref: ref, className: cn(cardVariants({ variant, padding, className })), ...props })));
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6", className), ...props })));
 CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => (jsx("h3", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
 CardTitle.displayName = "CardTitle";
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => (jsx("p", { ref: ref, className: cn("text-sm text-gray-500", className), ...props })));
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("p-2 sm:p-4 md:p-6 pt-0", className), ...props })));
 CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex items-center p-2 sm:p-4 md:p-6 pt-0", className), ...props })));
 CardFooter.displayName = "CardFooter";
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst cardVariants = cva(\n  \"rounded-lg border bg-white text-gray-950 shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"border-gray-200\",\n        elevated: \"border-gray-200 shadow-md\",\n        outlined: \"border-2 border-primary-200\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-4\",\n        md: \"p-6\",\n        lg: \"p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"md\",\n    },\n  }\n);\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, padding, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ variant, padding, className }))}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-gray-500\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  cardVariants,\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG,CACtB,oDAAoD,EACpD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,EAAE,EAAE,KAAK;AACV,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EAAA,GACrD,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACnE;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAA,GAClD,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst cardVariants = cva(\n  // Mobile-first responsive, content-fitting, vertical stacking\n  \"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"border-gray-200\",\n        elevated: \"border-gray-200 shadow-md\",\n        outlined: \"border-2 border-primary-200\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2 sm:p-4\",\n        md: \"p-3 sm:p-6\",\n        lg: \"p-4 sm:p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"md\",\n    },\n  }\n);\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, padding, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ variant, padding, className }))}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-gray-500\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  cardVariants,\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,oFAAoF,EACpF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/DashboardLayout/DashboardLayout.js

@@ -3,15 +3,22 @@ import * as React from 'react';
 import { cn } from '../../utils/cn.js';
 import { Sidebar } from '../Sidebar/Sidebar.js';
 import { DashboardHeader } from '../DashboardHeader/DashboardHeader.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 
 const DashboardLayout = React.forwardRef(({ children, className, sidebarMenuItems, activeSidebarItem, breadcrumbs, onSidebarItemClick, showSearch, searchPlaceholder, onSearchChange, sidebarTitle, sidebarTitleLetter, sidebarHeaderClassName, ...props }, ref) => {
     const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+    const { isBelow } = useBreakpoint();
     const toggleSidebar = () => {
         setSidebarCollapsed(prev => !prev);
     };
-    return (jsxs("div", { ref: ref, className: cn("min-h-screen bg-gray-50", className), ...props, children: [jsx(Sidebar, { collapsed: sidebarCollapsed, onToggle: toggleSidebar, menuItems: sidebarMenuItems, activeItem: activeSidebarItem, onItemClick: onSidebarItemClick, className: props.sidebarClassName, title: sidebarTitle, titleLetter: sidebarTitleLetter, headerClassName: sidebarHeaderClassName }), jsxs("div", { className: "flex flex-col min-h-screen", children: [jsx(DashboardHeader, { sidebarCollapsed: sidebarCollapsed, onMenuToggle: toggleSidebar, breadcrumbs: breadcrumbs, showSearch: showSearch, searchPlaceholder: searchPlaceholder, onSearchChange: onSearchChange }), jsx("main", { className: cn("flex-1 transition-all duration-300 p-6", props.disableSidebarMargin
-                            ? ""
-                            : (sidebarCollapsed ? "ml-16" : "ml-72")), children: children })] }), !sidebarCollapsed && (jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden", onClick: toggleSidebar }))] }));
+    // Responsive sidebar: drawer on mobile, fixed on desktop
+    return (jsxs("div", { ref: ref, className: cn("min-h-screen bg-gray-50 flex flex-col", className), ...props, children: [jsxs("div", { className: "flex flex-1 w-full", children: [jsx(Sidebar, { collapsed: sidebarCollapsed, onToggle: toggleSidebar, menuItems: sidebarMenuItems, activeItem: activeSidebarItem, onItemClick: onSidebarItemClick, className: cn(props.sidebarClassName, 
+                        // Hide sidebar on mobile unless open
+                        isBelow("md") ? (sidebarCollapsed ? "hidden" : "fixed z-40 top-0 left-0 h-full w-64 bg-white shadow-lg") : "relative w-72"), title: sidebarTitle, titleLetter: sidebarTitleLetter, headerClassName: sidebarHeaderClassName }), jsxs("div", { className: "flex flex-col flex-1 min-h-screen", children: [jsx(DashboardHeader, { sidebarCollapsed: sidebarCollapsed, onMenuToggle: toggleSidebar, breadcrumbs: breadcrumbs, showSearch: showSearch, searchPlaceholder: searchPlaceholder, onSearchChange: onSearchChange }), jsx("main", { className: cn("flex-1 transition-all duration-300 p-4 md:p-6", props.disableSidebarMargin
+                                    ? ""
+                                    : isBelow("md")
+                                        ? "ml-0"
+                                        : (sidebarCollapsed ? "ml-16" : "ml-72")), children: children })] })] }), isBelow("md") && !sidebarCollapsed && (jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-30", onClick: toggleSidebar }))] }));
 });
 DashboardLayout.displayName = "DashboardLayout";
 

package/dist/components/DashboardLayout/DashboardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Sidebar, type MenuItem } from \"../Sidebar\";\r\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\r\n\r\n/**\r\n * DashboardLayoutProps\r\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\r\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\r\n * - sidebarHeaderClassName: Optional className for SidebarHeader\r\n *\r\n * These props are forwarded to Sidebar for dynamic header branding.\r\n */\r\ninterface DashboardLayoutProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  sidebarMenuItems?: MenuItem[];\r\n  activeSidebarItem?: string;\r\n  breadcrumbs?: BreadcrumbItem[];\r\n  onSidebarItemClick?: (itemId: string) => void;\r\n  showSearch?: boolean;\r\n  searchPlaceholder?: string;\r\n  onSearchChange?: (value: string) => void;\r\n  sidebarClassName?: string;\r\n  disableSidebarMargin?: boolean;\r\n  /** Sidebar header title (default: \"Beyond\") */\r\n  sidebarTitle?: string;\r\n  /** Sidebar header letter (default: \"B\") */\r\n  sidebarTitleLetter?: string;\r\n  /** Optional className for SidebarHeader */\r\n  sidebarHeaderClassName?: string;\r\n}\r\n\r\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\r\n  ({\r\n    children,\r\n    className,\r\n    sidebarMenuItems,\r\n    activeSidebarItem,\r\n    breadcrumbs,\r\n    onSidebarItemClick,\r\n    showSearch,\r\n    searchPlaceholder,\r\n    onSearchChange,\r\n    sidebarTitle,\r\n    sidebarTitleLetter,\r\n    sidebarHeaderClassName,\r\n    ...props\r\n  }, ref) => {\r\n    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\r\n\r\n    const toggleSidebar = () => {\r\n      setSidebarCollapsed(prev => !prev);\r\n    };\r\n\r\n    return (\r\n      <div ref={ref} className={cn(\"min-h-screen bg-gray-50\", className)} {...props}>\r\n        {/* Sidebar */}\r\n        <Sidebar\r\n          collapsed={sidebarCollapsed}\r\n          onToggle={toggleSidebar}\r\n          menuItems={sidebarMenuItems}\r\n          activeItem={activeSidebarItem}\r\n          onItemClick={onSidebarItemClick}\r\n          className={props.sidebarClassName}\r\n          title={sidebarTitle}\r\n          titleLetter={sidebarTitleLetter}\r\n          headerClassName={sidebarHeaderClassName}\r\n        />\r\n\r\n        {/* Main Content Area */}\r\n        <div className=\"flex flex-col min-h-screen\">\r\n          {/* Header */}\r\n          <DashboardHeader\r\n            sidebarCollapsed={sidebarCollapsed}\r\n            onMenuToggle={toggleSidebar}\r\n            breadcrumbs={breadcrumbs}\r\n            showSearch={showSearch}\r\n            searchPlaceholder={searchPlaceholder}\r\n            onSearchChange={onSearchChange}\r\n          />\r\n\r\n          {/* Main Content */}\r\n          <main \r\n            className={cn(\r\n              \"flex-1 transition-all duration-300 p-6\",\r\n              props.disableSidebarMargin\r\n                ? \"\"\r\n                : (sidebarCollapsed ? \"ml-16\" : \"ml-72\")\r\n            )}\r\n          >\r\n            {children}\r\n          </main>\r\n        </div>\r\n\r\n        {/* Mobile Overlay */}\r\n        {!sidebarCollapsed && (\r\n          <div \r\n            className=\"fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden\"\r\n            onClick={toggleSidebar}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nDashboardLayout.displayName = \"DashboardLayout\";\r\n\r\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAiCA,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EACC,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,sBAAsB,EACtB,GAAG,KAAK,EACT,EAAE,GAAG,KAAI;AACR,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IAErE,MAAM,aAAa,GAAG,MAAK;QACzB,mBAAmB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;AACpC,IAAA,CAAC;IAED,QACEA,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EAAA,CAE3EC,IAAC,OAAO,EAAA,EACN,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,WAAW,EAAE,kBAAkB,EAC/B,SAAS,EAAE,KAAK,CAAC,gBAAgB,EACjC,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,kBAAkB,EAC/B,eAAe,EAAE,sBAAsB,EAAA,CACvC,EAGFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,aAEzCC,GAAA,CAAC,eAAe,IACd,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAAA,CAC9B,EAGFA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,wCAAwC,EACxC,KAAK,CAAC;AACJ,8BAAE;AACF,+BAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,CAAC,CAC3C,EAAA,QAAA,EAEA,QAAQ,EAAA,CACJ,CAAA,EAAA,CACH,EAGL,CAAC,gBAAgB,KAChBA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,qDAAqD,EAC/D,OAAO,EAAE,aAAa,EAAA,CACtB,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Sidebar, type MenuItem } from \"../Sidebar\";\r\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\n\r\n/**\r\n * DashboardLayoutProps\r\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\r\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\r\n * - sidebarHeaderClassName: Optional className for SidebarHeader\r\n *\r\n * These props are forwarded to Sidebar for dynamic header branding.\r\n */\r\ninterface DashboardLayoutProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  sidebarMenuItems?: MenuItem[];\r\n  activeSidebarItem?: string;\r\n  breadcrumbs?: BreadcrumbItem[];\r\n  onSidebarItemClick?: (itemId: string) => void;\r\n  showSearch?: boolean;\r\n  searchPlaceholder?: string;\r\n  onSearchChange?: (value: string) => void;\r\n  sidebarClassName?: string;\r\n  disableSidebarMargin?: boolean;\r\n  /** Sidebar header title (default: \"Beyond\") */\r\n  sidebarTitle?: string;\r\n  /** Sidebar header letter (default: \"B\") */\r\n  sidebarTitleLetter?: string;\r\n  /** Optional className for SidebarHeader */\r\n  sidebarHeaderClassName?: string;\r\n}\r\n\r\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\r\n  ({\r\n    children,\r\n    className,\r\n    sidebarMenuItems,\r\n    activeSidebarItem,\r\n    breadcrumbs,\r\n    onSidebarItemClick,\r\n    showSearch,\r\n    searchPlaceholder,\r\n    onSearchChange,\r\n    sidebarTitle,\r\n    sidebarTitleLetter,\r\n    sidebarHeaderClassName,\r\n    ...props\r\n  }, ref) => {\r\n    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\r\n    const { isBelow } = useBreakpoint();\r\n\r\n    const toggleSidebar = () => {\r\n      setSidebarCollapsed(prev => !prev);\r\n    };\r\n\r\n    // Responsive sidebar: drawer on mobile, fixed on desktop\r\n    return (\r\n      <div ref={ref} className={cn(\"min-h-screen bg-gray-50 flex flex-col\", className)} {...props}>\r\n        <div className=\"flex flex-1 w-full\">\r\n          {/* Sidebar */}\r\n          <Sidebar\r\n            collapsed={sidebarCollapsed}\r\n            onToggle={toggleSidebar}\r\n            menuItems={sidebarMenuItems}\r\n            activeItem={activeSidebarItem}\r\n            onItemClick={onSidebarItemClick}\r\n            className={cn(\r\n              props.sidebarClassName,\r\n              // Hide sidebar on mobile unless open\r\n              isBelow(\"md\") ? (sidebarCollapsed ? \"hidden\" : \"fixed z-40 top-0 left-0 h-full w-64 bg-white shadow-lg\") : \"relative w-72\"\r\n            )}\r\n            title={sidebarTitle}\r\n            titleLetter={sidebarTitleLetter}\r\n            headerClassName={sidebarHeaderClassName}\r\n          />\r\n\r\n          {/* Main Content Area */}\r\n          <div className=\"flex flex-col flex-1 min-h-screen\">\r\n            {/* Header */}\r\n            <DashboardHeader\r\n              sidebarCollapsed={sidebarCollapsed}\r\n              onMenuToggle={toggleSidebar}\r\n              breadcrumbs={breadcrumbs}\r\n              showSearch={showSearch}\r\n              searchPlaceholder={searchPlaceholder}\r\n              onSearchChange={onSearchChange}\r\n            />\r\n\r\n            {/* Main Content */}\r\n            <main\r\n              className={cn(\r\n                \"flex-1 transition-all duration-300 p-4 md:p-6\",\r\n                props.disableSidebarMargin\r\n                  ? \"\"\r\n                  : isBelow(\"md\")\r\n                    ? \"ml-0\"\r\n                    : (sidebarCollapsed ? \"ml-16\" : \"ml-72\")\r\n              )}\r\n            >\r\n              {children}\r\n            </main>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Mobile Overlay */}\r\n        {isBelow(\"md\") && !sidebarCollapsed && (\r\n          <div\r\n            className=\"fixed inset-0 bg-black bg-opacity-50 z-30\"\r\n            onClick={toggleSidebar}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nDashboardLayout.displayName = \"DashboardLayout\";\r\n\r\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAkCA,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EACC,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,sBAAsB,EACtB,GAAG,KAAK,EACT,EAAE,GAAG,KAAI;AACR,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;IAEnC,MAAM,aAAa,GAAG,MAAK;QACzB,mBAAmB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;AACpC,IAAA,CAAC;;IAGD,QACEA,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CACzFA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAEjCC,GAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,WAAW,EAAE,kBAAkB,EAC/B,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,gBAAgB;;AAEtB,wBAAA,OAAO,CAAC,IAAI,CAAC,IAAI,gBAAgB,GAAG,QAAQ,GAAG,wDAAwD,IAAI,eAAe,CAC3H,EACD,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,kBAAkB,EAC/B,eAAe,EAAE,sBAAsB,EAAA,CACvC,EAGFD,cAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAEhDC,IAAC,eAAe,EAAA,EACd,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAAA,CAC9B,EAGFA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,+CAA+C,EAC/C,KAAK,CAAC;AACJ,sCAAE;AACF,sCAAE,OAAO,CAAC,IAAI;AACZ,0CAAE;AACF,2CAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,CAAC,CAC7C,EAAA,QAAA,EAEA,QAAQ,EAAA,CACJ,CAAA,EAAA,CACH,IACF,EAGL,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,KACjCA,aACE,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,aAAa,GACtB,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DataTable/DataTable.js

@@ -1,12 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo } from 'react';
-import { ChevronUp, ChevronDown, Filter, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
+import { ChevronUp, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, Filter } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../Button/Button.js';
 import { Input } from '../Input/Input.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Skeleton } from '../Skeleton/Skeleton.js';
+import { Card, CardContent } from '../Card/Card.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 
 const tableVariants = cva("w-full border-collapse bg-white", {
     variants: {
@@ -212,27 +214,39 @@ const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagina
     if (loading) {
         return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, i) => (jsxs("div", { className: "flex space-x-4", children: [jsx(Skeleton, { className: "h-4 w-8" }), jsx(Skeleton, { className: "h-4 flex-1" }), jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-4 w-16" })] }, i))) }) })] }));
     }
-    return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: cn(tableVariants({ size, bordered })), children: [showHeader && (jsx("thead", { children: jsxs("tr", { children: [rowSelection && (jsx("th", { className: cn(cellVariants({ size, type: "header" }), "w-12"), children: rowSelection.type !== 'radio' && (jsx(Checkbox, { checked: isAllSelected, onChange: (e) => handleSelectAll(e.target.checked), className: cn(isIndeterminate && "indeterminate") })) })), columns.map((column) => (jsx("th", { className: cn(cellVariants({
-                                                    size,
-                                                    align: column.align,
-                                                    type: "header"
-                                                }), column.width && `w-[${column.width}]`), children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("span", { children: column.title }), column.sortable && (jsxs("button", { onClick: () => handleSort(column.key), className: "flex flex-col items-center hover:text-primary-600", children: [jsx(ChevronUp, { className: cn("h-3 w-3", sortConfig.key === column.key && sortConfig.direction === 'asc'
-                                                                                ? "text-primary-600"
-                                                                                : "text-gray-400") }), jsx(ChevronDown, { className: cn("h-3 w-3 -mt-1", sortConfig.key === column.key && sortConfig.direction === 'desc'
-                                                                                ? "text-primary-600"
-                                                                                : "text-gray-400") })] }))] }), jsx(ColumnFilter, { column: column, value: filters[column.key], onChange: (value) => handleFilter(column.key, value) })] }) }, column.key)))] }) })), jsx("tbody", { children: paginatedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (rowSelection ? 1 : 0), className: cn(cellVariants({ size, align: "center" }), "py-8"), children: jsxs("div", { className: "text-gray-500", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] }) }) })) : (paginatedData.map((record, index) => {
-                                        const key = getRowKey(record, index);
-                                        const isSelected = selectedRowKeys.includes(key);
-                                        return (jsxs("tr", { className: cn("hover:bg-gray-50 transition-colors", isSelected && "bg-primary-50"), ...(props.onRow?.(record, index) ?? {}), children: [rowSelection && (jsx("td", { className: cn(cellVariants({ size })), children: jsx(Checkbox, { checked: isSelected, onChange: (e) => handleRowSelect(record, e.target.checked), ...rowSelection.getCheckboxProps?.(record) }) })), columns.map((column) => (jsx("td", { className: cn(cellVariants({
-                                                        size,
-                                                        align: column.align
-                                                    })), children: column.render
+    // Mobile-first responsive: useBreakpoint to switch between table and card layouts
+    const { isBelow } = useBreakpoint();
+    return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: isBelow('md') ? (
+                // Card layout for mobile
+                jsxs("div", { className: "space-y-4 p-2", children: [paginatedData.length === 0 ? (jsxs("div", { className: "text-gray-500 text-center py-8", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] })) : (paginatedData.map((record, index) => {
+                            const key = getRowKey(record, index);
+                            const isSelected = selectedRowKeys.includes(key);
+                            return (jsx(Card, { variant: isSelected ? "elevated" : "default", padding: "sm", className: cn("transition-shadow", isSelected && "border-primary-600 shadow-lg"), children: jsxs(CardContent, { className: "space-y-2", children: [rowSelection && (jsxs("div", { className: "flex items-center mb-2", children: [jsx(Checkbox, { checked: isSelected, onChange: (e) => handleRowSelect(record, e.target.checked), ...rowSelection.getCheckboxProps?.(record) }), jsx("span", { className: "ml-2 text-xs text-gray-500", children: "Select" })] })), columns.map((column) => (jsxs("div", { className: "flex justify-between items-center py-1 border-b last:border-b-0", children: [jsx("span", { className: "font-medium text-gray-700", children: column.title }), jsx("span", { className: "text-gray-900", children: column.render
                                                         ? column.render(record[column.dataIndex], record, index)
-                                                        : String(record[column.dataIndex] || '') }, column.key)))] }, key));
-                                    })) })] }) }), currentPagination && (jsx(TablePagination, { pagination: currentPagination, onChange: (page, pageSize) => {
-                            const newPagination = { ...currentPagination, current: page, pageSize };
-                            onChange?.(newPagination, filters, sortConfig);
-                        } }))] }), footer && jsx("div", { className: "mt-4", children: footer() })] }));
+                                                        : String(record[column.dataIndex] || '') })] }, column.key)))] }) }, key));
+                        })), currentPagination && (jsx("div", { className: "pt-2", children: jsx(TablePagination, { pagination: currentPagination, onChange: (page, pageSize) => {
+                                    const newPagination = { ...currentPagination, current: page, pageSize };
+                                    onChange?.(newPagination, filters, sortConfig);
+                                } }) }))] })) : (
+                // Table layout for desktop/tablet
+                jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: cn(tableVariants({ size, bordered })), children: [showHeader && (jsx("thead", { children: jsxs("tr", { children: [rowSelection && (jsx("th", { className: cn(cellVariants({ size, type: "header" }), "w-12"), children: rowSelection.type !== 'radio' && (jsx(Checkbox, { checked: isAllSelected, onChange: (e) => handleSelectAll(e.target.checked), className: cn(isIndeterminate && "indeterminate") })) })), columns.map((column) => (jsx("th", { className: cn(cellVariants({
+                                                size,
+                                                align: column.align,
+                                                type: "header"
+                                            }), column.width && `w-[${column.width}]`), children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("span", { children: column.title }), column.sortable && (jsxs("button", { onClick: () => handleSort(column.key), className: "flex flex-col items-center hover:text-primary-600", children: [jsx(ChevronUp, { className: cn("h-3 w-3", sortConfig.key === column.key && sortConfig.direction === 'asc'
+                                                                            ? "text-primary-600"
+                                                                            : "text-gray-400") }), jsx(ChevronDown, { className: cn("h-3 w-3 -mt-1", sortConfig.key === column.key && sortConfig.direction === 'desc'
+                                                                            ? "text-primary-600"
+                                                                            : "text-gray-400") })] }))] }), jsx(ColumnFilter, { column: column, value: filters[column.key], onChange: (value) => handleFilter(column.key, value) })] }) }, column.key)))] }) })), jsx("tbody", { children: paginatedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (rowSelection ? 1 : 0), className: cn(cellVariants({ size, align: "center" }), "py-8"), children: jsxs("div", { className: "text-gray-500", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] }) }) })) : (paginatedData.map((record, index) => {
+                                    const key = getRowKey(record, index);
+                                    const isSelected = selectedRowKeys.includes(key);
+                                    return (jsxs("tr", { className: cn("hover:bg-gray-50 transition-colors", isSelected && "bg-primary-50"), ...(props.onRow?.(record, index) ?? {}), children: [rowSelection && (jsx("td", { className: cn(cellVariants({ size })), children: jsx(Checkbox, { checked: isSelected, onChange: (e) => handleRowSelect(record, e.target.checked), ...rowSelection.getCheckboxProps?.(record) }) })), columns.map((column) => (jsx("td", { className: cn(cellVariants({
+                                                    size,
+                                                    align: column.align
+                                                })), children: column.render
+                                                    ? column.render(record[column.dataIndex], record, index)
+                                                    : String(record[column.dataIndex] || '') }, column.key)))] }, key));
+                                })) })] }) })) }), footer && jsx("div", { className: "mt-4", children: footer() })] }));
 };
 DataTable.displayName = "DataTable";
 

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useCallback } from \"react\";\nimport { \n  ChevronUp, \n  ChevronDown, \n  Search, \n  Filter, \n  ChevronLeft, \n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  MoreHorizontal,\n  Check,\n  Minus\n} from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Badge } from \"../Badge\";\nimport { Spinner } from \"../Spinner\";\nimport { Skeleton } from \"../Skeleton\";\nimport type { \n  DataTableProps, \n  Column, \n  FilterValue, \n  SortConfig, \n  PaginationConfig,\n  RowSelection \n} from \"./DataTable.types\";\n\nconst tableVariants = cva(\n  \"w-full border-collapse bg-white\",\n  {\n    variants: {\n      size: {\n        small: \"text-xs\",\n        middle: \"text-sm\",\n        large: \"text-base\",\n      },\n      bordered: {\n        true: \"border border-gray-200\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"middle\",\n      bordered: false,\n    },\n  }\n);\n\nconst cellVariants = cva(\n  \"border-b border-gray-200 transition-colors\",\n  {\n    variants: {\n      size: {\n        small: \"px-2 py-1\",\n        middle: \"px-4 py-3\",\n        large: \"px-6 py-4\",\n      },\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n      },\n      type: {\n        header: \"bg-gray-50 font-semibold text-gray-900 border-b-2 border-gray-200\",\n        body: \"text-gray-700 hover:bg-gray-50\",\n      },\n    },\n    defaultVariants: {\n      size: \"middle\",\n      align: \"left\",\n      type: \"body\",\n    },\n  }\n);\n\n// Filter component for individual columns\nconst ColumnFilter = <T extends Record<string, any>>({\n  column,\n  value,\n  onChange,\n}: {\n  column: Column<T>;\n  value: any;\n  onChange: (value: any) => void;\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [tempValue, setTempValue] = useState(value || '');\n\n  const handleApply = () => {\n    onChange(tempValue);\n    setIsOpen(false);\n  };\n\n  const handleClear = () => {\n    setTempValue('');\n    onChange('');\n    setIsOpen(false);\n  };\n\n  if (!column.filterable) return null;\n\n  return (\n    <div className=\"relative inline-block\">\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={() => setIsOpen(!isOpen)}\n        className={cn(\n          \"p-1 h-6 w-6\",\n          value && \"text-primary-600\"\n        )}\n      >\n        <Filter className=\"h-3 w-3\" />\n      </Button>\n      \n      {isOpen && (\n        <>\n          <div \n            className=\"fixed inset-0 z-10\" \n            onClick={() => setIsOpen(false)}\n          />\n          <div className=\"absolute top-full left-0 z-20 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[200px]\">\n            {column.filterType === 'select' && column.filterOptions ? (\n              <div className=\"space-y-2\">\n                {column.filterOptions.map((option) => (\n                  <label key={option.value} className=\"flex items-center space-x-2\">\n                    <Checkbox\n                      checked={tempValue === option.value}\n                      onChange={() => setTempValue(\n                        tempValue === option.value ? '' : option.value\n                      )}\n                    />\n                    <span className=\"text-sm\">{option.label}</span>\n                  </label>\n                ))}\n              </div>\n            ) : (\n              <Input\n                placeholder={`Filter ${column.title}`}\n                value={tempValue}\n                onChange={(e) => setTempValue(e.target.value)}\n                className=\"mb-2\"\n              />\n            )}\n            \n            <div className=\"flex justify-end space-x-2 mt-3\">\n              <Button variant=\"ghost\" size=\"sm\" onClick={handleClear}>\n                Clear\n              </Button>\n              <Button variant=\"primary\" size=\"sm\" onClick={handleApply}>\n                Apply\n              </Button>\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\n// Pagination component\nconst TablePagination: React.FC<{\n  pagination: PaginationConfig;\n  onChange: (page: number, pageSize: number) => void;\n}> = ({ pagination, onChange }) => {\n  const { current, pageSize, total, showSizeChanger = true, pageSizeOptions = [10, 20, 50, 100] } = pagination;\n  const totalPages = Math.ceil(total / pageSize);\n  const startRecord = (current - 1) * pageSize + 1;\n  const endRecord = Math.min(current * pageSize, total);\n\n  const getPageNumbers = () => {\n    const pages = [];\n    const maxVisible = 5;\n    \n    if (totalPages <= maxVisible) {\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      const start = Math.max(1, current - 2);\n      const end = Math.min(totalPages, start + maxVisible - 1);\n      \n      for (let i = start; i <= end; i++) {\n        pages.push(i);\n      }\n    }\n    \n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200\">\n      <div className=\"flex items-center space-x-4\">\n        <span className=\"text-sm text-gray-700\">\n          Showing {startRecord} to {endRecord} of {total} results\n        </span>\n        \n        {showSizeChanger && (\n          <div className=\"flex items-center space-x-2\">\n            <span className=\"text-sm text-gray-700\">Show</span>\n            <select\n              value={pageSize}\n              onChange={(e) => onChange(1, Number(e.target.value))}\n              className=\"border border-gray-300 rounded px-2 py-1 text-sm\"\n            >\n              {pageSizeOptions.map(size => (\n                <option key={size} value={size}>{size}</option>\n              ))}\n            </select>\n            <span className=\"text-sm text-gray-700\">per page</span>\n          </div>\n        )}\n      </div>\n      \n      <div className=\"flex items-center space-x-1\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(1, pageSize)}\n          disabled={current === 1}\n        >\n          <ChevronsLeft className=\"h-4 w-4\" />\n        </Button>\n        \n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(current - 1, pageSize)}\n          disabled={current === 1}\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n        \n        {getPageNumbers().map(page => (\n          <Button\n            key={page}\n            variant={current === page ? \"primary\" : \"ghost\"}\n            size=\"sm\"\n            onClick={() => onChange(page, pageSize)}\n            className=\"min-w-[32px]\"\n          >\n            {page}\n          </Button>\n        ))}\n        \n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(current + 1, pageSize)}\n          disabled={current === totalPages}\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n        \n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(totalPages, pageSize)}\n          disabled={current === totalPages}\n        >\n          <ChevronsRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport const DataTable = <T extends Record<string, any>>({\n  columns,\n  dataSource,\n  loading = false,\n  rowKey = 'id',\n  pagination = { current: 1, pageSize: 10, total: 0 },\n  rowSelection,\n  size = 'middle',\n  bordered = false,\n  showHeader = true,\n  title,\n  footer,\n  className,\n  onSort,\n  onFilter,\n  onChange,\n  ...props\n}: DataTableProps<T>) => {\n  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: '', direction: null });\n  const [filters, setFilters] = useState<FilterValue>({});\n  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(\n    rowSelection?.selectedRowKeys || []\n  );\n\n  // Get row key function\n  const getRowKey = useCallback((record: T, index: number): React.Key => {\n    if (typeof rowKey === 'function') {\n      return rowKey(record);\n    }\n    return record[rowKey] || index;\n  }, [rowKey]);\n\n  // Handle sorting\n  const handleSort = useCallback((columnKey: string) => {\n    let newDirection: 'asc' | 'desc' | null;\n    if (sortConfig.key !== columnKey) {\n      newDirection = 'asc';\n    } else if (sortConfig.direction === 'asc') {\n      newDirection = 'desc';\n    } else if (sortConfig.direction === 'desc') {\n      newDirection = null;\n    } else {\n      newDirection = 'asc';\n    }\n    const newSortConfig: SortConfig = { key: columnKey, direction: newDirection };\n    setSortConfig(newSortConfig);\n    onSort?.(newSortConfig);\n    onChange?.(pagination as PaginationConfig, filters, newSortConfig);\n  }, [sortConfig, pagination, filters, onSort, onChange]);\n\n  // Handle filtering\n  const handleFilter = useCallback((columnKey: string, value: any) => {\n    const newFilters = { ...filters };\n    if (value === '' || value === null || value === undefined) {\n      delete newFilters[columnKey];\n    } else {\n      newFilters[columnKey] = value;\n    }\n    \n    setFilters(newFilters);\n    onFilter?.(newFilters);\n    onChange?.(pagination as PaginationConfig, newFilters, sortConfig);\n  }, [filters, pagination, sortConfig, onFilter, onChange]);\n\n  // Handle row selection\n  const handleRowSelect = useCallback((record: T, selected: boolean) => {\n    const key = getRowKey(record, 0);\n    let newSelectedKeys: React.Key[];\n    \n    if (rowSelection?.type === 'radio') {\n      newSelectedKeys = selected ? [key] : [];\n    } else {\n      newSelectedKeys = selected \n        ? [...selectedRowKeys, key]\n        : selectedRowKeys.filter(k => k !== key);\n    }\n    \n    setSelectedRowKeys(newSelectedKeys);\n    const selectedRows = dataSource.filter(item => \n      newSelectedKeys.includes(getRowKey(item, 0))\n    );\n    \n    rowSelection?.onChange?.(newSelectedKeys, selectedRows);\n    rowSelection?.onSelect?.(record, selected, selectedRows, {} as Event);\n  }, [selectedRowKeys, rowSelection, dataSource, getRowKey]);\n\n  // Handle select all\n  const handleSelectAll = useCallback((selected: boolean) => {\n    const newSelectedKeys = selected \n      ? dataSource.map((item, index) => getRowKey(item, index))\n      : [];\n    \n    setSelectedRowKeys(newSelectedKeys);\n    const selectedRows = selected ? dataSource : [];\n    \n    rowSelection?.onChange?.(newSelectedKeys, selectedRows);\n    rowSelection?.onSelectAll?.(selected, selectedRows, dataSource);\n  }, [dataSource, rowSelection, getRowKey]);\n\n  // Filter and sort data\n  const processedData = useMemo(() => {\n    let result = [...dataSource];\n    \n    // Apply filters\n    Object.entries(filters).forEach(([key, value]) => {\n      if (value !== '' && value !== null && value !== undefined) {\n        result = result.filter(item => {\n          const itemValue = item[key];\n          if (typeof itemValue === 'string') {\n            return itemValue.toLowerCase().includes(String(value).toLowerCase());\n          }\n          return itemValue === value;\n        });\n      }\n    });\n    \n    // Apply sorting\n    if (sortConfig.key && sortConfig.direction) {\n      result.sort((a, b) => {\n        const aValue = a[sortConfig.key];\n        const bValue = b[sortConfig.key];\n        \n        if (aValue === bValue) return 0;\n        \n        const comparison = aValue < bValue ? -1 : 1;\n        return sortConfig.direction === 'asc' ? comparison : -comparison;\n      });\n    }\n    \n    return result;\n  }, [dataSource, filters, sortConfig]);\n\n  // Pagination logic\n  const paginatedData = useMemo(() => {\n    if (!pagination) return processedData;\n    \n    const { current, pageSize } = pagination;\n    const startIndex = (current - 1) * pageSize;\n    return processedData.slice(startIndex, startIndex + pageSize);\n  }, [processedData, pagination]);\n\n  // Update pagination total\n  const currentPagination = useMemo(() => {\n    if (!pagination) return false;\n    return {\n      ...pagination,\n      total: processedData.length,\n    };\n  }, [pagination, processedData.length]);\n\n  // Selection state\n  const isAllSelected = selectedRowKeys.length === dataSource.length && dataSource.length > 0;\n  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;\n\n  if (loading) {\n    return (\n      <div className={cn(\"w-full\", className)}>\n        {title && <div className=\"mb-4\">{title()}</div>}\n        <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\n          <div className=\"p-4 space-y-3\">\n            {Array.from({ length: 5 }).map((_, i) => (\n              <div key={i} className=\"flex space-x-4\">\n                <Skeleton className=\"h-4 w-8\" />\n                <Skeleton className=\"h-4 flex-1\" />\n                <Skeleton className=\"h-4 w-24\" />\n                <Skeleton className=\"h-4 w-16\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {title && <div className=\"mb-4\">{title()}</div>}\n      \n      <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\n        <div className=\"overflow-x-auto\">\n          <table className={cn(tableVariants({ size, bordered }))}>\n            {showHeader && (\n              <thead>\n                <tr>\n                  {rowSelection && (\n                    <th className={cn(cellVariants({ size, type: \"header\" }), \"w-12\")}>\n                      {rowSelection.type !== 'radio' && (\n                        <Checkbox\n                          checked={isAllSelected}\n                          onChange={(e) => handleSelectAll(e.target.checked)}\n                          className={cn(isIndeterminate && \"indeterminate\")}\n                        />\n                      )}\n                    </th>\n                  )}\n                  \n                  {columns.map((column) => (\n                    <th\n                      key={column.key}\n                      className={cn(\n                        cellVariants({ \n                          size, \n                          align: column.align, \n                          type: \"header\" \n                        }),\n                        column.width && `w-[${column.width}]`\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center space-x-2\">\n                          <span>{column.title}</span>\n                          {column.sortable && (\n                            <button\n                              onClick={() => handleSort(column.key)}\n                              className=\"flex flex-col items-center hover:text-primary-600\"\n                            >\n                              <ChevronUp \n                                className={cn(\n                                  \"h-3 w-3\",\n                                  sortConfig.key === column.key && sortConfig.direction === 'asc'\n                                    ? \"text-primary-600\" \n                                    : \"text-gray-400\"\n                                )}\n                              />\n                              <ChevronDown \n                                className={cn(\n                                  \"h-3 w-3 -mt-1\",\n                                  sortConfig.key === column.key && sortConfig.direction === 'desc'\n                                    ? \"text-primary-600\" \n                                    : \"text-gray-400\"\n                                )}\n                              />\n                            </button>\n                          )}\n                        </div>\n                        \n                        <ColumnFilter\n                          column={column}\n                          value={filters[column.key]}\n                          onChange={(value) => handleFilter(column.key, value)}\n                        />\n                      </div>\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n            )}\n            \n            <tbody>\n              {paginatedData.length === 0 ? (\n                <tr>\n                  <td \n                    colSpan={columns.length + (rowSelection ? 1 : 0)}\n                    className={cn(cellVariants({ size, align: \"center\" }), \"py-8\")}\n                  >\n                    <div className=\"text-gray-500\">\n                      <div className=\"text-4xl mb-2\">📋</div>\n                      <div>No data available</div>\n                    </div>\n                  </td>\n                </tr>\n              ) : (\n                paginatedData.map((record, index) => {\n                  const key = getRowKey(record, index);\n                  const isSelected = selectedRowKeys.includes(key);\n                  \n                  return (\n                    <tr\n                      key={key}\n                      className={cn(\n                        \"hover:bg-gray-50 transition-colors\",\n                        isSelected && \"bg-primary-50\"\n                      )}\n                      {...(props.onRow?.(record, index) ?? {})}\n                    >\n                      {rowSelection && (\n                        <td className={cn(cellVariants({ size }))}>\n                          <Checkbox\n                            checked={isSelected}\n                            onChange={(e) => handleRowSelect(record, e.target.checked)}\n                            {...rowSelection.getCheckboxProps?.(record)}\n                          />\n                        </td>\n                      )}\n                      \n                      {columns.map((column) => (\n                        <td\n                          key={column.key}\n                          className={cn(cellVariants({ \n                            size, \n                            align: column.align \n                          }))}\n                        >\n                          {column.render \n                            ? column.render(record[column.dataIndex], record, index)\n                            : String(record[column.dataIndex] || '')\n                          }\n                        </td>\n                      ))}\n                    </tr>\n                  );\n                })\n              )}\n            </tbody>\n          </table>\n        </div>\n        \n        {currentPagination && (\n          <TablePagination\n            pagination={currentPagination}\n            onChange={(page, pageSize) => {\n              const newPagination = { ...currentPagination, current: page, pageSize };\n              onChange?.(newPagination, filters, sortConfig);\n            }}\n          />\n        )}\n      </div>\n      \n      {footer && <div className=\"mt-4\">{footer()}</div>}\n    </div>\n  );\n};\n\nDataTable.displayName = \"DataTable\";"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useCallback } from \"react\";\nimport { \n  ChevronUp, \n  ChevronDown, \n  Search, \n  Filter, \n  ChevronLeft, \n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  MoreHorizontal,\n  Check,\n  Minus\n} from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Badge } from \"../Badge\";\nimport { Spinner } from \"../Spinner\";\nimport { Skeleton } from \"../Skeleton\";\nimport { Card, CardContent } from \"../Card\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport type {\n  DataTableProps,\n  Column,\n  FilterValue,\n  SortConfig,\n  PaginationConfig,\n  RowSelection\n} from \"./DataTable.types\";\n\nconst tableVariants = cva(\n  \"w-full border-collapse bg-white\",\n  {\n    variants: {\n      size: {\n        small: \"text-xs\",\n        middle: \"text-sm\",\n        large: \"text-base\",\n      },\n      bordered: {\n        true: \"border border-gray-200\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"middle\",\n      bordered: false,\n    },\n  }\n);\n\nconst cellVariants = cva(\n  \"border-b border-gray-200 transition-colors\",\n  {\n    variants: {\n      size: {\n        small: \"px-2 py-1\",\n        middle: \"px-4 py-3\",\n        large: \"px-6 py-4\",\n      },\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n      },\n      type: {\n        header: \"bg-gray-50 font-semibold text-gray-900 border-b-2 border-gray-200\",\n        body: \"text-gray-700 hover:bg-gray-50\",\n      },\n    },\n    defaultVariants: {\n      size: \"middle\",\n      align: \"left\",\n      type: \"body\",\n    },\n  }\n);\n\n// Filter component for individual columns\nconst ColumnFilter = <T extends Record<string, any>>({\n  column,\n  value,\n  onChange,\n}: {\n  column: Column<T>;\n  value: any;\n  onChange: (value: any) => void;\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [tempValue, setTempValue] = useState(value || '');\n\n  const handleApply = () => {\n    onChange(tempValue);\n    setIsOpen(false);\n  };\n\n  const handleClear = () => {\n    setTempValue('');\n    onChange('');\n    setIsOpen(false);\n  };\n\n  if (!column.filterable) return null;\n\n  return (\n    <div className=\"relative inline-block\">\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={() => setIsOpen(!isOpen)}\n        className={cn(\n          \"p-1 h-6 w-6\",\n          value && \"text-primary-600\"\n        )}\n      >\n        <Filter className=\"h-3 w-3\" />\n      </Button>\n      \n      {isOpen && (\n        <>\n          <div \n            className=\"fixed inset-0 z-10\" \n            onClick={() => setIsOpen(false)}\n          />\n          <div className=\"absolute top-full left-0 z-20 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[200px]\">\n            {column.filterType === 'select' && column.filterOptions ? (\n              <div className=\"space-y-2\">\n                {column.filterOptions.map((option) => (\n                  <label key={option.value} className=\"flex items-center space-x-2\">\n                    <Checkbox\n                      checked={tempValue === option.value}\n                      onChange={() => setTempValue(\n                        tempValue === option.value ? '' : option.value\n                      )}\n                    />\n                    <span className=\"text-sm\">{option.label}</span>\n                  </label>\n                ))}\n              </div>\n            ) : (\n              <Input\n                placeholder={`Filter ${column.title}`}\n                value={tempValue}\n                onChange={(e) => setTempValue(e.target.value)}\n                className=\"mb-2\"\n              />\n            )}\n            \n            <div className=\"flex justify-end space-x-2 mt-3\">\n              <Button variant=\"ghost\" size=\"sm\" onClick={handleClear}>\n                Clear\n              </Button>\n              <Button variant=\"primary\" size=\"sm\" onClick={handleApply}>\n                Apply\n              </Button>\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\n// Pagination component\nconst TablePagination: React.FC<{\n  pagination: PaginationConfig;\n  onChange: (page: number, pageSize: number) => void;\n}> = ({ pagination, onChange }) => {\n  const { current, pageSize, total, showSizeChanger = true, pageSizeOptions = [10, 20, 50, 100] } = pagination;\n  const totalPages = Math.ceil(total / pageSize);\n  const startRecord = (current - 1) * pageSize + 1;\n  const endRecord = Math.min(current * pageSize, total);\n\n  const getPageNumbers = () => {\n    const pages = [];\n    const maxVisible = 5;\n    \n    if (totalPages <= maxVisible) {\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      const start = Math.max(1, current - 2);\n      const end = Math.min(totalPages, start + maxVisible - 1);\n      \n      for (let i = start; i <= end; i++) {\n        pages.push(i);\n      }\n    }\n    \n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200\">\n      <div className=\"flex items-center space-x-4\">\n        <span className=\"text-sm text-gray-700\">\n          Showing {startRecord} to {endRecord} of {total} results\n        </span>\n        \n        {showSizeChanger && (\n          <div className=\"flex items-center space-x-2\">\n            <span className=\"text-sm text-gray-700\">Show</span>\n            <select\n              value={pageSize}\n              onChange={(e) => onChange(1, Number(e.target.value))}\n              className=\"border border-gray-300 rounded px-2 py-1 text-sm\"\n            >\n              {pageSizeOptions.map(size => (\n                <option key={size} value={size}>{size}</option>\n              ))}\n            </select>\n            <span className=\"text-sm text-gray-700\">per page</span>\n          </div>\n        )}\n      </div>\n      \n      <div className=\"flex items-center space-x-1\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(1, pageSize)}\n          disabled={current === 1}\n        >\n          <ChevronsLeft className=\"h-4 w-4\" />\n        </Button>\n        \n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(current - 1, pageSize)}\n          disabled={current === 1}\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n        \n        {getPageNumbers().map(page => (\n          <Button\n            key={page}\n            variant={current === page ? \"primary\" : \"ghost\"}\n            size=\"sm\"\n            onClick={() => onChange(page, pageSize)}\n            className=\"min-w-[32px]\"\n          >\n            {page}\n          </Button>\n        ))}\n        \n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(current + 1, pageSize)}\n          disabled={current === totalPages}\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n        \n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => onChange(totalPages, pageSize)}\n          disabled={current === totalPages}\n        >\n          <ChevronsRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport const DataTable = <T extends Record<string, any>>({\n  columns,\n  dataSource,\n  loading = false,\n  rowKey = 'id',\n  pagination = { current: 1, pageSize: 10, total: 0 },\n  rowSelection,\n  size = 'middle',\n  bordered = false,\n  showHeader = true,\n  title,\n  footer,\n  className,\n  onSort,\n  onFilter,\n  onChange,\n  ...props\n}: DataTableProps<T>) => {\n  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: '', direction: null });\n  const [filters, setFilters] = useState<FilterValue>({});\n  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(\n    rowSelection?.selectedRowKeys || []\n  );\n\n  // Get row key function\n  const getRowKey = useCallback((record: T, index: number): React.Key => {\n    if (typeof rowKey === 'function') {\n      return rowKey(record);\n    }\n    return record[rowKey] || index;\n  }, [rowKey]);\n\n  // Handle sorting\n  const handleSort = useCallback((columnKey: string) => {\n    let newDirection: 'asc' | 'desc' | null;\n    if (sortConfig.key !== columnKey) {\n      newDirection = 'asc';\n    } else if (sortConfig.direction === 'asc') {\n      newDirection = 'desc';\n    } else if (sortConfig.direction === 'desc') {\n      newDirection = null;\n    } else {\n      newDirection = 'asc';\n    }\n    const newSortConfig: SortConfig = { key: columnKey, direction: newDirection };\n    setSortConfig(newSortConfig);\n    onSort?.(newSortConfig);\n    onChange?.(pagination as PaginationConfig, filters, newSortConfig);\n  }, [sortConfig, pagination, filters, onSort, onChange]);\n\n  // Handle filtering\n  const handleFilter = useCallback((columnKey: string, value: any) => {\n    const newFilters = { ...filters };\n    if (value === '' || value === null || value === undefined) {\n      delete newFilters[columnKey];\n    } else {\n      newFilters[columnKey] = value;\n    }\n    \n    setFilters(newFilters);\n    onFilter?.(newFilters);\n    onChange?.(pagination as PaginationConfig, newFilters, sortConfig);\n  }, [filters, pagination, sortConfig, onFilter, onChange]);\n\n  // Handle row selection\n  const handleRowSelect = useCallback((record: T, selected: boolean) => {\n    const key = getRowKey(record, 0);\n    let newSelectedKeys: React.Key[];\n    \n    if (rowSelection?.type === 'radio') {\n      newSelectedKeys = selected ? [key] : [];\n    } else {\n      newSelectedKeys = selected \n        ? [...selectedRowKeys, key]\n        : selectedRowKeys.filter(k => k !== key);\n    }\n    \n    setSelectedRowKeys(newSelectedKeys);\n    const selectedRows = dataSource.filter(item => \n      newSelectedKeys.includes(getRowKey(item, 0))\n    );\n    \n    rowSelection?.onChange?.(newSelectedKeys, selectedRows);\n    rowSelection?.onSelect?.(record, selected, selectedRows, {} as Event);\n  }, [selectedRowKeys, rowSelection, dataSource, getRowKey]);\n\n  // Handle select all\n  const handleSelectAll = useCallback((selected: boolean) => {\n    const newSelectedKeys = selected \n      ? dataSource.map((item, index) => getRowKey(item, index))\n      : [];\n    \n    setSelectedRowKeys(newSelectedKeys);\n    const selectedRows = selected ? dataSource : [];\n    \n    rowSelection?.onChange?.(newSelectedKeys, selectedRows);\n    rowSelection?.onSelectAll?.(selected, selectedRows, dataSource);\n  }, [dataSource, rowSelection, getRowKey]);\n\n  // Filter and sort data\n  const processedData = useMemo(() => {\n    let result = [...dataSource];\n    \n    // Apply filters\n    Object.entries(filters).forEach(([key, value]) => {\n      if (value !== '' && value !== null && value !== undefined) {\n        result = result.filter(item => {\n          const itemValue = item[key];\n          if (typeof itemValue === 'string') {\n            return itemValue.toLowerCase().includes(String(value).toLowerCase());\n          }\n          return itemValue === value;\n        });\n      }\n    });\n    \n    // Apply sorting\n    if (sortConfig.key && sortConfig.direction) {\n      result.sort((a, b) => {\n        const aValue = a[sortConfig.key];\n        const bValue = b[sortConfig.key];\n        \n        if (aValue === bValue) return 0;\n        \n        const comparison = aValue < bValue ? -1 : 1;\n        return sortConfig.direction === 'asc' ? comparison : -comparison;\n      });\n    }\n    \n    return result;\n  }, [dataSource, filters, sortConfig]);\n\n  // Pagination logic\n  const paginatedData = useMemo(() => {\n    if (!pagination) return processedData;\n    \n    const { current, pageSize } = pagination;\n    const startIndex = (current - 1) * pageSize;\n    return processedData.slice(startIndex, startIndex + pageSize);\n  }, [processedData, pagination]);\n\n  // Update pagination total\n  const currentPagination = useMemo(() => {\n    if (!pagination) return false;\n    return {\n      ...pagination,\n      total: processedData.length,\n    };\n  }, [pagination, processedData.length]);\n\n  // Selection state\n  const isAllSelected = selectedRowKeys.length === dataSource.length && dataSource.length > 0;\n  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;\n\n  if (loading) {\n    return (\n      <div className={cn(\"w-full\", className)}>\n        {title && <div className=\"mb-4\">{title()}</div>}\n        <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\n          <div className=\"p-4 space-y-3\">\n            {Array.from({ length: 5 }).map((_, i) => (\n              <div key={i} className=\"flex space-x-4\">\n                <Skeleton className=\"h-4 w-8\" />\n                <Skeleton className=\"h-4 flex-1\" />\n                <Skeleton className=\"h-4 w-24\" />\n                <Skeleton className=\"h-4 w-16\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Mobile-first responsive: useBreakpoint to switch between table and card layouts\n  const { isBelow } = useBreakpoint();\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {title && <div className=\"mb-4\">{title()}</div>}\n\n      <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\n        {isBelow('md') ? (\n          // Card layout for mobile\n          <div className=\"space-y-4 p-2\">\n            {paginatedData.length === 0 ? (\n              <div className=\"text-gray-500 text-center py-8\">\n                <div className=\"text-4xl mb-2\">📋</div>\n                <div>No data available</div>\n              </div>\n            ) : (\n              paginatedData.map((record, index) => {\n                const key = getRowKey(record, index);\n                const isSelected = selectedRowKeys.includes(key);\n\n                return (\n                  <Card\n                    key={key}\n                    variant={isSelected ? \"elevated\" : \"default\"}\n                    padding=\"sm\"\n                    className={cn(\n                      \"transition-shadow\",\n                      isSelected && \"border-primary-600 shadow-lg\"\n                    )}\n                  >\n                    <CardContent className=\"space-y-2\">\n                      {rowSelection && (\n                        <div className=\"flex items-center mb-2\">\n                          <Checkbox\n                            checked={isSelected}\n                            onChange={(e) => handleRowSelect(record, e.target.checked)}\n                            {...rowSelection.getCheckboxProps?.(record)}\n                          />\n                          <span className=\"ml-2 text-xs text-gray-500\">Select</span>\n                        </div>\n                      )}\n                      {columns.map((column) => (\n                        <div key={column.key} className=\"flex justify-between items-center py-1 border-b last:border-b-0\">\n                          <span className=\"font-medium text-gray-700\">{column.title}</span>\n                          <span className=\"text-gray-900\">\n                            {column.render\n                              ? column.render(record[column.dataIndex], record, index)\n                              : String(record[column.dataIndex] || '')\n                            }\n                          </span>\n                        </div>\n                      ))}\n                    </CardContent>\n                  </Card>\n                );\n              })\n            )}\n            {currentPagination && (\n              <div className=\"pt-2\">\n                <TablePagination\n                  pagination={currentPagination}\n                  onChange={(page, pageSize) => {\n                    const newPagination = { ...currentPagination, current: page, pageSize };\n                    onChange?.(newPagination, filters, sortConfig);\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        ) : (\n          // Table layout for desktop/tablet\n          <div className=\"overflow-x-auto\">\n            <table className={cn(tableVariants({ size, bordered }))}>\n              {showHeader && (\n                <thead>\n                  <tr>\n                    {rowSelection && (\n                      <th className={cn(cellVariants({ size, type: \"header\" }), \"w-12\")}>\n                        {rowSelection.type !== 'radio' && (\n                          <Checkbox\n                            checked={isAllSelected}\n                            onChange={(e) => handleSelectAll(e.target.checked)}\n                            className={cn(isIndeterminate && \"indeterminate\")}\n                          />\n                        )}\n                      </th>\n                    )}\n                    \n                    {columns.map((column) => (\n                      <th\n                        key={column.key}\n                        className={cn(\n                          cellVariants({\n                            size,\n                            align: column.align,\n                            type: \"header\"\n                          }),\n                          column.width && `w-[${column.width}]`\n                        )}\n                      >\n                        <div className=\"flex items-center justify-between\">\n                          <div className=\"flex items-center space-x-2\">\n                            <span>{column.title}</span>\n                            {column.sortable && (\n                              <button\n                                onClick={() => handleSort(column.key)}\n                                className=\"flex flex-col items-center hover:text-primary-600\"\n                              >\n                                <ChevronUp\n                                  className={cn(\n                                    \"h-3 w-3\",\n                                    sortConfig.key === column.key && sortConfig.direction === 'asc'\n                                      ? \"text-primary-600\"\n                                      : \"text-gray-400\"\n                                  )}\n                                />\n                                <ChevronDown\n                                  className={cn(\n                                    \"h-3 w-3 -mt-1\",\n                                    sortConfig.key === column.key && sortConfig.direction === 'desc'\n                                      ? \"text-primary-600\"\n                                      : \"text-gray-400\"\n                                  )}\n                                />\n                              </button>\n                            )}\n                          </div>\n                          \n                          <ColumnFilter\n                            column={column}\n                            value={filters[column.key]}\n                            onChange={(value) => handleFilter(column.key, value)}\n                          />\n                        </div>\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n              )}\n              \n              <tbody>\n                {paginatedData.length === 0 ? (\n                  <tr>\n                    <td\n                      colSpan={columns.length + (rowSelection ? 1 : 0)}\n                      className={cn(cellVariants({ size, align: \"center\" }), \"py-8\")}\n                    >\n                      <div className=\"text-gray-500\">\n                        <div className=\"text-4xl mb-2\">📋</div>\n                        <div>No data available</div>\n                      </div>\n                    </td>\n                  </tr>\n                ) : (\n                  paginatedData.map((record, index) => {\n                    const key = getRowKey(record, index);\n                    const isSelected = selectedRowKeys.includes(key);\n                    \n                    return (\n                      <tr\n                        key={key}\n                        className={cn(\n                          \"hover:bg-gray-50 transition-colors\",\n                          isSelected && \"bg-primary-50\"\n                        )}\n                        {...(props.onRow?.(record, index) ?? {})}\n                      >\n                        {rowSelection && (\n                          <td className={cn(cellVariants({ size }))}>\n                            <Checkbox\n                              checked={isSelected}\n                              onChange={(e) => handleRowSelect(record, e.target.checked)}\n                              {...rowSelection.getCheckboxProps?.(record)}\n                            />\n                          </td>\n                        )}\n                        \n                        {columns.map((column) => (\n                          <td\n                            key={column.key}\n                            className={cn(cellVariants({\n                              size,\n                              align: column.align\n                            }))}\n                          >\n                            {column.render\n                              ? column.render(record[column.dataIndex], record, index)\n                              : String(record[column.dataIndex] || '')\n                            }\n                          </td>\n                        ))}\n                      </tr>\n                    );\n                  })\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n\n      {footer && <div className=\"mt-4\">{footer()}</div>}\n    </div>\n  );\n};\n\nDataTable.displayName = \"DataTable\";"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/components/Navbar/Navbar.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { X, Menu } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 
 const navbarVariants = cva("flex items-center justify-between w-full px-4 py-3 bg-white border-b border-gray-200", {
     variants: {
@@ -24,10 +25,17 @@ const navbarVariants = cva("flex items-center justify-between w-full px-4 py-3 b
 });
 const Navbar = React.forwardRef(({ className, variant, size, logo, children, ...props }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    return (jsxs("nav", { ref: ref, className: cn(navbarVariants({ variant, size }), className), ...props, children: [jsxs("div", { className: "flex items-center justify-between w-full", children: [logo && jsx("div", { className: "flex-shrink-0", children: logo }), jsx("div", { className: "hidden md:flex items-center space-x-4 ml-auto", children: children }), jsx("button", { className: "md:hidden p-2 rounded-md hover:bg-gray-100", onClick: () => setIsOpen(!isOpen), children: isOpen ? jsx(X, { className: "h-6 w-6" }) : jsx(Menu, { className: "h-6 w-6" }) })] }), isOpen && (jsx("div", { className: "md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50", children: jsx("div", { className: "px-4 py-2 space-y-2", children: children }) }))] }));
+    const { currentBreakpoint, isAbove } = useBreakpoint();
+    // Close mobile menu if switching to desktop breakpoint
+    React.useEffect(() => {
+        if (isAbove("md") && isOpen) {
+            setIsOpen(false);
+        }
+    }, [currentBreakpoint, isOpen, isAbove]);
+    return (jsxs("nav", { ref: ref, className: cn(navbarVariants({ variant, size }), className), ...props, children: [jsxs("div", { className: "flex items-center justify-between w-full", children: [logo && jsx("div", { className: "flex-shrink-0", children: logo }), jsx("div", { className: "hidden md:flex items-center space-x-4 ml-auto", children: children }), jsx("button", { className: "md:hidden p-2 rounded-md hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500", "aria-label": isOpen ? "Close navigation menu" : "Open navigation menu", "aria-controls": "mobile-navbar-menu", "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), children: isOpen ? jsx(X, { className: "h-6 w-6 text-primary-600" }) : jsx(Menu, { className: "h-6 w-6 text-primary-600" }) })] }), jsx("div", { id: "mobile-navbar-menu", role: "menu", "aria-label": "Mobile navigation", tabIndex: -1, className: cn("md:hidden fixed inset-x-0 top-full bg-white dark:bg-gray-900 border-b border-primary-100 dark:border-gray-700 shadow-lg z-50 overflow-y-auto max-h-[60vh] transition-all duration-300 ease-in-out", isOpen ? "opacity-100 pointer-events-auto translate-y-0" : "opacity-0 pointer-events-none -translate-y-2"), children: jsx("div", { className: "px-4 py-2 space-y-2", children: children }) })] }));
 });
 Navbar.displayName = "Navbar";
-const NavItem = React.forwardRef(({ className, ...props }, ref) => (jsx("a", { ref: ref, className: cn("text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors", className), ...props })));
+const NavItem = React.forwardRef(({ className, ...props }, ref) => (jsx("a", { ref: ref, className: cn("text-primary-700 dark:text-primary-200 hover:bg-primary-50 dark:hover:bg-gray-800 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors", className), ...props })));
 NavItem.displayName = "NavItem";
 
 export { NavItem, Navbar, navbarVariants };

package/dist/components/Navbar/Navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.js","sources":["../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Menu, X } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst navbarVariants = cva(\n  \"flex items-center justify-between w-full px-4 py-3 bg-white border-b border-gray-200\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-white border-gray-200\",\n        dark: \"bg-gray-900 border-gray-700 text-white\",\n        transparent: \"bg-transparent border-transparent\",\n      },\n      size: {\n        sm: \"px-4 py-2\",\n        md: \"px-6 py-3\",\n        lg: \"px-8 py-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n);\n\nexport interface NavbarProps\n  extends React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof navbarVariants> {\n  logo?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nconst Navbar = React.forwardRef<HTMLElement, NavbarProps>(\n  ({ className, variant, size, logo, children, ...props }, ref) => {\n    const [isOpen, setIsOpen] = React.useState(false);\n\n    return (\n      <nav\n        ref={ref}\n        className={cn(navbarVariants({ variant, size }), className)}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between w-full\">\n          {/* Logo */}\n          {logo && <div className=\"flex-shrink-0\">{logo}</div>}\n\n          {/* Desktop Navigation */}\n          <div className=\"hidden md:flex items-center space-x-4 ml-auto\">\n            {children}\n          </div>\n\n          {/* Mobile Menu Button */}\n          <button\n            className=\"md:hidden p-2 rounded-md hover:bg-gray-100\"\n            onClick={() => setIsOpen(!isOpen)}\n          >\n            {isOpen ? <X className=\"h-6 w-6\" /> : <Menu className=\"h-6 w-6\" />}\n          </button>\n        </div>\n\n        {/* Mobile Navigation */}\n        {isOpen && (\n          <div className=\"md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50\">\n            <div className=\"px-4 py-2 space-y-2\">\n              {children}\n            </div>\n          </div>\n        )}\n      </nav>\n    );\n  }\n);\nNavbar.displayName = \"Navbar\";\n\nconst NavItem = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, ...props }, ref) => (\n  <a\n    ref={ref}\n    className={cn(\n      \"text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors\",\n      className\n    )}\n    {...props}\n  />\n));\nNavItem.displayName = \"NavItem\";\n\nexport { Navbar, NavItem, navbarVariants };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,cAAc,GAAG,GAAG,CACxB,sFAAsF,EACtF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,0BAA0B;AACnC,YAAA,IAAI,EAAE,wCAAwC;AAC9C,YAAA,WAAW,EAAE,mCAAmC;AACjD,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AAUH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC9D,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IAEjD,QACEA,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GACvD,KAAK,EAAA,QAAA,EAAA,CAETA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CAEtD,IAAI,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,IAAI,EAAA,CAAO,EAGpDA,aAAK,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAC3D,QAAQ,EAAA,CACL,EAGNA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,EAAA,QAAA,EAEhC,MAAM,GAAGA,GAAA,CAAC,CAAC,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC3D,CAAA,EAAA,CACL,EAGL,MAAM,KACLA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6FAA6F,YAC1GA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EACjC,QAAQ,GACL,EAAA,CACF,CACP,CAAA,EAAA,CACG;AAEV,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ;AAE7B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAG9B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,iGAAiG,EACjG,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Navbar.js","sources":["../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Menu, X } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst navbarVariants = cva(\n  \"flex items-center justify-between w-full px-4 py-3 bg-white border-b border-gray-200\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-white border-gray-200\",\n        dark: \"bg-gray-900 border-gray-700 text-white\",\n        transparent: \"bg-transparent border-transparent\",\n      },\n      size: {\n        sm: \"px-4 py-2\",\n        md: \"px-6 py-3\",\n        lg: \"px-8 py-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n);\n\nexport interface NavbarProps\n  extends React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof navbarVariants> {\n  logo?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nconst Navbar = React.forwardRef<HTMLElement, NavbarProps>(\n  ({ className, variant, size, logo, children, ...props }, ref) => {\n    const [isOpen, setIsOpen] = React.useState(false);\n    const { currentBreakpoint, isAbove } = useBreakpoint();\n\n    // Close mobile menu if switching to desktop breakpoint\n    React.useEffect(() => {\n      if (isAbove(\"md\") && isOpen) {\n        setIsOpen(false);\n      }\n    }, [currentBreakpoint, isOpen, isAbove]);\n\n    return (\n      <nav\n        ref={ref}\n        className={cn(navbarVariants({ variant, size }), className)}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between w-full\">\n          {/* Logo */}\n          {logo && <div className=\"flex-shrink-0\">{logo}</div>}\n\n          {/* Desktop Navigation */}\n          <div className=\"hidden md:flex items-center space-x-4 ml-auto\">\n            {children}\n          </div>\n\n          {/* Mobile Menu Button */}\n          <button\n            className=\"md:hidden p-2 rounded-md hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500\"\n            aria-label={isOpen ? \"Close navigation menu\" : \"Open navigation menu\"}\n            aria-controls=\"mobile-navbar-menu\"\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n          >\n            {isOpen ? <X className=\"h-6 w-6 text-primary-600\" /> : <Menu className=\"h-6 w-6 text-primary-600\" />}\n          </button>\n        </div>\n\n        {/* Mobile Navigation */}\n        <div\n          id=\"mobile-navbar-menu\"\n          role=\"menu\"\n          aria-label=\"Mobile navigation\"\n          tabIndex={-1}\n          className={cn(\n            \"md:hidden fixed inset-x-0 top-full bg-white dark:bg-gray-900 border-b border-primary-100 dark:border-gray-700 shadow-lg z-50 overflow-y-auto max-h-[60vh] transition-all duration-300 ease-in-out\",\n            isOpen ? \"opacity-100 pointer-events-auto translate-y-0\" : \"opacity-0 pointer-events-none -translate-y-2\"\n          )}\n        >\n          <div className=\"px-4 py-2 space-y-2\">\n            {children}\n          </div>\n        </div>\n      </nav>\n    );\n  }\n);\nNavbar.displayName = \"Navbar\";\n\nconst NavItem = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, ...props }, ref) => (\n  <a\n    ref={ref}\n    className={cn(\n      \"text-primary-700 dark:text-primary-200 hover:bg-primary-50 dark:hover:bg-gray-800 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors\",\n      className\n    )}\n    {...props}\n  />\n));\nNavItem.displayName = \"NavItem\";\n\nexport { Navbar, NavItem, navbarVariants };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMA,MAAM,cAAc,GAAG,GAAG,CACxB,sFAAsF,EACtF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,0BAA0B;AACnC,YAAA,IAAI,EAAE,wCAAwC;AAC9C,YAAA,WAAW,EAAE,mCAAmC;AACjD,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AAUH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC9D,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;;AAGtD,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,QAAA,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,MAAM,EAAE;YAC3B,SAAS,CAAC,KAAK,CAAC;QAClB;IACF,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAExC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GACvD,KAAK,EAAA,QAAA,EAAA,CAETA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CAEtD,IAAI,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,IAAI,EAAA,CAAO,EAGpDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAC3D,QAAQ,EAAA,CACL,EAGNA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,qGAAqG,EAAA,YAAA,EACnG,MAAM,GAAG,uBAAuB,GAAG,sBAAsB,EAAA,eAAA,EACvD,oBAAoB,EAAA,eAAA,EACnB,MAAM,EACrB,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,EAAA,QAAA,EAEhC,MAAM,GAAGA,GAAA,CAAC,CAAC,EAAA,EAAC,SAAS,EAAC,0BAA0B,GAAG,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG,EAAA,CAC7F,CAAA,EAAA,CACL,EAGNA,aACE,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,MAAM,EAAA,YAAA,EACA,mBAAmB,EAC9B,QAAQ,EAAE,EAAE,EACZ,SAAS,EAAE,EAAE,CACX,mMAAmM,EACnM,MAAM,GAAG,+CAA+C,GAAG,8CAA8C,CAC1G,YAEDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,YACjC,QAAQ,EAAA,CACL,EAAA,CACF,CAAA,EAAA,CACF;AAEV,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ;AAE7B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAG9B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qKAAqK,EACrK,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/dist/components/Sidebar/Sidebar.js

@@ -5,6 +5,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
 import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
 import { Badge } from '../Badge/Badge.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 import { SidebarHeader } from './SidebarHeader.js';
 
 const sidebarVariants = cva("fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out", {
@@ -91,6 +92,7 @@ const defaultMenuItems = [
 ];
 const Sidebar = React.forwardRef(({ className, collapsed = false, onToggle, menuItems = defaultMenuItems, activeItem = "dashboard", onItemClick, title = "Beyond", titleLetter = "B", headerClassName, ...props }, ref) => {
     const [expandedItems, setExpandedItems] = React.useState([]);
+    const { isBelow } = useBreakpoint();
     const toggleExpanded = (itemId) => {
         setExpandedItems(prev => prev.includes(itemId)
             ? prev.filter(id => id !== itemId)
@@ -110,7 +112,13 @@ const Sidebar = React.forwardRef(({ className, collapsed = false, onToggle, menu
         const hasChildren = item.children && item.children.length > 0;
         return (jsxs("div", { children: [jsx("button", { onClick: () => handleItemClick(item), className: cn(menuItemVariants({ active: isActive, collapsed }), level > 0 && "ml-4 pl-8", "relative"), children: jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [jsx("div", { className: "flex-shrink-0", children: item.icon }), !collapsed && (jsxs(Fragment, { children: [jsx("span", { className: "ml-3 truncate", children: item.label }), item.badge && (jsx(Badge, { variant: "danger", className: "ml-auto text-xs", children: item.badge })), hasChildren && (jsx(ChevronDown, { className: cn("ml-auto h-4 w-4 transition-transform duration-200", isExpanded && "rotate-180") }))] }))] }) }), hasChildren && !collapsed && isExpanded && (jsx("div", { className: "mt-1 space-y-1", children: item.children?.map(child => renderMenuItem(child, level + 1)) }))] }, item.id));
     };
-    return (jsxs("div", { ref: ref, className: cn("flex flex-col h-screen", sidebarVariants({ collapsed }), className), ...props, children: [jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [!collapsed && (jsx(SidebarHeader, { title: title, letter: titleLetter, className: headerClassName })), jsx("button", { onClick: onToggle, className: "p-1.5 rounded-lg hover:bg-gray-100 transition-colors", children: collapsed ? (jsx(ChevronRight, { className: "h-4 w-4 text-gray-600" })) : (jsx(ChevronLeft, { className: "h-4 w-4 text-gray-600" })) })] }), jsx("nav", { className: "flex-1 px-4 py-6 space-y-2 overflow-y-auto", children: menuItems.map(item => renderMenuItem(item)) }), jsx("div", { className: "border-t border-gray-200 p-4", children: collapsed ? (jsx("div", { className: "flex justify-center", 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" })] }) })) : (jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center space-x-3", 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" })] }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500 truncate", children: "john@company.com" })] })] }), jsxs("div", { className: "flex space-x-2", children: [jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [jsx(User, { className: "h-3 w-3 mr-1" }), "Profile"] }), jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [jsx(LogOut, { className: "h-3 w-3 mr-1" }), "Logout"] })] })] })) })] }));
+    // Responsive: drawer on mobile, fixed on desktop
+    return (jsxs("div", { ref: ref, className: cn("flex flex-col h-screen transition-all duration-300", sidebarVariants({ collapsed }), className, isBelow("md")
+            ? [
+                "fixed z-50 top-0 left-0 h-full w-64 bg-white shadow-lg border-r border-gray-200",
+                collapsed && "hidden"
+            ]
+            : "relative"), "aria-label": "Sidebar", "aria-modal": isBelow("md") ? true : undefined, role: isBelow("md") ? "dialog" : "navigation", tabIndex: isBelow("md") ? -1 : undefined, ...props, children: [jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [!collapsed && (jsx(SidebarHeader, { title: title, letter: titleLetter, className: headerClassName })), jsx("button", { onClick: onToggle, className: "p-1.5 rounded-lg hover:bg-gray-100 transition-colors", children: collapsed ? (jsx(ChevronRight, { className: "h-4 w-4 text-gray-600" })) : (jsx(ChevronLeft, { className: "h-4 w-4 text-gray-600" })) })] }), jsx("nav", { className: "flex-1 px-4 py-6 space-y-2 overflow-y-auto", children: menuItems.map(item => renderMenuItem(item)) }), jsx("div", { className: "border-t border-gray-200 p-4", children: collapsed ? (jsx("div", { className: "flex justify-center", 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" })] }) })) : (jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center space-x-3", 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" })] }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500 truncate", children: "john@company.com" })] })] }), jsxs("div", { className: "flex space-x-2", children: [jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [jsx(User, { className: "h-3 w-3 mr-1" }), "Profile"] }), jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [jsx(LogOut, { className: "h-3 w-3 mr-1" }), "Logout"] })] })] })) })] }));
 });
 Sidebar.displayName = "Sidebar";
 

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { \n  ChevronLeft, \n  ChevronRight, \n  ChevronDown, \n  Home, \n  BarChart3, \n  Users, \n  Settings, \n  FileText, \n  Calendar, \n  Mail, \n  Bell,\n  LogOut,\n  User\n} from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\nconst sidebarVariants = cva(\n  \"fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out\",\n  {\n    variants: {\n      collapsed: {\n        false: \"w-72\",\n        true: \"w-16\",\n      },\n    },\n    defaultVariants: {\n      collapsed: false,\n    },\n  }\n);\n\nconst menuItemVariants = cva(\n  \"flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group\",\n  {\n    variants: {\n      active: {\n        true: \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\",\n        false: \"text-gray-700 hover:bg-gray-50 hover:text-gray-900\",\n      },\n      collapsed: {\n        true: \"justify-center px-2\",\n        false: \"justify-start\",\n      },\n    },\n    defaultVariants: {\n      active: false,\n      collapsed: false,\n    },\n  }\n);\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  href?: string;\n  badge?: string;\n  children?: MenuItem[];\n}\n\nimport { SidebarHeader } from \"./SidebarHeader\";\n\n/**\n * SidebarProps\n * - title: The main title text in the sidebar header (default: \"Beyond\").\n * - titleLetter: The single letter/initial in the colored box (default: \"B\").\n * - headerClassName: Optional className for SidebarHeader for further customization.\n *\n * These props allow consumers to fully customize the Sidebar header section.\n * If not provided, the default branding is preserved for backward compatibility.\n */\ninterface SidebarProps extends VariantProps<typeof sidebarVariants> {\n  className?: string;\n  onToggle?: () => void;\n  menuItems?: MenuItem[];\n  activeItem?: string;\n  onItemClick?: (itemId: string) => void;\n  /** Sidebar header title (default: \"Beyond\") */\n  title?: string;\n  /** Sidebar header letter (default: \"B\") */\n  titleLetter?: string;\n  /** Optional className for SidebarHeader */\n  headerClassName?: string;\n}\n\nconst defaultMenuItems: MenuItem[] = [\n  {\n    id: \"dashboard\",\n    label: \"Dashboard\",\n    icon: <Home className=\"h-5 w-5\" />,\n    href: \"/dashboard\",\n  },\n  {\n    id: \"analytics\",\n    label: \"Analytics\",\n    icon: <BarChart3 className=\"h-5 w-5\" />,\n    href: \"/analytics\",\n    badge: \"New\",\n  },\n  {\n    id: \"users\",\n    label: \"Users\",\n    icon: <Users className=\"h-5 w-5\" />,\n    children: [\n      { id: \"all-users\", label: \"All Users\", icon: <Users className=\"h-4 w-4\" /> },\n      { id: \"user-roles\", label: \"User Roles\", icon: <Settings className=\"h-4 w-4\" /> },\n    ],\n  },\n  {\n    id: \"reports\",\n    label: \"Reports\",\n    icon: <FileText className=\"h-5 w-5\" />,\n    href: \"/reports\",\n  },\n  {\n    id: \"calendar\",\n    label: \"Calendar\",\n    icon: <Calendar className=\"h-5 w-5\" />,\n    href: \"/calendar\",\n  },\n  {\n    id: \"messages\",\n    label: \"Messages\",\n    icon: <Mail className=\"h-5 w-5\" />,\n    href: \"/messages\",\n    badge: \"3\",\n  },\n  {\n    id: \"notifications\",\n    label: \"Notifications\",\n    icon: <Bell className=\"h-5 w-5\" />,\n    href: \"/notifications\",\n  },\n  {\n    id: \"settings\",\n    label: \"Settings\",\n    icon: <Settings className=\"h-5 w-5\" />,\n    href: \"/settings\",\n  },\n];\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\n  ({\n    className,\n    collapsed = false,\n    onToggle,\n    menuItems = defaultMenuItems,\n    activeItem = \"dashboard\",\n    onItemClick,\n    title = \"Beyond\",\n    titleLetter = \"B\",\n    headerClassName,\n    ...props\n  }, ref) => {\n    const [expandedItems, setExpandedItems] = React.useState<string[]>([]);\n\n    const toggleExpanded = (itemId: string) => {\n      setExpandedItems(prev => \n        prev.includes(itemId) \n          ? prev.filter(id => id !== itemId)\n          : [...prev, itemId]\n      );\n    };\n\n    const handleItemClick = (item: MenuItem) => {\n      if (item.children) {\n        toggleExpanded(item.id);\n      } else {\n        onItemClick?.(item.id);\n      }\n    };\n\n    const renderMenuItem = (item: MenuItem, level = 0) => {\n      const isActive = activeItem === item.id;\n      const isExpanded = expandedItems.includes(item.id);\n      const hasChildren = item.children && item.children.length > 0;\n\n      return (\n        <div key={item.id}>\n          <button\n            onClick={() => handleItemClick(item)}\n            className={cn(\n              menuItemVariants({ active: isActive, collapsed }),\n              level > 0 && \"ml-4 pl-8\",\n              \"relative\"\n            )}\n          >\n            <div className=\"flex items-center min-w-0 flex-1\">\n              <div className=\"flex-shrink-0\">\n                {item.icon}\n              </div>\n              {!collapsed && (\n                <>\n                  <span className=\"ml-3 truncate\">{item.label}</span>\n                  {item.badge && (\n                    <Badge variant=\"danger\" className=\"ml-auto text-xs\">\n                      {item.badge}\n                    </Badge>\n                  )}\n                  {hasChildren && (\n                    <ChevronDown \n                      className={cn(\n                        \"ml-auto h-4 w-4 transition-transform duration-200\",\n                        isExpanded && \"rotate-180\"\n                      )}\n                    />\n                  )}\n                </>\n              )}\n            </div>\n          </button>\n          \n          {hasChildren && !collapsed && isExpanded && (\n            <div className=\"mt-1 space-y-1\">\n              {item.children?.map(child => renderMenuItem(child, level + 1))}\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col h-screen\",\n          sidebarVariants({ collapsed }),\n          className\n        )}\n        {...props}\n      >\n        {/*\n          Sidebar Header\n          - Uses SidebarHeader for dynamic branding.\n          - Props: title, titleLetter, headerClassName.\n          - If not provided, defaults to \"Beyond\" and \"B\" for backward compatibility.\n        */}\n        <div className=\"flex items-center justify-between p-4 border-b border-gray-200\">\n          {!collapsed && (\n            <SidebarHeader\n              title={title}\n              letter={titleLetter}\n              className={headerClassName}\n            />\n          )}\n          <button\n            onClick={onToggle}\n            className=\"p-1.5 rounded-lg hover:bg-gray-100 transition-colors\"\n          >\n            {collapsed ? (\n              <ChevronRight className=\"h-4 w-4 text-gray-600\" />\n            ) : (\n              <ChevronLeft className=\"h-4 w-4 text-gray-600\" />\n            )}\n          </button>\n        </div>\n\n        {/* Navigation Menu */}\n        <nav className=\"flex-1 px-4 py-6 space-y-2 overflow-y-auto\">\n          {menuItems.map(item => renderMenuItem(item))}\n        </nav>\n\n        {/* User Profile Section */}\n        <div className=\"border-t border-gray-200 p-4\">\n          {collapsed ? (\n            <div className=\"flex justify-center\">\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            </div>\n          ) : (\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center space-x-3\">\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                <div className=\"flex-1 min-w-0\">\n                  <p className=\"text-sm font-medium text-gray-900 truncate\">\n                    John Doe\n                  </p>\n                  <p className=\"text-xs text-gray-500 truncate\">\n                    john@company.com\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex space-x-2\">\n                <button className=\"flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors\">\n                  <User className=\"h-3 w-3 mr-1\" />\n                  Profile\n                </button>\n                <button className=\"flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors\">\n                  <LogOut className=\"h-3 w-3 mr-1\" />\n                  Logout\n                </button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSidebar.displayName = \"Sidebar\";\n\nexport { Sidebar, sidebarVariants, type MenuItem };"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { \n  ChevronLeft, \n  ChevronRight, \n  ChevronDown, \n  Home, \n  BarChart3, \n  Users, \n  Settings, \n  FileText, \n  Calendar, \n  Mail, \n  Bell,\n  LogOut,\n  User\n} from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst sidebarVariants = cva(\n  \"fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out\",\n  {\n    variants: {\n      collapsed: {\n        false: \"w-72\",\n        true: \"w-16\",\n      },\n    },\n    defaultVariants: {\n      collapsed: false,\n    },\n  }\n);\n\nconst menuItemVariants = cva(\n  \"flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group\",\n  {\n    variants: {\n      active: {\n        true: \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\",\n        false: \"text-gray-700 hover:bg-gray-50 hover:text-gray-900\",\n      },\n      collapsed: {\n        true: \"justify-center px-2\",\n        false: \"justify-start\",\n      },\n    },\n    defaultVariants: {\n      active: false,\n      collapsed: false,\n    },\n  }\n);\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  href?: string;\n  badge?: string;\n  children?: MenuItem[];\n}\n\nimport { SidebarHeader } from \"./SidebarHeader\";\n\n/**\n * SidebarProps\n * - title: The main title text in the sidebar header (default: \"Beyond\").\n * - titleLetter: The single letter/initial in the colored box (default: \"B\").\n * - headerClassName: Optional className for SidebarHeader for further customization.\n *\n * These props allow consumers to fully customize the Sidebar header section.\n * If not provided, the default branding is preserved for backward compatibility.\n */\ninterface SidebarProps extends VariantProps<typeof sidebarVariants> {\n  className?: string;\n  onToggle?: () => void;\n  menuItems?: MenuItem[];\n  activeItem?: string;\n  onItemClick?: (itemId: string) => void;\n  /** Sidebar header title (default: \"Beyond\") */\n  title?: string;\n  /** Sidebar header letter (default: \"B\") */\n  titleLetter?: string;\n  /** Optional className for SidebarHeader */\n  headerClassName?: string;\n}\n\nconst defaultMenuItems: MenuItem[] = [\n  {\n    id: \"dashboard\",\n    label: \"Dashboard\",\n    icon: <Home className=\"h-5 w-5\" />,\n    href: \"/dashboard\",\n  },\n  {\n    id: \"analytics\",\n    label: \"Analytics\",\n    icon: <BarChart3 className=\"h-5 w-5\" />,\n    href: \"/analytics\",\n    badge: \"New\",\n  },\n  {\n    id: \"users\",\n    label: \"Users\",\n    icon: <Users className=\"h-5 w-5\" />,\n    children: [\n      { id: \"all-users\", label: \"All Users\", icon: <Users className=\"h-4 w-4\" /> },\n      { id: \"user-roles\", label: \"User Roles\", icon: <Settings className=\"h-4 w-4\" /> },\n    ],\n  },\n  {\n    id: \"reports\",\n    label: \"Reports\",\n    icon: <FileText className=\"h-5 w-5\" />,\n    href: \"/reports\",\n  },\n  {\n    id: \"calendar\",\n    label: \"Calendar\",\n    icon: <Calendar className=\"h-5 w-5\" />,\n    href: \"/calendar\",\n  },\n  {\n    id: \"messages\",\n    label: \"Messages\",\n    icon: <Mail className=\"h-5 w-5\" />,\n    href: \"/messages\",\n    badge: \"3\",\n  },\n  {\n    id: \"notifications\",\n    label: \"Notifications\",\n    icon: <Bell className=\"h-5 w-5\" />,\n    href: \"/notifications\",\n  },\n  {\n    id: \"settings\",\n    label: \"Settings\",\n    icon: <Settings className=\"h-5 w-5\" />,\n    href: \"/settings\",\n  },\n];\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\n  ({\n    className,\n    collapsed = false,\n    onToggle,\n    menuItems = defaultMenuItems,\n    activeItem = \"dashboard\",\n    onItemClick,\n    title = \"Beyond\",\n    titleLetter = \"B\",\n    headerClassName,\n    ...props\n  }, ref) => {\n    const [expandedItems, setExpandedItems] = React.useState<string[]>([]);\n    const { isBelow } = useBreakpoint();\n\n    const toggleExpanded = (itemId: string) => {\n      setExpandedItems(prev => \n        prev.includes(itemId) \n          ? prev.filter(id => id !== itemId)\n          : [...prev, itemId]\n      );\n    };\n\n    const handleItemClick = (item: MenuItem) => {\n      if (item.children) {\n        toggleExpanded(item.id);\n      } else {\n        onItemClick?.(item.id);\n      }\n    };\n\n    const renderMenuItem = (item: MenuItem, level = 0) => {\n      const isActive = activeItem === item.id;\n      const isExpanded = expandedItems.includes(item.id);\n      const hasChildren = item.children && item.children.length > 0;\n\n      return (\n        <div key={item.id}>\n          <button\n            onClick={() => handleItemClick(item)}\n            className={cn(\n              menuItemVariants({ active: isActive, collapsed }),\n              level > 0 && \"ml-4 pl-8\",\n              \"relative\"\n            )}\n          >\n            <div className=\"flex items-center min-w-0 flex-1\">\n              <div className=\"flex-shrink-0\">\n                {item.icon}\n              </div>\n              {!collapsed && (\n                <>\n                  <span className=\"ml-3 truncate\">{item.label}</span>\n                  {item.badge && (\n                    <Badge variant=\"danger\" className=\"ml-auto text-xs\">\n                      {item.badge}\n                    </Badge>\n                  )}\n                  {hasChildren && (\n                    <ChevronDown \n                      className={cn(\n                        \"ml-auto h-4 w-4 transition-transform duration-200\",\n                        isExpanded && \"rotate-180\"\n                      )}\n                    />\n                  )}\n                </>\n              )}\n            </div>\n          </button>\n          \n          {hasChildren && !collapsed && isExpanded && (\n            <div className=\"mt-1 space-y-1\">\n              {item.children?.map(child => renderMenuItem(child, level + 1))}\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    // Responsive: drawer on mobile, fixed on desktop\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col h-screen transition-all duration-300\",\n          sidebarVariants({ collapsed }),\n          className,\n          isBelow(\"md\")\n            ? [\n                \"fixed z-50 top-0 left-0 h-full w-64 bg-white shadow-lg border-r border-gray-200\",\n                collapsed && \"hidden\"\n              ]\n            : \"relative\"\n        )}\n        aria-label=\"Sidebar\"\n        aria-modal={isBelow(\"md\") ? true : undefined}\n        role={isBelow(\"md\") ? \"dialog\" : \"navigation\"}\n        tabIndex={isBelow(\"md\") ? -1 : undefined}\n        {...props}\n      >\n        {/*\n          Sidebar Header\n          - Uses SidebarHeader for dynamic branding.\n          - Props: title, titleLetter, headerClassName.\n          - If not provided, defaults to \"Beyond\" and \"B\" for backward compatibility.\n        */}\n        <div className=\"flex items-center justify-between p-4 border-b border-gray-200\">\n          {!collapsed && (\n            <SidebarHeader\n              title={title}\n              letter={titleLetter}\n              className={headerClassName}\n            />\n          )}\n          <button\n            onClick={onToggle}\n            className=\"p-1.5 rounded-lg hover:bg-gray-100 transition-colors\"\n          >\n            {collapsed ? (\n              <ChevronRight className=\"h-4 w-4 text-gray-600\" />\n            ) : (\n              <ChevronLeft className=\"h-4 w-4 text-gray-600\" />\n            )}\n          </button>\n        </div>\n\n        {/* Navigation Menu */}\n        <nav className=\"flex-1 px-4 py-6 space-y-2 overflow-y-auto\">\n          {menuItems.map(item => renderMenuItem(item))}\n        </nav>\n\n        {/* User Profile Section */}\n        <div className=\"border-t border-gray-200 p-4\">\n          {collapsed ? (\n            <div className=\"flex justify-center\">\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            </div>\n          ) : (\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center space-x-3\">\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                <div className=\"flex-1 min-w-0\">\n                  <p className=\"text-sm font-medium text-gray-900 truncate\">\n                    John Doe\n                  </p>\n                  <p className=\"text-xs text-gray-500 truncate\">\n                    john@company.com\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex space-x-2\">\n                <button className=\"flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors\">\n                  <User className=\"h-3 w-3 mr-1\" />\n                  Profile\n                </button>\n                <button className=\"flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors\">\n                  <LogOut className=\"h-3 w-3 mr-1\" />\n                  Logout\n                </button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSidebar.displayName = \"Sidebar\";\n\nexport { Sidebar, sidebarVariants, type MenuItem };"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/styles.css

@@ -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-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(.25rem*var(--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(.5rem*var(--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(.75rem*var(--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(1rem*var(--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.5rem*var(--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(2rem*var(--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(.25rem*var(--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(.375rem*var(--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(.5rem*var(--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(.75rem*var(--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(1rem*var(--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.5rem*var(--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(2rem*var(--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(.5rem*var(--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}
+*,: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}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.left-0{left:0}.left-3{left:.75rem}.left-\[50\%\]{left:50%}.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-0{margin-left:0}.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-\[60vh\]{max-height:60vh}.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-y-2{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-y-2{--tw-translate-y:-0.5rem}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-0{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-y-0{--tw-translate-y:0px}.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(.25rem*var(--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(.5rem*var(--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(.75rem*var(--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(1rem*var(--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.5rem*var(--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(2rem*var(--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(.25rem*var(--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(.375rem*var(--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(.5rem*var(--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(.75rem*var(--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(1rem*var(--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.5rem*var(--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(2rem*var(--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-100{--tw-border-opacity:1;border-color:rgb(219 234 254/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-2{padding-top:.5rem}.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-0{opacity:0}.opacity-100{opacity:1}.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-shadow{transition-property:box-shadow;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))}.last\:border-b-0:last-child{border-bottom-width:0}.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(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:.5rem}.sm\:p-4{padding:1rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.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\:p-6{padding:1.5rem}.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))}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\:text-primary-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.dark\:hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}}.\[\&_p\]\:leading-relaxed p{line-height:1.625}

package/package.json

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