@yuva-devlab/ui 1.1.0 → 1.2.0

package/dist/index.cjs

@@ -195,7 +195,7 @@ __export(index_exports, {
   PaginationLink: () => PaginationLink,
   PaginationNext: () => PaginationNext,
   PaginationPrevious: () => PaginationPrevious,
-  Panel: () => Panel2,
+  Panel: () => Panel,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverContent: () => PopoverContent,
@@ -255,6 +255,7 @@ __export(index_exports, {
   SidebarTrigger: () => SidebarTrigger,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
+  StatusBadge: () => StatusBadge,
   StatusChip: () => StatusChip,
   Switch: () => Switch,
   Table: () => Table,
@@ -279,12 +280,16 @@ __export(index_exports, {
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  alertVariants: () => alertVariants,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  labelVariants: () => labelVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
+  sheetVariants: () => sheetVariants,
   toast: () => import_sonner.toast,
   toggleVariants: () => toggleVariants,
+  useCarousel: () => useCarousel,
   useConfig: () => useConfig,
   useFormField: () => useFormField,
   useIsMobile: () => useIsMobile,
@@ -405,7 +410,7 @@ function useIsMobile() {
   return !!isMobile;
 }
 
-// src/components/accordion.tsx
+// src/components/accordion/accordion.tsx
 var React3 = __toESM(require("react"), 1);
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"), 1);
 var import_lucide_react = require("lucide-react");
@@ -415,23 +420,20 @@ var AccordionItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
   AccordionPrimitive.Item,
   {
     ref,
-    className: cn("border-b", className),
+    className: cn("dl-accordion-item", className),
     ...props
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+var AccordionTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccordionPrimitive.Header, { className: "dl-accordion-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
   AccordionPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex flex-1 items-center justify-between py-4 text-sm font-medium cursor-pointer transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-      className
-    ),
+    className: cn("dl-accordion-trigger", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDown, { className: "shrink-0 text-muted-foreground transition-transform duration-200 size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDown, { "aria-hidden": "true" })
     ]
   }
 ) }));
@@ -440,51 +442,79 @@ var AccordionContent = React3.forwardRef(({ className, children, ...props }, ref
   AccordionPrimitive.Content,
   {
     ref,
-    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    className: "dl-accordion-content",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("pb-4 pt-0", className), children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("dl-accordion-content__inner", className), children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-// src/components/alert-dialog.tsx
-var React5 = __toESM(require("react"), 1);
-var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
-
-// src/components/button.tsx
+// src/components/alert/alert.tsx
 var React4 = __toESM(require("react"), 1);
-var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+var alertVariants = (0, import_class_variance_authority.cva)("dl-alert", {
+  variants: {
+    variant: {
+      default: "dl-alert--default",
+      destructive: "dl-alert--destructive"
     }
+  },
+  defaultVariants: {
+    variant: "default"
   }
+});
+var Alert = React4.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  )
 );
-var Button = React4.forwardRef(
+Alert.displayName = "Alert";
+var AlertTitle = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h5", { ref, className: cn("dl-alert__title", className), ...props })
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("dl-alert__desc", className), ...props }));
+AlertDescription.displayName = "AlertDescription";
+
+// src/components/alert-dialog/alert-dialog.tsx
+var React6 = __toESM(require("react"), 1);
+var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
+
+// src/components/button/button.tsx
+var React5 = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)("dl-btn", {
+  variants: {
+    variant: {
+      default: "dl-btn--default",
+      destructive: "dl-btn--destructive",
+      outline: "dl-btn--outline",
+      secondary: "dl-btn--secondary",
+      ghost: "dl-btn--ghost",
+      link: "dl-btn--link"
+    },
+    size: {
+      default: "dl-btn--md",
+      sm: "dl-btn--sm",
+      lg: "dl-btn--lg",
+      icon: "dl-btn--icon"
+    }
+  },
+  defaultVariants: { variant: "default", size: "default" }
+});
+var Button = React5.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -496,33 +526,27 @@ var Button = React4.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/alert-dialog.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/components/alert-dialog/alert-dialog.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var AlertDialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   AlertDialogPrimitive.Overlay,
   {
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
+    className: cn("dl-alert-dialog-overlay", className),
     ...props,
     ref
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AlertDialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertDialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var AlertDialogContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(AlertDialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlertDialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     AlertDialogPrimitive.Content,
     {
       ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg translate-[-50%]",
-        className
-      ),
+      className: cn("dl-alert-dialog-content", className),
       ...props
     }
   )
@@ -531,50 +555,32 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("dl-alert-dialog-header", className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("dl-alert-dialog-footer", className), ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var AlertDialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   AlertDialogPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold", className),
+    className: cn("dl-alert-dialog-title", className),
     ...props
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var AlertDialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   AlertDialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("dl-alert-dialog-desc", className),
     ...props
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var AlertDialogAction = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -583,72 +589,21 @@ var AlertDialogAction = React5.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var AlertDialogCancel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   AlertDialogPrimitive.Cancel,
   {
     ref,
-    className: cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    ),
+    className: cn(buttonVariants({ variant: "outline" }), className),
     ...props
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
-// src/components/alert.tsx
-var React6 = __toESM(require("react"), 1);
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var alertVariants = (0, import_class_variance_authority2.cva)(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Alert = React6.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  "div",
-  {
-    ref,
-    role: "alert",
-    className: cn(alertVariants({ variant }), className),
-    ...props
-  }
-));
-Alert.displayName = "Alert";
-var AlertTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  "h5",
-  {
-    ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
-    ...props
-  }
-));
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
-    ...props
-  }
-));
-AlertDescription.displayName = "AlertDescription";
-
-// src/components/aspect-ratio.tsx
+// src/components/aspect-ratio/aspect-ratio.tsx
 var AspectRatioPrimitive = __toESM(require("@radix-ui/react-aspect-ratio"), 1);
 var AspectRatio = AspectRatioPrimitive.Root;
 
-// src/components/avatar.tsx
+// src/components/avatar/avatar.tsx
 var React7 = __toESM(require("react"), 1);
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -656,10 +611,7 @@ var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   AvatarPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative flex shrink-0 overflow-hidden rounded-full size-10",
-      className
-    ),
+    className: cn("dl-avatar", className),
     ...props
   }
 ));
@@ -668,7 +620,7 @@ var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   AvatarPrimitive.Image,
   {
     ref,
-    className: cn("aspect-square size-full", className),
+    className: cn("dl-avatar__img", className),
     ...props
   }
 ));
@@ -677,92 +629,77 @@ var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__P
   AvatarPrimitive.Fallback,
   {
     ref,
-    className: cn(
-      "flex items-center justify-center rounded-full bg-muted size-full",
-      className
-    ),
+    className: cn("dl-avatar__fallback", className),
     ...props
   }
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-// src/components/badge.tsx
+// src/components/badge/badge.tsx
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
+var badgeVariants = (0, import_class_variance_authority3.cva)("dl-badge", {
+  variants: {
+    variant: {
+      default: "dl-badge--default",
+      secondary: "dl-badge--secondary",
+      destructive: "dl-badge--destructive",
+      success: "dl-badge--success",
+      warning: "dl-badge--warning",
+      info: "dl-badge--info",
+      outline: "dl-badge--outline"
     }
-  }
-);
+  },
+  defaultVariants: { variant: "default" }
+});
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
-// src/components/breadcrumb.tsx
+// src/components/breadcrumb/breadcrumb.tsx
 var React8 = __toESM(require("react"), 1);
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Breadcrumb = React8.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React8.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { ref, "aria-label": "breadcrumb", ...props })
+);
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  "ol",
-  {
-    ref,
-    className: cn(
-      "flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5",
-      className
-    ),
-    ...props
-  }
-));
+var BreadcrumbList = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { ref, className: cn("dl-breadcrumb-list", className), ...props })
+);
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  "li",
-  {
-    ref,
-    className: cn("inline-flex items-center gap-1.5", className),
-    ...props
-  }
-));
+var BreadcrumbItem = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { ref, className: cn("dl-breadcrumb-item", className), ...props })
+);
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React8.forwardRef(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? import_react_slot2.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Comp,
+var BreadcrumbLink = React8.forwardRef(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot2.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn("dl-breadcrumb-link", className),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
     {
       ref,
-      className: cn(
-        "cursor-pointer transition-colors hover:text-foreground",
-        className
-      ),
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("dl-breadcrumb-page", className),
       ...props
     }
-  );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  "span",
-  {
-    ref,
-    role: "link",
-    "aria-disabled": "true",
-    "aria-current": "page",
-    className: cn("font-normal text-foreground", className),
-    ...props
-  }
-));
+  )
+);
 BreadcrumbPage.displayName = "BreadcrumbPage";
 var BreadcrumbSeparator = ({
   children,
@@ -773,7 +710,8 @@ var BreadcrumbSeparator = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: cn("[&>svg]:size-3.5", className),
+    "data-slot": "breadcrumb-separator",
+    className: cn("dl-breadcrumb-separator", className),
     ...props,
     children: children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ChevronRight, {})
   }
@@ -787,17 +725,17 @@ var BreadcrumbEllipsis = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: cn("flex items-center justify-center size-9", className),
+    className: cn("dl-breadcrumb-ellipsis", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.MoreHorizontal, { className: "size-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.MoreHorizontal, {}),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: "More" })
     ]
   }
 );
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
-// src/components/calendar.tsx
+// src/components/calendar/calendar.tsx
 var React9 = __toESM(require("react"), 1);
 var import_lucide_react3 = require("lucide-react");
 var import_react_day_picker = require("react-day-picker");
@@ -979,61 +917,33 @@ function CalendarDayButton({
   );
 }
 
-// src/components/card.tsx
+// src/components/card/card.tsx
 var React10 = __toESM(require("react"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Card = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "div",
-  {
-    ref,
-    className: cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    ),
-    ...props
-  }
-));
+var Card = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("dl-card", className), ...props })
+);
 Card.displayName = "Card";
-var CardHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
+var CardHeader = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("dl-card__header", className), ...props })
+);
 CardHeader.displayName = "CardHeader";
-var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
+var CardTitle = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { ref, className: cn("dl-card__title", className), ...props })
+);
 CardTitle.displayName = "CardTitle";
-var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
+var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { ref, className: cn("dl-card__desc", className), ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("dl-card__content", className), ...props })
+);
 CardContent.displayName = "CardContent";
-var CardFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
+var CardFooter = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("dl-card__footer", className), ...props })
+);
 CardFooter.displayName = "CardFooter";
 
-// src/components/carousel.tsx
+// src/components/carousel/carousel.tsx
 var React11 = __toESM(require("react"), 1);
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
 var import_lucide_react4 = require("lucide-react");
@@ -1057,27 +967,18 @@ var Carousel = React11.forwardRef(
     ...props
   }, ref) => {
     const [carouselRef, api] = (0, import_embla_carousel_react.default)(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y"
-      },
+      { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
       plugins
     );
     const [canScrollPrev, setCanScrollPrev] = React11.useState(false);
     const [canScrollNext, setCanScrollNext] = React11.useState(false);
-    const onSelect = React11.useCallback((api2) => {
-      if (!api2) {
-        return;
-      }
-      setCanScrollPrev(api2.canScrollPrev());
-      setCanScrollNext(api2.canScrollNext());
+    const onSelect = React11.useCallback((emblaApi) => {
+      if (!emblaApi) return;
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
     }, []);
-    const scrollPrev = React11.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
-    const scrollNext = React11.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
+    const scrollPrev = React11.useCallback(() => api?.scrollPrev(), [api]);
+    const scrollNext = React11.useCallback(() => api?.scrollNext(), [api]);
     const handleKeyDown = React11.useCallback(
       (event) => {
         if (event.key === "ArrowLeft") {
@@ -1091,15 +992,11 @@ var Carousel = React11.forwardRef(
       [scrollPrev, scrollNext]
     );
     React11.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
+      if (!api || !setApi) return;
       setApi(api);
     }, [api, setApi]);
     React11.useEffect(() => {
-      if (!api) {
-        return;
-      }
+      if (!api) return;
       onSelect(api);
       api.on("reInit", onSelect);
       api.on("select", onSelect);
@@ -1125,7 +1022,7 @@ var Carousel = React11.forwardRef(
           {
             ref,
             onKeyDownCapture: handleKeyDown,
-            className: cn("relative", className),
+            className: cn("dl-carousel", className),
             role: "region",
             "aria-roledescription": "carousel",
             ...props,
@@ -1137,39 +1034,43 @@ var Carousel = React11.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React11.forwardRef(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex",
-        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-        className
-      ),
-      ...props
-    }
-  ) });
-});
+var CarouselContent = React11.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: carouselRef, className: "dl-carousel-viewport", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "dl-carousel-track",
+          orientation === "horizontal" ? "dl-carousel-track--horizontal" : "dl-carousel-track--vertical",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React11.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "div",
-    {
-      ref,
-      role: "group",
-      "aria-roledescription": "slide",
-      className: cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      ),
-      ...props
-    }
-  );
-});
+var CarouselItem = React11.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-roledescription": "slide",
+        className: cn(
+          "dl-carousel-item",
+          orientation === "horizontal" ? "dl-carousel-item--horizontal" : "dl-carousel-item--vertical",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 CarouselItem.displayName = "CarouselItem";
 var CarouselPrevious = React11.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
@@ -1180,47 +1081,49 @@ var CarouselPrevious = React11.forwardRef(({ className, variant = "outline", siz
       variant,
       size,
       className: cn(
-        "absolute  rounded-full size-8",
-        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        "dl-carousel-btn",
+        orientation === "horizontal" ? "dl-carousel-btn--prev-horizontal" : "dl-carousel-btn--prev-vertical",
         className
       ),
       disabled: !canScrollPrev,
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ArrowLeft, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ArrowLeft, {}),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React11.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    Button,
-    {
-      ref,
-      variant,
-      size,
-      className: cn(
-        "absolute rounded-full size-8",
-        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ArrowRight, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
-});
-CarouselNext.displayName = "CarouselNext";
+var CarouselNext = React11.forwardRef(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "dl-carousel-btn",
+          orientation === "horizontal" ? "dl-carousel-btn--next-horizontal" : "dl-carousel-btn--next-vertical",
+          className
+        ),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ArrowRight, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Next slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
 
-// src/components/chart.tsx
+// src/components/chart/chart.tsx
 var React12 = __toESM(require("react"), 1);
 var RechartsPrimitive = __toESM(require("recharts"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -1233,26 +1136,25 @@ function useChart() {
   }
   return context;
 }
-var ChartContainer = React12.forwardRef(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React12.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      "data-chart": chartId,
-      ref,
-      className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-layer]:outline-none",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
-      ]
-    }
-  ) });
-});
+var ChartContainer = React12.forwardRef(
+  ({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React12.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        "data-chart": chartId,
+        ref,
+        className: cn("dl-chart-container", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartStyle, { id: chartId, config }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
+        ]
+      }
+    ) });
+  }
+);
 ChartContainer.displayName = "Chart";
 var ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(
@@ -1325,70 +1227,60 @@ var ChartTooltipContent = React12.forwardRef(
       return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      "div",
-      {
-        ref,
-        className: cn(
-          "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        ),
-        children: [
-          !nestLabel ? tooltipLabel : null,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "div",
-              {
-                className: cn(
-                  "flex flex-wrap items-stretch gap-2 [&>svg]:text-muted-foreground [&>svg]:size-2.5",
-                  indicator === "dot" && "items-center"
-                ),
-                children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                  itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className: cn("dl-chart-tooltip", className), children: [
+      !nestLabel ? tooltipLabel : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        const key = `${nameKey || item.name || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const indicatorColor = color || item.payload.fill || item.color;
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex flex-wrap items-stretch gap-2 [&>svg]:text-muted-foreground [&>svg]:size-2.5",
+              indicator === "dot" && "items-center"
+            ),
+            children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0 rounded-xs border-border bg-(--color-bg)",
                     {
-                      className: cn(
-                        "shrink-0 rounded-xs border-border bg-(--color-bg)",
-                        {
-                          "h-2.5 w-2.5": indicator === "dot",
-                          "w-1": indicator === "line",
-                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                          "my-0.5": nestLabel && indicator === "dashed"
-                        }
-                      ),
-                      style: {
-                        "--color-bg": indicatorColor,
-                        "--color-border": indicatorColor
-                      }
+                      "h-2.5 w-2.5": indicator === "dot",
+                      "w-1": indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                      "my-0.5": nestLabel && indicator === "dashed"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                    "div",
-                    {
-                      className: cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      ),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-1.5", children: [
-                          nestLabel ? tooltipLabel : null,
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
-                        ] }),
-                        item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
-                      ]
-                    }
-                  )
-                ] })
-              },
-              item.dataKey
-            );
-          }) })
-        ]
-      }
-    );
+                  style: {
+                    "--color-bg": indicatorColor,
+                    "--color-border": indicatorColor
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-1 justify-between leading-none",
+                    nestLabel ? "items-end" : "items-center"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-1.5", children: [
+                      nestLabel ? tooltipLabel : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                    ] }),
+                    item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
+                  ]
+                }
+              )
+            ] })
+          },
+          item.dataKey
+        );
+      }) })
+    ] });
   }
 );
 ChartTooltipContent.displayName = "ChartTooltip";
@@ -1404,7 +1296,7 @@ var ChartLegendContent = React12.forwardRef(
       {
         ref,
         className: cn(
-          "flex items-center justify-center gap-4",
+          "dl-chart-legend",
           verticalAlign === "top" ? "pb-3" : "pt-3",
           className
         ),
@@ -1452,7 +1344,7 @@ function getPayloadConfigFromPayload(config, payload, key) {
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
-// src/components/checkbox.tsx
+// src/components/checkbox/checkbox.tsx
 var React13 = __toESM(require("react"), 1);
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react5 = require("lucide-react");
@@ -1461,34 +1353,25 @@ var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   CheckboxPrimitive.Root,
   {
     ref,
-    className: cn(
-      "grid place-content-center peer shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground size-4",
-      className
-    ),
+    className: cn("dl-checkbox", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("grid place-content-center text-current"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Check, { className: "size-4" })
-      }
-    )
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckboxPrimitive.Indicator, { className: "grid place-content-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Check, { style: { width: "0.75rem", height: "0.75rem" } }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-// src/components/collapsible.tsx
+// src/components/collapsible/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"), 1);
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
-// src/components/command.tsx
+// src/components/command/command.tsx
 var React15 = __toESM(require("react"), 1);
 var import_cmdk = require("cmdk");
 var import_lucide_react7 = require("lucide-react");
 
-// src/components/dialog.tsx
+// src/components/dialog/dialog.tsx
 var React14 = __toESM(require("react"), 1);
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react6 = require("lucide-react");
@@ -1501,10 +1384,7 @@ var DialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__P
   DialogPrimitive.Overlay,
   {
     ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
+    className: cn("dl-dialog-overlay", className),
     ...props
   }
 ));
@@ -1515,16 +1395,25 @@ var DialogContent = React14.forwardRef(({ className, children, ...props }, ref)
     DialogPrimitive.Content,
     {
       ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg translate-[-50%]",
-        className
-      ),
+      className: cn("dl-dialog-content", className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "size-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Close, { className: "dl-dialog-close", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { style: { width: "1rem", height: "1rem" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                overflow: "hidden",
+                clip: "rect(0,0,0,0)"
+              },
+              children: "Close"
+            }
+          )
         ] })
       ]
     }
@@ -1534,39 +1423,18 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-dialog__header", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-dialog__footer", className), ...props });
 DialogFooter.displayName = "DialogFooter";
 var DialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   DialogPrimitive.Title,
   {
     ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
+    className: cn("dl-dialog__title", className),
     ...props
   }
 ));
@@ -1575,39 +1443,33 @@ var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("dl-dialog__desc", className),
     ...props
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-// src/components/command.tsx
+// src/components/command/command.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Command = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   import_cmdk.Command,
   {
     ref,
-    className: cn(
-      "flex flex-col overflow-hidden rounded-md bg-popover text-popover-foreground size-full",
-      className
-    ),
+    className: cn("dl-command", className),
     ...props
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Command, { className: "**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-item]]:py-3 [&_[cmdk-input-wrapper]_svg]:size-5", children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogContent, { className: "dl-command-dialog-content", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Command, { children }) }) });
 };
-var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Search, { className: "mr-2 shrink-0 opacity-50 size-4" }),
+var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "dl-command-input-wrapper", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Search, { className: "dl-command-input-icon" }),
   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_cmdk.Command.Input,
     {
       ref,
-      className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
+      className: cn("dl-command-input", className),
       ...props
     }
   )
@@ -1617,28 +1479,18 @@ var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   import_cmdk.Command.List,
   {
     ref,
-    className: cn("max-h-75 overflow-y-auto overflow-x-hidden", className),
+    className: cn("dl-command-list", className),
     ...props
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React15.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-  import_cmdk.Command.Empty,
-  {
-    ref,
-    className: "py-6 text-center text-sm",
-    ...props
-  }
-));
+var CommandEmpty = React15.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_cmdk.Command.Empty, { ref, className: "dl-command-empty", ...props }));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
 var CommandGroup = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
-    className: cn(
-      "overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
-      className
-    ),
+    className: cn("dl-command-group", className),
     ...props
   }
 ));
@@ -1647,7 +1499,7 @@ var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @
   import_cmdk.Command.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    className: cn("dl-command-separator", className),
     ...props
   }
 ));
@@ -1656,146 +1508,142 @@ var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   import_cmdk.Command.Item,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("dl-command-item", className),
     ...props
   }
 ));
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
-var CommandShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("dl-command-shortcut", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
-// src/components/context-menu.tsx
+// src/components/confirm-dialog/confirm-dialog.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  destructive = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogCancel, { children: cancelText }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        AlertDialogAction,
+        {
+          onClick: onConfirm,
+          className: destructive ? "dl-btn--destructive" : "",
+          children: confirmText
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/context-menu/context-menu.tsx
 var React16 = __toESM(require("react"), 1);
 var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React16.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+var ContextMenuSubTrigger = React16.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground",
+      "dl-menu-item dl-menu-sub-trigger",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronRight, { className: "ml-auto size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   ContextMenuPrimitive.SubContent,
   {
     ref,
-    className: cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-menu-content", className),
     ...props
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   ContextMenuPrimitive.Content,
   {
     ref,
-    className: cn(
-      "z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-context-menu-content", className),
     ...props
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ContextMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   ContextMenuPrimitive.Item,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("dl-menu-item", inset && "pl-8", className),
     ...props
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+var ContextMenuCheckboxItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-menu-item dl-menu-checkbox-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "absolute left-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Check, { className: "size-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Check, { className: "size-4" }) }) }),
       children
     ]
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+var ContextMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "absolute left-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Circle, { className: "fill-current size-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Circle, { className: "fill-current size-2" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ContextMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   ContextMenuPrimitive.Label,
   {
     ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("dl-menu-label", inset && "pl-8", className),
     ...props
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ContextMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("dl-menu-separator", className),
     ...props
   }
 ));
@@ -1804,27 +1652,93 @@ var ContextMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
-// src/components/drawer.tsx
+// src/components/date-picker/date-picker.tsx
+var React18 = __toESM(require("react"), 1);
+var import_date_fns = require("date-fns");
+var import_lucide_react9 = require("lucide-react");
+
+// src/components/popover/popover.tsx
 var React17 = __toESM(require("react"), 1);
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React17.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn("dl-popover", className),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/date-picker/date-picker.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  className,
+  disabled
+}) {
+  const date = React18.useMemo(() => {
+    if (!value) return void 0;
+    const parts = value.split("-");
+    if (parts.length !== 3) {
+      const d = new Date(value);
+      return isNaN(d.getTime()) ? void 0 : d;
+    }
+    const year = parseInt(parts[0], 10);
+    const month = parseInt(parts[1], 10) - 1;
+    const day = parseInt(parts[2], 10);
+    return new Date(year, month, day, 12, 0, 0);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      Button,
+      {
+        variant: "outline",
+        type: "button",
+        disabled,
+        className: cn(
+          "dl-date-picker-trigger",
+          !value && "dl-date-picker-trigger--placeholder",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Calendar, { className: "dl-date-picker-icon" }),
+          date && !isNaN(date.getTime()) ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverContent, { className: "dl-date-picker-content", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Calendar,
+      {
+        mode: "single",
+        selected: date,
+        onSelect: (selectedDate) => onChange?.(selectedDate ? (0, import_date_fns.format)(selectedDate, "yyyy-MM-dd") : ""),
+        initialFocus: true
+      }
+    ) })
+  ] });
+}
+
+// src/components/drawer/drawer.tsx
+var React19 = __toESM(require("react"), 1);
 var import_vaul = require("vaul");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Drawer = ({
   shouldScaleBackground = true,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   import_vaul.Drawer.Root,
   {
     shouldScaleBackground,
@@ -1835,28 +1749,25 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = import_vaul.Drawer.Trigger;
 var DrawerPortal = import_vaul.Drawer.Portal;
 var DrawerClose = import_vaul.Drawer.Close;
-var DrawerOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DrawerOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   import_vaul.Drawer.Overlay,
   {
     ref,
-    className: cn("fixed inset-0 z-50 bg-black/80", className),
+    className: cn("dl-drawer-overlay", className),
     ...props
   }
 ));
 DrawerOverlay.displayName = import_vaul.Drawer.Overlay.displayName;
-var DrawerContent = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DrawerPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DrawerOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+var DrawerContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DrawerPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DrawerOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     import_vaul.Drawer.Content,
     {
       ref,
-      className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      ),
+      className: cn("dl-drawer-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mx-auto mt-4 h-2 w-25 rounded-full bg-muted" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "dl-drawer-handle" }),
         children
       ]
     }
@@ -1866,164 +1777,138 @@ DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-  "div",
-  {
-    className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("dl-drawer-header", className), ...props });
 DrawerHeader.displayName = "DrawerHeader";
 var DrawerFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-  "div",
-  {
-    className: cn("mt-auto flex flex-col gap-2 p-4", className),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("dl-drawer-footer", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DrawerTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   import_vaul.Drawer.Title,
   {
     ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
+    className: cn("dl-drawer-title", className),
     ...props
   }
 ));
 DrawerTitle.displayName = import_vaul.Drawer.Title.displayName;
-var DrawerDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DrawerDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   import_vaul.Drawer.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("dl-drawer-desc", className),
     ...props
   }
 ));
 DrawerDescription.displayName = import_vaul.Drawer.Description.displayName;
 
-// src/components/dropdown-menu.tsx
-var React18 = __toESM(require("react"), 1);
+// src/components/dropdown-menu/dropdown-menu.tsx
+var React20 = __toESM(require("react"), 1);
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React18.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+var DropdownMenuSubTrigger = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
     className: cn(
-      "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "dl-menu-item dl-menu-sub-trigger",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.ChevronRight, { className: "ml-auto" })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_lucide_react10.ChevronRight,
+        {
+          style: { marginLeft: "auto", width: "1rem", height: "1rem" }
+        }
+      )
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
-    className: cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-menu-content", className),
     ...props
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React18.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
     sideOffset,
-    className: cn(
-      "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-menu-content", className),
     ...props
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React18.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DropdownMenuItem = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
-    className: cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("dl-menu-item", inset && "pl-8", className),
     ...props
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+var DropdownMenuCheckboxItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
-    className: cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-menu-item dl-menu-checkbox-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "absolute left-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.Check, { className: "size-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.Check, { style: { width: "1rem", height: "1rem" } }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
-    className: cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "absolute left-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.Circle, { className: "fill-current size-2" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_lucide_react10.Circle,
+        {
+          style: { width: "0.5rem", height: "0.5rem", fill: "currentColor" }
+        }
+      ) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React18.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DropdownMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("dl-menu-label", inset && "pl-8", className),
     ...props
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DropdownMenuSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("dl-menu-separator", className),
     ...props
   }
 ));
@@ -2032,30 +1917,22 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "span",
-    {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-// src/components/form.tsx
-var React20 = __toESM(require("react"), 1);
+// src/components/form/form.tsx
+var React22 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_react_hook_form = require("react-hook-form");
 
-// src/components/label.tsx
-var React19 = __toESM(require("react"), 1);
+// src/components/label/label.tsx
+var React21 = __toESM(require("react"), 1);
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
 var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var labelVariants = (0, import_class_variance_authority4.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label3 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority4.cva)("dl-label");
+var Label3 = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -2065,20 +1942,20 @@ var Label3 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 Label3.displayName = LabelPrimitive.Root.displayName;
 
-// src/components/form.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+// src/components/form/form.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Form = import_react_hook_form.FormProvider;
-var FormFieldContext = React20.createContext(
+var FormFieldContext = React22.createContext(
   null
 );
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_hook_form.Controller, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_hook_form.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React20.useContext(FormFieldContext);
-  const itemContext = React20.useContext(FormItemContext);
+  const fieldContext = React22.useContext(FormFieldContext);
+  const itemContext = React22.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -2097,28 +1974,28 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React20.createContext(null);
-var FormItem = React20.forwardRef(({ className, ...props }, ref) => {
-  const id = React20.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+var FormItemContext = React22.createContext(null);
+var FormItem = React22.forwardRef(({ className, ...props }, ref) => {
+  const id = React22.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: cn("dl-form-item", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React20.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React22.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Label3,
     {
       ref,
-      className: cn(error && "text-destructive", className),
+      className: cn(error && "dl-form-label--error", className),
       htmlFor: formItemId,
       ...props
     }
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React20.forwardRef(({ ...props }, ref) => {
+var FormControl = React22.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_react_slot3.Slot,
     {
       ref,
@@ -2130,31 +2007,31 @@ var FormControl = React20.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React20.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React22.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "p",
     {
       ref,
       id: formDescriptionId,
-      className: cn("text-[0.8rem] text-muted-foreground", className),
+      className: cn("dl-form-desc", className),
       ...props
     }
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React20.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React22.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? "") : children;
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "p",
     {
       ref,
       id: formMessageId,
-      className: cn("text-[0.8rem] font-medium text-destructive", className),
+      className: cn("dl-form-error", className),
       ...props,
       children: body
     }
@@ -2162,408 +2039,387 @@ var FormMessage = React20.forwardRef(({ className, children, ...props }, ref) =>
 });
 FormMessage.displayName = "FormMessage";
 
-// src/components/hover-card.tsx
-var React21 = __toESM(require("react"), 1);
+// src/components/hover-card/hover-card.tsx
+var React23 = __toESM(require("react"), 1);
 var HoverCardPrimitive = __toESM(require("@radix-ui/react-hover-card"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React21.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var HoverCardContent = React23.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   HoverCardPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
-    className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-hover-card", className),
     ...props
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-// src/components/input-otp.tsx
-var React22 = __toESM(require("react"), 1);
+// src/components/input/input.tsx
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Input = React24.forwardRef(
+  ({ className, type, startIcon, endIcon, ...props }, ref) => {
+    const inputEl = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "dl-input",
+          startIcon && "dl-input--has-start-icon",
+          endIcon && "dl-input--has-end-icon",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+    if (!startIcon && !endIcon) {
+      return inputEl;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dl-input-wrapper", children: [
+      startIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "dl-input-icon dl-input-icon--start", children: startIcon }),
+      inputEl,
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "dl-input-icon dl-input-icon--end", children: endIcon })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/input-otp/input-otp.tsx
+var React25 = __toESM(require("react"), 1);
 var import_input_otp = require("input-otp");
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var InputOTP = React22.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var InputOTP = React25.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   import_input_otp.OTPInput,
   {
     ref,
-    containerClassName: cn(
-      "flex items-center gap-2 has-disabled:opacity-50",
-      containerClassName
-    ),
-    className: cn("disabled:cursor-not-allowed", className),
+    containerClassName: cn("dl-input-otp-container", containerClassName),
+    className: cn("dl-input-otp", className),
     ...props
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: cn("dl-input-otp-group", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React22.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React22.useContext(import_input_otp.OTPInputContext);
+var InputOTPSlot = React25.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React25.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {
     char: null,
     hasFakeCaret: false,
     isActive: false
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref,
       className: cn(
-        "relative flex items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md size-9",
-        isActive && "z-10 ring-1 ring-ring",
+        "dl-input-otp-slot",
+        isActive && "dl-input-otp-slot--active",
         className
       ),
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dl-input-otp-caret", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dl-input-otp-caret__line" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React22.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Minus, {}) }));
+var InputOTPSeparator = React25.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.Minus, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
-// src/components/input.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Input = React23.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
+// src/components/skeleton/skeleton.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("dl-skeleton", className), ...props });
+}
 
-// src/components/menubar.tsx
-var React24 = __toESM(require("react"), 1);
-var MenubarPrimitive = __toESM(require("@radix-ui/react-menubar"), 1);
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function MenubarMenu({
+// src/components/loading-state/loading-state.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function LoadingState({
+  rows = 3,
+  message,
+  className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.Menu, { ...props });
+  if (message) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("dl-loading", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: message })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("dl-loading-skeleton", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Skeleton, { style: { height: "2rem", width: "33.333%" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "dl-loading-skeleton__list", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Skeleton,
+      {
+        style: {
+          height: "4rem",
+          width: "100%",
+          borderRadius: "var(--radius-lg, 0.75rem)"
+        }
+      },
+      i
+    )) })
+  ] });
 }
-function MenubarGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.Group, { ...props });
+
+// src/components/menubar/menubar.tsx
+var React26 = __toESM(require("react"), 1);
+var MenubarPrimitive = __toESM(require("@radix-ui/react-menubar"), 1);
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function MenubarMenu(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Menu, { ...props });
 }
-function MenubarPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.Portal, { ...props });
+function MenubarGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Group, { ...props });
 }
-function MenubarRadioGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.RadioGroup, { ...props });
+function MenubarPortal(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Portal, { ...props });
 }
-function MenubarSub({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
+function MenubarRadioGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.RadioGroup, { ...props });
+}
+function MenubarSub(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
 }
-var Menubar = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var Menubar = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   MenubarPrimitive.Root,
   {
     ref,
-    className: cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className
-    ),
+    className: cn("dl-menubar", className),
     ...props
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var MenubarTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   MenubarPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    ),
+    className: cn("dl-menubar-trigger", className),
     ...props
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React24.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var MenubarSubTrigger = React26.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   MenubarPrimitive.SubTrigger,
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "dl-menu-item dl-menu-sub-trigger",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.ChevronRight, { className: "ml-auto size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var MenubarSubContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   MenubarPrimitive.SubContent,
   {
     ref,
-    className: cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-menu-content", className),
     ...props
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React24.forwardRef(
-  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var MenubarContent = React26.forwardRef(
+  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     MenubarPrimitive.Content,
     {
       ref,
       align,
       alignOffset,
       sideOffset,
-      className: cn(
-        "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin)",
-        className
-      ),
+      className: cn("dl-menu-content", className),
       ...props
     }
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React24.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var MenubarItem = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   MenubarPrimitive.Item,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("dl-menu-item", inset && "pl-8", className),
     ...props
   }
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React24.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var MenubarCheckboxItem = React26.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   MenubarPrimitive.CheckboxItem,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-menu-item dl-menu-checkbox-item", className),
+    checked,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute left-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { className: "size-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Check, { className: "size-4" }) }) }),
       children
     ]
   }
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React24.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var MenubarRadioItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   MenubarPrimitive.RadioItem,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute left-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Circle, { className: "fill-current size-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Circle, { className: "fill-current size-2" }) }) }),
       children
     ]
   }
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React24.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var MenubarLabel = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   MenubarPrimitive.Label,
   {
     ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("dl-menu-label", inset && "pl-8", className),
     ...props
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var MenubarSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   MenubarPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("dl-menu-separator", className),
     ...props
   }
 ));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-var MenubarShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
+var MenubarShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
-MenubarShortcut.displayname = "MenubarShortcut";
+MenubarShortcut.displayName = "MenubarShortcut";
 
-// src/components/navigation-menu.tsx
-var React25 = __toESM(require("react"), 1);
+// src/components/navigation-menu/navigation-menu.tsx
+var React27 = __toESM(require("react"), 1);
 var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"), 1);
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var NavigationMenu = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var NavigationMenu = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
   NavigationMenuPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    ),
+    className: cn("dl-navigation-menu", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NavigationMenuViewport, {})
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(NavigationMenuViewport, {})
     ]
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var NavigationMenuList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   NavigationMenuPrimitive.List,
   {
     ref,
-    className: cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    ),
+    className: cn("dl-navigation-menu-list", className),
     ...props
   }
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
-var navigationMenuTriggerStyle = (0, import_class_variance_authority5.cva)(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
-);
-var NavigationMenuTrigger = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+var navigationMenuTriggerStyle = (0, import_class_variance_authority5.cva)("dl-navigation-menu-trigger");
+var NavigationMenuTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
-    className: cn(navigationMenuTriggerStyle(), "group", className),
+    className: cn(navigationMenuTriggerStyle(), className),
     ...props,
     children: [
       children,
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        import_lucide_react12.ChevronDown,
-        {
-          className: "relative top-px ml-1 transition duration-300 group-data-[state=open]:rotate-180 size-3",
-          "aria-hidden": "true"
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronDown, { className: "dl-navigation-menu-chevron", "aria-hidden": "true" })
     ]
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var NavigationMenuContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   NavigationMenuPrimitive.Content,
   {
     ref,
-    className: cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    ),
+    className: cn("dl-navigation-menu-content", className),
     ...props
   }
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var NavigationMenuViewport = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "dl-navigation-menu-viewport-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   NavigationMenuPrimitive.Viewport,
   {
-    className: cn(
-      "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
-      className
-    ),
+    className: cn("dl-navigation-menu-viewport", className),
     ref,
     ...props
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var NavigationMenuIndicator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
-    className: cn(
-      "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    ),
+    className: cn("dl-navigation-menu-indicator", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative top-[60%] rotate-45 rounded-tl-sm bg-border shadow-md size-2" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "dl-navigation-menu-indicator__arrow" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
-// src/components/pagination.tsx
-var React26 = __toESM(require("react"), 1);
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+// src/components/pagination/pagination.tsx
+var React28 = __toESM(require("react"), 1);
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "nav",
   {
     role: "navigation",
     "aria-label": "pagination",
-    className: cn("mx-auto flex w-full justify-center", className),
+    className: cn("dl-pagination", className),
     ...props
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-  "ul",
-  {
-    ref,
-    className: cn("flex flex-row items-center gap-1", className),
-    ...props
-  }
-));
+var PaginationContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { ref, className: cn("dl-pagination-content", className), ...props }));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { ref, className: cn("", className), ...props }));
+var PaginationItem = React28.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { ref, className: cn("dl-pagination-item", className), ...props })
+);
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
   isActive,
   size = "icon",
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "a",
   {
     "aria-current": isActive ? "page" : void 0,
@@ -2581,33 +2437,30 @@ PaginationLink.displayName = "PaginationLink";
 var PaginationPrevious = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
   PaginationLink,
   {
     "aria-label": "Go to previous page",
     size: "default",
-    className: cn("gap-1 pl-2.5", className),
+    className: cn("dl-pagination-prev", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronLeft, { className: "size-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Previous" })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.ChevronLeft, { className: "size-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Previous" })
     ]
   }
 );
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
   PaginationLink,
   {
     "aria-label": "Go to next page",
     size: "default",
-    className: cn("gap-1 pr-2.5", className),
+    className: cn("dl-pagination-next", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Next" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronRight, { className: "size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Next" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.ChevronRight, { className: "size-4" })
     ]
   }
 );
@@ -2615,59 +2468,50 @@ PaginationNext.displayName = "PaginationNext";
 var PaginationEllipsis = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex items-center justify-center size-9", className),
+    className: cn("dl-pagination-ellipsis", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.MoreHorizontal, { className: "size-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "More pages" })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.MoreHorizontal, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sr-only", children: "More pages" })
     ]
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
-// src/components/popover.tsx
-var React27 = __toESM(require("react"), 1);
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)",
-      className
-    ),
-    ...props
+// src/components/panel/panel.tsx
+var React29 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Panel = React29.forwardRef(
+  ({ title, meta, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { ref, className: cn("dl-panel", className), ...props, children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "dl-panel__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "dl-panel__title", children: title }),
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "dl-panel__meta", children: meta }) : null
+      ] }) : null,
+      children
+    ] });
   }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+);
+Panel.displayName = "Panel";
 
-// src/components/progress.tsx
-var React28 = __toESM(require("react"), 1);
+// src/components/progress/progress.tsx
+var React30 = __toESM(require("react"), 1);
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Progress = React28.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Progress = React30.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   ProgressPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-      className
-    ),
+    className: cn("dl-progress", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       ProgressPrimitive.Indicator,
       {
-        className: "flex-1 bg-primary transition-all size-full",
+        className: "dl-progress__indicator",
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )
@@ -2675,292 +2519,440 @@ var Progress = React28.forwardRef(({ className, value, ...props }, ref) => /* @_
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
-// src/components/radio-group.tsx
-var React29 = __toESM(require("react"), 1);
+// src/components/radio-group/radio-group.tsx
+var React31 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var RadioGroup4 = React29.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var RadioGroup4 = React31.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     RadioGroupPrimitive.Root,
     {
-      className: cn("grid gap-2", className),
+      className: cn("dl-radio-group", className),
       ...props,
       ref
     }
   );
 });
 RadioGroup4.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React29.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var RadioGroupItem = React31.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     RadioGroupPrimitive.Item,
     {
       ref,
-      className: cn(
-        "aspect-square rounded-full border border-primary text-primary shadow cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 size-4",
-        className
-      ),
+      className: cn("dl-radio-item", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Circle, { className: "fill-primary size-3.5" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadioGroupPrimitive.Indicator, { className: "dl-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.Circle, { "aria-hidden": "true" }) })
     }
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-// src/components/resizable.tsx
-var import_lucide_react15 = require("lucide-react");
+// src/components/resizable/resizable.tsx
+var import_lucide_react16 = require("lucide-react");
 var import_react_resizable_panels = require("react-resizable-panels");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var ResizablePanelGroup = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_react_resizable_panels.Group,
-  {
-    className: cn(
-      "flex data-[panel-group-direction=vertical]:flex-col size-full",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_resizable_panels.Group, { className: cn("dl-resizable-group", className), ...props });
 var ResizablePanel = import_react_resizable_panels.Panel;
 var ResizableHandle = ({
   withHandle,
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_react_resizable_panels.Separator,
-  {
-    className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    ),
-    ...props,
-    children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.GripVertical, { className: "size-2.5" }) })
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_resizable_panels.Separator, { className: cn("dl-resizable-handle", className), ...props, children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "dl-resizable-grip", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react16.GripVertical, {}) }) });
 
-// src/components/scroll-area.tsx
-var React30 = __toESM(require("react"), 1);
+// src/components/scroll-area/scroll-area.tsx
+var React32 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ScrollArea = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ScrollArea = React32.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
   ScrollAreaPrimitive.Root,
   {
     ref,
-    className: cn("relative overflow-hidden", className),
+    className: cn("dl-scroll-area", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollAreaPrimitive.Viewport, { className: "rounded-[inherit] size-full", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScrollAreaPrimitive.Viewport, { className: "dl-scroll-area__viewport", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React30.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var ScrollBar = React32.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation,
-    className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
-      className
-    ),
+    className: cn("dl-scroll-area__bar", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dl-scroll-area__thumb" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-// src/components/select.tsx
-var React31 = __toESM(require("react"), 1);
+// src/components/searchable-select/searchable-select.tsx
+var React33 = __toESM(require("react"), 1);
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function SearchableSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  onAddNew,
+  addNewLabel = "Add new",
+  disabled = false,
+  className,
+  id
+}) {
+  const [open, setOpen] = React33.useState(false);
+  const [search, setSearch] = React33.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React33.useState(0);
+  const listRef = React33.useRef(null);
+  const selectedOption = React33.useMemo(() => {
+    return options.find((opt) => opt.value === value);
+  }, [options, value]);
+  const filteredOptions = React33.useMemo(() => {
+    if (!search.trim()) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (opt) => opt.label.toLowerCase().includes(q) || opt.group && opt.group.toLowerCase().includes(q)
+    );
+  }, [options, search]);
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    if (newOpen) {
+      const idx = filteredOptions.findIndex((opt) => opt.value === value);
+      setHighlightedIndex(idx >= 0 ? idx : 0);
+    } else {
+      setSearch("");
+    }
+  };
+  const handleSearchChange = (q) => {
+    setSearch(q);
+    setHighlightedIndex(0);
+  };
+  React33.useEffect(() => {
+    if (open && listRef.current) {
+      const activeEl = listRef.current.querySelector(
+        "[data-highlighted='true']"
+      );
+      if (activeEl) {
+        activeEl.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [highlightedIndex, open]);
+  const groupedOptions = React33.useMemo(() => {
+    const hasGroups = filteredOptions.some((opt) => opt.group);
+    if (!hasGroups) return { Default: filteredOptions };
+    return filteredOptions.reduce(
+      (acc, opt) => {
+        const g = opt.group || "Other";
+        if (!acc[g]) acc[g] = [];
+        acc[g].push(opt);
+        return acc;
+      },
+      {}
+    );
+  }, [filteredOptions]);
+  const handleSelect = (val) => {
+    onChange?.(val);
+    setOpen(false);
+    setSearch("");
+  };
+  const handleAddNew = () => {
+    onAddNew?.(search.trim());
+    setOpen(false);
+    setSearch("");
+  };
+  const handleKeyDown = (e) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleOpenChange(true);
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightedIndex(
+          (p) => p < filteredOptions.length - 1 ? p + 1 : p
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((p) => p > 0 ? p - 1 : 0);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (filteredOptions.length > 0 && filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex].value);
+        } else if (onAddNew && search.trim()) {
+          handleAddNew();
+        }
+        break;
+      case "Escape":
+      case "Tab":
+        e.preventDefault();
+        handleOpenChange(false);
+        break;
+    }
+  };
+  let currentIndex = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      Button,
+      {
+        id,
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        disabled,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "dl-searchable-select-trigger",
+          !selectedOption && "dl-searchable-select-trigger--placeholder",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react17.ChevronDown, { className: "dl-select-icon" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      PopoverContent,
+      {
+        align: "start",
+        className: "dl-searchable-select-content",
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "dl-searchable-select-search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react17.Search, { className: "dl-searchable-select-search-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              Input,
+              {
+                placeholder: searchPlaceholder,
+                value: search,
+                onChange: (e) => handleSearchChange(e.target.value),
+                className: "dl-searchable-select-search-input",
+                autoFocus: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "div",
+            {
+              ref: listRef,
+              onWheel: (e) => e.stopPropagation(),
+              className: "dl-searchable-select-list",
+              children: Object.keys(groupedOptions).length === 0 || filteredOptions.length === 0 && !onAddNew ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "dl-searchable-select-empty", children: "No matching options found." }) : Object.entries(groupedOptions).map(([groupName, groupOpts]) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "py-1", children: [
+                groupName !== "Default" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "dl-searchable-select-group-header", children: groupName }),
+                groupOpts.map((option) => {
+                  const isSelected = option.value === value;
+                  const itemIndex = currentIndex++;
+                  const isHighlighted = itemIndex === highlightedIndex;
+                  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                    "div",
+                    {
+                      "data-highlighted": isHighlighted,
+                      onClick: () => handleSelect(option.value),
+                      onMouseEnter: () => setHighlightedIndex(itemIndex),
+                      className: cn(
+                        "dl-searchable-select-item",
+                        isHighlighted && "dl-searchable-select-item--highlighted",
+                        isSelected && !isHighlighted && "dl-searchable-select-item--selected"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 truncate", children: option.label }),
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react17.Check, { className: "dl-select-check" })
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              ] }, groupName))
+            }
+          ),
+          onAddNew && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "dl-searchable-select-add", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: handleAddNew,
+              className: "dl-searchable-select-add-btn",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react17.Plus, { className: "size-3.5 shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "truncate", children: search.trim() ? `${addNewLabel} "${search.trim()}"` : addNewLabel })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/select/select.tsx
+var React34 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React31.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-placeholder:text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    ),
+    className: cn("dl-select-trigger", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronDown, { className: "opacity-50 size-4" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        import_lucide_react18.ChevronDown,
+        {
+          style: { opacity: 0.5, width: "0.75rem", height: "0.75rem" }
+        }
+      ) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectScrollUpButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
+    className: cn("dl-select-scroll-btn", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronUp, { className: "size-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.ChevronUp, { style: { width: "1rem", height: "1rem" } })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectScrollDownButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
+    className: cn("dl-select-scroll-btn", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronDown, { className: "size-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.ChevronDown, { style: { width: "1rem", height: "1rem" } })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React31.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var SelectContent = React34.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   SelectPrimitive.Content,
   {
     ref,
-    className: cn(
-      "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1",
-      className
-    ),
+    className: cn("dl-select-content", className),
     position,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectScrollUpButton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectScrollDownButton, {})
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Viewport, { className: "dl-select-viewport", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    className: cn("dl-select-label", className),
     ...props
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React31.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var SelectItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   SelectPrimitive.Item,
   {
     ref,
-    className: cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("dl-select-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "absolute right-2 flex items-center justify-center size-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Check, { className: "size-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "dl-select-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.Check, { style: { width: "0.75rem", height: "0.75rem" } }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("dl-select-separator", className),
     ...props
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-// src/components/separator.tsx
-var React32 = __toESM(require("react"), 1);
+// src/components/separator/separator.tsx
+var React35 = __toESM(require("react"), 1);
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Separator6 = React32.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Separator6 = React35.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     SeparatorPrimitive.Root,
     {
       ref,
       decorative,
       orientation,
-      className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className
-      ),
+      className: cn("dl-separator", className),
       ...props
     }
   )
 );
 Separator6.displayName = SeparatorPrimitive.Root.displayName;
 
-// src/components/sheet.tsx
-var React33 = __toESM(require("react"), 1);
+// src/components/sheet/sheet.tsx
+var React36 = __toESM(require("react"), 1);
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var SheetOverlay = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   SheetPrimitive.Overlay,
   {
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
+    className: cn("dl-dialog-overlay", className),
     ...props,
     ref
   }
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var sheetVariants = (0, import_class_variance_authority6.cva)(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
-      }
-    },
-    defaultVariants: {
-      side: "right"
+var sheetVariants = (0, import_class_variance_authority6.cva)("dl-sheet-content", {
+  variants: {
+    side: {
+      top: "dl-sheet-content--top",
+      bottom: "dl-sheet-content--bottom",
+      left: "dl-sheet-content--left",
+      right: "dl-sheet-content--right"
     }
+  },
+  defaultVariants: {
+    side: "right"
   }
-);
-var SheetContent = React33.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SheetPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SheetOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+});
+var SheetContent = React36.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(SheetPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SheetOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     SheetPrimitive.Content,
     {
       ref,
       className: cn(sheetVariants({ side }), className),
+      "data-side": side,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.X, { className: "size-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(SheetPrimitive.Close, { className: "dl-sheet-close", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react19.X, { style: { width: "1rem", height: "1rem" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: "Close" })
         ] }),
         children
       ]
@@ -2971,109 +2963,73 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("dl-sheet__header", className), ...props });
 SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("dl-sheet__footer", className), ...props });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var SheetTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   SheetPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold text-foreground", className),
+    className: cn("dl-sheet__title", className),
     ...props
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var SheetDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   SheetPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("dl-sheet__desc", className),
     ...props
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// src/components/sidebar.tsx
-var React35 = __toESM(require("react"), 1);
+// src/components/sidebar/sidebar.tsx
+var React38 = __toESM(require("react"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_lucide_react18 = require("lucide-react");
-
-// src/components/skeleton.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-function Skeleton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    "div",
-    {
-      className: cn("animate-pulse rounded-md bg-primary/10", className),
-      ...props
-    }
-  );
-}
+var import_lucide_react20 = require("lucide-react");
 
-// src/components/tooltip.tsx
-var React34 = __toESM(require("react"), 1);
+// src/components/tooltip/tooltip.tsx
+var React37 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip2 = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React34.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
-      className
-    ),
+    className: cn("dl-tooltip", className),
     ...props
   }
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-// src/components/sidebar.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+// src/components/sidebar/sidebar.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React35.createContext(null);
+var SidebarContext = React38.createContext(null);
 function useSidebar() {
-  const context = React35.useContext(SidebarContext);
+  const context = React38.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React35.forwardRef(
+var SidebarProvider = React38.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -3084,10 +3040,10 @@ var SidebarProvider = React35.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React35.useState(false);
-    const [_open, _setOpen] = React35.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React38.useState(false);
+    const [_open, _setOpen] = React38.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React35.useCallback(
+    const setOpen = React38.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -3099,10 +3055,10 @@ var SidebarProvider = React35.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React35.useCallback(() => {
+    const toggleSidebar = React38.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React35.useEffect(() => {
+    React38.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -3113,7 +3069,7 @@ var SidebarProvider = React35.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React35.useMemo(
+    const contextValue = React38.useMemo(
       () => ({
         state,
         open,
@@ -3133,7 +3089,7 @@ var SidebarProvider = React35.forwardRef(
         toggleSidebar
       ]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         style: {
@@ -3153,7 +3109,7 @@ var SidebarProvider = React35.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React35.forwardRef(
+var Sidebar = React38.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -3164,7 +3120,7 @@ var Sidebar = React35.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "div",
         {
           className: cn(
@@ -3178,7 +3134,7 @@ var Sidebar = React35.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -3189,16 +3145,16 @@ var Sidebar = React35.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col size-full", children })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col size-full", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "div",
       {
         ref,
@@ -3208,7 +3164,7 @@ var Sidebar = React35.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
               className: cn(
@@ -3219,7 +3175,7 @@ var Sidebar = React35.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
               className: cn(
@@ -3230,7 +3186,7 @@ var Sidebar = React35.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -3246,9 +3202,9 @@ var Sidebar = React35.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React35.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React38.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Button,
     {
       ref,
@@ -3262,94 +3218,99 @@ var SidebarTrigger = React35.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react18.PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react20.PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React35.forwardRef(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "button",
-    {
-      ref,
-      "data-sidebar": "rail",
-      "aria-label": "Toggle Sidebar",
-      tabIndex: -1,
-      onClick: toggleSidebar,
-      title: "Toggle Sidebar",
-      className: cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      ),
-      ...props
-    }
-  );
-});
+var SidebarRail = React38.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "button",
+      {
+        ref,
+        "data-sidebar": "rail",
+        "aria-label": "Toggle Sidebar",
+        tabIndex: -1,
+        onClick: toggleSidebar,
+        title: "Toggle Sidebar",
+        className: cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "in-data-[side=right]:cursor-e-resize",
+          "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "main",
-    {
-      ref,
-      className: cn(
-        "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
-      ),
-      ...props
-    }
-  );
-});
+var SidebarInset = React38.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "main",
+      {
+        ref,
+        className: cn(
+          "relative flex w-full flex-1 flex-col bg-background",
+          "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var SidebarInput = React38.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Input,
     {
       ref,
       "data-sidebar": "input",
-      className: cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      ),
+      className: cn("dl-sidebar-input", className),
       ...props
     }
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "div",
-    {
-      ref,
-      "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-2", className),
-      ...props
-    }
-  );
-});
+var SidebarHeader = React38.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        ref,
+        "data-sidebar": "header",
+        className: cn("flex flex-col gap-2 p-2", className),
+        ...props
+      }
+    );
+  }
+);
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "div",
-    {
-      ref,
-      "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-2", className),
-      ...props
-    }
-  );
-});
+var SidebarFooter = React38.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        ref,
+        "data-sidebar": "footer",
+        className: cn("flex flex-col gap-2 p-2", className),
+        ...props
+      }
+    );
+  }
+);
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var SidebarSeparator = React38.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Separator6,
     {
       ref,
@@ -3360,42 +3321,46 @@ var SidebarSeparator = React35.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "div",
-    {
-      ref,
-      "data-sidebar": "content",
-      className: cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      ),
-      ...props
-    }
-  );
-});
+var SidebarContent = React38.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        ref,
+        "data-sidebar": "content",
+        className: cn(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "div",
-    {
-      ref,
-      "data-sidebar": "group",
-      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
-      ...props
-    }
-  );
-});
+var SidebarGroup = React38.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        ref,
+        "data-sidebar": "group",
+        className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+        ...props
+      }
+    );
+  }
+);
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React35.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       ref,
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       ),
@@ -3404,9 +3369,9 @@ var SidebarGroupLabel = React35.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React35.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot4.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       ref,
@@ -3423,7 +3388,7 @@ var SidebarGroupAction = React35.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var SidebarGroupContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   "div",
   {
     ref,
@@ -3433,25 +3398,29 @@ var SidebarGroupContent = React35.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-  "ul",
-  {
-    ref,
-    "data-sidebar": "menu",
-    className: cn("flex w-full min-w-0 flex-col gap-1", className),
-    ...props
-  }
-));
+var SidebarMenu = React38.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "ul",
+    {
+      ref,
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  )
+);
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-  "li",
-  {
-    ref,
-    "data-sidebar": "menu-item",
-    className: cn("group/menu-item relative", className),
-    ...props
-  }
-));
+var SidebarMenuItem = React38.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "li",
+    {
+      ref,
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  )
+);
 SidebarMenuItem.displayName = "SidebarMenuItem";
 var sidebarMenuButtonVariants = (0, import_class_variance_authority7.cva)(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring cursor-pointer transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -3473,7 +3442,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority7.cva)(
     }
   }
 );
-var SidebarMenuButton = React35.forwardRef(
+var SidebarMenuButton = React38.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -3485,7 +3454,7 @@ var SidebarMenuButton = React35.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot4.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Comp,
       {
         ref,
@@ -3504,9 +3473,9 @@ var SidebarMenuButton = React35.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -3519,9 +3488,9 @@ var SidebarMenuButton = React35.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React35.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+var SidebarMenuAction = React38.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot4.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       ref,
@@ -3534,7 +3503,7 @@ var SidebarMenuAction = React35.forwardRef(({ className, asChild = false, showOn
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
-        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
         className
       ),
       ...props
@@ -3542,7 +3511,7 @@ var SidebarMenuAction = React35.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var SidebarMenuBadge = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   "div",
   {
     ref,
@@ -3560,11 +3529,11 @@ var SidebarMenuBadge = React35.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React35.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React35.useMemo(() => {
+var SidebarMenuSkeleton = React38.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React38.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ref,
@@ -3572,14 +3541,14 @@ var SidebarMenuSkeleton = React35.forwardRef(({ className, showIcon = false, ...
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-(--skeleton-width) flex-1",
@@ -3594,25 +3563,27 @@ var SidebarMenuSkeleton = React35.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-  "ul",
-  {
-    ref,
-    "data-sidebar": "menu-sub",
-    className: cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    ),
-    ...props
-  }
-));
+var SidebarMenuSub = React38.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "ul",
+    {
+      ref,
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  )
+);
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React35.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React35.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React38.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? import_react_slot4.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       ref,
@@ -3620,7 +3591,7 @@ var SidebarMenuSubButton = React35.forwardRef(({ asChild = false, size = "md", i
       "data-size": size,
       "data-active": isActive,
       className: cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
@@ -3633,41 +3604,38 @@ var SidebarMenuSubButton = React35.forwardRef(({ asChild = false, size = "md", i
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
-// src/components/slider.tsx
-var React36 = __toESM(require("react"), 1);
+// src/components/slider/slider.tsx
+var React39 = __toESM(require("react"), 1);
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Slider = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Slider = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
   SliderPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    ),
+    className: cn("dl-slider", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SliderPrimitive.Thumb, { className: "block rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SliderPrimitive.Track, { className: "dl-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SliderPrimitive.Range, { className: "dl-slider__range" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SliderPrimitive.Thumb, { className: "dl-slider__thumb" })
     ]
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
-// src/components/sonner.tsx
+// src/components/sonner/sonner.tsx
 var import_sonner = require("sonner");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_sonner.Toaster,
     {
-      className: "toaster group",
+      className: "dl-toaster",
       toastOptions: {
         classNames: {
-          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+          toast: "dl-toast",
+          description: "dl-toast__desc",
+          actionButton: "dl-toast__action",
+          cancelButton: "dl-toast__cancel"
         }
       },
       ...props
@@ -3675,202 +3643,211 @@ var Toaster = ({ ...props }) => {
   );
 };
 
-// src/components/switch.tsx
-var React37 = __toESM(require("react"), 1);
+// src/components/status-badge/status-badge.tsx
+var React40 = __toESM(require("react"), 1);
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var statusCategoryMap = {
+  Completed: "dl-status-badge--success",
+  COMPLETED: "dl-status-badge--success",
+  Operational: "dl-status-badge--success",
+  OPERATIONAL: "dl-status-badge--success",
+  Active: "dl-status-badge--success",
+  ACTIVE: "dl-status-badge--success",
+  ONLINE: "dl-status-badge--success",
+  "In Progress": "dl-status-badge--info",
+  RUNNING: "dl-status-badge--info",
+  "Needs Approval": "dl-status-badge--warning",
+  Degraded: "dl-status-badge--warning",
+  PAUSED: "dl-status-badge--warning",
+  Failed: "dl-status-badge--destructive",
+  FAILED: "dl-status-badge--destructive",
+  Offline: "dl-status-badge--muted",
+  DISABLED: "dl-status-badge--muted",
+  IDLE: "dl-status-badge--muted"
+};
+var StatusBadge = React40.forwardRef(
+  ({ status, className, ...props }, ref) => {
+    const normalizedStatus = status?.trim() ?? "";
+    const colorClass = statusCategoryMap[normalizedStatus] ?? "dl-status-badge--muted";
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "span",
+      {
+        ref,
+        className: cn("dl-status-badge", colorClass, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "dl-status-badge__dot" }),
+          normalizedStatus
+        ]
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+
+// src/components/status-chip/status-chip.tsx
+var React41 = __toESM(require("react"), 1);
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var statusToneMap = {
+  active: "dl-status-chip--primary",
+  running: "dl-status-chip--primary",
+  completed: "dl-status-chip--muted",
+  done: "dl-status-chip--muted",
+  indexed: "dl-status-chip--primary",
+  enabled: "dl-status-chip--primary",
+  available: "dl-status-chip--primary",
+  published: "dl-status-chip--primary",
+  ok: "dl-status-chip--primary",
+  waiting: "dl-status-chip--warning",
+  paused: "dl-status-chip--warning",
+  processing: "dl-status-chip--warning",
+  degraded: "dl-status-chip--warning",
+  warn: "dl-status-chip--warning",
+  "requires-approval": "dl-status-chip--warning",
+  draft: "dl-status-chip--warning",
+  failed: "dl-status-chip--destructive",
+  error: "dl-status-chip--destructive",
+  offline: "dl-status-chip--destructive"
+};
+var StatusChip = React41.forwardRef(
+  ({ status, className, ...props }, ref) => {
+    const toneClass = statusToneMap[status] ?? "dl-status-chip--muted";
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      "span",
+      {
+        ref,
+        className: cn("dl-status-chip", toneClass, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "dl-status-chip__dot" }),
+          status
+        ]
+      }
+    );
+  }
+);
+StatusChip.displayName = "StatusChip";
+
+// src/components/switch/switch.tsx
+var React42 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var Switch = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Switch = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   SwitchPrimitives.Root,
   {
-    className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    ),
+    className: cn("dl-switch", className),
     ...props,
     ref,
-    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      SwitchPrimitives.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 size-4"
-        )
-      }
-    )
+    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SwitchPrimitives.Thumb, { className: "dl-switch__thumb" })
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-// src/components/table.tsx
-var React38 = __toESM(require("react"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Table = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
-  }
-) }));
+// src/components/table/table.tsx
+var React43 = __toESM(require("react"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Table = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("table", { ref, className: cn("dl-table", className), ...props }) })
+);
 Table.displayName = "Table";
-var TableHeader = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { ref, className: cn("dl-table__head", className), ...props })
+);
 TableHeader.displayName = "TableHeader";
-var TableBody = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "tbody",
+var TableBody = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { ref, className: cn("dl-table__body", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tfoot", { ref, className: cn("dl-table__foot", className), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { ref, className: cn("dl-table__row", className), ...props })
+);
+TableRow.displayName = "TableRow";
+var TableHead = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { ref, className: cn("dl-table__head-cell", className), ...props })
+);
+TableHead.displayName = "TableHead";
+var TableCell = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { ref, className: cn("dl-table__cell", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  "caption",
   {
     ref,
-    className: cn("[&_tr:last-child]:border-0", className),
-    ...props
-  }
-));
-TableBody.displayName = "TableBody";
-var TableFooter = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "tfoot",
-  {
-    ref,
-    className: cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    ),
-    ...props
-  }
-));
-TableFooter.displayName = "TableFooter";
-var TableRow = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "tr",
-  {
-    ref,
-    className: cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    ),
-    ...props
-  }
-));
-TableRow.displayName = "TableRow";
-var TableHead = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "th",
-  {
-    ref,
-    className: cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
-      className
-    ),
-    ...props
-  }
-));
-TableHead.displayName = "TableHead";
-var TableCell = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "td",
-  {
-    ref,
-    className: cn(
-      "p-2 align-middle has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
-      className
-    ),
-    ...props
-  }
-));
-TableCell.displayName = "TableCell";
-var TableCaption = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-  "caption",
-  {
-    ref,
-    className: cn("mt-4 text-sm text-muted-foreground", className),
+    className: cn("dl-table__caption", className),
     ...props
   }
 ));
 TableCaption.displayName = "TableCaption";
 
-// src/components/tabs.tsx
-var React39 = __toESM(require("react"), 1);
+// src/components/tabs/tabs.tsx
+var React44 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
-var TabsList = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var TabsList = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   TabsPrimitive.List,
   {
     ref,
-    className: cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
-    ),
+    className: cn("dl-tabs-list", className),
     ...props
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var TabsTrigger = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   TabsPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
-    ),
+    className: cn("dl-tabs-trigger", className),
     ...props
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var TabsContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   TabsPrimitive.Content,
   {
     ref,
-    className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
-      className
-    ),
+    className: cn("dl-tabs-content", className),
     ...props
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-// src/components/textarea.tsx
-var React40 = __toESM(require("react"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Textarea = React40.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    "textarea",
-    {
-      className: cn(
-        "flex min-h-15 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      ),
-      ref,
-      ...props
-    }
-  );
-});
+// src/components/textarea/textarea.tsx
+var React45 = __toESM(require("react"), 1);
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Textarea = React45.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("textarea", { className: cn("dl-textarea", className), ref, ...props })
+);
 Textarea.displayName = "Textarea";
 
-// src/components/toggle-group.tsx
-var React42 = __toESM(require("react"), 1);
-var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-
-// src/components/toggle.tsx
-var React41 = __toESM(require("react"), 1);
+// src/components/toggle/toggle.tsx
+var React46 = __toESM(require("react"), 1);
 var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"), 1);
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var toggleVariants = (0, import_class_variance_authority8.cva)(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium cursor-pointer transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10"
-      }
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority8.cva)("dl-toggle", {
+  variants: {
+    variant: {
+      default: "dl-toggle--variant-default",
+      outline: "dl-toggle--variant-outline"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+    size: {
+      default: "dl-toggle--size-default",
+      sm: "dl-toggle--size-sm",
+      lg: "dl-toggle--size-lg"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-);
-var Toggle = React41.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+});
+var Toggle = React46.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   TogglePrimitive.Root,
   {
     ref,
@@ -3880,25 +3857,27 @@ var Toggle = React41.forwardRef(({ className, variant, size, ...props }, ref) =>
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
-// src/components/toggle-group.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var ToggleGroupContext = React42.createContext({
+// src/components/toggle-group/toggle-group.tsx
+var React47 = __toESM(require("react"), 1);
+var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ToggleGroupContext = React47.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React42.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var ToggleGroup = React47.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
-    className: cn("flex items-center justify-center gap-1", className),
+    className: cn("dl-toggle-group", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React42.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React42.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var ToggleGroupItem = React47.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React47.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -3915,378 +3894,6 @@ var ToggleGroupItem = React42.forwardRef(({ className, children, variant, size,
   );
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-// src/components/panel.tsx
-var React43 = __toESM(require("react"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Panel2 = React43.forwardRef(
-  ({ title, meta, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-      "section",
-      {
-        ref,
-        className: cn("rounded-lg border border-border bg-card p-4", className),
-        ...props,
-        children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h2", { className: "font-display text-sm font-semibold", children: title }),
-            meta ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: meta }) : null
-          ] }) : null,
-          children
-        ]
-      }
-    );
-  }
-);
-Panel2.displayName = "Panel";
-
-// src/components/status-chip.tsx
-var React44 = __toESM(require("react"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var statusTone = {
-  active: "border-primary/30 bg-primary/10 text-primary",
-  running: "border-primary/30 bg-primary/10 text-primary",
-  completed: "border-border bg-secondary text-muted-foreground",
-  done: "border-border bg-secondary text-muted-foreground",
-  indexed: "border-primary/30 bg-primary/10 text-primary",
-  enabled: "border-primary/30 bg-primary/10 text-primary",
-  available: "border-primary/30 bg-primary/10 text-primary",
-  published: "border-primary/30 bg-primary/10 text-primary",
-  ok: "border-primary/30 bg-primary/10 text-primary",
-  waiting: "border-warning/35 bg-warning/10 text-warning",
-  paused: "border-warning/35 bg-warning/10 text-warning",
-  processing: "border-warning/35 bg-warning/10 text-warning",
-  degraded: "border-warning/35 bg-warning/10 text-warning",
-  warn: "border-warning/35 bg-warning/10 text-warning",
-  "requires-approval": "border-warning/35 bg-warning/10 text-warning",
-  draft: "border-warning/35 bg-warning/10 text-warning",
-  failed: "border-destructive/35 bg-destructive/10 text-destructive",
-  error: "border-destructive/35 bg-destructive/10 text-destructive",
-  offline: "border-destructive/35 bg-destructive/10 text-destructive"
-};
-var StatusChip = React44.forwardRef(
-  ({ status, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-      "span",
-      {
-        ref,
-        className: cn(
-          "inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 font-mono text-[10px]",
-          statusTone[status] ?? "border-border bg-secondary text-muted-foreground",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "size-1.5 rounded-full bg-current" }),
-          status
-        ]
-      }
-    );
-  }
-);
-StatusChip.displayName = "StatusChip";
-
-// src/components/date-picker.tsx
-var React45 = __toESM(require("react"), 1);
-var import_date_fns = require("date-fns");
-var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-function DatePicker({
-  value,
-  onChange,
-  placeholder = "Pick a date",
-  className,
-  disabled
-}) {
-  const date = React45.useMemo(() => {
-    if (!value) return void 0;
-    const parts = value.split("-");
-    if (parts.length !== 3) {
-      const d = new Date(value);
-      return isNaN(d.getTime()) ? void 0 : d;
-    }
-    const year = parseInt(parts[0], 10);
-    const month = parseInt(parts[1], 10) - 1;
-    const day = parseInt(parts[2], 10);
-    return new Date(year, month, day, 12, 0, 0);
-  }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-      Button,
-      {
-        variant: "outline",
-        type: "button",
-        disabled,
-        className: cn(
-          "border-border/80 bg-secondary/40 hover:bg-secondary/60 hover:text-foreground h-9 w-full justify-start text-left font-normal",
-          !value && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react19.Calendar, { className: "mr-2 size-4" }),
-          date && !isNaN(date.getTime()) ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: placeholder })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      Calendar,
-      {
-        mode: "single",
-        selected: date,
-        onSelect: (selectedDate) => onChange?.(selectedDate ? (0, import_date_fns.format)(selectedDate, "yyyy-MM-dd") : ""),
-        initialFocus: true
-      }
-    ) })
-  ] });
-}
-
-// src/components/searchable-select.tsx
-var React46 = __toESM(require("react"), 1);
-var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-function SearchableSelect({
-  options,
-  value,
-  onChange,
-  placeholder = "Select an option...",
-  searchPlaceholder = "Search...",
-  onAddNew,
-  addNewLabel = "Add new",
-  disabled = false,
-  className,
-  id
-}) {
-  const [open, setOpen] = React46.useState(false);
-  const [search, setSearch] = React46.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React46.useState(0);
-  const listRef = React46.useRef(null);
-  const selectedOption = React46.useMemo(() => {
-    return options.find((opt) => opt.value === value);
-  }, [options, value]);
-  const filteredOptions = React46.useMemo(() => {
-    if (!search.trim()) return options;
-    const q = search.toLowerCase();
-    return options.filter(
-      (opt) => opt.label.toLowerCase().includes(q) || opt.group && opt.group.toLowerCase().includes(q)
-    );
-  }, [options, search]);
-  const handleOpenChange = (newOpen) => {
-    setOpen(newOpen);
-    if (newOpen) {
-      const idx = filteredOptions.findIndex((opt) => opt.value === value);
-      setHighlightedIndex(idx >= 0 ? idx : 0);
-    } else {
-      setSearch("");
-    }
-  };
-  const handleSearchChange = (newSearch) => {
-    setSearch(newSearch);
-    setHighlightedIndex(0);
-  };
-  React46.useEffect(() => {
-    if (open && listRef.current) {
-      const activeEl = listRef.current.querySelector(
-        "[data-highlighted='true']"
-      );
-      if (activeEl) {
-        activeEl.scrollIntoView({ block: "nearest" });
-      }
-    }
-  }, [highlightedIndex, open]);
-  const groupedOptions = React46.useMemo(() => {
-    const hasGroups = filteredOptions.some((opt) => opt.group);
-    if (!hasGroups) return { Default: filteredOptions };
-    return filteredOptions.reduce(
-      (acc, opt) => {
-        const g = opt.group || "Other";
-        if (!acc[g]) acc[g] = [];
-        acc[g].push(opt);
-        return acc;
-      },
-      {}
-    );
-  }, [filteredOptions]);
-  const handleSelect = (val) => {
-    onChange?.(val);
-    setOpen(false);
-    setSearch("");
-  };
-  const handleAddNew = () => {
-    onAddNew?.(search.trim());
-    setOpen(false);
-    setSearch("");
-  };
-  const handleKeyDown = (e) => {
-    if (!open) {
-      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        handleOpenChange(true);
-      }
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setHighlightedIndex(
-          (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
-        );
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setHighlightedIndex((prev) => prev > 0 ? prev - 1 : 0);
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (filteredOptions.length > 0 && filteredOptions[highlightedIndex]) {
-          handleSelect(filteredOptions[highlightedIndex].value);
-        } else if (onAddNew && search.trim()) {
-          handleAddNew();
-        }
-        break;
-      case "Escape":
-      case "Tab":
-        e.preventDefault();
-        handleOpenChange(false);
-        break;
-    }
-  };
-  let currentIndex = 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      Button,
-      {
-        id,
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        disabled,
-        onKeyDown: handleKeyDown,
-        className: cn(
-          "bg-background border-input hover:bg-accent/50 h-9 w-full justify-between px-3 text-left font-normal",
-          !selectedOption && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.ChevronDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      PopoverContent,
-      {
-        align: "start",
-        className: "border-border bg-popover w-(--radix-popover-trigger-width) min-w-55 border p-0 shadow-lg",
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "border-border flex items-center gap-2 border-b p-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Search, { className: "text-muted-foreground size-4 shrink-0 opacity-50" }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              Input,
-              {
-                placeholder: searchPlaceholder,
-                value: search,
-                onChange: (e) => handleSearchChange(e.target.value),
-                className: "h-8 border-none bg-transparent px-1 text-sm focus-visible:ring-0 focus-visible:ring-offset-0",
-                autoFocus: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            "div",
-            {
-              ref: listRef,
-              onWheel: (e) => e.stopPropagation(),
-              className: "max-h-60 overflow-y-auto overscroll-contain p-1 text-sm",
-              children: Object.keys(groupedOptions).length === 0 || filteredOptions.length === 0 && !onAddNew ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "text-muted-foreground py-6 text-center text-xs", children: "No matching options found." }) : Object.entries(groupedOptions).map(([groupName, groupOpts]) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "py-1", children: [
-                groupName !== "Default" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "text-muted-foreground/70 px-2 py-1 text-[10px] font-bold tracking-wider uppercase", children: groupName }),
-                groupOpts.map((option) => {
-                  const isSelected = option.value === value;
-                  const itemIndex = currentIndex++;
-                  const isHighlighted = itemIndex === highlightedIndex;
-                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                    "div",
-                    {
-                      "data-highlighted": isHighlighted,
-                      onClick: () => handleSelect(option.value),
-                      onMouseEnter: () => setHighlightedIndex(itemIndex),
-                      className: cn(
-                        "relative flex cursor-pointer items-center rounded-sm px-2.5 py-1.5 text-sm transition-colors outline-none select-none",
-                        isHighlighted && "bg-accent text-accent-foreground font-medium",
-                        isSelected && !isHighlighted && "bg-accent/40 text-accent-foreground font-medium"
-                      ),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1 truncate", children: option.label }),
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Check, { className: "text-primary ml-2 size-4 shrink-0" })
-                      ]
-                    },
-                    option.value
-                  );
-                })
-              ] }, groupName))
-            }
-          ),
-          onAddNew && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "border-border bg-muted/30 border-t p-1", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: handleAddNew,
-              className: "text-primary hover:bg-primary/10 flex w-full items-center gap-2 rounded-sm px-2.5 py-2 text-xs font-semibold transition-colors",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Plus, { className: "size-3.5 shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "truncate", children: search.trim() ? `${addNewLabel} "${search.trim()}"` : `${addNewLabel}` })
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/components/confirm-dialog.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
-function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  onConfirm,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  destructive = false
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(AlertDialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(AlertDialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertDialogTitle, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertDialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(AlertDialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertDialogCancel, { children: cancelText }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        AlertDialogAction,
-        {
-          onClick: onConfirm,
-          className: destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "",
-          children: confirmText
-        }
-      )
-    ] })
-  ] }) });
-}
-
-// src/components/loading-state.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-function LoadingState({
-  rows = 3,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cn("w-full space-y-4 p-2", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Skeleton, { className: "h-8 w-1/3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Skeleton, { className: "h-16 w-full rounded-xl" }, i)) })
-  ] });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4513,6 +4120,7 @@ function LoadingState({
   SidebarTrigger,
   Skeleton,
   Slider,
+  StatusBadge,
   StatusChip,
   Switch,
   Table,
@@ -4537,12 +4145,16 @@ function LoadingState({
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  alertVariants,
   badgeVariants,
   buttonVariants,
   cn,
+  labelVariants,
   navigationMenuTriggerStyle,
+  sheetVariants,
   toast,
   toggleVariants,
+  useCarousel,
   useConfig,
   useFormField,
   useIsMobile,