@octavius2929-personal/design-system 0.6.0 → 0.7.1

package/dist/index.js

@@ -658,16 +658,142 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
   ] });
 }
 
+// src/components/base-field/index.tsx
+import { useId } from "react";
+
+// src/components/base-field/use-styles.ts
+import { useMemo as useMemo12 } from "react";
+
+// src/components/base-field/use-styles.css.ts
+var field = "use-styles_field__1c3cgd3";
+var helpText = "use-styles_helpText__1c3cgd8";
+var helpTextError = "use-styles_helpTextError__1c3cgd9";
+var input4 = "use-styles_input__1c3cgd4";
+var inputError = "use-styles_inputError__1c3cgd5";
+var inputStartPad = "use-styles_inputStartPad__1c3cgd6";
+var inputTrailingPad = "use-styles_inputTrailingPad__1c3cgd7";
+var labelText = "use-styles_labelText__1c3cgd1";
+var labelTextError = "use-styles_labelTextError__1c3cgd2";
+var root9 = "use-styles_root__1c3cgd0";
+var startIconSlot = "use-styles_startIconSlot__1c3cgda";
+var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
+
+// src/components/base-field/use-styles.ts
+function useStyles11({ error, hasStartIcon, hasTrailing, className }) {
+  const { themeClass } = useTheme();
+  return useMemo12(() => {
+    const root24 = [themeClass, root9].filter(Boolean).join(" ");
+    const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
+    const input6 = [
+      input4,
+      error && inputError,
+      hasStartIcon && inputStartPad,
+      hasTrailing && inputTrailingPad,
+      className
+    ].filter(Boolean).join(" ");
+    const helpText2 = [helpText, error && helpTextError].filter(Boolean).join(" ");
+    return {
+      root: root24,
+      labelText: labelText2,
+      field,
+      input: input6,
+      helpText: helpText2,
+      startIconSlot,
+      trailingSlot
+    };
+  }, [themeClass, error, hasStartIcon, hasTrailing, className]);
+}
+
+// src/components/base-field/index.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function BaseField({
+  label: label7,
+  help,
+  error,
+  startIcon: StartIcon,
+  trailing: trailing2,
+  id,
+  className,
+  children
+}) {
+  const autoId = useId();
+  const controlId = id ?? autoId;
+  const helpId = help != null ? `${controlId}-help` : void 0;
+  const classes = useStyles11({
+    error,
+    hasStartIcon: StartIcon != null,
+    hasTrailing: trailing2 != null,
+    className
+  });
+  const control = {
+    id: controlId,
+    className: classes.input,
+    "aria-describedby": helpId,
+    "aria-invalid": error ? true : void 0
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: classes.root, children: [
+    label7 != null && /* @__PURE__ */ jsx14("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
+    /* @__PURE__ */ jsxs9("div", { className: classes.field, children: [
+      StartIcon != null && /* @__PURE__ */ jsx14("span", { className: classes.startIconSlot, children: /* @__PURE__ */ jsx14(StartIcon, { size: 18 }) }),
+      children(control),
+      trailing2 != null && /* @__PURE__ */ jsx14("span", { className: classes.trailingSlot, children: trailing2 })
+    ] }),
+    help != null && /* @__PURE__ */ jsx14("span", { id: helpId, className: classes.helpText, children: help })
+  ] });
+}
+
 // src/components/text-field/index.tsx
-import {
-  useId,
-  useState as useState3
-} from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function TextField({
+  label: label7,
+  help,
+  error,
+  startIcon,
+  multiline,
+  rows,
+  type = "text",
+  onChange,
+  className,
+  id,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx15(
+    BaseField,
+    {
+      label: label7,
+      help,
+      error,
+      startIcon,
+      id,
+      className,
+      children: (control) => multiline ? /* @__PURE__ */ jsx15(
+        "textarea",
+        {
+          ...rest,
+          ...control,
+          rows: rows ?? 4,
+          onChange: (e) => onChange?.(e.target.value)
+        }
+      ) : /* @__PURE__ */ jsx15(
+        "input",
+        {
+          ...rest,
+          ...control,
+          type,
+          onChange: (e) => onChange?.(e.target.value)
+        }
+      )
+    }
+  );
+}
+
+// src/components/password-field/index.tsx
+import { useState as useState3 } from "react";
 
 // src/components/icons/eye/index.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -682,17 +808,17 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx14("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-        /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ jsx16("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
 
 // src/components/icons/eye-off/index.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -707,136 +833,142 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx15("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-        /* @__PURE__ */ jsx15("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__ */ jsx15("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__ */ jsx15("path", { d: "m2 2 20 20" })
+        /* @__PURE__ */ jsx17("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ jsx17("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__ */ jsx17("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__ */ jsx17("path", { d: "m2 2 20 20" })
       ]
     }
   );
 }
 
-// src/components/text-field/use-styles.ts
-import { useMemo as useMemo12 } from "react";
+// src/components/password-field/use-styles.ts
+import { useMemo as useMemo13 } from "react";
 
-// src/components/text-field/use-styles.css.ts
-var field = "use-styles_field__vat8gv3";
-var helpText = "use-styles_helpText__vat8gv8";
-var helpTextError = "use-styles_helpTextError__vat8gv9";
-var input4 = "use-styles_input__vat8gv4";
-var inputError = "use-styles_inputError__vat8gv5";
-var inputRevealPad = "use-styles_inputRevealPad__vat8gv7";
-var inputStartPad = "use-styles_inputStartPad__vat8gv6";
-var labelText = "use-styles_labelText__vat8gv1";
-var labelTextError = "use-styles_labelTextError__vat8gv2";
-var revealButton = "use-styles_revealButton__vat8gvb";
-var root9 = "use-styles_root__vat8gv0";
-var startIcon = "use-styles_startIcon__vat8gva";
-
-// src/components/text-field/use-styles.ts
-function useStyles11({ error, hasStartIcon, hasReveal, className }) {
-  const { themeClass } = useTheme();
-  return useMemo12(() => {
-    const root24 = [themeClass, root9].filter(Boolean).join(" ");
-    const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
-    const input6 = [
-      input4,
-      error && inputError,
-      hasStartIcon && inputStartPad,
-      hasReveal && inputRevealPad,
-      className
-    ].filter(Boolean).join(" ");
-    const helpText2 = [helpText, error && helpTextError].filter(Boolean).join(" ");
-    return {
-      root: root24,
-      labelText: labelText2,
-      field,
-      input: input6,
-      helpText: helpText2,
-      startIcon,
-      revealButton
-    };
-  }, [themeClass, error, hasStartIcon, hasReveal, className]);
+// src/components/password-field/use-styles.css.ts
+var revealButton = "use-styles_revealButton__rsu9d50";
+
+// src/components/password-field/use-styles.ts
+function useStyles12() {
+  return useMemo13(() => ({ revealButton }), []);
 }
 
-// src/components/text-field/index.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-function TextField({
+// src/components/password-field/index.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function PasswordField({
   label: label7,
   help,
   error,
-  startIcon: StartIcon,
-  multiline,
-  rows,
-  type = "text",
+  startIcon,
   onChange,
-  className,
   id,
+  className,
   ...rest
 }) {
   const [reveal, setReveal] = useState3(false);
-  const isPassword = type === "password";
-  const hasReveal = isPassword;
-  const effectiveType = isPassword ? reveal ? "text" : "password" : type;
-  const autoId = useId();
-  const controlId = id ?? autoId;
-  const classes = useStyles11({
-    error,
-    hasStartIcon: Boolean(StartIcon),
-    hasReveal,
-    className
-  });
-  const handleInputChange = (e) => {
-    onChange?.(e.target.value);
-  };
-  const handleTextareaChange = (e) => {
+  const classes = useStyles12();
+  const handleChange = (e) => {
     onChange?.(e.target.value);
   };
   const handleToggleMouseDown = (e) => {
     e.preventDefault();
   };
-  return /* @__PURE__ */ jsxs11("div", { className: classes.root, children: [
-    label7 != null && /* @__PURE__ */ jsx16("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
-    /* @__PURE__ */ jsxs11("div", { className: classes.field, children: [
-      StartIcon != null && /* @__PURE__ */ jsx16("span", { className: classes.startIcon, children: /* @__PURE__ */ jsx16(StartIcon, { size: 18 }) }),
-      multiline ? /* @__PURE__ */ jsx16(
-        "textarea",
-        {
-          id: controlId,
-          className: classes.input,
-          rows: rows ?? 4,
-          onChange: handleTextareaChange,
-          ...rest
-        }
-      ) : /* @__PURE__ */ jsx16(
+  const toggleButton = /* @__PURE__ */ jsx18(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      className: classes.revealButton,
+      "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
+      onMouseDown: handleToggleMouseDown,
+      onClick: () => setReveal((r) => !r),
+      children: reveal ? /* @__PURE__ */ jsx18(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx18(EyeIcon, { size: 18 })
+    }
+  );
+  return /* @__PURE__ */ jsx18(
+    BaseField,
+    {
+      label: label7,
+      help,
+      error,
+      startIcon,
+      trailing: toggleButton,
+      id,
+      className,
+      children: (control) => /* @__PURE__ */ jsx18("input", { ...rest, ...control, type: reveal ? "text" : "password", onChange: handleChange })
+    }
+  );
+}
+
+// src/components/money-field/index.tsx
+import { useMemo as useMemo14, useState as useState4 } from "react";
+import { jsx as jsx19 } from "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;
+}
+function MoneyField({
+  value,
+  onChange,
+  currency = "USD",
+  locale = "en-US",
+  label: label7,
+  help,
+  error,
+  startIcon,
+  id,
+  className,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = useState4(false);
+  const [draft, setDraft] = useState4("");
+  const formatter = useMemo14(
+    () => new Intl.NumberFormat(locale, { style: "currency", currency }),
+    [locale, currency]
+  );
+  const displayValue = focused ? draft : value != null ? formatter.format(value) : "";
+  const handleFocus = (e) => {
+    setDraft(value != null ? String(value) : "");
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleChange = (e) => setDraft(e.target.value);
+  const handleBlur = (e) => {
+    setFocused(false);
+    onChange?.(parseAmount(draft));
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsx19(
+    BaseField,
+    {
+      label: label7,
+      help,
+      error,
+      startIcon,
+      id,
+      className,
+      children: (control) => /* @__PURE__ */ jsx19(
         "input",
         {
-          id: controlId,
-          className: classes.input,
-          type: effectiveType,
-          onChange: handleInputChange,
-          ...rest
-        }
-      ),
-      hasReveal && /* @__PURE__ */ jsx16(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          className: classes.revealButton,
-          "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
-          onMouseDown: handleToggleMouseDown,
-          onClick: () => setReveal((r) => !r),
-          children: reveal ? /* @__PURE__ */ jsx16(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx16(EyeIcon, { size: 18 })
+          ...rest,
+          ...control,
+          inputMode: "decimal",
+          value: displayValue,
+          onFocus: handleFocus,
+          onChange: handleChange,
+          onBlur: handleBlur
         }
       )
-    ] }),
-    help != null && /* @__PURE__ */ jsx16("span", { className: classes.helpText, children: help })
-  ] });
+    }
+  );
 }
 
 // src/components/icon-button/use-styles.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo15 } from "react";
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -844,12 +976,12 @@ var active = "use-styles_active__18np0q01";
 var root10 = "use-styles_root__18np0q00";
 
 // src/components/icon-button/use-styles.ts
-function useStyles12({
+function useStyles13({
   active: active2 = false,
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo13(
+  const root24 = useMemo15(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -857,14 +989,14 @@ function useStyles12({
 }
 
 // src/components/icon-button/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }) {
-  const { root: root24 } = useStyles12({ active: active2, tone: tone4 });
-  return /* @__PURE__ */ jsx17("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ jsx17(Icon, { size: 18 }) });
+  const { root: root24 } = useStyles13({ active: active2, tone: tone4 });
+  return /* @__PURE__ */ jsx20("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ jsx20(Icon, { size: 18 }) });
 }
 
 // src/components/card/use-styles.ts
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo16 } from "react";
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -873,29 +1005,29 @@ var header = "use-styles_header__1fuvd021";
 var root11 = "use-styles_root__1fuvd020";
 
 // src/components/card/use-styles.ts
-function useStyles13() {
+function useStyles14() {
   const { themeClass } = useTheme();
-  const root24 = useMemo14(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = useMemo16(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function CardRoot({ children, ...rest }) {
-  const { root: root24 } = useStyles13();
-  return /* @__PURE__ */ jsx18("div", { className: root24, ...rest, children });
+  const { root: root24 } = useStyles14();
+  return /* @__PURE__ */ jsx21("div", { className: root24, ...rest, children });
 }
 function CardHeader({ children, ...rest }) {
-  const { header: header3 } = useStyles13();
-  return /* @__PURE__ */ jsx18("div", { className: header3, ...rest, children });
+  const { header: header3 } = useStyles14();
+  return /* @__PURE__ */ jsx21("div", { className: header3, ...rest, children });
 }
 function CardBody({ children, ...rest }) {
-  const { body: body3 } = useStyles13();
-  return /* @__PURE__ */ jsx18("div", { className: body3, ...rest, children });
+  const { body: body3 } = useStyles14();
+  return /* @__PURE__ */ jsx21("div", { className: body3, ...rest, children });
 }
 function CardFooter({ children, ...rest }) {
-  const { footer: footer2 } = useStyles13();
-  return /* @__PURE__ */ jsx18("div", { className: footer2, ...rest, children });
+  const { footer: footer2 } = useStyles14();
+  return /* @__PURE__ */ jsx21("div", { className: footer2, ...rest, children });
 }
 CardRoot.displayName = "Card";
 CardHeader.displayName = "Card.Header";
@@ -908,7 +1040,7 @@ var Card = Object.assign(CardRoot, {
 });
 
 // src/components/icons/circle-check/index.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs12(
     "svg",
@@ -925,15 +1057,15 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx19("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx22("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
 }
 
 // src/components/icons/circle-x/index.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs13(
     "svg",
@@ -950,16 +1082,16 @@ function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx20("path", { d: "m15 9-6 6" }),
-        /* @__PURE__ */ jsx20("path", { d: "m9 9 6 6" })
+        /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx23("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ jsx23("path", { d: "m9 9 6 6" })
       ]
     }
   );
 }
 
 // src/components/icons/info/index.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs14(
     "svg",
@@ -976,16 +1108,16 @@ function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx21("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ jsx21("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx24("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx24("path", { d: "M12 8h.01" })
       ]
     }
   );
 }
 
 // src/components/icons/triangle-alert/index.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs15(
     "svg",
@@ -1002,16 +1134,16 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx22("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__ */ jsx22("path", { d: "M12 9v4" }),
-        /* @__PURE__ */ jsx22("path", { d: "M12 17h.01" })
+        /* @__PURE__ */ jsx25("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__ */ jsx25("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx25("path", { d: "M12 17h.01" })
       ]
     }
   );
 }
 
 // src/components/alert/use-styles.ts
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo17 } from "react";
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1020,12 +1152,12 @@ var root12 = "use-styles_root__ivsh6u0";
 var severity = { info: "use-styles_severity_info__ivsh6u1", ok: "use-styles_severity_ok__ivsh6u2", warn: "use-styles_severity_warn__ivsh6u3", danger: "use-styles_severity_danger__ivsh6u4" };
 
 // src/components/alert/use-styles.ts
-function useStyles14({
+function useStyles15({
   severity: severity2 = "info",
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo15(
+  const root24 = useMemo17(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1037,7 +1169,7 @@ function useStyles14({
 }
 
 // src/components/alert/index.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultIcons = {
   info: InfoIcon,
   ok: CircleCheckIcon,
@@ -1052,22 +1184,22 @@ function Alert({
   children,
   ...rest
 }) {
-  const styles = useStyles14({ severity: severity2, className });
+  const styles = useStyles15({ severity: severity2, className });
   const IconComponent = icon ?? defaultIcons[severity2];
   return /* @__PURE__ */ jsxs16("div", { role: "alert", className: styles.root, ...rest, children: [
-    /* @__PURE__ */ jsx23("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx23(IconComponent, {}) }),
+    /* @__PURE__ */ jsx26("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx26(IconComponent, {}) }),
     /* @__PURE__ */ jsxs16("div", { className: styles.content, children: [
-      title != null && /* @__PURE__ */ jsx23(Typography, { variant: "h4", children: title }),
-      children != null && /* @__PURE__ */ jsx23(Typography, { variant: "body", color: "fg2", children })
+      title != null && /* @__PURE__ */ jsx26(Typography, { variant: "h4", children: title }),
+      children != null && /* @__PURE__ */ jsx26(Typography, { variant: "body", color: "fg2", children })
     ] })
   ] });
 }
 
 // src/components/tooltip/index.tsx
-import { cloneElement, useId as useId2, useState as useState4 } from "react";
+import { cloneElement, useId as useId2, useState as useState5 } from "react";
 
 // src/components/tooltip/use-styles.ts
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo18 } from "react";
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__6hs0fg2";
@@ -1075,15 +1207,15 @@ var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_p
 var wrapper = "use-styles_wrapper__h9kvh0";
 
 // src/components/tooltip/use-styles.ts
-function useStyles15({
+function useStyles16({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = useMemo16(
+  const wrapper4 = useMemo18(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = useMemo16(
+  const bubble2 = useMemo18(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1091,11 +1223,11 @@ function useStyles15({
 }
 
 // src/components/tooltip/index.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function Tooltip({ label: label7, children, placement: placement2 }) {
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   const tooltipId = useId2();
-  const { wrapper: wrapper4, bubble: bubble2 } = useStyles15({ placement: placement2 });
+  const { wrapper: wrapper4, bubble: bubble2 } = useStyles16({ placement: placement2 });
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
   const previousDescribedBy = children.props["aria-describedby"];
@@ -1103,17 +1235,17 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
   const trigger2 = cloneElement(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ jsxs17("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
     trigger2,
-    open && /* @__PURE__ */ jsx24("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
+    open && /* @__PURE__ */ jsx27("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
   ] });
 }
 
 // src/components/select/index.tsx
-import { useEffect as useEffect3, useId as useId3, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect3, useId as useId3, useRef as useRef2, useState as useState6 } from "react";
 
 // src/components/icons/chevron-down/index.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx28(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1127,13 +1259,13 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx25("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx28("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 
 // src/components/select/use-styles.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo19 } from "react";
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1148,11 +1280,11 @@ var root13 = "use-styles_root__1w1czpb0";
 var trigger = "use-styles_trigger__1w1czpb2";
 
 // src/components/select/use-styles.ts
-function useStyles16({
+function useStyles17({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return useMemo17(() => {
+  return useMemo19(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1167,10 +1299,10 @@ function useStyles16({
 }
 
 // src/components/select/index.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
-  const [open, setOpen] = useState5(false);
-  const [activeIndex, setActiveIndex] = useState5(0);
+  const [open, setOpen] = useState6(false);
+  const [activeIndex, setActiveIndex] = useState6(0);
   const rootRef = useRef2(null);
   const baseId = useId3();
   const labelId = `${baseId}-label`;
@@ -1183,7 +1315,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     chevron: chevron3,
     menu: menu2,
     optionClass
-  } = useStyles16({ open });
+  } = useStyles17({ open });
   useEffect3(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -1245,7 +1377,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     }
   };
   return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: root24, children: [
-    label7 && /* @__PURE__ */ jsx26("span", { id: labelId, className: labelClass, children: label7 }),
+    label7 && /* @__PURE__ */ jsx29("span", { id: labelId, className: labelClass, children: label7 }),
     /* @__PURE__ */ jsxs18(
       "button",
       {
@@ -1266,17 +1398,17 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ jsx26("span", { className: placeholderClass, children: placeholder2 }),
-          /* @__PURE__ */ jsx26("span", { className: chevron3, children: /* @__PURE__ */ jsx26(ChevronDownIcon, { size: 18 }) })
+          selected3 ? selected3.label : /* @__PURE__ */ jsx29("span", { className: placeholderClass, children: placeholder2 }),
+          /* @__PURE__ */ jsx29("span", { className: chevron3, children: /* @__PURE__ */ jsx29(ChevronDownIcon, { size: 18 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx26("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
+    open && /* @__PURE__ */ jsx29("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__ */ jsx26(
+        /* @__PURE__ */ jsx29(
           "div",
           {
             id: optionId(index),
@@ -1295,7 +1427,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
 }
 
 // src/components/slider/use-styles.ts
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo20 } from "react";
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1307,9 +1439,9 @@ var track3 = "use-styles_track__okw59n1";
 var wrapper2 = "use-styles_wrapper__okw59n6";
 
 // src/components/slider/use-styles.ts
-function useStyles17() {
+function useStyles18() {
   const { themeClass } = useTheme();
-  return useMemo18(() => {
+  return useMemo20(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1324,7 +1456,7 @@ function useStyles17() {
 }
 
 // src/components/slider/index.tsx
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function Slider({
   value = 0,
   onChange,
@@ -1334,7 +1466,7 @@ function Slider({
   disabled: disabled3,
   label: label7
 }) {
-  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles17();
+  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles18();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
   const clamped = Math.max(0, Math.min(100, percent));
@@ -1342,11 +1474,11 @@ function Slider({
     onChange?.(Number(e.target.value));
   };
   return /* @__PURE__ */ jsxs19("span", { className: wrapper4, children: [
-    label7 ? /* @__PURE__ */ jsx27("span", { className: labelClass, children: label7 }) : null,
+    label7 ? /* @__PURE__ */ jsx30("span", { className: labelClass, children: label7 }) : null,
     /* @__PURE__ */ jsxs19("span", { className: root24, children: [
-      /* @__PURE__ */ jsx27("span", { className: track4 }),
-      /* @__PURE__ */ jsx27("span", { className: range2, style: { width: `${clamped}%` } }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx30("span", { className: track4 }),
+      /* @__PURE__ */ jsx30("span", { className: range2, style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ jsx30(
         "input",
         {
           className: input6,
@@ -1359,16 +1491,16 @@ function Slider({
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ jsx27("span", { className: thumb2, style: { left: `${clamped}%` } })
+      /* @__PURE__ */ jsx30("span", { className: thumb2, style: { left: `${clamped}%` } })
     ] })
   ] });
 }
 
 // src/components/accordion/index.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/components/accordion/use-styles.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo21 } from "react";
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1379,9 +1511,9 @@ var panel = "use-styles_panel__1cjrdh95";
 var root15 = "use-styles_root__1cjrdh90";
 
 // src/components/accordion/use-styles.ts
-function useStyles18({ className }) {
+function useStyles19({ className }) {
   const { themeClass } = useTheme();
-  return useMemo19(
+  return useMemo21(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1394,15 +1526,15 @@ function useStyles18({ className }) {
 }
 
 // src/components/accordion/index.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function Accordion({
   items,
   multiple = false,
   defaultOpen = [],
   className
 }) {
-  const [open, setOpen] = useState6(defaultOpen);
-  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles18({ className });
+  const [open, setOpen] = useState7(defaultOpen);
+  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles19({ className });
   const toggle = (id) => {
     setOpen((current2) => {
       const isOpen = current2.includes(id);
@@ -1410,7 +1542,7 @@ function Accordion({
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ jsx28("div", { className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ jsx31("div", { className: root24, children: items.map((it) => {
     const isOpen = open.includes(it.id);
     const panelId = `accordion-panel-${it.id}`;
     const headerId = `accordion-header-${it.id}`;
@@ -1426,11 +1558,11 @@ function Accordion({
           onClick: () => toggle(it.id),
           children: [
             it.title,
-            /* @__PURE__ */ jsx28(ChevronDownIcon, { className: chevronFor(isOpen) })
+            /* @__PURE__ */ jsx31(ChevronDownIcon, { className: chevronFor(isOpen) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx28("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
+      isOpen && /* @__PURE__ */ jsx31("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
     ] }, it.id);
   }) });
 }
@@ -1439,9 +1571,9 @@ function Accordion({
 import { Fragment } from "react";
 
 // src/components/icons/chevron-right/index.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1455,13 +1587,13 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx29("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 
 // src/components/breadcrumbs/use-styles.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo22 } from "react";
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1470,9 +1602,9 @@ var root16 = "use-styles_root__7u0du60";
 var separator = "use-styles_separator__7u0du63";
 
 // src/components/breadcrumbs/use-styles.ts
-function useStyles19({ className }) {
+function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo20(
+  const root24 = useMemo22(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1480,23 +1612,23 @@ function useStyles19({ className }) {
 }
 
 // src/components/breadcrumbs/index.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className, ...rest }) {
-  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles19({ className });
-  return /* @__PURE__ */ jsx30("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles20({ className });
+  return /* @__PURE__ */ jsx33("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
     return /* @__PURE__ */ jsxs21(Fragment, { children: [
-      isLast ? /* @__PURE__ */ jsx30("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx30("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx30("span", { className: crumb2, children: item3.label }),
-      !isLast && /* @__PURE__ */ jsx30("span", { className: separator2, children: /* @__PURE__ */ jsx30(ChevronRightIcon, { size: 14 }) })
+      isLast ? /* @__PURE__ */ jsx33("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx33("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx33("span", { className: crumb2, children: item3.label }),
+      !isLast && /* @__PURE__ */ jsx33("span", { className: separator2, children: /* @__PURE__ */ jsx33(ChevronRightIcon, { size: 14 }) })
     ] }, key);
   }) });
 }
 
 // src/components/icons/chevron-left/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx34(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1510,13 +1642,13 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx31("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ jsx34("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 
 // src/components/pagination/use-styles.ts
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo23 } from "react";
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1526,9 +1658,9 @@ var pageBtn = "use-styles_pageBtn__1azgzoh1";
 var root17 = "use-styles_root__1azgzoh0";
 
 // src/components/pagination/use-styles.ts
-function useStyles20() {
+function useStyles21() {
   const { themeClass } = useTheme();
-  return useMemo21(
+  return useMemo23(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1540,7 +1672,7 @@ function useStyles20() {
 }
 
 // src/components/pagination/index.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function buildItems(count, page, siblingCount) {
   const total = Math.max(1, count);
   const first = 1;
@@ -1555,13 +1687,13 @@ function buildItems(count, page, siblingCount) {
   return items;
 }
 function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
-  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles20();
+  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles21();
   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__ */ jsxs22("nav", { className: root24, "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -1569,14 +1701,14 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         "aria-label": "Previous page",
         disabled: current2 <= 1,
         onClick: () => go(current2 - 1),
-        children: /* @__PURE__ */ jsx32(ChevronLeftIcon, { size: 18 })
+        children: /* @__PURE__ */ jsx35(ChevronLeftIcon, { size: 18 })
       }
     ),
     items.map(
       (item3, index) => item3 === "ellipsis" ? (
         // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
-        /* @__PURE__ */ jsx32("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
-      ) : /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx35("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
+      ) : /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -1588,7 +1720,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         item3
       )
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -1596,7 +1728,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         "aria-label": "Next page",
         disabled: current2 >= total,
         onClick: () => go(current2 + 1),
-        children: /* @__PURE__ */ jsx32(ChevronRightIcon, { size: 18 })
+        children: /* @__PURE__ */ jsx35(ChevronRightIcon, { size: 18 })
       }
     )
   ] });
@@ -1606,7 +1738,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
 import { Fragment as Fragment2 } from "react";
 
 // src/components/stepper/use-styles.ts
-import { useMemo as useMemo22 } from "react";
+import { useMemo as useMemo24 } from "react";
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1619,9 +1751,9 @@ var root18 = "use-styles_root__79pt4e0";
 var step = "use-styles_step__79pt4e1";
 
 // src/components/stepper/use-styles.ts
-function useStyles21({ className }) {
+function useStyles22({ className }) {
   const { themeClass } = useTheme();
-  return useMemo22(() => {
+  return useMemo24(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1634,27 +1766,27 @@ function useStyles21({ className }) {
 }
 
 // src/components/stepper/index.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function Stepper({ steps, active: active2 = 0, className, ...rest }) {
-  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles21({ className });
-  return /* @__PURE__ */ jsx33("div", { className: root24, ...rest, children: steps.map((s, index) => {
+  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles22({ className });
+  return /* @__PURE__ */ jsx36("div", { className: root24, ...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__ */ jsxs23(Fragment2, { children: [
         /* @__PURE__ */ jsxs23("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
-          /* @__PURE__ */ jsx33("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx33(CheckIcon, { size: 14 }) : index + 1 }),
-          /* @__PURE__ */ jsx33("span", { className: labelFor(isActive), children: s.label })
+          /* @__PURE__ */ jsx36("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx36(CheckIcon, { size: 14 }) : index + 1 }),
+          /* @__PURE__ */ jsx36("span", { className: labelFor(isActive), children: s.label })
         ] }),
-        index < steps.length - 1 && /* @__PURE__ */ jsx33("span", { "data-part": "connector", className: connector2 })
+        index < steps.length - 1 && /* @__PURE__ */ jsx36("span", { "data-part": "connector", className: connector2 })
       ] }, index)
     );
   }) });
 }
 
 // src/components/tabs/use-styles.ts
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo25 } from "react";
 
 // src/components/tabs/use-styles.css.ts
 var root19 = "use-styles_root__1l4m7t40";
@@ -1662,9 +1794,9 @@ var tab = "use-styles_tab__1l4m7t41";
 var tabActive = "use-styles_tabActive__1l4m7t42";
 
 // src/components/tabs/use-styles.ts
-function useStyles22() {
+function useStyles23() {
   const { themeClass } = useTheme();
-  return useMemo23(() => {
+  return useMemo25(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass };
@@ -1672,12 +1804,12 @@ function useStyles22() {
 }
 
 // src/components/tabs/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange }) {
-  const { root: root24, tabClass } = useStyles22();
-  return /* @__PURE__ */ jsx34("div", { role: "tablist", className: root24, children: items.map((item3) => {
+  const { root: root24, tabClass } = useStyles23();
+  return /* @__PURE__ */ jsx37("div", { role: "tablist", className: root24, children: items.map((item3) => {
     const active2 = item3.value === value;
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
@@ -1697,11 +1829,11 @@ import {
   cloneElement as cloneElement2,
   useEffect as useEffect4,
   useRef as useRef3,
-  useState as useState7
+  useState as useState8
 } from "react";
 
 // src/components/menu/use-styles.ts
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo26 } from "react";
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -1710,9 +1842,9 @@ var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__6hs0fg1";
 var wrapper3 = "use-styles_wrapper__1uyxaj0";
 
 // src/components/menu/use-styles.ts
-function useStyles23() {
+function useStyles24() {
   const { themeClass } = useTheme();
-  return useMemo24(
+  return useMemo26(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -1724,14 +1856,14 @@ function useStyles23() {
 }
 
 // src/components/menu/index.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
 function Menu({ trigger: trigger2, items }) {
-  const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles23();
-  const [open, setOpen] = useState7(false);
+  const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles24();
+  const [open, setOpen] = useState8(false);
   const rootRef = useRef3(null);
   const listRef = useRef3(null);
   const triggerRef = useRef3(null);
@@ -1813,7 +1945,7 @@ function Menu({ trigger: trigger2, items }) {
   });
   return /* @__PURE__ */ jsxs24("div", { ref: rootRef, className: wrapper4, children: [
     clonedTrigger,
-    open && /* @__PURE__ */ jsx35("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ jsx35(
+    open && /* @__PURE__ */ jsx38("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ jsx38(
       "button",
       {
         type: "button",
@@ -1840,7 +1972,7 @@ import {
 import { createPortal } from "react-dom";
 
 // src/components/dialog/use-styles.ts
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo27 } from "react";
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -1849,9 +1981,9 @@ var overlay = "use-styles_overlay__5tstu80";
 var surface = "use-styles_surface__5tstu81";
 
 // src/components/dialog/use-styles.ts
-function useStyles24() {
+function useStyles25() {
   const { themeClass } = useTheme();
-  return useMemo25(
+  return useMemo27(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -1863,10 +1995,10 @@ function useStyles24() {
 }
 
 // src/components/dialog/index.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, actions: actions3, children }) {
-  const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles24();
+  const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles25();
   const surfaceRef = useRef4(null);
   const previouslyFocused = useRef4(null);
   const generatedId = useId4();
@@ -1923,7 +2055,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
   };
   return createPortal(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
-    /* @__PURE__ */ jsx36("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsx39("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs25(
       "div",
       {
         ref: surfaceRef,
@@ -1935,9 +2067,9 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
         onClick: stop,
         onKeyDown: onSurfaceKeyDown,
         children: [
-          title != null && /* @__PURE__ */ jsx36(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
-          children != null && /* @__PURE__ */ jsx36("div", { className: body3, children: /* @__PURE__ */ jsx36(Typography, { variant: "body", color: "fg2", children }) }),
-          actions3 != null && /* @__PURE__ */ jsx36("div", { className: actionsClass, children: actions3 })
+          title != null && /* @__PURE__ */ jsx39(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
+          children != null && /* @__PURE__ */ jsx39("div", { className: body3, children: /* @__PURE__ */ jsx39(Typography, { variant: "body", color: "fg2", children }) }),
+          actions3 != null && /* @__PURE__ */ jsx39("div", { className: actionsClass, children: actions3 })
         ]
       }
     ) }),
@@ -1949,7 +2081,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/snackbar/use-styles.ts
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo28 } from "react";
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -1957,9 +2089,9 @@ var message = "use-styles_message__ihzsep1";
 var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__6hs0fg2";
 
 // src/components/snackbar/use-styles.ts
-function useStyles25() {
+function useStyles26() {
   const { themeClass } = useTheme();
-  return useMemo26(
+  return useMemo28(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -1970,22 +2102,22 @@ function useStyles25() {
 }
 
 // src/components/snackbar/index.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function Snackbar({ open, message: message2, action, onClose }) {
-  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles25();
+  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles26();
   if (!open || typeof document === "undefined") return null;
   return createPortal2(
     /* @__PURE__ */ jsxs26("div", { role: "status", className: root24, children: [
-      /* @__PURE__ */ jsx37("span", { className: messageClass, children: message2 }),
+      /* @__PURE__ */ jsx40("span", { className: messageClass, children: message2 }),
       action,
-      onClose && /* @__PURE__ */ jsx37("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx37(XIcon, { size: 18 }) })
+      onClose && /* @__PURE__ */ jsx40("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx40(XIcon, { size: 18 }) })
     ] }),
     document.body
   );
 }
 
 // src/components/table/use-styles.ts
-import { useMemo as useMemo27 } from "react";
+import { useMemo as useMemo29 } from "react";
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -1994,9 +2126,9 @@ var td = "use-styles_td__1n2cz6i2";
 var th = "use-styles_th__1n2cz6i1";
 
 // src/components/table/use-styles.ts
-function useStyles26({ className }) {
+function useStyles27({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo27(
+  const root24 = useMemo29(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2004,7 +2136,7 @@ function useStyles26({ className }) {
 }
 
 // src/components/table/index.tsx
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function Table({
   columns,
   rows,
@@ -2012,17 +2144,17 @@ function Table({
   className,
   ...rest
 }) {
-  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles26({ className });
+  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles27({ className });
   const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
   const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
   return /* @__PURE__ */ jsxs27("table", { className: root24, ...rest, children: [
-    /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: columns.map((column) => /* @__PURE__ */ jsx38("th", { className: headClass(column), children: column.header }, column.key)) }) }),
-    /* @__PURE__ */ jsx38("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx38("tr", { children: columns.map((column) => /* @__PURE__ */ jsx38("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
+    /* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsx41("tr", { children: columns.map((column) => /* @__PURE__ */ jsx41("th", { className: headClass(column), children: column.header }, column.key)) }) }),
+    /* @__PURE__ */ jsx41("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx41("tr", { children: columns.map((column) => /* @__PURE__ */ jsx41("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
 
 // src/components/app-bar/use-styles.ts
-import { useMemo as useMemo28 } from "react";
+import { useMemo as useMemo30 } from "react";
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2030,9 +2162,9 @@ var brand = "use-styles_brand__1h133nh1";
 var root22 = "use-styles_root__1h133nh0";
 
 // src/components/app-bar/use-styles.ts
-function useStyles27({ className }) {
+function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo28(
+  const root24 = useMemo30(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2040,18 +2172,18 @@ function useStyles27({ className }) {
 }
 
 // src/components/app-bar/index.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function AppBar({ brand: brand2, actions: actions3, className, children, ...rest }) {
-  const styles = useStyles27({ className });
+  const styles = useStyles28({ className });
   return /* @__PURE__ */ jsxs28("header", { className: styles.root, ...rest, children: [
-    brand2 !== void 0 ? /* @__PURE__ */ jsx39("div", { className: styles.brand, children: brand2 }) : null,
+    brand2 !== void 0 ? /* @__PURE__ */ jsx42("div", { className: styles.brand, children: brand2 }) : null,
     children,
-    actions3 !== void 0 ? /* @__PURE__ */ jsx39("div", { className: styles.actions, children: actions3 }) : null
+    actions3 !== void 0 ? /* @__PURE__ */ jsx42("div", { className: styles.actions, children: actions3 }) : null
   ] });
 }
 
 // src/components/list-item/use-styles.ts
-import { useMemo as useMemo29 } from "react";
+import { useMemo as useMemo31 } from "react";
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2061,12 +2193,12 @@ var selected2 = "use-styles_selected__kbreq11";
 var trailing = "use-styles_trailing__kbreq14";
 
 // src/components/list-item/use-styles.ts
-function useStyles28({
+function useStyles29({
   selected: selected3,
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo29(
+  const root24 = useMemo31(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2074,7 +2206,7 @@ function useStyles28({
 }
 
 // src/components/list-item/index.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function ListItem({
   leading: leading2,
   trailing: trailing2,
@@ -2083,18 +2215,18 @@ function ListItem({
   children,
   ...rest
 }) {
-  const styles = useStyles28({ selected: selected3, className });
+  const styles = useStyles29({ selected: selected3, className });
   return /* @__PURE__ */ jsxs29("div", { className: styles.root, ...rest, children: [
-    leading2 != null && /* @__PURE__ */ jsx40("span", { className: styles.leading, children: leading2 }),
-    /* @__PURE__ */ jsx40("span", { className: styles.content, children }),
-    trailing2 != null && /* @__PURE__ */ jsx40("span", { className: styles.trailing, children: trailing2 })
+    leading2 != null && /* @__PURE__ */ jsx43("span", { className: styles.leading, children: leading2 }),
+    /* @__PURE__ */ jsx43("span", { className: styles.content, children }),
+    trailing2 != null && /* @__PURE__ */ jsx43("span", { className: styles.trailing, children: trailing2 })
   ] });
 }
 
 // src/components/icons/chevron-up/index.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx44(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2108,13 +2240,13 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx41("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ jsx44("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 
 // src/components/icons/search/index.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs30(
     "svg",
@@ -2131,15 +2263,15 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx42("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx42("path", { d: "m21 21-4.3-4.3" })
+        /* @__PURE__ */ jsx45("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx45("path", { d: "m21 21-4.3-4.3" })
       ]
     }
   );
 }
 
 // src/components/icons/plus/index.tsx
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs31(
     "svg",
@@ -2156,17 +2288,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx43("path", { d: "M5 12h14" }),
-        /* @__PURE__ */ jsx43("path", { d: "M12 5v14" })
+        /* @__PURE__ */ jsx46("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx46("path", { d: "M12 5v14" })
       ]
     }
   );
 }
 
 // src/components/icons/minus/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx47(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2180,13 +2312,13 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx44("path", { d: "M5 12h14" })
+      children: /* @__PURE__ */ jsx47("path", { d: "M5 12h14" })
     }
   );
 }
 
 // src/components/icons/more-horizontal/index.tsx
-import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs32(
     "svg",
@@ -2203,9 +2335,9 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx45("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx45("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx45("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx48("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx48("circle", { cx: "5", cy: "12", r: "1" })
       ]
     }
   );
@@ -2237,8 +2369,10 @@ export {
   ListItem,
   Menu,
   MinusIcon,
+  MoneyField,
   MoreHorizontalIcon,
   Pagination,
+  PasswordField,
   PlusIcon,
   Progress,
   Radio,