@octavius2929-personal/design-system 0.12.0 → 0.14.0

package/dist/index.cjs

@@ -62,6 +62,7 @@ __export(index_exports, {
   Switch: () => Switch,
   Table: () => Table,
   Tabs: () => Tabs,
+  TestIdProvider: () => TestIdProvider,
   TextField: () => TextField,
   ThemeProvider: () => ThemeProvider,
   Tooltip: () => Tooltip,
@@ -75,6 +76,7 @@ __export(index_exports, {
   theme: () => vars,
   themes: () => themes,
   usePrevious: () => usePrevious,
+  useTestId: () => useTestId,
   useTheme: () => useTheme,
   useToggle: () => useToggle
 });
@@ -106,7 +108,47 @@ function useToggle(initial = false) {
 }
 
 // src/components/container/index.tsx
+var import_react5 = require("react");
+
+// src/testing/use-test-id.ts
+var import_react4 = require("react");
+
+// src/testing/compose.ts
+function normalizeSegment(seg) {
+  return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+function composeTestId(parts) {
+  return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
+}
+
+// src/testing/context/test-id-context.tsx
 var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TestIdContext = (0, import_react3.createContext)([]);
+function TestIdProvider({ context, children }) {
+  const parent = (0, import_react3.useContext)(TestIdContext);
+  const value = (0, import_react3.useMemo)(
+    () => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
+    [parent, context]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestIdContext.Provider, { value, children });
+}
+function useTestIdContext() {
+  return (0, import_react3.useContext)(TestIdContext);
+}
+
+// src/testing/use-test-id.ts
+function useTestId(type, ownTestId) {
+  const ctx = useTestIdContext();
+  const testId = composeTestId([type, ...ctx, ownTestId]);
+  return (0, import_react4.useMemo)(
+    () => ({
+      testId,
+      slot: (name) => `${testId}__${normalizeSegment(name)}`
+    }),
+    [testId]
+  );
+}
 
 // src/theme/styles/sprinkles/index.css.ts
 var import_createRuntimeSprinkles = require("@vanilla-extract/sprinkles/createRuntimeSprinkles");
@@ -128,25 +170,26 @@ function useStyles(props) {
 }
 
 // src/components/container/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function ContainerImpl({ as, ...props }, ref) {
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ContainerImpl({ as, testId, ...props }, ref) {
   const Component = as ?? "div";
   const { className, rest } = useStyles(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, ...rest, className });
+  const { testId: dataTestId } = useTestId("layout", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, "data-testid": dataTestId, ...rest, className });
 }
-var ContainerForwarded = (0, import_react3.forwardRef)(ContainerImpl);
+var ContainerForwarded = (0, import_react5.forwardRef)(ContainerImpl);
 ContainerForwarded.displayName = "Container";
 var Container = ContainerForwarded;
 
 // src/components/typography/index.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/components/typography/use-styles.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/theme/context/theme-context.tsx
-var import_react4 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var noop = () => {
 };
 var DEFAULT_VALUE = {
@@ -159,7 +202,7 @@ var DEFAULT_VALUE = {
   toggleMode: noop,
   cycleMode: noop
 };
-var ThemeContext = (0, import_react4.createContext)(null);
+var ThemeContext = (0, import_react6.createContext)(null);
 function resolveSystemMode() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
   if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
@@ -189,14 +232,14 @@ function ThemeProvider({
   storageKey = "ds-theme",
   persist = true
 }) {
-  const [schema, setSchema] = (0, import_react4.useState)(
+  const [schema, setSchema] = (0, import_react6.useState)(
     () => persist && readStored(storageKey)?.schema || defaultSchema
   );
-  const [preference, setPreference] = (0, import_react4.useState)(
+  const [preference, setPreference] = (0, import_react6.useState)(
     () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
   );
-  const [systemMode, setSystemMode] = (0, import_react4.useState)(resolveSystemMode);
-  (0, import_react4.useEffect)(() => {
+  const [systemMode, setSystemMode] = (0, import_react6.useState)(resolveSystemMode);
+  (0, import_react6.useEffect)(() => {
     if (preference !== "system") return;
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
@@ -210,10 +253,10 @@ function ThemeProvider({
     };
   }, [preference]);
   const mode = preference === "system" ? systemMode : preference;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (persist) writeStored(storageKey, { schema, preference });
   }, [schema, preference, persist, storageKey]);
-  const value = (0, import_react4.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       schema,
       mode,
@@ -229,10 +272,10 @@ function ThemeProvider({
     }),
     [schema, mode, preference]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  return (0, import_react4.useContext)(ThemeContext) ?? DEFAULT_VALUE;
+  return (0, import_react6.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/theme/typography.css.ts
@@ -250,7 +293,7 @@ function useStyles2({
   align: align2
 }) {
   const { themeClass } = useTheme();
-  const className = (0, import_react5.useMemo)(
+  const className = (0, import_react7.useMemo)(
     () => [
       themeClass,
       base,
@@ -264,7 +307,7 @@ function useStyles2({
 }
 
 // src/components/typography/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -279,22 +322,29 @@ var defaultElement = {
   code: "code",
   blackletter: "span"
 };
-function TypographyInner({ variant: variant2, as, color: color2, align: align2, ...rest }, ref) {
+function TypographyInner({ variant: variant2, as, color: color2, align: align2, testId, ...rest }, ref) {
   const Component = as ?? defaultElement[variant2];
   const { text: text2 } = useStyles2({ variant: variant2, color: color2, align: align2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ref, ...rest, className: text2 });
+  const { testId: dataTestId } = useTestId("text", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-testid": dataTestId, ...rest, className: text2 });
 }
-var TypographyForwarded = (0, import_react6.forwardRef)(
+var TypographyForwarded = (0, import_react8.forwardRef)(
   TypographyInner
 );
 TypographyForwarded.displayName = "Typography";
 var Typography = TypographyForwarded;
 
 // src/components/button/index.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
+
+// src/testing/states.ts
+function states(map) {
+  const active2 = Object.keys(map).filter((key) => map[key]);
+  return active2.length > 0 ? active2.join(" ") : void 0;
+}
 
 // src/components/button/use-styles.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
@@ -315,7 +365,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react7.useMemo)(
+  const container = (0, import_react9.useMemo)(
     () => [
       themeClass,
       root,
@@ -330,9 +380,9 @@ function useStyles3({
 }
 
 // src/components/button/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
-var Button = (0, import_react8.forwardRef)(function Button2({
+var Button = (0, import_react10.forwardRef)(function Button2({
   variant: variant2,
   tone: tone4,
   size: size3 = "md",
@@ -341,23 +391,36 @@ var Button = (0, import_react8.forwardRef)(function Button2({
   full: full2,
   className,
   type = "button",
+  testId,
   children,
   ...rest
 }, ref) {
   const { container } = useStyles3({ variant: variant2, tone: tone4, size: size3, full: full2, className });
+  const { testId: dataTestId } = useTestId("button", testId);
   const iconSize = ICON_SIZE[size3];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { ref, type, className: container, ...rest, children: [
-    StartIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StartIcon, { size: iconSize }),
-    children,
-    EndIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EndIcon, { size: iconSize })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      className: container,
+      "data-testid": dataTestId,
+      "data-state": states({ disabled: rest.disabled }),
+      ...rest,
+      children: [
+        StartIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StartIcon, { size: iconSize }),
+        children,
+        EndIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EndIcon, { size: iconSize })
+      ]
+    }
+  );
 });
 
 // src/components/divider/index.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/components/divider/use-styles.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -370,7 +433,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react9.useMemo)(
+  const root24 = (0, import_react11.useMemo)(
     () => [
       themeClass,
       root2,
@@ -382,25 +445,26 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
 }
 
 // src/components/divider/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Divider = (0, import_react10.forwardRef)(function Divider2({ vertical: vertical2, label: label7, ...rest }, ref) {
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Divider = (0, import_react12.forwardRef)(function Divider2({ vertical: vertical2, label: label7, testId, ...rest }, ref) {
   const hasLabel = label7 != null;
   const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
+  const { testId: dataTestId, slot } = useTestId("layout", testId);
   if (hasLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, role: "separator", className: root24, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: line2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClass, children: label7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: line2 })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, role: "separator", className: root24, "data-testid": dataTestId, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: line2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: labelClass, "data-testid": slot("label"), children: label7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: line2 })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, role: "separator", className: root24, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, role: "separator", className: root24, "data-testid": dataTestId, ...rest });
 });
 
 // src/components/avatar/index.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/avatar/use-styles.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -414,7 +478,7 @@ function useStyles5({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react11.useMemo)(
+  const root24 = (0, import_react13.useMemo)(
     () => [
       themeClass,
       root3,
@@ -428,17 +492,18 @@ function useStyles5({
 }
 
 // src/components/avatar/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Avatar = (0, import_react12.forwardRef)(function Avatar2({ size: size3, filled, className, children, ...rest }, ref) {
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Avatar = (0, import_react14.forwardRef)(function Avatar2({ size: size3, filled, className, children, testId, ...rest }, ref) {
   const { root: root24 } = useStyles5({ size: size3, filled, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref, className: root24, ...rest, children });
+  const { testId: dataTestId } = useTestId("media", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
 });
 
 // src/components/badge/index.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/components/badge/use-styles.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -451,29 +516,30 @@ function useStyles6({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react13.useMemo)(
+  const root24 = (0, import_react15.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react13.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react15.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
 // src/components/badge/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Badge = (0, import_react14.forwardRef)(function Badge2({ count, tone: tone4, className, children, ...rest }, ref) {
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Badge = (0, import_react16.forwardRef)(function Badge2({ count, tone: tone4, className, children, testId, ...rest }, ref) {
   const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { ref, className: root24, ...rest, children: [
+  const { testId: dataTestId, slot } = useTestId("media", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
     children,
-    count != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: dot3, children: count })
+    count != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: dot3, "data-testid": slot("dot"), children: count })
   ] });
 });
 
 // src/components/progress/index.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/progress/use-styles.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -489,7 +555,7 @@ function useStyles7({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react15.useMemo)(() => {
+  return (0, import_react17.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -503,12 +569,13 @@ function useStyles7({
 }
 
 // src/components/progress/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Progress = (0, import_react16.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, ...rest }, ref) {
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, testId, ...rest }, ref) {
   const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
+  const { testId: dataTestId, slot } = useTestId("media", testId);
   if (variant2 === "circular") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
         ref,
@@ -518,11 +585,13 @@ var Progress = (0, import_react16.forwardRef)(function Progress2({ variant: vari
         "aria-valuemin": indeterminate2 ? void 0 : 0,
         "aria-valuemax": indeterminate2 ? void 0 : 100,
         style: { width: size3, height: size3 },
+        "data-testid": dataTestId,
+        "data-state": states({ indeterminate: indeterminate2 }),
         ...rest
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       ref,
@@ -531,19 +600,28 @@ var Progress = (0, import_react16.forwardRef)(function Progress2({ variant: vari
       "aria-valuenow": indeterminate2 ? void 0 : value,
       "aria-valuemin": indeterminate2 ? void 0 : 0,
       "aria-valuemax": indeterminate2 ? void 0 : 100,
+      "data-testid": dataTestId,
+      "data-state": states({ indeterminate: indeterminate2 }),
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          className: bar2,
+          style: indeterminate2 ? void 0 : { width: `${value}%` },
+          "data-testid": slot("bar")
+        }
+      )
     }
   );
 });
 
 // src/components/chip/index.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/icons/x/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -558,15 +636,15 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 6 12 12" })
       ]
     }
   );
 }
 
 // src/components/chip/use-styles.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -582,7 +660,7 @@ function useStyles8({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react17.useMemo)(
+  const root24 = (0, import_react19.useMemo)(
     () => [
       themeClass,
       root5,
@@ -595,27 +673,49 @@ function useStyles8({
 }
 
 // src/components/chip/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Chip = (0, import_react18.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }, ref) {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Chip = (0, import_react20.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
   const clickable2 = Boolean(onClick);
   const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
+  const { testId: dataTestId, slot } = useTestId("media", testId);
   const handleDelete = (event) => {
     event.stopPropagation();
     onDelete?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { ref, className: root24, onClick, ...rest, children: [
-    children,
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(XIcon, { size: 13 }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "span",
+    {
+      ref,
+      className: root24,
+      onClick,
+      "data-testid": dataTestId,
+      "data-state": states({ selected: selected3 }),
+      ...rest,
+      children: [
+        children,
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            className: deleteBtn2,
+            "aria-label": "Remove",
+            onClick: handleDelete,
+            "data-testid": slot("delete"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 13 })
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/components/checkbox/index.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/icons/check/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -629,13 +729,13 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -648,11 +748,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react19.useMemo)(
+  const root24 = (0, import_react21.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react19.useMemo)(
+  const box2 = (0, import_react21.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -660,15 +760,16 @@ function useStyles9({ checked, disabled: disabled3 }) {
 }
 
 // src/components/checkbox/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Checkbox = (0, import_react20.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, ...rest }, ref) {
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, testId, ...rest }, ref) {
   const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
+  const { testId: dataTestId } = useTestId("toggle", testId);
   const handleChange = (e) => {
     if (disabled3) return;
     onChange?.(e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
         ref,
@@ -681,16 +782,16 @@ var Checkbox = (0, import_react20.forwardRef)(function Checkbox2({ checked = fal
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckIcon, { size: 12, className: check2 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckIcon, { size: 12, className: check2 }) }),
     label7
   ] });
 });
 
 // src/components/radio/index.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // src/components/radio/use-styles.ts
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -706,7 +807,7 @@ function useStyles10({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react21.useMemo)(
+  const root24 = (0, import_react23.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -720,11 +821,12 @@ function useStyles10({
 }
 
 // src/components/radio/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Radio = (0, import_react22.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, ...rest }, ref) {
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, testId, ...rest }, ref) {
   const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const { testId: dataTestId } = useTestId("toggle", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "input",
       {
         ref,
@@ -738,16 +840,16 @@ var Radio = (0, import_react22.forwardRef)(function Radio2({ checked, onChange,
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: dot3 }) }),
-    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: dot3 }) }),
+    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: labelClass, children: label7 })
   ] });
 });
 
 // src/components/switch/index.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 
 // src/components/switch/use-styles.ts
-var import_react23 = require("react");
+var import_react25 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__1qa7atn0";
@@ -761,7 +863,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
 // src/components/switch/use-styles.ts
 function useStyles11({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react23.useMemo)(
+  return (0, import_react25.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -774,11 +876,12 @@ function useStyles11({ checked }) {
 }
 
 // src/components/switch/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Switch = (0, import_react24.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, ...rest }, ref) {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, testId, ...rest }, ref) {
   const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const { testId: dataTestId } = useTestId("toggle", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         ref,
@@ -795,19 +898,19 @@ var Switch = (0, import_react24.forwardRef)(function Switch2({ checked = false,
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: knob2 }) }),
-    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: knob2 }) }),
+    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: labelClass, children: label7 })
   ] });
 });
 
 // src/components/text-field/index.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/base-field/index.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/base-field/use-styles.ts
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/components/base-field/use-styles.css.ts
 var field = "use-styles_field__1c3cgd3";
@@ -826,7 +929,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 // src/components/base-field/use-styles.ts
 function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react25.useMemo)(() => {
+  return (0, import_react27.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -850,9 +953,9 @@ function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
 }
 
 // src/components/base-field/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var BaseField = (0, import_react26.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, children }, ref) {
-  const autoId = (0, import_react26.useId)();
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var BaseField = (0, import_react28.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
+  const autoId = (0, import_react28.useId)();
   const controlId = id ?? autoId;
   const errorMessage = error != null && error !== false && error !== true && error !== "" ? error : null;
   const hasError = error === true || errorMessage != null;
@@ -864,27 +967,30 @@ var BaseField = (0, import_react26.forwardRef)(function BaseField2({ label: labe
     hasTrailing: trailing2 != null,
     className
   });
+  const { testId: rootTestId, slot } = useTestId("field", testId);
   const control = {
     id: controlId,
     className: classes.input,
     ref,
     "aria-describedby": messageId,
-    "aria-invalid": hasError ? true : void 0
+    "aria-invalid": hasError ? true : void 0,
+    "data-testid": slot("input")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.root, children: [
-    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.field, children: [
-      StartIcon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.startIconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StartIcon, { size: 18 }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.root, "data-testid": rootTestId, "data-state": states({ error: hasError }), children: [
+    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: controlId, className: classes.labelText, "data-testid": slot("label"), children: label7 }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.field, children: [
+      StartIcon != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classes.startIconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StartIcon, { size: 18 }) }),
       children(control),
-      trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.trailingSlot, children: trailing2 })
+      trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classes.trailingSlot, children: trailing2 })
     ] }),
     message2 != null && // `aria-live` solo cuando el mensaje es un error: anuncia la validación al aparecer.
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "span",
       {
         id: messageId,
         className: classes.helpText,
         "aria-live": errorMessage ? "polite" : void 0,
+        "data-testid": slot("message"),
         children: message2
       }
     )
@@ -892,12 +998,12 @@ var BaseField = (0, import_react26.forwardRef)(function BaseField2({ label: labe
 });
 
 // src/components/text-field/index.tsx
-var import_jsx_runtime16 = (
+var import_jsx_runtime17 = (
   // En multiline el control es un <textarea>: no reenviamos `controlRef` porque el
   // tipo público de la ref es HTMLInputElement (la ref aplica solo a la rama <input>).
   require("react/jsx-runtime")
 );
-var TextField = (0, import_react27.forwardRef)(function TextField2({
+var TextField = (0, import_react29.forwardRef)(function TextField2({
   label: label7,
   help,
   error,
@@ -908,9 +1014,11 @@ var TextField = (0, import_react27.forwardRef)(function TextField2({
   onChange,
   className,
   id,
+  testId,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const rawTestId = rest["data-testid"];
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     BaseField,
     {
       ref,
@@ -920,19 +1028,22 @@ var TextField = (0, import_react27.forwardRef)(function TextField2({
       startIcon,
       id,
       className,
-      children: ({ ref: controlRef, ...control }) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      testId,
+      children: ({ ref: controlRef, ...control }) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "textarea",
         {
           ...rest,
           ...control,
+          "data-testid": rawTestId ?? control["data-testid"],
           rows: rows ?? 4,
           onChange: (e) => onChange?.(e.target.value)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         {
           ...rest,
           ...control,
+          "data-testid": rawTestId ?? control["data-testid"],
           ref: controlRef,
           type,
           onChange: (e) => onChange?.(e.target.value)
@@ -943,12 +1054,12 @@ var TextField = (0, import_react27.forwardRef)(function TextField2({
 });
 
 // src/components/password-field/index.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // src/components/icons/eye/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -963,17 +1074,17 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
 
 // src/components/icons/eye-off/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -988,31 +1099,31 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m2 2 20 20" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m2 2 20 20" })
       ]
     }
   );
 }
 
 // src/components/password-field/use-styles.ts
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/password-field/use-styles.css.ts
 var revealButton = "use-styles_revealButton__rsu9d50";
 
 // src/components/password-field/use-styles.ts
 function useStyles13() {
-  return (0, import_react28.useMemo)(() => ({ revealButton }), []);
+  return (0, import_react30.useMemo)(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var PasswordField = (0, import_react29.forwardRef)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var PasswordField = (0, import_react31.forwardRef)(
   function PasswordField2({ label: label7, help, error, startIcon, onChange, id, className, ...rest }, ref) {
-    const [reveal, setReveal] = (0, import_react29.useState)(false);
+    const [reveal, setReveal] = (0, import_react31.useState)(false);
     const classes = useStyles13();
     const handleChange = (e) => {
       onChange?.(e.target.value);
@@ -1020,7 +1131,7 @@ var PasswordField = (0, import_react29.forwardRef)(
     const handleToggleMouseDown = (e) => {
       e.preventDefault();
     };
-    const toggleButton = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    const toggleButton = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "button",
       {
         type: "button",
@@ -1029,10 +1140,10 @@ var PasswordField = (0, import_react29.forwardRef)(
         "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
         onMouseDown: handleToggleMouseDown,
         onClick: () => setReveal((r) => !r),
-        children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeIcon, { size: 18 })
+        children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EyeIcon, { size: 18 })
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       BaseField,
       {
         ref,
@@ -1043,7 +1154,7 @@ var PasswordField = (0, import_react29.forwardRef)(
         trailing: toggleButton,
         id,
         className,
-        children: (control) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: (control) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "input",
           {
             ...rest,
@@ -1058,15 +1169,15 @@ var PasswordField = (0, import_react29.forwardRef)(
 );
 
 // src/components/money-field/index.tsx
-var import_react30 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
   if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
   const n = Number.parseFloat(cleaned);
   return Number.isNaN(n) ? null : n;
 }
-var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
+var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
   value,
   onChange,
   currency = "USD",
@@ -1081,9 +1192,9 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
   onBlur,
   ...rest
 }, ref) {
-  const [focused, setFocused] = (0, import_react30.useState)(false);
-  const [draft, setDraft] = (0, import_react30.useState)("");
-  const formatter = (0, import_react30.useMemo)(
+  const [focused, setFocused] = (0, import_react32.useState)(false);
+  const [draft, setDraft] = (0, import_react32.useState)("");
+  const formatter = (0, import_react32.useMemo)(
     () => new Intl.NumberFormat(locale, { style: "currency", currency }),
     [locale, currency]
   );
@@ -1099,7 +1210,7 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
     onChange?.(parseAmount(draft));
     onBlur?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     BaseField,
     {
       ref,
@@ -1109,7 +1220,7 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
       startIcon,
       id,
       className,
-      children: (control) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: (control) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
           ...rest,
@@ -1126,10 +1237,10 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
 });
 
 // src/components/icon-button/index.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 
 // src/components/icon-button/use-styles.ts
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -1142,7 +1253,7 @@ function useStyles14({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react31.useMemo)(
+  const root24 = (0, import_react33.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -1150,8 +1261,8 @@ function useStyles14({
 }
 
 // src/components/icon-button/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var IconButton = (0, import_react32.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", ...rest }, ref) {
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var IconButton = (0, import_react34.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...rest }, ref) {
   if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
     const restProps = rest;
     const hasName = title.trim() !== "" || restProps["aria-label"] != null || restProps["aria-labelledby"] != null;
@@ -1160,14 +1271,28 @@ var IconButton = (0, import_react32.forwardRef)(function IconButton2({ icon: Ico
     }
   }
   const { root: root24 } = useStyles14({ active: active2, tone: tone4 });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { ref, type, className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: 18 }) });
+  const { testId: dataTestId } = useTestId("button", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "button",
+    {
+      ref,
+      type,
+      className: root24,
+      "aria-label": title,
+      title,
+      "data-testid": dataTestId,
+      "data-state": states({ active: active2, disabled: rest.disabled }),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { size: 18 })
+    }
+  );
 });
 
 // src/components/card/index.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // src/components/card/use-styles.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -1178,27 +1303,28 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles15() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react33.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react35.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var CardRoot = (0, import_react34.forwardRef)(function Card({ children, ...rest }, ref) {
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var CardRoot = (0, import_react36.forwardRef)(function Card({ children, testId, ...rest }, ref) {
   const { root: root24 } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: root24, ...rest, children });
+  const { testId: dataTestId } = useTestId("layout", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
 });
 function CardHeader({ children, ...rest }) {
   const { header: header3 } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: header3, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: header3, ...rest, children });
 }
 function CardBody({ children, ...rest }) {
   const { body: body3 } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: body3, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: body3, ...rest, children });
 }
 function CardFooter({ children, ...rest }) {
   const { footer: footer2 } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: footer2, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: footer2, ...rest, children });
 }
 CardRoot.displayName = "Card";
 CardHeader.displayName = "Card.Header";
@@ -1211,12 +1337,12 @@ var Card2 = Object.assign(CardRoot, {
 });
 
 // src/components/alert/index.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // src/components/icons/circle-check/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1231,17 +1357,17 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
 }
 
 // src/components/icons/circle-x/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1256,18 +1382,18 @@ function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m15 9-6 6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m9 9 6 6" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m9 9 6 6" })
       ]
     }
   );
 }
 
 // src/components/icons/info/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1282,18 +1408,18 @@ function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 8h.01" })
       ]
     }
   );
 }
 
 // src/components/icons/triangle-alert/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1308,16 +1434,16 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 9v4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 17h.01" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M12 17h.01" })
       ]
     }
   );
 }
 
 // src/components/alert/use-styles.ts
-var import_react35 = require("react");
+var import_react37 = require("react");
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1331,7 +1457,7 @@ function useStyles16({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react35.useMemo)(
+  const root24 = (0, import_react37.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1343,30 +1469,31 @@ function useStyles16({
 }
 
 // src/components/alert/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultIcons = {
   info: InfoIcon,
   ok: CircleCheckIcon,
   warn: TriangleAlertIcon,
   danger: CircleXIcon
 };
-var Alert = (0, import_react36.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, children, ...rest }, ref) {
+var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
   const styles = useStyles16({ severity: severity2, className });
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const IconComponent = icon ?? defaultIcons[severity2];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, role: "alert", className: styles.root, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconComponent, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.content, children: [
-      title != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "h4", children: title }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "body", color: "fg2", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, role: "alert", className: styles.root, "data-testid": dataTestId, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconComponent, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.content, "data-testid": slot("content"), children: [
+      title != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "h4", children: title }),
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "body", color: "fg2", children })
     ] })
   ] });
 });
 
 // src/components/tooltip/index.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react37 = require("react");
+var import_react39 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
@@ -1378,11 +1505,11 @@ function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react37.useMemo)(
+  const wrapper4 = (0, import_react39.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react37.useMemo)(
+  const bubble2 = (0, import_react39.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1390,13 +1517,14 @@ function useStyles17({
 }
 
 // src/components/tooltip/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var HIDE_DELAY = 120;
-var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2 }, ref) {
-  const [open, setOpen] = (0, import_react38.useState)(false);
-  const tooltipId = (0, import_react38.useId)();
+var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2, testId }, ref) {
+  const [open, setOpen] = (0, import_react40.useState)(false);
+  const tooltipId = (0, import_react40.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
-  const hideTimer = (0, import_react38.useRef)(null);
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
+  const hideTimer = (0, import_react40.useRef)(null);
   const clearHide = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -1415,7 +1543,7 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
     clearHide();
     setOpen(false);
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return () => {
       if (hideTimer.current) clearTimeout(hideTimer.current);
     };
@@ -1428,12 +1556,13 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
   };
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react38.cloneElement)(children, { "aria-describedby": describedBy });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const trigger2 = (0, import_react40.cloneElement)(children, { "aria-describedby": describedBy });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "span",
     {
       ref,
       className: wrapper4,
+      "data-testid": dataTestId,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
       onFocus: show,
@@ -1441,12 +1570,13 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
       onKeyDown: handleKeyDown,
       children: [
         trigger2,
-        open && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "span",
           {
             id: tooltipId,
             role: "tooltip",
             className: bubble2,
+            "data-testid": slot("bubble"),
             onMouseEnter: show,
             onMouseLeave: scheduleHide,
             children: label7
@@ -1458,12 +1588,12 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
 });
 
 // src/components/select/index.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1477,13 +1607,13 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 
 // src/components/select/use-styles.ts
-var import_react39 = require("react");
+var import_react41 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1502,7 +1632,7 @@ function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react39.useMemo)(() => {
+  return (0, import_react41.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1517,17 +1647,17 @@ function useStyles18({
 }
 
 // src/components/select/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Select = (0, import_react40.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
-  const [open, setOpen] = (0, import_react40.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react40.useState)(0);
-  const rootRef = (0, import_react40.useRef)(null);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Select = (0, import_react42.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
+  const [open, setOpen] = (0, import_react42.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react42.useState)(0);
+  const rootRef = (0, import_react42.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   };
-  const baseId = (0, import_react40.useId)();
+  const baseId = (0, import_react42.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1539,7 +1669,7 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
     menu: menu2,
     optionClass
   } = useStyles18({ open });
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1599,9 +1729,9 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: setRootRef, className: root24, ...rest, children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref: setRootRef, className: root24, ...rest, children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "button",
       {
         type: "button",
@@ -1621,17 +1751,17 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: placeholderClass, children: placeholder2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDownIcon, { size: 18 }) })
+          selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: placeholderClass, children: placeholder2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDownIcon, { size: 18 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
+    open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
       const isSelected = option2.value === value;
       const isActive = index === activeIndex;
       return (
         // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard nav lives on the trigger via aria-activedescendant; options are not focusable.
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
             id: optionId(index),
@@ -1650,10 +1780,10 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
 });
 
 // src/components/slider/index.tsx
-var import_react42 = require("react");
+var import_react44 = require("react");
 
 // src/components/slider/use-styles.ts
-var import_react41 = require("react");
+var import_react43 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1667,7 +1797,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return (0, import_react41.useMemo)(() => {
+  return (0, import_react43.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1682,8 +1812,8 @@ function useStyles19() {
 }
 
 // src/components/slider/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Slider = (0, import_react42.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Slider = (0, import_react44.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
   const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
@@ -1691,12 +1821,12 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({ value = 0, onChan
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: wrapper4, children: [
-    label7 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: labelClass, children: label7 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: root24, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: track4 }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: range2, style: { width: `${clamped}%` } }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: wrapper4, children: [
+    label7 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: labelClass, children: label7 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: root24, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: track4 }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: range2, style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "input",
         {
           ref,
@@ -1711,16 +1841,16 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({ value = 0, onChan
           ...rest
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
     ] })
   ] });
 });
 
 // src/components/accordion/index.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react43 = require("react");
+var import_react45 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1733,7 +1863,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react43.useMemo)(
+  return (0, import_react45.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1746,10 +1876,11 @@ function useStyles20({ className }) {
 }
 
 // src/components/accordion/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Accordion = (0, import_react44.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className }, ref) {
-  const [open, setOpen] = (0, import_react44.useState)(defaultOpen);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
+  const [open, setOpen] = (0, import_react46.useState)(defaultOpen);
   const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
+  const { testId: dataTestId, slot } = useTestId("layout", testId);
   const toggle = (id) => {
     setOpen((current2) => {
       const isOpen = current2.includes(id);
@@ -1757,38 +1888,59 @@ var Accordion = (0, import_react44.forwardRef)(function Accordion2({ items, mult
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: root24, "data-testid": dataTestId, children: items.map((it) => {
     const isOpen = open.includes(it.id);
     const panelId = `accordion-panel-${it.id}`;
     const headerId = `accordion-header-${it.id}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: item3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-        "button",
-        {
-          type: "button",
-          id: headerId,
-          className: header3,
-          "aria-expanded": isOpen,
-          "aria-controls": panelId,
-          onClick: () => toggle(it.id),
-          children: [
-            it.title,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: panelId, className: panel3, role: "region", "aria-labelledby": headerId, children: it.content })
-    ] }, it.id);
+    const itemSlot = slot(`item-${it.id}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "div",
+      {
+        className: item3,
+        "data-testid": itemSlot,
+        "data-state": states({ expanded: isOpen }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "button",
+            {
+              type: "button",
+              id: headerId,
+              className: header3,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "data-testid": `${itemSlot}__trigger`,
+              onClick: () => toggle(it.id),
+              children: [
+                it.title,
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "div",
+            {
+              id: panelId,
+              className: panel3,
+              role: "region",
+              "aria-labelledby": headerId,
+              "data-testid": `${itemSlot}__panel`,
+              children: it.content
+            }
+          )
+        ]
+      },
+      it.id
+    );
   }) });
 });
 
 // src/components/breadcrumbs/index.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1802,13 +1954,13 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react45 = require("react");
+var import_react47 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1819,7 +1971,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react45.useMemo)(
+  const root24 = (0, import_react47.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1827,26 +1979,27 @@ function useStyles21({ className }) {
 }
 
 // src/components/breadcrumbs/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Breadcrumbs = (0, import_react46.forwardRef)(function Breadcrumbs2({ items, className, ...rest }, ref) {
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Breadcrumbs = (0, import_react48.forwardRef)(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
   const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react46.Fragment, { children: [
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: crumb2, children: item3.label }),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, { size: 14 }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react48.Fragment, { children: [
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: current2, "aria-current": "page", "data-testid": slot(`crumb-${index}`), children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { className: crumb2, href: item3.href, "data-testid": slot(`crumb-${index}`), children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: crumb2, "data-testid": slot(`crumb-${index}`), children: item3.label }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
   }) });
 });
 
 // src/components/pagination/index.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 
 // src/components/icons/chevron-left/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1860,13 +2013,13 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 
 // src/components/pagination/use-styles.ts
-var import_react47 = require("react");
+var import_react49 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1878,7 +2031,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react47.useMemo)(
+  return (0, import_react49.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1890,7 +2043,7 @@ function useStyles22() {
 }
 
 // src/components/pagination/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function buildItems(count, page, siblingCount) {
   const total = Math.max(1, count);
   const first = 1;
@@ -1904,59 +2057,68 @@ function buildItems(count, page, siblingCount) {
   if (last > first) items.push(last);
   return items;
 }
-var Pagination = (0, import_react48.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, ...rest }, ref) {
+var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
   const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
   const total = Math.max(1, count);
   const current2 = Math.min(Math.max(1, page), total);
   const items = buildItems(total, current2, siblingCount);
   const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { ref, className: root24, "aria-label": "Pagination", ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { ref, className: root24, "aria-label": "Pagination", "data-testid": dataTestId, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
         className: nav2,
         "aria-label": "Previous page",
         disabled: current2 <= 1,
+        "data-testid": slot("prev"),
         onClick: () => go(current2 - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronLeftIcon, { size: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronLeftIcon, { size: 18 })
       }
     ),
     items.map(
-      (item3, index) => item3 === "ellipsis" ? (
-        // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
-      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      (item3, index) => item3 === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "span",
+        {
+          className: ellipsis2,
+          "data-testid": slot(`ellipsis-${index}`),
+          children: "\u2026"
+        },
+        `ellipsis-${index}`
+      ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
           className: pageBtnFor(item3 === current2),
           "aria-current": item3 === current2 ? "page" : void 0,
+          "data-testid": slot(`page-${item3}`),
           onClick: () => go(item3),
           children: item3
         },
         item3
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
         className: nav2,
         "aria-label": "Next page",
         disabled: current2 >= total,
+        "data-testid": slot("next"),
         onClick: () => go(current2 + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 18 })
       }
     )
   ] });
 });
 
 // src/components/stepper/index.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react49 = require("react");
+var import_react51 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1971,7 +2133,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react49.useMemo)(() => {
+  return (0, import_react51.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1984,30 +2146,40 @@ function useStyles23({ className }) {
 }
 
 // src/components/stepper/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Stepper = (0, import_react50.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, ...rest }, ref) {
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
   const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, className: root24, ...rest, children: steps.map((s, index) => {
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children: steps.map((s, index) => {
     const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react50.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: labelFor(isActive), children: s.label })
-        ] }),
-        index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "data-part": "connector", className: connector2 })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react52.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          "div",
+          {
+            className: step2,
+            "aria-current": isActive ? "step" : void 0,
+            "data-testid": slot(`step-${index}`),
+            "data-state": states({ done: state === "done", active: isActive }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: labelFor(isActive), children: s.label })
+            ]
+          }
+        ),
+        index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-part": "connector", className: connector2 })
       ] }, index)
     );
   }) });
 });
 
 // src/components/tabs/index.tsx
-var import_react52 = require("react");
+var import_react54 = require("react");
 
 // src/components/tabs/use-styles.ts
-var import_react51 = require("react");
+var import_react53 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var panel2 = "use-styles_panel__1l4m7t43";
@@ -2018,7 +2190,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react51.useMemo)(() => {
+  return (0, import_react53.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass, panel: panel2 };
@@ -2026,11 +2198,12 @@ function useStyles24() {
 }
 
 // src/components/tabs/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChange, ...rest }, ref) {
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
-  const baseId = (0, import_react52.useId)();
-  const tabRefs = (0, import_react52.useRef)([]);
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  const baseId = (0, import_react54.useId)();
+  const tabRefs = (0, import_react54.useRef)([]);
   const hasPanels = items.some((item3) => item3.content !== void 0);
   const activeIndex = items.findIndex((item3) => item3.value === value);
   const tabId = (v) => `${baseId}-tab-${v}`;
@@ -2062,11 +2235,11 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, role: "tablist", className: root24, ...rest, children: items.map((item3, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, role: "tablist", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
       const active2 = item3.value === value;
       const tabbable = active2 || activeIndex === -1 && index === 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           ref: (el) => {
@@ -2079,6 +2252,8 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
           "aria-controls": hasPanels ? panelId(item3.value) : void 0,
           tabIndex: tabbable ? 0 : -1,
           className: tabClass(active2),
+          "data-testid": slot(`tab-${index}`),
+          "data-state": states({ selected: active2 }),
           onClick: () => onChange?.(item3.value),
           onKeyDown: (event) => onKeyDown(event, index),
           children: item3.label
@@ -2086,7 +2261,7 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
         item3.value
       );
     }) }),
-    hasPanels && items.map((item3) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    hasPanels && items.map((item3) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         role: "tabpanel",
@@ -2095,6 +2270,7 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
         hidden: item3.value !== value,
         tabIndex: 0,
         className: panel3,
+        "data-testid": slot(`panel-${item3.value}`),
         children: item3.content
       },
       item3.value
@@ -2103,10 +2279,10 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
 });
 
 // src/components/menu/index.tsx
-var import_react54 = require("react");
+var import_react56 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react53 = require("react");
+var import_react55 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -2117,7 +2293,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles25() {
   const { themeClass } = useTheme();
-  return (0, import_react53.useMemo)(
+  return (0, import_react55.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -2129,22 +2305,23 @@ function useStyles25() {
 }
 
 // src/components/menu/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, items }, ref) {
+var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
-  const [open, setOpen] = (0, import_react54.useState)(false);
-  const [alignEnd, setAlignEnd] = (0, import_react54.useState)(false);
-  const rootRef = (0, import_react54.useRef)(null);
+  const { testId: rootTestId, slot } = useTestId("menu", testId);
+  const [open, setOpen] = (0, import_react56.useState)(false);
+  const [alignEnd, setAlignEnd] = (0, import_react56.useState)(false);
+  const rootRef = (0, import_react56.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     assignRef(ref, node);
   };
-  const listRef = (0, import_react54.useRef)(null);
-  const triggerRef = (0, import_react54.useRef)(null);
+  const listRef = (0, import_react56.useRef)(null);
+  const triggerRef = (0, import_react56.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -2156,7 +2333,7 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react54.useLayoutEffect)(() => {
+  (0, import_react56.useLayoutEffect)(() => {
     if (!open) {
       setAlignEnd(false);
       return;
@@ -2168,7 +2345,7 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
     const viewport = document.documentElement.clientWidth;
     setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
   }, [open]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -2224,7 +2401,7 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react54.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react56.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -2233,42 +2410,53 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
       setOpen((prev) => !prev);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: setRootRef, className: wrapper4, children: [
-    clonedTrigger,
-    open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      "div",
-      {
-        ref: listRef,
-        role: "menu",
-        className: list2,
-        "data-align": alignEnd ? "end" : "start",
-        onKeyDown: onMenuKeyDown,
-        children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "div",
+    {
+      ref: setRootRef,
+      className: wrapper4,
+      "data-testid": rootTestId,
+      "data-state": open ? "open" : "closed",
+      children: [
+        clonedTrigger,
+        open && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "div",
           {
-            type: "button",
-            role: "menuitem",
-            tabIndex: -1,
-            className: entry.danger ? dangerItem : item3,
-            onClick: () => {
-              entry.onClick?.();
-              setOpen(false);
-            },
-            children: entry.label
-          },
-          index
-        ))
-      }
-    )
-  ] });
+            ref: listRef,
+            role: "menu",
+            className: list2,
+            "data-align": alignEnd ? "end" : "start",
+            "data-testid": slot("list"),
+            onKeyDown: onMenuKeyDown,
+            children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                tabIndex: -1,
+                className: entry.danger ? dangerItem : item3,
+                "data-testid": slot(`item-${index}`),
+                onClick: () => {
+                  entry.onClick?.();
+                  setOpen(false);
+                },
+                children: entry.label
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/components/dialog/index.tsx
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react55 = require("react");
+var import_react57 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -2279,7 +2467,7 @@ var surface = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return (0, import_react55.useMemo)(
+  return (0, import_react57.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -2291,23 +2479,24 @@ function useStyles26() {
 }
 
 // src/components/dialog/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children }, ref) {
+var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
   const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
-  const surfaceRef = (0, import_react56.useRef)(null);
+  const { testId: rootTestId, slot } = useTestId("dialog", testId);
+  const surfaceRef = (0, import_react58.useRef)(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
     assignRef2(ref, node);
   };
-  const previouslyFocused = (0, import_react56.useRef)(null);
-  const generatedId = (0, import_react56.useId)();
+  const previouslyFocused = (0, import_react58.useRef)(null);
+  const generatedId = (0, import_react58.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -2315,13 +2504,13 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2359,7 +2548,7 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
   };
   return (0, import_react_dom.createPortal)(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: overlay2, "data-testid": slot("overlay"), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
         ref: setSurfaceRef,
@@ -2368,12 +2557,13 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
         "aria-modal": "true",
         "aria-labelledby": titleId,
         tabIndex: -1,
+        "data-testid": rootTestId,
         onClick: stop,
         onKeyDown: onSurfaceKeyDown,
         children: [
-          title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
-          children != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: body3, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typography, { variant: "body", color: "fg2", children }) }),
-          actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: actionsClass, children: actions3 })
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
+          children != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: body3, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "body", color: "fg2", children }) }),
+          actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: actionsClass, children: actions3 })
         ]
       }
     ) }),
@@ -2382,11 +2572,11 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
 });
 
 // src/components/snackbar/index.tsx
-var import_react58 = require("react");
+var import_react60 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/snackbar/use-styles.ts
-var import_react57 = require("react");
+var import_react59 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -2396,7 +2586,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return (0, import_react57.useMemo)(
+  return (0, import_react59.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -2407,25 +2597,36 @@ function useStyles27() {
 }
 
 // src/components/snackbar/index.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Snackbar = (0, import_react58.forwardRef)(function Snackbar2({ open, message: message2, action, onClose }, ref) {
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var Snackbar = (0, import_react60.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
   if (!open || typeof document === "undefined") return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, role: "status", className: root24, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: messageClass, children: message2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, role: "status", className: root24, "data-testid": dataTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
       action,
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(XIcon, { size: 18 }) })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close",
+          className: closeBtn2,
+          "data-testid": slot("close"),
+          onClick: onClose,
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(XIcon, { size: 18 })
+        }
+      )
     ] }),
     document.body
   );
 });
 
 // src/components/table/index.tsx
-var import_react60 = require("react");
+var import_react62 = require("react");
 
 // src/components/table/use-styles.ts
-var import_react59 = require("react");
+var import_react61 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -2437,7 +2638,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react59.useMemo)(
+  const root24 = (0, import_react61.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2451,26 +2652,27 @@ function useStyles28({ className }) {
 }
 
 // src/components/table/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function TableInner({ columns, rows, getRowKey, className, caption: caption2, ...rest }, ref) {
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function TableInner({ columns, rows, getRowKey, className, caption: caption2, testId, ...rest }, ref) {
   const { root: root24, th: th2, td: td2, alignRight: alignRight2, caption: captionClass } = useStyles28({ className });
+  const { testId: dataTestId, slot } = useTestId("list", testId);
   const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
   const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("table", { ref, className: root24, ...rest, children: [
-    caption2 != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("caption", { className: captionClass, children: caption2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
+    caption2 != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { className: captionClass, children: caption2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { "data-testid": slot(`row-${index}`), children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
-var TableForwarded = (0, import_react60.forwardRef)(TableInner);
+var TableForwarded = (0, import_react62.forwardRef)(TableInner);
 TableForwarded.displayName = "Table";
 var Table = TableForwarded;
 
 // src/components/app-bar/index.tsx
-var import_react62 = require("react");
+var import_react64 = require("react");
 
 // src/components/app-bar/use-styles.ts
-var import_react61 = require("react");
+var import_react63 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2480,7 +2682,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles29({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react61.useMemo)(
+  const root24 = (0, import_react63.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2488,21 +2690,22 @@ function useStyles29({ className }) {
 }
 
 // src/components/app-bar/index.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var AppBar = (0, import_react62.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, ...rest }, ref) {
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var AppBar = (0, import_react64.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
   const styles = useStyles29({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { ref, className: styles.root, ...rest, children: [
-    brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.brand, children: brand2 }) : null,
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { ref, className: styles.root, "data-testid": dataTestId, ...rest, children: [
+    brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.brand, "data-testid": slot("brand"), children: brand2 }) : null,
     children,
-    actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.actions, children: actions3 }) : null
+    actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.actions, "data-testid": slot("actions"), children: actions3 }) : null
   ] });
 });
 
 // src/components/list-item/index.tsx
-var import_react64 = require("react");
+var import_react66 = require("react");
 
 // src/components/list-item/use-styles.ts
-var import_react63 = require("react");
+var import_react65 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2517,7 +2720,7 @@ function useStyles30({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react63.useMemo)(
+  const root24 = (0, import_react65.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2525,20 +2728,31 @@ function useStyles30({
 }
 
 // src/components/list-item/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var ListItem = (0, import_react64.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, children, ...rest }, ref) {
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var ListItem = (0, import_react66.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
   const styles = useStyles30({ selected: selected3, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref, className: styles.root, ...rest, children: [
-    leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.leading, children: leading2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.content, children }),
-    trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.trailing, children: trailing2 })
-  ] });
+  const { testId: dataTestId, slot } = useTestId("list", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      ref,
+      className: styles.root,
+      "data-testid": dataTestId,
+      "data-state": states({ selected: selected3 }),
+      ...rest,
+      children: [
+        leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.leading, "data-testid": slot("leading"), children: leading2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.content, "data-testid": slot("content"), children }),
+        trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.trailing, "data-testid": slot("trailing"), children: trailing2 })
+      ]
+    }
+  );
 });
 
 // src/components/icons/chevron-up/index.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2552,15 +2766,15 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 
 // src/components/icons/search/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2575,17 +2789,17 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "m21 21-4.3-4.3" })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "m21 21-4.3-4.3" })
       ]
     }
   );
 }
 
 // src/components/icons/plus/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2600,17 +2814,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M5 12h14" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M12 5v14" })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M12 5v14" })
       ]
     }
   );
 }
 
 // src/components/icons/minus/index.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2624,15 +2838,15 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M5 12h14" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M5 12h14" })
     }
   );
 }
 
 // src/components/icons/more-horizontal/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2647,9 +2861,9 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "5", cy: "12", r: "1" })
       ]
     }
   );
@@ -2698,6 +2912,7 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   Switch,
   Table,
   Tabs,
+  TestIdProvider,
   TextField,
   ThemeProvider,
   Tooltip,
@@ -2711,6 +2926,7 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   theme,
   themes,
   usePrevious,
+  useTestId,
   useTheme,
   useToggle
 });