@octavius2929-personal/design-system 0.1.0

package/dist/index.js

@@ -0,0 +1,2134 @@
+// src/theme/theme.css.ts
+var modeNames = ["light", "dark", "sepia", "contrast"];
+var schemaNames = ["tinta"];
+var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2v", dark: "theme_themes_tinta_dark__e3grur2w", sepia: "theme_themes_tinta_sepia__e3grur2x", contrast: "theme_themes_tinta_contrast__e3grur2y" } };
+var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: { bg1: "var(--color-bg1__e3grur2c)", bg2: "var(--color-bg2__e3grur2d)", bg3: "var(--color-bg3__e3grur2e)", bgInset: "var(--color-bgInset__e3grur2f)", fg1: "var(--color-fg1__e3grur2g)", fg2: "var(--color-fg2__e3grur2h)", fg3: "var(--color-fg3__e3grur2i)", fgOnAccent: "var(--color-fgOnAccent__e3grur2j)", border1: "var(--color-border1__e3grur2k)", border2: "var(--color-border2__e3grur2l)", borderStrong: "var(--color-borderStrong__e3grur2m)", accent: "var(--color-accent__e3grur2n)", accentHover: "var(--color-accentHover__e3grur2o)", accentSoft: "var(--color-accentSoft__e3grur2p)", ok: "var(--color-ok__e3grur2q)", warn: "var(--color-warn__e3grur2r)", danger: "var(--color-danger__e3grur2s)", info: "var(--color-info__e3grur2t)", scrim: "var(--color-scrim__e3grur2u)" } };
+
+// src/hooks/use-toggle/index.ts
+import { useCallback, useState } from "react";
+function useToggle(initial = false) {
+  const [on, setOn] = useState(initial);
+  const toggle = useCallback(() => setOn((value) => !value), []);
+  return [on, toggle, setOn];
+}
+
+// src/components/button/use-styles.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/theme/context/theme-context.tsx
+import { createContext, useContext, useMemo, useState as useState2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var noop = () => {
+};
+var DEFAULT_VALUE = {
+  schema: "tinta",
+  mode: "light",
+  themeClass: themes.tinta.light,
+  setSchema: noop,
+  setMode: noop,
+  toggleMode: noop
+};
+var ThemeContext = createContext(null);
+function ThemeProvider({
+  children,
+  defaultSchema = "tinta",
+  defaultMode = "light"
+}) {
+  const [schema, setSchema] = useState2(defaultSchema);
+  const [mode, setMode] = useState2(defaultMode);
+  const value = useMemo(
+    () => ({
+      schema,
+      mode,
+      themeClass: themes[schema][mode],
+      setSchema,
+      setMode,
+      toggleMode: () => setMode((current2) => current2 === "dark" ? "light" : "dark")
+    }),
+    [schema, mode]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  return useContext(ThemeContext) ?? DEFAULT_VALUE;
+}
+
+// src/components/button/use-styles.css.ts
+var full = "use-styles_full__1pbtill4";
+var root = "use-styles_root__1pbtill0";
+var size = { sm: "use-styles_size_sm__1pbtill1", md: "use-styles_size_md__1pbtill2", lg: "use-styles_size_lg__1pbtill3" };
+var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "use-styles_tone_filledAccent__1pbtill6", outlineInk: "use-styles_tone_outlineInk__1pbtill7", outlineAccent: "use-styles_tone_outlineAccent__1pbtill8", ghostInk: "use-styles_tone_ghostInk__1pbtill9", ghostAccent: "use-styles_tone_ghostAccent__1pbtilla" };
+
+// src/components/button/use-styles.ts
+function toneKey(variant2, tone4) {
+  return `${variant2}${tone4 === "ink" ? "Ink" : "Accent"}`;
+}
+function useStyles({
+  variant: variant2 = "filled",
+  tone: tone4 = "ink",
+  size: size3 = "md",
+  full: full2,
+  className
+}) {
+  const { themeClass } = useTheme();
+  const container = useMemo2(
+    () => [
+      themeClass,
+      root,
+      size[size3],
+      tone[toneKey(variant2, tone4)],
+      full2 && full,
+      className
+    ].filter(Boolean).join(" "),
+    [themeClass, variant2, tone4, size3, full2, className]
+  );
+  return { container };
+}
+
+// src/components/button/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
+function Button({
+  variant: variant2,
+  tone: tone4,
+  size: size3 = "md",
+  startIcon: StartIcon,
+  endIcon: EndIcon,
+  full: full2,
+  className,
+  children,
+  ...rest
+}) {
+  const { container } = useStyles({ variant: variant2, tone: tone4, size: size3, full: full2, className });
+  const iconSize = ICON_SIZE[size3];
+  return /* @__PURE__ */ jsxs("button", { className: container, ...rest, children: [
+    StartIcon && /* @__PURE__ */ jsx2(StartIcon, { size: iconSize }),
+    children,
+    EndIcon && /* @__PURE__ */ jsx2(EndIcon, { size: iconSize })
+  ] });
+}
+
+// src/components/divider/use-styles.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/components/divider/use-styles.css.ts
+var horizontal = "use-styles_horizontal__1n7v7yj1";
+var label = "use-styles_label__1n7v7yj5";
+var labelled = "use-styles_labelled__1n7v7yj3";
+var line = "use-styles_line__1n7v7yj4";
+var root2 = "use-styles_root__1n7v7yj0";
+var vertical = "use-styles_vertical__1n7v7yj2";
+
+// src/components/divider/use-styles.ts
+function useStyles2({ vertical: vertical2, hasLabel }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo3(
+    () => [
+      themeClass,
+      root2,
+      hasLabel ? labelled : vertical2 ? vertical : horizontal
+    ].filter(Boolean).join(" "),
+    [themeClass, vertical2, hasLabel]
+  );
+  return { root: root24, line, label };
+}
+
+// src/components/divider/index.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Divider({ vertical: vertical2, label: label7, ...rest }) {
+  const hasLabel = label7 != null;
+  const { root: root24, line: line2, label: labelClass } = useStyles2({ vertical: vertical2, hasLabel });
+  if (hasLabel) {
+    return /* @__PURE__ */ jsxs2("div", { role: "separator", className: root24, ...rest, children: [
+      /* @__PURE__ */ jsx3("span", { className: line2 }),
+      /* @__PURE__ */ jsx3("span", { className: labelClass, children: label7 }),
+      /* @__PURE__ */ jsx3("span", { className: line2 })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3("div", { role: "separator", className: root24, ...rest });
+}
+
+// src/components/avatar/use-styles.ts
+import { useMemo as useMemo4 } from "react";
+
+// src/components/avatar/use-styles.css.ts
+var root3 = "use-styles_root__1mn1rmu0";
+var size2 = { sm: "use-styles_size_sm__1mn1rmu1", md: "use-styles_size_md__1mn1rmu2", lg: "use-styles_size_lg__1mn1rmu3" };
+var variant = { "default": "use-styles_variant_default__1mn1rmu4", filled: "use-styles_variant_filled__1mn1rmu5" };
+
+// src/components/avatar/use-styles.ts
+function useStyles3({
+  size: size3 = "md",
+  filled,
+  className
+}) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo4(
+    () => [
+      themeClass,
+      root3,
+      size2[size3],
+      filled ? variant.filled : variant.default,
+      className
+    ].filter(Boolean).join(" "),
+    [themeClass, size3, filled, className]
+  );
+  return { root: root24 };
+}
+
+// src/components/avatar/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Avatar({ size: size3, filled, className, children, ...rest }) {
+  const { root: root24 } = useStyles3({ size: size3, filled, className });
+  return /* @__PURE__ */ jsx4("span", { className: root24, ...rest, children });
+}
+
+// src/components/badge/use-styles.ts
+import { useMemo as useMemo5 } from "react";
+
+// src/components/badge/use-styles.css.ts
+var dot = "use-styles_dot__1wpei6p1";
+var root4 = "use-styles_root__1wpei6p0";
+var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_accent__1wpei6p3" };
+
+// src/components/badge/use-styles.ts
+function useStyles4({ tone: tone4 = "ink", className }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo5(
+    () => [themeClass, root4, className].filter(Boolean).join(" "),
+    [themeClass, className]
+  );
+  const dot3 = useMemo5(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  return { root: root24, dot: dot3 };
+}
+
+// src/components/badge/index.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Badge({ count, tone: tone4, className, children, ...rest }) {
+  const { root: root24, dot: dot3 } = useStyles4({ tone: tone4, className });
+  return /* @__PURE__ */ jsxs3("span", { className: root24, ...rest, children: [
+    children,
+    count != null && /* @__PURE__ */ jsx5("span", { className: dot3, children: count })
+  ] });
+}
+
+// src/components/progress/use-styles.ts
+import { useMemo as useMemo6 } from "react";
+
+// src/components/progress/use-styles.css.ts
+var bar = "use-styles_bar__kbop7v3";
+var indeterminate = "use-styles_indeterminate__kbop7v4";
+var spinner = "use-styles_spinner__kbop7v5";
+var track = "use-styles_track__kbop7v2";
+
+// src/components/progress/use-styles.ts
+function useStyles5({
+  variant: variant2 = "linear",
+  value,
+  className
+}) {
+  const { themeClass } = useTheme();
+  const indeterminate2 = value === void 0;
+  return useMemo6(() => {
+    const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
+    if (variant2 === "circular") {
+      return { track: "", bar: "", spinner: root24(spinner) };
+    }
+    return {
+      track: root24(track),
+      bar: [bar, indeterminate2 && indeterminate].filter(Boolean).join(" "),
+      spinner: ""
+    };
+  }, [themeClass, variant2, indeterminate2, className]);
+}
+
+// src/components/progress/index.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Progress({
+  variant: variant2 = "linear",
+  value,
+  size: size3 = 20,
+  className,
+  ...rest
+}) {
+  const { track: track4, bar: bar2, spinner: spinner2 } = useStyles5({ variant: variant2, value, className });
+  const indeterminate2 = value === void 0;
+  if (variant2 === "circular") {
+    return /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: spinner2,
+        role: "progressbar",
+        "aria-valuenow": indeterminate2 ? void 0 : value,
+        "aria-valuemin": indeterminate2 ? void 0 : 0,
+        "aria-valuemax": indeterminate2 ? void 0 : 100,
+        style: { width: size3, height: size3 },
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: track4,
+      role: "progressbar",
+      "aria-valuenow": indeterminate2 ? void 0 : value,
+      "aria-valuemin": indeterminate2 ? void 0 : 0,
+      "aria-valuemax": indeterminate2 ? void 0 : 100,
+      ...rest,
+      children: /* @__PURE__ */ jsx6("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
+    }
+  );
+}
+
+// src/components/icons/x/index.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx7("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx7("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+
+// src/components/chip/use-styles.ts
+import { useMemo as useMemo7 } from "react";
+
+// src/components/chip/use-styles.css.ts
+var clickable = "use-styles_clickable__1axilf44";
+var deleteBtn = "use-styles_deleteBtn__1axilf45";
+var root5 = "use-styles_root__1axilf40";
+var selected = "use-styles_selected__1axilf43";
+var tone3 = { ink: "use-styles_tone_ink__1axilf41", accent: "use-styles_tone_accent__1axilf42" };
+
+// src/components/chip/use-styles.ts
+function useStyles6({
+  selected: selected3,
+  tone: tone4 = "ink",
+  clickable: clickable2
+}) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo7(
+    () => [
+      themeClass,
+      root5,
+      selected3 ? selected : tone3[tone4],
+      clickable2 && clickable
+    ].filter(Boolean).join(" "),
+    [themeClass, selected3, tone4, clickable2]
+  );
+  return { root: root24, deleteBtn };
+}
+
+// src/components/chip/index.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Chip({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }) {
+  const clickable2 = Boolean(onClick);
+  const { root: root24, deleteBtn: deleteBtn2 } = useStyles6({ selected: selected3, tone: tone4, clickable: clickable2 });
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    onDelete?.();
+  };
+  return /* @__PURE__ */ jsxs5("span", { className: root24, onClick, ...rest, children: [
+    children,
+    onDelete && /* @__PURE__ */ jsx8("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ jsx8(XIcon, { size: 13 }) })
+  ] });
+}
+
+// src/components/icons/check/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx9("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+
+// src/components/checkbox/use-styles.ts
+import { useMemo as useMemo8 } from "react";
+
+// src/components/checkbox/use-styles.css.ts
+var box = "use-styles_box__9zoga92";
+var boxChecked = "use-styles_boxChecked__9zoga93";
+var check = "use-styles_check__9zoga94";
+var disabled = "use-styles_disabled__9zoga95";
+var input = "use-styles_input__9zoga91";
+var root6 = "use-styles_root__9zoga90";
+
+// src/components/checkbox/use-styles.ts
+function useStyles7({ checked, disabled: disabled3 }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo8(
+    () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
+    [themeClass, disabled3]
+  );
+  const box2 = useMemo8(
+    () => [box, checked && boxChecked].filter(Boolean).join(" "),
+    [checked]
+  );
+  return { root: root24, input, box: box2, check };
+}
+
+// src/components/checkbox/index.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function Checkbox({
+  checked = false,
+  onChange,
+  label: label7,
+  disabled: disabled3 = false,
+  id
+}) {
+  const { root: root24, input: input6, box: box2, check: check2 } = useStyles7({ checked, disabled: disabled3 });
+  const handleChange = (e) => {
+    if (disabled3) return;
+    onChange?.(e.target.checked);
+  };
+  return /* @__PURE__ */ jsxs6("label", { className: root24, children: [
+    /* @__PURE__ */ jsx10(
+      "input",
+      {
+        type: "checkbox",
+        className: input6,
+        id,
+        checked,
+        disabled: disabled3,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx10("span", { className: box2, children: checked && /* @__PURE__ */ jsx10(CheckIcon, { size: 12, className: check2 }) }),
+    label7
+  ] });
+}
+
+// src/components/radio/use-styles.ts
+import { useMemo as useMemo9 } from "react";
+
+// src/components/radio/use-styles.css.ts
+var circle = "use-styles_circle__vy61b43";
+var disabled2 = "use-styles_disabled__vy61b41";
+var dot2 = "use-styles_dot__vy61b44";
+var input2 = "use-styles_input__vy61b42";
+var label2 = "use-styles_label__vy61b45";
+var root7 = "use-styles_root__vy61b40";
+
+// src/components/radio/use-styles.ts
+function useStyles8({
+  disabled: disabled3,
+  className
+}) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo9(
+    () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
+    [themeClass, disabled3, className]
+  );
+  return {
+    root: root24,
+    input: input2,
+    circle,
+    dot: dot2,
+    label: label2
+  };
+}
+
+// src/components/radio/index.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function Radio({ checked, onChange, label: label7, name, value, disabled: disabled3 }) {
+  const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles8({ disabled: disabled3 });
+  return /* @__PURE__ */ jsxs7("label", { className: root24, children: [
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        className: input6,
+        type: "radio",
+        name,
+        value,
+        checked,
+        disabled: disabled3,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsx11("span", { className: circle2, children: checked && /* @__PURE__ */ jsx11("span", { className: dot3 }) }),
+    label7 != null && /* @__PURE__ */ jsx11("span", { className: labelClass, children: label7 })
+  ] });
+}
+
+// src/components/switch/use-styles.ts
+import { useMemo as useMemo10 } from "react";
+
+// src/components/switch/use-styles.css.ts
+var input3 = "use-styles_input__1r6kem71";
+var knob = "use-styles_knob__1r6kem74";
+var knobChecked = "use-styles_knobChecked__1r6kem75";
+var label3 = "use-styles_label__1r6kem76";
+var root8 = "use-styles_root__1r6kem70";
+var track2 = "use-styles_track__1r6kem72";
+var trackChecked = "use-styles_trackChecked__1r6kem73";
+
+// src/components/switch/use-styles.ts
+function useStyles9({ checked }) {
+  const { themeClass } = useTheme();
+  return useMemo10(
+    () => ({
+      root: [themeClass, root8].filter(Boolean).join(" "),
+      input: input3,
+      track: [track2, checked && trackChecked].filter(Boolean).join(" "),
+      knob: [knob, checked && knobChecked].filter(Boolean).join(" "),
+      label: label3
+    }),
+    [themeClass, checked]
+  );
+}
+
+// src/components/switch/index.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function Switch({ checked = false, onChange, label: label7, disabled: disabled3 }) {
+  const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles9({ checked });
+  return /* @__PURE__ */ jsxs8("label", { className: root24, children: [
+    /* @__PURE__ */ jsx12(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        "aria-checked": checked,
+        className: input6,
+        checked,
+        disabled: disabled3,
+        onChange: (event) => {
+          if (disabled3) return;
+          onChange?.(event.target.checked);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx12("span", { className: track4, children: /* @__PURE__ */ jsx12("span", { className: knob2 }) }),
+    label7 != null && /* @__PURE__ */ jsx12("span", { className: labelClass, children: label7 })
+  ] });
+}
+
+// src/components/text-field/index.tsx
+import {
+  useId,
+  useState as useState3
+} from "react";
+
+// src/components/icons/eye/index.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx13("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+
+// src/components/icons/eye-off/index.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs10(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx14("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ jsx14("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__ */ jsx14("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__ */ jsx14("path", { d: "m2 2 20 20" })
+      ]
+    }
+  );
+}
+
+// src/components/text-field/use-styles.ts
+import { useMemo as useMemo11 } 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 useStyles10({ error, hasStartIcon, hasReveal, className }) {
+  const { themeClass } = useTheme();
+  return useMemo11(() => {
+    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/text-field/index.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function TextField({
+  label: label7,
+  help,
+  error,
+  startIcon: StartIcon,
+  multiline,
+  rows,
+  type = "text",
+  onChange,
+  className,
+  id,
+  ...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 = useStyles10({
+    error,
+    hasStartIcon: Boolean(StartIcon),
+    hasReveal,
+    className
+  });
+  const handleInputChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  const handleTextareaChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  const handleToggleMouseDown = (e) => {
+    e.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: classes.root, children: [
+    label7 != null && /* @__PURE__ */ jsx15("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
+    /* @__PURE__ */ jsxs11("div", { className: classes.field, children: [
+      StartIcon != null && /* @__PURE__ */ jsx15("span", { className: classes.startIcon, children: /* @__PURE__ */ jsx15(StartIcon, { size: 18 }) }),
+      multiline ? /* @__PURE__ */ jsx15(
+        "textarea",
+        {
+          id: controlId,
+          className: classes.input,
+          rows: rows ?? 4,
+          onChange: handleTextareaChange,
+          ...rest
+        }
+      ) : /* @__PURE__ */ jsx15(
+        "input",
+        {
+          id: controlId,
+          className: classes.input,
+          type: effectiveType,
+          onChange: handleInputChange,
+          ...rest
+        }
+      ),
+      hasReveal && /* @__PURE__ */ jsx15(
+        "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__ */ jsx15(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx15(EyeIcon, { size: 18 })
+        }
+      )
+    ] }),
+    help != null && /* @__PURE__ */ jsx15("span", { className: classes.helpText, children: help })
+  ] });
+}
+
+// src/components/icon-button/use-styles.ts
+import { useMemo as useMemo12 } from "react";
+
+// src/components/icon-button/use-styles.css.ts
+var accent = "use-styles_accent__18np0q02";
+var active = "use-styles_active__18np0q01";
+var root10 = "use-styles_root__18np0q00";
+
+// src/components/icon-button/use-styles.ts
+function useStyles11({
+  active: active2 = false,
+  tone: tone4 = "ink"
+}) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo12(
+    () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
+    [themeClass, active2, tone4]
+  );
+  return { root: root24 };
+}
+
+// src/components/icon-button/index.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }) {
+  const { root: root24 } = useStyles11({ active: active2, tone: tone4 });
+  return /* @__PURE__ */ jsx16("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ jsx16(Icon, { size: 18 }) });
+}
+
+// src/components/card/use-styles.ts
+import { useMemo as useMemo13 } from "react";
+
+// src/components/card/use-styles.css.ts
+var body = "use-styles_body__1fuvd022";
+var footer = "use-styles_footer__1fuvd023";
+var header = "use-styles_header__1fuvd021";
+var root11 = "use-styles_root__1fuvd020";
+
+// src/components/card/use-styles.ts
+function useStyles12() {
+  const { themeClass } = useTheme();
+  const root24 = useMemo13(() => `${themeClass} ${root11}`, [themeClass]);
+  return { root: root24, header, body, footer };
+}
+
+// src/components/card/index.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function CardRoot({ children, ...rest }) {
+  const { root: root24 } = useStyles12();
+  return /* @__PURE__ */ jsx17("div", { className: root24, ...rest, children });
+}
+function CardHeader({ children, ...rest }) {
+  const { header: header3 } = useStyles12();
+  return /* @__PURE__ */ jsx17("div", { className: header3, ...rest, children });
+}
+function CardBody({ children, ...rest }) {
+  const { body: body4 } = useStyles12();
+  return /* @__PURE__ */ jsx17("div", { className: body4, ...rest, children });
+}
+function CardFooter({ children, ...rest }) {
+  const { footer: footer2 } = useStyles12();
+  return /* @__PURE__ */ jsx17("div", { className: footer2, ...rest, children });
+}
+CardRoot.displayName = "Card";
+CardHeader.displayName = "Card.Header";
+CardBody.displayName = "Card.Body";
+CardFooter.displayName = "Card.Footer";
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter
+});
+
+// src/components/icons/circle-check/index.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs12(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx18("path", { d: "m9 12 2 2 4-4" })
+      ]
+    }
+  );
+}
+
+// src/components/icons/circle-x/index.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs13(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx19("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ jsx19("path", { d: "m9 9 6 6" })
+      ]
+    }
+  );
+}
+
+// src/components/icons/info/index.tsx
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx20("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx20("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
+
+// src/components/icons/triangle-alert/index.tsx
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs15(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx21("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__ */ jsx21("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx21("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+
+// src/components/alert/use-styles.ts
+import { useMemo as useMemo14 } from "react";
+
+// src/components/alert/use-styles.css.ts
+var body2 = "use-styles_body__ivsh6u8";
+var content = "use-styles_content__ivsh6u6";
+var iconSlot = "use-styles_iconSlot__ivsh6u5";
+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" };
+var titleText = "use-styles_titleText__ivsh6u7";
+
+// src/components/alert/use-styles.ts
+function useStyles13({
+  severity: severity2 = "info",
+  className
+}) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo14(
+    () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
+    [themeClass, severity2, className]
+  );
+  return {
+    root: root24,
+    iconSlot,
+    content,
+    titleText,
+    body: body2
+  };
+}
+
+// src/components/alert/index.tsx
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var defaultIcons = {
+  info: InfoIcon,
+  ok: CircleCheckIcon,
+  warn: TriangleAlertIcon,
+  danger: CircleXIcon
+};
+function Alert({
+  severity: severity2 = "info",
+  title,
+  icon,
+  className,
+  children,
+  ...rest
+}) {
+  const styles = useStyles13({ severity: severity2, className });
+  const IconComponent = icon ?? defaultIcons[severity2];
+  return /* @__PURE__ */ jsxs16("div", { role: "alert", className: styles.root, ...rest, children: [
+    /* @__PURE__ */ jsx22("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx22(IconComponent, {}) }),
+    /* @__PURE__ */ jsxs16("div", { className: styles.content, children: [
+      title != null && /* @__PURE__ */ jsx22("div", { className: styles.titleText, children: title }),
+      children != null && /* @__PURE__ */ jsx22("div", { className: styles.body, children })
+    ] })
+  ] });
+}
+
+// src/components/tooltip/index.tsx
+import { cloneElement, useId as useId2, useState as useState4 } from "react";
+
+// src/components/tooltip/use-styles.ts
+import { useMemo as useMemo15 } from "react";
+
+// src/components/tooltip/use-styles.css.ts
+var bubble = "use-styles_bubble__h9kvh1";
+var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
+var wrapper = "use-styles_wrapper__h9kvh0";
+
+// src/components/tooltip/use-styles.ts
+function useStyles14({ placement: placement2 = "top" }) {
+  const { themeClass } = useTheme();
+  const wrapper4 = useMemo15(
+    () => [themeClass, wrapper].filter(Boolean).join(" "),
+    [themeClass]
+  );
+  const bubble2 = useMemo15(
+    () => [bubble, placement[placement2]].filter(Boolean).join(" "),
+    [placement2]
+  );
+  return { wrapper: wrapper4, bubble: bubble2 };
+}
+
+// src/components/tooltip/index.tsx
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+function Tooltip({ label: label7, children, placement: placement2 }) {
+  const [open, setOpen] = useState4(false);
+  const tooltipId = useId2();
+  const { wrapper: wrapper4, bubble: bubble2 } = useStyles14({ placement: placement2 });
+  const show = () => setOpen(true);
+  const hide = () => setOpen(false);
+  const previousDescribedBy = children.props["aria-describedby"];
+  const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
+  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__ */ jsx23("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
+  ] });
+}
+
+// src/components/select/index.tsx
+import { useEffect, useId as useId3, useRef, useState as useState5 } from "react";
+
+// src/components/icons/chevron-down/index.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsx24(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx24("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+
+// src/components/select/use-styles.ts
+import { useMemo as useMemo16 } from "react";
+
+// src/components/select/use-styles.css.ts
+var chevron = "use-styles_chevron__1w1czpb4";
+var chevronOpen = "use-styles_chevronOpen__1w1czpb5";
+var label4 = "use-styles_label__1w1czpb1";
+var menu = "use-styles_menu__1w1czpb6";
+var option = "use-styles_option__1w1czpb7";
+var optionActive = "use-styles_optionActive__1w1czpb9";
+var optionSelected = "use-styles_optionSelected__1w1czpb8";
+var placeholder = "use-styles_placeholder__1w1czpb3";
+var root13 = "use-styles_root__1w1czpb0";
+var trigger = "use-styles_trigger__1w1czpb2";
+
+// src/components/select/use-styles.ts
+function useStyles15({
+  open = false
+}) {
+  const { themeClass } = useTheme();
+  return useMemo16(() => {
+    const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
+    return {
+      root: [themeClass, root13].filter(Boolean).join(" "),
+      label: label4,
+      trigger,
+      placeholder,
+      chevron: chevron3,
+      menu,
+      optionClass: (selected3, active2) => [option, selected3 && optionSelected, active2 && optionActive].filter(Boolean).join(" ")
+    };
+  }, [themeClass, open]);
+}
+
+// src/components/select/index.tsx
+import { jsx as jsx25, 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 rootRef = useRef(null);
+  const baseId = useId3();
+  const labelId = `${baseId}-label`;
+  const optionId = (index) => `${baseId}-option-${index}`;
+  const {
+    root: root24,
+    label: labelClass,
+    trigger: trigger2,
+    placeholder: placeholderClass,
+    chevron: chevron3,
+    menu: menu2,
+    optionClass
+  } = useStyles15({ open });
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open]);
+  const selected3 = options.find((option2) => option2.value === value);
+  const selectAt = (index) => {
+    const option2 = options[index];
+    if (option2) onChange?.(option2.value);
+    setOpen(false);
+  };
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setOpen(false);
+  };
+  const openMenu = () => {
+    const current2 = options.findIndex((option2) => option2.value === value);
+    setActiveIndex(current2 >= 0 ? current2 : 0);
+    setOpen(true);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled3) return;
+    switch (event.key) {
+      case "Escape":
+        setOpen(false);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openMenu();
+        } else {
+          setActiveIndex((index) => (index + 1) % options.length);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openMenu();
+        } else {
+          setActiveIndex((index) => (index - 1 + options.length) % options.length);
+        }
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (!open) {
+          openMenu();
+        } else {
+          selectAt(activeIndex);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: root24, children: [
+    label7 && /* @__PURE__ */ jsx25("span", { id: labelId, className: labelClass, children: label7 }),
+    /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        type: "button",
+        className: trigger2,
+        disabled: disabled3,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-labelledby": label7 ? labelId : void 0,
+        "aria-activedescendant": open ? optionId(activeIndex) : void 0,
+        onClick: () => {
+          if (disabled3) return;
+          if (open) {
+            setOpen(false);
+          } else {
+            openMenu();
+          }
+        },
+        onKeyDown: handleKeyDown,
+        children: [
+          selected3 ? selected3.label : /* @__PURE__ */ jsx25("span", { className: placeholderClass, children: placeholder2 }),
+          /* @__PURE__ */ jsx25("span", { className: chevron3, children: /* @__PURE__ */ jsx25(ChevronDownIcon, { size: 18 }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx25("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__ */ jsx25(
+          "div",
+          {
+            id: optionId(index),
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": isSelected,
+            className: optionClass(isSelected, isActive),
+            onClick: () => handleSelect(option2.value),
+            children: option2.label
+          },
+          option2.value
+        )
+      );
+    }) })
+  ] });
+}
+
+// src/components/slider/use-styles.ts
+import { useMemo as useMemo17 } from "react";
+
+// src/components/slider/use-styles.css.ts
+var input5 = "use-styles_input__okw59n3";
+var label5 = "use-styles_label__okw59n5";
+var range = "use-styles_range__okw59n2";
+var root14 = "use-styles_root__okw59n0";
+var thumb = "use-styles_thumb__okw59n4";
+var track3 = "use-styles_track__okw59n1";
+var wrapper2 = "use-styles_wrapper__okw59n6";
+
+// src/components/slider/use-styles.ts
+function useStyles16() {
+  const { themeClass } = useTheme();
+  return useMemo17(() => {
+    const root24 = [themeClass, root14].filter(Boolean).join(" ");
+    return {
+      wrapper: wrapper2,
+      label: label5,
+      root: root24,
+      track: track3,
+      range,
+      thumb,
+      input: input5
+    };
+  }, [themeClass]);
+}
+
+// src/components/slider/index.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function Slider({
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step: step2 = 1,
+  disabled: disabled3,
+  label: label7
+}) {
+  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles16();
+  const span = max - min;
+  const percent = span > 0 ? (value - min) / span * 100 : 0;
+  const clamped = Math.max(0, Math.min(100, percent));
+  const handleChange = (e) => {
+    onChange?.(Number(e.target.value));
+  };
+  return /* @__PURE__ */ jsxs19("span", { className: wrapper4, children: [
+    label7 ? /* @__PURE__ */ jsx26("span", { className: labelClass, children: label7 }) : null,
+    /* @__PURE__ */ jsxs19("span", { className: root24, children: [
+      /* @__PURE__ */ jsx26("span", { className: track4 }),
+      /* @__PURE__ */ jsx26("span", { className: range2, style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ jsx26(
+        "input",
+        {
+          className: input6,
+          type: "range",
+          min,
+          max,
+          step: step2,
+          value,
+          disabled: disabled3,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ jsx26("span", { className: thumb2, style: { left: `${clamped}%` } })
+    ] })
+  ] });
+}
+
+// src/components/accordion/index.tsx
+import { useState as useState6 } from "react";
+
+// src/components/accordion/use-styles.ts
+import { useMemo as useMemo18 } from "react";
+
+// src/components/accordion/use-styles.css.ts
+var chevron2 = "use-styles_chevron__1cjrdh93";
+var chevronOpen2 = "use-styles_chevronOpen__1cjrdh94";
+var header2 = "use-styles_header__1cjrdh92";
+var item = "use-styles_item__1cjrdh91";
+var panel = "use-styles_panel__1cjrdh95";
+var root15 = "use-styles_root__1cjrdh90";
+
+// src/components/accordion/use-styles.ts
+function useStyles17({ className }) {
+  const { themeClass } = useTheme();
+  return useMemo18(
+    () => ({
+      root: [themeClass, root15, className].filter(Boolean).join(" "),
+      item,
+      header: header2,
+      chevronFor: (open) => [chevron2, open && chevronOpen2].filter(Boolean).join(" "),
+      panel
+    }),
+    [themeClass, className]
+  );
+}
+
+// src/components/accordion/index.tsx
+import { jsx as jsx27, 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 } = useStyles17({ className });
+  const toggle = (id) => {
+    setOpen((current2) => {
+      const isOpen = current2.includes(id);
+      if (isOpen) return current2.filter((x) => x !== id);
+      return multiple ? [...current2, id] : [id];
+    });
+  };
+  return /* @__PURE__ */ jsx27("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}`;
+    return /* @__PURE__ */ jsxs20("div", { className: item3, children: [
+      /* @__PURE__ */ jsxs20(
+        "button",
+        {
+          type: "button",
+          id: headerId,
+          className: header3,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: () => toggle(it.id),
+          children: [
+            it.title,
+            /* @__PURE__ */ jsx27(ChevronDownIcon, { className: chevronFor(isOpen) })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx27("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
+    ] }, it.id);
+  }) });
+}
+
+// src/components/breadcrumbs/index.tsx
+import { Fragment } from "react";
+
+// src/components/icons/chevron-right/index.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsx28(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx28("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+
+// src/components/breadcrumbs/use-styles.ts
+import { useMemo as useMemo19 } from "react";
+
+// src/components/breadcrumbs/use-styles.css.ts
+var crumb = "use-styles_crumb__7u0du61";
+var current = "use-styles_current__7u0du62";
+var root16 = "use-styles_root__7u0du60";
+var separator = "use-styles_separator__7u0du63";
+
+// src/components/breadcrumbs/use-styles.ts
+function useStyles18({ className }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo19(
+    () => [themeClass, root16, className].filter(Boolean).join(" "),
+    [themeClass, className]
+  );
+  return { root: root24, crumb, current, separator };
+}
+
+// src/components/breadcrumbs/index.tsx
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+function Breadcrumbs({ items, className, ...rest }) {
+  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles18({ className });
+  return /* @__PURE__ */ jsx29("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__ */ jsx29("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx29("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx29("span", { className: crumb2, children: item3.label }),
+      !isLast && /* @__PURE__ */ jsx29("span", { className: separator2, children: /* @__PURE__ */ jsx29(ChevronRightIcon, { size: 14 }) })
+    ] }, key);
+  }) });
+}
+
+// src/components/icons/chevron-left/index.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsx30(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx30("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+
+// src/components/pagination/use-styles.ts
+import { useMemo as useMemo20 } from "react";
+
+// src/components/pagination/use-styles.css.ts
+var ellipsis = "use-styles_ellipsis__1azgzoh3";
+var nav = "use-styles_nav__1azgzoh4";
+var pageActive = "use-styles_pageActive__1azgzoh2";
+var pageBtn = "use-styles_pageBtn__1azgzoh1";
+var root17 = "use-styles_root__1azgzoh0";
+
+// src/components/pagination/use-styles.ts
+function useStyles19() {
+  const { themeClass } = useTheme();
+  return useMemo20(
+    () => ({
+      root: [themeClass, root17].filter(Boolean).join(" "),
+      pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
+      ellipsis,
+      nav: [pageBtn, nav].join(" ")
+    }),
+    [themeClass]
+  );
+}
+
+// src/components/pagination/index.tsx
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function buildItems(count, page, siblingCount) {
+  const total = Math.max(1, count);
+  const first = 1;
+  const last = total;
+  const start = Math.max(first + 1, page - siblingCount);
+  const end = Math.min(last - 1, page + siblingCount);
+  const items = [first];
+  if (start > first + 1) items.push("ellipsis");
+  for (let n = start; n <= end; n++) items.push(n);
+  if (end < last - 1) items.push("ellipsis");
+  if (last > first) items.push(last);
+  return items;
+}
+function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
+  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles19();
+  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__ */ jsx31(
+      "button",
+      {
+        type: "button",
+        className: nav2,
+        "aria-label": "Previous page",
+        disabled: current2 <= 1,
+        onClick: () => go(current2 - 1),
+        children: /* @__PURE__ */ jsx31(ChevronLeftIcon, { size: 18 })
+      }
+    ),
+    items.map(
+      (item3, index) => item3 === "ellipsis" ? (
+        // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
+        /* @__PURE__ */ jsx31("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
+      ) : /* @__PURE__ */ jsx31(
+        "button",
+        {
+          type: "button",
+          className: pageBtnFor(item3 === current2),
+          "aria-current": item3 === current2 ? "page" : void 0,
+          onClick: () => go(item3),
+          children: item3
+        },
+        item3
+      )
+    ),
+    /* @__PURE__ */ jsx31(
+      "button",
+      {
+        type: "button",
+        className: nav2,
+        "aria-label": "Next page",
+        disabled: current2 >= total,
+        onClick: () => go(current2 + 1),
+        children: /* @__PURE__ */ jsx31(ChevronRightIcon, { size: 18 })
+      }
+    )
+  ] });
+}
+
+// src/components/stepper/index.tsx
+import { Fragment as Fragment2 } from "react";
+
+// src/components/stepper/use-styles.ts
+import { useMemo as useMemo21 } from "react";
+
+// src/components/stepper/use-styles.css.ts
+var connector = "use-styles_connector__79pt4e7";
+var label6 = "use-styles_label__79pt4e5";
+var labelActive = "use-styles_labelActive__79pt4e6";
+var marker = "use-styles_marker__79pt4e2";
+var markerActive = "use-styles_markerActive__79pt4e3";
+var markerDone = "use-styles_markerDone__79pt4e4";
+var root18 = "use-styles_root__79pt4e0";
+var step = "use-styles_step__79pt4e1";
+
+// src/components/stepper/use-styles.ts
+function useStyles20({ className }) {
+  const { themeClass } = useTheme();
+  return useMemo21(() => {
+    const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
+    const markerFor = (state) => [
+      marker,
+      state === "active" && markerActive,
+      state === "done" && markerDone
+    ].filter(Boolean).join(" ");
+    const labelFor = (active2) => [label6, active2 && labelActive].filter(Boolean).join(" ");
+    return { root: root24, step, connector, markerFor, labelFor };
+  }, [themeClass, className]);
+}
+
+// src/components/stepper/index.tsx
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+function Stepper({ steps, active: active2 = 0, className, ...rest }) {
+  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles20({ className });
+  return /* @__PURE__ */ jsx32("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__ */ jsx32("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx32(CheckIcon, { size: 14 }) : index + 1 }),
+          /* @__PURE__ */ jsx32("span", { className: labelFor(isActive), children: s.label })
+        ] }),
+        index < steps.length - 1 && /* @__PURE__ */ jsx32("span", { "data-part": "connector", className: connector2 })
+      ] }, index)
+    );
+  }) });
+}
+
+// src/components/tabs/use-styles.ts
+import { useMemo as useMemo22 } from "react";
+
+// src/components/tabs/use-styles.css.ts
+var root19 = "use-styles_root__1l4m7t40";
+var tab = "use-styles_tab__1l4m7t41";
+var tabActive = "use-styles_tabActive__1l4m7t42";
+
+// src/components/tabs/use-styles.ts
+function useStyles21() {
+  const { themeClass } = useTheme();
+  return useMemo22(() => {
+    const root24 = [themeClass, root19].filter(Boolean).join(" ");
+    const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
+    return { root: root24, tab, tabClass };
+  }, [themeClass]);
+}
+
+// src/components/tabs/index.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+function Tabs({ items, value, onChange }) {
+  const { root: root24, tabClass } = useStyles21();
+  return /* @__PURE__ */ jsx33("div", { role: "tablist", className: root24, children: items.map((item3) => {
+    const active2 = item3.value === value;
+    return /* @__PURE__ */ jsx33(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": active2,
+        className: tabClass(active2),
+        onClick: () => onChange?.(item3.value),
+        children: item3.label
+      },
+      item3.value
+    );
+  }) });
+}
+
+// src/components/menu/index.tsx
+import {
+  cloneElement as cloneElement2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState7
+} from "react";
+
+// src/components/menu/use-styles.ts
+import { useMemo as useMemo23 } from "react";
+
+// src/components/menu/use-styles.css.ts
+var danger = "use-styles_danger__1uyxaj3";
+var item2 = "use-styles_item__1uyxaj2";
+var list = "use-styles_list__1uyxaj1";
+var wrapper3 = "use-styles_wrapper__1uyxaj0";
+
+// src/components/menu/use-styles.ts
+function useStyles22() {
+  const { themeClass } = useTheme();
+  return useMemo23(
+    () => ({
+      wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
+      list,
+      item: item2,
+      dangerItem: [item2, danger].join(" ")
+    }),
+    [themeClass]
+  );
+}
+
+// src/components/menu/index.tsx
+import { jsx as jsx34, 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 } = useStyles22();
+  const [open, setOpen] = useState7(false);
+  const rootRef = useRef2(null);
+  const listRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+  const focusItemAt = (index) => {
+    const menuItems = getMenuItems();
+    if (menuItems.length === 0) return;
+    const wrapped = (index + menuItems.length) % menuItems.length;
+    menuItems[wrapped]?.focus();
+  };
+  const closeAndRestoreFocus = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  useEffect2(() => {
+    if (!open) return;
+    listRef.current?.querySelector('[role="menuitem"]')?.focus();
+    const onDocMouseDown = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const onMenuKeyDown = (event) => {
+    const menuItems = getMenuItems();
+    const current2 = menuItems.indexOf(document.activeElement);
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focusItemAt(current2 + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusItemAt(current2 - 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusItemAt(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusItemAt(menuItems.length - 1);
+        break;
+      case "Escape":
+        event.preventDefault();
+        closeAndRestoreFocus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
+  const triggerProps = trigger2.props;
+  const consumerRef = trigger2.ref;
+  const mergedTriggerRef = (node) => {
+    triggerRef.current = node;
+    assignRef(consumerRef, node);
+  };
+  const clonedTrigger = cloneElement2(trigger2, {
+    ref: mergedTriggerRef,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    onClick: (event) => {
+      triggerProps.onClick?.(event);
+      setOpen((prev) => !prev);
+    }
+  });
+  return /* @__PURE__ */ jsxs24("div", { ref: rootRef, className: wrapper4, children: [
+    clonedTrigger,
+    open && /* @__PURE__ */ jsx34("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ jsx34(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        tabIndex: -1,
+        className: entry.danger ? dangerItem : item3,
+        onClick: () => {
+          entry.onClick?.();
+          setOpen(false);
+        },
+        children: entry.label
+      },
+      index
+    )) })
+  ] });
+}
+
+// src/components/dialog/index.tsx
+import {
+  useEffect as useEffect3,
+  useId as useId4,
+  useRef as useRef3
+} from "react";
+
+// src/components/dialog/use-styles.ts
+import { useMemo as useMemo24 } from "react";
+
+// src/components/dialog/use-styles.css.ts
+var actions = "use-styles_actions__5tstu84";
+var body3 = "use-styles_body__5tstu83";
+var overlay = "use-styles_overlay__5tstu80";
+var surface = "use-styles_surface__5tstu81";
+var titleText2 = "use-styles_titleText__5tstu82";
+
+// src/components/dialog/use-styles.ts
+function useStyles23() {
+  const { themeClass } = useTheme();
+  return useMemo24(
+    () => ({
+      overlay: [themeClass, overlay].filter(Boolean).join(" "),
+      surface,
+      titleText: titleText2,
+      body: body3,
+      actions
+    }),
+    [themeClass]
+  );
+}
+
+// src/components/dialog/index.tsx
+import { jsx as jsx35, 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, titleText: titleText3, body: body4, actions: actionsClass } = useStyles23();
+  const surfaceRef = useRef3(null);
+  const previouslyFocused = useRef3(null);
+  const generatedId = useId4();
+  const titleId = title != null ? generatedId : void 0;
+  useEffect3(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  useEffect3(() => {
+    if (!open) return;
+    previouslyFocused.current = document.activeElement;
+    surfaceRef.current?.focus();
+    return () => previouslyFocused.current?.focus?.();
+  }, [open]);
+  useEffect3(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+  if (!open) return null;
+  const stop = (event) => event.stopPropagation();
+  const onSurfaceKeyDown = (event) => {
+    if (event.key !== "Tab") return;
+    const surfaceEl = surfaceRef.current;
+    if (!surfaceEl) return;
+    const focusable = Array.from(surfaceEl.querySelectorAll(FOCUSABLE)).filter(
+      (el) => el.offsetParent !== null || el === surfaceEl
+    );
+    if (focusable.length === 0) {
+      event.preventDefault();
+      surfaceEl.focus();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active2 = document.activeElement;
+    if (event.shiftKey) {
+      if (active2 === first || active2 === surfaceEl) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else if (active2 === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
+    /* @__PURE__ */ jsx35("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        ref: surfaceRef,
+        className: surface2,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        tabIndex: -1,
+        onClick: stop,
+        onKeyDown: onSurfaceKeyDown,
+        children: [
+          title != null && /* @__PURE__ */ jsx35("h2", { id: titleId, className: titleText3, children: title }),
+          children != null && /* @__PURE__ */ jsx35("div", { className: body4, children }),
+          actions3 != null && /* @__PURE__ */ jsx35("div", { className: actionsClass, children: actions3 })
+        ]
+      }
+    ) })
+  );
+}
+
+// src/components/snackbar/use-styles.ts
+import { useMemo as useMemo25 } from "react";
+
+// src/components/snackbar/use-styles.css.ts
+var closeBtn = "use-styles_closeBtn__ihzsep2";
+var message = "use-styles_message__ihzsep1";
+var root20 = "use-styles_root__ihzsep0";
+
+// src/components/snackbar/use-styles.ts
+function useStyles24() {
+  const { themeClass } = useTheme();
+  return useMemo25(
+    () => ({
+      root: [themeClass, root20].filter(Boolean).join(" "),
+      message,
+      closeBtn
+    }),
+    [themeClass]
+  );
+}
+
+// src/components/snackbar/index.tsx
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+function Snackbar({ open, message: message2, action, onClose }) {
+  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles24();
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs26("div", { role: "status", className: root24, children: [
+    /* @__PURE__ */ jsx36("span", { className: messageClass, children: message2 }),
+    action,
+    onClose && /* @__PURE__ */ jsx36("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx36(XIcon, { size: 18 }) })
+  ] });
+}
+
+// src/components/table/use-styles.ts
+import { useMemo as useMemo26 } from "react";
+
+// src/components/table/use-styles.css.ts
+var alignRight = "use-styles_alignRight__1n2cz6i3";
+var root21 = "use-styles_root__1n2cz6i0";
+var td = "use-styles_td__1n2cz6i2";
+var th = "use-styles_th__1n2cz6i1";
+
+// src/components/table/use-styles.ts
+function useStyles25({ className }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo26(
+    () => [themeClass, root21, className].filter(Boolean).join(" "),
+    [themeClass, className]
+  );
+  return { root: root24, th, td, alignRight };
+}
+
+// src/components/table/index.tsx
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+function Table({
+  columns,
+  rows,
+  getRowKey,
+  className,
+  ...rest
+}) {
+  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles25({ 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__ */ jsx37("thead", { children: /* @__PURE__ */ jsx37("tr", { children: columns.map((column) => /* @__PURE__ */ jsx37("th", { className: headClass(column), children: column.header }, column.key)) }) }),
+    /* @__PURE__ */ jsx37("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx37("tr", { children: columns.map((column) => /* @__PURE__ */ jsx37("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 useMemo27 } from "react";
+
+// src/components/app-bar/use-styles.css.ts
+var actions2 = "use-styles_actions__1h133nh2";
+var brand = "use-styles_brand__1h133nh1";
+var root22 = "use-styles_root__1h133nh0";
+
+// src/components/app-bar/use-styles.ts
+function useStyles26({ className }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo27(
+    () => [themeClass, root22, className].filter(Boolean).join(" "),
+    [themeClass, className]
+  );
+  return { root: root24, brand, actions: actions2 };
+}
+
+// src/components/app-bar/index.tsx
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+function AppBar({ brand: brand2, actions: actions3, className, children, ...rest }) {
+  const styles = useStyles26({ className });
+  return /* @__PURE__ */ jsxs28("header", { className: styles.root, ...rest, children: [
+    brand2 !== void 0 ? /* @__PURE__ */ jsx38("div", { className: styles.brand, children: brand2 }) : null,
+    children,
+    actions3 !== void 0 ? /* @__PURE__ */ jsx38("div", { className: styles.actions, children: actions3 }) : null
+  ] });
+}
+
+// src/components/list-item/use-styles.ts
+import { useMemo as useMemo28 } from "react";
+
+// src/components/list-item/use-styles.css.ts
+var content2 = "use-styles_content__kbreq13";
+var leading = "use-styles_leading__kbreq12";
+var root23 = "use-styles_root__kbreq10";
+var selected2 = "use-styles_selected__kbreq11";
+var trailing = "use-styles_trailing__kbreq14";
+
+// src/components/list-item/use-styles.ts
+function useStyles27({ selected: selected3, className }) {
+  const { themeClass } = useTheme();
+  const root24 = useMemo28(
+    () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
+    [themeClass, selected3, className]
+  );
+  return { root: root24, leading, content: content2, trailing };
+}
+
+// src/components/list-item/index.tsx
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+function ListItem({
+  leading: leading2,
+  trailing: trailing2,
+  selected: selected3,
+  className,
+  children,
+  ...rest
+}) {
+  const styles = useStyles27({ selected: selected3, className });
+  return /* @__PURE__ */ jsxs29("div", { className: styles.root, ...rest, children: [
+    leading2 != null && /* @__PURE__ */ jsx39("span", { className: styles.leading, children: leading2 }),
+    /* @__PURE__ */ jsx39("span", { className: styles.content, children }),
+    trailing2 != null && /* @__PURE__ */ jsx39("span", { className: styles.trailing, children: trailing2 })
+  ] });
+}
+
+// src/components/icons/chevron-up/index.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsx40(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx40("path", { d: "m18 15-6-6-6 6" })
+    }
+  );
+}
+
+// src/components/icons/search/index.tsx
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs30(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx41("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx41("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+
+// src/components/icons/plus/index.tsx
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs31(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx42("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx42("path", { d: "M12 5v14" })
+      ]
+    }
+  );
+}
+
+// src/components/icons/minus/index.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsx43(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx43("path", { d: "M5 12h14" })
+    }
+  );
+}
+
+// src/components/icons/more-horizontal/index.tsx
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
+  return /* @__PURE__ */ jsxs32(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size3,
+      height: size3,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx44("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx44("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx44("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+
+// src/theme/typography.css.ts
+var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_text_display__1wmlzy1", h1: "typography_text_h1__1wmlzy2", h2: "typography_text_h2__1wmlzy3", h3: "typography_text_h3__1wmlzy4", h4: "typography_text_h4__1wmlzy5", body: "typography_text_body__1wmlzy6", lead: "typography_text_lead__1wmlzy7", small: "typography_text_small__1wmlzy8", caption: "typography_text_caption__1wmlzy9", code: "typography_text_code__1wmlzya", blackletter: "typography_text_blackletter__1wmlzyb" };
+export {
+  Accordion,
+  Alert,
+  AppBar,
+  Avatar,
+  Badge,
+  Breadcrumbs,
+  Button,
+  Card,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  Chip,
+  CircleCheckIcon,
+  CircleXIcon,
+  Dialog,
+  Divider,
+  EyeIcon,
+  EyeOffIcon,
+  IconButton,
+  InfoIcon,
+  ListItem,
+  Menu,
+  MinusIcon,
+  MoreHorizontalIcon,
+  Pagination,
+  PlusIcon,
+  Progress,
+  Radio,
+  SearchIcon,
+  Select,
+  Slider,
+  Snackbar,
+  Stepper,
+  Switch,
+  Table,
+  Tabs,
+  TextField,
+  ThemeProvider,
+  Tooltip,
+  TriangleAlertIcon,
+  XIcon,
+  modeNames,
+  schemaNames,
+  text,
+  vars as theme,
+  themes,
+  useTheme,
+  useToggle
+};