@yuva-devlab/ui 1.4.3 → 2.0.0

package/dist/index.cjs

@@ -54,6 +54,7 @@ __export(index_exports, {
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
   Badge: () => Badge,
+  Box: () => Box,
   Breadcrumb: () => Breadcrumb,
   BreadcrumbEllipsis: () => BreadcrumbEllipsis,
   BreadcrumbItem: () => BreadcrumbItem,
@@ -72,10 +73,12 @@ __export(index_exports, {
   CardTitle: () => CardTitle,
   Carousel: () => Carousel,
   CarouselContent: () => CarouselContent,
+  CarouselContext: () => CarouselContext,
   CarouselItem: () => CarouselItem,
   CarouselNext: () => CarouselNext,
   CarouselPrevious: () => CarouselPrevious,
   ChartContainer: () => ChartContainer,
+  ChartContext: () => ChartContext,
   ChartLegend: () => ChartLegend,
   ChartLegendContent: () => ChartLegendContent,
   ChartStyle: () => ChartStyle,
@@ -96,6 +99,7 @@ __export(index_exports, {
   CommandShortcut: () => CommandShortcut,
   ConfigProvider: () => ConfigProvider,
   ConfirmDialog: () => ConfirmDialog,
+  Container: () => Container,
   ContextMenu: () => ContextMenu,
   ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
   ContextMenuContent: () => ContextMenuContent,
@@ -149,6 +153,8 @@ __export(index_exports, {
   DropdownMenuSubContent: () => DropdownMenuSubContent,
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  EmptyState: () => EmptyState,
+  Flex: () => Flex,
   Form: () => Form,
   FormControl: () => FormControl,
   FormDescription: () => FormDescription,
@@ -156,6 +162,8 @@ __export(index_exports, {
   FormItem: () => FormItem,
   FormLabel: () => FormLabel,
   FormMessage: () => FormMessage,
+  Grid: () => Grid,
+  Heading: () => Heading,
   HoverCard: () => HoverCard,
   HoverCardContent: () => HoverCardContent,
   HoverCardTrigger: () => HoverCardTrigger,
@@ -210,6 +218,12 @@ __export(index_exports, {
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
+  SIDEBAR_COOKIE_MAX_AGE: () => SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME: () => SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT: () => SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH: () => SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON: () => SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE: () => SIDEBAR_WIDTH_MOBILE,
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
   SearchableSelect: () => SearchableSelect,
@@ -237,6 +251,7 @@ __export(index_exports, {
   SheetTrigger: () => SheetTrigger,
   Sidebar: () => Sidebar,
   SidebarContent: () => SidebarContent,
+  SidebarContext: () => SidebarContext,
   SidebarFooter: () => SidebarFooter,
   SidebarGroup: () => SidebarGroup,
   SidebarGroupAction: () => SidebarGroupAction,
@@ -260,9 +275,11 @@ __export(index_exports, {
   SidebarTrigger: () => SidebarTrigger,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
+  Stack: () => Stack,
   StatusBadge: () => StatusBadge,
   StatusChip: () => StatusChip,
   Switch: () => Switch,
+  THEMES: () => THEMES,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCaption: () => TableCaption,
@@ -275,6 +292,7 @@ __export(index_exports, {
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
   TabsTrigger: () => TabsTrigger,
+  Text: () => Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   Toaster: () => Toaster,
@@ -289,12 +307,16 @@ __export(index_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  cx: () => cx,
+  getPayloadConfigFromPayload: () => getPayloadConfigFromPayload,
   labelVariants: () => labelVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
   sheetVariants: () => sheetVariants,
+  sidebarMenuButtonVariants: () => sidebarMenuButtonVariants,
   toast: () => import_sonner.toast,
   toggleVariants: () => toggleVariants,
   useCarousel: () => useCarousel,
+  useChart: () => useChart,
   useConfig: () => useConfig,
   useFormField: () => useFormField,
   useIsMobile: () => useIsMobile,
@@ -305,9 +327,11 @@ module.exports = __toCommonJS(index_exports);
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
+function cx(...inputs) {
+  return (0, import_clsx.clsx)(inputs);
+}
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return (0, import_clsx.clsx)(inputs);
 }
 
 // src/theme-provider.tsx
@@ -760,130 +784,83 @@ function Calendar({
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
-      className: cn(
-        "group/calendar p-3 [--cell-size:2rem] in-data-[slot=card-content]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
+      className: cn("dl-calendar", className),
       captionLayout,
       formatters: {
         formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
         ...formatters
       },
       classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
+        root: cn("dl-calendar", defaultClassNames.root),
+        months: cn("dl-calendar__months", defaultClassNames.months),
+        month: cn("dl-calendar__month", defaultClassNames.month),
+        nav: cn("dl-calendar__nav", defaultClassNames.nav),
         button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "select-none p-0 aria-disabled:opacity-50 size-(--cell-size)",
+          buttonVariants({ variant: buttonVariant, size: "icon" }),
+          "dl-calendar__nav-button",
           defaultClassNames.button_previous
         ),
         button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "select-none p-0 aria-disabled:opacity-50 size-(--cell-size)",
+          buttonVariants({ variant: buttonVariant, size: "icon" }),
+          "dl-calendar__nav-button",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          "dl-calendar__month-caption",
           defaultClassNames.month_caption
         ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
+        dropdowns: cn("dl-calendar__dropdowns", defaultClassNames.dropdowns),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          "dl-calendar__dropdown-root",
           defaultClassNames.dropdown_root
         ),
-        dropdown: cn(
-          "bg-popover absolute inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
+        dropdown: cn("dl-calendar__dropdown", defaultClassNames.dropdown),
         caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          "dl-calendar__caption-label",
+          captionLayout !== "label" && "dl-calendar__caption-label--interactive",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md size-full",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        table: cn("dl-calendar__table", defaultClassNames.month_grid),
+        month_grid: cn("dl-calendar__table", defaultClassNames.month_grid),
+        weekdays: defaultClassNames.weekdays,
+        weekday: defaultClassNames.weekday,
+        week: defaultClassNames.week,
+        day: defaultClassNames.day,
+        range_start: defaultClassNames.range_start,
+        range_middle: defaultClassNames.range_middle,
+        range_end: defaultClassNames.range_end,
+        today: defaultClassNames.today,
+        outside: defaultClassNames.outside,
+        disabled: defaultClassNames.disabled,
+        hidden: defaultClassNames.hidden,
         ...classNames
       },
       components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
+        Root: ({ className: rootClassName, rootRef, ...rootProps }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: rootRef,
+            className: cn("dl-calendar", rootClassName),
+            ...rootProps
+          }
+        ),
+        Chevron: ({
+          className: chevronClassName,
+          orientation,
+          ...chevronProps
+        }) => {
+          const chevronClass = cn("dl-calendar__chevron", chevronClassName);
           if (orientation === "left") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronLeftIcon, { className: chevronClass, ...chevronProps });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_lucide_react3.ChevronRightIcon,
-              {
-                className: cn("size-4", className2),
-                ...props2
-              }
-            );
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRightIcon, { className: chevronClass, ...chevronProps });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronDownIcon, { className: chevronClass, ...chevronProps });
         },
         DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
+        WeekNumber: ({ children, ...weekProps }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { ...weekProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dl-calendar__week-number", children }) }),
         ...components
       },
       ...props
@@ -905,16 +882,17 @@ function CalendarDayButton({
     Button,
     {
       ref,
-      variant: "ghost",
+      variant: modifiers["selected"] ? "default" : "ghost",
       size: "icon",
       "data-day": day.date.toLocaleDateString(),
+      "data-selected": modifiers["selected"] ? "true" : void 0,
       "data-selected-single": modifiers["selected"] && !modifiers["range_start"] && !modifiers["range_end"] && !modifiers["range_middle"],
       "data-range-start": modifiers["range_start"],
       "data-range-end": modifiers["range_end"],
       "data-range-middle": modifiers["range_middle"],
       className: cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
+        "dl-calendar__day-button",
+        defaultClassNames.day_button,
         className
       ),
       ...props
@@ -948,12 +926,13 @@ var CardFooter = React10.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 
-// src/components/carousel/carousel.tsx
+// src/components/carousel/carousel-context.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");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var CarouselContext = React11.createContext(null);
+var CarouselContext = React11.createContext(
+  null
+);
 function useCarousel() {
   const context = React11.useContext(CarouselContext);
   if (!context) {
@@ -1039,28 +1018,31 @@ 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: "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
-      }
-    ) });
-  }
-);
+
+// src/components/carousel/carousel-items.tsx
+var React12 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CarouselContent = React12.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: carouselRef, className: "dl-carousel-viewport", children: /* @__PURE__ */ (0, import_jsx_runtime12.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(
+var CarouselItem = React12.forwardRef(
   ({ className, ...props }, ref) => {
     const { orientation } = useCarousel();
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         ref,
@@ -1077,9 +1059,9 @@ var CarouselItem = React11.forwardRef(
   }
 );
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React11.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React12.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Button,
     {
       ref,
@@ -1094,81 +1076,78 @@ var CarouselPrevious = React11.forwardRef(({ className, variant = "outline", siz
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ArrowLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.ArrowLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime12.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(
-          "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" })
-        ]
-      }
-    );
-  }
-);
+var CarouselNext = React12.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(import_lucide_react4.ArrowRight, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
 CarouselNext.displayName = "CarouselNext";
 
-// 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");
+// src/components/chart/chart-context.tsx
+var React13 = __toESM(require("react"), 1);
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React12.createContext(null);
+var ChartContext = React13.createContext(null);
 function useChart() {
-  const context = React12.useContext(ChartContext);
+  const context = React13.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   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("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 })
-        ]
-      }
-    ) });
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
   }
-);
-ChartContainer.displayName = "Chart";
-var ChartStyle = ({ id, config }) => {
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+// src/components/chart/chart-container.tsx
+var React14 = __toESM(require("react"), 1);
+var RechartsPrimitive = __toESM(require("recharts"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ChartStyle = ({
+  id,
+  config
+}) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme || config2.color
+    ([, itemConfig]) => itemConfig.theme || itemConfig.color
   );
   if (!colorConfig.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -1186,8 +1165,31 @@ ${colorConfig.map(([key, itemConfig]) => {
     }
   );
 };
-var ChartTooltip = RechartsPrimitive.Tooltip;
-var ChartTooltipContent = React12.forwardRef(
+var ChartContainer = React14.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React14.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      "data-chart": chartId,
+      ref,
+      className: cn("dl-chart-container", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+});
+ChartContainer.displayName = "Chart";
+
+// src/components/chart/chart-tooltip.tsx
+var React15 = __toESM(require("react"), 1);
+var RechartsPrimitive2 = __toESM(require("recharts"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ChartTooltip = RechartsPrimitive2.Tooltip;
+var ChartTooltipContent = React15.forwardRef(
   ({
     active,
     payload,
@@ -1204,7 +1206,7 @@ var ChartTooltipContent = React12.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React12.useMemo(() => {
+    const tooltipLabel = React15.useMemo(() => {
       if (hideLabel || !payload?.length) {
         return null;
       }
@@ -1213,12 +1215,12 @@ var ChartTooltipContent = React12.forwardRef(
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
       if (labelFormatter) {
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-chart-tooltip__label", labelClassName), children: labelFormatter(value, payload) });
       }
       if (!value) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("font-medium", labelClassName), children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-chart-tooltip__label", labelClassName), children: value });
     }, [
       label,
       labelFormatter,
@@ -1232,31 +1234,29 @@ var ChartTooltipContent = React12.forwardRef(
       return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className: cn("dl-chart-tooltip", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime14.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) => {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dl-chart-tooltip__grid", 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)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
           {
             className: cn(
-              "flex flex-wrap items-stretch gap-2 [&>svg]:text-muted-foreground [&>svg]:size-2.5",
-              indicator === "dot" && "items-center"
+              "dl-chart-tooltip__item",
+              indicator === "dot" && "dl-chart-tooltip__item--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)(
+            children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+              itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "div",
                 {
                   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"
-                    }
+                    "dl-chart-tooltip__indicator",
+                    indicator === "dot" && "dl-chart-tooltip__indicator--dot",
+                    indicator === "line" && "dl-chart-tooltip__indicator--line",
+                    indicator === "dashed" && "dl-chart-tooltip__indicator--dashed",
+                    nestLabel && indicator === "dashed" && "dl-chart-tooltip__indicator--nested"
                   ),
                   style: {
                     "--color-bg": indicatorColor,
@@ -1264,19 +1264,19 @@ var ChartTooltipContent = React12.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                 "div",
                 {
                   className: cn(
-                    "flex flex-1 justify-between leading-none",
-                    nestLabel ? "items-end" : "items-center"
+                    "dl-chart-tooltip__row",
+                    nestLabel && "dl-chart-tooltip__row--end"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "dl-chart-tooltip__grid", children: [
                       nestLabel ? tooltipLabel : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dl-chart-tooltip__item-label", 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.value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dl-chart-tooltip__item-value", children: item.value.toLocaleString() })
                   ]
                 }
               )
@@ -1289,78 +1289,59 @@ var ChartTooltipContent = React12.forwardRef(
   }
 );
 ChartTooltipContent.displayName = "ChartTooltip";
-var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React12.forwardRef(
+
+// src/components/chart/chart-legend.tsx
+var React16 = __toESM(require("react"), 1);
+var RechartsPrimitive3 = __toESM(require("recharts"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ChartLegend = RechartsPrimitive3.Legend;
+var ChartLegendContent = React16.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!payload?.length) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref,
         className: cn(
           "dl-chart-legend",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
+          verticalAlign === "top" ? "dl-chart-legend--top" : "dl-chart-legend--bottom",
           className
         ),
         children: payload.filter((item) => item.type !== "none").map((item) => {
           const key = `${nameKey || item.dataKey || "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-1.5 [&>svg]:text-muted-foreground [&>svg]:size-3"
-              ),
-              children: [
-                itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "div",
-                  {
-                    className: "shrink-0 rounded-xs size-2",
-                    style: {
-                      backgroundColor: item.color
-                    }
-                  }
-                ),
-                itemConfig?.label
-              ]
-            },
-            item.value
-          );
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "dl-chart-legend__item", children: [
+            itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "div",
+              {
+                className: "dl-chart-legend__indicator",
+                style: { backgroundColor: item.color }
+              }
+            ),
+            itemConfig?.label
+          ] }, item.value);
         })
       }
     );
   }
 );
 ChartLegendContent.displayName = "ChartLegend";
-function getPayloadConfigFromPayload(config, payload, key) {
-  if (typeof payload !== "object" || payload === null) {
-    return void 0;
-  }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
-  return configLabelKey in config ? config[configLabelKey] : config[key];
-}
 
 // src/components/checkbox/checkbox.tsx
-var React13 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Checkbox = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn("dl-checkbox", className),
     ...props,
-    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" } }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckboxPrimitive.Indicator, { className: "dl-checkbox-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.Check, { className: "dl-checkbox-icon" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
@@ -1372,20 +1353,20 @@ var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
 // src/components/command/command.tsx
-var React15 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_cmdk = require("cmdk");
 var import_lucide_react7 = require("lucide-react");
 
 // src/components/dialog/dialog.tsx
-var React14 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var DialogOverlay = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1394,9 +1375,9 @@ var DialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React14.forwardRef(({ className, children, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+var DialogContent = React18.forwardRef(({ className, children, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     DialogPrimitive.Content,
     {
       ref,
@@ -1408,9 +1389,9 @@ var DialogContent = React14.forwardRef(({ className, children, size = "md", ...p
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Close, { className: "dl-dialog-close", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dl-dialog-sr-only", children: "Close" })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DialogPrimitive.Close, { className: "dl-dialog-close", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.X, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dl-dialog-sr-only", children: "Close" })
         ] })
       ]
     }
@@ -1420,19 +1401,19 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-dialog__header", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("dl-dialog__header", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 var DialogBody = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-dialog__body", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("dl-dialog__body", className), ...props });
 DialogBody.displayName = "DialogBody";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("dl-dialog__footer", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.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)(
+var DialogTitle = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   DialogPrimitive.Title,
   {
     ref,
@@ -1441,7 +1422,7 @@ var DialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var DialogDescription = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   DialogPrimitive.Description,
   {
     ref,
@@ -1452,8 +1433,8 @@ var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // 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)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Command = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_cmdk.Command,
   {
     ref,
@@ -1463,11 +1444,11 @@ var Command = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 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: "dl-command-dialog-content", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Command, { children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogContent, { className: "dl-command-dialog-content", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Command, { children }) }) });
 };
-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)(
+var CommandInput = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dl-command-input-wrapper", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Search, { className: "dl-command-input-icon" }),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_cmdk.Command.Input,
     {
       ref,
@@ -1477,7 +1458,7 @@ var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var CommandList = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_cmdk.Command.List,
   {
     ref,
@@ -1486,9 +1467,9 @@ var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 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: "dl-command-empty", ...props }));
+var CommandEmpty = React19.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.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)(
+var CommandGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
@@ -1497,7 +1478,7 @@ var CommandGroup = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var CommandSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -1506,7 +1487,7 @@ var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var CommandItem = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_cmdk.Command.Item,
   {
     ref,
@@ -1516,12 +1497,12 @@ var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("dl-command-shortcut", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cn("dl-command-shortcut", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/confirm-dialog/confirm-dialog.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -1532,14 +1513,14 @@ function ConfirmDialog({
   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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogCancel, { children: cancelText }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         AlertDialogAction,
         {
           onClick: onConfirm,
@@ -1551,35 +1532,35 @@ function ConfirmDialog({
   ] }) });
 }
 
-// src/components/context-menu/context-menu.tsx
-var React16 = __toESM(require("react"), 1);
+// src/components/context-menu/context-menu-primitives.tsx
+var React20 = __toESM(require("react"), 1);
 var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = 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_runtime17.jsxs)(
+var ContextMenuSubTrigger = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
     className: cn(
       "dl-menu-item dl-menu-sub-trigger",
-      inset && "pl-8",
+      inset && "dl-menu-item--inset",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.ChevronRight, { className: "ml-auto size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.ChevronRight, { className: "dl-menu-item__chevron" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var ContextMenuSubContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -1588,7 +1569,7 @@ var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var ContextMenuContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -1597,80 +1578,86 @@ var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-  ContextMenuPrimitive.Item,
+
+// src/components/context-menu/context-menu-items.tsx
+var React21 = __toESM(require("react"), 1);
+var ContextMenuPrimitive2 = __toESM(require("@radix-ui/react-context-menu"), 1);
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ContextMenuItem = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ContextMenuPrimitive2.Item,
   {
     ref,
-    className: cn("dl-menu-item", inset && "pl-8", className),
+    className: cn("dl-menu-item", inset && "dl-menu-item--inset", className),
     ...props
   }
 ));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-  ContextMenuPrimitive.CheckboxItem,
+ContextMenuItem.displayName = ContextMenuPrimitive2.Item.displayName;
+var ContextMenuCheckboxItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  ContextMenuPrimitive2.CheckboxItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-checkbox-item", className),
     ...props,
     children: [
-      /* @__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" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Check, { className: "dl-menu-item__icon" }) }) }),
       children
     ]
   }
 ));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-  ContextMenuPrimitive.RadioItem,
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive2.CheckboxItem.displayName;
+var ContextMenuRadioItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  ContextMenuPrimitive2.RadioItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__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" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Circle, { className: "dl-menu-item__radio-dot" }) }) }),
       children
     ]
   }
 ));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-  ContextMenuPrimitive.Label,
+ContextMenuRadioItem.displayName = ContextMenuPrimitive2.RadioItem.displayName;
+var ContextMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ContextMenuPrimitive2.Label,
   {
     ref,
-    className: cn("dl-menu-label", inset && "pl-8", className),
+    className: cn("dl-menu-label", inset && "dl-menu-label--inset", className),
     ...props
   }
 ));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-  ContextMenuPrimitive.Separator,
+ContextMenuLabel.displayName = ContextMenuPrimitive2.Label.displayName;
+var ContextMenuSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ContextMenuPrimitive2.Separator,
   {
     ref,
     className: cn("dl-menu-separator", className),
     ...props
   }
 ));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+ContextMenuSeparator.displayName = ContextMenuPrimitive2.Separator.displayName;
 var ContextMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // src/components/date-picker/date-picker.tsx
-var React18 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 var import_date_fns = require("date-fns");
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 
 // src/components/popover/popover.tsx
-var React17 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime22 = 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)(
+var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1683,7 +1670,7 @@ var PopoverContent = React17.forwardRef(({ className, align = "center", sideOffs
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/date-picker/date-picker.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function DatePicker({
   value,
   onChange,
@@ -1691,7 +1678,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const date = React18.useMemo(() => {
+  const date = React23.useMemo(() => {
     if (!value) return void 0;
     const parts = value.split("-");
     if (parts.length !== 3) {
@@ -1703,8 +1690,8 @@ function DatePicker({
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       Button,
       {
         variant: "outline",
@@ -1716,31 +1703,31 @@ function DatePicker({
           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_runtime23.jsx)(import_lucide_react10.Calendar, { className: "dl-date-picker-icon" }),
+          date && !isNaN(date.getTime()) ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime23.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverContent, { className: "dl-date-picker-content", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Calendar,
       {
         mode: "single",
         selected: date,
         onSelect: (selectedDate) => onChange?.(selectedDate ? (0, import_date_fns.format)(selectedDate, "yyyy-MM-dd") : ""),
-        initialFocus: true
+        autoFocus: true
       }
     ) })
   ] });
 }
 
 // src/components/drawer/drawer.tsx
-var React19 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 var import_vaul = require("vaul");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Drawer = ({
   shouldScaleBackground = true,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   import_vaul.Drawer.Root,
   {
     shouldScaleBackground,
@@ -1751,7 +1738,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = import_vaul.Drawer.Trigger;
 var DrawerPortal = import_vaul.Drawer.Portal;
 var DrawerClose = import_vaul.Drawer.Close;
-var DrawerOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var DrawerOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   import_vaul.Drawer.Overlay,
   {
     ref,
@@ -1760,16 +1747,16 @@ var DrawerOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = import_vaul.Drawer.Overlay.displayName;
-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)(
+var DrawerContent = React24.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(DrawerPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DrawerOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     import_vaul.Drawer.Content,
     {
       ref,
       className: cn("dl-drawer-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "dl-drawer-handle" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "dl-drawer-handle" }),
         children
       ]
     }
@@ -1779,14 +1766,14 @@ DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("dl-drawer-header", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("dl-drawer-header", className), ...props });
 DrawerHeader.displayName = "DrawerHeader";
 var DrawerFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("dl-drawer-footer", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("dl-drawer-footer", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var DrawerTitle = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   import_vaul.Drawer.Title,
   {
     ref,
@@ -1795,7 +1782,7 @@ var DrawerTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = import_vaul.Drawer.Title.displayName;
-var DrawerDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var DrawerDescription = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   import_vaul.Drawer.Description,
   {
     ref,
@@ -1805,40 +1792,35 @@ var DrawerDescription = React19.forwardRef(({ className, ...props }, ref) => /*
 ));
 DrawerDescription.displayName = import_vaul.Drawer.Description.displayName;
 
-// src/components/dropdown-menu/dropdown-menu.tsx
-var React20 = __toESM(require("react"), 1);
+// src/components/dropdown-menu/dropdown-menu-primitives.tsx
+var React25 = __toESM(require("react"), 1);
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime25 = 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 = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var DropdownMenuSubTrigger = React25.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
     className: cn(
       "dl-menu-item dl-menu-sub-trigger",
-      inset && "pl-8",
+      inset && "dl-menu-item--inset",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_lucide_react10.ChevronRight,
-        {
-          style: { marginLeft: "auto", width: "1rem", height: "1rem" }
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.ChevronRight, { className: "dl-menu-item__chevron" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var DropdownMenuSubContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -1847,7 +1829,7 @@ var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var DropdownMenuContent = React25.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1857,84 +1839,101 @@ var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  DropdownMenuPrimitive.Item,
+
+// src/components/dropdown-menu/dropdown-menu-items.tsx
+var React26 = __toESM(require("react"), 1);
+var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var DropdownMenuItem = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  DropdownMenuPrimitive2.Item,
   {
     ref,
-    className: cn("dl-menu-item", inset && "pl-8", className),
+    className: cn("dl-menu-item", inset && "dl-menu-item--inset", className),
     ...props
   }
 ));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-  DropdownMenuPrimitive.CheckboxItem,
+DropdownMenuItem.displayName = DropdownMenuPrimitive2.Item.displayName;
+var DropdownMenuCheckboxItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  DropdownMenuPrimitive2.CheckboxItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-checkbox-item", className),
     ...props,
     children: [
-      /* @__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" } }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react12.Check, { className: "dl-menu-item__icon" }) }) }),
       children
     ]
   }
 ));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-  DropdownMenuPrimitive.RadioItem,
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive2.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  DropdownMenuPrimitive2.RadioItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__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" }
-        }
-      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react12.Circle, { className: "dl-menu-item__radio-dot" }) }) }),
       children
     ]
   }
 ));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  DropdownMenuPrimitive.Label,
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive2.RadioItem.displayName;
+var DropdownMenuLabel = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  DropdownMenuPrimitive2.Label,
   {
     ref,
-    className: cn("dl-menu-label", inset && "pl-8", className),
+    className: cn("dl-menu-label", inset && "dl-menu-label--inset", className),
     ...props
   }
 ));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  DropdownMenuPrimitive.Separator,
+DropdownMenuLabel.displayName = DropdownMenuPrimitive2.Label.displayName;
+var DropdownMenuSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  DropdownMenuPrimitive2.Separator,
   {
     ref,
     className: cn("dl-menu-separator", className),
     ...props
   }
 ));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive2.Separator.displayName;
 var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
+// src/components/empty-state/empty-state.tsx
+var React27 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var EmptyState = React27.forwardRef(
+  ({ title, description, icon, action, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: cn("dl-empty-state", className), ...props, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "dl-empty-state__icon-box", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "dl-empty-state__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "dl-empty-state__description", children: description }),
+      children,
+      action && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "dl-empty-state__actions", children: action })
+    ] });
+  }
+);
+EmptyState.displayName = "EmptyState";
+
 // src/components/form/form.tsx
-var React22 = __toESM(require("react"), 1);
+var React29 = __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/label.tsx
-var React21 = __toESM(require("react"), 1);
+var React28 = __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_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority4.cva)("dl-label");
-var Label3 = React21.forwardRef(({ className, children, required = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+var Label3 = React28.forwardRef(({ className, children, required = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
   LabelPrimitive.Root,
   {
     ref,
@@ -1942,26 +1941,26 @@ var Label3 = React21.forwardRef(({ className, children, required = false, ...pro
     ...props,
     children: [
       children,
-      required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "dl-label-required text-destructive ml-0.5", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "dl-label-required", children: "*" })
     ]
   }
 ));
 Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/form/form.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Form = import_react_hook_form.FormProvider;
-var FormFieldContext = React22.createContext(
+var FormFieldContext = React29.createContext(
   null
 );
 var FormField = ({
   ...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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_hook_form.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React22.useContext(FormFieldContext);
-  const itemContext = React22.useContext(FormItemContext);
+  const fieldContext = React29.useContext(FormFieldContext);
+  const itemContext = React29.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -1980,15 +1979,15 @@ var useFormField = () => {
     ...fieldState
   };
 };
-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 }) });
+var FormItemContext = React29.createContext(null);
+var FormItem = React29.forwardRef(({ className, ...props }, ref) => {
+  const id = React29.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("dl-form-item", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React22.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React29.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Label3,
     {
       ref,
@@ -1999,9 +1998,9 @@ var FormLabel = React22.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React22.forwardRef(({ ...props }, ref) => {
+var FormControl = React29.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_react_slot3.Slot,
     {
       ref,
@@ -2013,9 +2012,9 @@ var FormControl = React22.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React22.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React29.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "p",
     {
       ref,
@@ -2026,13 +2025,13 @@ var FormDescription = React22.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React22.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React29.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_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "p",
     {
       ref,
@@ -2046,12 +2045,12 @@ var FormMessage = React22.forwardRef(({ className, children, ...props }, ref) =>
 FormMessage.displayName = "FormMessage";
 
 // src/components/hover-card/hover-card.tsx
-var React23 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 var HoverCardPrimitive = __toESM(require("@radix-ui/react-hover-card"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React23.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var HoverCardContent = React30.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -2064,11 +2063,11 @@ var HoverCardContent = React23.forwardRef(({ className, align = "center", sideOf
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/input/input.tsx
-var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Input = React24.forwardRef(
+var React31 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Input = React31.forwardRef(
   ({ className, type, startIcon, endIcon, ...props }, ref) => {
-    const inputEl = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    const inputEl = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "input",
       {
         type,
@@ -2085,21 +2084,21 @@ var Input = React24.forwardRef(
     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 }),
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dl-input-wrapper", children: [
+      startIcon && /* @__PURE__ */ (0, import_jsx_runtime31.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 })
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime31.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 React32 = __toESM(require("react"), 1);
 var import_input_otp = require("input-otp");
-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)(
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var InputOTP = React32.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   import_input_otp.OTPInput,
   {
     ref,
@@ -2109,16 +2108,16 @@ var InputOTP = React25.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: cn("dl-input-otp-group", className), ...props }));
+var InputOTPGroup = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("dl-input-otp-group", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React25.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React25.useContext(import_input_otp.OTPInputContext);
+var InputOTPSlot = React32.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React32.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {
     char: null,
     hasFakeCaret: false,
     isActive: false
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref,
@@ -2130,23 +2129,23 @@ var InputOTPSlot = React25.forwardRef(({ index, className, ...props }, ref) => {
       ...props,
       children: [
         char,
-        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" }) })
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "dl-input-otp-caret", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "dl-input-otp-caret__line" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-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, {}) }));
+var InputOTPSeparator = React32.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react13.Minus, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/skeleton/skeleton.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("dl-skeleton", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("dl-skeleton", className), ...props });
 }
 
 // src/components/loading-state/loading-state.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function LoadingState({
   rows = 3,
   message,
@@ -2154,8 +2153,8 @@ function LoadingState({
   ...props
 }) {
   if (message) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("dl-loading", className), ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("dl-loading", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -2167,49 +2166,39 @@ function LoadingState({
           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" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: message })
+      /* @__PURE__ */ (0, import_jsx_runtime34.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
-    )) })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("dl-loading-skeleton", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Skeleton, { className: "dl-loading-skeleton__header" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "dl-loading-skeleton__list", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Skeleton, { className: "dl-loading-skeleton__row" }, i)) })
   ] });
 }
 
-// src/components/menubar/menubar.tsx
-var React26 = __toESM(require("react"), 1);
+// src/components/menubar/menubar-primitives.tsx
+var React33 = __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");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function MenubarMenu(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Menu, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenubarPrimitive.Menu, { ...props });
 }
 function MenubarGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Group, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenubarPrimitive.Group, { ...props });
 }
 function MenubarPortal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenubarPrimitive.Portal, { ...props });
 }
 function MenubarRadioGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.RadioGroup, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenubarPrimitive.RadioGroup, { ...props });
 }
 function MenubarSub(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
 }
-var Menubar = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var Menubar = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   MenubarPrimitive.Root,
   {
     ref,
@@ -2218,7 +2207,7 @@ var Menubar = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var MenubarTrigger = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -2227,24 +2216,24 @@ var MenubarTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React26.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+var MenubarSubTrigger = React33.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
   MenubarPrimitive.SubTrigger,
   {
     ref,
     className: cn(
       "dl-menu-item dl-menu-sub-trigger",
-      inset && "pl-8",
+      inset && "dl-menu-item--inset",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.ChevronRight, { className: "ml-auto size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react14.ChevronRight, { className: "dl-menu-item__chevron" })
     ]
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var MenubarSubContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   MenubarPrimitive.SubContent,
   {
     ref,
@@ -2253,8 +2242,8 @@ var MenubarSubContent = React26.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-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)(
+var MenubarContent = React33.forwardRef(
+  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenubarPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     MenubarPrimitive.Content,
     {
       ref,
@@ -2267,72 +2256,81 @@ var MenubarContent = React26.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  MenubarPrimitive.Item,
+
+// src/components/menubar/menubar-items.tsx
+var React34 = __toESM(require("react"), 1);
+var MenubarPrimitive2 = __toESM(require("@radix-ui/react-menubar"), 1);
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var MenubarItem = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  MenubarPrimitive2.Item,
   {
     ref,
-    className: cn("dl-menu-item", inset && "pl-8", className),
+    className: cn("dl-menu-item", inset && "dl-menu-item--inset", className),
     ...props
   }
 ));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React26.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-  MenubarPrimitive.CheckboxItem,
+MenubarItem.displayName = MenubarPrimitive2.Item.displayName;
+var MenubarCheckboxItem = React34.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  MenubarPrimitive2.CheckboxItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-checkbox-item", className),
     checked,
     ...props,
     children: [
-      /* @__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" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MenubarPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react15.Check, { className: "dl-menu-item__icon" }) }) }),
       children
     ]
   }
 ));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-  MenubarPrimitive.RadioItem,
+MenubarCheckboxItem.displayName = MenubarPrimitive2.CheckboxItem.displayName;
+var MenubarRadioItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  MenubarPrimitive2.RadioItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__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" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MenubarPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react15.Circle, { className: "dl-menu-item__radio-dot" }) }) }),
       children
     ]
   }
 ));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  MenubarPrimitive.Label,
+MenubarRadioItem.displayName = MenubarPrimitive2.RadioItem.displayName;
+var MenubarLabel = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  MenubarPrimitive2.Label,
   {
     ref,
-    className: cn("dl-menu-label", inset && "pl-8", className),
+    className: cn("dl-menu-label", inset && "dl-menu-label--inset", className),
     ...props
   }
 ));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  MenubarPrimitive.Separator,
+MenubarLabel.displayName = MenubarPrimitive2.Label.displayName;
+var MenubarSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  MenubarPrimitive2.Separator,
   {
     ref,
     className: cn("dl-menu-separator", className),
     ...props
   }
 ));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-var MenubarShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
-};
-MenubarShortcut.displayName = "MenubarShortcut";
+MenubarSeparator.displayName = MenubarPrimitive2.Separator.displayName;
+var MenubarShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("dl-menu-shortcut", className), ...props });
+};
+MenubarShortcut.displayName = "MenubarShortcut";
 
 // src/components/navigation-menu/navigation-menu.tsx
-var React27 = __toESM(require("react"), 1);
+var React35 = __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_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)(
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var NavigationMenu = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -2340,12 +2338,12 @@ var NavigationMenu = React27.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(NavigationMenuViewport, {})
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NavigationMenuViewport, {})
     ]
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var NavigationMenuList = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -2356,7 +2354,7 @@ var NavigationMenuList = React27.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 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)(
+var NavigationMenuTrigger = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
@@ -2365,12 +2363,12 @@ var NavigationMenuTrigger = React27.forwardRef(({ className, children, ...props
     children: [
       children,
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronDown, { className: "dl-navigation-menu-chevron", "aria-hidden": "true" })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react16.ChevronDown, { className: "dl-navigation-menu-chevron", "aria-hidden": "true" })
     ]
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var NavigationMenuContent = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -2380,7 +2378,7 @@ var NavigationMenuContent = React27.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-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)(
+var NavigationMenuViewport = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "dl-navigation-menu-viewport-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn("dl-navigation-menu-viewport", className),
@@ -2389,22 +2387,22 @@ var NavigationMenuViewport = React27.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var NavigationMenuIndicator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
     className: cn("dl-navigation-menu-indicator", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "dl-navigation-menu-indicator__arrow" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "dl-navigation-menu-indicator__arrow" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 // 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)(
+var React36 = __toESM(require("react"), 1);
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "nav",
   {
     role: "navigation",
@@ -2414,10 +2412,10 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_run
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { ref, className: cn("dl-pagination-content", className), ...props }));
+var PaginationContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { ref, className: cn("dl-pagination-content", className), ...props }));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React28.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { ref, className: cn("dl-pagination-item", className), ...props })
+var PaginationItem = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { ref, className: cn("dl-pagination-item", className), ...props })
 );
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
@@ -2425,7 +2423,7 @@ var PaginationLink = ({
   isActive,
   size = "icon",
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "a",
   {
     "aria-current": isActive ? "page" : void 0,
@@ -2443,7 +2441,7 @@ PaginationLink.displayName = "PaginationLink";
 var PaginationPrevious = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   PaginationLink,
   {
     "aria-label": "Go to previous page",
@@ -2451,13 +2449,13 @@ var PaginationPrevious = ({
     className: cn("dl-pagination-prev", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.ChevronLeft, { className: "size-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Previous" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react17.ChevronLeft, { className: "dl-pagination-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Previous" })
     ]
   }
 );
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   PaginationLink,
   {
     "aria-label": "Go to next page",
@@ -2465,8 +2463,8 @@ var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx
     className: cn("dl-pagination-next", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Next" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.ChevronRight, { className: "size-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Next" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react17.ChevronRight, { className: "dl-pagination-icon" })
     ]
   }
 );
@@ -2474,29 +2472,29 @@ PaginationNext.displayName = "PaginationNext";
 var PaginationEllipsis = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   "span",
   {
     "aria-hidden": true,
     className: cn("dl-pagination-ellipsis", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.MoreHorizontal, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sr-only", children: "More pages" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react17.MoreHorizontal, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "sr-only", children: "More pages" })
     ]
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/panel/panel.tsx
-var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Panel = React29.forwardRef(
+var React37 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Panel = React37.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
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("section", { ref, className: cn("dl-panel", className), ...props, children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "dl-panel__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "dl-panel__title", children: title }),
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "dl-panel__meta", children: meta }) : null
       ] }) : null,
       children
     ] });
@@ -2505,16 +2503,16 @@ var Panel = React29.forwardRef(
 Panel.displayName = "Panel";
 
 // src/components/progress/progress.tsx
-var React30 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Progress = React30.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Progress = React38.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   ProgressPrimitive.Root,
   {
     ref,
     className: cn("dl-progress", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       ProgressPrimitive.Indicator,
       {
         className: "dl-progress__indicator",
@@ -2526,12 +2524,12 @@ var Progress = React30.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/radio-group/radio-group.tsx
-var React31 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-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)(
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var RadioGroup4 = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     RadioGroupPrimitive.Root,
     {
       className: cn("dl-radio-group", className),
@@ -2541,88 +2539,83 @@ var RadioGroup4 = React31.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup4.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React31.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var RadioGroupItem = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     RadioGroupPrimitive.Item,
     {
       ref,
       className: cn("dl-radio-item", className),
       ...props,
-      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" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadioGroupPrimitive.Indicator, { className: "dl-radio-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react18.Circle, { "aria-hidden": "true" }) })
     }
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/components/resizable/resizable.tsx
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react19 = require("lucide-react");
 var import_react_resizable_panels = require("react-resizable-panels");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ResizablePanelGroup = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_resizable_panels.Group, { className: cn("dl-resizable-group", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime42.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_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, {}) }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_resizable_panels.Separator, { className: cn("dl-resizable-handle", className), ...props, children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "dl-resizable-grip", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react19.GripVertical, {}) }) });
 
 // src/components/scroll-area/scroll-area.tsx
-var React32 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var ScrollArea = React32.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var ScrollArea = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("dl-scroll-area", className),
     ...props,
     children: [
-      /* @__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, {})
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScrollAreaPrimitive.Viewport, { className: "dl-scroll-area__viewport", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React32.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var ScrollBar = React40.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation,
     className: cn("dl-scroll-area__bar", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dl-scroll-area__thumb" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dl-scroll-area__thumb" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // 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({
+var import_lucide_react20 = require("lucide-react");
+
+// src/components/searchable-select/use-searchable-select.ts
+var React41 = __toESM(require("react"), 1);
+function useSearchableSelect({
   options,
   value,
   onChange,
-  placeholder = "Select an option...",
-  searchPlaceholder = "Search...",
-  onAddNew,
-  addNewLabel = "Add new",
-  disabled = false,
-  className,
-  id
+  onAddNew
 }) {
-  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(() => {
+  const [open, setOpen] = React41.useState(false);
+  const [search, setSearch] = React41.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React41.useState(0);
+  const listRef = React41.useRef(null);
+  const selectedOption = React41.useMemo(() => {
     return options.find((opt) => opt.value === value);
   }, [options, value]);
-  const filteredOptions = React33.useMemo(() => {
+  const filteredOptions = React41.useMemo(() => {
     if (!search.trim()) return options;
     const q = search.toLowerCase();
     return options.filter(
@@ -2642,7 +2635,7 @@ function SearchableSelect({
     setSearch(q);
     setHighlightedIndex(0);
   };
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (open && listRef.current) {
       const activeEl = listRef.current.querySelector(
         "[data-highlighted='true']"
@@ -2652,7 +2645,7 @@ function SearchableSelect({
       }
     }
   }, [highlightedIndex, open]);
-  const groupedOptions = React33.useMemo(() => {
+  const groupedOptions = React41.useMemo(() => {
     const hasGroups = filteredOptions.some((opt) => opt.group);
     if (!hasGroups) return { Default: filteredOptions };
     return filteredOptions.reduce(
@@ -2709,9 +2702,55 @@ function SearchableSelect({
         break;
     }
   };
+  return {
+    open,
+    search,
+    highlightedIndex,
+    setHighlightedIndex,
+    listRef,
+    selectedOption,
+    filteredOptions,
+    groupedOptions,
+    handleOpenChange,
+    handleSearchChange,
+    handleSelect,
+    handleAddNew,
+    handleKeyDown
+  };
+}
+
+// src/components/searchable-select/searchable-select.tsx
+var import_jsx_runtime44 = 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,
+    search,
+    highlightedIndex,
+    setHighlightedIndex,
+    listRef,
+    selectedOption,
+    filteredOptions,
+    groupedOptions,
+    handleOpenChange,
+    handleSearchChange,
+    handleSelect,
+    handleAddNew,
+    handleKeyDown
+  } = useSearchableSelect({ options, value, onChange, onAddNew });
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       Button,
       {
         id,
@@ -2726,21 +2765,21 @@ function SearchableSelect({
           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_runtime44.jsx)("span", { className: "dl-searchable-select-truncate", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react20.ChevronDown, { className: "dl-select-icon" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.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)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "dl-searchable-select-search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react20.Search, { className: "dl-searchable-select-search-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Input,
               {
                 placeholder: searchPlaceholder,
@@ -2751,19 +2790,19 @@ function SearchableSelect({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.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 }),
+              children: Object.keys(groupedOptions).length === 0 || filteredOptions.length === 0 && !onAddNew ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "dl-searchable-select-empty", children: "No matching options found." }) : Object.entries(groupedOptions).map(([groupName, groupOpts]) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "dl-searchable-select-group", children: [
+                groupName !== "Default" && /* @__PURE__ */ (0, import_jsx_runtime44.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)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
                     "div",
                     {
                       "data-highlighted": isHighlighted,
@@ -2775,8 +2814,8 @@ function SearchableSelect({
                         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" })
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "dl-searchable-select-item-text", children: option.label }),
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react20.Check, { className: "dl-select-check" })
                       ]
                     },
                     option.value
@@ -2785,15 +2824,15 @@ function SearchableSelect({
               ] }, groupName))
             }
           ),
-          onAddNew && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "dl-searchable-select-add", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          onAddNew && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "dl-searchable-select-add", children: /* @__PURE__ */ (0, import_jsx_runtime44.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 })
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react20.Plus, { className: "dl-searchable-select-add-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "dl-searchable-select-truncate", children: search.trim() ? `${addNewLabel} "${search.trim()}"` : addNewLabel })
               ]
             }
           ) })
@@ -2804,14 +2843,14 @@ function SearchableSelect({
 }
 
 // src/components/select/select.tsx
-var React34 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+var SelectTrigger = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2819,32 +2858,32 @@ var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__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: "1rem", height: "1rem" } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react21.ChevronDown, {}) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SelectScrollUpButton = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
     className: cn("dl-select-scroll-btn", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.ChevronUp, { style: { width: "1rem", height: "1rem" } })
+    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react21.ChevronUp, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SelectScrollDownButton = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
     className: cn("dl-select-scroll-btn", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.ChevronDown, { style: { width: "1rem", height: "1rem" } })
+    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react21.ChevronDown, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-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)(
+var SelectContent = React42.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
   SelectPrimitive.Content,
   {
     ref,
@@ -2852,14 +2891,14 @@ var SelectContent = React34.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__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, {})
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectPrimitive.Viewport, { className: "dl-select-viewport", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SelectLabel = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   SelectPrimitive.Label,
   {
     ref,
@@ -2868,20 +2907,20 @@ var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+var SelectItem = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
   SelectPrimitive.Item,
   {
     ref,
     className: cn("dl-select-item", className),
     ...props,
     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 })
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "dl-select-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react21.Check, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SelectSeparator = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2892,11 +2931,11 @@ var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @_
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator/separator.tsx
-var React35 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-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)(
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Separator6 = React43.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -2910,16 +2949,16 @@ var Separator6 = React35.forwardRef(
 Separator6.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/sheet/sheet.tsx
-var React36 = __toESM(require("react"), 1);
+var React44 = __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_react19 = require("lucide-react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var SheetOverlay = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   SheetPrimitive.Overlay,
   {
     className: cn("dl-dialog-overlay", className),
@@ -2941,9 +2980,9 @@ var sheetVariants = (0, import_class_variance_authority6.cva)("dl-sheet-content"
     side: "right"
   }
 });
-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)(
+var SheetContent = React44.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(SheetPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SheetOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     SheetPrimitive.Content,
     {
       ref,
@@ -2951,9 +2990,9 @@ var SheetContent = React36.forwardRef(({ side = "right", className, children, ..
       "data-side": side,
       ...props,
       children: [
-        /* @__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" })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(SheetPrimitive.Close, { className: "dl-sheet-close", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react22.X, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sr-only", children: "Close" })
         ] }),
         children
       ]
@@ -2964,14 +3003,14 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("dl-sheet__header", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cn("dl-sheet__header", className), ...props });
 SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("dl-sheet__footer", className), ...props });
+}) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cn("dl-sheet__footer", className), ...props });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var SheetTitle = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   SheetPrimitive.Title,
   {
     ref,
@@ -2980,7 +3019,7 @@ var SheetTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var SheetDescription = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   SheetPrimitive.Description,
   {
     ref,
@@ -2990,20 +3029,17 @@ var SheetDescription = React36.forwardRef(({ className, ...props }, ref) => /* @
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// 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_react20 = require("lucide-react");
+// src/components/sidebar/sidebar-context.tsx
+var React46 = __toESM(require("react"), 1);
 
 // src/components/tooltip/tooltip.tsx
-var React37 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip2 = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var TooltipContent = React45.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   TooltipPrimitive.Content,
   {
     ref,
@@ -3014,23 +3050,25 @@ var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, ...props }
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-// src/components/sidebar/sidebar.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+// src/components/sidebar/sidebar-context.tsx
+var import_jsx_runtime49 = 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 = React38.createContext(null);
+var SidebarContext = React46.createContext(
+  null
+);
 function useSidebar() {
-  const context = React38.useContext(SidebarContext);
+  const context = React46.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React38.forwardRef(
+var SidebarProvider = React46.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -3041,10 +3079,10 @@ var SidebarProvider = React38.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React38.useState(false);
-    const [_open, _setOpen] = React38.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React46.useState(false);
+    const [_open, _setOpen] = React46.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React38.useCallback(
+    const setOpen = React46.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -3056,10 +3094,10 @@ var SidebarProvider = React38.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React38.useCallback(() => {
-      return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+    const toggleSidebar = React46.useCallback(() => {
+      return isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev);
     }, [isMobile, setOpen, setOpenMobile]);
-    React38.useEffect(() => {
+    React46.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -3070,7 +3108,7 @@ var SidebarProvider = React38.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React38.useMemo(
+    const contextValue = React46.useMemo(
       () => ({
         state,
         open,
@@ -3090,7 +3128,7 @@ var SidebarProvider = React38.forwardRef(
         toggleSidebar
       ]
     );
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "div",
       {
         style: {
@@ -3098,10 +3136,7 @@ var SidebarProvider = React38.forwardRef(
           "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
           ...style
         },
-        className: cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
-          className
-        ),
+        className: cn("dl-sidebar-wrapper", className),
         ref,
         ...props,
         children
@@ -3110,7 +3145,11 @@ var SidebarProvider = React38.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React38.forwardRef(
+
+// src/components/sidebar/sidebar-layout.tsx
+var React47 = __toESM(require("react"), 1);
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Sidebar = React47.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -3121,13 +3160,10 @@ var Sidebar = React38.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "div",
         {
-          className: cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-            className
-          ),
+          className: cn("dl-sidebar dl-sidebar--static", className),
           ref,
           ...props,
           children
@@ -3135,315 +3171,196 @@ var Sidebar = React38.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
           "data-mobile": "true",
-          className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+          className: "dl-sidebar-mobile [&>button]:hidden",
           style: {
             "--sidebar-width": SIDEBAR_WIDTH_MOBILE
           },
           side,
           children: [
-            /* @__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_runtime50.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col size-full", children })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "dl-sidebar-mobile-content", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "div",
       {
         ref,
-        className: "group peer hidden text-sidebar-foreground md:block",
+        className: cn("dl-sidebar", className),
         "data-state": state,
         "data-collapsible": state === "collapsed" ? collapsible : "",
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "div",
-            {
-              className: cn(
-                "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-                "group-data-[collapsible=offcanvas]:w-0",
-                "group-data-[side=right]:rotate-180",
-                variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "div",
-            {
-              className: cn(
-                "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-                side === "left" ? "left-0 group-data-[collapsible=offcanvas]:-left-(--sidebar-width)" : "right-0 group-data-[collapsible=offcanvas]:-right-(--sidebar-width)",
-                // Adjust the padding for floating and inset variants.
-                variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-                className
-              ),
-              ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                "div",
-                {
-                  "data-sidebar": "sidebar",
-                  className: "flex flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow size-full",
-                  children
-                }
-              )
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "dl-sidebar-desktop-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "dl-sidebar-fixed", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { "data-sidebar": "sidebar", className: "dl-sidebar-inner", children }) })
         ]
       }
     );
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React38.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarRail = React47.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "button",
     {
       ref,
-      "data-sidebar": "trigger",
-      variant: "ghost",
-      size: "icon",
-      className: cn("size-7", className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react20.PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
-      ]
+      "data-sidebar": "rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn("dl-sidebar-rail", className),
+      ...props
     }
   );
 });
-SidebarTrigger.displayName = "SidebarTrigger";
-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 = 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
-      }
-    );
-  }
+var SidebarInset = React47.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("main", { ref, className: cn("dl-sidebar-inset", className), ...props })
 );
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    Input,
-    {
-      ref,
-      "data-sidebar": "input",
-      className: cn("dl-sidebar-input", className),
-      ...props
-    }
-  );
-});
-SidebarInput.displayName = "SidebarInput";
-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
-      }
-    );
+var SidebarHeader = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  "div",
+  {
+    ref,
+    "data-sidebar": "header",
+    className: cn("dl-sidebar-header", className),
+    ...props
   }
-);
+));
 SidebarHeader.displayName = "SidebarHeader";
-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
-      }
-    );
+var SidebarFooter = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  "div",
+  {
+    ref,
+    "data-sidebar": "footer",
+    className: cn("dl-sidebar-footer", className),
+    ...props
   }
-);
+));
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    Separator6,
-    {
-      ref,
-      "data-sidebar": "separator",
-      className: cn("mx-2 w-auto bg-sidebar-border", className),
-      ...props
-    }
-  );
-});
-SidebarSeparator.displayName = "SidebarSeparator";
-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
-      }
-    );
+var SidebarContent = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  "div",
+  {
+    ref,
+    "data-sidebar": "content",
+    className: cn("dl-sidebar-content", className),
+    ...props
   }
-);
+));
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React38.forwardRef(
+
+// src/components/sidebar/sidebar-group.tsx
+var React48 = __toESM(require("react"), 1);
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var SidebarGroup = React48.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "div",
       {
         ref,
         "data-sidebar": "group",
-        className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+        className: cn("dl-sidebar-group", className),
         ...props
       }
     );
   }
 );
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React48.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.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",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      ),
+      className: cn("dl-sidebar-group-label", className),
       ...props
     }
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React48.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot4.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Comp,
     {
       ref,
       "data-sidebar": "group-action",
-      className: cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      ),
+      className: cn("dl-sidebar-group-action", className),
       ...props
     }
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var SidebarGroupContent = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   "div",
   {
     ref,
     "data-sidebar": "group-content",
-    className: cn("w-full text-sm", className),
+    className: cn("dl-sidebar-group-content", className),
     ...props
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+
+// src/components/sidebar/sidebar-menu.tsx
+var React49 = __toESM(require("react"), 1);
+var import_react_slot5 = require("@radix-ui/react-slot");
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var sidebarMenuButtonVariants = (0, import_class_variance_authority7.cva)("dl-sidebar-menu-button", {
+  variants: {
+    variant: {
+      default: "dl-sidebar-menu-button--default",
+      outline: "dl-sidebar-menu-button--outline"
+    },
+    size: {
+      default: "dl-sidebar-menu-button--md",
+      sm: "dl-sidebar-menu-button--sm",
+      lg: "dl-sidebar-menu-button--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var SidebarMenu = React49.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "ul",
     {
       ref,
       "data-sidebar": "menu",
-      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      className: cn("dl-sidebar-menu", className),
       ...props
     }
   )
 );
 SidebarMenu.displayName = "SidebarMenu";
-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",
+var SidebarMenuItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  "li",
   {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
+    ref,
+    "data-sidebar": "menu-item",
+    className: cn("dl-sidebar-menu-item", className),
+    ...props
   }
-);
-var SidebarMenuButton = React38.forwardRef(
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+var SidebarMenuButton = React49.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -3453,14 +3370,15 @@ var SidebarMenuButton = React38.forwardRef(
     className,
     ...props
   }, ref) => {
-    const Comp = asChild ? import_react_slot4.Slot : "button";
+    const Comp = asChild ? import_react_slot5.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       Comp,
       {
         ref,
         "data-sidebar": "menu-button",
         "data-size": size,
+        "data-variant": variant,
         "data-active": isActive,
         className: cn(sidebarMenuButtonVariants({ variant, size }), className),
         ...props
@@ -3469,42 +3387,33 @@ var SidebarMenuButton = React38.forwardRef(
     if (!tooltip) {
       return button;
     }
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip
-      };
-    }
-    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)(
+    const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Tooltip2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         TooltipContent,
         {
           side: "right",
           align: "center",
           hidden: state !== "collapsed" || isMobile,
-          ...tooltip
+          ...tooltipProps
         }
       )
     ] });
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React38.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? import_react_slot4.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var SidebarMenuAction = React49.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? import_react_slot5.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     Comp,
     {
       ref,
       "data-sidebar": "menu-action",
+      "data-show-on-hover": showOnHover ? "true" : void 0,
       className: cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring cursor-pointer transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "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 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        "dl-sidebar-menu-action",
+        showOnHover && "dl-sidebar-menu-action--hover-only",
         className
       ),
       ...props
@@ -3512,51 +3421,46 @@ var SidebarMenuAction = React38.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var SidebarMenuBadge = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
   "div",
   {
     ref,
     "data-sidebar": "menu-badge",
-    className: cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    ),
+    className: cn("dl-sidebar-menu-badge", className),
     ...props
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React38.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React38.useMemo(() => {
+
+// src/components/sidebar/sidebar-submenu.tsx
+var React50 = __toESM(require("react"), 1);
+var import_react_slot6 = require("@radix-ui/react-slot");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var SidebarMenuSkeleton = React50.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React50.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       ref,
       "data-sidebar": "menu-skeleton",
-      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      className: cn("dl-sidebar-menu-skeleton", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Skeleton,
           {
-            className: "size-4 rounded-md",
+            className: "dl-sidebar-menu-skeleton-icon",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Skeleton,
           {
-            className: "h-4 max-w-(--skeleton-width) flex-1",
+            className: "dl-sidebar-menu-skeleton-text",
             "data-sidebar": "menu-skeleton-text",
-            style: {
-              "--skeleton-width": width
-            }
+            style: { "--skeleton-width": width }
           }
         )
       ]
@@ -3564,27 +3468,21 @@ var SidebarMenuSkeleton = React38.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-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
-    }
-  )
-);
+var SidebarMenuSub = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  "ul",
+  {
+    ref,
+    "data-sidebar": "menu-sub",
+    className: cn("dl-sidebar-menu-sub", className),
+    ...props
+  }
+));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React50.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-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_runtime42.jsx)(
+var SidebarMenuSubButton = React50.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? import_react_slot6.Slot : "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Comp,
     {
       ref,
@@ -3592,11 +3490,8 @@ var SidebarMenuSubButton = React38.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 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",
-        "group-data-[collapsible=icon]:hidden",
+        "dl-sidebar-menu-sub-button",
+        size === "sm" && "dl-sidebar-menu-sub-button--sm",
         className
       ),
       ...props
@@ -3605,19 +3500,71 @@ var SidebarMenuSubButton = React38.forwardRef(({ asChild = false, size = "md", i
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
+// src/components/sidebar/sidebar-controls.tsx
+var React51 = __toESM(require("react"), 1);
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var SidebarTrigger = React51.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    Button,
+    {
+      ref,
+      "data-sidebar": "trigger",
+      variant: "ghost",
+      size: "icon",
+      className: cn("dl-sidebar-trigger", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react23.PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+var SidebarSeparator = React51.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    Separator6,
+    {
+      ref,
+      "data-sidebar": "separator",
+      className: cn("dl-sidebar-separator", className),
+      ...props
+    }
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+var SidebarInput = React51.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    Input,
+    {
+      ref,
+      "data-sidebar": "input",
+      className: cn("dl-sidebar-input", className),
+      ...props
+    }
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
 // src/components/slider/slider.tsx
-var React39 = __toESM(require("react"), 1);
+var React52 = __toESM(require("react"), 1);
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Slider = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var Slider = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
   SliderPrimitive.Root,
   {
     ref,
     className: cn("dl-slider", className),
     ...props,
     children: [
-      /* @__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" })
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderPrimitive.Track, { className: "dl-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderPrimitive.Range, { className: "dl-slider__range" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderPrimitive.Thumb, { className: "dl-slider__thumb" })
     ]
   }
 ));
@@ -3626,7 +3573,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 // src/components/sonner/sonner.tsx
 var import_react2 = require("react");
 var import_sonner = require("sonner");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Toaster = ({ theme: propTheme, ...props }) => {
   const [resolvedTheme, setResolvedTheme] = (0, import_react2.useState)("system");
   (0, import_react2.useEffect)(() => {
@@ -3651,7 +3598,7 @@ var Toaster = ({ theme: propTheme, ...props }) => {
     });
     return () => observer.disconnect();
   }, [propTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_sonner.Toaster,
     {
       theme: propTheme ?? resolvedTheme,
@@ -3670,8 +3617,8 @@ var Toaster = ({ theme: propTheme, ...props }) => {
 };
 
 // src/components/status-badge/status-badge.tsx
-var React41 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var React54 = __toESM(require("react"), 1);
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var statusCategoryMap = {
   Completed: "dl-status-badge--success",
   COMPLETED: "dl-status-badge--success",
@@ -3691,18 +3638,18 @@ var statusCategoryMap = {
   DISABLED: "dl-status-badge--muted",
   IDLE: "dl-status-badge--muted"
 };
-var StatusBadge = React41.forwardRef(
+var StatusBadge = React54.forwardRef(
   ({ status, className, ...props }, ref) => {
     const normalizedStatus = status?.trim() ?? "";
     const colorClass = statusCategoryMap[normalizedStatus] ?? "dl-status-badge--muted";
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "span",
       {
         ref,
         className: cn("dl-status-badge", colorClass, className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "dl-status-badge__dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "dl-status-badge__dot" }),
           normalizedStatus
         ]
       }
@@ -3712,8 +3659,8 @@ var StatusBadge = React41.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/status-chip/status-chip.tsx
-var React42 = __toESM(require("react"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var React55 = __toESM(require("react"), 1);
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var statusToneMap = {
   active: "dl-status-chip--primary",
   running: "dl-status-chip--primary",
@@ -3735,17 +3682,17 @@ var statusToneMap = {
   error: "dl-status-chip--destructive",
   offline: "dl-status-chip--destructive"
 };
-var StatusChip = React42.forwardRef(
+var StatusChip = React55.forwardRef(
   ({ status, className, ...props }, ref) => {
     const toneClass = statusToneMap[status] ?? "dl-status-chip--muted";
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       "span",
       {
         ref,
         className: cn("dl-status-chip", toneClass, className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "dl-status-chip__dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "dl-status-chip__dot" }),
           status
         ]
       }
@@ -3755,52 +3702,52 @@ var StatusChip = React42.forwardRef(
 StatusChip.displayName = "StatusChip";
 
 // src/components/switch/switch.tsx
-var React43 = __toESM(require("react"), 1);
+var React56 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Switch = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Switch = React56.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
   SwitchPrimitives.Root,
   {
     className: cn("dl-switch", className),
     ...props,
     ref,
-    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SwitchPrimitives.Thumb, { className: "dl-switch__thumb" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SwitchPrimitives.Thumb, { className: "dl-switch__thumb" })
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table/table.tsx
-var React44 = __toESM(require("react"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var Table = React44.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 }) })
+var React57 = __toESM(require("react"), 1);
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Table = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("table", { ref, className: cn("dl-table", className), ...props }) })
 );
 Table.displayName = "Table";
-var TableHeader = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { ref, className: cn("dl-table__head", className), ...props })
+var TableHeader = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { ref, className: cn("dl-table__head", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { ref, className: cn("dl-table__body", className), ...props })
+var TableBody = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tbody", { ref, className: cn("dl-table__body", className), ...props })
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tfoot", { ref, className: cn("dl-table__foot", className), ...props })
+var TableFooter = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tfoot", { ref, className: cn("dl-table__foot", className), ...props })
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { ref, className: cn("dl-table__row", className), ...props })
+var TableRow = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { ref, className: cn("dl-table__row", className), ...props })
 );
 TableRow.displayName = "TableRow";
-var TableHead = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { ref, className: cn("dl-table__head-cell", className), ...props })
+var TableHead = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("th", { ref, className: cn("dl-table__head-cell", className), ...props })
 );
 TableHead.displayName = "TableHead";
-var TableCell = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { ref, className: cn("dl-table__cell", className), ...props })
+var TableCell = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { ref, className: cn("dl-table__cell", className), ...props })
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var TableCaption = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   "caption",
   {
     ref,
@@ -3811,11 +3758,11 @@ var TableCaption = React44.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/tabs/tabs.tsx
-var React45 = __toESM(require("react"), 1);
+var React58 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
-var TabsList = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TabsList = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   TabsPrimitive.List,
   {
     ref,
@@ -3824,7 +3771,7 @@ var TabsList = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TabsTrigger = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3833,7 +3780,7 @@ var TabsTrigger = React45.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TabsContent = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   TabsPrimitive.Content,
   {
     ref,
@@ -3844,18 +3791,18 @@ var TabsContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/textarea/textarea.tsx
-var React46 = __toESM(require("react"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var Textarea = React46.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("textarea", { className: cn("dl-textarea", className), ref, ...props })
+var React59 = __toESM(require("react"), 1);
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Textarea = React59.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("textarea", { className: cn("dl-textarea", className), ref, ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/toggle/toggle.tsx
-var React47 = __toESM(require("react"), 1);
+var React60 = __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_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority8.cva)("dl-toggle", {
   variants: {
     variant: {
@@ -3873,7 +3820,7 @@ var toggleVariants = (0, import_class_variance_authority8.cva)("dl-toggle", {
     size: "default"
   }
 });
-var Toggle = React47.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var Toggle = React60.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   TogglePrimitive.Root,
   {
     ref,
@@ -3884,26 +3831,26 @@ var Toggle = React47.forwardRef(({ className, variant, size, ...props }, ref) =>
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
 // src/components/toggle-group/toggle-group.tsx
-var React48 = __toESM(require("react"), 1);
+var React61 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var ToggleGroupContext = React48.createContext({
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var ToggleGroupContext = React61.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React48.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var ToggleGroup = React61.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("dl-toggle-group", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React48.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React48.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var ToggleGroupItem = React61.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React61.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -3922,17 +3869,17 @@ var ToggleGroupItem = React48.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/components/metric-card/metric-card.tsx
-var React49 = __toESM(require("react"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var MetricCard = React49.forwardRef(
+var React62 = __toESM(require("react"), 1);
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var MetricCard = React62.forwardRef(
   ({ label, value, note, positive, icon, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ref, className: cn("dl-metric-card", className), ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "dl-metric-card__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dl-metric-card__label", children: label }),
-        icon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dl-metric-card__icon", children: icon })
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ref, className: cn("dl-metric-card", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "dl-metric-card__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "dl-metric-card__label", children: label }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "dl-metric-card__icon", children: icon })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "dl-metric-card__value-row", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dl-metric-card__value", children: value }) }),
-      note && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "dl-metric-card__value-row", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "dl-metric-card__value", children: value }) }),
+      note && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         "div",
         {
           className: cn(
@@ -3947,18 +3894,18 @@ var MetricCard = React49.forwardRef(
   }
 );
 MetricCard.displayName = "MetricCard";
-var MetricsGrid = React49.forwardRef(
+var MetricsGrid = React62.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref, className: cn("dl-metrics-grid", className), ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ref, className: cn("dl-metrics-grid", className), ...props, children });
   }
 );
 MetricsGrid.displayName = "MetricsGrid";
 
 // src/components/copy-button/copy-button.tsx
-var React50 = __toESM(require("react"), 1);
-var import_lucide_react21 = require("lucide-react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var CopyButton = React50.forwardRef(
+var React63 = __toESM(require("react"), 1);
+var import_lucide_react24 = require("lucide-react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var CopyButton = React63.forwardRef(
   ({
     textToCopy,
     label = "Copy",
@@ -3968,7 +3915,7 @@ var CopyButton = React50.forwardRef(
     onClick,
     ...props
   }, ref) => {
-    const [isCopied, setIsCopied] = React50.useState(false);
+    const [isCopied, setIsCopied] = React63.useState(false);
     const handleCopy = async (e) => {
       onClick?.(e);
       if (e.defaultPrevented) return;
@@ -3979,7 +3926,7 @@ var CopyButton = React50.forwardRef(
       } catch {
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "button",
       {
         ref,
@@ -3992,8 +3939,8 @@ var CopyButton = React50.forwardRef(
         onClick: handleCopy,
         ...props,
         children: [
-          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react21.Check, { className: "dl-copy-button__icon" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react21.Copy, { className: "dl-copy-button__icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: isCopied ? copiedLabel : label })
+          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react24.Check, { className: "dl-copy-button__icon" }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react24.Copy, { className: "dl-copy-button__icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: isCopied ? copiedLabel : label })
         ]
       }
     );
@@ -4002,10 +3949,10 @@ var CopyButton = React50.forwardRef(
 CopyButton.displayName = "CopyButton";
 
 // src/components/secret-reveal-card/secret-reveal-card.tsx
-var React51 = __toESM(require("react"), 1);
-var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var SecretRevealCard = React51.forwardRef(
+var React64 = __toESM(require("react"), 1);
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var SecretRevealCard = React64.forwardRef(
   ({
     secret,
     warningMessage = "One-time reveal. Please copy and store this credential securely before closing.",
@@ -4013,19 +3960,281 @@ var SecretRevealCard = React51.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ref, className: cn("dl-secret-reveal", className), ...props, children: [
-      warningMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "dl-secret-reveal__warning", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react22.AlertTriangle, { className: "shrink-0 size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: warningMessage })
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref, className: cn("dl-secret-reveal", className), ...props, children: [
+      warningMessage && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "dl-secret-reveal__warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react25.AlertTriangle, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: warningMessage })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "dl-secret-reveal__code-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("code", { className: "dl-secret-reveal__code", children: secret }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CopyButton, { textToCopy: secret, label: copyLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "dl-secret-reveal__code-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("code", { className: "dl-secret-reveal__code", children: secret }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CopyButton, { textToCopy: secret, label: copyLabel })
       ] })
     ] });
   }
 );
 SecretRevealCard.displayName = "SecretRevealCard";
+
+// src/components/typography/heading.tsx
+var import_react3 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function resolveDefaultTag(size) {
+  if (size === "display") return "h1";
+  if (size === "h1" || size === "h2" || size === "h3" || size === "h4" || size === "h5" || size === "h6") {
+    return size;
+  }
+  return "h2";
+}
+var Heading = (0, import_react3.forwardRef)(
+  function Heading2({
+    as,
+    size = "h2",
+    color = "default",
+    weight,
+    align = "left",
+    truncate = false,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const Component = as ?? resolveDefaultTag(size);
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      Component,
+      {
+        ref,
+        className: cn("dl-heading", `dl-${size}`, className),
+        "data-typography-color": color !== "default" ? color : void 0,
+        "data-typography-align": align !== "left" ? align : void 0,
+        "data-typography-weight": weight,
+        "data-typography-truncate": truncate ? "true" : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+// src/components/typography/text.tsx
+var import_react4 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var Text = (0, import_react4.forwardRef)(function Text2({
+  as: Component = "p",
+  variant = "body",
+  color = "default",
+  weight,
+  align = "left",
+  truncate = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  const Element = Component;
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    Element,
+    {
+      ref,
+      className: cn("dl-text", `dl-${variant}`, className),
+      "data-typography-color": color !== "default" ? color : void 0,
+      "data-typography-align": align !== "left" ? align : void 0,
+      "data-typography-weight": weight,
+      "data-typography-truncate": truncate ? "true" : void 0,
+      ...props,
+      children
+    }
+  );
+});
+Text.displayName = "Text";
+
+// src/components/layout/box.tsx
+var React65 = __toESM(require("react"), 1);
+var import_react_slot7 = require("@radix-ui/react-slot");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var Box = React65.forwardRef(
+  ({
+    className,
+    asChild = false,
+    as,
+    p,
+    px,
+    py,
+    radius,
+    shadow,
+    border = false,
+    bg,
+    style,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot7.Slot : as || "div";
+    const inlineStyles = { ...style };
+    if (p) inlineStyles.padding = `var(--space-${p})`;
+    if (px) {
+      inlineStyles.paddingLeft = `var(--space-${px})`;
+      inlineStyles.paddingRight = `var(--space-${px})`;
+    }
+    if (py) {
+      inlineStyles.paddingTop = `var(--space-${py})`;
+      inlineStyles.paddingBottom = `var(--space-${py})`;
+    }
+    if (radius && radius !== "none") {
+      inlineStyles.borderRadius = `var(--radius-${radius}, var(--radius))`;
+    }
+    if (border) {
+      inlineStyles.border = "1px solid var(--border)";
+    }
+    if (bg) {
+      inlineStyles.backgroundColor = `var(--${bg})`;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "dl-box",
+          shadow && shadow !== "none" && `dl-shadow-${shadow}`,
+          className
+        ),
+        style: inlineStyles,
+        ...props
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/components/layout/flex.tsx
+var React66 = __toESM(require("react"), 1);
+var import_react_slot8 = require("@radix-ui/react-slot");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var Flex = React66.forwardRef(
+  ({
+    className,
+    asChild = false,
+    as,
+    direction = "row",
+    justify,
+    align,
+    wrap = false,
+    gap,
+    inline = false,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot8.Slot : as || "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "dl-flex",
+          inline && "dl-flex--inline",
+          direction && `dl-flex--${direction}`,
+          justify && `dl-flex--justify-${justify}`,
+          align && `dl-flex--align-${align}`,
+          (wrap === true || wrap === "wrap") && "dl-flex--wrap",
+          wrap === "nowrap" && "dl-flex--nowrap",
+          wrap === "reverse" && "dl-flex--wrap-reverse",
+          gap !== void 0 && `dl-gap-${gap}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+
+// src/components/layout/stack.tsx
+var React67 = __toESM(require("react"), 1);
+var import_react_slot9 = require("@radix-ui/react-slot");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var Stack = React67.forwardRef(
+  ({
+    className,
+    asChild = false,
+    as,
+    direction = "col",
+    gap = "3",
+    align = "stretch",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot9.Slot : as || "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "dl-stack",
+          `dl-stack--${direction}`,
+          `dl-flex--align-${align}`,
+          gap !== void 0 && `dl-gap-${gap}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+
+// src/components/layout/grid.tsx
+var React68 = __toESM(require("react"), 1);
+var import_react_slot10 = require("@radix-ui/react-slot");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var Grid = React68.forwardRef(
+  ({
+    className,
+    asChild = false,
+    as,
+    cols,
+    columns,
+    gap = "4",
+    inline = false,
+    style,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot10.Slot : as || "div";
+    const resolvedCols = cols ?? columns ?? 1;
+    const inlineStyles = { ...style };
+    if (typeof resolvedCols === "number") {
+      inlineStyles.gridTemplateColumns = `repeat(${resolvedCols}, minmax(0, 1fr))`;
+    } else if (typeof resolvedCols === "string") {
+      inlineStyles.gridTemplateColumns = `repeat(auto-fit, minmax(${resolvedCols}, 1fr))`;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "dl-grid",
+          inline && "dl-grid--inline",
+          gap !== void 0 && `dl-gap-${gap}`,
+          className
+        ),
+        style: inlineStyles,
+        ...props
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+
+// src/components/layout/container.tsx
+var React69 = __toESM(require("react"), 1);
+var import_react_slot11 = require("@radix-ui/react-slot");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var Container = React69.forwardRef(
+  ({ className, asChild = false, as, size = "xl", ...props }, ref) => {
+    const Comp = asChild ? import_react_slot11.Slot : as || "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn("dl-container", `dl-container--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4051,6 +4260,7 @@ SecretRevealCard.displayName = "SecretRevealCard";
   AvatarFallback,
   AvatarImage,
   Badge,
+  Box,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -4069,10 +4279,12 @@ SecretRevealCard.displayName = "SecretRevealCard";
   CardTitle,
   Carousel,
   CarouselContent,
+  CarouselContext,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
   ChartContainer,
+  ChartContext,
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
@@ -4093,6 +4305,7 @@ SecretRevealCard.displayName = "SecretRevealCard";
   CommandShortcut,
   ConfigProvider,
   ConfirmDialog,
+  Container,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -4146,6 +4359,8 @@ SecretRevealCard.displayName = "SecretRevealCard";
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EmptyState,
+  Flex,
   Form,
   FormControl,
   FormDescription,
@@ -4153,6 +4368,8 @@ SecretRevealCard.displayName = "SecretRevealCard";
   FormItem,
   FormLabel,
   FormMessage,
+  Grid,
+  Heading,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -4207,6 +4424,12 @@ SecretRevealCard.displayName = "SecretRevealCard";
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
   ScrollArea,
   ScrollBar,
   SearchableSelect,
@@ -4234,6 +4457,7 @@ SecretRevealCard.displayName = "SecretRevealCard";
   SheetTrigger,
   Sidebar,
   SidebarContent,
+  SidebarContext,
   SidebarFooter,
   SidebarGroup,
   SidebarGroupAction,
@@ -4257,9 +4481,11 @@ SecretRevealCard.displayName = "SecretRevealCard";
   SidebarTrigger,
   Skeleton,
   Slider,
+  Stack,
   StatusBadge,
   StatusChip,
   Switch,
+  THEMES,
   Table,
   TableBody,
   TableCaption,
@@ -4272,6 +4498,7 @@ SecretRevealCard.displayName = "SecretRevealCard";
   TabsContent,
   TabsList,
   TabsTrigger,
+  Text,
   Textarea,
   ThemeProvider,
   Toaster,
@@ -4286,12 +4513,16 @@ SecretRevealCard.displayName = "SecretRevealCard";
   badgeVariants,
   buttonVariants,
   cn,
+  cx,
+  getPayloadConfigFromPayload,
   labelVariants,
   navigationMenuTriggerStyle,
   sheetVariants,
+  sidebarMenuButtonVariants,
   toast,
   toggleVariants,
   useCarousel,
+  useChart,
   useConfig,
   useFormField,
   useIsMobile,