@yuva-devlab/ui 1.4.3 → 2.0.0

package/dist/index.js

@@ -2,9 +2,11 @@
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+function cx(...inputs) {
+  return clsx(inputs);
+}
 function cn(...inputs) {
-  return twMerge(clsx(inputs));
+  return clsx(inputs);
 }
 
 // src/theme-provider.tsx
@@ -461,130 +463,83 @@ function Calendar({
     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__ */ jsx9(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
+        Root: ({ className: rootClassName, rootRef, ...rootProps }) => /* @__PURE__ */ jsx9(
+          "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__ */ jsx9(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ jsx9(ChevronLeftIcon, { className: chevronClass, ...chevronProps });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ jsx9(
-              ChevronRightIcon,
-              {
-                className: cn("size-4", className2),
-                ...props2
-              }
-            );
+            return /* @__PURE__ */ jsx9(ChevronRightIcon, { className: chevronClass, ...chevronProps });
           }
-          return /* @__PURE__ */ jsx9(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ jsx9(ChevronDownIcon, { className: chevronClass, ...chevronProps });
         },
         DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx9("td", { ...props2, children: /* @__PURE__ */ jsx9("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
+        WeekNumber: ({ children, ...weekProps }) => /* @__PURE__ */ jsx9("td", { ...weekProps, children: /* @__PURE__ */ jsx9("div", { className: "dl-calendar__week-number", children }) }),
         ...components
       },
       ...props
@@ -606,16 +561,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
@@ -649,12 +605,13 @@ var CardFooter = React10.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 
-// src/components/carousel/carousel.tsx
+// src/components/carousel/carousel-context.tsx
 import * as React11 from "react";
 import useEmblaCarousel from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var CarouselContext = React11.createContext(null);
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CarouselContext = React11.createContext(
+  null
+);
 function useCarousel() {
   const context = React11.useContext(CarouselContext);
   if (!context) {
@@ -740,28 +697,31 @@ var Carousel = React11.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React11.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel();
-    return /* @__PURE__ */ jsx11("div", { ref: carouselRef, className: "dl-carousel-viewport", children: /* @__PURE__ */ jsx11(
-      "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
+import * as React12 from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var CarouselContent = React12.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx12("div", { ref: carouselRef, className: "dl-carousel-viewport", children: /* @__PURE__ */ jsx12(
+    "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__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         ref,
@@ -778,7 +738,7 @@ 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__ */ jsxs4(
     Button,
@@ -795,81 +755,78 @@ var CarouselPrevious = React11.forwardRef(({ className, variant = "outline", siz
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ jsx11(ArrowLeft, {}),
-        /* @__PURE__ */ jsx11("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ jsx12(ArrowLeft, {}),
+        /* @__PURE__ */ jsx12("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__ */ jsxs4(
-      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__ */ jsx11(ArrowRight, {}),
-          /* @__PURE__ */ jsx11("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__ */ jsxs4(
+    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__ */ jsx12(ArrowRight, {}),
+        /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
 CarouselNext.displayName = "CarouselNext";
 
-// src/components/chart/chart.tsx
-import * as React12 from "react";
-import * as RechartsPrimitive from "recharts";
-import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/components/chart/chart-context.tsx
+import * as React13 from "react";
 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__ */ jsx12(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        "data-chart": chartId,
-        ref,
-        className: cn("dl-chart-container", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx12(ChartStyle, { id: chartId, config }),
-          /* @__PURE__ */ jsx12(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
+import * as React14 from "react";
+import * as RechartsPrimitive from "recharts";
+import { jsx as jsx13, jsxs as jsxs5 } from "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__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -887,8 +844,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__ */ jsx13(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-chart": chartId,
+      ref,
+      className: cn("dl-chart-container", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx13(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx13(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+});
+ChartContainer.displayName = "Chart";
+
+// src/components/chart/chart-tooltip.tsx
+import * as React15 from "react";
+import * as RechartsPrimitive2 from "recharts";
+import { Fragment, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var ChartTooltip = RechartsPrimitive2.Tooltip;
+var ChartTooltipContent = React15.forwardRef(
   ({
     active,
     payload,
@@ -905,7 +885,7 @@ var ChartTooltipContent = React12.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React12.useMemo(() => {
+    const tooltipLabel = React15.useMemo(() => {
       if (hideLabel || !payload?.length) {
         return null;
       }
@@ -914,12 +894,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__ */ jsx12("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+        return /* @__PURE__ */ jsx14("div", { className: cn("dl-chart-tooltip__label", labelClassName), children: labelFormatter(value, payload) });
       }
       if (!value) {
         return null;
       }
-      return /* @__PURE__ */ jsx12("div", { className: cn("font-medium", labelClassName), children: value });
+      return /* @__PURE__ */ jsx14("div", { className: cn("dl-chart-tooltip__label", labelClassName), children: value });
     }, [
       label,
       labelFormatter,
@@ -933,31 +913,29 @@ var ChartTooltipContent = React12.forwardRef(
       return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return /* @__PURE__ */ jsxs5("div", { ref, className: cn("dl-chart-tooltip", className), children: [
+    return /* @__PURE__ */ jsxs6("div", { ref, className: cn("dl-chart-tooltip", className), children: [
       !nestLabel ? tooltipLabel : null,
-      /* @__PURE__ */ jsx12("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+      /* @__PURE__ */ jsx14("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__ */ jsx12(
+        return /* @__PURE__ */ jsx14(
           "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__ */ jsxs5(Fragment, { children: [
-              itemConfig?.icon ? /* @__PURE__ */ jsx12(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx12(
+            children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+              itemConfig?.icon ? /* @__PURE__ */ jsx14(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx14(
                 "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,
@@ -965,19 +943,19 @@ var ChartTooltipContent = React12.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs6(
                 "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__ */ jsxs5("div", { className: "grid gap-1.5", children: [
+                    /* @__PURE__ */ jsxs6("div", { className: "dl-chart-tooltip__grid", children: [
                       nestLabel ? tooltipLabel : null,
-                      /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                      /* @__PURE__ */ jsx14("span", { className: "dl-chart-tooltip__item-label", children: itemConfig?.label || item.name })
                     ] }),
-                    item.value && /* @__PURE__ */ jsx12("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
+                    item.value && /* @__PURE__ */ jsx14("span", { className: "dl-chart-tooltip__item-value", children: item.value.toLocaleString() })
                   ]
                 }
               )
@@ -990,78 +968,59 @@ var ChartTooltipContent = React12.forwardRef(
   }
 );
 ChartTooltipContent.displayName = "ChartTooltip";
-var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React12.forwardRef(
+
+// src/components/chart/chart-legend.tsx
+import * as React16 from "react";
+import * as RechartsPrimitive3 from "recharts";
+import { jsx as jsx15, jsxs as jsxs7 } from "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__ */ jsx12(
+    return /* @__PURE__ */ jsx15(
       "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__ */ jsxs5(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-1.5 [&>svg]:text-muted-foreground [&>svg]:size-3"
-              ),
-              children: [
-                itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx12(itemConfig.icon, {}) : /* @__PURE__ */ jsx12(
-                  "div",
-                  {
-                    className: "shrink-0 rounded-xs size-2",
-                    style: {
-                      backgroundColor: item.color
-                    }
-                  }
-                ),
-                itemConfig?.label
-              ]
-            },
-            item.value
-          );
+          return /* @__PURE__ */ jsxs7("div", { className: "dl-chart-legend__item", children: [
+            itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx15(itemConfig.icon, {}) : /* @__PURE__ */ jsx15(
+              "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
-import * as React13 from "react";
+import * as React17 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Checkbox = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn("dl-checkbox", className),
     ...props,
-    children: /* @__PURE__ */ jsx13(CheckboxPrimitive.Indicator, { className: "grid place-content-center text-current", children: /* @__PURE__ */ jsx13(Check, { style: { width: "0.75rem", height: "0.75rem" } }) })
+    children: /* @__PURE__ */ jsx16(CheckboxPrimitive.Indicator, { className: "dl-checkbox-indicator", children: /* @__PURE__ */ jsx16(Check, { className: "dl-checkbox-icon" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
@@ -1073,20 +1032,20 @@ var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
 // src/components/command/command.tsx
-import * as React15 from "react";
+import * as React19 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
 // src/components/dialog/dialog.tsx
-import * as React14 from "react";
+import * as React18 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "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__ */ jsx14(
+var DialogOverlay = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1095,9 +1054,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__ */ jsxs6(DialogPortal, { children: [
-  /* @__PURE__ */ jsx14(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs6(
+var DialogContent = React18.forwardRef(({ className, children, size = "md", ...props }, ref) => /* @__PURE__ */ jsxs8(DialogPortal, { children: [
+  /* @__PURE__ */ jsx17(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs8(
     DialogPrimitive.Content,
     {
       ref,
@@ -1109,9 +1068,9 @@ var DialogContent = React14.forwardRef(({ className, children, size = "md", ...p
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs6(DialogPrimitive.Close, { className: "dl-dialog-close", children: [
-          /* @__PURE__ */ jsx14(X, {}),
-          /* @__PURE__ */ jsx14("span", { className: "dl-dialog-sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs8(DialogPrimitive.Close, { className: "dl-dialog-close", children: [
+          /* @__PURE__ */ jsx17(X, {}),
+          /* @__PURE__ */ jsx17("span", { className: "dl-dialog-sr-only", children: "Close" })
         ] })
       ]
     }
@@ -1121,19 +1080,19 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx14("div", { className: cn("dl-dialog__header", className), ...props });
+}) => /* @__PURE__ */ jsx17("div", { className: cn("dl-dialog__header", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 var DialogBody = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx14("div", { className: cn("dl-dialog__body", className), ...props });
+}) => /* @__PURE__ */ jsx17("div", { className: cn("dl-dialog__body", className), ...props });
 DialogBody.displayName = "DialogBody";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx14("div", { className: cn("dl-dialog__footer", className), ...props });
+}) => /* @__PURE__ */ jsx17("div", { className: cn("dl-dialog__footer", className), ...props });
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var DialogTitle = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive.Title,
   {
     ref,
@@ -1142,7 +1101,7 @@ var DialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var DialogDescription = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive.Description,
   {
     ref,
@@ -1153,8 +1112,8 @@ var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/command/command.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
-var Command = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var Command = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   CommandPrimitive,
   {
     ref,
@@ -1164,11 +1123,11 @@ var Command = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx15(Dialog, { ...props, children: /* @__PURE__ */ jsx15(DialogContent, { className: "dl-command-dialog-content", children: /* @__PURE__ */ jsx15(Command, { children }) }) });
+  return /* @__PURE__ */ jsx18(Dialog, { ...props, children: /* @__PURE__ */ jsx18(DialogContent, { className: "dl-command-dialog-content", children: /* @__PURE__ */ jsx18(Command, { children }) }) });
 };
-var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs7("div", { className: "dl-command-input-wrapper", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx15(Search, { className: "dl-command-input-icon" }),
-  /* @__PURE__ */ jsx15(
+var CommandInput = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9("div", { className: "dl-command-input-wrapper", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx18(Search, { className: "dl-command-input-icon" }),
+  /* @__PURE__ */ jsx18(
     CommandPrimitive.Input,
     {
       ref,
@@ -1178,7 +1137,7 @@ var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var CommandList = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   CommandPrimitive.List,
   {
     ref,
@@ -1187,9 +1146,9 @@ var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React15.forwardRef((props, ref) => /* @__PURE__ */ jsx15(CommandPrimitive.Empty, { ref, className: "dl-command-empty", ...props }));
+var CommandEmpty = React19.forwardRef((props, ref) => /* @__PURE__ */ jsx18(CommandPrimitive.Empty, { ref, className: "dl-command-empty", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var CommandGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   CommandPrimitive.Group,
   {
     ref,
@@ -1198,7 +1157,7 @@ var CommandGroup = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var CommandSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   CommandPrimitive.Separator,
   {
     ref,
@@ -1207,7 +1166,7 @@ var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var CommandItem = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   CommandPrimitive.Item,
   {
     ref,
@@ -1217,12 +1176,12 @@ var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx15("span", { className: cn("dl-command-shortcut", className), ...props });
+  return /* @__PURE__ */ jsx18("span", { className: cn("dl-command-shortcut", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/confirm-dialog/confirm-dialog.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -1233,14 +1192,14 @@ function ConfirmDialog({
   cancelText = "Cancel",
   destructive = false
 }) {
-  return /* @__PURE__ */ jsx16(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs8(AlertDialogContent, { children: [
-    /* @__PURE__ */ jsxs8(AlertDialogHeader, { children: [
-      /* @__PURE__ */ jsx16(AlertDialogTitle, { children: title }),
-      /* @__PURE__ */ jsx16(AlertDialogDescription, { children: description })
+  return /* @__PURE__ */ jsx19(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx19(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ jsx19(AlertDialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsxs8(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsx16(AlertDialogCancel, { children: cancelText }),
-      /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx19(AlertDialogCancel, { children: cancelText }),
+      /* @__PURE__ */ jsx19(
         AlertDialogAction,
         {
           onClick: onConfirm,
@@ -1252,35 +1211,35 @@ function ConfirmDialog({
   ] }) });
 }
 
-// src/components/context-menu/context-menu.tsx
-import * as React16 from "react";
+// src/components/context-menu/context-menu-primitives.tsx
+import * as React20 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check as Check2, ChevronRight as ChevronRight2, Circle } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs11 } from "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__ */ jsxs9(
+var ContextMenuSubTrigger = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   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__ */ jsx17(ChevronRight2, { className: "ml-auto size-4" })
+      /* @__PURE__ */ jsx20(ChevronRight2, { className: "dl-menu-item__chevron" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuSubContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -1289,7 +1248,7 @@ var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+var ContextMenuContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx20(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -1298,80 +1257,86 @@ var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
-  ContextMenuPrimitive.Item,
+
+// src/components/context-menu/context-menu-items.tsx
+import * as React21 from "react";
+import * as ContextMenuPrimitive2 from "@radix-ui/react-context-menu";
+import { Check as Check2, Circle } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var ContextMenuItem = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+  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__ */ jsxs9(
-  ContextMenuPrimitive.CheckboxItem,
+ContextMenuItem.displayName = ContextMenuPrimitive2.Item.displayName;
+var ContextMenuCheckboxItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
+  ContextMenuPrimitive2.CheckboxItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-checkbox-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ jsx17(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(Check2, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx21("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ jsx21(ContextMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx21(Check2, { className: "dl-menu-item__icon" }) }) }),
       children
     ]
   }
 ));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
-  ContextMenuPrimitive.RadioItem,
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive2.CheckboxItem.displayName;
+var ContextMenuRadioItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
+  ContextMenuPrimitive2.RadioItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ jsx17(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(Circle, { className: "fill-current size-2" }) }) }),
+      /* @__PURE__ */ jsx21("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ jsx21(ContextMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx21(Circle, { className: "dl-menu-item__radio-dot" }) }) }),
       children
     ]
   }
 ));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
-  ContextMenuPrimitive.Label,
+ContextMenuRadioItem.displayName = ContextMenuPrimitive2.RadioItem.displayName;
+var ContextMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+  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__ */ jsx17(
-  ContextMenuPrimitive.Separator,
+ContextMenuLabel.displayName = ContextMenuPrimitive2.Label.displayName;
+var ContextMenuSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+  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__ */ jsx17("span", { className: cn("dl-menu-shortcut", className), ...props });
+  return /* @__PURE__ */ jsx21("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // src/components/date-picker/date-picker.tsx
-import * as React18 from "react";
+import * as React23 from "react";
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 
 // src/components/popover/popover.tsx
-import * as React17 from "react";
+import * as React22 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "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__ */ jsx18(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx18(
+var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx22(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1384,7 +1349,7 @@ var PopoverContent = React17.forwardRef(({ className, align = "center", sideOffs
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/date-picker/date-picker.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function DatePicker({
   value,
   onChange,
@@ -1392,7 +1357,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) {
@@ -1404,8 +1369,8 @@ function DatePicker({
     const day = parseInt(parts[2], 10);
     return new Date(year, month, day, 12, 0, 0);
   }, [value]);
-  return /* @__PURE__ */ jsxs10(Popover, { children: [
-    /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs13(Popover, { children: [
+    /* @__PURE__ */ jsx23(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13(
       Button,
       {
         variant: "outline",
@@ -1417,31 +1382,31 @@ function DatePicker({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx19(CalendarIcon, { className: "dl-date-picker-icon" }),
-          date && !isNaN(date.getTime()) ? format(date, "PPP") : /* @__PURE__ */ jsx19("span", { children: placeholder })
+          /* @__PURE__ */ jsx23(CalendarIcon, { className: "dl-date-picker-icon" }),
+          date && !isNaN(date.getTime()) ? format(date, "PPP") : /* @__PURE__ */ jsx23("span", { children: placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx19(PopoverContent, { className: "dl-date-picker-content", align: "start", children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx23(PopoverContent, { className: "dl-date-picker-content", align: "start", children: /* @__PURE__ */ jsx23(
       Calendar,
       {
         mode: "single",
         selected: date,
         onSelect: (selectedDate) => onChange?.(selectedDate ? format(selectedDate, "yyyy-MM-dd") : ""),
-        initialFocus: true
+        autoFocus: true
       }
     ) })
   ] });
 }
 
 // src/components/drawer/drawer.tsx
-import * as React19 from "react";
+import * as React24 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var Drawer = ({
   shouldScaleBackground = true,
   ...props
-}) => /* @__PURE__ */ jsx20(
+}) => /* @__PURE__ */ jsx24(
   DrawerPrimitive.Root,
   {
     shouldScaleBackground,
@@ -1452,7 +1417,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = DrawerPrimitive.Trigger;
 var DrawerPortal = DrawerPrimitive.Portal;
 var DrawerClose = DrawerPrimitive.Close;
-var DrawerOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DrawerOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DrawerPrimitive.Overlay,
   {
     ref,
@@ -1461,16 +1426,16 @@ var DrawerOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-var DrawerContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx20(DrawerOverlay, {}),
-  /* @__PURE__ */ jsxs11(
+var DrawerContent = React24.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx24(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs14(
     DrawerPrimitive.Content,
     {
       ref,
       className: cn("dl-drawer-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx20("div", { className: "dl-drawer-handle" }),
+        /* @__PURE__ */ jsx24("div", { className: "dl-drawer-handle" }),
         children
       ]
     }
@@ -1480,14 +1445,14 @@ DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx20("div", { className: cn("dl-drawer-header", className), ...props });
+}) => /* @__PURE__ */ jsx24("div", { className: cn("dl-drawer-header", className), ...props });
 DrawerHeader.displayName = "DrawerHeader";
 var DrawerFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx20("div", { className: cn("dl-drawer-footer", className), ...props });
+}) => /* @__PURE__ */ jsx24("div", { className: cn("dl-drawer-footer", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DrawerTitle = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DrawerPrimitive.Title,
   {
     ref,
@@ -1496,7 +1461,7 @@ var DrawerTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-var DrawerDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DrawerDescription = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DrawerPrimitive.Description,
   {
     ref,
@@ -1506,40 +1471,35 @@ var DrawerDescription = React19.forwardRef(({ className, ...props }, ref) => /*
 ));
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
-// src/components/dropdown-menu/dropdown-menu.tsx
-import * as React20 from "react";
+// src/components/dropdown-menu/dropdown-menu-primitives.tsx
+import * as React25 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check as Check3, ChevronRight as ChevronRight3, Circle as Circle2 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsx as jsx25, jsxs as jsxs15 } from "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__ */ jsxs12(
+var DropdownMenuSubTrigger = React25.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   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__ */ jsx21(
-        ChevronRight3,
-        {
-          style: { marginLeft: "auto", width: "1rem", height: "1rem" }
-        }
-      )
+      /* @__PURE__ */ jsx25(ChevronRight3, { className: "dl-menu-item__chevron" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DropdownMenuSubContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -1548,7 +1508,7 @@ var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
+var DropdownMenuContent = React25.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1558,74 +1518,91 @@ var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
-  DropdownMenuPrimitive.Item,
+
+// src/components/dropdown-menu/dropdown-menu-items.tsx
+import * as React26 from "react";
+import * as DropdownMenuPrimitive2 from "@radix-ui/react-dropdown-menu";
+import { Check as Check3, Circle as Circle2 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+var DropdownMenuItem = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
+  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__ */ jsxs12(
-  DropdownMenuPrimitive.CheckboxItem,
+DropdownMenuItem.displayName = DropdownMenuPrimitive2.Item.displayName;
+var DropdownMenuCheckboxItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+  DropdownMenuPrimitive2.CheckboxItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-checkbox-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx21("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(Check3, { style: { width: "1rem", height: "1rem" } }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx26(Check3, { className: "dl-menu-item__icon" }) }) }),
       children
     ]
   }
 ));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
-  DropdownMenuPrimitive.RadioItem,
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive2.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+  DropdownMenuPrimitive2.RadioItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx21("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(
-        Circle2,
-        {
-          style: { width: "0.5rem", height: "0.5rem", fill: "currentColor" }
-        }
-      ) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx26(Circle2, { className: "dl-menu-item__radio-dot" }) }) }),
       children
     ]
   }
 ));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
-  DropdownMenuPrimitive.Label,
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive2.RadioItem.displayName;
+var DropdownMenuLabel = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
+  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__ */ jsx21(
-  DropdownMenuPrimitive.Separator,
+DropdownMenuLabel.displayName = DropdownMenuPrimitive2.Label.displayName;
+var DropdownMenuSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  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__ */ jsx21("span", { className: cn("dl-menu-shortcut", className), ...props });
+  return /* @__PURE__ */ jsx26("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
+// src/components/empty-state/empty-state.tsx
+import * as React27 from "react";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var EmptyState = React27.forwardRef(
+  ({ title, description, icon, action, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs17("div", { ref, className: cn("dl-empty-state", className), ...props, children: [
+      icon && /* @__PURE__ */ jsx27("div", { className: "dl-empty-state__icon-box", children: icon }),
+      /* @__PURE__ */ jsx27("h3", { className: "dl-empty-state__title", children: title }),
+      description && /* @__PURE__ */ jsx27("p", { className: "dl-empty-state__description", children: description }),
+      children,
+      action && /* @__PURE__ */ jsx27("div", { className: "dl-empty-state__actions", children: action })
+    ] });
+  }
+);
+EmptyState.displayName = "EmptyState";
+
 // src/components/form/form.tsx
-import * as React22 from "react";
+import * as React29 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import {
   Controller,
@@ -1634,12 +1611,12 @@ import {
 } from "react-hook-form";
 
 // src/components/label/label.tsx
-import * as React21 from "react";
+import * as React28 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var labelVariants = cva4("dl-label");
-var Label3 = React21.forwardRef(({ className, children, required = false, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var Label3 = React28.forwardRef(({ className, children, required = false, ...props }, ref) => /* @__PURE__ */ jsxs18(
   LabelPrimitive.Root,
   {
     ref,
@@ -1647,26 +1624,26 @@ var Label3 = React21.forwardRef(({ className, children, required = false, ...pro
     ...props,
     children: [
       children,
-      required && /* @__PURE__ */ jsx22("span", { className: "dl-label-required text-destructive ml-0.5", children: "*" })
+      required && /* @__PURE__ */ jsx28("span", { className: "dl-label-required", children: "*" })
     ]
   }
 ));
 Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/form/form.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Form = FormProvider;
-var FormFieldContext = React22.createContext(
+var FormFieldContext = React29.createContext(
   null
 );
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx23(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx23(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx29(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx29(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 } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -1685,15 +1662,15 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React22.createContext(null);
-var FormItem = React22.forwardRef(({ className, ...props }, ref) => {
-  const id = React22.useId();
-  return /* @__PURE__ */ jsx23(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx23("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__ */ jsx29(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx29("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__ */ jsx23(
+  return /* @__PURE__ */ jsx29(
     Label3,
     {
       ref,
@@ -1704,9 +1681,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__ */ jsx23(
+  return /* @__PURE__ */ jsx29(
     Slot3,
     {
       ref,
@@ -1718,9 +1695,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__ */ jsx23(
+  return /* @__PURE__ */ jsx29(
     "p",
     {
       ref,
@@ -1731,13 +1708,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__ */ jsx23(
+  return /* @__PURE__ */ jsx29(
     "p",
     {
       ref,
@@ -1751,12 +1728,12 @@ var FormMessage = React22.forwardRef(({ className, children, ...props }, ref) =>
 FormMessage.displayName = "FormMessage";
 
 // src/components/hover-card/hover-card.tsx
-import * as React23 from "react";
+import * as React30 from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React23.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(
+var HoverCardContent = React30.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx30(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -1769,11 +1746,11 @@ var HoverCardContent = React23.forwardRef(({ className, align = "center", sideOf
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/input/input.tsx
-import * as React24 from "react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var Input = React24.forwardRef(
+import * as React31 from "react";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+var Input = React31.forwardRef(
   ({ className, type, startIcon, endIcon, ...props }, ref) => {
-    const inputEl = /* @__PURE__ */ jsx25(
+    const inputEl = /* @__PURE__ */ jsx31(
       "input",
       {
         type,
@@ -1790,21 +1767,21 @@ var Input = React24.forwardRef(
     if (!startIcon && !endIcon) {
       return inputEl;
     }
-    return /* @__PURE__ */ jsxs14("div", { className: "dl-input-wrapper", children: [
-      startIcon && /* @__PURE__ */ jsx25("span", { className: "dl-input-icon dl-input-icon--start", children: startIcon }),
+    return /* @__PURE__ */ jsxs19("div", { className: "dl-input-wrapper", children: [
+      startIcon && /* @__PURE__ */ jsx31("span", { className: "dl-input-icon dl-input-icon--start", children: startIcon }),
       inputEl,
-      endIcon && /* @__PURE__ */ jsx25("span", { className: "dl-input-icon dl-input-icon--end", children: endIcon })
+      endIcon && /* @__PURE__ */ jsx31("span", { className: "dl-input-icon dl-input-icon--end", children: endIcon })
     ] });
   }
 );
 Input.displayName = "Input";
 
 // src/components/input-otp/input-otp.tsx
-import * as React25 from "react";
+import * as React32 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
-var InputOTP = React25.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx26(
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+var InputOTP = React32.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx32(
   OTPInput,
   {
     ref,
@@ -1814,16 +1791,16 @@ var InputOTP = React25.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("dl-input-otp-group", className), ...props }));
+var InputOTPGroup = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32("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(OTPInputContext);
+var InputOTPSlot = React32.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React32.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {
     char: null,
     hasFakeCaret: false,
     isActive: false
   };
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       ref,
@@ -1835,23 +1812,23 @@ var InputOTPSlot = React25.forwardRef(({ index, className, ...props }, ref) => {
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx26("div", { className: "dl-input-otp-caret", children: /* @__PURE__ */ jsx26("div", { className: "dl-input-otp-caret__line" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx32("div", { className: "dl-input-otp-caret", children: /* @__PURE__ */ jsx32("div", { className: "dl-input-otp-caret__line" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React25.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx26(Minus, {}) }));
+var InputOTPSeparator = React32.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx32("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx32(Minus, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/skeleton/skeleton.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx27("div", { className: cn("dl-skeleton", className), ...props });
+  return /* @__PURE__ */ jsx33("div", { className: cn("dl-skeleton", className), ...props });
 }
 
 // src/components/loading-state/loading-state.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 function LoadingState({
   rows = 3,
   message,
@@ -1859,8 +1836,8 @@ function LoadingState({
   ...props
 }) {
   if (message) {
-    return /* @__PURE__ */ jsxs16("div", { className: cn("dl-loading", className), ...props, children: [
-      /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs21("div", { className: cn("dl-loading", className), ...props, children: [
+      /* @__PURE__ */ jsx34(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -1872,49 +1849,39 @@ function LoadingState({
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx28("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+          children: /* @__PURE__ */ jsx34("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
         }
       ),
-      /* @__PURE__ */ jsx28("span", { children: message })
+      /* @__PURE__ */ jsx34("span", { children: message })
     ] });
   }
-  return /* @__PURE__ */ jsxs16("div", { className: cn("dl-loading-skeleton", className), ...props, children: [
-    /* @__PURE__ */ jsx28(Skeleton, { style: { height: "2rem", width: "33.333%" } }),
-    /* @__PURE__ */ jsx28("div", { className: "dl-loading-skeleton__list", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx28(
-      Skeleton,
-      {
-        style: {
-          height: "4rem",
-          width: "100%",
-          borderRadius: "var(--radius-lg, 0.75rem)"
-        }
-      },
-      i
-    )) })
+  return /* @__PURE__ */ jsxs21("div", { className: cn("dl-loading-skeleton", className), ...props, children: [
+    /* @__PURE__ */ jsx34(Skeleton, { className: "dl-loading-skeleton__header" }),
+    /* @__PURE__ */ jsx34("div", { className: "dl-loading-skeleton__list", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx34(Skeleton, { className: "dl-loading-skeleton__row" }, i)) })
   ] });
 }
 
-// src/components/menubar/menubar.tsx
-import * as React26 from "react";
+// src/components/menubar/menubar-primitives.tsx
+import * as React33 from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Check as Check4, ChevronRight as ChevronRight4, Circle as Circle3 } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { ChevronRight as ChevronRight4 } from "lucide-react";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function MenubarMenu(props) {
-  return /* @__PURE__ */ jsx29(MenubarPrimitive.Menu, { ...props });
+  return /* @__PURE__ */ jsx35(MenubarPrimitive.Menu, { ...props });
 }
 function MenubarGroup(props) {
-  return /* @__PURE__ */ jsx29(MenubarPrimitive.Group, { ...props });
+  return /* @__PURE__ */ jsx35(MenubarPrimitive.Group, { ...props });
 }
 function MenubarPortal(props) {
-  return /* @__PURE__ */ jsx29(MenubarPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ jsx35(MenubarPrimitive.Portal, { ...props });
 }
 function MenubarRadioGroup(props) {
-  return /* @__PURE__ */ jsx29(MenubarPrimitive.RadioGroup, { ...props });
+  return /* @__PURE__ */ jsx35(MenubarPrimitive.RadioGroup, { ...props });
 }
 function MenubarSub(props) {
-  return /* @__PURE__ */ jsx29(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
+  return /* @__PURE__ */ jsx35(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
 }
-var Menubar = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var Menubar = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   MenubarPrimitive.Root,
   {
     ref,
@@ -1923,7 +1890,7 @@ var Menubar = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var MenubarTrigger = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -1932,24 +1899,24 @@ var MenubarTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React26.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
+var MenubarSubTrigger = React33.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
   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__ */ jsx29(ChevronRight4, { className: "ml-auto size-4" })
+      /* @__PURE__ */ jsx35(ChevronRight4, { className: "dl-menu-item__chevron" })
     ]
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var MenubarSubContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   MenubarPrimitive.SubContent,
   {
     ref,
@@ -1958,8 +1925,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__ */ jsx29(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx29(
+var MenubarContent = React33.forwardRef(
+  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx35(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx35(
     MenubarPrimitive.Content,
     {
       ref,
@@ -1972,72 +1939,81 @@ var MenubarContent = React26.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx29(
-  MenubarPrimitive.Item,
+
+// src/components/menubar/menubar-items.tsx
+import * as React34 from "react";
+import * as MenubarPrimitive2 from "@radix-ui/react-menubar";
+import { Check as Check4, Circle as Circle3 } from "lucide-react";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+var MenubarItem = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx36(
+  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__ */ jsxs17(
-  MenubarPrimitive.CheckboxItem,
+MenubarItem.displayName = MenubarPrimitive2.Item.displayName;
+var MenubarCheckboxItem = React34.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs23(
+  MenubarPrimitive2.CheckboxItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-checkbox-item", className),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx29("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ jsx29(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(Check4, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx36("span", { className: "dl-menu-checkbox-item__indicator", children: /* @__PURE__ */ jsx36(MenubarPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx36(Check4, { className: "dl-menu-item__icon" }) }) }),
       children
     ]
   }
 ));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
-  MenubarPrimitive.RadioItem,
+MenubarCheckboxItem.displayName = MenubarPrimitive2.CheckboxItem.displayName;
+var MenubarRadioItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+  MenubarPrimitive2.RadioItem,
   {
     ref,
     className: cn("dl-menu-item dl-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx29("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ jsx29(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(Circle3, { className: "fill-current size-2" }) }) }),
+      /* @__PURE__ */ jsx36("span", { className: "dl-menu-radio-item__indicator", children: /* @__PURE__ */ jsx36(MenubarPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx36(Circle3, { className: "dl-menu-item__radio-dot" }) }) }),
       children
     ]
   }
 ));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx29(
-  MenubarPrimitive.Label,
+MenubarRadioItem.displayName = MenubarPrimitive2.RadioItem.displayName;
+var MenubarLabel = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx36(
+  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__ */ jsx29(
-  MenubarPrimitive.Separator,
+MenubarLabel.displayName = MenubarPrimitive2.Label.displayName;
+var MenubarSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+  MenubarPrimitive2.Separator,
   {
     ref,
     className: cn("dl-menu-separator", className),
     ...props
   }
 ));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-var MenubarShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx29("span", { className: cn("dl-menu-shortcut", className), ...props });
+MenubarSeparator.displayName = MenubarPrimitive2.Separator.displayName;
+var MenubarShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx36("span", { className: cn("dl-menu-shortcut", className), ...props });
 };
 MenubarShortcut.displayName = "MenubarShortcut";
 
 // src/components/navigation-menu/navigation-menu.tsx
-import * as React27 from "react";
+import * as React35 from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva as cva5 } from "class-variance-authority";
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
-var NavigationMenu = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs18(
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+var NavigationMenu = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -2045,12 +2021,12 @@ var NavigationMenu = React27.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx30(NavigationMenuViewport, {})
+      /* @__PURE__ */ jsx37(NavigationMenuViewport, {})
     ]
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var NavigationMenuList = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -2061,7 +2037,7 @@ var NavigationMenuList = React27.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva5("dl-navigation-menu-trigger");
-var NavigationMenuTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs18(
+var NavigationMenuTrigger = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
@@ -2070,12 +2046,12 @@ var NavigationMenuTrigger = React27.forwardRef(({ className, children, ...props
     children: [
       children,
       " ",
-      /* @__PURE__ */ jsx30(ChevronDown2, { className: "dl-navigation-menu-chevron", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx37(ChevronDown2, { className: "dl-navigation-menu-chevron", "aria-hidden": "true" })
     ]
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var NavigationMenuContent = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -2085,7 +2061,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__ */ jsx30("div", { className: "dl-navigation-menu-viewport-wrapper", children: /* @__PURE__ */ jsx30(
+var NavigationMenuViewport = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37("div", { className: "dl-navigation-menu-viewport-wrapper", children: /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn("dl-navigation-menu-viewport", className),
@@ -2094,22 +2070,22 @@ var NavigationMenuViewport = React27.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var NavigationMenuIndicator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
     className: cn("dl-navigation-menu-indicator", className),
     ...props,
-    children: /* @__PURE__ */ jsx30("div", { className: "dl-navigation-menu-indicator__arrow" })
+    children: /* @__PURE__ */ jsx37("div", { className: "dl-navigation-menu-indicator__arrow" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 // src/components/pagination/pagination.tsx
-import * as React28 from "react";
+import * as React36 from "react";
 import { ChevronLeft, ChevronRight as ChevronRight5, MoreHorizontal as MoreHorizontal2 } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
-var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx31(
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx38(
   "nav",
   {
     role: "navigation",
@@ -2119,10 +2095,10 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx31(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31("ul", { ref, className: cn("dl-pagination-content", className), ...props }));
+var PaginationContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38("ul", { ref, className: cn("dl-pagination-content", className), ...props }));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React28.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx31("li", { ref, className: cn("dl-pagination-item", className), ...props })
+var PaginationItem = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx38("li", { ref, className: cn("dl-pagination-item", className), ...props })
 );
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
@@ -2130,7 +2106,7 @@ var PaginationLink = ({
   isActive,
   size = "icon",
   ...props
-}) => /* @__PURE__ */ jsx31(
+}) => /* @__PURE__ */ jsx38(
   "a",
   {
     "aria-current": isActive ? "page" : void 0,
@@ -2148,7 +2124,7 @@ PaginationLink.displayName = "PaginationLink";
 var PaginationPrevious = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxs19(
+}) => /* @__PURE__ */ jsxs25(
   PaginationLink,
   {
     "aria-label": "Go to previous page",
@@ -2156,13 +2132,13 @@ var PaginationPrevious = ({
     className: cn("dl-pagination-prev", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx31(ChevronLeft, { className: "size-4" }),
-      /* @__PURE__ */ jsx31("span", { children: "Previous" })
+      /* @__PURE__ */ jsx38(ChevronLeft, { className: "dl-pagination-icon" }),
+      /* @__PURE__ */ jsx38("span", { children: "Previous" })
     ]
   }
 );
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs19(
+var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs25(
   PaginationLink,
   {
     "aria-label": "Go to next page",
@@ -2170,8 +2146,8 @@ var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs19(
     className: cn("dl-pagination-next", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx31("span", { children: "Next" }),
-      /* @__PURE__ */ jsx31(ChevronRight5, { className: "size-4" })
+      /* @__PURE__ */ jsx38("span", { children: "Next" }),
+      /* @__PURE__ */ jsx38(ChevronRight5, { className: "dl-pagination-icon" })
     ]
   }
 );
@@ -2179,29 +2155,29 @@ PaginationNext.displayName = "PaginationNext";
 var PaginationEllipsis = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxs19(
+}) => /* @__PURE__ */ jsxs25(
   "span",
   {
     "aria-hidden": true,
     className: cn("dl-pagination-ellipsis", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx31(MoreHorizontal2, {}),
-      /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "More pages" })
+      /* @__PURE__ */ jsx38(MoreHorizontal2, {}),
+      /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "More pages" })
     ]
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/panel/panel.tsx
-import * as React29 from "react";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
-var Panel = React29.forwardRef(
+import * as React37 from "react";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+var Panel = React37.forwardRef(
   ({ title, meta, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs20("section", { ref, className: cn("dl-panel", className), ...props, children: [
-      title ? /* @__PURE__ */ jsxs20("div", { className: "dl-panel__header", children: [
-        /* @__PURE__ */ jsx32("h2", { className: "dl-panel__title", children: title }),
-        meta ? /* @__PURE__ */ jsx32("div", { className: "dl-panel__meta", children: meta }) : null
+    return /* @__PURE__ */ jsxs26("section", { ref, className: cn("dl-panel", className), ...props, children: [
+      title ? /* @__PURE__ */ jsxs26("div", { className: "dl-panel__header", children: [
+        /* @__PURE__ */ jsx39("h2", { className: "dl-panel__title", children: title }),
+        meta ? /* @__PURE__ */ jsx39("div", { className: "dl-panel__meta", children: meta }) : null
       ] }) : null,
       children
     ] });
@@ -2210,16 +2186,16 @@ var Panel = React29.forwardRef(
 Panel.displayName = "Panel";
 
 // src/components/progress/progress.tsx
-import * as React30 from "react";
+import * as React38 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Progress = React30.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx33(
+import { jsx as jsx40 } from "react/jsx-runtime";
+var Progress = React38.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx40(
   ProgressPrimitive.Root,
   {
     ref,
     className: cn("dl-progress", className),
     ...props,
-    children: /* @__PURE__ */ jsx33(
+    children: /* @__PURE__ */ jsx40(
       ProgressPrimitive.Indicator,
       {
         className: "dl-progress__indicator",
@@ -2231,12 +2207,12 @@ var Progress = React30.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/radio-group/radio-group.tsx
-import * as React31 from "react";
+import * as React39 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle as Circle4 } from "lucide-react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var RadioGroup4 = React31.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx34(
+import { jsx as jsx41 } from "react/jsx-runtime";
+var RadioGroup4 = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx41(
     RadioGroupPrimitive.Root,
     {
       className: cn("dl-radio-group", className),
@@ -2246,14 +2222,14 @@ var RadioGroup4 = React31.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup4.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React31.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx34(
+var RadioGroupItem = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx41(
     RadioGroupPrimitive.Item,
     {
       ref,
       className: cn("dl-radio-item", className),
       ...props,
-      children: /* @__PURE__ */ jsx34(RadioGroupPrimitive.Indicator, { className: "dl-radio-item__indicator", children: /* @__PURE__ */ jsx34(Circle4, { "aria-hidden": "true" }) })
+      children: /* @__PURE__ */ jsx41(RadioGroupPrimitive.Indicator, { className: "dl-radio-item__indicator", children: /* @__PURE__ */ jsx41(Circle4, { "aria-hidden": "true" }) })
     }
   );
 });
@@ -2262,72 +2238,67 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 // src/components/resizable/resizable.tsx
 import { GripVertical } from "lucide-react";
 import { Group as Group4, Panel as Panel2, Separator as Separator4 } from "react-resizable-panels";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var ResizablePanelGroup = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx35(Group4, { className: cn("dl-resizable-group", className), ...props });
+}) => /* @__PURE__ */ jsx42(Group4, { className: cn("dl-resizable-group", className), ...props });
 var ResizablePanel = Panel2;
 var ResizableHandle = ({
   withHandle,
   className,
   ...props
-}) => /* @__PURE__ */ jsx35(Separator4, { className: cn("dl-resizable-handle", className), ...props, children: withHandle && /* @__PURE__ */ jsx35("div", { className: "dl-resizable-grip", children: /* @__PURE__ */ jsx35(GripVertical, {}) }) });
+}) => /* @__PURE__ */ jsx42(Separator4, { className: cn("dl-resizable-handle", className), ...props, children: withHandle && /* @__PURE__ */ jsx42("div", { className: "dl-resizable-grip", children: /* @__PURE__ */ jsx42(GripVertical, {}) }) });
 
 // src/components/scroll-area/scroll-area.tsx
-import * as React32 from "react";
+import * as React40 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
-var ScrollArea = React32.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+var ScrollArea = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs27(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("dl-scroll-area", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx36(ScrollAreaPrimitive.Viewport, { className: "dl-scroll-area__viewport", children }),
-      /* @__PURE__ */ jsx36(ScrollBar, {}),
-      /* @__PURE__ */ jsx36(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Viewport, { className: "dl-scroll-area__viewport", children }),
+      /* @__PURE__ */ jsx43(ScrollBar, {}),
+      /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React32.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx36(
+var ScrollBar = React40.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx43(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation,
     className: cn("dl-scroll-area__bar", className),
     ...props,
-    children: /* @__PURE__ */ jsx36(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dl-scroll-area__thumb" })
+    children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dl-scroll-area__thumb" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/searchable-select/searchable-select.tsx
-import * as React33 from "react";
 import { Search as Search2, Plus, Check as Check5, ChevronDown as ChevronDown3 } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
-function SearchableSelect({
+
+// src/components/searchable-select/use-searchable-select.ts
+import * as React41 from "react";
+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(
@@ -2347,7 +2318,7 @@ function SearchableSelect({
     setSearch(q);
     setHighlightedIndex(0);
   };
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (open && listRef.current) {
       const activeEl = listRef.current.querySelector(
         "[data-highlighted='true']"
@@ -2357,7 +2328,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(
@@ -2414,38 +2385,84 @@ function SearchableSelect({
         break;
     }
   };
-  let currentIndex = 0;
-  return /* @__PURE__ */ jsxs22(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx37(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
-      Button,
-      {
-        id,
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        disabled,
-        onKeyDown: handleKeyDown,
-        className: cn(
-          "dl-searchable-select-trigger",
-          !selectedOption && "dl-searchable-select-trigger--placeholder",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx37("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-          /* @__PURE__ */ jsx37(ChevronDown3, { className: "dl-select-icon" })
+  return {
+    open,
+    search,
+    highlightedIndex,
+    setHighlightedIndex,
+    listRef,
+    selectedOption,
+    filteredOptions,
+    groupedOptions,
+    handleOpenChange,
+    handleSearchChange,
+    handleSelect,
+    handleAddNew,
+    handleKeyDown
+  };
+}
+
+// src/components/searchable-select/searchable-select.tsx
+import { jsx as jsx44, jsxs as jsxs28 } from "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__ */ jsxs28(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx44(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
+      Button,
+      {
+        id,
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        disabled,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "dl-searchable-select-trigger",
+          !selectedOption && "dl-searchable-select-trigger--placeholder",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx44("span", { className: "dl-searchable-select-truncate", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsx44(ChevronDown3, { className: "dl-select-icon" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs28(
       PopoverContent,
       {
         align: "start",
         className: "dl-searchable-select-content",
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "dl-searchable-select-search", children: [
-            /* @__PURE__ */ jsx37(Search2, { className: "dl-searchable-select-search-icon" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs28("div", { className: "dl-searchable-select-search", children: [
+            /* @__PURE__ */ jsx44(Search2, { className: "dl-searchable-select-search-icon" }),
+            /* @__PURE__ */ jsx44(
               Input,
               {
                 placeholder: searchPlaceholder,
@@ -2456,19 +2473,19 @@ function SearchableSelect({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx44(
             "div",
             {
               ref: listRef,
               onWheel: (e) => e.stopPropagation(),
               className: "dl-searchable-select-list",
-              children: Object.keys(groupedOptions).length === 0 || filteredOptions.length === 0 && !onAddNew ? /* @__PURE__ */ jsx37("div", { className: "dl-searchable-select-empty", children: "No matching options found." }) : Object.entries(groupedOptions).map(([groupName, groupOpts]) => /* @__PURE__ */ jsxs22("div", { className: "py-1", children: [
-                groupName !== "Default" && /* @__PURE__ */ jsx37("div", { className: "dl-searchable-select-group-header", children: groupName }),
+              children: Object.keys(groupedOptions).length === 0 || filteredOptions.length === 0 && !onAddNew ? /* @__PURE__ */ jsx44("div", { className: "dl-searchable-select-empty", children: "No matching options found." }) : Object.entries(groupedOptions).map(([groupName, groupOpts]) => /* @__PURE__ */ jsxs28("div", { className: "dl-searchable-select-group", children: [
+                groupName !== "Default" && /* @__PURE__ */ jsx44("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__ */ jsxs22(
+                  return /* @__PURE__ */ jsxs28(
                     "div",
                     {
                       "data-highlighted": isHighlighted,
@@ -2480,8 +2497,8 @@ function SearchableSelect({
                         isSelected && !isHighlighted && "dl-searchable-select-item--selected"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx37("span", { className: "flex-1 truncate", children: option.label }),
-                        isSelected && /* @__PURE__ */ jsx37(Check5, { className: "dl-select-check" })
+                        /* @__PURE__ */ jsx44("span", { className: "dl-searchable-select-item-text", children: option.label }),
+                        isSelected && /* @__PURE__ */ jsx44(Check5, { className: "dl-select-check" })
                       ]
                     },
                     option.value
@@ -2490,15 +2507,15 @@ function SearchableSelect({
               ] }, groupName))
             }
           ),
-          onAddNew && /* @__PURE__ */ jsx37("div", { className: "dl-searchable-select-add", children: /* @__PURE__ */ jsxs22(
+          onAddNew && /* @__PURE__ */ jsx44("div", { className: "dl-searchable-select-add", children: /* @__PURE__ */ jsxs28(
             "button",
             {
               type: "button",
               onClick: handleAddNew,
               className: "dl-searchable-select-add-btn",
               children: [
-                /* @__PURE__ */ jsx37(Plus, { className: "size-3.5 shrink-0" }),
-                /* @__PURE__ */ jsx37("span", { className: "truncate", children: search.trim() ? `${addNewLabel} "${search.trim()}"` : addNewLabel })
+                /* @__PURE__ */ jsx44(Plus, { className: "dl-searchable-select-add-icon" }),
+                /* @__PURE__ */ jsx44("span", { className: "dl-searchable-select-truncate", children: search.trim() ? `${addNewLabel} "${search.trim()}"` : addNewLabel })
               ]
             }
           ) })
@@ -2509,14 +2526,14 @@ function SearchableSelect({
 }
 
 // src/components/select/select.tsx
-import * as React34 from "react";
+import * as React42 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check6, ChevronDown as ChevronDown4, ChevronUp } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+var SelectTrigger = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs29(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2524,32 +2541,32 @@ var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx38(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx38(ChevronDown4, { style: { opacity: 0.5, width: "1rem", height: "1rem" } }) })
+      /* @__PURE__ */ jsx45(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx45(ChevronDown4, {}) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SelectScrollUpButton = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
     className: cn("dl-select-scroll-btn", className),
     ...props,
-    children: /* @__PURE__ */ jsx38(ChevronUp, { style: { width: "1rem", height: "1rem" } })
+    children: /* @__PURE__ */ jsx45(ChevronUp, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SelectScrollDownButton = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
     className: cn("dl-select-scroll-btn", className),
     ...props,
-    children: /* @__PURE__ */ jsx38(ChevronDown4, { style: { width: "1rem", height: "1rem" } })
+    children: /* @__PURE__ */ jsx45(ChevronDown4, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React34.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx38(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs23(
+var SelectContent = React42.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx45(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs29(
   SelectPrimitive.Content,
   {
     ref,
@@ -2557,14 +2574,14 @@ var SelectContent = React34.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx38(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx38(SelectPrimitive.Viewport, { className: "dl-select-viewport", children }),
-      /* @__PURE__ */ jsx38(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx45(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx45(SelectPrimitive.Viewport, { className: "dl-select-viewport", children }),
+      /* @__PURE__ */ jsx45(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SelectLabel = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   SelectPrimitive.Label,
   {
     ref,
@@ -2573,20 +2590,20 @@ var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+var SelectItem = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs29(
   SelectPrimitive.Item,
   {
     ref,
     className: cn("dl-select-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx38("span", { className: "dl-select-item__indicator", children: /* @__PURE__ */ jsx38(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx38(Check6, { style: { width: "0.75rem", height: "0.75rem" } }) }) }),
-      /* @__PURE__ */ jsx38(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx45("span", { className: "dl-select-item__indicator", children: /* @__PURE__ */ jsx45(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx45(Check6, {}) }) }),
+      /* @__PURE__ */ jsx45(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SelectSeparator = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2597,11 +2614,11 @@ var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @_
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator/separator.tsx
-import * as React35 from "react";
+import * as React43 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var Separator6 = React35.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx39(
+import { jsx as jsx46 } from "react/jsx-runtime";
+var Separator6 = React43.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx46(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -2615,16 +2632,16 @@ var Separator6 = React35.forwardRef(
 Separator6.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/sheet/sheet.tsx
-import * as React36 from "react";
+import * as React44 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva as cva6 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "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__ */ jsx40(
+var SheetOverlay = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   SheetPrimitive.Overlay,
   {
     className: cn("dl-dialog-overlay", className),
@@ -2646,9 +2663,9 @@ var sheetVariants = cva6("dl-sheet-content", {
     side: "right"
   }
 });
-var SheetContent = React36.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(SheetPortal, { children: [
-  /* @__PURE__ */ jsx40(SheetOverlay, {}),
-  /* @__PURE__ */ jsxs24(
+var SheetContent = React44.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs30(SheetPortal, { children: [
+  /* @__PURE__ */ jsx47(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs30(
     SheetPrimitive.Content,
     {
       ref,
@@ -2656,9 +2673,9 @@ var SheetContent = React36.forwardRef(({ side = "right", className, children, ..
       "data-side": side,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs24(SheetPrimitive.Close, { className: "dl-sheet-close", children: [
-          /* @__PURE__ */ jsx40(X2, { style: { width: "1rem", height: "1rem" } }),
-          /* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs30(SheetPrimitive.Close, { className: "dl-sheet-close", children: [
+          /* @__PURE__ */ jsx47(X2, {}),
+          /* @__PURE__ */ jsx47("span", { className: "sr-only", children: "Close" })
         ] }),
         children
       ]
@@ -2669,14 +2686,14 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx40("div", { className: cn("dl-sheet__header", className), ...props });
+}) => /* @__PURE__ */ jsx47("div", { className: cn("dl-sheet__header", className), ...props });
 SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx40("div", { className: cn("dl-sheet__footer", className), ...props });
+}) => /* @__PURE__ */ jsx47("div", { className: cn("dl-sheet__footer", className), ...props });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var SheetTitle = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   SheetPrimitive.Title,
   {
     ref,
@@ -2685,7 +2702,7 @@ var SheetTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var SheetDescription = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   SheetPrimitive.Description,
   {
     ref,
@@ -2695,20 +2712,17 @@ var SheetDescription = React36.forwardRef(({ className, ...props }, ref) => /* @
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// src/components/sidebar/sidebar.tsx
-import * as React38 from "react";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import { cva as cva7 } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+// src/components/sidebar/sidebar-context.tsx
+import * as React46 from "react";
 
 // src/components/tooltip/tooltip.tsx
-import * as React37 from "react";
+import * as React45 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "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__ */ jsx41(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx41(
+var TooltipContent = React45.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx48(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx48(
   TooltipPrimitive.Content,
   {
     ref,
@@ -2719,23 +2733,25 @@ var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, ...props }
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-// src/components/sidebar/sidebar.tsx
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+// src/components/sidebar/sidebar-context.tsx
+import { jsx as jsx49 } from "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,
@@ -2746,10 +2762,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) {
@@ -2761,10 +2777,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();
@@ -2775,7 +2791,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,
@@ -2795,7 +2811,7 @@ var SidebarProvider = React38.forwardRef(
         toggleSidebar
       ]
     );
-    return /* @__PURE__ */ jsx42(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx42(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx49(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx49(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx49(
       "div",
       {
         style: {
@@ -2803,10 +2819,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
@@ -2815,7 +2828,11 @@ var SidebarProvider = React38.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React38.forwardRef(
+
+// src/components/sidebar/sidebar-layout.tsx
+import * as React47 from "react";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+var Sidebar = React47.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -2826,13 +2843,10 @@ var Sidebar = React38.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ jsx42(
+      return /* @__PURE__ */ jsx50(
         "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
@@ -2840,315 +2854,196 @@ var Sidebar = React38.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ jsx42(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs25(
+      return /* @__PURE__ */ jsx50(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs31(
         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__ */ jsxs25(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ jsx42(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ jsx42(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ jsxs31(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ jsx50(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ jsx50(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ jsx42("div", { className: "flex flex-col size-full", children })
+            /* @__PURE__ */ jsx50("div", { className: "dl-sidebar-mobile-content", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs31(
       "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__ */ jsx42(
-            "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__ */ jsx42(
-            "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__ */ jsx42(
-                "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__ */ jsx50("div", { className: "dl-sidebar-desktop-spacer" }),
+          /* @__PURE__ */ jsx50("div", { className: "dl-sidebar-fixed", ...props, children: /* @__PURE__ */ jsx50("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__ */ jsxs25(
-    Button,
+  return /* @__PURE__ */ jsx50(
+    "button",
     {
       ref,
-      "data-sidebar": "trigger",
-      variant: "ghost",
-      size: "icon",
-      className: cn("size-7", className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx42(PanelLeft, {}),
-        /* @__PURE__ */ jsx42("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__ */ jsx42(
-      "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__ */ jsx42(
-      "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__ */ jsx50("main", { ref, className: cn("dl-sidebar-inset", className), ...props })
 );
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx42(
-    Input,
-    {
-      ref,
-      "data-sidebar": "input",
-      className: cn("dl-sidebar-input", className),
-      ...props
-    }
-  );
-});
-SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React38.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
-      "div",
-      {
-        ref,
-        "data-sidebar": "header",
-        className: cn("flex flex-col gap-2 p-2", className),
-        ...props
-      }
-    );
+var SidebarHeader = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+  "div",
+  {
+    ref,
+    "data-sidebar": "header",
+    className: cn("dl-sidebar-header", className),
+    ...props
   }
-);
+));
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React38.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
-      "div",
-      {
-        ref,
-        "data-sidebar": "footer",
-        className: cn("flex flex-col gap-2 p-2", className),
-        ...props
-      }
-    );
+var SidebarFooter = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+  "div",
+  {
+    ref,
+    "data-sidebar": "footer",
+    className: cn("dl-sidebar-footer", className),
+    ...props
   }
-);
+));
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx42(
-    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__ */ jsx42(
-      "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__ */ jsx50(
+  "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
+import * as React48 from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var SidebarGroup = React48.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx51(
       "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 ? Slot4 : "div";
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx51(
     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 ? Slot4 : "button";
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx51(
     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__ */ jsx42(
+var SidebarGroupContent = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   "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__ */ jsx42(
+
+// src/components/sidebar/sidebar-menu.tsx
+import * as React49 from "react";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+var sidebarMenuButtonVariants = cva7("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__ */ jsx52(
     "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__ */ jsx42(
-    "li",
-    {
-      ref,
-      "data-sidebar": "menu-item",
-      className: cn("group/menu-item relative", className),
-      ...props
-    }
-  )
-);
-SidebarMenuItem.displayName = "SidebarMenuItem";
-var sidebarMenuButtonVariants = cva7(
-  "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__ */ jsx52(
+  "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,
@@ -3158,14 +3053,15 @@ var SidebarMenuButton = React38.forwardRef(
     className,
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot4 : "button";
+    const Comp = asChild ? Slot5 : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ jsx42(
+    const button = /* @__PURE__ */ jsx52(
       Comp,
       {
         ref,
         "data-sidebar": "menu-button",
         "data-size": size,
+        "data-variant": variant,
         "data-active": isActive,
         className: cn(sidebarMenuButtonVariants({ variant, size }), className),
         ...props
@@ -3174,42 +3070,33 @@ var SidebarMenuButton = React38.forwardRef(
     if (!tooltip) {
       return button;
     }
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip
-      };
-    }
-    return /* @__PURE__ */ jsxs25(Tooltip2, { children: [
-      /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ jsx42(
+    const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+    return /* @__PURE__ */ jsxs32(Tooltip2, { children: [
+      /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx52(
         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 ? Slot4 : "button";
-  return /* @__PURE__ */ jsx42(
+var SidebarMenuAction = React49.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot5 : "button";
+  return /* @__PURE__ */ jsx52(
     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
@@ -3217,51 +3104,46 @@ var SidebarMenuAction = React38.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var SidebarMenuBadge = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx52(
   "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
+import * as React50 from "react";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import { jsx as jsx53, jsxs as jsxs33 } from "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__ */ jsxs25(
+  return /* @__PURE__ */ jsxs33(
     "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__ */ jsx42(
+        showIcon && /* @__PURE__ */ jsx53(
           Skeleton,
           {
-            className: "size-4 rounded-md",
+            className: "dl-sidebar-menu-skeleton-icon",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx53(
           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 }
           }
         )
       ]
@@ -3269,27 +3151,21 @@ var SidebarMenuSkeleton = React38.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
-    "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__ */ jsx53(
+  "ul",
+  {
+    ref,
+    "data-sidebar": "menu-sub",
+    className: cn("dl-sidebar-menu-sub", className),
+    ...props
+  }
+));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx42("li", { ref, ...props }));
+var SidebarMenuSubItem = React50.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx53("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React38.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot4 : "a";
-  return /* @__PURE__ */ jsx42(
+var SidebarMenuSubButton = React50.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot6 : "a";
+  return /* @__PURE__ */ jsx53(
     Comp,
     {
       ref,
@@ -3297,11 +3173,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
@@ -3310,19 +3183,71 @@ var SidebarMenuSubButton = React38.forwardRef(({ asChild = false, size = "md", i
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
+// src/components/sidebar/sidebar-controls.tsx
+import * as React51 from "react";
+import { PanelLeft } from "lucide-react";
+import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+var SidebarTrigger = React51.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxs34(
+    Button,
+    {
+      ref,
+      "data-sidebar": "trigger",
+      variant: "ghost",
+      size: "icon",
+      className: cn("dl-sidebar-trigger", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx54(PanelLeft, {}),
+        /* @__PURE__ */ jsx54("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+var SidebarSeparator = React51.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx54(
+    Separator6,
+    {
+      ref,
+      "data-sidebar": "separator",
+      className: cn("dl-sidebar-separator", className),
+      ...props
+    }
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+var SidebarInput = React51.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx54(
+    Input,
+    {
+      ref,
+      "data-sidebar": "input",
+      className: cn("dl-sidebar-input", className),
+      ...props
+    }
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
 // src/components/slider/slider.tsx
-import * as React39 from "react";
+import * as React52 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
-var Slider = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs26(
+import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+var Slider = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs35(
   SliderPrimitive.Root,
   {
     ref,
     className: cn("dl-slider", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx43(SliderPrimitive.Track, { className: "dl-slider__track", children: /* @__PURE__ */ jsx43(SliderPrimitive.Range, { className: "dl-slider__range" }) }),
-      /* @__PURE__ */ jsx43(SliderPrimitive.Thumb, { className: "dl-slider__thumb" })
+      /* @__PURE__ */ jsx55(SliderPrimitive.Track, { className: "dl-slider__track", children: /* @__PURE__ */ jsx55(SliderPrimitive.Range, { className: "dl-slider__range" }) }),
+      /* @__PURE__ */ jsx55(SliderPrimitive.Thumb, { className: "dl-slider__thumb" })
     ]
   }
 ));
@@ -3331,7 +3256,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 // src/components/sonner/sonner.tsx
 import { useEffect as useEffect7, useState as useState6 } from "react";
 import { Toaster as Sonner, toast } from "sonner";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var Toaster = ({ theme: propTheme, ...props }) => {
   const [resolvedTheme, setResolvedTheme] = useState6("system");
   useEffect7(() => {
@@ -3356,7 +3281,7 @@ var Toaster = ({ theme: propTheme, ...props }) => {
     });
     return () => observer.disconnect();
   }, [propTheme]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx56(
     Sonner,
     {
       theme: propTheme ?? resolvedTheme,
@@ -3375,8 +3300,8 @@ var Toaster = ({ theme: propTheme, ...props }) => {
 };
 
 // src/components/status-badge/status-badge.tsx
-import * as React41 from "react";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import * as React54 from "react";
+import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 var statusCategoryMap = {
   Completed: "dl-status-badge--success",
   COMPLETED: "dl-status-badge--success",
@@ -3396,18 +3321,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__ */ jsxs27(
+    return /* @__PURE__ */ jsxs36(
       "span",
       {
         ref,
         className: cn("dl-status-badge", colorClass, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx45("span", { className: "dl-status-badge__dot" }),
+          /* @__PURE__ */ jsx57("span", { className: "dl-status-badge__dot" }),
           normalizedStatus
         ]
       }
@@ -3417,8 +3342,8 @@ var StatusBadge = React41.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/status-chip/status-chip.tsx
-import * as React42 from "react";
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import * as React55 from "react";
+import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var statusToneMap = {
   active: "dl-status-chip--primary",
   running: "dl-status-chip--primary",
@@ -3440,17 +3365,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__ */ jsxs28(
+    return /* @__PURE__ */ jsxs37(
       "span",
       {
         ref,
         className: cn("dl-status-chip", toneClass, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx46("span", { className: "dl-status-chip__dot" }),
+          /* @__PURE__ */ jsx58("span", { className: "dl-status-chip__dot" }),
           status
         ]
       }
@@ -3460,52 +3385,52 @@ var StatusChip = React42.forwardRef(
 StatusChip.displayName = "StatusChip";
 
 // src/components/switch/switch.tsx
-import * as React43 from "react";
+import * as React56 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var Switch = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Switch = React56.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx59(
   SwitchPrimitives.Root,
   {
     className: cn("dl-switch", className),
     ...props,
     ref,
-    children: /* @__PURE__ */ jsx47(SwitchPrimitives.Thumb, { className: "dl-switch__thumb" })
+    children: /* @__PURE__ */ jsx59(SwitchPrimitives.Thumb, { className: "dl-switch__thumb" })
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table/table.tsx
-import * as React44 from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var Table = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ jsx48("table", { ref, className: cn("dl-table", className), ...props }) })
+import * as React57 from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var Table = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ jsx60("table", { ref, className: cn("dl-table", className), ...props }) })
 );
 Table.displayName = "Table";
-var TableHeader = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("thead", { ref, className: cn("dl-table__head", className), ...props })
+var TableHeader = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("thead", { ref, className: cn("dl-table__head", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("tbody", { ref, className: cn("dl-table__body", className), ...props })
+var TableBody = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("tbody", { ref, className: cn("dl-table__body", className), ...props })
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("tfoot", { ref, className: cn("dl-table__foot", className), ...props })
+var TableFooter = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("tfoot", { ref, className: cn("dl-table__foot", className), ...props })
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("tr", { ref, className: cn("dl-table__row", className), ...props })
+var TableRow = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("tr", { ref, className: cn("dl-table__row", className), ...props })
 );
 TableRow.displayName = "TableRow";
-var TableHead = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("th", { ref, className: cn("dl-table__head-cell", className), ...props })
+var TableHead = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("th", { ref, className: cn("dl-table__head-cell", className), ...props })
 );
 TableHead.displayName = "TableHead";
-var TableCell = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("td", { ref, className: cn("dl-table__cell", className), ...props })
+var TableCell = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx60("td", { ref, className: cn("dl-table__cell", className), ...props })
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var TableCaption = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx60(
   "caption",
   {
     ref,
@@ -3516,11 +3441,11 @@ var TableCaption = React44.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/tabs/tabs.tsx
-import * as React45 from "react";
+import * as React58 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TabsList = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx61(
   TabsPrimitive.List,
   {
     ref,
@@ -3529,7 +3454,7 @@ var TabsList = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TabsTrigger = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx61(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3538,7 +3463,7 @@ var TabsTrigger = React45.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TabsContent = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx61(
   TabsPrimitive.Content,
   {
     ref,
@@ -3549,18 +3474,18 @@ var TabsContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/textarea/textarea.tsx
-import * as React46 from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var Textarea = React46.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50("textarea", { className: cn("dl-textarea", className), ref, ...props })
+import * as React59 from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Textarea = React59.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx62("textarea", { className: cn("dl-textarea", className), ref, ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/toggle/toggle.tsx
-import * as React47 from "react";
+import * as React60 from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var toggleVariants = cva8("dl-toggle", {
   variants: {
     variant: {
@@ -3578,7 +3503,7 @@ var toggleVariants = cva8("dl-toggle", {
     size: "default"
   }
 });
-var Toggle = React47.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx51(
+var Toggle = React60.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx63(
   TogglePrimitive.Root,
   {
     ref,
@@ -3589,26 +3514,26 @@ var Toggle = React47.forwardRef(({ className, variant, size, ...props }, ref) =>
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
 // src/components/toggle-group/toggle-group.tsx
-import * as React48 from "react";
+import * as React61 from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var ToggleGroupContext = React48.createContext({
+import { jsx as jsx64 } from "react/jsx-runtime";
+var ToggleGroupContext = React61.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React48.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx52(
+var ToggleGroup = React61.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx64(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("dl-toggle-group", className),
     ...props,
-    children: /* @__PURE__ */ jsx52(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx64(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__ */ jsx52(
+var ToggleGroupItem = React61.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React61.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx64(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -3627,17 +3552,17 @@ var ToggleGroupItem = React48.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/components/metric-card/metric-card.tsx
-import * as React49 from "react";
-import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
-var MetricCard = React49.forwardRef(
+import * as React62 from "react";
+import { jsx as jsx65, jsxs as jsxs38 } from "react/jsx-runtime";
+var MetricCard = React62.forwardRef(
   ({ label, value, note, positive, icon, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs29("div", { ref, className: cn("dl-metric-card", className), ...props, children: [
-      /* @__PURE__ */ jsxs29("div", { className: "dl-metric-card__header", children: [
-        /* @__PURE__ */ jsx53("span", { className: "dl-metric-card__label", children: label }),
-        icon && /* @__PURE__ */ jsx53("span", { className: "dl-metric-card__icon", children: icon })
+    return /* @__PURE__ */ jsxs38("div", { ref, className: cn("dl-metric-card", className), ...props, children: [
+      /* @__PURE__ */ jsxs38("div", { className: "dl-metric-card__header", children: [
+        /* @__PURE__ */ jsx65("span", { className: "dl-metric-card__label", children: label }),
+        icon && /* @__PURE__ */ jsx65("span", { className: "dl-metric-card__icon", children: icon })
       ] }),
-      /* @__PURE__ */ jsx53("div", { className: "dl-metric-card__value-row", children: /* @__PURE__ */ jsx53("span", { className: "dl-metric-card__value", children: value }) }),
-      note && /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsx65("div", { className: "dl-metric-card__value-row", children: /* @__PURE__ */ jsx65("span", { className: "dl-metric-card__value", children: value }) }),
+      note && /* @__PURE__ */ jsx65(
         "div",
         {
           className: cn(
@@ -3652,18 +3577,18 @@ var MetricCard = React49.forwardRef(
   }
 );
 MetricCard.displayName = "MetricCard";
-var MetricsGrid = React49.forwardRef(
+var MetricsGrid = React62.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx53("div", { ref, className: cn("dl-metrics-grid", className), ...props, children });
+    return /* @__PURE__ */ jsx65("div", { ref, className: cn("dl-metrics-grid", className), ...props, children });
   }
 );
 MetricsGrid.displayName = "MetricsGrid";
 
 // src/components/copy-button/copy-button.tsx
-import * as React50 from "react";
+import * as React63 from "react";
 import { Check as Check7, Copy } from "lucide-react";
-import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
-var CopyButton = React50.forwardRef(
+import { jsx as jsx66, jsxs as jsxs39 } from "react/jsx-runtime";
+var CopyButton = React63.forwardRef(
   ({
     textToCopy,
     label = "Copy",
@@ -3673,7 +3598,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;
@@ -3684,7 +3609,7 @@ var CopyButton = React50.forwardRef(
       } catch {
       }
     };
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs39(
       "button",
       {
         ref,
@@ -3697,8 +3622,8 @@ var CopyButton = React50.forwardRef(
         onClick: handleCopy,
         ...props,
         children: [
-          isCopied ? /* @__PURE__ */ jsx54(Check7, { className: "dl-copy-button__icon" }) : /* @__PURE__ */ jsx54(Copy, { className: "dl-copy-button__icon" }),
-          /* @__PURE__ */ jsx54("span", { children: isCopied ? copiedLabel : label })
+          isCopied ? /* @__PURE__ */ jsx66(Check7, { className: "dl-copy-button__icon" }) : /* @__PURE__ */ jsx66(Copy, { className: "dl-copy-button__icon" }),
+          /* @__PURE__ */ jsx66("span", { children: isCopied ? copiedLabel : label })
         ]
       }
     );
@@ -3707,10 +3632,10 @@ var CopyButton = React50.forwardRef(
 CopyButton.displayName = "CopyButton";
 
 // src/components/secret-reveal-card/secret-reveal-card.tsx
-import * as React51 from "react";
+import * as React64 from "react";
 import { AlertTriangle } from "lucide-react";
-import { jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
-var SecretRevealCard = React51.forwardRef(
+import { jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
+var SecretRevealCard = React64.forwardRef(
   ({
     secret,
     warningMessage = "One-time reveal. Please copy and store this credential securely before closing.",
@@ -3718,19 +3643,281 @@ var SecretRevealCard = React51.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("dl-secret-reveal", className), ...props, children: [
-      warningMessage && /* @__PURE__ */ jsxs31("div", { className: "dl-secret-reveal__warning", children: [
-        /* @__PURE__ */ jsx55(AlertTriangle, { className: "shrink-0 size-4" }),
-        /* @__PURE__ */ jsx55("span", { children: warningMessage })
+    return /* @__PURE__ */ jsxs40("div", { ref, className: cn("dl-secret-reveal", className), ...props, children: [
+      warningMessage && /* @__PURE__ */ jsxs40("div", { className: "dl-secret-reveal__warning", children: [
+        /* @__PURE__ */ jsx67(AlertTriangle, {}),
+        /* @__PURE__ */ jsx67("span", { children: warningMessage })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "dl-secret-reveal__code-wrap", children: [
-        /* @__PURE__ */ jsx55("code", { className: "dl-secret-reveal__code", children: secret }),
-        /* @__PURE__ */ jsx55(CopyButton, { textToCopy: secret, label: copyLabel })
+      /* @__PURE__ */ jsxs40("div", { className: "dl-secret-reveal__code-wrap", children: [
+        /* @__PURE__ */ jsx67("code", { className: "dl-secret-reveal__code", children: secret }),
+        /* @__PURE__ */ jsx67(CopyButton, { textToCopy: secret, label: copyLabel })
       ] })
     ] });
   }
 );
 SecretRevealCard.displayName = "SecretRevealCard";
+
+// src/components/typography/heading.tsx
+import { forwardRef as forwardRef58 } from "react";
+import { jsx as jsx68 } from "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 = forwardRef58(
+  function Heading2({
+    as,
+    size = "h2",
+    color = "default",
+    weight,
+    align = "left",
+    truncate = false,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const Component = as ?? resolveDefaultTag(size);
+    return /* @__PURE__ */ jsx68(
+      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
+import { forwardRef as forwardRef59 } from "react";
+import { jsx as jsx69 } from "react/jsx-runtime";
+var Text = forwardRef59(function Text2({
+  as: Component = "p",
+  variant = "body",
+  color = "default",
+  weight,
+  align = "left",
+  truncate = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  const Element = Component;
+  return /* @__PURE__ */ jsx69(
+    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
+import * as React65 from "react";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { jsx as jsx70 } from "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 ? Slot7 : 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__ */ jsx70(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "dl-box",
+          shadow && shadow !== "none" && `dl-shadow-${shadow}`,
+          className
+        ),
+        style: inlineStyles,
+        ...props
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/components/layout/flex.tsx
+import * as React66 from "react";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { jsx as jsx71 } from "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 ? Slot8 : as || "div";
+    return /* @__PURE__ */ jsx71(
+      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
+import * as React67 from "react";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var Stack = React67.forwardRef(
+  ({
+    className,
+    asChild = false,
+    as,
+    direction = "col",
+    gap = "3",
+    align = "stretch",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot9 : as || "div";
+    return /* @__PURE__ */ jsx72(
+      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
+import * as React68 from "react";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { jsx as jsx73 } from "react/jsx-runtime";
+var Grid = React68.forwardRef(
+  ({
+    className,
+    asChild = false,
+    as,
+    cols,
+    columns,
+    gap = "4",
+    inline = false,
+    style,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot10 : 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__ */ jsx73(
+      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
+import * as React69 from "react";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import { jsx as jsx74 } from "react/jsx-runtime";
+var Container = React69.forwardRef(
+  ({ className, asChild = false, as, size = "xl", ...props }, ref) => {
+    const Comp = asChild ? Slot11 : as || "div";
+    return /* @__PURE__ */ jsx74(
+      Comp,
+      {
+        ref,
+        className: cn("dl-container", `dl-container--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 export {
   Accordion,
   AccordionContent,
@@ -3755,6 +3942,7 @@ export {
   AvatarFallback,
   AvatarImage,
   Badge,
+  Box,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -3773,10 +3961,12 @@ export {
   CardTitle,
   Carousel,
   CarouselContent,
+  CarouselContext,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
   ChartContainer,
+  ChartContext,
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
@@ -3797,6 +3987,7 @@ export {
   CommandShortcut,
   ConfigProvider,
   ConfirmDialog,
+  Container,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -3850,6 +4041,8 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EmptyState,
+  Flex,
   Form,
   FormControl,
   FormDescription,
@@ -3857,6 +4050,8 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  Grid,
+  Heading,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -3911,6 +4106,12 @@ export {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
   ScrollArea,
   ScrollBar,
   SearchableSelect,
@@ -3938,6 +4139,7 @@ export {
   SheetTrigger,
   Sidebar,
   SidebarContent,
+  SidebarContext,
   SidebarFooter,
   SidebarGroup,
   SidebarGroupAction,
@@ -3961,9 +4163,11 @@ export {
   SidebarTrigger,
   Skeleton,
   Slider,
+  Stack,
   StatusBadge,
   StatusChip,
   Switch,
+  THEMES,
   Table,
   TableBody,
   TableCaption,
@@ -3976,6 +4180,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Text,
   Textarea,
   ThemeProvider,
   Toaster,
@@ -3990,12 +4195,16 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  cx,
+  getPayloadConfigFromPayload,
   labelVariants,
   navigationMenuTriggerStyle,
   sheetVariants,
+  sidebarMenuButtonVariants,
   toast,
   toggleVariants,
   useCarousel,
+  useChart,
   useConfig,
   useFormField,
   useIsMobile,