@efiche/design 0.2.13 → 0.2.14

package/dist/index.cjs

@@ -52,10 +52,8 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion_default,
   Alert: () => Alert_default,
-  AreaChart: () => AreaChart_default,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
-  BarChart: () => BarChart_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
   Card: () => Card,
@@ -69,9 +67,7 @@ __export(index_exports, {
   FileUpload: () => FileUpload_default,
   Input: () => Input_default,
   Label: () => Label_default,
-  LineChart: () => LineChart_default,
   PasswordInput: () => PasswordInput_default,
-  PieChart: () => PieChart_default,
   Progress: () => Progress_default,
   RadioGroup: () => RadioGroup_default,
   Select: () => Select_default,
@@ -110,270 +106,17 @@ var useTheme = () => {
   return ctx;
 };
 
-// src/components/Charts/LineChart.tsx
-var import_react2 = require("react");
-var import_recharts = require("recharts");
-
-// src/components/Charts/chartUtils.ts
-var CHART_COLORS = [
-  "#3b82f6",
-  // blue
-  "#22c55e",
-  // green
-  "#f59e0b",
-  // amber
-  "#ef4444",
-  // red
-  "#8b5cf6",
-  // violet
-  "#06b6d4",
-  // cyan
-  "#f97316",
-  // orange
-  "#ec4899"
-  // pink
-];
-function getChartTheme(theme) {
-  const isDark = theme === "dark";
-  return {
-    gridColor: isDark ? "#334155" : "#e2e8f0",
-    axisStroke: isDark ? "#94a3b8" : "#64748b",
-    axisTick: { fill: isDark ? "#94a3b8" : "#64748b", fontSize: 12 },
-    primaryColor: isDark ? "#60a5fa" : "#3b82f6",
-    tooltipStyle: {
-      backgroundColor: isDark ? "#1e293b" : "#ffffff",
-      border: `1px solid ${isDark ? "#334155" : "#e2e8f0"}`,
-      borderRadius: "6px",
-      color: isDark ? "#f1f5f9" : "#0f172a",
-      fontSize: "0.8125rem"
-    }
-  };
-}
-
-// src/components/Charts/LineChart.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LineChart = ({
-  data,
-  xKey,
-  lines,
-  height = 250,
-  legend = false,
-  grid = true,
-  theme = "light",
-  className,
-  style
-}) => {
-  const containerRef = (0, import_react2.useRef)(null);
-  const [width, setWidth] = (0, import_react2.useState)(0);
-  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
-  (0, import_react2.useEffect)(() => {
-    if (!containerRef.current) return;
-    const measure = () => setWidth(containerRef.current.offsetWidth);
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { width, height, data, children: [
-    grid && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { stroke: axisStroke, tick: axisTick }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Tooltip, { contentStyle: tooltipStyle }),
-    legend && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Legend, {}),
-    lines.map((line, i) => {
-      var _a, _b;
-      const color = (_a = line.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_recharts.Line,
-        {
-          type: "monotone",
-          dataKey: line.dataKey,
-          name: (_b = line.label) != null ? _b : line.dataKey,
-          stroke: color,
-          strokeWidth: 2,
-          dot: { fill: color, r: 4 },
-          activeDot: { r: 6 },
-          isAnimationActive: false
-        },
-        line.dataKey
-      );
-    })
-  ] }) });
-};
-var LineChart_default = LineChart;
-
-// src/components/Charts/BarChart.tsx
-var import_react3 = require("react");
-var import_recharts2 = require("recharts");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var BarChart = ({
-  data,
-  xKey,
-  bars,
-  height = 250,
-  legend = false,
-  grid = true,
-  theme = "light",
-  className,
-  style
-}) => {
-  const containerRef = (0, import_react3.useRef)(null);
-  const [width, setWidth] = (0, import_react3.useState)(0);
-  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
-  (0, import_react3.useEffect)(() => {
-    if (!containerRef.current) return;
-    const measure = () => setWidth(containerRef.current.offsetWidth);
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_recharts2.BarChart, { width, height, data, children: [
-    grid && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.YAxis, { stroke: axisStroke, tick: axisTick }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Tooltip, { contentStyle: tooltipStyle }),
-    legend && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Legend, {}),
-    bars.map((bar, i) => {
-      var _a, _b;
-      const color = (_a = bar.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_recharts2.Bar,
-        {
-          dataKey: bar.dataKey,
-          name: (_b = bar.label) != null ? _b : bar.dataKey,
-          fill: color,
-          stackId: bar.stackId,
-          isAnimationActive: false
-        },
-        bar.dataKey
-      );
-    })
-  ] }) });
-};
-var BarChart_default = BarChart;
-
-// src/components/Charts/AreaChart.tsx
-var import_react4 = require("react");
-var import_recharts3 = require("recharts");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var AreaChart = ({
-  data,
-  xKey,
-  areas,
-  height = 250,
-  legend = false,
-  grid = true,
-  theme = "light",
-  className,
-  style
-}) => {
-  const containerRef = (0, import_react4.useRef)(null);
-  const [width, setWidth] = (0, import_react4.useState)(0);
-  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
-  (0, import_react4.useEffect)(() => {
-    if (!containerRef.current) return;
-    const measure = () => setWidth(containerRef.current.offsetWidth);
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts3.AreaChart, { width, height, data, children: [
-    grid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.YAxis, { stroke: axisStroke, tick: axisTick }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { contentStyle: tooltipStyle }),
-    legend && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, {}),
-    areas.map((area, i) => {
-      var _a, _b, _c;
-      const color = (_a = area.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
-      const opacity = (_b = area.fillOpacity) != null ? _b : area.stackId ? 0.4 : 0.15;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_recharts3.Area,
-        {
-          type: "monotone",
-          dataKey: area.dataKey,
-          name: (_c = area.label) != null ? _c : area.dataKey,
-          stroke: color,
-          fill: color,
-          fillOpacity: opacity,
-          strokeWidth: 2,
-          stackId: area.stackId,
-          isAnimationActive: false
-        },
-        area.dataKey
-      );
-    })
-  ] }) });
-};
-var AreaChart_default = AreaChart;
-
-// src/components/Charts/PieChart.tsx
-var import_react5 = require("react");
-var import_recharts4 = require("recharts");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PieChart = ({
-  data,
-  height = 250,
-  donut = false,
-  legend = false,
-  label = false,
-  theme = "light",
-  className,
-  style
-}) => {
-  const containerRef = (0, import_react5.useRef)(null);
-  const [width, setWidth] = (0, import_react5.useState)(0);
-  const { tooltipStyle } = getChartTheme(theme);
-  (0, import_react5.useEffect)(() => {
-    if (!containerRef.current) return;
-    const measure = () => setWidth(containerRef.current.offsetWidth);
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, []);
-  const dataWithColors = data.map((item, i) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, item), {
-      fill: (_a = item.fill) != null ? _a : CHART_COLORS[i % CHART_COLORS.length]
-    });
-  });
-  const outerRadius = 90;
-  const innerRadius = donut ? 55 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts4.PieChart, { width, height, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_recharts4.Pie,
-      {
-        data: dataWithColors,
-        cx: "50%",
-        cy: "50%",
-        outerRadius,
-        innerRadius,
-        dataKey: "value",
-        label: label ? ({ name, percent }) => `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%` : void 0,
-        labelLine: label,
-        isAnimationActive: false
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.Tooltip, { contentStyle: tooltipStyle }),
-    legend && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.Legend, {})
-  ] }) });
-};
-var PieChart_default = PieChart;
-
 // src/components/Accordion/Accordion.tsx
-var import_react6 = require("react");
+var import_react2 = require("react");
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Accordion = ({ items, defaultValue, multiple = false }) => {
-  const [open, setOpen] = (0, import_react6.useState)(() => {
+  const [open, setOpen] = (0, import_react2.useState)(() => {
     if (!defaultValue) return /* @__PURE__ */ new Set();
     if (Array.isArray(defaultValue)) return new Set(defaultValue);
     return /* @__PURE__ */ new Set([defaultValue]);
   });
-  const [hovered, setHovered] = (0, import_react6.useState)(null);
+  const [hovered, setHovered] = (0, import_react2.useState)(null);
   const toggle = (value) => {
     setOpen((prev) => {
       const next = new Set(prev);
@@ -386,7 +129,7 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
     border: "1px solid var(--ds-border, #e2e8f0)",
     borderRadius: "0.5rem",
     overflow: "hidden"
@@ -394,14 +137,14 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
     const isOpen = open.has(item.value);
     const isHovered = hovered === item.value;
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         style: {
           borderBottom: isLast ? "none" : "1px solid var(--ds-border, #e2e8f0)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "button",
             {
               style: {
@@ -424,8 +167,8 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
               onMouseLeave: () => setHovered(null),
               "aria-expanded": isOpen,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: item.trigger }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: item.trigger }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   import_lucide_react.ChevronDown,
                   {
                     size: 16,
@@ -440,11 +183,11 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
             maxHeight: isOpen ? "300px" : "0",
             overflow: "hidden",
             transition: "max-height 0.25s ease"
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
             padding: "0 1rem 1rem",
             fontSize: "0.875rem",
             color: "var(--ds-text-secondary, #64748b)"
@@ -459,7 +202,7 @@ var Accordion_default = Accordion;
 
 // src/components/Alert/Alert.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var variantMap = {
   info: { bg: "var(--ds-info-bg, #eff6ff)", border: "var(--ds-info, #3b82f6)", icon: "var(--ds-info, #3b82f6)", title: "var(--ds-info-title, #1e3a8a)", desc: "var(--ds-info-desc, #1e40af)" },
   success: { bg: "var(--ds-success-bg, #f0fdf4)", border: "var(--ds-success, #22c55e)", icon: "var(--ds-success, #22c55e)", title: "var(--ds-success-title, #14532d)", desc: "var(--ds-success-desc, #166534)" },
@@ -467,14 +210,14 @@ var variantMap = {
   danger: { bg: "var(--ds-danger-bg, #fef2f2)", border: "var(--ds-danger, #ef4444)", icon: "var(--ds-danger, #ef4444)", title: "var(--ds-danger-title, #7f1d1d)", desc: "var(--ds-danger-desc, #991b1b)" }
 };
 var icons = {
-  info: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Info, { size: 16 }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.CheckCircle2, { size: 16 }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.AlertTriangle, { size: 16 }),
-  danger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.AlertCircle, { size: 16 })
+  info: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Info, { size: 16 }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.CheckCircle2, { size: 16 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertTriangle, { size: 16 }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertCircle, { size: 16 })
 };
 var Alert = ({ variant = "info", title, description }) => {
   const v = variantMap[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", style: {
     display: "flex",
     gap: "0.75rem",
     padding: "1rem",
@@ -482,23 +225,23 @@ var Alert = ({ variant = "info", title, description }) => {
     borderLeft: `4px solid ${v.border}`,
     backgroundColor: v.bg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { flexShrink: 0, marginTop: "0.125rem", color: v.icon }, children: icons[variant] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem", marginTop: 0, color: v.title }, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { fontSize: "0.875rem", margin: 0, color: v.desc }, children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flexShrink: 0, marginTop: "0.125rem", color: v.icon }, children: icons[variant] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem", marginTop: 0, color: v.title }, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontSize: "0.875rem", margin: 0, color: v.desc }, children: description })
     ] })
   ] });
 };
 var Alert_default = Alert;
 
 // src/components/Avatar/Avatar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizeMap = {
   sm: { width: "2rem", height: "2rem", fontSize: "0.625rem" },
   md: { width: "2.5rem", height: "2.5rem", fontSize: "0.875rem" },
   lg: { width: "4rem", height: "4rem", fontSize: "1.25rem" }
 };
-var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "div",
   {
     className,
@@ -520,7 +263,7 @@ var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ (0
 var Avatar_default = Avatar;
 
 // src/components/Badge/Badge.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var variantMap2 = {
   default: { backgroundColor: "var(--ds-primary, #3b82f6)", color: "#fff" },
   secondary: { backgroundColor: "var(--ds-muted, #f1f5f9)", color: "var(--ds-text-secondary, #64748b)" },
@@ -535,7 +278,7 @@ var sizeMap2 = {
   md: { padding: "0.25rem 0.625rem", fontSize: "0.75rem" },
   lg: { padding: "0.375rem 0.875rem", fontSize: "0.875rem" }
 };
-var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: __spreadValues(__spreadValues(__spreadValues({
+var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: __spreadValues(__spreadValues(__spreadValues({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.25rem",
@@ -546,12 +289,12 @@ var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PUR
 var Badge_default = Badge;
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-var import_react7 = require("react");
+var import_react3 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Breadcrumb = ({ items }) => {
-  const [hovered, setHovered] = (0, import_react7.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", { style: {
+  const [hovered, setHovered] = (0, import_react3.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { style: {
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
@@ -562,8 +305,8 @@ var Breadcrumb = ({ items }) => {
   }, children: items.map((item, i) => {
     const isLast = i === items.length - 1;
     const isHovered = hovered === item.label;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { style: { display: "flex", alignItems: "center" }, children: [
-      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { style: { display: "flex", alignItems: "center" }, children: [
+      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_lucide_react3.ChevronRight,
         {
           size: 14,
@@ -571,11 +314,11 @@ var Breadcrumb = ({ items }) => {
           style: { color: "var(--ds-text-secondary, #64748b)", margin: "0 0.25rem", flexShrink: 0 }
         }
       ),
-      isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: {
+      isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
         color: isLast ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)",
         fontWeight: isLast ? 500 : void 0,
         cursor: isLast ? "default" : void 0
-      }, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      }, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "a",
         {
           href: item.href,
@@ -596,8 +339,8 @@ var Breadcrumb_default = Breadcrumb;
 
 // src/components/Button/Button.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_react8 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var variantStyles = {
   solid: { backgroundColor: "var(--ds-primary, #3b82f6)", color: "#fff", borderColor: "transparent" },
   outline: { backgroundColor: "transparent", color: "var(--ds-primary, #3b82f6)", borderColor: "var(--ds-primary, #3b82f6)" },
@@ -659,7 +402,7 @@ var Button = (_a) => {
     "size",
     "style"
   ]);
-  const [hovered, setHovered] = (0, import_react8.useState)(false);
+  const [hovered, setHovered] = (0, import_react4.useState)(false);
   const resolvedVariant = variant != null ? variant : danger ? "danger" : warning ? "warning" : info ? "info" : success ? "success" : ghost ? "ghost" : outline ? "outline" : "solid";
   const resolvedSize = size != null ? size : small ? "sm" : large ? "lg" : "md";
   const isDisabled = disabled || loading;
@@ -677,9 +420,9 @@ var Button = (_a) => {
     opacity: isDisabled ? 0.5 : 1,
     pointerEvents: loading ? "none" : void 0
   }, variantStyles[resolvedVariant]), sizeStyles[resolvedSize]), hovered && !isDisabled ? variantHoverStyles[resolvedVariant] : {}), styleProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         disabled: isDisabled,
@@ -688,7 +431,7 @@ var Button = (_a) => {
         onMouseLeave: () => setHovered(false)
       }, props), {
         children: [
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_lucide_react4.LoaderCircle,
             {
               "aria-hidden": true,
@@ -706,10 +449,10 @@ var Button = (_a) => {
 var Button_default = Button;
 
 // src/components/Card/Card.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Card = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
     border: "1px solid var(--ds-border, #e2e8f0)",
     borderRadius: "0.5rem",
     backgroundColor: "var(--ds-card, #ffffff)"
@@ -717,7 +460,7 @@ var Card = (_a) => {
 };
 var CardHeader = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
     display: "flex",
     flexDirection: "column",
     gap: "0.375rem",
@@ -726,7 +469,7 @@ var CardHeader = (_a) => {
 };
 var CardTitle = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", __spreadValues({ style: __spreadValues({
     fontSize: "1rem",
     fontWeight: 600,
     color: "var(--ds-text-primary, #0f172a)",
@@ -736,7 +479,7 @@ var CardTitle = (_a) => {
 };
 var CardDescription = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", __spreadValues({ style: __spreadValues({
     fontSize: "0.875rem",
     color: "var(--ds-text-secondary, #64748b)",
     margin: 0
@@ -744,11 +487,11 @@ var CardDescription = (_a) => {
 };
 var CardContent = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
 };
 var CardFooter = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
     display: "flex",
     alignItems: "center",
     padding: "0 1.5rem 1.5rem"
@@ -756,8 +499,8 @@ var CardFooter = (_a) => {
 };
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react9 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Checkbox = ({
   label,
   checked,
@@ -766,7 +509,7 @@ var Checkbox = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react9.useState)(defaultChecked);
+  const [internal, setInternal] = (0, import_react5.useState)(defaultChecked);
   const isChecked = checked !== void 0 ? checked : internal;
   const handleChange = () => {
     if (disabled) return;
@@ -774,7 +517,7 @@ var Checkbox = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: id, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: id, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "0.5rem",
@@ -782,7 +525,7 @@ var Checkbox = ({
     userSelect: "none",
     opacity: disabled ? 0.5 : 1
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "input",
       {
         type: "checkbox",
@@ -793,7 +536,7 @@ var Checkbox = ({
         style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: {
       width: "1.125rem",
       height: "1.125rem",
       border: `2px solid ${isChecked ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
@@ -804,25 +547,25 @@ var Checkbox = ({
       flexShrink: 0,
       transition: "background-color 0.15s, border-color 0.15s",
       backgroundColor: isChecked ? "var(--ds-primary, #3b82f6)" : "var(--ds-card, #fff)"
-    }, children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 12 10", fill: "none", style: { width: "0.625rem", height: "0.625rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
+    }, children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 12 10", fill: "none", style: { width: "0.625rem", height: "0.625rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
 var Checkbox_default = Checkbox;
 
 // src/components/CopyButton/CopyButton.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_react10 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CopyButton = ({ text }) => {
-  const [copied, setCopied] = (0, import_react10.useState)(false);
-  const [hovered, setHovered] = (0, import_react10.useState)(false);
+  const [copied, setCopied] = (0, import_react6.useState)(false);
+  const [hovered, setHovered] = (0, import_react6.useState)(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       onClick: handleCopy,
@@ -841,7 +584,7 @@ var CopyButton = ({ text }) => {
         cursor: "pointer",
         transition: "background-color 0.15s, color 0.15s"
       },
-      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Copy, { style: { width: "1rem", height: "1rem" } })
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Copy, { style: { width: "1rem", height: "1rem" } })
     }
   );
 };
@@ -849,19 +592,19 @@ var CopyButton_default = CopyButton;
 
 // src/components/FileUpload/FileUpload.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_react11 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
-  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
-  const [fileNames, setFileNames] = (0, import_react11.useState)([]);
-  const inputRef = (0, import_react11.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
+  const [fileNames, setFileNames] = (0, import_react7.useState)([]);
+  const inputRef = (0, import_react7.useRef)(null);
   const handleFiles = (list) => {
     setFileNames(Array.from(list).map((f) => f.name));
     onFileSelect == null ? void 0 : onFileSelect(list);
   };
   const isActive = isDragging || isHovered;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       onClick: () => {
@@ -895,7 +638,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
         opacity: disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "input",
           {
             ref: inputRef,
@@ -907,9 +650,9 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
             onChange: (e) => e.target.files && handleFiles(e.target.files)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.Upload, { size: 32, style: { color: "var(--ds-text-secondary, #64748b)" } }),
-        fileNames.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--ds-primary, #3b82f6)", fontWeight: 500, margin: 0 }, children: fileNames.join(", ") }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { style: { fontSize: "0.875rem", color: "var(--ds-text-secondary, #64748b)", margin: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Click to upload" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Upload, { size: 32, style: { color: "var(--ds-text-secondary, #64748b)" } }),
+        fileNames.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--ds-primary, #3b82f6)", fontWeight: 500, margin: 0 }, children: fileNames.join(", ") }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { style: { fontSize: "0.875rem", color: "var(--ds-text-secondary, #64748b)", margin: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: "Click to upload" }),
           " or drag and drop"
         ] })
       ]
@@ -919,7 +662,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
 var FileUpload_default = FileUpload;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var inputCSS = `
 [data-ds-input]::placeholder { color: var(--ds-text-secondary, #64748b); }
 [data-ds-input]:focus { outline: none; border-color: var(--ds-primary, #3b82f6); box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
@@ -929,10 +672,10 @@ var inputCSS = `
 `;
 var Input = (_a) => {
   var _b = _a, { error, success, leftIcon, rightIcon, style } = _b, props = __objRest(_b, ["error", "success", "leftIcon", "rightIcon", "style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { href: "ds-input", precedence: "low", children: inputCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { position: "relative", display: "flex", alignItems: "center", width: "100%" }, children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { href: "ds-input", precedence: "low", children: inputCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative", display: "flex", alignItems: "center", width: "100%" }, children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: {
         position: "absolute",
         left: "0.625rem",
         display: "flex",
@@ -940,7 +683,7 @@ var Input = (_a) => {
         color: "var(--ds-text-secondary, #64748b)",
         pointerEvents: "none"
       }, children: leftIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "input",
         __spreadValues({
           "data-ds-input": "",
@@ -963,7 +706,7 @@ var Input = (_a) => {
           }, style)
         }, props)
       ),
-      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: {
         position: "absolute",
         right: "0.625rem",
         display: "flex",
@@ -977,10 +720,10 @@ var Input = (_a) => {
 var Input_default = Input;
 
 // src/components/Label/Label.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Label = (_a) => {
   var _b = _a, { children, required, style } = _b, props = __objRest(_b, ["children", "required", "style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", __spreadProps(__spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", __spreadProps(__spreadValues({ style: __spreadValues({
     display: "block",
     fontSize: "0.875rem",
     fontWeight: 500,
@@ -988,29 +731,29 @@ var Label = (_a) => {
     marginBottom: "0.375rem"
   }, style) }, props), { children: [
     children,
-    required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
+    required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
   ] }));
 };
 var Label_default = Label;
 
 // src/components/PasswordInput/PasswordInput.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_react12 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var PasswordInput = (props) => {
-  const [visible, setVisible] = (0, import_react12.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const [visible, setVisible] = (0, import_react8.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Input_default,
     __spreadProps(__spreadValues({}, props), {
       type: visible ? "text" : "password",
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
           onClick: () => setVisible((v) => !v),
           style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", pointerEvents: "all" },
           tabIndex: -1,
-          children: visible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.EyeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Eye, { size: 16 })
+          children: visible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.EyeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Eye, { size: 16 })
         }
       )
     })
@@ -1019,10 +762,10 @@ var PasswordInput = (props) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Progress = ({ value = 0 }) => {
   const pct = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       role: "progressbar",
@@ -1036,7 +779,7 @@ var Progress = ({ value = 0 }) => {
         borderRadius: "9999px",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: {
         height: "100%",
         width: `${pct}%`,
         backgroundColor: "var(--ds-primary, #3b82f6)",
@@ -1049,8 +792,8 @@ var Progress = ({ value = 0 }) => {
 var Progress_default = Progress;
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react13 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var RadioGroup = ({
   options,
   name,
@@ -1059,16 +802,16 @@ var RadioGroup = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react13.useState)(defaultValue);
+  const [internal, setInternal] = (0, import_react9.useState)(defaultValue);
   const selected = value !== void 0 ? value : internal;
   const handleChange = (val) => {
     if (disabled) return;
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
     const isSelected = selected === option.value;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: {
       display: "inline-flex",
       alignItems: "center",
       gap: "0.5rem",
@@ -1076,7 +819,7 @@ var RadioGroup = ({
       userSelect: "none",
       opacity: disabled ? 0.5 : 1
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "input",
         {
           type: "radio",
@@ -1088,7 +831,7 @@ var RadioGroup = ({
           style: { position: "absolute", opacity: 0, width: 0, height: 0 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
         width: "1.125rem",
         height: "1.125rem",
         borderRadius: "9999px",
@@ -1099,13 +842,13 @@ var RadioGroup = ({
         flexShrink: 0,
         backgroundColor: "var(--ds-card, #fff)",
         transition: "border-color 0.15s"
-      }, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: {
+      }, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
         width: "0.5rem",
         height: "0.5rem",
         borderRadius: "9999px",
         backgroundColor: "var(--ds-primary, #3b82f6)"
       } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
     ] }, option.value);
   }) });
 };
@@ -1113,8 +856,8 @@ var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_react14 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var selectCSS = `
 [data-ds-select-trigger]:focus { outline: none; border-color: var(--ds-primary, #3b82f6); box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
 `;
@@ -1127,10 +870,10 @@ var Select = ({
   onChange
 }) => {
   var _a;
-  const [internal, setInternal] = (0, import_react14.useState)(defaultValue);
-  const [open, setOpen] = (0, import_react14.useState)(false);
-  const [hoveredOption, setHoveredOption] = (0, import_react14.useState)(null);
-  const ref = (0, import_react14.useRef)(null);
+  const [internal, setInternal] = (0, import_react10.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [hoveredOption, setHoveredOption] = (0, import_react10.useState)(null);
+  const ref = (0, import_react10.useRef)(null);
   const selected = value !== void 0 ? value : internal;
   const selectedLabel = (_a = options.find((o) => o.value === selected)) == null ? void 0 : _a.label;
   const handleSelect = (val) => {
@@ -1138,22 +881,22 @@ var Select = ({
     setOpen(false);
     onChange == null ? void 0 : onChange(val);
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
     document.addEventListener("mousedown", handleOutside);
     return () => document.removeEventListener("mousedown", handleOutside);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", { href: "ds-select", precedence: "low", children: selectCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { href: "ds-select", precedence: "low", children: selectCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, style: {
       position: "relative",
       width: "100%",
       opacity: disabled ? 0.5 : 1,
       pointerEvents: disabled ? "none" : void 0
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "button",
         {
           type: "button",
@@ -1179,8 +922,8 @@ var Select = ({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_lucide_react8.ChevronDown,
               {
                 size: 16,
@@ -1195,7 +938,7 @@ var Select = ({
           ]
         }
       ),
-      open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: {
+      open && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: {
         position: "absolute",
         top: "calc(100% + 0.25rem)",
         left: 0,
@@ -1209,7 +952,7 @@ var Select = ({
       }, children: options.map((option) => {
         const isSelected = selected === option.value;
         const isHovered = hoveredOption === option.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             onClick: () => handleSelect(option.value),
@@ -1228,7 +971,7 @@ var Select = ({
               transition: "background-color 0.1s"
             },
             children: [
-              isSelected ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Check, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { width: 14, flexShrink: 0 } }),
+              isSelected ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Check, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { width: 14, flexShrink: 0 } }),
               option.label
             ]
           },
@@ -1241,13 +984,13 @@ var Select = ({
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { href: "ds-skeleton", precedence: "low", children: `
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { href: "ds-skeleton", precedence: "low", children: `
             @keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
             [data-ds-skeleton] { animation: ds-pulse 1.5s ease-in-out infinite; }
         ` }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       "data-ds-skeleton": "",
@@ -1264,8 +1007,8 @@ var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PU
 var Skeleton_default = Skeleton;
 
 // src/components/Slider/Slider.tsx
-var import_react15 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var sliderCSS = `
 [data-ds-slider] {
     -webkit-appearance: none;
@@ -1316,7 +1059,7 @@ var Slider = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react15.useState)(defaultValue);
+  const [internal, setInternal] = (0, import_react11.useState)(defaultValue);
   const current = value !== void 0 ? value : internal;
   const fill = `${(current - min) / (max - min) * 100}%`;
   const handleChange = (e) => {
@@ -1324,13 +1067,13 @@ var Slider = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: {
       width: "100%",
       padding: "0.25rem 0",
       opacity: disabled ? 0.5 : 1
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "input",
       {
         type: "range",
@@ -1350,11 +1093,11 @@ var Slider_default = Slider;
 
 // src/components/Spinner/Spinner.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var sizePx = { sm: 16, md: 24, lg: 32 };
-var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_lucide_react9.Loader2,
     {
       size: sizePx[size],
@@ -1366,8 +1109,8 @@ var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs
 var Spinner_default = Spinner;
 
 // src/components/Switch/Switch.tsx
-var import_react16 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Switch = ({
   label,
   checked,
@@ -1376,7 +1119,7 @@ var Switch = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react16.useState)(defaultChecked);
+  const [internal, setInternal] = (0, import_react12.useState)(defaultChecked);
   const isOn = checked !== void 0 ? checked : internal;
   const handleToggle = () => {
     if (disabled) return;
@@ -1384,7 +1127,7 @@ var Switch = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { htmlFor: id, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { htmlFor: id, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "0.625rem",
@@ -1392,7 +1135,7 @@ var Switch = ({
     userSelect: "none",
     opacity: disabled ? 0.5 : 1
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
       {
         type: "checkbox",
@@ -1403,7 +1146,7 @@ var Switch = ({
         style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: {
       width: "2.75rem",
       height: "1.5rem",
       borderRadius: "9999px",
@@ -1411,7 +1154,7 @@ var Switch = ({
       position: "relative",
       transition: "background-color 0.2s",
       flexShrink: 0
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: {
       position: "absolute",
       top: "0.175rem",
       left: "0.175rem",
@@ -1423,41 +1166,41 @@ var Switch = ({
       transition: "transform 0.2s",
       transform: isOn ? "translateX(1.25rem)" : "translateX(0)"
     } }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
 var Switch_default = Switch;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var tableCSS = `
 [data-ds-table-row]:hover [data-ds-table-cell] { background-color: var(--ds-muted, #f1f5f9); }
 `;
 var Table = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { href: "ds-table", precedence: "low", children: tableCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { href: "ds-table", precedence: "low", children: tableCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: {
       width: "100%",
       overflowX: "auto",
       border: "1px solid var(--ds-border, #e2e8f0)",
       borderRadius: "0.5rem"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("table", __spreadValues({ style: __spreadValues({
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("table", __spreadValues({ style: __spreadValues({
       width: "100%",
       borderCollapse: "collapse",
       fontSize: "0.875rem"
     }, style) }, props)) })
   ] });
 };
-var TableHead = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", __spreadValues({}, props));
-var TableBody = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tbody", __spreadValues({}, props));
+var TableHead = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", __spreadValues({}, props));
+var TableBody = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", __spreadValues({}, props));
 var TableRow = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
 };
 var TableHeader = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("th", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", __spreadValues({ style: __spreadValues({
     padding: "0.75rem 1rem",
     textAlign: "left",
     fontWeight: 500,
@@ -1469,7 +1212,7 @@ var TableHeader = (_a) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "td",
     __spreadValues({
       "data-ds-table-cell": "",
@@ -1484,15 +1227,15 @@ var TableCell = (_a) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react17 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Tabs = ({ tabs, defaultValue }) => {
   var _a, _b;
-  const [active, setActive] = (0, import_react17.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
-  const [hovered, setHovered] = (0, import_react17.useState)(null);
+  const [active, setActive] = (0, import_react13.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
+  const [hovered, setHovered] = (0, import_react13.useState)(null);
   const activeTab = tabs.find((t) => t.value === active);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "tablist", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { role: "tablist", style: {
       display: "inline-flex",
       backgroundColor: "var(--ds-muted, #f1f5f9)",
       borderRadius: "0.5rem",
@@ -1501,7 +1244,7 @@ var Tabs = ({ tabs, defaultValue }) => {
     }, children: tabs.map((tab) => {
       const isActive = active === tab.value;
       const isHovered = hovered === tab.value;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "button",
         {
           role: "tab",
@@ -1526,14 +1269,14 @@ var Tabs = ({ tabs, defaultValue }) => {
             whiteSpace: "nowrap"
           },
           children: [
-            tab.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+            tab.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
             tab.label
           ]
         },
         tab.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "tabpanel", style: {
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { role: "tabpanel", style: {
       paddingTop: "1rem",
       fontSize: "0.875rem",
       color: "var(--ds-text-secondary, #64748b)"
@@ -1543,7 +1286,7 @@ var Tabs = ({ tabs, defaultValue }) => {
 var Tabs_default = Tabs;
 
 // src/components/Textarea/Textarea.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var textareaCSS = `
 [data-ds-textarea]::placeholder { color: var(--ds-text-secondary, #64748b); }
 [data-ds-textarea]:focus { outline: none; border-color: var(--ds-primary, #3b82f6); box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
@@ -1553,9 +1296,9 @@ var textareaCSS = `
 `;
 var Textarea = (_a) => {
   var _b = _a, { error, style } = _b, props = __objRest(_b, ["error", "style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { href: "ds-textarea", precedence: "low", children: textareaCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { href: "ds-textarea", precedence: "low", children: textareaCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "textarea",
       __spreadValues({
         "data-ds-textarea": "",
@@ -1581,8 +1324,8 @@ var Textarea = (_a) => {
 var Textarea_default = Textarea;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react18 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var positionStyle = {
   top: { bottom: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" },
   bottom: { top: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" },
@@ -1600,11 +1343,11 @@ var tooltipCSS = `
 [data-ds-tt="left"]::before   { left: 100%;   top: 50%;   transform: translateY(-50%); border-left-color:   var(--ds-tooltip-bg, #0f172a); }
 [data-ds-tt="right"]::before  { right: 100%;  top: 50%;   transform: translateY(-50%); border-right-color:  var(--ds-tooltip-bg, #0f172a); }
 `;
-var Tooltip5 = ({ content, children, position = "top" }) => {
-  const [visible, setVisible] = (0, import_react18.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("style", { href: "ds-tooltip", precedence: "low", children: tooltipCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+var Tooltip = ({ content, children, position = "top" }) => {
+  const [visible, setVisible] = (0, import_react14.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { href: "ds-tooltip", precedence: "low", children: tooltipCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "span",
       {
         style: { position: "relative", display: "inline-flex" },
@@ -1614,7 +1357,7 @@ var Tooltip5 = ({ content, children, position = "top" }) => {
         onBlur: () => setVisible(false),
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "span",
             {
               role: "tooltip",
@@ -1641,15 +1384,13 @@ var Tooltip5 = ({ content, children, position = "top" }) => {
     )
   ] });
 };
-var Tooltip_default = Tooltip5;
+var Tooltip_default = Tooltip;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   Alert,
-  AreaChart,
   Avatar,
   Badge,
-  BarChart,
   Breadcrumb,
   Button,
   Card,
@@ -1663,9 +1404,7 @@ var Tooltip_default = Tooltip5;
   FileUpload,
   Input,
   Label,
-  LineChart,
   PasswordInput,
-  PieChart,
   Progress,
   RadioGroup,
   Select,