@campfire-interactive/ui 0.3.0 → 0.4.1

package/dist/index.js

@@ -97,16 +97,506 @@ function ButtonGroup({ align = "end", className, ...rest }) {
   return /* @__PURE__ */ jsx("div", { "data-align": align, className: cn("cfi-ui", "cfi-ui-btn-group", className), ...rest });
 }
 
+// src/SplitButton.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { ChevronDown } from "lucide-react";
+
+// src/Menu.tsx
+import { Fragment, forwardRef as forwardRef2 } from "react";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+
+// src/Floating.css
+styleInject("@layer components {\n  .cfi-ui-floating {\n    z-index: var(--cfi-ui-z-popover);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n    max-height: var(--radix-popper-available-height, none);\n    overflow: hidden auto;\n  }\n  .cfi-ui-floating__arrow {\n    fill: var(--cfi-ui-surface-raised);\n    filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n  }\n  .cfi-ui-popover {\n    padding: var(--cfi-ui-space-md);\n    min-width: 12rem;\n  }\n  .cfi-ui-popover[data-flush] {\n    padding: 0;\n  }\n  .cfi-ui-menu {\n    z-index: var(--cfi-ui-z-dropdown);\n    min-width: 11rem;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-menu__item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-menu__item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-menu__item[data-variant=danger] {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n    background: var(--cfi-ui-error-soft);\n  }\n  .cfi-ui-menu__item > svg,\n  .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-menu__icon {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n    color: inherit;\n  }\n  .cfi-ui-menu__shortcut {\n    margin-left: auto;\n    padding-left: var(--cfi-ui-space-md);\n    font-family: var(--cfi-ui-font-mono);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-menu__label {\n    padding: 0.375rem 0.5rem 0.25rem;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    letter-spacing: var(--cfi-ui-tracking-caps);\n    text-transform: uppercase;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__separator {\n    height: 1px;\n    margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-select-content {\n    z-index: var(--cfi-ui-z-dropdown);\n    padding: var(--cfi-ui-space-xs);\n    min-width: var(--radix-select-trigger-width, 11rem);\n  }\n  .cfi-ui-select-viewport {\n    max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n  }\n  .cfi-ui-select-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-select-item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-select-item[data-state=checked] {\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-select-item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select-item__indicator {\n    display: inline-flex;\n    flex: none;\n    width: 0.875rem;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-select-item__indicator > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-select-empty {\n    padding: var(--cfi-ui-space-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-tooltip {\n    z-index: var(--cfi-ui-z-tooltip);\n    max-width: 20rem;\n    padding: 0.3125rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-content);\n    color: var(--cfi-ui-surface);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    box-shadow: var(--cfi-ui-shadow-md);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-tooltip__arrow {\n    fill: var(--cfi-ui-content);\n  }\n}\n");
+
+// src/Menu.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MenuRoot = RadixMenu.Root;
+var MenuTrigger = RadixMenu.Trigger;
+var MenuGroup = RadixMenu.Group;
+var MenuSub = RadixMenu.Sub;
+var MenuRadioGroup = RadixMenu.RadioGroup;
+var MenuContent = forwardRef2(function MenuContent2({ className, sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(RadixMenu.Portal, { children: /* @__PURE__ */ jsx2(
+    RadixMenu.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
+      ...rest
+    }
+  ) });
+});
+var MenuItem = forwardRef2(
+  function MenuItem2({ icon, shortcut, variant = "default", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      RadixMenu.Item,
+      {
+        ref,
+        "data-variant": variant,
+        className: cn("cfi-ui-menu__item", className),
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-menu__icon", children: icon }),
+          /* @__PURE__ */ jsx2("span", { children }),
+          shortcut && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-menu__shortcut", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+var MenuCheckboxItem = forwardRef2(function MenuCheckboxItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2(RadixMenu.CheckboxItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
+    /* @__PURE__ */ jsx2("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx2(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx2(Check, {}) }) }),
+    /* @__PURE__ */ jsx2("span", { children })
+  ] });
+});
+var MenuRadioItem = forwardRef2(function MenuRadioItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2(RadixMenu.RadioItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
+    /* @__PURE__ */ jsx2("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx2(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx2(Check, {}) }) }),
+    /* @__PURE__ */ jsx2("span", { children })
+  ] });
+});
+function MenuLabel({ className, ...rest }) {
+  return /* @__PURE__ */ jsx2(RadixMenu.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
+}
+function MenuSeparator({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2(RadixMenu.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
+}
+var MenuSubTrigger = forwardRef2(function MenuSubTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(RadixMenu.SubTrigger, { ref, className: cn("cfi-ui-menu__item", className), ...rest });
+});
+var MenuSubContent = forwardRef2(function MenuSubContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(RadixMenu.Portal, { children: /* @__PURE__ */ jsx2(
+    RadixMenu.SubContent,
+    {
+      ref,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
+      ...rest
+    }
+  ) });
+});
+function Menu({ trigger, items, align = "end", side = "bottom", className }) {
+  return /* @__PURE__ */ jsxs2(MenuRoot, { children: [
+    /* @__PURE__ */ jsx2(MenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx2(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx2(MenuSeparator, {}),
+      /* @__PURE__ */ jsx2(
+        MenuItem,
+        {
+          icon: item.icon,
+          shortcut: item.shortcut,
+          variant: item.variant,
+          disabled: item.disabled,
+          onSelect: item.onSelect,
+          children: item.label
+        }
+      )
+    ] }, item.id)) })
+  ] });
+}
+
+// src/SplitButton.css
+styleInject("@layer components {\n  :where(.cfi-ui-splitbutton) {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n  }\n  .cfi-ui-splitbutton__main {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n  .cfi-ui-splitbutton__toggle {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    padding-inline: var(--cfi-ui-space-xs);\n    margin-inline-start: -1px;\n  }\n  .cfi-ui-splitbutton__toggle--only {\n    border-radius: var(--cfi-ui-radius-md);\n    margin-inline-start: 0;\n    padding-inline: var(--cfi-ui-space-sm);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-splitbutton__main:focus-visible,\n  .cfi-ui-splitbutton__toggle:focus-visible {\n    position: relative;\n    z-index: 1;\n  }\n  .cfi-ui-splitbutton__main:hover,\n  .cfi-ui-splitbutton__toggle:hover {\n    position: relative;\n    z-index: 1;\n  }\n}\n");
+
+// src/SplitButton.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SplitButton = forwardRef3(function SplitButton2({ children, onClick, items, variant = "secondary", size = "md", menuLabel, align = "end", className, disabled, ...rest }, ref) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx3(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        onClick,
+        disabled,
+        className,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("span", { className: cn("cfi-ui", "cfi-ui-splitbutton", className), "data-variant": variant, children: [
+    onClick && /* @__PURE__ */ jsx3(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        onClick,
+        disabled,
+        className: "cfi-ui-splitbutton__main",
+        ...rest,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Menu,
+      {
+        items,
+        align,
+        trigger: /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant,
+            size,
+            disabled,
+            "aria-label": menuLabel,
+            title: menuLabel,
+            className: cn(
+              "cfi-ui-splitbutton__toggle",
+              !onClick && "cfi-ui-splitbutton__toggle--only"
+            ),
+            children: [
+              !onClick && children,
+              /* @__PURE__ */ jsx3(ChevronDown, { size: 14, "aria-hidden": "true" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+});
+
+// src/FilterBar.tsx
+import { useMemo, useState } from "react";
+import { ListFilter, X } from "lucide-react";
+
+// src/Badge.tsx
+import { forwardRef as forwardRef4 } from "react";
+
+// src/Badge.css
+styleInject("@layer components {\n  :where(.cfi-ui-badge) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    padding: 0.125rem 0.5rem;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-full);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: 1.4;\n    white-space: nowrap;\n    vertical-align: middle;\n  }\n  .cfi-ui-badge[data-size=sm] {\n    padding: 0 0.375rem;\n    font-size: 0.6875rem;\n  }\n  .cfi-ui-badge__dot {\n    flex: none;\n    width: 0.375rem;\n    height: 0.375rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: currentColor;\n  }\n  .cfi-ui-badge__icon {\n    display: inline-flex;\n    flex: none;\n  }\n  .cfi-ui-badge__icon > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    display: block;\n  }\n  .cfi-ui-badge--count {\n    justify-content: center;\n    min-width: 1.25rem;\n    padding-inline: 0.375rem;\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n    background: var(--cfi-ui-neutral-soft);\n    color: var(--cfi-ui-neutral-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=success] {\n    background: var(--cfi-ui-success-soft);\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n    background: var(--cfi-ui-warning-soft);\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=error] {\n    background: var(--cfi-ui-error-soft);\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=info] {\n    background: var(--cfi-ui-info-soft);\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n    background: var(--cfi-ui-accent-soft);\n    color: var(--cfi-ui-accent-hover);\n  }\n  .cfi-ui-badge[data-variant=solid] {\n    color: var(--cfi-ui-content-inverse);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=neutral] {\n    background: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=success] {\n    background: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=warning] {\n    background: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=error] {\n    background: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=info] {\n    background: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=accent] {\n    background: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-fg);\n  }\n  .cfi-ui-badge[data-variant=outline] {\n    background: transparent;\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=neutral] {\n    border-color: var(--cfi-ui-neutral-border);\n    color: var(--cfi-ui-neutral-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=success] {\n    border-color: var(--cfi-ui-success-border);\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=warning] {\n    border-color: var(--cfi-ui-warning-border);\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=error] {\n    border-color: var(--cfi-ui-error-border);\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=info] {\n    border-color: var(--cfi-ui-info-border);\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=accent] {\n    border-color: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-hover);\n  }\n}\n");
+
+// src/Badge.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Badge = forwardRef4(function Badge2({ tone = "neutral", variant = "soft", size = "md", dot = false, icon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      ref,
+      "data-tone": tone,
+      "data-variant": variant,
+      "data-size": size,
+      className: cn("cfi-ui", "cfi-ui-badge", className),
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx4("span", { className: "cfi-ui-badge__icon", children: icon }) : dot && /* @__PURE__ */ jsx4("span", { className: "cfi-ui-badge__dot", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+});
+var CountBadge = forwardRef4(function CountBadge2({ count, max = 99, hideZero = true, className, ...rest }, ref) {
+  if (count === 0 && hideZero) return null;
+  return /* @__PURE__ */ jsx4(Badge, { ref, className: cn("cfi-ui-badge--count", className), ...rest, children: count > max ? `${max}+` : count });
+});
+
+// src/Popover.tsx
+import { forwardRef as forwardRef5 } from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var PopoverRoot = RadixPopover.Root;
+var PopoverTrigger = RadixPopover.Trigger;
+var PopoverAnchor = RadixPopover.Anchor;
+var PopoverClose = RadixPopover.Close;
+var PopoverContent = forwardRef5(function PopoverContent2({ showArrow = false, flush = false, className, children, sideOffset = 6, collisionPadding = 8, ...rest }, ref) {
+  return /* @__PURE__ */ jsx5(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs5(
+    RadixPopover.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding,
+      "data-cfi-ui-portal": "",
+      "data-flush": flush || void 0,
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-popover", className),
+      ...rest,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx5(RadixPopover.Arrow, { className: "cfi-ui-floating__arrow", width: 11, height: 5 })
+      ]
+    }
+  ) });
+});
+function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }) {
+  return /* @__PURE__ */ jsxs5(PopoverRoot, { open, onOpenChange, defaultOpen, modal, children: [
+    /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx5(PopoverContent, { ...content, children })
+  ] });
+}
+
+// src/Select.tsx
+import { forwardRef as forwardRef6 } from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+import { Check as Check2, ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
+
+// src/Select.css
+styleInject("@layer components {\n  :where(.cfi-ui-select) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-sm);\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-select--full {\n    width: 100%;\n  }\n  .cfi-ui-select:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-select:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-select[data-size=sm] {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: 0.5rem;\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-select[data-size=lg] {\n    height: var(--cfi-ui-control-height-lg);\n    padding-inline: 0.875rem;\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-select[data-placeholder] .cfi-ui-select__value {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-select__value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: left;\n  }\n  .cfi-ui-select__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-select__chevron > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-select-scroll {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 1.25rem;\n    color: var(--cfi-ui-content-muted);\n    cursor: default;\n  }\n  .cfi-ui-select-scroll > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n}\n");
+
+// src/Select.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectRoot = RadixSelect.Root;
+var SelectValue = RadixSelect.Value;
+var SelectGroup = RadixSelect.Group;
+var SelectTrigger = forwardRef6(
+  function SelectTrigger2({ size = "md", invalid, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs6(
+      RadixSelect.Trigger,
+      {
+        ref,
+        "data-size": size,
+        "data-invalid": invalid || void 0,
+        "aria-invalid": invalid || void 0,
+        className: cn("cfi-ui", "cfi-ui-select", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "cfi-ui-select__value", children }),
+          /* @__PURE__ */ jsx6(RadixSelect.Icon, { className: "cfi-ui-select__chevron", children: /* @__PURE__ */ jsx6(ChevronDown2, {}) })
+        ]
+      }
+    );
+  }
+);
+var SelectContent = forwardRef6(function SelectContent2({ className, children, position = "popper", sideOffset = 4, ...rest }, ref) {
+  return /* @__PURE__ */ jsx6(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs6(
+    RadixSelect.Content,
+    {
+      ref,
+      position,
+      sideOffset,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-select-content", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx6(RadixSelect.ScrollUpButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx6(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx6(RadixSelect.Viewport, { className: "cfi-ui-select-viewport", children }),
+        /* @__PURE__ */ jsx6(RadixSelect.ScrollDownButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx6(ChevronDown2, {}) })
+      ]
+    }
+  ) });
+});
+var SelectItem = forwardRef6(function SelectItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs6(RadixSelect.Item, { ref, className: cn("cfi-ui-select-item", className), ...rest, children: [
+    /* @__PURE__ */ jsx6("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx6(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx6(Check2, {}) }) }),
+    /* @__PURE__ */ jsx6(RadixSelect.ItemText, { children })
+  ] });
+});
+function SelectLabel({ className, ...rest }) {
+  return /* @__PURE__ */ jsx6(RadixSelect.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
+}
+function SelectSeparator({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx6(RadixSelect.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
+}
+function Select({
+  options,
+  value,
+  onValueChange,
+  defaultValue,
+  placeholder = "Select...",
+  size = "md",
+  invalid,
+  disabled,
+  required,
+  name,
+  id,
+  className,
+  fullWidth = true,
+  emptyLabel = "No options",
+  onOpenChange,
+  onBlur,
+  ...aria
+}) {
+  const groups = [];
+  for (const option of options) {
+    const existing = groups.find((g) => g.name === option.group);
+    if (existing) existing.options.push(option);
+    else groups.push({ name: option.group, options: [option] });
+  }
+  return /* @__PURE__ */ jsxs6(
+    SelectRoot,
+    {
+      value,
+      onValueChange,
+      defaultValue,
+      disabled,
+      required,
+      name,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx6(
+          SelectTrigger,
+          {
+            id,
+            size,
+            invalid,
+            className: cn(fullWidth && "cfi-ui-select--full", className),
+            onBlur,
+            ...aria,
+            children: /* @__PURE__ */ jsx6(SelectValue, { placeholder })
+          }
+        ),
+        /* @__PURE__ */ jsxs6(SelectContent, { children: [
+          groups.map(
+            (group, i) => group.name ? /* @__PURE__ */ jsxs6(SelectGroup, { children: [
+              i > 0 && /* @__PURE__ */ jsx6(SelectSeparator, {}),
+              /* @__PURE__ */ jsx6(SelectLabel, { children: group.name }),
+              group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+            ] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+          ),
+          options.length === 0 && /* @__PURE__ */ jsx6("p", { className: "cfi-ui-select-empty", children: emptyLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/Switch.tsx
+import { forwardRef as forwardRef7 } from "react";
+import * as RadixSwitch from "@radix-ui/react-switch";
+
+// src/Switch.css
+styleInject("@layer components {\n  .cfi-ui-switch {\n    flex: none;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 2rem;\n    height: 1.125rem;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-switch-bg);\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-switch[data-state=checked] {\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-switch:disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n  .cfi-ui-switch__thumb {\n    display: block;\n    width: 0.875rem;\n    height: 0.875rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: #ffffff;\n    box-shadow: var(--cfi-ui-shadow-sm);\n    transform: translateX(0.125rem);\n    transition: transform var(--cfi-ui-transition-base);\n    will-change: transform;\n  }\n  .cfi-ui-switch__thumb[data-state=checked] {\n    transform: translateX(1rem);\n  }\n  .cfi-ui-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-switch-row[data-label-position=end] .cfi-ui-switch-row__text {\n    flex: 1 1 auto;\n  }\n  .cfi-ui-switch-row__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-switch-row__label {\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n  }\n  .cfi-ui-switch-row__description {\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
+
+// src/Switch.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var Switch = forwardRef7(
+  function Switch2({ label, description, labelPosition = "end", className, id, ...rest }, ref) {
+    const control = /* @__PURE__ */ jsx7(
+      RadixSwitch.Root,
+      {
+        ref,
+        id,
+        className: cn("cfi-ui", "cfi-ui-switch", !label && className),
+        ...rest,
+        children: /* @__PURE__ */ jsx7(RadixSwitch.Thumb, { className: "cfi-ui-switch__thumb" })
+      }
+    );
+    if (!label) return control;
+    return /* @__PURE__ */ jsxs7("div", { "data-label-position": labelPosition, className: cn("cfi-ui", "cfi-ui-switch-row", className), children: [
+      labelPosition === "start" && control,
+      /* @__PURE__ */ jsxs7("div", { className: "cfi-ui-switch-row__text", children: [
+        /* @__PURE__ */ jsx7("label", { htmlFor: id, className: "cfi-ui-switch-row__label", children: label }),
+        description && /* @__PURE__ */ jsx7("span", { className: "cfi-ui-switch-row__description", children: description })
+      ] }),
+      labelPosition === "end" && control
+    ] });
+  }
+);
+
+// src/FilterBar.css
+styleInject('@layer components {\n  :where(.cfi-ui-filterbar) {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--cfi-ui-space-xs);\n    min-width: 0;\n  }\n  .cfi-ui-filterbar__panel {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-sm);\n    min-width: 15rem;\n  }\n  .cfi-ui-filterbar__field {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n  .cfi-ui-filterbar__field-label {\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-filterbar__toggle {\n    padding-block: 0.125rem;\n  }\n  .cfi-ui-filterbar__chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface);\n    font-size: var(--cfi-ui-text-xs);\n    white-space: nowrap;\n  }\n  .cfi-ui-filterbar__chip-name {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-filterbar__chip-name::after {\n    content: ":";\n  }\n  .cfi-ui-filterbar__chip-x {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-full);\n    background: none;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n  }\n  .cfi-ui-filterbar__chip-x:hover {\n    background: var(--cfi-ui-surface-hover);\n    color: var(--cfi-ui-content);\n  }\n}\n');
+
+// src/FilterBar.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function FilterBar({
+  selects = [],
+  toggles = [],
+  value,
+  onChange,
+  label = "Filters",
+  anyLabel = "Any",
+  clearLabel = "Clear filters",
+  removeLabel = (name) => `Remove the ${name} filter`,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const applied = useMemo(() => {
+    const out = [];
+    for (const s of selects) {
+      const v = value[s.id];
+      if (typeof v !== "string" || v === "") continue;
+      const opt = s.options.find((o) => o.value === v);
+      out.push({ id: s.id, name: s.label, display: opt ? opt.label : v });
+    }
+    for (const tg of toggles) {
+      if (value[tg.id] === true) out.push({ id: tg.id, name: tg.label, display: tg.label });
+    }
+    return out;
+  }, [selects, toggles, value]);
+  const set = (id, next) => onChange({ ...value, [id]: next });
+  const clearAll = () => {
+    const next = { ...value };
+    for (const s of selects) delete next[s.id];
+    for (const tg of toggles) delete next[tg.id];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: cn("cfi-ui", "cfi-ui-filterbar", className), children: [
+    /* @__PURE__ */ jsx8(
+      Popover,
+      {
+        open,
+        onOpenChange: setOpen,
+        align: "start",
+        trigger: /* @__PURE__ */ jsxs8(Button, { leadingIcon: /* @__PURE__ */ jsx8(ListFilter, { size: 14 }), "aria-expanded": open, children: [
+          label,
+          applied.length > 0 && /* @__PURE__ */ jsx8(CountBadge, { count: applied.length, size: "sm" })
+        ] }),
+        children: /* @__PURE__ */ jsxs8("div", { className: "cfi-ui-filterbar__panel", children: [
+          selects.map((s) => /* @__PURE__ */ jsxs8("label", { className: "cfi-ui-filterbar__field", children: [
+            /* @__PURE__ */ jsx8("span", { className: "cfi-ui-filterbar__field-label", children: s.label }),
+            /* @__PURE__ */ jsx8(
+              Select,
+              {
+                size: "sm",
+                fullWidth: true,
+                "aria-label": s.label,
+                value: typeof value[s.id] === "string" ? value[s.id] : void 0,
+                placeholder: s.placeholder ?? anyLabel,
+                options: s.options,
+                onValueChange: (v) => set(s.id, v)
+              }
+            )
+          ] }, s.id)),
+          toggles.map((tg) => /* @__PURE__ */ jsx8("div", { className: "cfi-ui-filterbar__toggle", children: /* @__PURE__ */ jsx8(
+            Switch,
+            {
+              checked: value[tg.id] === true,
+              onCheckedChange: (on) => set(tg.id, on || void 0),
+              label: tg.label,
+              description: tg.hint
+            }
+          ) }, tg.id)),
+          applied.length > 0 && /* @__PURE__ */ jsx8(Button, { variant: "ghost", size: "sm", onClick: clearAll, children: clearLabel })
+        ] })
+      }
+    ),
+    applied.map((a) => /* @__PURE__ */ jsxs8("span", { className: "cfi-ui-filterbar__chip", children: [
+      /* @__PURE__ */ jsx8("span", { className: "cfi-ui-filterbar__chip-name", children: a.name }),
+      a.display,
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ui-filterbar__chip-x",
+          "aria-label": removeLabel(a.name),
+          onClick: () => set(a.id, void 0),
+          children: /* @__PURE__ */ jsx8(X, { size: 12, "aria-hidden": "true" })
+        }
+      )
+    ] }, a.id))
+  ] });
+}
+
 // src/Input.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 
 // src/Input.css
 styleInject("@layer components {\n  :where(.cfi-ui-input, .cfi-ui-textarea) {\n    display: block;\n    width: 100%;\n    min-width: 0;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    transition: border-color var(--cfi-ui-transition-fast), background-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-input {\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n  }\n  .cfi-ui-textarea {\n    padding: 0.5rem 0.625rem;\n    line-height: var(--cfi-ui-leading-normal);\n    resize: vertical;\n    min-height: calc(var(--cfi-ui-control-height-md) * 1.5);\n  }\n  .cfi-ui-input[data-size=sm] {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: 0.5rem;\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-input[data-size=lg] {\n    height: var(--cfi-ui-control-height-lg);\n    padding-inline: 0.875rem;\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-input::placeholder,\n  .cfi-ui-textarea::placeholder {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-input:hover:not(:disabled),\n  .cfi-ui-textarea:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-input:disabled,\n  .cfi-ui-textarea:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-input:read-only:not(:disabled),\n  .cfi-ui-textarea:read-only:not(:disabled) {\n    background: var(--cfi-ui-surface-sunken);\n    border-color: var(--cfi-ui-border);\n  }\n  .cfi-ui-input[data-invalid],\n  .cfi-ui-textarea[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-input[type=number],\n  .cfi-ui-input[inputmode=decimal],\n  .cfi-ui-input[inputmode=numeric] {\n    font-variant-numeric: tabular-nums;\n    text-align: right;\n  }\n  .cfi-ui-input[type=number]::-webkit-outer-spin-button,\n  .cfi-ui-input[type=number]::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n  .cfi-ui-input[type=number] {\n    appearance: textfield;\n  }\n  :where(.cfi-ui-input-wrap) {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    background: var(--cfi-ui-surface);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-input-wrap:hover:not([data-disabled]) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-input-wrap:focus-within {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-input-wrap[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-input-wrap[data-disabled] {\n    background: var(--cfi-ui-surface-disabled);\n  }\n  .cfi-ui-input-wrap > .cfi-ui-input {\n    border: 0;\n    background: transparent;\n    border-radius: 0;\n    flex: 1 1 auto;\n  }\n  .cfi-ui-input-wrap > .cfi-ui-input:focus-visible {\n    outline: none;\n  }\n  .cfi-ui-input-wrap__affix {\n    display: inline-flex;\n    align-items: center;\n    flex: none;\n    padding-inline: 0.625rem;\n    color: var(--cfi-ui-content-muted);\n    font-size: var(--cfi-ui-text-sm);\n    white-space: nowrap;\n  }\n  .cfi-ui-input-wrap__affix > svg {\n    width: 1em;\n    height: 1em;\n    display: block;\n  }\n  .cfi-ui-input-wrap__affix:first-child {\n    padding-right: 0;\n  }\n  .cfi-ui-input-wrap__affix:last-child {\n    padding-left: 0;\n  }\n  .cfi-ui-input-wrap[data-size=sm] {\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-input-wrap[data-size=sm] > .cfi-ui-input {\n    height: var(--cfi-ui-control-height-sm);\n  }\n  .cfi-ui-input-wrap[data-size=lg] > .cfi-ui-input {\n    height: var(--cfi-ui-control-height-lg);\n  }\n}\n");
 
 // src/Input.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix, className, disabled, ...rest }, ref) {
-  const field = /* @__PURE__ */ jsx2(
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Input = forwardRef8(function Input2({ size = "md", invalid, prefix, suffix, className, disabled, ...rest }, ref) {
+  const field = /* @__PURE__ */ jsx9(
     "input",
     {
       ref,
@@ -119,7 +609,7 @@ var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix,
     }
   );
   if (!prefix && !suffix) return field;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       "data-size": size,
@@ -127,15 +617,15 @@ var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix,
       "data-disabled": disabled || void 0,
       className: cn("cfi-ui", "cfi-ui-input-wrap"),
       children: [
-        prefix && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-input-wrap__affix", children: prefix }),
+        prefix && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-input-wrap__affix", children: prefix }),
         field,
-        suffix && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-input-wrap__affix", children: suffix })
+        suffix && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-input-wrap__affix", children: suffix })
       ]
     }
   );
 });
-var Textarea = forwardRef2(function Textarea2({ invalid, className, rows = 3, ...rest }, ref) {
-  return /* @__PURE__ */ jsx2(
+var Textarea = forwardRef8(function Textarea2({ invalid, className, rows = 3, ...rest }, ref) {
+  return /* @__PURE__ */ jsx9(
     "textarea",
     {
       ref,
@@ -155,11 +645,11 @@ import { Children, cloneElement, createContext, isValidElement, useContext, useI
 styleInject('@layer components {\n  .cfi-ui-label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-label__required {\n    color: var(--cfi-ui-error);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-field__label {\n    justify-self: start;\n  }\n  .cfi-ui-field__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n    min-width: 0;\n  }\n  .cfi-ui-field__hint,\n  .cfi-ui-field__error {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-field__hint {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-field__error {\n    color: var(--cfi-ui-error-text);\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-field[data-orientation=horizontal] {\n    grid-template-columns: minmax(8rem, 12rem) 1fr;\n    align-items: start;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n    padding-top: 0.4375rem;\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-field[data-orientation=horizontal] {\n      grid-template-columns: 1fr;\n      gap: var(--cfi-ui-space-xs);\n    }\n    .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n      padding-top: 0;\n    }\n  }\n  .cfi-ui-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .cfi-ui-fieldset__legend {\n    padding: 0 0 var(--cfi-ui-space-sm);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    letter-spacing: var(--cfi-ui-tracking-caps);\n    text-transform: uppercase;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-fieldset__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  @media (max-width: 720px) {\n    .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body,\n    .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n      grid-template-columns: 1fr;\n    }\n  }\n}\n');
 
 // src/Field.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function Label({ required, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs3("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function Label3({ required, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs10("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
     children,
-    required && /* @__PURE__ */ jsx3("span", { className: "cfi-ui-label__required", "aria-hidden": "true", children: "*" })
+    required && /* @__PURE__ */ jsx10("span", { className: "cfi-ui-label__required", "aria-hidden": "true", children: "*" })
   ] });
 }
 var FieldContext = createContext(null);
@@ -182,19 +672,19 @@ function Field({
   const errorId = `${controlId}-error`;
   const invalid = error != null && error !== false && error !== "";
   const describedBy = invalid ? errorId : hint ? hintId : void 0;
-  return /* @__PURE__ */ jsx3(FieldContext.Provider, { value: { controlId, describedBy, invalid, required }, children: /* @__PURE__ */ jsxs3("div", { "data-orientation": orientation, className: cn("cfi-ui", "cfi-ui-field", className), children: [
-    /* @__PURE__ */ jsx3(Label, { htmlFor: controlId, required, className: "cfi-ui-field__label", children: label }),
-    /* @__PURE__ */ jsxs3("div", { className: "cfi-ui-field__body", children: [
-      /* @__PURE__ */ jsx3(FieldControl, { children }),
-      invalid ? /* @__PURE__ */ jsx3("p", { id: errorId, className: "cfi-ui-field__error", role: "alert", children: error }) : hint && /* @__PURE__ */ jsx3("p", { id: hintId, className: "cfi-ui-field__hint", children: hint })
+  return /* @__PURE__ */ jsx10(FieldContext.Provider, { value: { controlId, describedBy, invalid, required }, children: /* @__PURE__ */ jsxs10("div", { "data-orientation": orientation, className: cn("cfi-ui", "cfi-ui-field", className), children: [
+    /* @__PURE__ */ jsx10(Label3, { htmlFor: controlId, required, className: "cfi-ui-field__label", children: label }),
+    /* @__PURE__ */ jsxs10("div", { className: "cfi-ui-field__body", children: [
+      /* @__PURE__ */ jsx10(FieldControl, { children }),
+      invalid ? /* @__PURE__ */ jsx10("p", { id: errorId, className: "cfi-ui-field__error", role: "alert", children: error }) : hint && /* @__PURE__ */ jsx10("p", { id: hintId, className: "cfi-ui-field__hint", children: hint })
     ] })
   ] }) });
 }
 function FieldControl({ children }) {
   const ctx = useContext(FieldContext);
-  if (!ctx) return /* @__PURE__ */ jsx3(Fragment, { children });
+  if (!ctx) return /* @__PURE__ */ jsx10(Fragment2, { children });
   const only = Children.count(children) === 1 ? Children.toArray(children)[0] : null;
-  if (!only || !isValidElement(only)) return /* @__PURE__ */ jsx3(Fragment, { children });
+  if (!only || !isValidElement(only)) return /* @__PURE__ */ jsx10(Fragment2, { children });
   const props = only.props;
   return cloneElement(only, {
     id: props.id ?? ctx.controlId,
@@ -207,25 +697,25 @@ function FieldControl({ children }) {
   });
 }
 function Fieldset({ legend, columns = 1, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs3("fieldset", { "data-columns": columns, className: cn("cfi-ui", "cfi-ui-fieldset", className), ...rest, children: [
-    /* @__PURE__ */ jsx3("legend", { className: "cfi-ui-fieldset__legend", children: legend }),
-    /* @__PURE__ */ jsx3("div", { className: "cfi-ui-fieldset__body", children })
+  return /* @__PURE__ */ jsxs10("fieldset", { "data-columns": columns, className: cn("cfi-ui", "cfi-ui-fieldset", className), ...rest, children: [
+    /* @__PURE__ */ jsx10("legend", { className: "cfi-ui-fieldset__legend", children: legend }),
+    /* @__PURE__ */ jsx10("div", { className: "cfi-ui-fieldset__body", children })
   ] });
 }
 
 // src/Checkbox.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
-import { Check, Minus } from "lucide-react";
+import { Check as Check3, Minus } from "lucide-react";
 
 // src/Checkbox.css
 styleInject("@layer components {\n  .cfi-ui-checkbox {\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    padding: 0;\n    background: var(--cfi-ui-input-bg);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-fast), border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-checkbox:hover:not(:disabled) {\n    border-color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-checkbox[data-state=checked],\n  .cfi-ui-checkbox[data-state=indeterminate] {\n    background: var(--cfi-ui-accent);\n    border-color: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-fg);\n  }\n  .cfi-ui-checkbox[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-checkbox:disabled {\n    cursor: not-allowed;\n    background: var(--cfi-ui-surface-disabled);\n    border-color: var(--cfi-ui-border);\n    opacity: 0.65;\n  }\n  .cfi-ui-checkbox__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .cfi-ui-checkbox__indicator > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    stroke-width: 3;\n    display: block;\n  }\n  .cfi-ui-checkbox-row {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--cfi-ui-space-sm);\n  }\n  .cfi-ui-checkbox-row > .cfi-ui-checkbox {\n    margin-top: 0.1875rem;\n  }\n  .cfi-ui-checkbox-row__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-checkbox-row__label {\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n  }\n  .cfi-ui-checkbox-row__description {\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
 
 // src/Checkbox.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var Checkbox = forwardRef3(
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var Checkbox = forwardRef9(
   function Checkbox2({ label, description, invalid, className, id, ...rest }, ref) {
-    const box = /* @__PURE__ */ jsx4(
+    const box = /* @__PURE__ */ jsx11(
       RadixCheckbox.Root,
       {
         ref,
@@ -234,96 +724,63 @@ var Checkbox = forwardRef3(
         "data-invalid": invalid || void 0,
         className: cn("cfi-ui", "cfi-ui-checkbox", !label && className),
         ...rest,
-        children: /* @__PURE__ */ jsx4(RadixCheckbox.Indicator, { className: "cfi-ui-checkbox__indicator", children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx4(Minus, {}) : /* @__PURE__ */ jsx4(Check, {}) })
+        children: /* @__PURE__ */ jsx11(RadixCheckbox.Indicator, { className: "cfi-ui-checkbox__indicator", children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx11(Minus, {}) : /* @__PURE__ */ jsx11(Check3, {}) })
       }
     );
     if (!label) return box;
-    return /* @__PURE__ */ jsxs4("div", { className: cn("cfi-ui", "cfi-ui-checkbox-row", className), children: [
+    return /* @__PURE__ */ jsxs11("div", { className: cn("cfi-ui", "cfi-ui-checkbox-row", className), children: [
       box,
-      /* @__PURE__ */ jsxs4("div", { className: "cfi-ui-checkbox-row__text", children: [
-        /* @__PURE__ */ jsx4("label", { htmlFor: id, className: "cfi-ui-checkbox-row__label", children: label }),
-        description && /* @__PURE__ */ jsx4("span", { className: "cfi-ui-checkbox-row__description", children: description })
+      /* @__PURE__ */ jsxs11("div", { className: "cfi-ui-checkbox-row__text", children: [
+        /* @__PURE__ */ jsx11("label", { htmlFor: id, className: "cfi-ui-checkbox-row__label", children: label }),
+        description && /* @__PURE__ */ jsx11("span", { className: "cfi-ui-checkbox-row__description", children: description })
       ] })
     ] });
   }
 );
 
-// src/Switch.tsx
-import { forwardRef as forwardRef4 } from "react";
-import * as RadixSwitch from "@radix-ui/react-switch";
-
-// src/Switch.css
-styleInject("@layer components {\n  .cfi-ui-switch {\n    flex: none;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 2rem;\n    height: 1.125rem;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-switch-bg);\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-switch[data-state=checked] {\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-switch:disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n  .cfi-ui-switch__thumb {\n    display: block;\n    width: 0.875rem;\n    height: 0.875rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: #ffffff;\n    box-shadow: var(--cfi-ui-shadow-sm);\n    transform: translateX(0.125rem);\n    transition: transform var(--cfi-ui-transition-base);\n    will-change: transform;\n  }\n  .cfi-ui-switch__thumb[data-state=checked] {\n    transform: translateX(1rem);\n  }\n  .cfi-ui-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-switch-row[data-label-position=end] .cfi-ui-switch-row__text {\n    flex: 1 1 auto;\n  }\n  .cfi-ui-switch-row__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-switch-row__label {\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n  }\n  .cfi-ui-switch-row__description {\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
-
-// src/Switch.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var Switch = forwardRef4(
-  function Switch2({ label, description, labelPosition = "end", className, id, ...rest }, ref) {
-    const control = /* @__PURE__ */ jsx5(
-      RadixSwitch.Root,
-      {
-        ref,
-        id,
-        className: cn("cfi-ui", "cfi-ui-switch", !label && className),
-        ...rest,
-        children: /* @__PURE__ */ jsx5(RadixSwitch.Thumb, { className: "cfi-ui-switch__thumb" })
-      }
-    );
-    if (!label) return control;
-    return /* @__PURE__ */ jsxs5("div", { "data-label-position": labelPosition, className: cn("cfi-ui", "cfi-ui-switch-row", className), children: [
-      labelPosition === "start" && control,
-      /* @__PURE__ */ jsxs5("div", { className: "cfi-ui-switch-row__text", children: [
-        /* @__PURE__ */ jsx5("label", { htmlFor: id, className: "cfi-ui-switch-row__label", children: label }),
-        description && /* @__PURE__ */ jsx5("span", { className: "cfi-ui-switch-row__description", children: description })
-      ] }),
-      labelPosition === "end" && control
-    ] });
-  }
-);
-
 // src/Slider.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import * as RadixSlider from "@radix-ui/react-slider";
 
 // src/Slider.css
 styleInject("@layer components {\n  .cfi-ui-slider-wrap {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-md);\n    width: 100%;\n  }\n  .cfi-ui-slider {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1 1 auto;\n    height: 1.25rem;\n    touch-action: none;\n    user-select: none;\n  }\n  .cfi-ui-slider[data-orientation=vertical] {\n    flex-direction: column;\n    width: 1.25rem;\n    height: 8rem;\n  }\n  .cfi-ui-slider__track {\n    position: relative;\n    flex-grow: 1;\n    height: 0.25rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-slider[data-orientation=vertical] .cfi-ui-slider__track {\n    width: 0.25rem;\n    height: auto;\n  }\n  .cfi-ui-slider__range {\n    position: absolute;\n    height: 100%;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-slider[data-orientation=vertical] .cfi-ui-slider__range {\n    width: 100%;\n    height: auto;\n  }\n  .cfi-ui-slider__thumb {\n    display: block;\n    width: 1rem;\n    height: 1rem;\n    border: 1px solid var(--cfi-ui-accent);\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface);\n    box-shadow: var(--cfi-ui-shadow-sm);\n    cursor: grab;\n  }\n  .cfi-ui-slider__thumb:active {\n    cursor: grabbing;\n  }\n  .cfi-ui-slider[data-disabled] {\n    opacity: 0.55;\n  }\n  .cfi-ui-slider[data-disabled] .cfi-ui-slider__thumb {\n    cursor: not-allowed;\n  }\n  .cfi-ui-slider__value {\n    flex: none;\n    min-width: 3.5ch;\n    font-size: var(--cfi-ui-text-sm);\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content-muted);\n    text-align: right;\n  }\n}\n");
 
 // src/Slider.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var Slider = forwardRef5(
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var Slider = forwardRef10(
   function Slider2({ showValue = false, formatValue, className, ...rest }, ref) {
     const values = rest.value ?? rest.defaultValue ?? [rest.min ?? 0];
     const format = formatValue ?? ((v) => String(v));
-    return /* @__PURE__ */ jsxs6("div", { className: cn("cfi-ui", "cfi-ui-slider-wrap", className), children: [
-      /* @__PURE__ */ jsxs6(RadixSlider.Root, { ref, className: "cfi-ui-slider", ...rest, children: [
-        /* @__PURE__ */ jsx6(RadixSlider.Track, { className: "cfi-ui-slider__track", children: /* @__PURE__ */ jsx6(RadixSlider.Range, { className: "cfi-ui-slider__range" }) }),
-        values.map((_, i) => /* @__PURE__ */ jsx6(RadixSlider.Thumb, { className: "cfi-ui-slider__thumb" }, i))
+    return /* @__PURE__ */ jsxs12("div", { className: cn("cfi-ui", "cfi-ui-slider-wrap", className), children: [
+      /* @__PURE__ */ jsxs12(RadixSlider.Root, { ref, className: "cfi-ui-slider", ...rest, children: [
+        /* @__PURE__ */ jsx12(RadixSlider.Track, { className: "cfi-ui-slider__track", children: /* @__PURE__ */ jsx12(RadixSlider.Range, { className: "cfi-ui-slider__range" }) }),
+        values.map((_, i) => /* @__PURE__ */ jsx12(RadixSlider.Thumb, { className: "cfi-ui-slider__thumb" }, i))
       ] }),
-      showValue && /* @__PURE__ */ jsx6("output", { className: "cfi-ui-slider__value", children: values.map(format).join(" \u2013 ") })
+      showValue && /* @__PURE__ */ jsx12("output", { className: "cfi-ui-slider__value", children: values.map(format).join(" \u2013 ") })
     ] });
   }
 );
 
 // src/Dialog.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { X as X2 } from "lucide-react";
 
 // src/Dialog.css
 styleInject("@layer components {\n  .cfi-ui-dialog__overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--cfi-ui-z-overlay);\n    background: var(--cfi-ui-overlay);\n    animation: cfi-ui-fade-in var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog {\n    position: fixed;\n    z-index: var(--cfi-ui-z-modal);\n    display: flex;\n    flex-direction: column;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-dialog[data-side=center] {\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: calc(100vw - 2 * var(--cfi-ui-space-md));\n    max-height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n    border-radius: var(--cfi-ui-radius-lg);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog[data-side=center][data-size=sm] {\n    max-width: 26rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=md] {\n    max-width: 34rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=lg] {\n    max-width: 48rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=xl] {\n    max-width: 64rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=full] {\n    max-width: none;\n    width: calc(100vw - 2 * var(--cfi-ui-space-xl));\n    height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n    max-height: none;\n  }\n  .cfi-ui-dialog[data-side=right],\n  .cfi-ui-dialog[data-side=left] {\n    top: 0;\n    bottom: 0;\n    height: 100vh;\n    max-height: 100vh;\n    width: calc(100vw - var(--cfi-ui-space-xl));\n    border-radius: 0;\n    border: 0;\n  }\n  .cfi-ui-dialog[data-side=right] {\n    right: 0;\n    border-right: 0;\n    animation: cfi-ui-slide-in-right var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog[data-side=left] {\n    left: 0;\n    border-left: 0;\n    animation: cfi-ui-slide-in-left var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog[data-side=right][data-size=sm],\n  .cfi-ui-dialog[data-side=left][data-size=sm] {\n    max-width: 22rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=md],\n  .cfi-ui-dialog[data-side=left][data-size=md] {\n    max-width: 24rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=lg],\n  .cfi-ui-dialog[data-side=left][data-size=lg] {\n    max-width: 42rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=xl],\n  .cfi-ui-dialog[data-side=left][data-size=xl] {\n    max-width: 56rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=full],\n  .cfi-ui-dialog[data-side=left][data-size=full] {\n    max-width: none;\n  }\n  .cfi-ui-dialog__header {\n    flex: none;\n    display: grid;\n    gap: var(--cfi-ui-space-xs);\n    padding: var(--cfi-ui-space-md) 3rem var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-dialog__title {\n    margin: 0;\n    font-size: var(--cfi-ui-text-lg);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-tight);\n    letter-spacing: var(--cfi-letter-spacing-tight, -0.015em);\n    color: var(--cfi-ui-content);\n    text-wrap: balance;\n  }\n  .cfi-ui-sheet__title {\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-dialog__description {\n    margin: 0;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n  :where(.cfi-ui-dialog__body) {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-dialog__footer {\n    flex: none;\n    padding: var(--cfi-ui-space-md);\n    border-top: 1px solid var(--cfi-ui-border);\n    background: var(--cfi-ui-surface-sunken);\n  }\n  .cfi-ui-dialog[data-side=center] .cfi-ui-dialog__footer {\n    border-bottom-left-radius: var(--cfi-ui-radius-lg);\n    border-bottom-right-radius: var(--cfi-ui-radius-lg);\n  }\n  .cfi-ui-dialog__close {\n    position: absolute;\n    top: var(--cfi-ui-space-sm);\n    right: var(--cfi-ui-space-sm);\n  }\n  .cfi-ui-dialog:not(:has(.cfi-ui-dialog__header)) .cfi-ui-dialog__body {\n    padding-right: 3rem;\n  }\n}\n");
 
 // src/Dialog.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var Dialog = RadixDialog.Root;
 var DialogRoot = RadixDialog.Root;
 var DialogTrigger = RadixDialog.Trigger;
 var DialogClose = RadixDialog.Close;
 var DialogPortal = RadixDialog.Portal;
-var DialogContent = forwardRef6(
+var DialogContent = forwardRef11(
   function DialogContent2({ size = "md", side = "center", hideClose = false, closeLabel = "Close", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs7(RadixDialog.Portal, { children: [
-      /* @__PURE__ */ jsx7(RadixDialog.Overlay, { className: "cfi-ui-dialog__overlay", "data-cfi-ui-portal": "" }),
-      /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs13(RadixDialog.Portal, { children: [
+      /* @__PURE__ */ jsx13(RadixDialog.Overlay, { className: "cfi-ui-dialog__overlay", "data-cfi-ui-portal": "" }),
+      /* @__PURE__ */ jsxs13(
         RadixDialog.Content,
         {
           ref,
@@ -334,12 +791,12 @@ var DialogContent = forwardRef6(
           ...rest,
           children: [
             children,
-            !hideClose && /* @__PURE__ */ jsx7(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+            !hideClose && /* @__PURE__ */ jsx13(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx13(
               IconButton,
               {
                 variant: "ghost",
                 size: "sm",
-                icon: /* @__PURE__ */ jsx7(X, {}),
+                icon: /* @__PURE__ */ jsx13(X2, {}),
                 label: closeLabel,
                 className: "cfi-ui-dialog__close"
               }
@@ -350,389 +807,127 @@ var DialogContent = forwardRef6(
     ] });
   }
 );
-function DialogHeader({ className, ...rest }) {
-  return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__header", className), ...rest });
-}
-var DialogTitle = forwardRef6(function DialogTitle2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx7(RadixDialog.Title, { ref, className: cn("cfi-ui-dialog__title", className), ...rest });
-});
-var DialogDescription = forwardRef6(function DialogDescription2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx7(RadixDialog.Description, { ref, className: cn("cfi-ui-dialog__description", className), ...rest });
-});
-function DialogBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__body", className), ...rest });
-}
-function DialogFooter({ className, ...rest }) {
-  return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__footer", className), ...rest });
-}
-function Modal({
-  open,
-  onOpenChange,
-  title,
-  description,
-  size = "md",
-  side = "center",
-  footer,
-  hideClose,
-  dismissible = true,
-  className,
-  children
-}) {
-  const block = dismissible ? void 0 : (e) => e.preventDefault();
-  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(
-    DialogContent,
-    {
-      size,
-      side,
-      hideClose,
-      className,
-      onEscapeKeyDown: block,
-      onPointerDownOutside: block,
-      onInteractOutside: block,
-      children: [
-        /* @__PURE__ */ jsxs7(DialogHeader, { children: [
-          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
-          description && /* @__PURE__ */ jsx7(DialogDescription, { children: description })
-        ] }),
-        /* @__PURE__ */ jsx7(DialogBody, { children }),
-        footer && /* @__PURE__ */ jsx7(DialogFooter, { children: footer })
-      ]
-    }
-  ) });
-}
-function SideModal({ side = "right", size = "md", ...rest }) {
-  return /* @__PURE__ */ jsx7(Modal, { side, size, ...rest });
-}
-var Sheet = RadixDialog.Root;
-var SheetTrigger = RadixDialog.Trigger;
-var SheetClose = RadixDialog.Close;
-var SheetPortal = RadixDialog.Portal;
-var SheetContent = forwardRef6(
-  function SheetContent2({ side = "right", ...rest }, ref) {
-    return /* @__PURE__ */ jsx7(DialogContent, { ref, side, ...rest });
-  }
-);
-var SheetHeader = DialogHeader;
-var SheetTitle = forwardRef6(function SheetTitle2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx7(DialogTitle, { ref, className: cn("cfi-ui-sheet__title", className), ...rest });
-});
-var SheetDescription = DialogDescription;
-var SheetBody = DialogBody;
-var SheetFooter = DialogFooter;
-function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  destructive = true,
-  loading = false,
-  onConfirm,
-  children
-}) {
-  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(
-    DialogContent,
-    {
-      size: "sm",
-      role: "alertdialog",
-      hideClose: true,
-      onPointerDownOutside: (e) => e.preventDefault(),
-      onInteractOutside: (e) => e.preventDefault(),
-      children: [
-        /* @__PURE__ */ jsxs7(DialogHeader, { children: [
-          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
-          description && /* @__PURE__ */ jsx7(DialogDescription, { children: description })
-        ] }),
-        children && /* @__PURE__ */ jsx7(DialogBody, { children }),
-        /* @__PURE__ */ jsx7(DialogFooter, { children: /* @__PURE__ */ jsxs7(ButtonGroup, { children: [
-          /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { autoFocus: true, disabled: loading, children: cancelLabel }) }),
-          /* @__PURE__ */ jsx7(
-            Button,
-            {
-              variant: destructive ? "danger" : "primary",
-              loading,
-              onClick: onConfirm,
-              children: confirmLabel
-            }
-          )
-        ] }) })
-      ]
-    }
-  ) });
-}
-
-// src/Popover.tsx
-import { forwardRef as forwardRef7 } from "react";
-import * as RadixPopover from "@radix-ui/react-popover";
-
-// src/Floating.css
-styleInject("@layer components {\n  .cfi-ui-floating {\n    z-index: var(--cfi-ui-z-popover);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n    max-height: var(--radix-popper-available-height, none);\n    overflow: hidden auto;\n  }\n  .cfi-ui-floating__arrow {\n    fill: var(--cfi-ui-surface-raised);\n    filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n  }\n  .cfi-ui-popover {\n    padding: var(--cfi-ui-space-md);\n    min-width: 12rem;\n  }\n  .cfi-ui-popover[data-flush] {\n    padding: 0;\n  }\n  .cfi-ui-menu {\n    z-index: var(--cfi-ui-z-dropdown);\n    min-width: 11rem;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-menu__item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-menu__item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-menu__item[data-variant=danger] {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n    background: var(--cfi-ui-error-soft);\n  }\n  .cfi-ui-menu__item > svg,\n  .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-menu__icon {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n    color: inherit;\n  }\n  .cfi-ui-menu__shortcut {\n    margin-left: auto;\n    padding-left: var(--cfi-ui-space-md);\n    font-family: var(--cfi-ui-font-mono);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-menu__label {\n    padding: 0.375rem 0.5rem 0.25rem;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    letter-spacing: var(--cfi-ui-tracking-caps);\n    text-transform: uppercase;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__separator {\n    height: 1px;\n    margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-select-content {\n    z-index: var(--cfi-ui-z-dropdown);\n    padding: var(--cfi-ui-space-xs);\n    min-width: var(--radix-select-trigger-width, 11rem);\n  }\n  .cfi-ui-select-viewport {\n    max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n  }\n  .cfi-ui-select-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-select-item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-select-item[data-state=checked] {\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-select-item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select-item__indicator {\n    display: inline-flex;\n    flex: none;\n    width: 0.875rem;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-select-item__indicator > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-select-empty {\n    padding: var(--cfi-ui-space-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-tooltip {\n    z-index: var(--cfi-ui-z-tooltip);\n    max-width: 20rem;\n    padding: 0.3125rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-content);\n    color: var(--cfi-ui-surface);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    box-shadow: var(--cfi-ui-shadow-md);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-tooltip__arrow {\n    fill: var(--cfi-ui-content);\n  }\n}\n");
-
-// src/Popover.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var PopoverRoot = RadixPopover.Root;
-var PopoverTrigger = RadixPopover.Trigger;
-var PopoverAnchor = RadixPopover.Anchor;
-var PopoverClose = RadixPopover.Close;
-var PopoverContent = forwardRef7(function PopoverContent2({ showArrow = false, flush = false, className, children, sideOffset = 6, collisionPadding = 8, ...rest }, ref) {
-  return /* @__PURE__ */ jsx8(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs8(
-    RadixPopover.Content,
-    {
-      ref,
-      sideOffset,
-      collisionPadding,
-      "data-cfi-ui-portal": "",
-      "data-flush": flush || void 0,
-      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-popover", className),
-      ...rest,
-      children: [
-        children,
-        showArrow && /* @__PURE__ */ jsx8(RadixPopover.Arrow, { className: "cfi-ui-floating__arrow", width: 11, height: 5 })
-      ]
-    }
-  ) });
-});
-function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }) {
-  return /* @__PURE__ */ jsxs8(PopoverRoot, { open, onOpenChange, defaultOpen, modal, children: [
-    /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx8(PopoverContent, { ...content, children })
-  ] });
-}
-
-// src/Menu.tsx
-import { Fragment as Fragment2, forwardRef as forwardRef8 } from "react";
-import * as RadixMenu from "@radix-ui/react-dropdown-menu";
-import { Check as Check2 } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var MenuRoot = RadixMenu.Root;
-var MenuTrigger = RadixMenu.Trigger;
-var MenuGroup = RadixMenu.Group;
-var MenuSub = RadixMenu.Sub;
-var MenuRadioGroup = RadixMenu.RadioGroup;
-var MenuContent = forwardRef8(function MenuContent2({ className, sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
-  return /* @__PURE__ */ jsx9(RadixMenu.Portal, { children: /* @__PURE__ */ jsx9(
-    RadixMenu.Content,
-    {
-      ref,
-      sideOffset,
-      collisionPadding,
-      "data-cfi-ui-portal": "",
-      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
-      ...rest
-    }
-  ) });
-});
-var MenuItem = forwardRef8(
-  function MenuItem2({ icon, shortcut, variant = "default", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs9(
-      RadixMenu.Item,
-      {
-        ref,
-        "data-variant": variant,
-        className: cn("cfi-ui-menu__item", className),
-        ...rest,
-        children: [
-          icon && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-menu__icon", children: icon }),
-          /* @__PURE__ */ jsx9("span", { children }),
-          shortcut && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-menu__shortcut", children: shortcut })
-        ]
-      }
-    );
-  }
-);
-var MenuCheckboxItem = forwardRef8(function MenuCheckboxItem2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs9(RadixMenu.CheckboxItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
-    /* @__PURE__ */ jsx9("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx9(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, {}) }) }),
-    /* @__PURE__ */ jsx9("span", { children })
-  ] });
+function DialogHeader({ className, ...rest }) {
+  return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__header", className), ...rest });
+}
+var DialogTitle = forwardRef11(function DialogTitle2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13(RadixDialog.Title, { ref, className: cn("cfi-ui-dialog__title", className), ...rest });
 });
-var MenuRadioItem = forwardRef8(function MenuRadioItem2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs9(RadixMenu.RadioItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
-    /* @__PURE__ */ jsx9("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx9(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, {}) }) }),
-    /* @__PURE__ */ jsx9("span", { children })
-  ] });
+var DialogDescription = forwardRef11(function DialogDescription2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13(RadixDialog.Description, { ref, className: cn("cfi-ui-dialog__description", className), ...rest });
 });
-function MenuLabel({ className, ...rest }) {
-  return /* @__PURE__ */ jsx9(RadixMenu.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
+function DialogBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__body", className), ...rest });
 }
-function MenuSeparator({
+function DialogFooter({ className, ...rest }) {
+  return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__footer", className), ...rest });
+}
+function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  size = "md",
+  side = "center",
+  footer,
+  hideClose,
+  dismissible = true,
   className,
-  ...rest
+  children
 }) {
-  return /* @__PURE__ */ jsx9(RadixMenu.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
-}
-var MenuSubTrigger = forwardRef8(function MenuSubTrigger2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx9(RadixMenu.SubTrigger, { ref, className: cn("cfi-ui-menu__item", className), ...rest });
-});
-var MenuSubContent = forwardRef8(function MenuSubContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx9(RadixMenu.Portal, { children: /* @__PURE__ */ jsx9(
-    RadixMenu.SubContent,
-    {
-      ref,
-      "data-cfi-ui-portal": "",
-      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
-      ...rest
-    }
-  ) });
-});
-function Menu({ trigger, items, align = "end", side = "bottom", className }) {
-  return /* @__PURE__ */ jsxs9(MenuRoot, { children: [
-    /* @__PURE__ */ jsx9(MenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx9(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      item.separatorBefore && /* @__PURE__ */ jsx9(MenuSeparator, {}),
-      /* @__PURE__ */ jsx9(
-        MenuItem,
-        {
-          icon: item.icon,
-          shortcut: item.shortcut,
-          variant: item.variant,
-          disabled: item.disabled,
-          onSelect: item.onSelect,
-          children: item.label
-        }
-      )
-    ] }, item.id)) })
-  ] });
-}
-
-// src/Select.tsx
-import { forwardRef as forwardRef9 } from "react";
-import * as RadixSelect from "@radix-ui/react-select";
-import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
-
-// src/Select.css
-styleInject("@layer components {\n  :where(.cfi-ui-select) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-sm);\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-select--full {\n    width: 100%;\n  }\n  .cfi-ui-select:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-select:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-select[data-size=sm] {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: 0.5rem;\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-select[data-size=lg] {\n    height: var(--cfi-ui-control-height-lg);\n    padding-inline: 0.875rem;\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-select[data-placeholder] .cfi-ui-select__value {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-select__value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: left;\n  }\n  .cfi-ui-select__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-select__chevron > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-select-scroll {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 1.25rem;\n    color: var(--cfi-ui-content-muted);\n    cursor: default;\n  }\n  .cfi-ui-select-scroll > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n}\n");
-
-// src/Select.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var SelectRoot = RadixSelect.Root;
-var SelectValue = RadixSelect.Value;
-var SelectGroup = RadixSelect.Group;
-var SelectTrigger = forwardRef9(
-  function SelectTrigger2({ size = "md", invalid, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs10(
-      RadixSelect.Trigger,
-      {
-        ref,
-        "data-size": size,
-        "data-invalid": invalid || void 0,
-        "aria-invalid": invalid || void 0,
-        className: cn("cfi-ui", "cfi-ui-select", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx10("span", { className: "cfi-ui-select__value", children }),
-          /* @__PURE__ */ jsx10(RadixSelect.Icon, { className: "cfi-ui-select__chevron", children: /* @__PURE__ */ jsx10(ChevronDown, {}) })
-        ]
-      }
-    );
-  }
-);
-var SelectContent = forwardRef9(function SelectContent2({ className, children, position = "popper", sideOffset = 4, ...rest }, ref) {
-  return /* @__PURE__ */ jsx10(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs10(
-    RadixSelect.Content,
+  const block = dismissible ? void 0 : (e) => e.preventDefault();
+  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(
+    DialogContent,
     {
-      ref,
-      position,
-      sideOffset,
-      "data-cfi-ui-portal": "",
-      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-select-content", className),
-      ...rest,
+      size,
+      side,
+      hideClose,
+      className,
+      onEscapeKeyDown: block,
+      onPointerDownOutside: block,
+      onInteractOutside: block,
       children: [
-        /* @__PURE__ */ jsx10(RadixSelect.ScrollUpButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx10(ChevronUp, {}) }),
-        /* @__PURE__ */ jsx10(RadixSelect.Viewport, { className: "cfi-ui-select-viewport", children }),
-        /* @__PURE__ */ jsx10(RadixSelect.ScrollDownButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx10(ChevronDown, {}) })
+        /* @__PURE__ */ jsxs13(DialogHeader, { children: [
+          /* @__PURE__ */ jsx13(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx13(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx13(DialogBody, { children }),
+        footer && /* @__PURE__ */ jsx13(DialogFooter, { children: footer })
       ]
     }
   ) });
-});
-var SelectItem = forwardRef9(function SelectItem2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs10(RadixSelect.Item, { ref, className: cn("cfi-ui-select-item", className), ...rest, children: [
-    /* @__PURE__ */ jsx10("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx10(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx10(Check3, {}) }) }),
-    /* @__PURE__ */ jsx10(RadixSelect.ItemText, { children })
-  ] });
-});
-function SelectLabel({ className, ...rest }) {
-  return /* @__PURE__ */ jsx10(RadixSelect.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
 }
-function SelectSeparator({
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx10(RadixSelect.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
+function SideModal({ side = "right", size = "md", ...rest }) {
+  return /* @__PURE__ */ jsx13(Modal, { side, size, ...rest });
 }
-function Select({
-  options,
-  value,
-  onValueChange,
-  defaultValue,
-  placeholder = "Select...",
-  size = "md",
-  invalid,
-  disabled,
-  required,
-  name,
-  id,
-  className,
-  fullWidth = true,
-  emptyLabel = "No options",
+var Sheet = RadixDialog.Root;
+var SheetTrigger = RadixDialog.Trigger;
+var SheetClose = RadixDialog.Close;
+var SheetPortal = RadixDialog.Portal;
+var SheetContent = forwardRef11(
+  function SheetContent2({ side = "right", ...rest }, ref) {
+    return /* @__PURE__ */ jsx13(DialogContent, { ref, side, ...rest });
+  }
+);
+var SheetHeader = DialogHeader;
+var SheetTitle = forwardRef11(function SheetTitle2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13(DialogTitle, { ref, className: cn("cfi-ui-sheet__title", className), ...rest });
+});
+var SheetDescription = DialogDescription;
+var SheetBody = DialogBody;
+var SheetFooter = DialogFooter;
+function ConfirmDialog({
+  open,
   onOpenChange,
-  onBlur,
-  ...aria
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = true,
+  loading = false,
+  onConfirm,
+  children
 }) {
-  const groups = [];
-  for (const option of options) {
-    const existing = groups.find((g) => g.name === option.group);
-    if (existing) existing.options.push(option);
-    else groups.push({ name: option.group, options: [option] });
-  }
-  return /* @__PURE__ */ jsxs10(
-    SelectRoot,
+  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(
+    DialogContent,
     {
-      value,
-      onValueChange,
-      defaultValue,
-      disabled,
-      required,
-      name,
-      onOpenChange,
+      size: "sm",
+      role: "alertdialog",
+      hideClose: true,
+      onPointerDownOutside: (e) => e.preventDefault(),
+      onInteractOutside: (e) => e.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx10(
-          SelectTrigger,
-          {
-            id,
-            size,
-            invalid,
-            className: cn(fullWidth && "cfi-ui-select--full", className),
-            onBlur,
-            ...aria,
-            children: /* @__PURE__ */ jsx10(SelectValue, { placeholder })
-          }
-        ),
-        /* @__PURE__ */ jsxs10(SelectContent, { children: [
-          groups.map(
-            (group, i) => group.name ? /* @__PURE__ */ jsxs10(SelectGroup, { children: [
-              i > 0 && /* @__PURE__ */ jsx10(SelectSeparator, {}),
-              /* @__PURE__ */ jsx10(SelectLabel, { children: group.name }),
-              group.options.map((o) => /* @__PURE__ */ jsx10(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
-            ] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx10(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
-          ),
-          options.length === 0 && /* @__PURE__ */ jsx10("p", { className: "cfi-ui-select-empty", children: emptyLabel })
-        ] })
+        /* @__PURE__ */ jsxs13(DialogHeader, { children: [
+          /* @__PURE__ */ jsx13(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx13(DialogDescription, { children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx13(DialogBody, { children }),
+        /* @__PURE__ */ jsx13(DialogFooter, { children: /* @__PURE__ */ jsxs13(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx13(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { autoFocus: true, disabled: loading, children: cancelLabel }) }),
+          /* @__PURE__ */ jsx13(
+            Button,
+            {
+              variant: destructive ? "danger" : "primary",
+              loading,
+              onClick: onConfirm,
+              children: confirmLabel
+            }
+          )
+        ] }) })
       ]
     }
-  );
+  ) });
 }
 
 // src/CreatableSelect.tsx
-import { useMemo, useState } from "react";
+import { useMemo as useMemo2, useState as useState2 } from "react";
 import { Plus } from "lucide-react";
 
 // src/CreatableSelect.css
 styleInject("@layer components {\n  :where(.cfi-creatable) {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n  }\n  :where(.cfi-creatable__select) {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n  :where(.cfi-creatable) > :where(button) {\n    flex: 0 0 auto;\n  }\n}\n");
 
 // src/CreatableSelect.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function normalize(value) {
   return value.trim().toLowerCase();
 }
@@ -757,16 +952,16 @@ function CreatableSelect({
   disabled,
   ...select
 }) {
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState("");
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState(null);
-  const [created, setCreated] = useState([]);
-  const merged = useMemo(() => {
+  const [open, setOpen] = useState2(false);
+  const [draft, setDraft] = useState2("");
+  const [pending, setPending] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [created, setCreated] = useState2([]);
+  const merged = useMemo2(() => {
     const seen = new Set(options.map((o) => o.value));
     return [...options, ...created.filter((o) => !seen.has(o.value))];
   }, [options, created]);
-  const match = useMemo(() => {
+  const match = useMemo2(() => {
     const wanted = normalize(draft);
     if (wanted === "") return null;
     return merged.find((o) => {
@@ -801,20 +996,20 @@ function CreatableSelect({
       setPending(false);
     }
   }
-  return /* @__PURE__ */ jsxs11("div", { className: cn("cfi-creatable", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "cfi-creatable__select", children: /* @__PURE__ */ jsx11(Select, { ...select, options: merged, onValueChange, disabled }) }),
-    showAdd && /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs14("div", { className: cn("cfi-creatable", className), children: [
+    /* @__PURE__ */ jsx14("div", { className: "cfi-creatable__select", children: /* @__PURE__ */ jsx14(Select, { ...select, options: merged, onValueChange, disabled }) }),
+    showAdd && /* @__PURE__ */ jsx14(
       IconButton,
       {
         type: "button",
         variant: "secondary",
         size: select.size ?? "md",
-        icon: /* @__PURE__ */ jsx11(Plus, { "aria-hidden": "true" }),
+        icon: /* @__PURE__ */ jsx14(Plus, { "aria-hidden": "true" }),
         label: addLabel,
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx14(
       Modal,
       {
         open,
@@ -822,9 +1017,9 @@ function CreatableSelect({
         title: createTitle,
         description: createDescription,
         size: "sm",
-        footer: /* @__PURE__ */ jsxs11(ButtonGroup, { children: [
-          /* @__PURE__ */ jsx11(Button, { type: "button", variant: "secondary", onClick: close, disabled: pending, children: createCancelLabel }),
-          /* @__PURE__ */ jsx11(
+        footer: /* @__PURE__ */ jsxs14(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx14(Button, { type: "button", variant: "secondary", onClick: close, disabled: pending, children: createCancelLabel }),
+          /* @__PURE__ */ jsx14(
             Button,
             {
               type: "button",
@@ -835,7 +1030,7 @@ function CreatableSelect({
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsxs11(
+        children: /* @__PURE__ */ jsxs14(
           "form",
           {
             onSubmit: (event) => {
@@ -843,14 +1038,14 @@ function CreatableSelect({
               void submit();
             },
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx14(
                 Field,
                 {
                   label: createFieldLabel,
                   required: true,
                   error,
                   hint: match ? duplicateHint : void 0,
-                  children: /* @__PURE__ */ jsx11(
+                  children: /* @__PURE__ */ jsx14(
                     Input,
                     {
                       value: draft,
@@ -862,7 +1057,7 @@ function CreatableSelect({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx11("button", { type: "submit", hidden: true, "aria-hidden": "true", tabIndex: -1 })
+              /* @__PURE__ */ jsx14("button", { type: "submit", hidden: true, "aria-hidden": "true", tabIndex: -1 })
             ]
           }
         )
@@ -872,14 +1067,14 @@ function CreatableSelect({
 }
 
 // src/Combobox.tsx
-import { useEffect, useId as useId2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-import { Check as Check4, ChevronDown as ChevronDown2, Search, X as X2 } from "lucide-react";
+import { useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+import { Check as Check4, ChevronDown as ChevronDown3, Search, X as X3 } from "lucide-react";
 
 // src/Combobox.css
 styleInject("@layer components {\n  .cfi-ui-combobox {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n  }\n  .cfi-ui-combobox--full {\n    display: flex;\n    width: 100%;\n  }\n  :where(.cfi-ui-combobox__trigger) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-combobox__trigger:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-combobox__trigger:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-combobox__trigger[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-combobox__trigger[data-size=sm] {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: 0.5rem;\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-combobox__trigger[data-size=lg] {\n    height: var(--cfi-ui-control-height-lg);\n    padding-inline: 0.875rem;\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-combobox__trigger[data-placeholder] .cfi-ui-combobox__value {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: left;\n  }\n  .cfi-ui-combobox__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__chevron > svg,\n  .cfi-ui-combobox__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-combobox__clear {\n    position: absolute;\n    right: 1.75rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: transparent;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n  }\n  .cfi-ui-combobox__clear:hover {\n    background: var(--cfi-ui-surface-active);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-combobox__panel {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    max-height: min(22rem, var(--radix-popover-content-available-height, 22rem));\n  }\n  .cfi-ui-combobox__search {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-sm);\n    border-bottom: 1px solid var(--cfi-ui-border);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__search > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-combobox__search input {\n    flex: 1 1 auto;\n    min-width: 0;\n    border: 0;\n    background: transparent;\n    color: var(--cfi-ui-content);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    outline: none;\n  }\n  .cfi-ui-combobox__search input::placeholder {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__list {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-combobox__option {\n    align-items: flex-start;\n  }\n  .cfi-ui-combobox__option > .cfi-ui-select-item__indicator {\n    padding-top: 0.125rem;\n  }\n  .cfi-ui-combobox__option-text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-combobox__option-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-combobox__option-hint {\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n");
 
 // src/Combobox.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function Combobox({
   options,
   value,
@@ -901,13 +1096,13 @@ function Combobox({
   fullWidth = true,
   ...aria
 }) {
-  const [open, setOpen] = useState2(false);
-  const [search, setSearch] = useState2("");
-  const [highlighted, setHighlighted] = useState2(0);
+  const [open, setOpen] = useState3(false);
+  const [search, setSearch] = useState3("");
+  const [highlighted, setHighlighted] = useState3(0);
   const listId = useId2();
   const searchRef = useRef(null);
   const listRef = useRef(null);
-  const filtered = useMemo2(() => {
+  const filtered = useMemo3(() => {
     if (onSearchChange) return options;
     const q = search.trim().toLowerCase();
     if (!q) return options;
@@ -961,14 +1156,14 @@ function Combobox({
     setHighlighted(0);
     onSearchChange?.(next);
   }
-  return /* @__PURE__ */ jsxs12(PopoverRoot, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx12(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs15(PopoverRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx15(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs15(
       "div",
       {
         style,
         className: cn("cfi-ui", "cfi-ui-combobox", fullWidth && "cfi-ui-combobox--full", className),
         children: [
-          /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsxs15(
             "button",
             {
               type: "button",
@@ -985,12 +1180,12 @@ function Combobox({
               onClick: () => setOpen((o) => !o),
               ...aria,
               children: [
-                /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
-                /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(ChevronDown2, {}) })
+                /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
+                /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx15(ChevronDown3, {}) })
               ]
             }
           ),
-          clearable && selected && !disabled && /* @__PURE__ */ jsx12(
+          clearable && selected && !disabled && /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -998,14 +1193,14 @@ function Combobox({
               "aria-label": `Clear ${selected.label}`,
               title: "Clear",
               onClick: () => onValueChange(null),
-              children: /* @__PURE__ */ jsx12(X2, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx15(X3, { "aria-hidden": "true" })
             }
           ),
-          name && /* @__PURE__ */ jsx12("input", { type: "hidden", name, value: value ?? "" })
+          name && /* @__PURE__ */ jsx15("input", { type: "hidden", name, value: value ?? "" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs15(
       PopoverContent,
       {
         flush: true,
@@ -1017,9 +1212,9 @@ function Combobox({
         },
         style: { width: "var(--radix-popover-trigger-width)" },
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "cfi-ui-combobox__search", children: [
-            /* @__PURE__ */ jsx12(Search, { "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs15("div", { className: "cfi-ui-combobox__search", children: [
+            /* @__PURE__ */ jsx15(Search, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx15(
               "input",
               {
                 ref: searchRef,
@@ -1035,7 +1230,7 @@ function Combobox({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx15(
             "div",
             {
               ref: listRef,
@@ -1043,10 +1238,10 @@ function Combobox({
               role: "listbox",
               "aria-busy": loading || void 0,
               className: "cfi-ui-combobox__list",
-              children: loading ? /* @__PURE__ */ jsx12("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
+              children: loading ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
                 const index = selectable.indexOf(option);
                 const isHighlighted = index !== -1 && index === highlighted;
-                return /* @__PURE__ */ jsxs12(
+                return /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     id: `${listId}-${option.value}`,
@@ -1059,10 +1254,10 @@ function Combobox({
                     onClick: () => !option.disabled && commit(option),
                     onPointerMove: () => index !== -1 && setHighlighted(index),
                     children: [
-                      /* @__PURE__ */ jsx12("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx12(Check4, { "aria-hidden": "true" }) }),
-                      /* @__PURE__ */ jsxs12("span", { className: "cfi-ui-combobox__option-text", children: [
-                        /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
-                        option.hint && /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
+                      /* @__PURE__ */ jsx15("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx15(Check4, { "aria-hidden": "true" }) }),
+                      /* @__PURE__ */ jsxs15("span", { className: "cfi-ui-combobox__option-text", children: [
+                        /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
+                        option.hint && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
                       ] })
                     ]
                   },
@@ -1078,14 +1273,14 @@ function Combobox({
 }
 
 // src/Tooltip.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var TooltipProvider = RadixTooltip.Provider;
 var TooltipRoot = RadixTooltip.Root;
 var TooltipTrigger = RadixTooltip.Trigger;
-var TooltipContent = forwardRef10(function TooltipContent2({ className, children, sideOffset = 5, ...rest }, ref) {
-  return /* @__PURE__ */ jsx13(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs13(
+var TooltipContent = forwardRef12(function TooltipContent2({ className, children, sideOffset = 5, ...rest }, ref) {
+  return /* @__PURE__ */ jsx16(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs16(
     RadixTooltip.Content,
     {
       ref,
@@ -1096,28 +1291,28 @@ var TooltipContent = forwardRef10(function TooltipContent2({ className, children
       ...rest,
       children: [
         children,
-        /* @__PURE__ */ jsx13(RadixTooltip.Arrow, { className: "cfi-ui-tooltip__arrow", width: 10, height: 4 })
+        /* @__PURE__ */ jsx16(RadixTooltip.Arrow, { className: "cfi-ui-tooltip__arrow", width: 10, height: 4 })
       ]
     }
   ) });
 });
 function Tooltip({ content, side = "top", align = "center", delay = 300, disabled, children }) {
-  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx13(Fragment3, { children });
-  return /* @__PURE__ */ jsx13(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs13(TooltipRoot, { children: [
-    /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx13(TooltipContent, { side, align, children: content })
+  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment3, { children });
+  return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs16(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx16(TooltipContent, { side, align, children: content })
   ] }) });
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
-import { AlertTriangle, CheckCircle2, Info, X as X3, XCircle } from "lucide-react";
+import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
+import { AlertTriangle, CheckCircle2, Info, X as X4, XCircle } from "lucide-react";
 
 // src/Toast.css
 styleInject("@layer components {\n  .cfi-ui-toast-viewport {\n    position: fixed;\n    z-index: var(--cfi-ui-z-toast);\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-sm);\n    width: min(24rem, calc(100vw - 2 * var(--cfi-ui-space-md)));\n    pointer-events: none;\n  }\n  .cfi-ui-toast-viewport[data-position=bottom-right] {\n    right: var(--cfi-ui-space-md);\n    bottom: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-toast-viewport[data-position=top-right] {\n    right: var(--cfi-ui-space-md);\n    top: calc(var(--cfi-shell-header-height, 48px) + var(--cfi-ui-space-md));\n    flex-direction: column-reverse;\n  }\n  .cfi-ui-toast-viewport[data-position=bottom-center] {\n    left: 50%;\n    bottom: var(--cfi-ui-space-md);\n    transform: translateX(-50%);\n  }\n  .cfi-ui-toast-viewport[data-position=top-center] {\n    left: 50%;\n    top: calc(var(--cfi-shell-header-height, 48px) + var(--cfi-ui-space-md));\n    transform: translateX(-50%);\n    flex-direction: column-reverse;\n  }\n  .cfi-ui-toast {\n    pointer-events: auto;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--cfi-ui-space-sm);\n    align-items: start;\n    padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-sm) var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-left: 3px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-toast[data-tone=success] {\n    border-left-color: var(--cfi-ui-success);\n  }\n  .cfi-ui-toast[data-tone=warning] {\n    border-left-color: var(--cfi-ui-warning);\n  }\n  .cfi-ui-toast[data-tone=error] {\n    border-left-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-toast[data-tone=info] {\n    border-left-color: var(--cfi-ui-info);\n  }\n  .cfi-ui-toast__icon {\n    display: inline-flex;\n    flex: none;\n    padding-top: 0.0625rem;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-toast[data-tone=success] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-toast[data-tone=warning] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-toast[data-tone=error] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-toast[data-tone=info] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-toast__icon > svg {\n    width: 1rem;\n    height: 1rem;\n    display: block;\n  }\n  .cfi-ui-toast__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-toast__title {\n    margin: 0;\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-toast__description {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n    overflow-wrap: anywhere;\n  }\n  .cfi-ui-toast__action {\n    justify-self: start;\n    margin-top: var(--cfi-ui-space-xs);\n    padding: 0;\n    border: 0;\n    background: none;\n    color: var(--cfi-ui-content-link);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n  }\n  .cfi-ui-toast__close {\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
 
 // src/Toast.tsx
-import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 var ToastContext = createContext2(null);
 function useToast() {
   const api = useContext2(ToastContext);
@@ -1130,7 +1325,7 @@ function ToastProvider({
   max = 4,
   position = "bottom-right"
 }) {
-  const [items, setItems] = useState3([]);
+  const [items, setItems] = useState4([]);
   const nextId = useRef2(1);
   const timers = useRef2(/* @__PURE__ */ new Map());
   const dismiss = useCallback((id) => {
@@ -1164,7 +1359,7 @@ function ToastProvider({
       pending.clear();
     };
   }, []);
-  const api = useMemo3(
+  const api = useMemo4(
     () => ({
       toast,
       dismiss,
@@ -1175,24 +1370,24 @@ function ToastProvider({
     }),
     [toast, dismiss]
   );
-  return /* @__PURE__ */ jsxs14(ToastContext.Provider, { value: api, children: [
+  return /* @__PURE__ */ jsxs17(ToastContext.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ jsx14(ToastViewport, { items, onDismiss: dismiss, position })
+    /* @__PURE__ */ jsx17(ToastViewport, { items, onDismiss: dismiss, position })
   ] });
 }
 var TONE_ICON = {
-  neutral: /* @__PURE__ */ jsx14(Info, {}),
-  info: /* @__PURE__ */ jsx14(Info, {}),
-  success: /* @__PURE__ */ jsx14(CheckCircle2, {}),
-  warning: /* @__PURE__ */ jsx14(AlertTriangle, {}),
-  error: /* @__PURE__ */ jsx14(XCircle, {})
+  neutral: /* @__PURE__ */ jsx17(Info, {}),
+  info: /* @__PURE__ */ jsx17(Info, {}),
+  success: /* @__PURE__ */ jsx17(CheckCircle2, {}),
+  warning: /* @__PURE__ */ jsx17(AlertTriangle, {}),
+  error: /* @__PURE__ */ jsx17(XCircle, {})
 };
 function ToastViewport({
   items,
   onDismiss,
   position
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       role: "region",
@@ -1201,12 +1396,12 @@ function ToastViewport({
       "data-position": position,
       "data-cfi-ui-portal": "",
       className: cn("cfi-ui", "cfi-ui-toast-viewport"),
-      children: items.map((item) => /* @__PURE__ */ jsxs14("div", { "data-tone": item.tone, className: "cfi-ui-toast", children: [
-        /* @__PURE__ */ jsx14("span", { className: "cfi-ui-toast__icon", "aria-hidden": "true", children: TONE_ICON[item.tone ?? "neutral"] }),
-        /* @__PURE__ */ jsxs14("div", { className: "cfi-ui-toast__text", children: [
-          /* @__PURE__ */ jsx14("p", { className: "cfi-ui-toast__title", children: item.title }),
-          item.description && /* @__PURE__ */ jsx14("p", { className: "cfi-ui-toast__description", children: item.description }),
-          item.action && /* @__PURE__ */ jsx14(
+      children: items.map((item) => /* @__PURE__ */ jsxs17("div", { "data-tone": item.tone, className: "cfi-ui-toast", children: [
+        /* @__PURE__ */ jsx17("span", { className: "cfi-ui-toast__icon", "aria-hidden": "true", children: TONE_ICON[item.tone ?? "neutral"] }),
+        /* @__PURE__ */ jsxs17("div", { className: "cfi-ui-toast__text", children: [
+          /* @__PURE__ */ jsx17("p", { className: "cfi-ui-toast__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsx17("p", { className: "cfi-ui-toast__description", children: item.description }),
+          item.action && /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -1219,12 +1414,12 @@ function ToastViewport({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx17(
           IconButton,
           {
             variant: "ghost",
             size: "sm",
-            icon: /* @__PURE__ */ jsx14(X3, {}),
+            icon: /* @__PURE__ */ jsx17(X4, {}),
             label: "Dismiss",
             className: "cfi-ui-toast__close",
             onClick: () => onDismiss(item.id)
@@ -1236,15 +1431,15 @@ function ToastViewport({
 }
 
 // src/Card.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 
 // src/Card.css
 styleInject("@layer components {\n  :where(.cfi-ui-card) {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-xl);\n    box-shadow: var(--cfi-ui-shadow-xs);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-card[data-variant=outline] {\n    box-shadow: none;\n  }\n  .cfi-ui-card[data-variant=plain] {\n    border-color: transparent;\n    box-shadow: none;\n    background: transparent;\n  }\n  .cfi-ui-card[data-interactive] {\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast), box-shadow var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-card[data-interactive]:hover {\n    border-color: var(--cfi-ui-border-strong);\n    box-shadow: var(--cfi-ui-shadow-md);\n  }\n  :where(.cfi-ui-card__header) {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: var(--cfi-ui-space-md);\n    padding: var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-card__heading {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-card__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    flex: none;\n  }\n  :where(.cfi-ui-card__title) {\n    margin: 0;\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-snug);\n    color: var(--cfi-ui-content);\n    text-wrap: balance;\n  }\n  .cfi-ui-card__description {\n    flex-basis: 100%;\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n  :where(.cfi-ui-card__body) {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-card[data-flush] > .cfi-ui-card__body {\n    padding: 0;\n  }\n  .cfi-ui-card[data-flush] > .cfi-ui-card__body:last-child {\n    overflow: hidden;\n    border-bottom-left-radius: var(--cfi-ui-radius-lg);\n    border-bottom-right-radius: var(--cfi-ui-radius-lg);\n  }\n  :where(.cfi-ui-card__footer) {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n    border-top: 1px solid var(--cfi-ui-border);\n    background: var(--cfi-ui-surface-sunken);\n    border-bottom-left-radius: var(--cfi-ui-radius-lg);\n    border-bottom-right-radius: var(--cfi-ui-radius-lg);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
 
 // src/Card.tsx
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
-var Card = forwardRef11(function Card2({ variant = "default", flush = false, interactive = false, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx15(
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var Card = forwardRef13(function Card2({ variant = "default", flush = false, interactive = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ref,
@@ -1257,65 +1452,35 @@ var Card = forwardRef11(function Card2({ variant = "default", flush = false, int
   );
 });
 function CardHeader({ actions, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs15("div", { className: cn("cfi-ui-card__header", className), ...rest, children: [
-    actions ? /* @__PURE__ */ jsx15("div", { className: "cfi-ui-card__heading", children }) : children,
-    actions && /* @__PURE__ */ jsx15("div", { className: "cfi-ui-card__actions", children: actions })
+  return /* @__PURE__ */ jsxs18("div", { className: cn("cfi-ui-card__header", className), ...rest, children: [
+    actions ? /* @__PURE__ */ jsx18("div", { className: "cfi-ui-card__heading", children }) : children,
+    actions && /* @__PURE__ */ jsx18("div", { className: "cfi-ui-card__actions", children: actions })
   ] });
 }
 function CardTitle({ as: Tag = "h3", className, ...rest }) {
-  return /* @__PURE__ */ jsx15(Tag, { className: cn("cfi-ui-card__title", className), ...rest });
+  return /* @__PURE__ */ jsx18(Tag, { className: cn("cfi-ui-card__title", className), ...rest });
 }
 function CardDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx15("p", { className: cn("cfi-ui-card__description", className), ...rest });
+  return /* @__PURE__ */ jsx18("p", { className: cn("cfi-ui-card__description", className), ...rest });
 }
 function CardBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx15("div", { className: cn("cfi-ui-card__body", className), ...rest });
+  return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui-card__body", className), ...rest });
 }
 function CardFooter({ className, ...rest }) {
-  return /* @__PURE__ */ jsx15("div", { className: cn("cfi-ui-card__footer", className), ...rest });
+  return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui-card__footer", className), ...rest });
 }
 
-// src/Badge.tsx
-import { forwardRef as forwardRef12 } from "react";
-
-// src/Badge.css
-styleInject("@layer components {\n  :where(.cfi-ui-badge) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    padding: 0.125rem 0.5rem;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-full);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: 1.4;\n    white-space: nowrap;\n    vertical-align: middle;\n  }\n  .cfi-ui-badge[data-size=sm] {\n    padding: 0 0.375rem;\n    font-size: 0.6875rem;\n  }\n  .cfi-ui-badge__dot {\n    flex: none;\n    width: 0.375rem;\n    height: 0.375rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: currentColor;\n  }\n  .cfi-ui-badge__icon {\n    display: inline-flex;\n    flex: none;\n  }\n  .cfi-ui-badge__icon > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    display: block;\n  }\n  .cfi-ui-badge--count {\n    justify-content: center;\n    min-width: 1.25rem;\n    padding-inline: 0.375rem;\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n    background: var(--cfi-ui-neutral-soft);\n    color: var(--cfi-ui-neutral-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=success] {\n    background: var(--cfi-ui-success-soft);\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n    background: var(--cfi-ui-warning-soft);\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=error] {\n    background: var(--cfi-ui-error-soft);\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=info] {\n    background: var(--cfi-ui-info-soft);\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n    background: var(--cfi-ui-accent-soft);\n    color: var(--cfi-ui-accent-hover);\n  }\n  .cfi-ui-badge[data-variant=solid] {\n    color: var(--cfi-ui-content-inverse);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=neutral] {\n    background: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=success] {\n    background: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=warning] {\n    background: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=error] {\n    background: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=info] {\n    background: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=accent] {\n    background: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-fg);\n  }\n  .cfi-ui-badge[data-variant=outline] {\n    background: transparent;\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=neutral] {\n    border-color: var(--cfi-ui-neutral-border);\n    color: var(--cfi-ui-neutral-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=success] {\n    border-color: var(--cfi-ui-success-border);\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=warning] {\n    border-color: var(--cfi-ui-warning-border);\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=error] {\n    border-color: var(--cfi-ui-error-border);\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=info] {\n    border-color: var(--cfi-ui-info-border);\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=accent] {\n    border-color: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-hover);\n  }\n}\n");
-
-// src/Badge.tsx
-import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
-var Badge = forwardRef12(function Badge2({ tone = "neutral", variant = "soft", size = "md", dot = false, icon, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs16(
-    "span",
-    {
-      ref,
-      "data-tone": tone,
-      "data-variant": variant,
-      "data-size": size,
-      className: cn("cfi-ui", "cfi-ui-badge", className),
-      ...rest,
-      children: [
-        icon ? /* @__PURE__ */ jsx16("span", { className: "cfi-ui-badge__icon", children: icon }) : dot && /* @__PURE__ */ jsx16("span", { className: "cfi-ui-badge__dot", "aria-hidden": "true" }),
-        children
-      ]
-    }
-  );
-});
-var CountBadge = forwardRef12(function CountBadge2({ count, max = 99, hideZero = true, className, ...rest }, ref) {
-  if (count === 0 && hideZero) return null;
-  return /* @__PURE__ */ jsx16(Badge, { ref, className: cn("cfi-ui-badge--count", className), ...rest, children: count > max ? `${max}+` : count });
-});
-
 // src/Table.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
 
 // src/Table.css
 styleInject("@layer components {\n  :where(.cfi-ui-table-scroller) {\n    width: 100%;\n    overflow-x: auto;\n    position: relative;\n  }\n  :where(.cfi-ui-table) {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    text-align: left;\n  }\n  :where(.cfi-ui-table__th) {\n    height: 2.75rem;\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid var(--cfi-ui-border);\n    background: transparent;\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n    white-space: nowrap;\n    text-align: left;\n    vertical-align: middle;\n  }\n  .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n    background: var(--cfi-ui-surface-sunken);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    color: var(--cfi-ui-content-muted);\n    border-bottom-color: var(--cfi-ui-border-strong);\n  }\n  .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n    position: sticky;\n    top: 0;\n    z-index: var(--cfi-ui-z-raised, 10);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n    position: sticky;\n    left: 0;\n    background: var(--cfi-ui-surface);\n    box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n    z-index: 1;\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n    z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n    background: var(--cfi-ui-surface-selected);\n  }\n  .cfi-ui-table__sort {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin: -0.125rem -0.25rem;\n    padding: 0.125rem 0.25rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: none;\n    color: inherit;\n    font: inherit;\n    cursor: pointer;\n  }\n  .cfi-ui-table__sort:hover {\n    color: var(--cfi-ui-content);\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-table__sort-icon {\n    display: inline-flex;\n    flex: none;\n    opacity: 0.55;\n  }\n  .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n  .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n    opacity: 1;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-table__sort-icon > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    display: block;\n  }\n  :where(.cfi-ui-table__td) {\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid var(--cfi-ui-border-subtle);\n    vertical-align: middle;\n  }\n  .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n  .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n    padding: 0.3125rem 0.625rem;\n  }\n  .cfi-ui-table__row[data-interactive] {\n    cursor: pointer;\n  }\n  .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n    background: var(--cfi-ui-surface-selected);\n  }\n  .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n    border-bottom: 0;\n  }\n  .cfi-ui-table__th[data-numeric],\n  .cfi-ui-table__td[data-numeric] {\n    text-align: right;\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-table__td[data-truncate] {\n    max-width: 18rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-table__foot .cfi-ui-table__td {\n    border-top: 1px solid var(--cfi-ui-border-strong);\n    border-bottom: 0;\n    background: var(--cfi-ui-surface-sunken);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-table__empty {\n    padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n    border-bottom: 0;\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-table__caption {\n    padding: var(--cfi-ui-space-sm) 0;\n    caption-side: bottom;\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n    text-align: left;\n  }\n}\n");
 
 // src/Table.tsx
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
-var Table = forwardRef13(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx17(
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+var Table = forwardRef14(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(
     "table",
     {
       ref,
@@ -1328,20 +1493,20 @@ var Table = forwardRef13(function Table2({ density = "comfortable", stickyHeader
   );
 });
 function TableScroller({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
+  return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
 }
 function TableHeader({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("thead", { className: cn("cfi-ui-table__head", className), ...rest });
+  return /* @__PURE__ */ jsx19("thead", { className: cn("cfi-ui-table__head", className), ...rest });
 }
 function TableBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
+  return /* @__PURE__ */ jsx19("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
 }
 function TableFooter({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
+  return /* @__PURE__ */ jsx19("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
 }
 var TableFoot = TableFooter;
 function TableRow({ selected, interactive, className, ...rest }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "tr",
     {
       "data-selected": selected || void 0,
@@ -1364,7 +1529,7 @@ function TableHead({
   ...rest
 }) {
   const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "th",
     {
       scope: "col",
@@ -1373,15 +1538,15 @@ function TableHead({
       style: { width, ...style },
       className: cn("cfi-ui-table__th", className),
       ...rest,
-      children: sortable ? /* @__PURE__ */ jsxs17("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
-        /* @__PURE__ */ jsx17("span", { children }),
-        /* @__PURE__ */ jsx17("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx17(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown, {}) })
+      children: sortable ? /* @__PURE__ */ jsxs19("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
+        /* @__PURE__ */ jsx19("span", { children }),
+        /* @__PURE__ */ jsx19("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx19(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx19(ArrowDown, {}) : /* @__PURE__ */ jsx19(ChevronsUpDown, {}) })
       ] }) : children
     }
   );
 }
 function TableCell({ numeric, truncate, className, ...rest }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "td",
     {
       "data-numeric": numeric || void 0,
@@ -1392,26 +1557,26 @@ function TableCell({ numeric, truncate, className, ...rest }) {
   );
 }
 function TableEmpty({ colSpan, children }) {
-  return /* @__PURE__ */ jsx17("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx17("td", { colSpan, className: "cfi-ui-table__empty", children }) });
+  return /* @__PURE__ */ jsx19("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx19("td", { colSpan, className: "cfi-ui-table__empty", children }) });
 }
 function TableCaption({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
+  return /* @__PURE__ */ jsx19("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
 }
 
 // src/Tabs.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import * as RadixTabs from "@radix-ui/react-tabs";
 
 // src/Tabs.css
 styleInject("@layer components {\n  .cfi-ui-tabs {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  }\n  :where(.cfi-ui-tabs__list) {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .cfi-ui-tabs__list::-webkit-scrollbar {\n    display: none;\n  }\n  :where(.cfi-ui-tabs__trigger) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    flex: none;\n    border: 0;\n    background: none;\n    color: var(--cfi-ui-content-muted);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    cursor: pointer;\n    transition:\n      color var(--cfi-ui-transition-fast),\n      background-color var(--cfi-ui-transition-fast),\n      border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-tabs__trigger:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-tabs__icon {\n    display: inline-flex;\n    flex: none;\n  }\n  .cfi-ui-tabs__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-tabs__list[data-variant=underline] {\n    gap: var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger {\n    padding: 0.5rem 0.125rem;\n    border-bottom: 2px solid transparent;\n    margin-bottom: -1px;\n  }\n  .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger[data-state=active] {\n    color: var(--cfi-ui-content);\n    border-bottom-color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-tabs__list[data-variant=pill] {\n    gap: 0;\n    padding: 0.1875rem;\n    background: var(--cfi-ui-surface-muted);\n    border: 0;\n    border-radius: 14px;\n    align-self: flex-start;\n  }\n  .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger {\n    padding: 0.25rem 0.75rem;\n    border-radius: 14px;\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger[data-state=active] {\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    box-shadow: var(--cfi-ui-shadow-xs);\n  }\n  :where(.cfi-ui-tabs__content) {\n    min-width: 0;\n    padding-top: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-tabs__content:focus-visible {\n    outline: none;\n  }\n}\n");
 
 // src/Tabs.tsx
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 var Tabs = RadixTabs.Root;
 var TabsRoot = RadixTabs.Root;
-var TabsList = forwardRef14(
+var TabsList = forwardRef15(
   function TabsList2({ variant = "pill", className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       RadixTabs.List,
       {
         ref,
@@ -1422,20 +1587,20 @@ var TabsList = forwardRef14(
     );
   }
 );
-var TabsTrigger = forwardRef14(
+var TabsTrigger = forwardRef15(
   function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs18(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
-      icon && /* @__PURE__ */ jsx18("span", { className: "cfi-ui-tabs__icon", children: icon }),
-      /* @__PURE__ */ jsx18("span", { children }),
-      count !== void 0 && /* @__PURE__ */ jsx18(CountBadge, { count, size: "sm" })
+    return /* @__PURE__ */ jsxs20(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
+      icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-tabs__icon", children: icon }),
+      /* @__PURE__ */ jsx20("span", { children }),
+      count !== void 0 && /* @__PURE__ */ jsx20(CountBadge, { count, size: "sm" })
     ] });
   }
 );
-var TabsContent = forwardRef14(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx18(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
+var TabsContent = forwardRef15(function TabsContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx20(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
 });
 function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs20(
     Tabs,
     {
       value,
@@ -1443,7 +1608,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
       defaultValue: defaultValue ?? tabs[0]?.value,
       className: cn("cfi-ui", "cfi-ui-tabs", className),
       children: [
-        /* @__PURE__ */ jsx18(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx20(
           TabsTrigger,
           {
             value: tab.value,
@@ -1454,25 +1619,25 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
           },
           tab.value
         )) }),
-        tabs.map((tab) => /* @__PURE__ */ jsx18(TabsContent, { value: tab.value, children: tab.content }, tab.value))
+        tabs.map((tab) => /* @__PURE__ */ jsx20(TabsContent, { value: tab.value, children: tab.content }, tab.value))
       ]
     }
   );
 }
 
 // src/Display.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 
 // src/Display.css
 styleInject('@layer components {\n  :where(.cfi-ui-separator) {\n    flex: none;\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-separator[data-orientation=horizontal] {\n    width: 100%;\n    height: 1px;\n  }\n  .cfi-ui-separator[data-orientation=vertical] {\n    width: 1px;\n    align-self: stretch;\n    min-height: 1rem;\n  }\n  .cfi-ui-separator-labeled {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n    color: var(--cfi-ui-content-muted);\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-separator-labeled::before,\n  .cfi-ui-separator-labeled::after {\n    content: "";\n    flex: 1 1 auto;\n    height: 1px;\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-separator-labeled__label {\n    flex: none;\n    white-space: nowrap;\n  }\n  .cfi-ui-progress-wrap {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n  }\n  .cfi-ui-progress {\n    position: relative;\n    flex: 1 1 auto;\n    height: 0.5rem;\n    overflow: hidden;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-progress[data-size=sm] {\n    height: 0.25rem;\n  }\n  .cfi-ui-progress__fill {\n    height: 100%;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-accent);\n    transition: width var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-progress[data-tone=success] .cfi-ui-progress__fill {\n    background: var(--cfi-ui-success);\n  }\n  .cfi-ui-progress[data-tone=warning] .cfi-ui-progress__fill {\n    background: var(--cfi-ui-warning);\n  }\n  .cfi-ui-progress[data-tone=error] .cfi-ui-progress__fill {\n    background: var(--cfi-ui-error);\n  }\n  .cfi-ui-progress[data-indeterminate] .cfi-ui-progress__fill {\n    width: 35%;\n    animation: cfi-ui-progress-slide 1.2s ease-in-out infinite;\n    transition: none;\n  }\n  @keyframes cfi-ui-progress-slide {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(300%);\n    }\n  }\n  .cfi-ui-progress__value {\n    flex: none;\n    min-width: 3ch;\n    font-size: var(--cfi-ui-text-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content-muted);\n    text-align: right;\n  }\n  :where(.cfi-ui-skeleton) {\n    background: var(--cfi-ui-surface-active);\n    border-radius: var(--cfi-ui-radius-sm);\n    animation: cfi-ui-pulse 1.6s ease-in-out infinite;\n  }\n  .cfi-ui-skeleton[data-shape=text] {\n    height: 0.875em;\n    margin-block: 0.25em;\n    border-radius: var(--cfi-ui-radius-sm);\n  }\n  .cfi-ui-skeleton[data-shape=circle] {\n    border-radius: var(--cfi-ui-radius-full);\n    aspect-ratio: 1;\n  }\n  .cfi-ui-skeleton-stack {\n    display: grid;\n    gap: 0;\n  }\n  :where(.cfi-ui-avatar) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    overflow: hidden;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface-active);\n    color: var(--cfi-ui-content-muted);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    letter-spacing: 0.02em;\n    user-select: none;\n  }\n  .cfi-ui-avatar[data-size=xs] {\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.5625rem;\n  }\n  .cfi-ui-avatar[data-size=sm] {\n    width: 1.5rem;\n    height: 1.5rem;\n    font-size: 0.625rem;\n  }\n  .cfi-ui-avatar[data-size=lg] {\n    width: 2.5rem;\n    height: 2.5rem;\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n  .cfi-ui-avatar-group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .cfi-ui-avatar-group > .cfi-ui-avatar {\n    box-shadow: 0 0 0 2px var(--cfi-ui-surface);\n  }\n  .cfi-ui-avatar-group > .cfi-ui-avatar + .cfi-ui-avatar {\n    margin-left: -0.5rem;\n  }\n  .cfi-ui-avatar--overflow {\n    background: var(--cfi-ui-surface-sunken);\n    color: var(--cfi-ui-content-muted);\n    font-variant-numeric: tabular-nums;\n  }\n  :where(.cfi-ui-scroll-area) {\n    min-width: 0;\n    scrollbar-width: thin;\n    scrollbar-color: var(--cfi-ui-border-strong) transparent;\n    overscroll-behavior: contain;\n  }\n  .cfi-ui-scroll-area[data-orientation=vertical] {\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n  .cfi-ui-scroll-area[data-orientation=horizontal] {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .cfi-ui-scroll-area[data-orientation=both] {\n    overflow: auto;\n  }\n  .cfi-ui-scroll-area::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  }\n  .cfi-ui-scroll-area::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  .cfi-ui-scroll-area::-webkit-scrollbar-thumb {\n    background: var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-full);\n    border: 3px solid transparent;\n    background-clip: content-box;\n  }\n  .cfi-ui-scroll-area::-webkit-scrollbar-thumb:hover {\n    background: var(--cfi-ui-content-subtle);\n    background-clip: content-box;\n  }\n}\n');
 
 // src/Display.tsx
-import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 function Separator3({ orientation = "horizontal", label, className, ...rest }) {
   if (label) {
-    return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx19("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
+    return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx21("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       role: "separator",
@@ -1493,8 +1658,8 @@ function Progress({
   ...rest
 }) {
   const clamped = value == null ? null : Math.max(0, Math.min(100, value));
-  return /* @__PURE__ */ jsxs19("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
+    /* @__PURE__ */ jsx21(
       "div",
       {
         role: "progressbar",
@@ -1506,7 +1671,7 @@ function Progress({
         "data-size": size,
         "data-indeterminate": clamped == null || void 0,
         className: "cfi-ui-progress",
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx21(
           "div",
           {
             className: "cfi-ui-progress__fill",
@@ -1515,7 +1680,7 @@ function Progress({
         )
       }
     ),
-    showValue && clamped != null && /* @__PURE__ */ jsxs19("span", { className: "cfi-ui-progress__value", children: [
+    showValue && clamped != null && /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-progress__value", children: [
       Math.round(clamped),
       "%"
     ] })
@@ -1523,7 +1688,7 @@ function Progress({
 }
 function Skeleton({ shape = "block", width, height, lines = 1, className, style, ...rest }) {
   if (shape === "text" && lines > 1) {
-    return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx21(
       "div",
       {
         "data-shape": "text",
@@ -1533,7 +1698,7 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
       i
     )) });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "aria-hidden": "true",
@@ -1544,21 +1709,21 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
     }
   );
 }
-var Avatar = forwardRef15(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
+var Avatar = forwardRef16(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   const initials = parts.length === 0 ? "?" : parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-  return /* @__PURE__ */ jsxs19("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
-    src ? /* @__PURE__ */ jsx19("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", children: initials }),
-    !src && /* @__PURE__ */ jsx19("span", { className: "cfi-ui-sr-only", children: name })
+  return /* @__PURE__ */ jsxs21("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
+    src ? /* @__PURE__ */ jsx21("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", children: initials }),
+    !src && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-sr-only", children: name })
   ] });
 });
 function AvatarGroup({ max, className, children, ...rest }) {
   const items = Array.isArray(children) ? children : [children];
   const shown = max ? items.slice(0, max) : items;
   const hidden = items.length - shown.length;
-  return /* @__PURE__ */ jsxs19("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
     shown,
-    hidden > 0 && /* @__PURE__ */ jsxs19("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
+    hidden > 0 && /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
       "+",
       hidden
     ] })
@@ -1571,7 +1736,7 @@ function ScrollArea({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-orientation": orientation,
@@ -1583,29 +1748,29 @@ function ScrollArea({
 }
 
 // src/Accordion.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import * as RadixAccordion from "@radix-ui/react-accordion";
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
-import { ChevronDown as ChevronDown3 } from "lucide-react";
+import { ChevronDown as ChevronDown4 } from "lucide-react";
 
 // src/Accordion.css
 styleInject("@layer components {\n  :where(.cfi-ui-accordion) {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-lg);\n    background: var(--cfi-ui-surface);\n    overflow: hidden;\n  }\n  .cfi-ui-accordion__item + .cfi-ui-accordion__item {\n    border-top: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-accordion__header {\n    margin: 0;\n  }\n  .cfi-ui-accordion__trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n    padding: 0.625rem var(--cfi-ui-space-md);\n    border: 0;\n    background: none;\n    color: var(--cfi-ui-content);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    text-align: left;\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-accordion__trigger:hover:not(:disabled) {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-accordion__trigger:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-accordion__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n    transition: transform var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-accordion__trigger[data-state=open] .cfi-ui-accordion__chevron {\n    transform: rotate(180deg);\n  }\n  .cfi-ui-accordion__chevron > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-accordion__label {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n  .cfi-ui-accordion__meta {\n    flex: none;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-normal);\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-accordion__content {\n    overflow: hidden;\n  }\n  .cfi-ui-accordion__content[data-state=open] {\n    animation: cfi-ui-accordion-open var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-accordion__content[data-state=closed] {\n    animation: cfi-ui-accordion-close var(--cfi-ui-transition-base);\n  }\n  @keyframes cfi-ui-accordion-open {\n    from {\n      height: 0;\n    }\n    to {\n      height: var(--radix-accordion-content-height);\n    }\n  }\n  @keyframes cfi-ui-accordion-close {\n    from {\n      height: var(--radix-accordion-content-height);\n    }\n    to {\n      height: 0;\n    }\n  }\n  .cfi-ui-accordion__inner {\n    padding: 0 var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n  }\n  :where(.cfi-ui-toggle-group) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    padding: var(--cfi-ui-space-3xs);\n    background: var(--cfi-ui-surface-sunken);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-md);\n  }\n  :where(.cfi-ui-toggle-group__item) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    height: 1.625rem;\n    padding-inline: 0.5rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: transparent;\n    color: var(--cfi-ui-content-muted);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    white-space: nowrap;\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-fast), color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-toggle-group[data-size=md] .cfi-ui-toggle-group__item {\n    height: 1.875rem;\n    padding-inline: 0.625rem;\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-toggle-group__item:hover:not(:disabled) {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-toggle-group__item[data-state=on] {\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    box-shadow: var(--cfi-ui-shadow-xs);\n  }\n  .cfi-ui-toggle-group__item:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-toggle-group__icon {\n    display: inline-flex;\n    flex: none;\n  }\n  .cfi-ui-toggle-group__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n}\n");
 
 // src/Accordion.tsx
-import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
 var AccordionRoot = RadixAccordion.Root;
-var AccordionItem = forwardRef16(function AccordionItem2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx20(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
+var AccordionItem = forwardRef17(function AccordionItem2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx22(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
 });
-var AccordionTrigger = forwardRef16(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx20(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs20(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
-    /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronDown3, {}) }),
-    /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__label", children }),
-    meta && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__meta", children: meta })
+var AccordionTrigger = forwardRef17(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx22(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs22(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
+    /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(ChevronDown4, {}) }),
+    /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__label", children }),
+    meta && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__meta", children: meta })
   ] }) });
 });
-var AccordionContent = forwardRef16(function AccordionContent2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx20(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx20("div", { className: "cfi-ui-accordion__inner", children }) });
+var AccordionContent = forwardRef17(function AccordionContent2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx22(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx22("div", { className: "cfi-ui-accordion__inner", children }) });
 });
 function Accordion({
   sections,
@@ -1622,9 +1787,9 @@ function Accordion({
     onValueChange,
     className: cn("cfi-ui", "cfi-ui-accordion", className)
   };
-  return /* @__PURE__ */ jsx20(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs20(AccordionItem, { value: section.value, disabled: section.disabled, children: [
-    /* @__PURE__ */ jsx20(AccordionTrigger, { meta: section.meta, children: section.label }),
-    /* @__PURE__ */ jsx20(AccordionContent, { children: section.content })
+  return /* @__PURE__ */ jsx22(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs22(AccordionItem, { value: section.value, disabled: section.disabled, children: [
+    /* @__PURE__ */ jsx22(AccordionTrigger, { meta: section.meta, children: section.label }),
+    /* @__PURE__ */ jsx22(AccordionContent, { children: section.content })
   ] }, section.value)) });
 }
 function ToggleGroup({
@@ -1636,7 +1801,7 @@ function ToggleGroup({
   className,
   ...aria
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     RadixToggleGroup.Root,
     {
       type: "single",
@@ -1648,7 +1813,7 @@ function ToggleGroup({
       "data-size": size,
       className: cn("cfi-ui", "cfi-ui-toggle-group", className),
       ...aria,
-      children: options.map((option) => /* @__PURE__ */ jsxs20(
+      children: options.map((option) => /* @__PURE__ */ jsxs22(
         RadixToggleGroup.Item,
         {
           value: option.value,
@@ -1657,7 +1822,7 @@ function ToggleGroup({
           title: option.ariaLabel,
           className: "cfi-ui-toggle-group__item",
           children: [
-            option.icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
+            option.icon && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
             option.label
           ]
         },
@@ -1674,9 +1839,9 @@ import { AlertCircle, Loader2 } from "lucide-react";
 styleInject("@layer components {\n  :where(.cfi-ui-pagestate) {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--cfi-ui-space-sm);\n    padding-block: var(--cfi-ui-space-2xl, 4rem);\n    text-align: center;\n    color: var(--cfi-ui-content);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-pagestate[data-size=inline] {\n    padding-block: var(--cfi-ui-space-md);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-pagestate:has(> .cfi-ui-pagestate__spinner) {\n    flex-direction: row;\n  }\n  .cfi-ui-pagestate__spinner {\n    width: 1rem;\n    height: 1rem;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n    animation: cfi-ui-pagestate-spin 1s linear infinite;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ui-pagestate__spinner {\n      animation-duration: 2.4s;\n    }\n  }\n  .cfi-ui-pagestate__icon {\n    display: inline-flex;\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-pagestate__icon > svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n  .cfi-ui-pagestate__icon[data-tone=error] {\n    width: 1.5rem;\n    height: 1.5rem;\n    color: var(--cfi-ui-error-strong);\n  }\n  .cfi-ui-pagestate__title {\n    margin: 0;\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-pagestate__muted {\n    margin: 0;\n    max-width: 34rem;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-pagestate__title + .cfi-ui-pagestate__muted {\n    margin-top: var(--cfi-ui-space-3xs);\n  }\n  .cfi-ui-pagestate__action {\n    margin-top: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-pagestate__retry {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: var(--cfi-ui-space-sm);\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n  }\n  .cfi-ui-pagestate__retry:hover {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-pagestate__retry:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n}\n@keyframes cfi-ui-pagestate-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
 
 // src/PageState.tsx
-import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
 function LoadingState({ label = "Loading\u2026", size = "block", className }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn("cfi-ui", "cfi-ui-pagestate", className),
@@ -1684,8 +1849,8 @@ function LoadingState({ label = "Loading\u2026", size = "block", className }) {
       role: "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsx21(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__muted", children: label })
+        /* @__PURE__ */ jsx23(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__muted", children: label })
       ]
     }
   );
@@ -1699,13 +1864,13 @@ function ErrorState({
   className
 }) {
   const message = error instanceof Error ? error.message : error == null ? "" : String(error);
-  return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
-    /* @__PURE__ */ jsx21(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs21("div", { children: [
-      /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
-      message && /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__muted", children: message })
+  return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
+    /* @__PURE__ */ jsx23(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs23("div", { children: [
+      /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
+      message && /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__muted", children: message })
     ] }),
-    onRetry && /* @__PURE__ */ jsx21("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
+    onRetry && /* @__PURE__ */ jsx23("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
   ] });
 }
 function EmptyState({
@@ -1716,17 +1881,17 @@ function EmptyState({
   size = "block",
   className
 }) {
-  return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
-    icon && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__icon", children: icon }),
-    /* @__PURE__ */ jsxs21("div", { children: [
-      /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
-      description && /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__muted", children: description })
+  return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
+    icon && /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__icon", children: icon }),
+    /* @__PURE__ */ jsxs23("div", { children: [
+      /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
+      description && /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__muted", children: description })
     ] }),
-    action && /* @__PURE__ */ jsx21("div", { className: "cfi-ui-pagestate__action", children: action })
+    action && /* @__PURE__ */ jsx23("div", { className: "cfi-ui-pagestate__action", children: action })
   ] });
 }
 function ComingSoon({ title, detail, className }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     EmptyState,
     {
       title,
@@ -1737,9 +1902,9 @@ function ComingSoon({ title, detail, className }) {
 }
 
 // src/useSortState.ts
-import { useCallback as useCallback2, useMemo as useMemo4, useState as useState4 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo5, useState as useState5 } from "react";
 function useSortState(initialKey, initialDirection = "asc") {
-  const [sort, setSort] = useState4({ key: initialKey, direction: initialDirection });
+  const [sort, setSort] = useState5({ key: initialKey, direction: initialDirection });
   const toggle = useCallback2((key) => {
     setSort(
       (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
@@ -1769,23 +1934,23 @@ function useSortState(initialKey, initialDirection = "asc") {
     },
     [sort]
   );
-  return useMemo4(
+  return useMemo5(
     () => ({ sort, toggle, setSort, sortProps, sortBy }),
     [sort, toggle, sortProps, sortBy]
   );
 }
 
 // src/SearchInput.tsx
-import { forwardRef as forwardRef17, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
-import { Search as Search2, X as X4 } from "lucide-react";
+import { forwardRef as forwardRef18, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { Search as Search2, X as X5 } from "lucide-react";
 
 // src/SearchInput.css
 styleInject("@layer components {\n  .cfi-ui-search__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    background: none;\n    border: none;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    border-radius: var(--cfi-ui-radius-sm);\n  }\n  .cfi-ui-search__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-search__clear:hover {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-search__clear:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: 1px;\n  }\n}\n");
 
 // src/SearchInput.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
-  const [local, setLocal] = useState5(value);
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
+  const [local, setLocal] = useState6(value);
   const timer = useRef3(void 0);
   const latest = useRef3(onChange);
   latest.current = onChange;
@@ -1802,7 +1967,7 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
     setLocal("");
     latest.current("");
   };
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     Input,
     {
       ...rest,
@@ -1811,8 +1976,8 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
       value: local,
       placeholder,
       onChange: (e) => push(e.target.value),
-      prefix: /* @__PURE__ */ jsx22(Search2, { "aria-hidden": "true" }),
-      suffix: local ? /* @__PURE__ */ jsx22("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx22(X4, { "aria-hidden": "true" }) }) : void 0
+      prefix: /* @__PURE__ */ jsx24(Search2, { "aria-hidden": "true" }),
+      suffix: local ? /* @__PURE__ */ jsx24("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx24(X5, { "aria-hidden": "true" }) }) : void 0
     }
   );
 });
@@ -1824,7 +1989,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 styleInject("@layer components {\n  :where(.cfi-ui-pagination) {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-md);\n    padding-block: var(--cfi-ui-space-sm);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-pagination__controls {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-left: auto;\n  }\n  .cfi-ui-pagination__page {\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-pagination__range {\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-pagination__btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--cfi-ui-control-height-sm);\n    height: var(--cfi-ui-control-height-sm);\n    padding: 0;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    cursor: pointer;\n  }\n  .cfi-ui-pagination__btn > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n  .cfi-ui-pagination__btn:hover:not(:disabled) {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-pagination__btn:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: default;\n  }\n  .cfi-ui-pagination__btn:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n}\n");
 
 // src/Pagination.tsx
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -1840,12 +2005,12 @@ function Pagination({
   const from = (current - 1) * pageSize + 1;
   const to = Math.min(current * pageSize, totalItems);
   const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
-  return /* @__PURE__ */ jsxs22("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs24("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
     showRange && // aria-live so a screen-reader user hears where they landed; paging
     // otherwise moves focus nowhere and announces nothing.
-    /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
-    /* @__PURE__ */ jsxs22("div", { className: "cfi-ui-pagination__controls", children: [
-      /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx25("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
+    /* @__PURE__ */ jsxs24("div", { className: "cfi-ui-pagination__controls", children: [
+      /* @__PURE__ */ jsx25(
         "button",
         {
           type: "button",
@@ -1853,15 +2018,15 @@ function Pagination({
           onClick: () => onPageChange(current - 1),
           disabled: current <= 1,
           "aria-label": labels?.previous ?? "Previous page",
-          children: /* @__PURE__ */ jsx23(ChevronLeft, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx25(ChevronLeft, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsxs22("span", { className: "cfi-ui-pagination__page", children: [
+      /* @__PURE__ */ jsxs24("span", { className: "cfi-ui-pagination__page", children: [
         current,
         " / ",
         pageCount
       ] }),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx25(
         "button",
         {
           type: "button",
@@ -1869,7 +2034,7 @@ function Pagination({
           onClick: () => onPageChange(current + 1),
           disabled: current >= pageCount,
           "aria-label": labels?.next ?? "Next page",
-          children: /* @__PURE__ */ jsx23(ChevronRight, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx25(ChevronRight, { "aria-hidden": "true" })
         }
       )
     ] })
@@ -1953,9 +2118,10 @@ export {
   ErrorState,
   Field,
   Fieldset,
+  FilterBar,
   IconButton,
   Input,
-  Label,
+  Label3 as Label,
   LoadingState,
   Menu,
   MenuCheckboxItem,
@@ -2005,6 +2171,7 @@ export {
   SideModal,
   Skeleton,
   Slider,
+  SplitButton,
   Switch,
   TabSet,
   Table,