@onesaz/ui 0.3.22 → 0.3.24

package/dist/index.js

@@ -3752,7 +3752,7 @@ function OptionItem({
       disabled: option.disabled,
       onClick: onSelect,
       className: cn(
-        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-left outline-none",
         "hover:bg-muted hover:text-foreground",
         "focus:bg-muted focus:text-foreground",
         "disabled:pointer-events-none disabled:opacity-50",
@@ -4529,33 +4529,35 @@ var DataGridPagination = ({
   const currentPage = table.getState().pagination.pageIndex;
   const totalRows = paginationMode === "server" && rowCount ? rowCount : table.getFilteredRowModel().rows.length;
   const pageSize = table.getState().pagination.pageSize;
-  const getPageNumbers = () => {
+  const getPageNumbers = (maxVisible) => {
     const pages = [];
-    const maxVisible = 5;
     if (pageCount <= maxVisible) {
       for (let i = 0; i < pageCount; i++) pages.push(i);
     } else {
+      const half = Math.floor(maxVisible / 2);
+      const start = Math.max(1, currentPage - half);
+      const end = Math.min(pageCount - 2, currentPage + half);
       pages.push(0);
-      if (currentPage > 2) {
-        pages.push("ellipsis");
-      }
-      const start = Math.max(1, currentPage - 1);
-      const end = Math.min(pageCount - 2, currentPage + 1);
-      for (let i = start; i <= end; i++) {
-        if (!pages.includes(i)) pages.push(i);
-      }
-      if (currentPage < pageCount - 3) {
-        pages.push("ellipsis");
-      }
-      if (!pages.includes(pageCount - 1)) {
-        pages.push(pageCount - 1);
-      }
+      if (start > 1) pages.push("ellipsis");
+      for (let i = start; i <= end; i++) pages.push(i);
+      if (end < pageCount - 2) pages.push("ellipsis");
+      pages.push(pageCount - 1);
     }
     return pages;
   };
   const startRow = currentPage * pageSize + 1;
   const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
-  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
+  const renderPageNumbers = (maxVisible) => getPageNumbers(maxVisible).map(
+    (page, idx) => page === "ellipsis" ? /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
+      PaginationLink,
+      {
+        isActive: page === currentPage,
+        onClick: () => table.setPageIndex(page),
+        children: page + 1
+      }
+    ) }, page)
+  );
+  const infoSection = /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-4 flex-wrap", children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
       /* @__PURE__ */ jsx36("span", { children: "Rows per page:" }),
       /* @__PURE__ */ jsx36(
@@ -4570,67 +4572,62 @@ var DataGridPagination = ({
     ] }),
     /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
       startRow,
-      "-",
+      "\u2013",
       endRow,
       " of ",
       totalRows
-    ] }),
-    /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs22(PaginationContent, { children: [
-      /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          className: "h-8 w-8",
-          onClick: () => table.setPageIndex(0),
-          disabled: !table.getCanPreviousPage(),
-          children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5" }) })
-        }
-      ) }),
-      /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          className: "h-8 w-8",
-          onClick: () => table.previousPage(),
-          disabled: !table.getCanPreviousPage(),
-          children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M15 18l-6-6 6-6" }) })
-        }
-      ) }),
-      getPageNumbers().map(
-        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
-          PaginationLink,
-          {
-            isActive: page === currentPage,
-            onClick: () => table.setPageIndex(page),
-            children: page + 1
-          }
-        ) }, page)
-      ),
-      /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          className: "h-8 w-8",
-          onClick: () => table.nextPage(),
-          disabled: !table.getCanNextPage(),
-          children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M9 18l6-6-6-6" }) })
-        }
-      ) }),
-      /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          className: "h-8 w-8",
-          onClick: () => table.setPageIndex(pageCount - 1),
-          disabled: !table.getCanNextPage(),
-          children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M13 17l5-5-5-5M6 17l5-5-5-5" }) })
-        }
-      ) })
-    ] }) })
+    ] })
+  ] });
+  const navSection = (maxVisible) => /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs22(PaginationContent, { children: [
+    /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "h-8 w-8",
+        onClick: () => table.setPageIndex(0),
+        disabled: !table.getCanPreviousPage(),
+        children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5" }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "h-8 w-8",
+        onClick: () => table.previousPage(),
+        disabled: !table.getCanPreviousPage(),
+        children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M15 18l-6-6 6-6" }) })
+      }
+    ) }),
+    renderPageNumbers(maxVisible),
+    /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "h-8 w-8",
+        onClick: () => table.nextPage(),
+        disabled: !table.getCanNextPage(),
+        children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M9 18l6-6-6-6" }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "h-8 w-8",
+        onClick: () => table.setPageIndex(pageCount - 1),
+        disabled: !table.getCanNextPage(),
+        children: /* @__PURE__ */ jsx36("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { d: "M13 17l5-5-5-5M6 17l5-5-5-5" }) })
+      }
+    ) })
+  ] }) });
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2 border-t border-border bg-background", children: [
+    infoSection,
+    /* @__PURE__ */ jsx36("div", { className: "ml-auto", children: navSection(5) })
   ] });
 };
 var ExportDropdown = ({
@@ -4809,16 +4806,16 @@ var DataGridToolbar = ({
   customButtons,
   moreOptions = []
 }) => {
-  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
-    title && /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold text-foreground", children: title }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 ml-auto", children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2 px-4 py-3 border-b border-border bg-background", children: [
+    title && /* @__PURE__ */ jsx36("h3", { className: "text-sm font-semibold text-foreground shrink-0", children: title }),
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: [
       showQuickFilter && /* @__PURE__ */ jsx36(
         Input,
         {
           placeholder: "Search...",
           value: globalFilter ?? "",
           onChange: (e) => setGlobalFilter(e.target.value),
-          className: "h-9 w-64"
+          className: "h-9 min-w-[120px] flex-1"
         }
       ),
       showColumnSelector && /* @__PURE__ */ jsx36(ColumnVisibilityDropdown, { table }),
@@ -4904,7 +4901,9 @@ var RowRenderer = ({
   pinnedColumnOffsets,
   isPinnedRow = false,
   rowSpanMap,
-  gridColumns
+  gridColumns,
+  measureRef,
+  dataIndex
 }) => {
   const customClassName = getRowClassName?.({ row: row.original, rowIndex });
   const visibleCells = row.getVisibleCells();
@@ -4935,6 +4934,8 @@ var RowRenderer = ({
   return /* @__PURE__ */ jsx36(
     "tr",
     {
+      ref: measureRef,
+      "data-index": dataIndex,
       className: cn(
         "border-b border-border transition-colors hover:bg-muted/50",
         row.getIsSelected() && "bg-accent/10",
@@ -5056,6 +5057,9 @@ var VirtualizedTableBody = ({
     count: rows.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => rowHeight,
+    // measureElement lets the virtualizer read actual rendered row heights,
+    // which makes variable-height rows (wrapText, JSX cells) work correctly.
+    measureElement: (el) => el.getBoundingClientRect().height,
     overscan
   });
   const virtualRows = virtualizer.getVirtualItems();
@@ -5095,7 +5099,9 @@ var VirtualizedTableBody = ({
           columnWidths,
           pinnedColumnOffsets,
           rowSpanMap,
-          gridColumns
+          gridColumns,
+          measureRef: virtualizer.measureElement,
+          dataIndex: virtualRow.index
         },
         row.id
       );
@@ -5650,6 +5656,7 @@ function DataGrid({
                         return /* @__PURE__ */ jsxs22(
                           "th",
                           {
+                            title: meta?.headerName,
                             className: cn(
                               "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
                               showColumnVerticalBorder && "border-r last:border-r-0",
@@ -5674,12 +5681,12 @@ function DataGrid({
                             },
                             onClick: header.column.getToggleSortingHandler(),
                             children: [
-                              /* @__PURE__ */ jsxs22("div", { className: cn(
-                                "flex items-center gap-1 truncate",
-                                align === "center" && "justify-center",
-                                align === "right" && "justify-end"
-                              ), children: [
-                                header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                              /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 min-w-0", children: [
+                                /* @__PURE__ */ jsx36("div", { className: cn(
+                                  "flex-1 truncate min-w-0",
+                                  align === "center" && "text-center",
+                                  align === "right" && "text-right"
+                                ), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
                                 header.column.getCanSort() && /* @__PURE__ */ jsx36(SortIcon, { direction: header.column.getIsSorted() })
                               ] }),
                               resizableColumns && header.column.id !== "__select__" && /* @__PURE__ */ jsx36(
@@ -6055,8 +6062,121 @@ function VirtualList({
   );
 }
 
-// src/components/charts.tsx
+// src/components/data-list.tsx
 import * as React38 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var DataListContext = React38.createContext({
+  orientation: "horizontal",
+  size: "2"
+});
+var sizeStyles = {
+  "1": "text-xs gap-y-1",
+  "2": "text-sm gap-y-2",
+  "3": "text-base gap-y-3"
+};
+var DataList = React38.forwardRef(
+  ({ className, orientation = "horizontal", size = "2", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx38(DataListContext.Provider, { value: { orientation, size }, children: /* @__PURE__ */ jsx38(
+      "dl",
+      {
+        ref,
+        className: cn("grid", sizeStyles[size], className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DataList.displayName = "DataList";
+var alignStyles = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  baseline: "items-baseline",
+  stretch: "items-stretch"
+};
+var DataListItem = React38.forwardRef(
+  ({ className, align = "baseline", children, ...props }, ref) => {
+    const { orientation } = React38.useContext(DataListContext);
+    return /* @__PURE__ */ jsx38(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-2 min-w-0",
+          orientation === "horizontal" ? [alignStyles[align], "flex-row"] : "flex-col gap-0.5",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DataListItem.displayName = "DataListItem";
+var colorStyles = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  primary: "text-primary",
+  success: "text-green-600 dark:text-green-400",
+  warning: "text-yellow-600 dark:text-yellow-400",
+  error: "text-destructive",
+  info: "text-blue-600 dark:text-blue-400"
+};
+var DataListLabel = React38.forwardRef(
+  ({
+    className,
+    style,
+    width,
+    minWidth,
+    maxWidth,
+    color = "muted",
+    highContrast = false,
+    children,
+    ...props
+  }, ref) => {
+    const { orientation } = React38.useContext(DataListContext);
+    const resolvedColor = highContrast ? "text-foreground" : colorStyles[color];
+    return /* @__PURE__ */ jsx38(
+      "dt",
+      {
+        ref,
+        className: cn(
+          "font-medium shrink-0 leading-snug",
+          resolvedColor,
+          orientation === "horizontal" && "pt-px",
+          className
+        ),
+        style: {
+          width: orientation === "horizontal" ? width : void 0,
+          minWidth: orientation === "horizontal" ? minWidth : void 0,
+          maxWidth: orientation === "horizontal" ? maxWidth : void 0,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+DataListLabel.displayName = "DataListLabel";
+var DataListValue = React38.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx38(
+      "dd",
+      {
+        ref,
+        className: cn("min-w-0 flex-1 leading-snug text-foreground", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DataListValue.displayName = "DataListValue";
+
+// src/components/charts.tsx
+import * as React39 from "react";
 import {
   BarChart as RechartsBarChart,
   Bar,
@@ -6083,7 +6203,7 @@ import {
   LabelList
 } from "recharts";
 import { accentColors as accentColors2 } from "@onesaz/tokens";
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var BarChart = ({
   data,
   dataKey,
@@ -6116,7 +6236,7 @@ var BarChart = ({
     accentColors2[accentColor][1]
   ];
   const chartColors = colors || defaultColors;
-  const bars = dataKeys ? dataKeys.map((keyConfig, index) => /* @__PURE__ */ jsx38(
+  const bars = dataKeys ? dataKeys.map((keyConfig, index) => /* @__PURE__ */ jsx39(
     Bar,
     {
       dataKey: keyConfig.dataKey,
@@ -6125,7 +6245,7 @@ var BarChart = ({
       radius: barProps.radius,
       maxBarSize: barProps.maxBarSize,
       ...barProps.minPointSize !== void 0 && { minPointSize: barProps.minPointSize },
-      children: labelList && /* @__PURE__ */ jsx38(
+      children: labelList && /* @__PURE__ */ jsx39(
         LabelList,
         {
           dataKey: labelList.dataKey || keyConfig.dataKey,
@@ -6146,7 +6266,7 @@ var BarChart = ({
       maxBarSize: barProps.maxBarSize,
       ...barProps.minPointSize !== void 0 && { minPointSize: barProps.minPointSize },
       children: [
-        labelList && /* @__PURE__ */ jsx38(
+        labelList && /* @__PURE__ */ jsx39(
           LabelList,
           {
             dataKey: labelList.dataKey || dataKey,
@@ -6155,7 +6275,7 @@ var BarChart = ({
             formatter: labelList.formatter
           }
         ),
-        data.map((_entry, index) => /* @__PURE__ */ jsx38(
+        data.map((_entry, index) => /* @__PURE__ */ jsx39(
           Cell,
           {
             fill: chartColors[index % chartColors.length]
@@ -6165,7 +6285,7 @@ var BarChart = ({
       ]
     }
   );
-  const customTooltip = tooltip ? /* @__PURE__ */ jsx38(
+  const customTooltip = tooltip ? /* @__PURE__ */ jsx39(
     Tooltip2,
     {
       formatter: tooltip.formatter,
@@ -6173,8 +6293,8 @@ var BarChart = ({
       labelStyle: tooltip.labelStyle,
       contentStyle: tooltip.contentStyle
     }
-  ) : showTooltip ? /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(
+  ) : showTooltip ? /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(
     RechartsBarChart,
     {
       data,
@@ -6182,8 +6302,8 @@ var BarChart = ({
       barCategoryGap: barProps.barCategoryGap,
       barGap: barProps.barGap,
       children: [
-        showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
-        xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
+        showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
+        xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
           XAxis,
           {
             dataKey: xAxis.dataKey,
@@ -6197,7 +6317,7 @@ var BarChart = ({
             label: xAxis.label ? { value: xAxis.label, position: "insideBottom", offset: -5 } : void 0
           }
         ),
-        yAxis && !yAxis.hide && /* @__PURE__ */ jsx38(
+        yAxis && !yAxis.hide && /* @__PURE__ */ jsx39(
           YAxis,
           {
             type: yAxis.type,
@@ -6208,7 +6328,7 @@ var BarChart = ({
           }
         ),
         customTooltip,
-        showLegend && /* @__PURE__ */ jsx38(Legend, {}),
+        showLegend && /* @__PURE__ */ jsx39(Legend, {}),
         bars
       ]
     }
@@ -6241,7 +6361,7 @@ var LineChart = ({
     accentColors2[accentColor][12],
     accentColors2[accentColor][1]
   ];
-  const lines = dataKeys ? dataKeys.map((keyConfig, index) => /* @__PURE__ */ jsx38(
+  const lines = dataKeys ? dataKeys.map((keyConfig, index) => /* @__PURE__ */ jsx39(
     Line,
     {
       type: "monotone",
@@ -6251,7 +6371,7 @@ var LineChart = ({
       name: keyConfig.name || keyConfig.dataKey
     },
     keyConfig.dataKey
-  )) : /* @__PURE__ */ jsx38(
+  )) : /* @__PURE__ */ jsx39(
     Line,
     {
       type: "monotone",
@@ -6261,9 +6381,9 @@ var LineChart = ({
       name: name || dataKey
     }
   );
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsLineChart, { data, margin, children: [
-    showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
-    xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsLineChart, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
+    xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
       XAxis,
       {
         dataKey: xAxis.dataKey,
@@ -6273,7 +6393,7 @@ var LineChart = ({
         label: xAxis.label ? { value: xAxis.label, position: "insideBottom", offset: -5 } : void 0
       }
     ),
-    yAxis && !yAxis.hide && /* @__PURE__ */ jsx38(
+    yAxis && !yAxis.hide && /* @__PURE__ */ jsx39(
       YAxis,
       {
         type: yAxis.type,
@@ -6282,8 +6402,8 @@ var LineChart = ({
         label: yAxis.label ? { value: yAxis.label, angle: -90, position: "insideLeft" } : void 0
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
-    showLegend && /* @__PURE__ */ jsx38(Legend, {}),
+    showTooltip && /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
+    showLegend && /* @__PURE__ */ jsx39(Legend, {}),
     lines
   ] }) }) });
 };
@@ -6314,8 +6434,8 @@ var PieChart = ({
     accentColors2[accentColor][1]
   ];
   const chartColors = colors || defaultColors;
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
+    /* @__PURE__ */ jsx39(
       Pie,
       {
         data,
@@ -6326,11 +6446,11 @@ var PieChart = ({
         fill: "#8884d8",
         dataKey,
         nameKey,
-        children: data.map((_entry, index) => /* @__PURE__ */ jsx38(Cell, { fill: chartColors[index % chartColors.length] }, `cell-${index}`))
+        children: data.map((_entry, index) => /* @__PURE__ */ jsx39(Cell, { fill: chartColors[index % chartColors.length] }, `cell-${index}`))
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
-    showLegend && /* @__PURE__ */ jsx38(Legend, {})
+    showTooltip && /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
+    showLegend && /* @__PURE__ */ jsx39(Legend, {})
   ] }) }) });
 };
 var AreaChart = ({
@@ -6362,7 +6482,7 @@ var AreaChart = ({
     accentColors2[accentColor][12],
     accentColors2[accentColor][1]
   ];
-  const areas = dataKeys ? dataKeys.map((keyConfig, index) => /* @__PURE__ */ jsx38(
+  const areas = dataKeys ? dataKeys.map((keyConfig, index) => /* @__PURE__ */ jsx39(
     Area,
     {
       type: "monotone",
@@ -6373,7 +6493,7 @@ var AreaChart = ({
       name: keyConfig.name || keyConfig.dataKey
     },
     keyConfig.dataKey
-  )) : /* @__PURE__ */ jsx38(
+  )) : /* @__PURE__ */ jsx39(
     Area,
     {
       type: "monotone",
@@ -6383,9 +6503,9 @@ var AreaChart = ({
       name: name || dataKey
     }
   );
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsAreaChart, { data, margin, children: [
-    showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
-    xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsAreaChart, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
+    xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
       XAxis,
       {
         dataKey: xAxis.dataKey,
@@ -6395,7 +6515,7 @@ var AreaChart = ({
         label: xAxis.label ? { value: xAxis.label, position: "insideBottom", offset: -5 } : void 0
       }
     ),
-    yAxis && !yAxis.hide && /* @__PURE__ */ jsx38(
+    yAxis && !yAxis.hide && /* @__PURE__ */ jsx39(
       YAxis,
       {
         type: yAxis.type,
@@ -6404,8 +6524,8 @@ var AreaChart = ({
         label: yAxis.label ? { value: yAxis.label, angle: -90, position: "insideLeft" } : void 0
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
-    showLegend && /* @__PURE__ */ jsx38(Legend, {}),
+    showTooltip && /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
+    showLegend && /* @__PURE__ */ jsx39(Legend, {}),
     areas
   ] }) }) });
 };
@@ -6426,9 +6546,9 @@ var ScatterChart = ({
   className
 }) => {
   const { accentColor } = useTheme();
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsScatterChart, { data, margin, children: [
-    showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
-    xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsScatterChart, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
+    xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
       XAxis,
       {
         dataKey: xDataKey,
@@ -6438,7 +6558,7 @@ var ScatterChart = ({
         label: xAxis.label ? { value: xAxis.label, position: "insideBottom", offset: -5 } : void 0
       }
     ),
-    yAxis && !yAxis.hide && /* @__PURE__ */ jsx38(
+    yAxis && !yAxis.hide && /* @__PURE__ */ jsx39(
       YAxis,
       {
         dataKey: yDataKey,
@@ -6448,9 +6568,9 @@ var ScatterChart = ({
         label: yAxis.label ? { value: yAxis.label, angle: -90, position: "insideLeft" } : void 0
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
-    showLegend && /* @__PURE__ */ jsx38(Legend, {}),
-    /* @__PURE__ */ jsx38(Scatter, { name, dataKey: yDataKey, fill: fill || accentColors2[accentColor][6] })
+    showTooltip && /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
+    showLegend && /* @__PURE__ */ jsx39(Legend, {}),
+    /* @__PURE__ */ jsx39(Scatter, { name, dataKey: yDataKey, fill: fill || accentColors2[accentColor][6] })
   ] }) }) });
 };
 var RadarChart = ({
@@ -6467,11 +6587,11 @@ var RadarChart = ({
   className
 }) => {
   const { accentColor } = useTheme();
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsRadarChart, { data, children: [
-    /* @__PURE__ */ jsx38(PolarGrid, {}),
-    /* @__PURE__ */ jsx38(PolarAngleAxis, { dataKey: nameKey }),
-    /* @__PURE__ */ jsx38(PolarRadiusAxis, {}),
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsRadarChart, { data, children: [
+    /* @__PURE__ */ jsx39(PolarGrid, {}),
+    /* @__PURE__ */ jsx39(PolarAngleAxis, { dataKey: nameKey }),
+    /* @__PURE__ */ jsx39(PolarRadiusAxis, {}),
+    /* @__PURE__ */ jsx39(
       Radar,
       {
         name: name || dataKey,
@@ -6481,8 +6601,8 @@ var RadarChart = ({
         fillOpacity: 0.6
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
-    showLegend && /* @__PURE__ */ jsx38(Legend, {})
+    showTooltip && /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
+    showLegend && /* @__PURE__ */ jsx39(Legend, {})
   ] }) }) });
 };
 var DonutChart = ({
@@ -6539,9 +6659,9 @@ var DonutChart = ({
         width: "200%",
         height: "200%",
         children: [
-          /* @__PURE__ */ jsx38("feOffset", { dx: "0", dy: "2" }),
-          /* @__PURE__ */ jsx38("feGaussianBlur", { stdDeviation: "2", result: "offsetBlur" }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39("feOffset", { dx: "0", dy: "2" }),
+          /* @__PURE__ */ jsx39("feGaussianBlur", { stdDeviation: "2", result: "offsetBlur" }),
+          /* @__PURE__ */ jsx39(
             "feComposite",
             {
               in: "SourceAlpha",
@@ -6550,8 +6670,8 @@ var DonutChart = ({
               result: "innerShadow"
             }
           ),
-          /* @__PURE__ */ jsx38("feFlood", { floodColor: "hsl(var(--muted))", floodOpacity: "0.9", result: "color" }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39("feFlood", { floodColor: "hsl(var(--muted))", floodOpacity: "0.9", result: "color" }),
+          /* @__PURE__ */ jsx39(
             "feComposite",
             {
               in: "color",
@@ -6560,7 +6680,7 @@ var DonutChart = ({
               result: "shadow"
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "feComposite",
             {
               in: "shadow",
@@ -6571,7 +6691,7 @@ var DonutChart = ({
         ]
       }
     ),
-    styling.enableShadows && /* @__PURE__ */ jsx38(
+    styling.enableShadows && /* @__PURE__ */ jsx39(
       "filter",
       {
         id: "dropShadow",
@@ -6579,7 +6699,7 @@ var DonutChart = ({
         y: "-10%",
         width: "120%",
         height: "120%",
-        children: /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx39(
           "feDropShadow",
           {
             dx: "0",
@@ -6600,14 +6720,14 @@ var DonutChart = ({
         x2: gradient.x2 || "100%",
         y2: gradient.y2 || "100%",
         children: [
-          /* @__PURE__ */ jsx38("stop", { offset: "0%", stopColor: gradient.colors[0] }),
-          /* @__PURE__ */ jsx38("stop", { offset: "100%", stopColor: gradient.colors[1] })
+          /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: gradient.colors[0] }),
+          /* @__PURE__ */ jsx39("stop", { offset: "100%", stopColor: gradient.colors[1] })
         ]
       },
       gradient.id
     ))
   ] }) : null;
-  const customTooltip = tooltip ? /* @__PURE__ */ jsx38(
+  const customTooltip = tooltip ? /* @__PURE__ */ jsx39(
     Tooltip2,
     {
       formatter: tooltip.formatter,
@@ -6615,10 +6735,10 @@ var DonutChart = ({
       labelStyle: tooltip.labelStyle,
       contentStyle: tooltip.contentStyle
     }
-  ) : showTooltip ? /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
+  ) : showTooltip ? /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
     gradientDefs,
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       Pie,
       {
         data,
@@ -6631,7 +6751,7 @@ var DonutChart = ({
         nameKey,
         strokeLinecap: styling.progressArc.strokeLinecap,
         filter: styling.progressArc.filter,
-        children: data.map((_entry, index) => /* @__PURE__ */ jsx38(
+        children: data.map((_entry, index) => /* @__PURE__ */ jsx39(
           Cell,
           {
             fill: chartColors[index % chartColors.length]
@@ -6641,7 +6761,7 @@ var DonutChart = ({
       }
     ),
     customTooltip,
-    showLegend && /* @__PURE__ */ jsx38(Legend, {})
+    showLegend && /* @__PURE__ */ jsx39(Legend, {})
   ] }) }) });
 };
 var ProgressCard = ({
@@ -6689,13 +6809,13 @@ var ProgressCard = ({
       onClick: () => onClick?.(questionNum),
       children: [
         /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx38("span", { className: cn("font-bold", typography.questionFontSize, typography.questionColor), children: questionNum }),
+          /* @__PURE__ */ jsx39("span", { className: cn("font-bold", typography.questionFontSize, typography.questionColor), children: questionNum }),
           /* @__PURE__ */ jsxs24("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
             normalizedPercentage.toFixed(1),
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ jsx38("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs24("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
+        /* @__PURE__ */ jsx39("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs24("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
           /* @__PURE__ */ jsxs24("defs", { children: [
             enableGradients && /* @__PURE__ */ jsxs24(
               "linearGradient",
@@ -6706,8 +6826,8 @@ var ProgressCard = ({
                 x2: "100%",
                 y2: "100%",
                 children: [
-                  /* @__PURE__ */ jsx38("stop", { offset: "0%", stopColor: startColor }),
-                  /* @__PURE__ */ jsx38("stop", { offset: "100%", stopColor: endColor })
+                  /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: startColor }),
+                  /* @__PURE__ */ jsx39("stop", { offset: "100%", stopColor: endColor })
                 ]
               }
             ),
@@ -6721,9 +6841,9 @@ var ProgressCard = ({
                   width: "200%",
                   height: "200%",
                   children: [
-                    /* @__PURE__ */ jsx38("feOffset", { dx: "0", dy: "2" }),
-                    /* @__PURE__ */ jsx38("feGaussianBlur", { stdDeviation: "2", result: "offsetBlur" }),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39("feOffset", { dx: "0", dy: "2" }),
+                    /* @__PURE__ */ jsx39("feGaussianBlur", { stdDeviation: "2", result: "offsetBlur" }),
+                    /* @__PURE__ */ jsx39(
                       "feComposite",
                       {
                         in: "SourceAlpha",
@@ -6732,8 +6852,8 @@ var ProgressCard = ({
                         result: "innerShadow"
                       }
                     ),
-                    /* @__PURE__ */ jsx38("feFlood", { floodColor: "#c0c0c0", floodOpacity: "0.9", result: "color" }),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39("feFlood", { floodColor: "#c0c0c0", floodOpacity: "0.9", result: "color" }),
+                    /* @__PURE__ */ jsx39(
                       "feComposite",
                       {
                         in: "color",
@@ -6742,7 +6862,7 @@ var ProgressCard = ({
                         result: "shadow"
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39(
                       "feComposite",
                       {
                         in: "shadow",
@@ -6753,7 +6873,7 @@ var ProgressCard = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "filter",
                 {
                   id: shadowId,
@@ -6761,7 +6881,7 @@ var ProgressCard = ({
                   y: "-10%",
                   width: "120%",
                   height: "120%",
-                  children: /* @__PURE__ */ jsx38(
+                  children: /* @__PURE__ */ jsx39(
                     "feDropShadow",
                     {
                       dx: "0",
@@ -6775,7 +6895,7 @@ var ProgressCard = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               cx: "50",
@@ -6787,7 +6907,7 @@ var ProgressCard = ({
               filter: enableShadows ? `url(#${bgShadowId})` : void 0
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               cx: "50",
@@ -6841,10 +6961,10 @@ var ProgressDonut = ({
     accentColors2[accentColor][1]
   ];
   if (!data || data.length === 0) {
-    return /* @__PURE__ */ jsx38("div", { className: cn("text-gray-500", className), children: "No data provided" });
+    return /* @__PURE__ */ jsx39("div", { className: cn("text-gray-500", className), children: "No data provided" });
   }
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
+    /* @__PURE__ */ jsx39(
       Pie,
       {
         data,
@@ -6858,12 +6978,12 @@ var ProgressDonut = ({
         children: data.map((_entry, index) => {
           const percentage = Math.min(100, Math.max(0, _entry.value));
           const fillColor = colorFn(percentage) || defaultColors[index % defaultColors.length];
-          return /* @__PURE__ */ jsx38(Cell, { fill: fillColor }, `cell-${index}`);
+          return /* @__PURE__ */ jsx39(Cell, { fill: fillColor }, `cell-${index}`);
         })
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
-    showLegend && /* @__PURE__ */ jsx38(Legend, {})
+    showTooltip && /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }),
+    showLegend && /* @__PURE__ */ jsx39(Legend, {})
   ] }) }) });
 };
 var MultiProgressDonut = ({
@@ -6890,16 +7010,16 @@ var MultiProgressDonut = ({
   };
   const colorFn = getColor || defaultGetColor;
   if (!data || data.length === 0) {
-    return /* @__PURE__ */ jsx38("div", { className: cn("text-gray-500", className), children: "No data provided" });
+    return /* @__PURE__ */ jsx39("div", { className: cn("text-gray-500", className), children: "No data provided" });
   }
-  return /* @__PURE__ */ jsx38("div", { className: cn("flex flex-wrap gap-4", className), children: data.map((item, index) => {
+  return /* @__PURE__ */ jsx39("div", { className: cn("flex flex-wrap gap-4", className), children: data.map((item, index) => {
     const percentage = Math.min(100, Math.max(0, item.value));
     const gradientId = `progress-gradient-${index}`;
     const shadowId = `progress-shadow-${index}`;
     const bgShadowId = `progress-bg-shadow-${index}`;
     const [startColor, endColor] = colorFn(percentage);
     return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2", children: [
-      item.label && /* @__PURE__ */ jsx38("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: item.label }),
+      item.label && /* @__PURE__ */ jsx39("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: item.label }),
       /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs24("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
           /* @__PURE__ */ jsxs24("defs", { children: [
@@ -6912,8 +7032,8 @@ var MultiProgressDonut = ({
                 x2: "100%",
                 y2: "100%",
                 children: [
-                  /* @__PURE__ */ jsx38("stop", { offset: "0%", stopColor: startColor }),
-                  /* @__PURE__ */ jsx38("stop", { offset: "100%", stopColor: endColor })
+                  /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: startColor }),
+                  /* @__PURE__ */ jsx39("stop", { offset: "100%", stopColor: endColor })
                 ]
               }
             ),
@@ -6927,9 +7047,9 @@ var MultiProgressDonut = ({
                   width: "200%",
                   height: "200%",
                   children: [
-                    /* @__PURE__ */ jsx38("feOffset", { dx: "0", dy: "2" }),
-                    /* @__PURE__ */ jsx38("feGaussianBlur", { stdDeviation: "2", result: "offsetBlur" }),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39("feOffset", { dx: "0", dy: "2" }),
+                    /* @__PURE__ */ jsx39("feGaussianBlur", { stdDeviation: "2", result: "offsetBlur" }),
+                    /* @__PURE__ */ jsx39(
                       "feComposite",
                       {
                         in: "SourceAlpha",
@@ -6938,8 +7058,8 @@ var MultiProgressDonut = ({
                         result: "innerShadow"
                       }
                     ),
-                    /* @__PURE__ */ jsx38("feFlood", { floodColor: "#c0c0c0", floodOpacity: "0.9", result: "color" }),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39("feFlood", { floodColor: "#c0c0c0", floodOpacity: "0.9", result: "color" }),
+                    /* @__PURE__ */ jsx39(
                       "feComposite",
                       {
                         in: "color",
@@ -6948,7 +7068,7 @@ var MultiProgressDonut = ({
                         result: "shadow"
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39(
                       "feComposite",
                       {
                         in: "shadow",
@@ -6959,7 +7079,7 @@ var MultiProgressDonut = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "filter",
                 {
                   id: shadowId,
@@ -6967,7 +7087,7 @@ var MultiProgressDonut = ({
                   y: "-10%",
                   width: "120%",
                   height: "120%",
-                  children: /* @__PURE__ */ jsx38(
+                  children: /* @__PURE__ */ jsx39(
                     "feDropShadow",
                     {
                       dx: "0",
@@ -6981,7 +7101,7 @@ var MultiProgressDonut = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               cx: "50",
@@ -6993,7 +7113,7 @@ var MultiProgressDonut = ({
               filter: enableShadows ? `url(#${bgShadowId})` : void 0
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               cx: "50",
@@ -7010,7 +7130,7 @@ var MultiProgressDonut = ({
             }
           )
         ] }),
-        showPercentage && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs24("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
+        showPercentage && /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs24("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
           percentage.toFixed(1),
           "%"
         ] }) })
@@ -7081,10 +7201,10 @@ var PackedBubbleChart = ({
   titleStyle,
   className
 }) => {
-  const containerRef = React38.useRef(null);
-  const [dimensions, setDimensions] = React38.useState({ width: 400, height: 300 });
-  const [bubbles, setBubbles] = React38.useState([]);
-  React38.useEffect(() => {
+  const containerRef = React39.useRef(null);
+  const [dimensions, setDimensions] = React39.useState({ width: 400, height: 300 });
+  const [bubbles, setBubbles] = React39.useState([]);
+  React39.useEffect(() => {
     const updateDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -7098,7 +7218,7 @@ var PackedBubbleChart = ({
     window.addEventListener("resize", updateDimensions);
     return () => window.removeEventListener("resize", updateDimensions);
   }, [height]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (data.length === 0) {
       setBubbles([]);
       return;
@@ -7120,7 +7240,7 @@ var PackedBubbleChart = ({
       className: cn("relative w-full", className),
       style: { height: typeof height === "number" ? `${height}px` : height },
       children: [
-        title && /* @__PURE__ */ jsx38(
+        title && /* @__PURE__ */ jsx39(
           "div",
           {
             className: "text-center text-sm font-bold text-[#31456A] dark:text-slate-200",
@@ -7128,13 +7248,13 @@ var PackedBubbleChart = ({
             children: title
           }
         ),
-        /* @__PURE__ */ jsx38("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsx39("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs24(
           "g",
           {
             onClick: () => onBubbleClick?.(bubble.data),
             style: { cursor: onBubbleClick ? "pointer" : "default" },
             children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "circle",
                 {
                   cx: bubble.x,
@@ -7145,7 +7265,7 @@ var PackedBubbleChart = ({
                   className: "transition-all duration-200 hover:opacity-100"
                 }
               ),
-              showLabels && /* @__PURE__ */ jsx38(
+              showLabels && /* @__PURE__ */ jsx39(
                 "text",
                 {
                   x: bubble.x,
@@ -7161,7 +7281,7 @@ var PackedBubbleChart = ({
                   children: bubble.data.name
                 }
               ),
-              showValues && /* @__PURE__ */ jsx38(
+              showValues && /* @__PURE__ */ jsx39(
                 "text",
                 {
                   x: bubble.x,
@@ -7177,7 +7297,7 @@ var PackedBubbleChart = ({
                   children: bubble.data.value
                 }
               ),
-              /* @__PURE__ */ jsx38("title", { children: `${bubble.data.name}: ${bubble.data.value}` })
+              /* @__PURE__ */ jsx39("title", { children: `${bubble.data.name}: ${bubble.data.value}` })
             ]
           },
           `bubble-${index}-${bubble.data.name}`
@@ -7187,10 +7307,93 @@ var PackedBubbleChart = ({
   );
 };
 
+// src/components/bottom-navigation.tsx
+import * as React40 from "react";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+var BottomNavigationContext = React40.createContext({
+  value: null,
+  onChange: () => {
+  },
+  showLabels: false
+});
+var BottomNavigation = React40.forwardRef(
+  ({ className, value, onChange = () => {
+  }, showLabels = false, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx40(BottomNavigationContext.Provider, { value: { value, onChange, showLabels }, children: /* @__PURE__ */ jsx40(
+      "div",
+      {
+        ref,
+        role: "navigation",
+        className: cn(
+          "flex h-14 w-full items-stretch bg-background border-t border-border",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+BottomNavigation.displayName = "BottomNavigation";
+var BottomNavigationAction = React40.forwardRef(
+  ({ className, label, icon, value, showLabel, disabled, onClick, ...props }, ref) => {
+    const ctx = React40.useContext(BottomNavigationContext);
+    const selected = ctx.value !== void 0 && ctx.value !== null && ctx.value === value;
+    const labelVisible = showLabel ?? ctx.showLabels ?? selected;
+    const handleClick = (e) => {
+      ctx.onChange(e, value);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs25(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": selected,
+        disabled,
+        onClick: handleClick,
+        className: cn(
+          "flex flex-1 flex-col items-center justify-center gap-0.5 px-2 py-1",
+          "text-xs font-medium transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+          "disabled:pointer-events-none disabled:opacity-40",
+          selected ? "text-accent" : "text-muted-foreground hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx40(
+            "span",
+            {
+              className: cn(
+                "transition-transform duration-150",
+                selected && "scale-110"
+              ),
+              children: icon
+            }
+          ),
+          label !== void 0 && /* @__PURE__ */ jsx40(
+            "span",
+            {
+              className: cn(
+                "transition-all duration-150 leading-none",
+                labelVisible ? "opacity-100 max-h-4" : "opacity-0 max-h-0 overflow-hidden"
+              ),
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+BottomNavigationAction.displayName = "BottomNavigationAction";
+
 // src/components/breadcrumbs.tsx
-import * as React39 from "react";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
-var Breadcrumbs = React39.forwardRef(
+import * as React41 from "react";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+var Breadcrumbs = React41.forwardRef(
   ({
     separator,
     maxItems,
@@ -7200,9 +7403,9 @@ var Breadcrumbs = React39.forwardRef(
     children,
     ...props
   }, ref) => {
-    const childArray = React39.Children.toArray(children);
+    const childArray = React41.Children.toArray(children);
     const totalItems = childArray.length;
-    const separatorElement = separator ?? /* @__PURE__ */ jsx39(
+    const separatorElement = separator ?? /* @__PURE__ */ jsx41(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -7215,7 +7418,7 @@ var Breadcrumbs = React39.forwardRef(
         strokeLinecap: "round",
         strokeLinejoin: "round",
         className: "text-muted-foreground",
-        children: /* @__PURE__ */ jsx39("path", { d: "m9 18 6-6-6-6" })
+        children: /* @__PURE__ */ jsx41("path", { d: "m9 18 6-6-6-6" })
       }
     );
     const shouldCollapse = maxItems && totalItems > maxItems;
@@ -7225,20 +7428,20 @@ var Breadcrumbs = React39.forwardRef(
       const endItems = childArray.slice(-itemsAfterCollapse);
       displayedItems = [
         ...startItems,
-        /* @__PURE__ */ jsx39(BreadcrumbEllipsis, {}, "ellipsis"),
+        /* @__PURE__ */ jsx41(BreadcrumbEllipsis, {}, "ellipsis"),
         ...endItems
       ];
     } else {
       displayedItems = childArray;
     }
-    return /* @__PURE__ */ jsx39("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx39("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs25("li", { className: "flex items-center gap-1.5", children: [
-      index > 0 && /* @__PURE__ */ jsx39("span", { className: "flex items-center", "aria-hidden": "true", children: separatorElement }),
+    return /* @__PURE__ */ jsx41("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx41("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs26("li", { className: "flex items-center gap-1.5", children: [
+      index > 0 && /* @__PURE__ */ jsx41("span", { className: "flex items-center", "aria-hidden": "true", children: separatorElement }),
       child
     ] }, index)) }) });
   }
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-var BreadcrumbItem = React39.forwardRef(
+var BreadcrumbItem = React41.forwardRef(
   ({ current = false, href, onClick, className, children, ...props }, ref) => {
     const baseClasses = cn(
       "text-sm transition-colors",
@@ -7247,7 +7450,7 @@ var BreadcrumbItem = React39.forwardRef(
       className
     );
     if (current) {
-      return /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx41(
         "span",
         {
           ref,
@@ -7259,7 +7462,7 @@ var BreadcrumbItem = React39.forwardRef(
       );
     }
     if (href) {
-      return /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx41(
         "a",
         {
           href,
@@ -7269,7 +7472,7 @@ var BreadcrumbItem = React39.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx41(
       "span",
       {
         ref,
@@ -7290,8 +7493,8 @@ var BreadcrumbItem = React39.forwardRef(
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var BreadcrumbLink = React41.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
     "a",
     {
       ref,
@@ -7304,8 +7507,8 @@ var BreadcrumbLink = React39.forwardRef(
   )
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbSeparator = React39.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx39(
+var BreadcrumbSeparator = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx41(
     "span",
     {
       ref,
@@ -7313,7 +7516,7 @@ var BreadcrumbSeparator = React39.forwardRef(
       "aria-hidden": "true",
       className: cn("text-muted-foreground", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx39(
+      children: children ?? /* @__PURE__ */ jsx41(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -7325,15 +7528,15 @@ var BreadcrumbSeparator = React39.forwardRef(
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx39("path", { d: "m9 18 6-6-6-6" })
+          children: /* @__PURE__ */ jsx41("path", { d: "m9 18 6-6-6-6" })
         }
       )
     }
   )
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsis = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var BreadcrumbEllipsis = React41.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
     "span",
     {
       ref,
@@ -7341,7 +7544,7 @@ var BreadcrumbEllipsis = React39.forwardRef(
       "aria-hidden": "true",
       className: cn("text-sm text-muted-foreground", className),
       ...props,
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -7354,9 +7557,9 @@ var BreadcrumbEllipsis = React39.forwardRef(
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "1" }),
-            /* @__PURE__ */ jsx39("circle", { cx: "19", cy: "12", r: "1" }),
-            /* @__PURE__ */ jsx39("circle", { cx: "5", cy: "12", r: "1" })
+            /* @__PURE__ */ jsx41("circle", { cx: "12", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx41("circle", { cx: "19", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx41("circle", { cx: "5", cy: "12", r: "1" })
           ]
         }
       )
@@ -7364,8 +7567,8 @@ var BreadcrumbEllipsis = React39.forwardRef(
   )
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
-var BreadcrumbPage = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var BreadcrumbPage = React41.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
     "span",
     {
       ref,
@@ -7378,16 +7581,16 @@ var BreadcrumbPage = React39.forwardRef(
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 // src/components/dropdown-menu.tsx
-import * as React40 from "react";
+import * as React42 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs27 } 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 = React40.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
+var DropdownMenuSubTrigger = React42.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs27(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -7401,7 +7604,7 @@ var DropdownMenuSubTrigger = React40.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42(
         "svg",
         {
           className: "ml-auto h-4 w-4",
@@ -7412,14 +7615,14 @@ var DropdownMenuSubTrigger = React40.forwardRef(({ className, inset, children, .
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx40("path", { d: "m9 18 6-6-6-6" })
+          children: /* @__PURE__ */ jsx42("path", { d: "m9 18 6-6-6-6" })
         }
       )
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DropdownMenuSubContent = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -7436,7 +7639,7 @@ var DropdownMenuSubContent = React40.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React40.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx40(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx40(
+var DropdownMenuContent = React42.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx42(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx42(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -7454,7 +7657,7 @@ var DropdownMenuContent = React40.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React40.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DropdownMenuItem = React42.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx42(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -7470,7 +7673,7 @@ var DropdownMenuItem = React40.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs26(
+var DropdownMenuCheckboxItem = React42.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs27(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -7483,7 +7686,7 @@ var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx40("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx40(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx42(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx42(
         "svg",
         {
           className: "h-4 w-4",
@@ -7494,7 +7697,7 @@ var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checke
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx40("path", { d: "M20 6 9 17l-5-5" })
+          children: /* @__PURE__ */ jsx42("path", { d: "M20 6 9 17l-5-5" })
         }
       ) }) }),
       children
@@ -7502,7 +7705,7 @@ var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
+var DropdownMenuRadioItem = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs27(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -7514,13 +7717,13 @@ var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx40("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx40(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx42(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx42(
         "svg",
         {
           className: "h-2 w-2 fill-current",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx40("circle", { cx: "12", cy: "12", r: "10" })
+          children: /* @__PURE__ */ jsx42("circle", { cx: "12", cy: "12", r: "10" })
         }
       ) }) }),
       children
@@ -7528,7 +7731,7 @@ var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React40.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DropdownMenuLabel = React42.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx42(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -7541,7 +7744,7 @@ var DropdownMenuLabel = React40.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DropdownMenuSeparator = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -7554,7 +7757,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
@@ -7565,14 +7768,14 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/drawer.tsx
-import * as React41 from "react";
+import * as React43 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var Drawer = DialogPrimitive2.Root;
 var DrawerTrigger = DialogPrimitive2.Trigger;
 var DrawerClose = DialogPrimitive2.Close;
 var DrawerPortal = DialogPrimitive2.Portal;
-var DrawerOverlay = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var DrawerOverlay = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -7592,9 +7795,9 @@ var slideVariants = {
   top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
   bottom: "inset-x-0 bottom-0 w-full data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
 };
-var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs27(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx41(DrawerOverlay, {}),
-  /* @__PURE__ */ jsxs27(
+var DrawerContent = React43.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs28(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx43(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs28(
     DialogPrimitive2.Content,
     {
       ref,
@@ -7608,7 +7811,7 @@ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, clas
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsxs27(
+        showClose && /* @__PURE__ */ jsxs28(
           DrawerClose,
           {
             className: cn(
@@ -7618,7 +7821,7 @@ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, clas
               "disabled:pointer-events-none"
             ),
             children: [
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx43(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -7631,10 +7834,10 @@ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, clas
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   className: "h-4 w-4",
-                  children: /* @__PURE__ */ jsx41("path", { d: "M18 6 6 18M6 6l12 12" })
+                  children: /* @__PURE__ */ jsx43("path", { d: "M18 6 6 18M6 6l12 12" })
                 }
               ),
-              /* @__PURE__ */ jsx41("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
@@ -7643,8 +7846,8 @@ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, clas
   )
 ] }));
 DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = React41.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var DrawerHeader = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -7654,7 +7857,7 @@ var DrawerHeader = React41.forwardRef(
   )
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var DrawerTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   DialogPrimitive2.Title,
   {
     ref,
@@ -7663,7 +7866,7 @@ var DrawerTitle = React41.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
-var DrawerDescription = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var DrawerDescription = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   DialogPrimitive2.Description,
   {
     ref,
@@ -7672,8 +7875,8 @@ var DrawerDescription = React41.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
-var DrawerBody = React41.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var DrawerBody = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -7683,8 +7886,8 @@ var DrawerBody = React41.forwardRef(
   )
 );
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = React41.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var DrawerFooter = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -7710,16 +7913,16 @@ var SheetBody = DrawerBody;
 var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
-import * as React42 from "react";
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import * as React44 from "react";
+import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var sizeClasses5 = {
   sm: "h-12",
   md: "h-14",
   lg: "h-16"
 };
-var TopBar = React42.forwardRef(
+var TopBar = React44.forwardRef(
   ({ className, bordered = true, sticky = false, size = "md", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       "header",
       {
         ref,
@@ -7737,23 +7940,23 @@ var TopBar = React42.forwardRef(
   }
 );
 TopBar.displayName = "TopBar";
-var TopBarBrand = React42.forwardRef(
+var TopBarBrand = React44.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs28(Fragment6, { children: [
-      logo && /* @__PURE__ */ jsx42("span", { className: "shrink-0", children: logo }),
-      name && /* @__PURE__ */ jsx42("span", { className: "font-semibold text-lg", children: name }),
+    const content = /* @__PURE__ */ jsxs29(Fragment6, { children: [
+      logo && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: logo }),
+      name && /* @__PURE__ */ jsx44("span", { className: "font-semibold text-lg", children: name }),
       children
     ] });
     if (href) {
-      return /* @__PURE__ */ jsx42("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: /* @__PURE__ */ jsx42("a", { href, className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: content }) });
+      return /* @__PURE__ */ jsx44("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: /* @__PURE__ */ jsx44("a", { href, className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: content }) });
     }
-    return /* @__PURE__ */ jsx42("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: content });
+    return /* @__PURE__ */ jsx44("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: content });
   }
 );
 TopBarBrand.displayName = "TopBarBrand";
-var TopBarNav = React42.forwardRef(
+var TopBarNav = React44.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       "nav",
       {
         ref,
@@ -7765,9 +7968,9 @@ var TopBarNav = React42.forwardRef(
   }
 );
 TopBarNav.displayName = "TopBarNav";
-var TopBarNavItem = React42.forwardRef(
+var TopBarNavItem = React44.forwardRef(
   ({ className, active, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       "a",
       {
         ref,
@@ -7783,9 +7986,9 @@ var TopBarNavItem = React42.forwardRef(
   }
 );
 TopBarNavItem.displayName = "TopBarNavItem";
-var TopBarSection = React42.forwardRef(
+var TopBarSection = React44.forwardRef(
   ({ className, align = "left", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       "div",
       {
         ref,
@@ -7805,9 +8008,9 @@ var TopBarSection = React42.forwardRef(
   }
 );
 TopBarSection.displayName = "TopBarSection";
-var TopBarDivider = React42.forwardRef(
+var TopBarDivider = React44.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       "div",
       {
         ref,
@@ -7820,17 +8023,17 @@ var TopBarDivider = React42.forwardRef(
 TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
-import * as React43 from "react";
-import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
-var SidebarContext = React43.createContext(void 0);
+import * as React45 from "react";
+import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+var SidebarContext = React45.createContext(void 0);
 var useSidebar = () => {
-  const context = React43.useContext(SidebarContext);
+  const context = React45.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a Sidebar");
   }
   return context;
 };
-var Sidebar = React43.forwardRef(
+var Sidebar = React45.forwardRef(
   ({
     className,
     collapsed: controlledCollapsed,
@@ -7842,10 +8045,10 @@ var Sidebar = React43.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React43.useState(defaultCollapsed);
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React45.useState(defaultCollapsed);
     const isControlled = controlledCollapsed !== void 0;
     const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
-    const setCollapsed = React43.useCallback(
+    const setCollapsed = React45.useCallback(
       (value) => {
         if (!isControlled) {
           setUncontrolledCollapsed(value);
@@ -7854,7 +8057,7 @@ var Sidebar = React43.forwardRef(
       },
       [isControlled, onCollapsedChange]
     );
-    return /* @__PURE__ */ jsx43(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx45(
       "aside",
       {
         ref,
@@ -7874,9 +8077,9 @@ var Sidebar = React43.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React43.forwardRef(
+var SidebarHeader = React45.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         ref,
@@ -7888,9 +8091,9 @@ var SidebarHeader = React43.forwardRef(
   }
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = React43.forwardRef(
+var SidebarContent = React45.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         ref,
@@ -7902,9 +8105,9 @@ var SidebarContent = React43.forwardRef(
   }
 );
 SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = React43.forwardRef(
+var SidebarFooter = React45.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         ref,
@@ -7916,25 +8119,25 @@ var SidebarFooter = React43.forwardRef(
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarGroup = React43.forwardRef(
+var SidebarGroup = React45.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    return /* @__PURE__ */ jsxs29("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
-      label && !collapsed && /* @__PURE__ */ jsx43("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
-      label && collapsed && /* @__PURE__ */ jsx43("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx43("div", { className: "h-px w-4 bg-border" }) }),
-      /* @__PURE__ */ jsx43("div", { className: "space-y-1", children })
+    return /* @__PURE__ */ jsxs30("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+      label && !collapsed && /* @__PURE__ */ jsx45("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
+      label && collapsed && /* @__PURE__ */ jsx45("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx45("div", { className: "h-px w-4 bg-border" }) }),
+      /* @__PURE__ */ jsx45("div", { className: "space-y-1", children })
     ] });
   }
 );
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarItem = React43.forwardRef(
+var SidebarItem = React45.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    const content = /* @__PURE__ */ jsxs29(Fragment7, { children: [
-      icon && /* @__PURE__ */ jsx43("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
-      !collapsed && /* @__PURE__ */ jsxs29(Fragment7, { children: [
-        /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children }),
-        badge && /* @__PURE__ */ jsx43("span", { className: "shrink-0", children: badge })
+    const content = /* @__PURE__ */ jsxs30(Fragment7, { children: [
+      icon && /* @__PURE__ */ jsx45("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
+      !collapsed && /* @__PURE__ */ jsxs30(Fragment7, { children: [
+        /* @__PURE__ */ jsx45("span", { className: "flex-1 truncate", children }),
+        badge && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: badge })
       ] })
     ] });
     const itemClasses = cn(
@@ -7945,9 +8148,9 @@ var SidebarItem = React43.forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx43("div", { ref, ...props, children: /* @__PURE__ */ jsx43("a", { href, className: itemClasses, children: content }) });
+      return /* @__PURE__ */ jsx45("div", { ref, ...props, children: /* @__PURE__ */ jsx45("a", { href, className: itemClasses, children: content }) });
     }
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         ref,
@@ -7962,20 +8165,20 @@ var SidebarItem = React43.forwardRef(
   }
 );
 SidebarItem.displayName = "SidebarItem";
-var SidebarSubMenu = React43.forwardRef(
+var SidebarSubMenu = React45.forwardRef(
   ({ className, icon, label, defaultOpen = false, children, ...props }, ref) => {
-    const [open, setOpen] = React43.useState(defaultOpen);
+    const [open, setOpen] = React45.useState(defaultOpen);
     const { collapsed } = useSidebar();
-    React43.useEffect(() => {
+    React45.useEffect(() => {
       if (collapsed) {
         setOpen(false);
       }
     }, [collapsed]);
     if (collapsed) {
-      return /* @__PURE__ */ jsx43(SidebarItem, { icon, className, children: label });
+      return /* @__PURE__ */ jsx45(SidebarItem, { icon, className, children: label });
     }
-    return /* @__PURE__ */ jsxs29("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs30(
         "div",
         {
           className: cn(
@@ -7986,9 +8189,9 @@ var SidebarSubMenu = React43.forwardRef(
           role: "button",
           tabIndex: 0,
           children: [
-            icon && /* @__PURE__ */ jsx43("span", { className: "shrink-0", children: icon }),
-            /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children: label }),
-            /* @__PURE__ */ jsx43(
+            icon && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: icon }),
+            /* @__PURE__ */ jsx45("span", { className: "flex-1 truncate", children: label }),
+            /* @__PURE__ */ jsx45(
               "svg",
               {
                 className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-90"),
@@ -7999,21 +8202,21 @@ var SidebarSubMenu = React43.forwardRef(
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsx43("path", { d: "m9 18 6-6-6-6" })
+                children: /* @__PURE__ */ jsx45("path", { d: "m9 18 6-6-6-6" })
               }
             )
           ]
         }
       ),
-      open && /* @__PURE__ */ jsx43("div", { className: "ml-4 pl-3 border-l border-border space-y-1 mt-1", children })
+      open && /* @__PURE__ */ jsx45("div", { className: "ml-4 pl-3 border-l border-border space-y-1 mt-1", children })
     ] });
   }
 );
 SidebarSubMenu.displayName = "SidebarSubMenu";
-var SidebarToggle = React43.forwardRef(
+var SidebarToggle = React45.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { collapsed, setCollapsed } = useSidebar();
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(
       "button",
       {
         ref,
@@ -8027,7 +8230,7 @@ var SidebarToggle = React43.forwardRef(
         ),
         "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
         ...props,
-        children: children || /* @__PURE__ */ jsxs29(
+        children: children || /* @__PURE__ */ jsxs30(
           "svg",
           {
             className: cn("h-5 w-5 transition-transform", collapsed && "rotate-180"),
@@ -8039,9 +8242,9 @@ var SidebarToggle = React43.forwardRef(
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx43("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-              /* @__PURE__ */ jsx43("path", { d: "M9 3v18" }),
-              /* @__PURE__ */ jsx43("path", { d: "m14 9 3 3-3 3" })
+              /* @__PURE__ */ jsx45("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsx45("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsx45("path", { d: "m14 9 3 3-3 3" })
             ]
           }
         )
@@ -8052,17 +8255,17 @@ var SidebarToggle = React43.forwardRef(
 SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
-import * as React44 from "react";
-import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
-var SidebarRailContext = React44.createContext(void 0);
+import * as React46 from "react";
+import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+var SidebarRailContext = React46.createContext(void 0);
 var useSidebarRail = () => {
-  const context = React44.useContext(SidebarRailContext);
+  const context = React46.useContext(SidebarRailContext);
   if (!context) {
     throw new Error("useSidebarRail must be used within a SidebarRail");
   }
   return context;
 };
-var SidebarRail = React44.forwardRef(
+var SidebarRail = React46.forwardRef(
   ({
     className,
     defaultActiveRail = null,
@@ -8080,14 +8283,14 @@ var SidebarRail = React44.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React44.useState(defaultActiveRail);
-    const [expanded, setExpanded] = React44.useState(!!defaultActiveRail);
-    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React44.useState(defaultRailExpanded);
+    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React46.useState(defaultActiveRail);
+    const [expanded, setExpanded] = React46.useState(!!defaultActiveRail);
+    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React46.useState(defaultRailExpanded);
     const isControlled = controlledActiveRail !== void 0;
     const activeRail = isControlled ? controlledActiveRail : uncontrolledActiveRail;
     const isRailControlled = controlledRailExpanded !== void 0;
     const railExpanded = isRailControlled ? controlledRailExpanded : uncontrolledRailExpanded;
-    const setActiveRail = React44.useCallback(
+    const setActiveRail = React46.useCallback(
       (rail) => {
         if (!isControlled) {
           setUncontrolledActiveRail(rail);
@@ -8097,7 +8300,7 @@ var SidebarRail = React44.forwardRef(
       },
       [isControlled, onActiveRailChange]
     );
-    const setRailExpanded = React44.useCallback(
+    const setRailExpanded = React46.useCallback(
       (value) => {
         if (!isRailControlled) {
           setUncontrolledRailExpanded(value);
@@ -8106,7 +8309,7 @@ var SidebarRail = React44.forwardRef(
       },
       [isRailControlled, onRailExpandedChange]
     );
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       SidebarRailContext.Provider,
       {
         value: {
@@ -8120,7 +8323,7 @@ var SidebarRail = React44.forwardRef(
           overlayRail: overlayRail && expandableRail,
           expandableRail
         },
-        children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx46(
           "div",
           {
             ref,
@@ -8143,11 +8346,11 @@ var SidebarRail = React44.forwardRef(
   }
 );
 SidebarRail.displayName = "SidebarRail";
-var IconRail = React44.forwardRef(
+var IconRail = React46.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { railExpanded, overlayRail, expandableRail } = useSidebarRail();
     const isExpanded = expandableRail && railExpanded;
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8156,7 +8359,7 @@ var IconRail = React44.forwardRef(
           isExpanded && !overlayRail ? "w-[var(--rail-expanded-width)]" : "w-[var(--rail-width)]"
         ),
         ...props,
-        children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx46(
           "div",
           {
             className: cn(
@@ -8173,9 +8376,9 @@ var IconRail = React44.forwardRef(
   }
 );
 IconRail.displayName = "IconRail";
-var IconRailHeader = React44.forwardRef(
+var IconRailHeader = React46.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8190,9 +8393,9 @@ var IconRailHeader = React44.forwardRef(
   }
 );
 IconRailHeader.displayName = "IconRailHeader";
-var IconRailContent = React44.forwardRef(
+var IconRailContent = React46.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8204,9 +8407,9 @@ var IconRailContent = React44.forwardRef(
   }
 );
 IconRailContent.displayName = "IconRailContent";
-var IconRailFooter = React44.forwardRef(
+var IconRailFooter = React46.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8221,7 +8424,7 @@ var IconRailFooter = React44.forwardRef(
   }
 );
 IconRailFooter.displayName = "IconRailFooter";
-var IconRailItem = React44.forwardRef(
+var IconRailItem = React46.forwardRef(
   ({ className, railId, icon, label, asButton = false, toggleRail = false, onClick, ...props }, ref) => {
     const {
       activeRail,
@@ -8247,7 +8450,7 @@ var IconRailItem = React44.forwardRef(
         setActiveRail(railId);
       }
     };
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31(
       "button",
       {
         ref,
@@ -8266,14 +8469,14 @@ var IconRailItem = React44.forwardRef(
         ...props,
         children: [
           icon,
-          isRailExpanded && label && /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium truncate", children: label })
+          isRailExpanded && label && /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium truncate", children: label })
         ]
       }
     );
   }
 );
 IconRailItem.displayName = "IconRailItem";
-var RailPanel = React44.forwardRef(
+var RailPanel = React46.forwardRef(
   ({ className, railId, title, children, ...props }, ref) => {
     const { activeRail, setActiveRail, hoverExpand } = useSidebarRail();
     const isVisible = activeRail === railId;
@@ -8283,7 +8486,7 @@ var RailPanel = React44.forwardRef(
       }
     };
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31(
       "div",
       {
         ref,
@@ -8296,16 +8499,16 @@ var RailPanel = React44.forwardRef(
         onMouseLeave: handleMouseLeave,
         ...props,
         children: [
-          title && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ jsx44("span", { className: "font-semibold text-sm", children: title }),
-            /* @__PURE__ */ jsx44(
+          title && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx46("span", { className: "font-semibold text-sm", children: title }),
+            /* @__PURE__ */ jsx46(
               "button",
               {
                 type: "button",
                 onClick: () => setActiveRail(null),
                 className: "p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer",
                 "aria-label": "Close panel",
-                children: /* @__PURE__ */ jsxs30(
+                children: /* @__PURE__ */ jsxs31(
                   "svg",
                   {
                     className: "h-4 w-4",
@@ -8317,36 +8520,36 @@ var RailPanel = React44.forwardRef(
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ jsx44("path", { d: "M18 6 6 18" }),
-                      /* @__PURE__ */ jsx44("path", { d: "m6 6 12 12" })
+                      /* @__PURE__ */ jsx46("path", { d: "M18 6 6 18" }),
+                      /* @__PURE__ */ jsx46("path", { d: "m6 6 12 12" })
                     ]
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ jsx44("div", { className: "flex-1 overflow-y-auto", children })
+          /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-y-auto", children })
         ]
       }
     );
   }
 );
 RailPanel.displayName = "RailPanel";
-var RailPanelGroup = React44.forwardRef(
+var RailPanelGroup = React46.forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs30("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
-      label && /* @__PURE__ */ jsx44("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
-      /* @__PURE__ */ jsx44("div", { className: "space-y-1", children })
+    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+      label && /* @__PURE__ */ jsx46("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
+      /* @__PURE__ */ jsx46("div", { className: "space-y-1", children })
     ] });
   }
 );
 RailPanelGroup.displayName = "RailPanelGroup";
-var RailPanelItem = React44.forwardRef(
+var RailPanelItem = React46.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs30(Fragment8, { children: [
-      icon && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: icon }),
-      /* @__PURE__ */ jsx44("span", { className: "flex-1 truncate", children }),
-      badge && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: badge })
+    const content = /* @__PURE__ */ jsxs31(Fragment8, { children: [
+      icon && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: icon }),
+      /* @__PURE__ */ jsx46("span", { className: "flex-1 truncate", children }),
+      badge && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: badge })
     ] });
     const itemClasses = cn(
       "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors cursor-pointer",
@@ -8355,9 +8558,9 @@ var RailPanelItem = React44.forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx44("div", { ref, ...props, children: /* @__PURE__ */ jsx44("a", { href, className: itemClasses, children: content }) });
+      return /* @__PURE__ */ jsx46("div", { ref, ...props, children: /* @__PURE__ */ jsx46("a", { href, className: itemClasses, children: content }) });
     }
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8374,34 +8577,34 @@ var RailPanelItem = React44.forwardRef(
 RailPanelItem.displayName = "RailPanelItem";
 
 // src/playground.tsx
-import * as React45 from "react";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs31("div", { className: "mb-8", children: [
-  /* @__PURE__ */ jsx45("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
-  /* @__PURE__ */ jsx45("div", { className: "p-4 border border-border rounded-lg bg-background", children })
+import * as React47 from "react";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs32("div", { className: "mb-8", children: [
+  /* @__PURE__ */ jsx47("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
+  /* @__PURE__ */ jsx47("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx45(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs31(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
-      /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select theme" }) }),
-      /* @__PURE__ */ jsxs31(SelectContent, { children: [
-        /* @__PURE__ */ jsx45(SelectItem, { value: "light", children: "Light" }),
-        /* @__PURE__ */ jsx45(SelectItem, { value: "dark", children: "Dark" }),
-        /* @__PURE__ */ jsx45(SelectItem, { value: "system", children: "System" })
+  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx47(Label, { children: "Theme:" }),
+    /* @__PURE__ */ jsxs32(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+      /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select theme" }) }),
+      /* @__PURE__ */ jsxs32(SelectContent, { children: [
+        /* @__PURE__ */ jsx47(SelectItem, { value: "light", children: "Light" }),
+        /* @__PURE__ */ jsx47(SelectItem, { value: "dark", children: "Dark" }),
+        /* @__PURE__ */ jsx47(SelectItem, { value: "system", children: "System" })
       ] })
     ] })
   ] });
 };
 var PlaygroundContent = () => {
-  const [dialogOpen, setDialogOpen] = React45.useState(false);
-  const [checkboxChecked, setCheckboxChecked] = React45.useState(false);
-  const [switchChecked, setSwitchChecked] = React45.useState(false);
-  const [inputValue, setInputValue] = React45.useState("");
-  const [textareaValue, setTextareaValue] = React45.useState("");
-  const [selectValue, setSelectValue] = React45.useState("");
-  const [comboboxValue, setComboboxValue] = React45.useState(null);
+  const [dialogOpen, setDialogOpen] = React47.useState(false);
+  const [checkboxChecked, setCheckboxChecked] = React47.useState(false);
+  const [switchChecked, setSwitchChecked] = React47.useState(false);
+  const [inputValue, setInputValue] = React47.useState("");
+  const [textareaValue, setTextareaValue] = React47.useState("");
+  const [selectValue, setSelectValue] = React47.useState("");
+  const [comboboxValue, setComboboxValue] = React47.useState(null);
   const comboboxOptions = [
     { value: "react", label: "React" },
     { value: "vue", label: "Vue" },
@@ -8409,35 +8612,35 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx45("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs31("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between mb-8", children: [
-      /* @__PURE__ */ jsx45("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
-      /* @__PURE__ */ jsx45(ThemeToggle, {})
+  return /* @__PURE__ */ jsx47("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs32("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsx47("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
+      /* @__PURE__ */ jsx47(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs31(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ jsx45(Button, { variant: "default", children: "Default" }),
-        /* @__PURE__ */ jsx45(Button, { variant: "destructive", children: "Destructive" }),
-        /* @__PURE__ */ jsx45(Button, { variant: "outline", children: "Outline" }),
-        /* @__PURE__ */ jsx45(Button, { variant: "secondary", children: "Secondary" }),
-        /* @__PURE__ */ jsx45(Button, { variant: "ghost", children: "Ghost" }),
-        /* @__PURE__ */ jsx45(Button, { variant: "link", children: "Link" })
+    /* @__PURE__ */ jsxs32(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx47(Button, { variant: "default", children: "Default" }),
+        /* @__PURE__ */ jsx47(Button, { variant: "destructive", children: "Destructive" }),
+        /* @__PURE__ */ jsx47(Button, { variant: "outline", children: "Outline" }),
+        /* @__PURE__ */ jsx47(Button, { variant: "secondary", children: "Secondary" }),
+        /* @__PURE__ */ jsx47(Button, { variant: "ghost", children: "Ghost" }),
+        /* @__PURE__ */ jsx47(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx45(Button, { size: "sm", children: "Small" }),
-        /* @__PURE__ */ jsx45(Button, { size: "default", children: "Default" }),
-        /* @__PURE__ */ jsx45(Button, { size: "lg", children: "Large" }),
-        /* @__PURE__ */ jsx45(Button, { size: "icon", children: "\u{1F514}" })
+      /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx47(Button, { size: "sm", children: "Small" }),
+        /* @__PURE__ */ jsx47(Button, { size: "default", children: "Default" }),
+        /* @__PURE__ */ jsx47(Button, { size: "lg", children: "Large" }),
+        /* @__PURE__ */ jsx47(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx45(Button, { disabled: true, children: "Disabled" }),
-        /* @__PURE__ */ jsx45(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
+      /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx47(Button, { disabled: true, children: "Disabled" }),
+        /* @__PURE__ */ jsx47(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx45(Section, { title: "Input", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "input-default", children: "Default Input" }),
-        /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx47(Section, { title: "Input", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "input-default", children: "Default Input" }),
+        /* @__PURE__ */ jsx47(
           Input,
           {
             id: "input-default",
@@ -8447,19 +8650,19 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
-        /* @__PURE__ */ jsx45(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
+        /* @__PURE__ */ jsx47(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "input-type", children: "Email Input" }),
-        /* @__PURE__ */ jsx45(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "input-type", children: "Email Input" }),
+        /* @__PURE__ */ jsx47(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
-        /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx47(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
+        /* @__PURE__ */ jsx47(
           Textarea,
           {
             id: "textarea-default",
@@ -8469,52 +8672,52 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
-        /* @__PURE__ */ jsx45(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
+        /* @__PURE__ */ jsx47(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Select", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { children: "Default Select" }),
-        /* @__PURE__ */ jsxs31(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
-          /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select an option..." }) }),
-          /* @__PURE__ */ jsxs31(SelectContent, { children: [
-            /* @__PURE__ */ jsx45(SelectItem, { value: "option1", children: "Option 1" }),
-            /* @__PURE__ */ jsx45(SelectItem, { value: "option2", children: "Option 2" }),
-            /* @__PURE__ */ jsx45(SelectItem, { value: "option3", children: "Option 3" })
+    /* @__PURE__ */ jsx47(Section, { title: "Select", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { children: "Default Select" }),
+        /* @__PURE__ */ jsxs32(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+          /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select an option..." }) }),
+          /* @__PURE__ */ jsxs32(SelectContent, { children: [
+            /* @__PURE__ */ jsx47(SelectItem, { value: "option1", children: "Option 1" }),
+            /* @__PURE__ */ jsx47(SelectItem, { value: "option2", children: "Option 2" }),
+            /* @__PURE__ */ jsx47(SelectItem, { value: "option3", children: "Option 3" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
-          /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select a food..." }) }),
-          /* @__PURE__ */ jsxs31(SelectContent, { children: [
-            /* @__PURE__ */ jsxs31(SelectGroup, { children: [
-              /* @__PURE__ */ jsx45(SelectLabel, { children: "Fruits" }),
-              /* @__PURE__ */ jsx45(SelectItem, { value: "apple", children: "Apple" }),
-              /* @__PURE__ */ jsx45(SelectItem, { value: "banana", children: "Banana" })
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { children: "Grouped Select" }),
+        /* @__PURE__ */ jsxs32(SelectNamespace, { children: [
+          /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select a food..." }) }),
+          /* @__PURE__ */ jsxs32(SelectContent, { children: [
+            /* @__PURE__ */ jsxs32(SelectGroup, { children: [
+              /* @__PURE__ */ jsx47(SelectLabel, { children: "Fruits" }),
+              /* @__PURE__ */ jsx47(SelectItem, { value: "apple", children: "Apple" }),
+              /* @__PURE__ */ jsx47(SelectItem, { value: "banana", children: "Banana" })
             ] }),
-            /* @__PURE__ */ jsxs31(SelectGroup, { children: [
-              /* @__PURE__ */ jsx45(SelectLabel, { children: "Vegetables" }),
-              /* @__PURE__ */ jsx45(SelectItem, { value: "carrot", children: "Carrot" }),
-              /* @__PURE__ */ jsx45(SelectItem, { value: "potato", children: "Potato" })
+            /* @__PURE__ */ jsxs32(SelectGroup, { children: [
+              /* @__PURE__ */ jsx47(SelectLabel, { children: "Vegetables" }),
+              /* @__PURE__ */ jsx47(SelectItem, { value: "carrot", children: "Carrot" }),
+              /* @__PURE__ */ jsx47(SelectItem, { value: "potato", children: "Potato" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45(Label, { children: "Disabled Select" }),
-        /* @__PURE__ */ jsxs31(SelectNamespace, { disabled: true, children: [
-          /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Disabled..." }) }),
-          /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectItem, { value: "none", children: "None" }) })
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx47(Label, { children: "Disabled Select" }),
+        /* @__PURE__ */ jsxs32(SelectNamespace, { disabled: true, children: [
+          /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Disabled..." }) }),
+          /* @__PURE__ */ jsx47(SelectContent, { children: /* @__PURE__ */ jsx47(SelectItem, { value: "none", children: "None" }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx45("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs31("div", { children: [
-      /* @__PURE__ */ jsx45(Label, { children: "Framework" }),
-      /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx47(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx47("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs32("div", { children: [
+      /* @__PURE__ */ jsx47(Label, { children: "Framework" }),
+      /* @__PURE__ */ jsx47(
         Combobox,
         {
           options: comboboxOptions,
@@ -8526,9 +8729,9 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx47(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(
           Checkbox,
           {
             id: "checkbox",
@@ -8536,15 +8739,15 @@ var PlaygroundContent = () => {
             onChange: (e) => setCheckboxChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx45(Checkbox, { id: "checkbox-disabled", disabled: true }),
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(Checkbox, { id: "checkbox-disabled", disabled: true }),
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
-      /* @__PURE__ */ jsx45(Separator, {}),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx47(Separator, {}),
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(
           Switch,
           {
             id: "switch",
@@ -8552,160 +8755,160 @@ var PlaygroundContent = () => {
             onChange: (e) => setSwitchChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "switch", children: "Enable notifications" })
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx45(Switch, { id: "switch-disabled", disabled: true }),
-        /* @__PURE__ */ jsx45(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(Switch, { id: "switch-disabled", disabled: true }),
+        /* @__PURE__ */ jsx47(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Badge", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4", children: [
-      /* @__PURE__ */ jsx45(Badge, { children: "Default" }),
-      /* @__PURE__ */ jsx45(Badge, { variant: "secondary", children: "Secondary" }),
-      /* @__PURE__ */ jsx45(Badge, { variant: "destructive", children: "Destructive" }),
-      /* @__PURE__ */ jsx45(Badge, { variant: "outline", children: "Outline" })
+    /* @__PURE__ */ jsx47(Section, { title: "Badge", children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsx47(Badge, { children: "Default" }),
+      /* @__PURE__ */ jsx47(Badge, { variant: "secondary", children: "Secondary" }),
+      /* @__PURE__ */ jsx47(Badge, { variant: "destructive", children: "Destructive" }),
+      /* @__PURE__ */ jsx47(Badge, { variant: "outline", children: "Outline" })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Card", children: /* @__PURE__ */ jsxs31("div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs31(Card, { children: [
-        /* @__PURE__ */ jsxs31(CardHeader, { children: [
-          /* @__PURE__ */ jsx45(CardTitle, { children: "Card Title" }),
-          /* @__PURE__ */ jsx45(CardDescription, { children: "Card description goes here" })
+    /* @__PURE__ */ jsx47(Section, { title: "Card", children: /* @__PURE__ */ jsxs32("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs32(Card, { children: [
+        /* @__PURE__ */ jsxs32(CardHeader, { children: [
+          /* @__PURE__ */ jsx47(CardTitle, { children: "Card Title" }),
+          /* @__PURE__ */ jsx47(CardDescription, { children: "Card description goes here" })
         ] }),
-        /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs31(CardFooter, { children: [
-          /* @__PURE__ */ jsx45(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
-          /* @__PURE__ */ jsx45(Button, { children: "Submit" })
+        /* @__PURE__ */ jsx47(CardContent, { children: /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "This is the card content area." }) }),
+        /* @__PURE__ */ jsxs32(CardFooter, { children: [
+          /* @__PURE__ */ jsx47(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
+          /* @__PURE__ */ jsx47(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs31(Card, { children: [
-        /* @__PURE__ */ jsxs31(CardHeader, { children: [
-          /* @__PURE__ */ jsx45(CardTitle, { children: "Another Card" }),
-          /* @__PURE__ */ jsx45(CardDescription, { children: "With different content" })
+      /* @__PURE__ */ jsxs32(Card, { children: [
+        /* @__PURE__ */ jsxs32(CardHeader, { children: [
+          /* @__PURE__ */ jsx47(CardTitle, { children: "Another Card" }),
+          /* @__PURE__ */ jsx47(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx45(Label, { htmlFor: "card-input", children: "Name" }),
-          /* @__PURE__ */ jsx45(Input, { id: "card-input", placeholder: "Enter name..." })
+        /* @__PURE__ */ jsx47(CardContent, { children: /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx47(Label, { htmlFor: "card-input", children: "Name" }),
+          /* @__PURE__ */ jsx47(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
-        /* @__PURE__ */ jsx45(CardFooter, { children: /* @__PURE__ */ jsx45(Button, { className: "w-full", children: "Save" }) })
+        /* @__PURE__ */ jsx47(CardFooter, { children: /* @__PURE__ */ jsx47(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs31(Section, { title: "Dialog", children: [
-      /* @__PURE__ */ jsx45(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx45(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs31(DialogContent, { children: [
-        /* @__PURE__ */ jsxs31(DialogHeader, { children: [
-          /* @__PURE__ */ jsx45(DialogTitle, { children: "Create New Zone" }),
-          /* @__PURE__ */ jsx45(DialogDescription, { children: "Fill in the details below to create a new zone." })
+    /* @__PURE__ */ jsxs32(Section, { title: "Dialog", children: [
+      /* @__PURE__ */ jsx47(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
+      /* @__PURE__ */ jsx47(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs32(DialogContent, { children: [
+        /* @__PURE__ */ jsxs32(DialogHeader, { children: [
+          /* @__PURE__ */ jsx47(DialogTitle, { children: "Create New Zone" }),
+          /* @__PURE__ */ jsx47(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs31("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs31("div", { children: [
-              /* @__PURE__ */ jsx45(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
-              /* @__PURE__ */ jsx45(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
+        /* @__PURE__ */ jsxs32("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs32("div", { children: [
+              /* @__PURE__ */ jsx47(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
+              /* @__PURE__ */ jsx47(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs31("div", { children: [
-              /* @__PURE__ */ jsx45(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
-              /* @__PURE__ */ jsx45(Input, { id: "zone-code", placeholder: "eg :hyd022" })
+            /* @__PURE__ */ jsxs32("div", { children: [
+              /* @__PURE__ */ jsx47(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
+              /* @__PURE__ */ jsx47(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs31("div", { children: [
-              /* @__PURE__ */ jsx45(Label, { children: "State *" }),
-              /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select state" }) }),
-                /* @__PURE__ */ jsxs31(SelectContent, { children: [
-                  /* @__PURE__ */ jsx45(SelectItem, { value: "telangana", children: "TELANGANA" }),
-                  /* @__PURE__ */ jsx45(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
+          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs32("div", { children: [
+              /* @__PURE__ */ jsx47(Label, { children: "State *" }),
+              /* @__PURE__ */ jsxs32(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select state" }) }),
+                /* @__PURE__ */ jsxs32(SelectContent, { children: [
+                  /* @__PURE__ */ jsx47(SelectItem, { value: "telangana", children: "TELANGANA" }),
+                  /* @__PURE__ */ jsx47(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs31("div", { children: [
-              /* @__PURE__ */ jsx45(Label, { children: "District *" }),
-              /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsxs31(SelectContent, { children: [
-                  /* @__PURE__ */ jsx45(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
-                  /* @__PURE__ */ jsx45(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
+            /* @__PURE__ */ jsxs32("div", { children: [
+              /* @__PURE__ */ jsx47(Label, { children: "District *" }),
+              /* @__PURE__ */ jsxs32(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select District" }) }),
+                /* @__PURE__ */ jsxs32(SelectContent, { children: [
+                  /* @__PURE__ */ jsx47(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
+                  /* @__PURE__ */ jsx47(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs31(DialogFooter, { children: [
-          /* @__PURE__ */ jsx45(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
-          /* @__PURE__ */ jsx45(Button, { onClick: () => setDialogOpen(false), children: "Create" })
+        /* @__PURE__ */ jsxs32(DialogFooter, { children: [
+          /* @__PURE__ */ jsx47(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
+          /* @__PURE__ */ jsx47(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx45(Section, { title: "Table", children: /* @__PURE__ */ jsxs31(TableNamespace, { children: [
-      /* @__PURE__ */ jsx45(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx45(TableHeader, { children: /* @__PURE__ */ jsxs31(TableRow, { children: [
-        /* @__PURE__ */ jsx45(TableHead, { children: "Invoice" }),
-        /* @__PURE__ */ jsx45(TableHead, { children: "Status" }),
-        /* @__PURE__ */ jsx45(TableHead, { children: "Method" }),
-        /* @__PURE__ */ jsx45(TableHead, { className: "text-right", children: "Amount" })
+    /* @__PURE__ */ jsx47(Section, { title: "Table", children: /* @__PURE__ */ jsxs32(TableNamespace, { children: [
+      /* @__PURE__ */ jsx47(TableCaption, { children: "A list of recent invoices" }),
+      /* @__PURE__ */ jsx47(TableHeader, { children: /* @__PURE__ */ jsxs32(TableRow, { children: [
+        /* @__PURE__ */ jsx47(TableHead, { children: "Invoice" }),
+        /* @__PURE__ */ jsx47(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx47(TableHead, { children: "Method" }),
+        /* @__PURE__ */ jsx47(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsxs31(TableBody, { children: [
-        /* @__PURE__ */ jsxs31(TableRow, { children: [
-          /* @__PURE__ */ jsx45(TableCell, { children: "INV001" }),
-          /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { children: "Paid" }) }),
-          /* @__PURE__ */ jsx45(TableCell, { children: "Credit Card" }),
-          /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$250.00" })
+      /* @__PURE__ */ jsxs32(TableBody, { children: [
+        /* @__PURE__ */ jsxs32(TableRow, { children: [
+          /* @__PURE__ */ jsx47(TableCell, { children: "INV001" }),
+          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { children: "Paid" }) }),
+          /* @__PURE__ */ jsx47(TableCell, { children: "Credit Card" }),
+          /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
-        /* @__PURE__ */ jsxs31(TableRow, { children: [
-          /* @__PURE__ */ jsx45(TableCell, { children: "INV002" }),
-          /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { variant: "secondary", children: "Pending" }) }),
-          /* @__PURE__ */ jsx45(TableCell, { children: "PayPal" }),
-          /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$150.00" })
+        /* @__PURE__ */ jsxs32(TableRow, { children: [
+          /* @__PURE__ */ jsx47(TableCell, { children: "INV002" }),
+          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { variant: "secondary", children: "Pending" }) }),
+          /* @__PURE__ */ jsx47(TableCell, { children: "PayPal" }),
+          /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
-        /* @__PURE__ */ jsxs31(TableRow, { children: [
-          /* @__PURE__ */ jsx45(TableCell, { children: "INV003" }),
-          /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { variant: "destructive", children: "Failed" }) }),
-          /* @__PURE__ */ jsx45(TableCell, { children: "Bank Transfer" }),
-          /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$350.00" })
+        /* @__PURE__ */ jsxs32(TableRow, { children: [
+          /* @__PURE__ */ jsx47(TableCell, { children: "INV003" }),
+          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { variant: "destructive", children: "Failed" }) }),
+          /* @__PURE__ */ jsx47(TableCell, { children: "Bank Transfer" }),
+          /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$350.00" })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Pagination", children: /* @__PURE__ */ jsx45(PaginationNamespace, { children: /* @__PURE__ */ jsxs31(PaginationContent, { children: [
-      /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
-      /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { isActive: true, children: "1" }) }),
-      /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { children: "2" }) }),
-      /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { children: "3" }) }),
-      /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationEllipsis, {}) }),
-      /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationNext, { onClick: () => console.log("Next") }) })
+    /* @__PURE__ */ jsx47(Section, { title: "Pagination", children: /* @__PURE__ */ jsx47(PaginationNamespace, { children: /* @__PURE__ */ jsxs32(PaginationContent, { children: [
+      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
+      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationLink, { isActive: true, children: "1" }) }),
+      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationLink, { children: "2" }) }),
+      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationLink, { children: "3" }) }),
+      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationEllipsis, {}) }),
+      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx45(Spinner, { size: "sm" }),
-        /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
+    /* @__PURE__ */ jsx47(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx47(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx45(Spinner, { size: "default" }),
-        /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
+      /* @__PURE__ */ jsxs32("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx47(Spinner, { size: "default" }),
+        /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx45(Spinner, { size: "lg" }),
-        /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
+      /* @__PURE__ */ jsxs32("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx47(Spinner, { size: "lg" }),
+        /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Separator", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "Content above separator" }),
-      /* @__PURE__ */ jsx45(Separator, {}),
-      /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center h-10", children: [
-        /* @__PURE__ */ jsx45("span", { className: "text-foreground", children: "Left" }),
-        /* @__PURE__ */ jsx45(Separator, { orientation: "vertical", className: "mx-4" }),
-        /* @__PURE__ */ jsx45("span", { className: "text-foreground", children: "Right" })
+    /* @__PURE__ */ jsx47(Section, { title: "Separator", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "Content above separator" }),
+      /* @__PURE__ */ jsx47(Separator, {}),
+      /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "Content below separator" }),
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center h-10", children: [
+        /* @__PURE__ */ jsx47("span", { className: "text-foreground", children: "Left" }),
+        /* @__PURE__ */ jsx47(Separator, { orientation: "vertical", className: "mx-4" }),
+        /* @__PURE__ */ jsx47("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
-      /* @__PURE__ */ jsx45("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
-      /* @__PURE__ */ jsx45("p", { className: "text-accent", children: "text-accent - Accent color" }),
-      /* @__PURE__ */ jsx45("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
+    /* @__PURE__ */ jsx47(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
+      /* @__PURE__ */ jsx47("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
+      /* @__PURE__ */ jsx47("p", { className: "text-accent", children: "text-accent - Accent color" }),
+      /* @__PURE__ */ jsx47("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
     ] }) })
   ] }) });
 };
-var Playground = () => /* @__PURE__ */ jsx45(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx45(PlaygroundContent, {}) });
+var Playground = () => /* @__PURE__ */ jsx47(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx47(PlaygroundContent, {}) });
 export {
   Accordion,
   AccordionContent,
@@ -8730,6 +8933,8 @@ export {
   AvatarGroup,
   Badge,
   BarChart,
+  BottomNavigation,
+  BottomNavigationAction,
   Box,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -8752,6 +8957,10 @@ export {
   Combobox,
   DataGrid,
   DataGrid as DataGridV0,
+  DataList,
+  DataListItem,
+  DataListLabel,
+  DataListValue,
   DialogNamespace as Dialog,
   DialogClose,
   DialogContent,