@efiche/design 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -50,10 +50,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion_default,
-  Alert: () => Alert_default2,
-  Avatar: () => Avatar_default2,
-  Badge: () => Badge_default2,
-  Breadcrumb: () => Breadcrumb_default2,
+  Alert: () => Alert_default,
+  Avatar: () => Avatar_default,
+  Badge: () => Badge_default,
+  Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
   Card: () => Card,
   CardContent: () => CardContent,
@@ -61,29 +61,29 @@ __export(index_exports, {
   CardFooter: () => CardFooter,
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
-  Checkbox: () => Checkbox_default2,
-  CopyButton: () => CopyButton_default2,
-  FileUpload: () => FileUpload_default2,
-  Input: () => Input_default2,
-  Label: () => Label_default2,
+  Checkbox: () => Checkbox_default,
+  CopyButton: () => CopyButton_default,
+  FileUpload: () => FileUpload_default,
+  Input: () => Input_default,
+  Label: () => Label_default,
   PasswordInput: () => PasswordInput_default,
-  Progress: () => Progress_default2,
-  RadioGroup: () => RadioGroup_default2,
-  Select: () => Select_default2,
-  Skeleton: () => Skeleton_default2,
-  Slider: () => Slider_default2,
-  Spinner: () => Spinner_default2,
-  Switch: () => Switch_default2,
+  Progress: () => Progress_default,
+  RadioGroup: () => RadioGroup_default,
+  Select: () => Select_default,
+  Skeleton: () => Skeleton_default,
+  Slider: () => Slider_default,
+  Spinner: () => Spinner_default,
+  Switch: () => Switch_default,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCell: () => TableCell,
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
-  Tabs: () => Tabs_default2,
-  Textarea: () => Textarea_default2,
+  Tabs: () => Tabs_default,
+  Textarea: () => Textarea_default,
   ThemeProvider: () => ThemeProvider,
-  Tooltip: () => Tooltip_default2,
+  Tooltip: () => Tooltip_default,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
@@ -201,71 +201,144 @@ var Accordion_default = Accordion;
 
 // src/components/Alert/Alert.tsx
 var import_lucide_react2 = require("lucide-react");
-
-// src/components/Alert/Alert.module.css
-var Alert_default = {};
-
-// src/components/Alert/Alert.tsx
 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)" },
+  warning: { bg: "var(--ds-warning-bg, #fffbeb)", border: "var(--ds-warning, #f59e0b)", icon: "var(--ds-warning, #f59e0b)", title: "var(--ds-warning-title, #78350f)", desc: "var(--ds-warning-desc, #92400e)" },
+  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_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 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${Alert_default.alert} ${Alert_default[variant]}`, role: "alert", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Alert_default.icon, children: icons[variant] }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: Alert_default.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: Alert_default.title, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: Alert_default.description, children: description })
-  ] })
-] });
-var Alert_default2 = Alert;
-
-// src/components/Avatar/Avatar.module.css
-var Avatar_default = {};
+var Alert = ({ variant = "info", title, description }) => {
+  const v = variantMap[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", style: {
+    display: "flex",
+    gap: "0.75rem",
+    padding: "1rem",
+    borderRadius: "0.5rem",
+    borderLeft: `4px solid ${v.border}`,
+    backgroundColor: v.bg
+  }, children: [
+    /* @__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_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_runtime4.jsx)(
   "div",
   {
-    className: `${Avatar_default.avatar} ${Avatar_default[size]}${className ? ` ${className}` : ""}`,
-    style,
+    className,
     "aria-label": fallback,
+    style: __spreadValues(__spreadValues({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "9999px",
+      backgroundColor: "var(--ds-accent, #f1f5f9)",
+      color: "var(--ds-text-primary, #0f172a)",
+      fontWeight: 600,
+      flexShrink: 0,
+      userSelect: "none"
+    }, sizeMap[size]), style),
     children: fallback
   }
 );
-var Avatar_default2 = Avatar;
-
-// src/components/Badge/Badge.module.css
-var Badge_default = {};
+var Avatar_default = Avatar;
 
 // src/components/Badge/Badge.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${Badge_default.badge} ${Badge_default[variant]} ${Badge_default[size]}`, style, children });
-var Badge_default2 = Badge;
+var variantMap2 = {
+  default: { backgroundColor: "var(--ds-primary, #3b82f6)", color: "#fff" },
+  secondary: { backgroundColor: "var(--ds-muted, #f1f5f9)", color: "var(--ds-text-secondary, #64748b)" },
+  outline: { backgroundColor: "transparent", border: "1px solid var(--ds-border, #e2e8f0)", color: "var(--ds-text-primary, #0f172a)" },
+  danger: { backgroundColor: "var(--ds-danger, #ef4444)", color: "#fff" },
+  success: { backgroundColor: "var(--ds-success, #22c55e)", color: "#fff" },
+  warning: { backgroundColor: "var(--ds-warning, #f59e0b)", color: "#fff" },
+  info: { backgroundColor: "var(--ds-info, #3b82f6)", color: "#fff" }
+};
+var sizeMap2 = {
+  sm: { padding: "0.125rem 0.5rem", fontSize: "0.625rem" },
+  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_runtime5.jsx)("span", { style: __spreadValues(__spreadValues(__spreadValues({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  borderRadius: "9999px",
+  fontWeight: 500,
+  whiteSpace: "nowrap"
+}, variantMap2[variant]), sizeMap2[size]), style), children });
+var Badge_default = Badge;
 
 // src/components/Breadcrumb/Breadcrumb.tsx
+var import_react3 = require("react");
 var import_lucide_react3 = require("lucide-react");
-
-// src/components/Breadcrumb/Breadcrumb.module.css
-var Breadcrumb_default = {};
-
-// src/components/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Breadcrumb = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { className: Breadcrumb_default.list, children: items.map((item, i) => {
-  const isLast = i === items.length - 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: Breadcrumb_default.item, children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronRight, { size: 14, className: Breadcrumb_default.separator, "aria-hidden": true }),
-    isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${Breadcrumb_default.link} ${isLast ? Breadcrumb_default.current : ""}`, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: item.href, className: Breadcrumb_default.link, children: item.label })
-  ] }, item.label);
-}) }) });
-var Breadcrumb_default2 = Breadcrumb;
+var Breadcrumb = ({ items }) => {
+  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",
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    fontSize: "0.875rem"
+  }, children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    const isHovered = hovered === item.label;
+    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,
+          "aria-hidden": true,
+          style: { color: "var(--ds-text-secondary, #64748b)", margin: "0 0.25rem", flexShrink: 0 }
+        }
+      ),
+      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_runtime6.jsx)(
+        "a",
+        {
+          href: item.href,
+          onMouseEnter: () => setHovered(item.label),
+          onMouseLeave: () => setHovered(null),
+          style: {
+            color: "var(--ds-text-secondary, #64748b)",
+            textDecoration: isHovered ? "underline" : "none",
+            transition: "color 0.15s"
+          },
+          children: item.label
+        }
+      )
+    ] }, item.label);
+  }) }) });
+};
+var Breadcrumb_default = Breadcrumb;
 
 // src/components/Button/Button.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_react3 = require("react");
+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" },
@@ -290,14 +363,6 @@ var sizeStyles = {
   md: { padding: "0.5rem 1rem", fontSize: "0.875rem" },
   lg: { padding: "0.75rem 1.5rem", fontSize: "1rem" }
 };
-function injectSpinKeyframe() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("ds-spin-keyframe")) return;
-  const style = document.createElement("style");
-  style.id = "ds-spin-keyframe";
-  style.textContent = "@keyframes ds-spin { to { transform: rotate(360deg); } }";
-  document.head.appendChild(style);
-}
 var Button = (_a) => {
   var _b = _a, {
     text,
@@ -336,10 +401,7 @@ var Button = (_a) => {
     "size",
     "style"
   ]);
-  const [hovered, setHovered] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
-    injectSpinKeyframe();
-  }, []);
+  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;
@@ -357,68 +419,86 @@ 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_runtime7.jsxs)(
-    "button",
-    __spreadProps(__spreadValues({
-      disabled: isDisabled,
-      style: computedStyle,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false)
-    }, props), {
-      children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_lucide_react4.LoaderCircle,
-          {
-            "aria-hidden": true,
-            style: { width: "1em", height: "1em", animation: "ds-spin 0.75s linear infinite" }
-          }
-        ) : null,
-        showIcon && iconPosition === "left" ? icon : null,
-        content,
-        showIcon && iconPosition === "right" ? icon : null
-      ]
-    })
-  );
+  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,
+        style: computedStyle,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false)
+      }, props), {
+        children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_lucide_react4.LoaderCircle,
+            {
+              "aria-hidden": true,
+              style: { width: "1em", height: "1em", animation: "ds-spin 0.75s linear infinite" }
+            }
+          ) : null,
+          showIcon && iconPosition === "left" ? icon : null,
+          content,
+          showIcon && iconPosition === "right" ? icon : null
+        ]
+      })
+    )
+  ] });
 };
 var Button_default = Button;
 
-// src/components/Card/Card.module.css
-var Card_default = {};
-
 // src/components/Card/Card.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Card = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ className: `${Card_default.card}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  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)"
+  }, style) }, props));
 };
 var CardHeader = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ className: `${Card_default.header}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.375rem",
+    padding: "1.5rem 1.5rem 0"
+  }, style) }, props));
 };
 var CardTitle = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", __spreadValues({ className: `${Card_default.title}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", __spreadValues({ style: __spreadValues({
+    fontSize: "1rem",
+    fontWeight: 600,
+    color: "var(--ds-text-primary, #0f172a)",
+    margin: 0,
+    lineHeight: 1.4
+  }, style) }, props));
 };
 var CardDescription = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", __spreadValues({ className: `${Card_default.description}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", __spreadValues({ style: __spreadValues({
+    fontSize: "0.875rem",
+    color: "var(--ds-text-secondary, #64748b)",
+    margin: 0
+  }, style) }, props));
 };
 var CardContent = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ className: `${Card_default.content}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
 };
 var CardFooter = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ className: `${Card_default.footer}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
+    display: "flex",
+    alignItems: "center",
+    padding: "0 1.5rem 1.5rem"
+  }, style) }, props));
 };
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react4 = require("react");
-
-// src/components/Checkbox/Checkbox.module.css
-var Checkbox_default = {};
-
-// src/components/Checkbox/Checkbox.tsx
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var Checkbox = ({
   label,
@@ -428,7 +508,7 @@ var Checkbox = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react4.useState)(defaultChecked);
+  const [internal, setInternal] = (0, import_react5.useState)(defaultChecked);
   const isChecked = checked !== void 0 ? checked : internal;
   const handleChange = () => {
     if (disabled) return;
@@ -436,7 +516,14 @@ var Checkbox = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: `${Checkbox_default.container} ${disabled ? Checkbox_default.disabled : ""}`, htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: id, style: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none",
+    opacity: disabled ? 0.5 : 1
+  }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "input",
       {
@@ -445,26 +532,33 @@ var Checkbox = ({
         checked: isChecked,
         disabled,
         onChange: handleChange,
-        className: Checkbox_default.input
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${Checkbox_default.box} ${isChecked ? Checkbox_default.checked : ""}`, children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 12 10", fill: "none", className: Checkbox_default.checkmark, 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", { className: Checkbox_default.label, children: label })
+    /* @__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)"}`,
+      borderRadius: "0.25rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      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_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_default2 = Checkbox;
+var Checkbox_default = Checkbox;
 
 // src/components/CopyButton/CopyButton.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_react5 = require("react");
-
-// src/components/CopyButton/CopyButton.module.css
-var CopyButton_default = {};
-
-// src/components/CopyButton/CopyButton.tsx
+var import_react6 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CopyButton = ({ text }) => {
-  const [copied, setCopied] = (0, import_react5.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);
@@ -473,40 +567,51 @@ var CopyButton = ({ text }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
-      className: CopyButton_default.copyButton,
       onClick: handleCopy,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       "aria-label": copied ? "Copied" : `Copy ${text}`,
-      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Check, { className: CopyButton_default.icon }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Copy, { className: CopyButton_default.icon })
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0.25rem",
+        border: "none",
+        borderRadius: "0.25rem",
+        backgroundColor: hovered ? "var(--ds-accent, #f1f5f9)" : "transparent",
+        color: hovered ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)",
+        cursor: "pointer",
+        transition: "background-color 0.15s, color 0.15s"
+      },
+      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" } })
     }
   );
 };
-var CopyButton_default2 = CopyButton;
+var CopyButton_default = CopyButton;
 
 // src/components/FileUpload/FileUpload.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_react6 = require("react");
-
-// src/components/FileUpload/FileUpload.module.css
-var FileUpload_default = {};
-
-// src/components/FileUpload/FileUpload.tsx
+var import_react7 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
-  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
-  const [fileNames, setFileNames] = (0, import_react6.useState)([]);
-  const inputRef = (0, import_react6.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_runtime11.jsxs)(
     "div",
     {
-      className: `${FileUpload_default.zone} ${isDragging ? FileUpload_default.dragging : ""} ${disabled ? FileUpload_default.disabled : ""}`,
       onClick: () => {
         var _a;
         return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.click());
       },
+      onMouseEnter: () => !disabled && setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       onDragOver: (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -517,6 +622,20 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
         setIsDragging(false);
         if (!disabled && e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
       },
+      style: {
+        border: `2px dashed ${isActive ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
+        borderRadius: "0.5rem",
+        padding: "2rem",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "0.5rem",
+        cursor: disabled ? "not-allowed" : "pointer",
+        backgroundColor: isActive ? "var(--ds-primary-50, #eff6ff)" : "var(--ds-muted, #f1f5f9)",
+        transition: "border-color 0.15s, background-color 0.15s",
+        textAlign: "center",
+        opacity: disabled ? 0.5 : 1
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "input",
@@ -526,12 +645,12 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
             accept,
             multiple,
             disabled,
-            className: FileUpload_default.input,
+            style: { display: "none" },
             onChange: (e) => e.target.files && handleFiles(e.target.files)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Upload, { size: 32, className: FileUpload_default.icon }),
-        fileNames.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: FileUpload_default.fileName, children: fileNames.join(", ") }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: FileUpload_default.hint, children: [
+        /* @__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"
         ] })
@@ -539,65 +658,91 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
     }
   );
 };
-var FileUpload_default2 = FileUpload;
-
-// src/components/Input/Input.module.css
-var Input_default = {};
+var FileUpload_default = FileUpload;
 
 // src/components/Input/Input.tsx
 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); }
+[data-ds-input]:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--ds-muted, #f1f5f9); }
+[data-ds-input][data-error="true"]:focus { border-color: var(--ds-danger, #ef4444); box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15); }
+[data-ds-input][data-success="true"]:focus { border-color: var(--ds-success, #22c55e); box-shadow: 0 0 0 3px rgb(34 197 94 / 0.15); }
+`;
 var Input = (_a) => {
-  var _b = _a, {
-    error,
-    success,
-    leftIcon,
-    rightIcon,
-    className
-  } = _b, props = __objRest(_b, [
-    "error",
-    "success",
-    "leftIcon",
-    "rightIcon",
-    "className"
-  ]);
-  const wrapperClasses = [
-    Input_default.wrapper,
-    error ? Input_default.error : "",
-    success ? Input_default.success : "",
-    leftIcon ? Input_default.hasLeft : "",
-    rightIcon ? Input_default.hasRight : "",
-    className != null ? className : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: wrapperClasses, children: [
-    leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: Input_default.leftIcon, children: leftIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", __spreadValues({ className: Input_default.input }, props)),
-    rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: Input_default.rightIcon, children: rightIcon })
+  var _b = _a, { error, success, leftIcon, rightIcon, style } = _b, props = __objRest(_b, ["error", "success", "leftIcon", "rightIcon", "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",
+        alignItems: "center",
+        color: "var(--ds-text-secondary, #64748b)",
+        pointerEvents: "none"
+      }, children: leftIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "input",
+        __spreadValues({
+          "data-ds-input": "",
+          "data-error": error ? "true" : void 0,
+          "data-success": success ? "true" : void 0,
+          style: __spreadValues({
+            width: "100%",
+            height: "2.25rem",
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: leftIcon ? "2.25rem" : "0.75rem",
+            paddingRight: rightIcon ? "2.25rem" : "0.75rem",
+            border: `1px solid ${error ? "var(--ds-danger, #ef4444)" : success ? "var(--ds-success, #22c55e)" : "var(--ds-border, #e2e8f0)"}`,
+            borderRadius: "0.375rem",
+            fontSize: "0.875rem",
+            backgroundColor: "var(--ds-card, #fff)",
+            color: "var(--ds-text-primary, #0f172a)",
+            fontFamily: "inherit",
+            transition: "border-color 0.15s, box-shadow 0.15s"
+          }, style)
+        }, props)
+      ),
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: {
+        position: "absolute",
+        right: "0.625rem",
+        display: "flex",
+        alignItems: "center",
+        color: "var(--ds-text-secondary, #64748b)",
+        pointerEvents: "none"
+      }, children: rightIcon })
+    ] })
   ] });
 };
-var Input_default2 = Input;
-
-// src/components/Label/Label.module.css
-var Label_default = {};
+var Input_default = Input;
 
 // src/components/Label/Label.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Label = (_a) => {
-  var _b = _a, { children, required, className } = _b, props = __objRest(_b, ["children", "required", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", __spreadProps(__spreadValues({ className: `${Label_default.label} ${className != null ? className : ""}` }, props), { children: [
+  var _b = _a, { children, required, style } = _b, props = __objRest(_b, ["children", "required", "style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", __spreadProps(__spreadValues({ style: __spreadValues({
+    display: "block",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: "var(--ds-text-primary, #0f172a)",
+    marginBottom: "0.375rem"
+  }, style) }, props), { children: [
     children,
-    required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: Label_default.required, children: "*" })
+    required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
   ] }));
 };
-var Label_default2 = Label;
+var Label_default = Label;
 
 // src/components/PasswordInput/PasswordInput.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var PasswordInput = (props) => {
-  const [visible, setVisible] = (0, import_react7.useState)(false);
+  const [visible, setVisible] = (0, import_react8.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    Input_default2,
+    Input_default,
     __spreadProps(__spreadValues({}, props), {
       type: visible ? "text" : "password",
       rightIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -615,9 +760,6 @@ var PasswordInput = (props) => {
 };
 var PasswordInput_default = PasswordInput;
 
-// src/components/Progress/Progress.module.css
-var Progress_default = {};
-
 // src/components/Progress/Progress.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Progress = ({ value = 0 }) => {
@@ -625,24 +767,31 @@ var Progress = ({ value = 0 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
-      className: Progress_default.track,
       role: "progressbar",
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Progress_default.fill, style: { width: `${pct}%` } })
+      style: {
+        width: "100%",
+        height: "0.5rem",
+        backgroundColor: "var(--ds-border, #e2e8f0)",
+        borderRadius: "9999px",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: {
+        height: "100%",
+        width: `${pct}%`,
+        backgroundColor: "var(--ds-primary, #3b82f6)",
+        borderRadius: "9999px",
+        transition: "width 0.3s ease"
+      } })
     }
   );
 };
-var Progress_default2 = Progress;
-
-// src/components/RadioGroup/RadioGroup.tsx
-var import_react8 = require("react");
-
-// src/components/RadioGroup/RadioGroup.module.css
-var RadioGroup_default = {};
+var Progress_default = Progress;
 
 // src/components/RadioGroup/RadioGroup.tsx
+var import_react9 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var RadioGroup = ({
   options,
@@ -652,48 +801,65 @@ var RadioGroup = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react8.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_runtime16.jsx)("div", { className: RadioGroup_default.group, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    "label",
-    {
-      className: `${RadioGroup_default.item} ${disabled ? RadioGroup_default.disabled : ""}`,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "input",
-          {
-            type: "radio",
-            name,
-            value: option.value,
-            checked: selected === option.value,
-            disabled,
-            onChange: () => handleChange(option.value),
-            className: RadioGroup_default.input
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${RadioGroup_default.dot} ${selected === option.value ? RadioGroup_default.checked : ""}`, children: selected === option.value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: RadioGroup_default.inner }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: RadioGroup_default.label, children: option.label })
-      ]
-    },
-    option.value
-  )) });
+  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_runtime16.jsxs)("label", { style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      cursor: disabled ? "not-allowed" : "pointer",
+      userSelect: "none",
+      opacity: disabled ? 0.5 : 1
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: option.value,
+          checked: isSelected,
+          disabled,
+          onChange: () => handleChange(option.value),
+          style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
+        width: "1.125rem",
+        height: "1.125rem",
+        borderRadius: "9999px",
+        border: `2px solid ${isSelected ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        backgroundColor: "var(--ds-card, #fff)",
+        transition: "border-color 0.15s"
+      }, 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_runtime16.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
+    ] }, option.value);
+  }) });
 };
-var RadioGroup_default2 = RadioGroup;
+var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_react9 = require("react");
-
-// src/components/Select/Select.module.css
-var Select_default = {};
-
-// src/components/Select/Select.tsx
+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); }
+`;
 var Select = ({
   options,
   value,
@@ -703,9 +869,10 @@ var Select = ({
   onChange
 }) => {
   var _a;
-  const [internal, setInternal] = (0, import_react9.useState)(defaultValue);
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const ref = (0, import_react9.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) => {
@@ -713,66 +880,175 @@ var Select = ({
     setOpen(false);
     onChange == null ? void 0 : onChange(val);
   };
-  (0, import_react9.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_runtime17.jsxs)("div", { ref, className: `${Select_default.wrapper} ${disabled ? Select_default.disabled : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      "button",
-      {
-        type: "button",
-        className: `${Select_default.trigger} ${open ? Select_default.open : ""}`,
-        onClick: () => !disabled && setOpen((o) => !o),
-        disabled,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: selectedLabel ? Select_default.value : Select_default.placeholder, children: selectedLabel != null ? selectedLabel : placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.ChevronDown, { size: 16, className: `${Select_default.chevron} ${open ? Select_default.chevronOpen : ""}` })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Select_default.dropdown, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      "div",
-      {
-        className: `${Select_default.option} ${selected === option.value ? Select_default.selected : ""}`,
-        onClick: () => handleSelect(option.value),
-        children: [
-          selected === option.value ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Check, { size: 14, className: Select_default.checkIcon }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: Select_default.checkSpacer }),
-          option.label
-        ]
-      },
-      option.value
-    )) })
+  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_runtime17.jsxs)(
+        "button",
+        {
+          type: "button",
+          "data-ds-select-trigger": "",
+          onClick: () => !disabled && setOpen((o) => !o),
+          disabled,
+          style: {
+            width: "100%",
+            height: "2.25rem",
+            padding: "0 0.75rem",
+            border: `1px solid ${open ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
+            borderRadius: "0.375rem",
+            fontSize: "0.875rem",
+            backgroundColor: "var(--ds-card, #fff)",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.5rem",
+            boxShadow: open ? "0 0 0 3px rgb(59 130 246 / 0.15)" : "none",
+            transition: "border-color 0.15s, box-shadow 0.15s",
+            textAlign: "left",
+            fontFamily: "inherit"
+          },
+          children: [
+            /* @__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,
+                style: {
+                  flexShrink: 0,
+                  color: "var(--ds-text-secondary, #64748b)",
+                  transition: "transform 0.15s",
+                  transform: open ? "rotate(180deg)" : "rotate(0deg)"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: {
+        position: "absolute",
+        top: "calc(100% + 0.25rem)",
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        backgroundColor: "var(--ds-card, #fff)",
+        border: "1px solid var(--ds-border, #e2e8f0)",
+        borderRadius: "0.375rem",
+        boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+        overflow: "hidden"
+      }, children: options.map((option) => {
+        const isSelected = selected === option.value;
+        const isHovered = hoveredOption === option.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "div",
+          {
+            onClick: () => handleSelect(option.value),
+            onMouseEnter: () => setHoveredOption(option.value),
+            onMouseLeave: () => setHoveredOption(null),
+            style: {
+              padding: "0.5rem 0.75rem",
+              fontSize: "0.875rem",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              color: "var(--ds-text-primary, #0f172a)",
+              backgroundColor: isSelected || isHovered ? "var(--ds-muted, #f1f5f9)" : "transparent",
+              fontWeight: isSelected ? 500 : void 0,
+              transition: "background-color 0.1s"
+            },
+            children: [
+              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
+            ]
+          },
+          option.value
+        );
+      }) })
+    ] })
   ] });
 };
-var Select_default2 = Select;
-
-// src/components/Skeleton/Skeleton.module.css
-var Skeleton_default = {};
+var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  "div",
-  {
-    className: `${Skeleton_default.skeleton} ${circle ? Skeleton_default.circle : ""}`,
-    style: { height, width },
-    "aria-hidden": "true"
-  }
-);
-var Skeleton_default2 = Skeleton;
-
-// src/components/Slider/Slider.tsx
-var import_react10 = require("react");
-
-// src/components/Slider/Slider.module.css
-var Slider_default = {};
+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_runtime18.jsx)(
+    "div",
+    {
+      "data-ds-skeleton": "",
+      "aria-hidden": "true",
+      style: {
+        height,
+        width,
+        backgroundColor: "var(--ds-muted, #f1f5f9)",
+        borderRadius: circle ? "9999px" : "0.375rem"
+      }
+    }
+  )
+] });
+var Skeleton_default = Skeleton;
 
 // src/components/Slider/Slider.tsx
+var import_react11 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var sliderCSS = `
+[data-ds-slider] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 0.375rem;
+    border-radius: 9999px;
+    outline: none;
+    cursor: pointer;
+    background: linear-gradient(
+        to right,
+        var(--ds-primary, #3b82f6) 0%,
+        var(--ds-primary, #3b82f6) var(--fill, 50%),
+        var(--ds-border, #e2e8f0) var(--fill, 50%),
+        var(--ds-border, #e2e8f0) 100%
+    );
+}
+[data-ds-slider]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 9999px;
+    background-color: var(--ds-primary, #3b82f6);
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
+    transition: transform 0.1s;
+}
+[data-ds-slider]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+[data-ds-slider]::-moz-range-thumb {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 9999px;
+    background-color: var(--ds-primary, #3b82f6);
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
+}
+[data-ds-slider]:disabled { cursor: not-allowed; }
+`;
 var Slider = ({
   value,
   defaultValue = 50,
@@ -782,7 +1058,7 @@ var Slider = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react10.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) => {
@@ -790,42 +1066,49 @@ var Slider = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `${Slider_default.wrapper} ${disabled ? Slider_default.disabled : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    "input",
-    {
-      type: "range",
-      min,
-      max,
-      step,
-      value: current,
-      disabled,
-      onChange: handleChange,
-      className: Slider_default.range,
-      style: { "--fill": fill }
-    }
-  ) });
+  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_runtime19.jsx)(
+      "input",
+      {
+        type: "range",
+        "data-ds-slider": "",
+        min,
+        max,
+        step,
+        value: current,
+        disabled,
+        onChange: handleChange,
+        style: { "--fill": fill }
+      }
+    ) })
+  ] });
 };
-var Slider_default2 = Slider;
+var Slider_default = Slider;
 
 // src/components/Spinner/Spinner.tsx
 var import_lucide_react9 = require("lucide-react");
-
-// src/components/Spinner/Spinner.module.css
-var Spinner_default = {};
-
-// src/components/Spinner/Spinner.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var sizePx = { sm: 16, md: 24, lg: 32 };
-var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Loader2, { size: sizePx[size], className: Spinner_default.spinner, "aria-label": "Loading" });
-var Spinner_default2 = Spinner;
-
-// src/components/Switch/Switch.tsx
-var import_react11 = require("react");
-
-// src/components/Switch/Switch.module.css
-var Switch_default = {};
+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],
+      "aria-label": "Loading",
+      style: { color: "var(--ds-primary, #3b82f6)", animation: "ds-spin 0.75s linear infinite" }
+    }
+  )
+] });
+var Spinner_default = Spinner;
 
 // src/components/Switch/Switch.tsx
+var import_react12 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Switch = ({
   label,
@@ -835,7 +1118,7 @@ var Switch = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react11.useState)(defaultChecked);
+  const [internal, setInternal] = (0, import_react12.useState)(defaultChecked);
   const isOn = checked !== void 0 ? checked : internal;
   const handleToggle = () => {
     if (disabled) return;
@@ -843,7 +1126,14 @@ var Switch = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: `${Switch_default.container} ${disabled ? Switch_default.disabled : ""}`, htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { htmlFor: id, style: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.625rem",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none",
+    opacity: disabled ? 0.5 : 1
+  }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
       {
@@ -852,97 +1142,248 @@ var Switch = ({
         checked: isOn,
         disabled,
         onChange: handleToggle,
-        className: Switch_default.input
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${Switch_default.track} ${isOn ? Switch_default.on : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${Switch_default.thumb} ${isOn ? Switch_default.thumbOn : ""}` }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: Switch_default.label, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: {
+      width: "2.75rem",
+      height: "1.5rem",
+      borderRadius: "9999px",
+      backgroundColor: isOn ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)",
+      position: "relative",
+      transition: "background-color 0.2s",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: {
+      position: "absolute",
+      top: "0.175rem",
+      left: "0.175rem",
+      width: "1.15rem",
+      height: "1.15rem",
+      borderRadius: "9999px",
+      backgroundColor: "#fff",
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.15)",
+      transition: "transform 0.2s",
+      transform: isOn ? "translateX(1.25rem)" : "translateX(0)"
+    } }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
-var Switch_default2 = Switch;
-
-// src/components/Table/Table.module.css
-var Table_default = {};
+var Switch_default = Switch;
 
 // src/components/Table/Table.tsx
 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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: Table_default.wrapper, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("table", __spreadValues({ className: `${Table_default.table}${className ? ` ${className}` : ""}` }, props)) });
+  var _b = _a, { style } = _b, props = __objRest(_b, ["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_runtime22.jsx)("table", __spreadValues({ style: __spreadValues({
+      width: "100%",
+      borderCollapse: "collapse",
+      fontSize: "0.875rem"
+    }, style) }, 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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", __spreadValues({ className: `${Table_default.row}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
 };
 var TableHeader = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", __spreadValues({ className: `${Table_default.th}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", __spreadValues({ style: __spreadValues({
+    padding: "0.75rem 1rem",
+    textAlign: "left",
+    fontWeight: 500,
+    color: "var(--ds-text-secondary, #64748b)",
+    backgroundColor: "var(--ds-muted, #f1f5f9)",
+    borderBottom: "1px solid var(--ds-border, #e2e8f0)",
+    whiteSpace: "nowrap"
+  }, style) }, props));
 };
 var TableCell = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", __spreadValues({ className: `${Table_default.td}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "td",
+    __spreadValues({
+      "data-ds-table-cell": "",
+      style: __spreadValues({
+        padding: "0.75rem 1rem",
+        borderBottom: "1px solid var(--ds-border, #e2e8f0)",
+        color: "var(--ds-text-primary, #0f172a)",
+        transition: "background-color 0.1s"
+      }, style)
+    }, props)
+  );
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react12 = require("react");
-
-// src/components/Tabs/Tabs.module.css
-var Tabs_default = {};
-
-// src/components/Tabs/Tabs.tsx
+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_react12.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
+  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_runtime23.jsxs)("div", { className: Tabs_default.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Tabs_default.list, role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      "button",
-      {
-        role: "tab",
-        "aria-selected": active === tab.value,
-        className: `${Tabs_default.trigger} ${active === tab.value ? Tabs_default.active : ""}`,
-        onClick: () => setActive(tab.value),
-        children: [
-          tab.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Tabs_default["trigger-icon"], children: tab.icon }),
-          tab.label
-        ]
-      },
-      tab.value
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Tabs_default.content, role: "tabpanel", children: activeTab == null ? void 0 : activeTab.content })
+  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",
+      padding: "0.25rem",
+      gap: "0.125rem"
+    }, children: tabs.map((tab) => {
+      const isActive = active === tab.value;
+      const isHovered = hovered === tab.value;
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": isActive,
+          onClick: () => setActive(tab.value),
+          onMouseEnter: () => setHovered(tab.value),
+          onMouseLeave: () => setHovered(null),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.375rem",
+            padding: "0.375rem 0.75rem",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            borderRadius: "0.375rem",
+            background: isActive ? "var(--ds-card, #ffffff)" : "transparent",
+            border: "none",
+            cursor: "pointer",
+            color: isActive || isHovered ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)",
+            boxShadow: isActive ? "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" : "none",
+            transition: "color 0.15s, background-color 0.15s, box-shadow 0.15s",
+            whiteSpace: "nowrap"
+          },
+          children: [
+            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_runtime23.jsx)("div", { role: "tabpanel", style: {
+      paddingTop: "1rem",
+      fontSize: "0.875rem",
+      color: "var(--ds-text-secondary, #64748b)"
+    }, children: activeTab == null ? void 0 : activeTab.content })
   ] });
 };
-var Tabs_default2 = Tabs;
-
-// src/components/Textarea/Textarea.module.css
-var Textarea_default = {};
+var Tabs_default = Tabs;
 
 // src/components/Textarea/Textarea.tsx
 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); }
+[data-ds-textarea]:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--ds-muted, #f1f5f9); }
+[data-ds-textarea][data-error="true"] { border-color: var(--ds-danger, #ef4444); }
+[data-ds-textarea][data-error="true"]:focus { border-color: var(--ds-danger, #ef4444); box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15); }
+`;
 var Textarea = (_a) => {
-  var _b = _a, { error, className } = _b, props = __objRest(_b, ["error", "className"]);
-  const classes = [
-    Textarea_default.textarea,
-    error ? Textarea_default.error : "",
-    className != null ? className : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("textarea", __spreadValues({ className: classes }, props));
-};
-var Textarea_default2 = Textarea;
-
-// src/components/Tooltip/Tooltip.module.css
-var Tooltip_default = {};
+  var _b = _a, { error, style } = _b, props = __objRest(_b, ["error", "style"]);
+  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": "",
+        "data-error": error ? "true" : void 0,
+        style: __spreadValues({
+          width: "100%",
+          padding: "0.5rem 0.75rem",
+          border: `1px solid ${error ? "var(--ds-danger, #ef4444)" : "var(--ds-border, #e2e8f0)"}`,
+          borderRadius: "0.375rem",
+          fontSize: "0.875rem",
+          backgroundColor: "var(--ds-card, #fff)",
+          color: "var(--ds-text-primary, #0f172a)",
+          fontFamily: "inherit",
+          resize: "vertical",
+          transition: "border-color 0.15s, box-shadow 0.15s",
+          minHeight: "6rem",
+          boxSizing: "border-box"
+        }, style)
+      }, props)
+    )
+  ] });
+};
+var Textarea_default = Textarea;
 
 // src/components/Tooltip/Tooltip.tsx
+var import_react14 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Tooltip = ({ content, children, position = "top" }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: Tooltip_default.wrapper, children: [
-  children,
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${Tooltip_default.tooltip} ${Tooltip_default[position]}`, role: "tooltip", children: content })
-] });
-var Tooltip_default2 = Tooltip;
+var positionStyle = {
+  top: { bottom: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" },
+  bottom: { top: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" },
+  left: { right: "calc(100% + 8px)", top: "50%", transform: "translateY(-50%)" },
+  right: { left: "calc(100% + 8px)", top: "50%", transform: "translateY(-50%)" }
+};
+var tooltipCSS = `
+[data-ds-tt]::before {
+    content: '';
+    position: absolute;
+    border: 5px solid transparent;
+}
+[data-ds-tt="top"]::before    { top: 100%;    left: 50%;  transform: translateX(-50%); border-top-color:    var(--ds-tooltip-bg, #0f172a); }
+[data-ds-tt="bottom"]::before { bottom: 100%; left: 50%;  transform: translateX(-50%); border-bottom-color: var(--ds-tooltip-bg, #0f172a); }
+[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 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" },
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "span",
+            {
+              role: "tooltip",
+              "data-ds-tt": position,
+              style: __spreadValues({
+                position: "absolute",
+                zIndex: 50,
+                padding: "0.375rem 0.625rem",
+                backgroundColor: "var(--ds-tooltip-bg, #0f172a)",
+                color: "var(--ds-tooltip-text, #ffffff)",
+                fontSize: "0.75rem",
+                lineHeight: 1.4,
+                borderRadius: "0.375rem",
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+                opacity: visible ? 1 : 0,
+                transition: "opacity 0.15s"
+              }, positionStyle[position]),
+              children: content
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var Tooltip_default = Tooltip;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,