@borisj74/bv-ds 0.1.8 → 0.1.10

package/dist/index.js

@@ -1,7 +1,10 @@
 import * as React28 from 'react';
-import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
+import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, useCallback, PureComponent, createElement, Component, useRef, useEffect, useId, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02, Bold01, AlignLeft, AlignCenter, AlignRight, Link01 } from '@borisj74/bv-ds-icons';
+import { dateFnsLocalizer, Calendar as Calendar$1 } from 'react-big-calendar';
+import { getDay, parse, format, startOfWeek, isSameDay } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import { Plus, ChevronDown, LogOut01, ChevronSelectorVertical, XClose as XClose$1, Menu02, Bold01, AlignLeft, AlignCenter, AlignRight, Link01, ArrowLeft, ArrowRight } from '@borisj74/bv-ds-icons';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { StarterKit } from '@tiptap/starter-kit';
 import { TextAlign } from '@tiptap/extension-text-align';
@@ -6101,6 +6104,91 @@ function ButtonUtility({
     ) : null
   ] });
 }
+function IconBox({ size = 20, className, children }) {
+  const icon = isValidElement(children) ? cloneElement(children, {
+    viewBox: children.props.viewBox ?? "0 0 24 24",
+    className: clsx_default("w-full h-full", children.props.className)
+  }) : children;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default("relative flex shrink-0 items-center justify-center", className),
+      style: { width: size, height: size },
+      children: icon
+    }
+  );
+}
+function CalendarHeader({
+  title,
+  range: range6,
+  supportingText,
+  badge,
+  dateIcon,
+  actions,
+  className
+}) {
+  const subtitle = range6 ?? supportingText;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default(
+        "flex flex-wrap items-start justify-between gap-lg font-body",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-lg", children: [
+          dateIcon,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xxs", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-md", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-text-primary", children: title }),
+              badge
+            ] }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-tertiary", children: subtitle }) : null
+          ] })
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-md", children: actions }) : null
+      ]
+    }
+  );
+}
+function CalendarColumnHeader({
+  weekday,
+  date: date2,
+  type,
+  current = false,
+  orientation = "vertical",
+  breakpoint = "desktop",
+  className
+}) {
+  const state = type ?? (current ? "selected" : "default");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default(
+        "flex items-center justify-center gap-md py-md font-body",
+        orientation === "vertical" && "flex-col gap-xs",
+        breakpoint === "desktop" && "w-[160px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-text-quaternary", children: weekday }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx_default(
+              "flex items-center justify-center text-xs font-semibold",
+              state === "selected" && "size-6 rounded-full bg-bg-brand-solid text-white",
+              state === "today" && "border-b-2 border-border-brand pb-xxs text-text-brand-secondary",
+              state === "default" && "text-text-secondary"
+            ),
+            "aria-current": state !== "default" ? "date" : void 0,
+            children: date2
+          }
+        )
+      ]
+    }
+  );
+}
 var dotClasses = {
   neutral: "bg-utility-neutral-500",
   brand: "bg-utility-brand-500",
@@ -6192,6 +6280,281 @@ function CalendarEvent({
     }
   );
 }
+var DEFAULT_OPTIONS = [
+  { value: "day", label: "Day view", shortcut: "\u2318D" },
+  { value: "week", label: "Week view", shortcut: "\u2318W" },
+  { value: "month", label: "Month view", shortcut: "\u2318M" }
+];
+function Chevron2() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "m5 7.5 5 5 5-5",
+      stroke: "currentColor",
+      strokeWidth: "1.667",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CalendarViewDropdown({
+  value,
+  onChange,
+  onSelect,
+  open: openProp,
+  onOpenChange,
+  options = DEFAULT_OPTIONS,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const selected = options.find((o) => o.value === value) ?? options[0];
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative inline-block font-body", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen(!open),
+        className: "inline-flex items-center gap-md rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-skeuomorphic transition-colors hover:bg-bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        children: [
+          selected.label,
+          /* @__PURE__ */ jsx("span", { className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(Chevron2, {}) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "ul",
+      {
+        role: "listbox",
+        className: "absolute left-0 z-10 mt-xs min-w-[200px] rounded-md border border-border-secondary bg-bg-primary p-xs shadow-lg",
+        children: options.map((opt) => {
+          const isSelected = opt.value === value;
+          return /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange?.(opt.value);
+                onSelect?.(opt.value);
+                setOpen(false);
+              },
+              className: "flex w-full items-center gap-md rounded-sm px-md py-xs text-sm font-medium text-text-secondary transition-colors hover:bg-bg-primary-hover",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: clsx_default(
+                      "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                      isSelected ? "border-border-brand" : "border-border-primary"
+                    ),
+                    children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: opt.label }),
+                opt.shortcut ? /* @__PURE__ */ jsx("span", { className: "text-xs text-text-quaternary", children: opt.shortcut }) : null
+              ]
+            }
+          ) }, opt.value);
+        })
+      }
+    ) : null
+  ] });
+}
+var localizer = dateFnsLocalizer({
+  format,
+  parse,
+  // Monday-first week, matching the Figma column-header order (Mon…Sun).
+  startOfWeek: (date2) => startOfWeek(date2, { weekStartsOn: 1 }),
+  getDay,
+  locales: { "en-US": enUS }
+});
+var rbcStructural = clsx_default(
+  "h-full font-body",
+  "[&_.rbc-month-view]:flex [&_.rbc-month-view]:flex-1 [&_.rbc-month-view]:flex-col [&_.rbc-month-view]:overflow-hidden",
+  "[&_.rbc-month-header]:flex [&_.rbc-month-header]:flex-row",
+  "[&_.rbc-header]:min-w-0 [&_.rbc-header]:flex-1 [&_.rbc-header]:overflow-hidden",
+  "[&_.rbc-month-row]:relative [&_.rbc-month-row]:flex [&_.rbc-month-row]:min-h-[120px] [&_.rbc-month-row]:flex-1 [&_.rbc-month-row]:flex-col [&_.rbc-month-row]:overflow-hidden",
+  "[&_.rbc-row-bg]:absolute [&_.rbc-row-bg]:inset-0 [&_.rbc-row-bg]:flex [&_.rbc-row-bg]:flex-row",
+  "[&_.rbc-day-bg]:min-w-0 [&_.rbc-day-bg]:flex-1 [&_.rbc-day-bg]:border-b [&_.rbc-day-bg]:border-r [&_.rbc-day-bg]:border-border-secondary [&_.rbc-day-bg]:bg-bg-primary",
+  "[&_.rbc-off-range-bg]:!bg-bg-secondary-alt",
+  "[&_.rbc-row-content]:relative [&_.rbc-row-content]:z-[1] [&_.rbc-row-content]:flex [&_.rbc-row-content]:flex-1 [&_.rbc-row-content]:flex-col",
+  "[&_.rbc-row]:flex [&_.rbc-row]:flex-row",
+  "[&_.rbc-date-cell]:min-w-0 [&_.rbc-date-cell]:flex-1",
+  "[&_.rbc-off-range]:opacity-50",
+  "[&_.rbc-row-segment]:min-w-0 [&_.rbc-row-segment]:px-md [&_.rbc-row-segment]:pb-xxs",
+  "[&_.rbc-event]:block [&_.rbc-event]:w-full [&_.rbc-event]:outline-none",
+  "[&_.rbc-show-more]:block [&_.rbc-show-more]:px-md [&_.rbc-show-more]:text-xs [&_.rbc-show-more]:font-semibold [&_.rbc-show-more]:text-utility-neutral-500"
+);
+function NavArrow({ dir }) {
+  return /* @__PURE__ */ jsx(IconBox, { size: 20, children: dir === "left" ? /* @__PURE__ */ jsx(ArrowLeft, {}) : /* @__PURE__ */ jsx(ArrowRight, {}) });
+}
+function Calendar({
+  events,
+  defaultView = "month",
+  defaultDate,
+  onNavigate,
+  onView,
+  onSelectEvent,
+  onSelectSlot,
+  onAddEvent,
+  className
+}) {
+  const [date2, setDate] = useState(defaultDate ?? new Date(2027, 0, 1));
+  const [view, setView] = useState(defaultView);
+  const [selected, setSelected] = useState(null);
+  const handleNavigate = useCallback(
+    (next) => {
+      setDate(next);
+      onNavigate?.(next);
+    },
+    [onNavigate]
+  );
+  const handleView = useCallback(
+    (next) => {
+      setView(next);
+      onView?.(next);
+    },
+    [onView]
+  );
+  const handleSelectSlot = useCallback(
+    (slot) => {
+      setSelected(slot.start);
+      onSelectSlot?.(slot);
+    },
+    [onSelectSlot]
+  );
+  const components = useMemo(
+    () => ({
+      // Header bar → CalendarHeader primitive + nav/view/add controls.
+      toolbar: (tb) => /* @__PURE__ */ jsx("div", { className: "border-b border-border-secondary px-3xl py-2xl", children: /* @__PURE__ */ jsx(
+        CalendarHeader,
+        {
+          title: tb.label,
+          actions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center overflow-hidden rounded-md border border-border-primary shadow-xs", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Previous",
+                  onClick: () => tb.onNavigate("PREV"),
+                  className: "flex items-center justify-center bg-bg-primary px-[10px] py-md text-fg-quaternary transition-colors hover:bg-bg-primary-hover",
+                  children: /* @__PURE__ */ jsx(NavArrow, { dir: "left" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => tb.onNavigate("TODAY"),
+                  className: "border-x border-border-primary bg-bg-primary px-[14px] py-md text-sm font-semibold text-text-secondary transition-colors hover:bg-bg-primary-hover",
+                  children: "Today"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Next",
+                  onClick: () => tb.onNavigate("NEXT"),
+                  className: "flex items-center justify-center bg-bg-primary px-[10px] py-md text-fg-quaternary transition-colors hover:bg-bg-primary-hover",
+                  children: /* @__PURE__ */ jsx(NavArrow, { dir: "right" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              CalendarViewDropdown,
+              {
+                value: tb.view,
+                onChange: (v) => tb.onView(v)
+              }
+            ),
+            onAddEvent && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onAddEvent,
+                className: "flex items-center gap-xs rounded-md border-2 border-white/[0.12] bg-bg-brand-solid px-lg py-md text-sm font-semibold text-text-white shadow-skeuomorphic",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "opacity-60", children: /* @__PURE__ */ jsx(IconBox, { size: 20, children: /* @__PURE__ */ jsx(Plus, {}) }) }),
+                  "Add event"
+                ]
+              }
+            )
+          ] })
+        }
+      ) }),
+      month: {
+        // Weekday column header → CalendarColumnHeader primitive.
+        header: ({ label }) => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center border-b border-r border-border-secondary bg-bg-primary p-md", children: /* @__PURE__ */ jsx(CalendarColumnHeader, { weekday: label, date: "" }) }),
+        // Date-number circle (Figma 7991:81840): default / today / selected.
+        dateHeader: ({ date: cellDate, label }) => {
+          const today = isSameDay(cellDate, /* @__PURE__ */ new Date());
+          const isSel = selected ? isSameDay(cellDate, selected) : false;
+          return /* @__PURE__ */ jsx("div", { className: "flex p-md", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx_default(
+                "flex size-6 items-center justify-center rounded-full text-xs font-semibold",
+                today ? "bg-bg-brand-solid text-text-white" : isSel ? "bg-bg-secondary text-text-secondary" : "text-text-secondary"
+              ),
+              children: label
+            }
+          ) });
+        },
+        // Event chip → CalendarEvent primitive (desktop, filled).
+        event: ({ event }) => /* @__PURE__ */ jsx(
+          CalendarEvent,
+          {
+            title: event.title,
+            time: event.allDay ? void 0 : format(event.start, "h:mm a"),
+            color: event.color ?? "brand",
+            filled: true
+          }
+        )
+      }
+    }),
+    [onAddEvent, selected]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx_default(
+        "flex w-full flex-col overflow-hidden rounded-xl border border-border-secondary bg-bg-primary shadow-xs",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        Calendar$1,
+        {
+          localizer,
+          events,
+          date: date2,
+          view,
+          onNavigate: handleNavigate,
+          onView: handleView,
+          views: ["month", "week", "day"],
+          selectable: true,
+          popup: true,
+          startAccessor: "start",
+          endAccessor: "end",
+          onSelectEvent: (e) => onSelectEvent?.(e),
+          onSelectSlot: handleSelectSlot,
+          messages: { showMore: (total) => `${total} more\u2026` },
+          components,
+          className: rbcStructural,
+          style: { height: 800 }
+        }
+      )
+    }
+  );
+}
 function PlusIcon2() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
     "path",
@@ -6329,44 +6692,6 @@ function CalendarCellDayWeekView({
     }
   );
 }
-function CalendarColumnHeader({
-  weekday,
-  date: date2,
-  type,
-  current = false,
-  orientation = "vertical",
-  breakpoint = "desktop",
-  className
-}) {
-  const state = type ?? (current ? "selected" : "default");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx_default(
-        "flex items-center justify-center gap-md py-md font-body",
-        orientation === "vertical" && "flex-col gap-xs",
-        breakpoint === "desktop" && "w-[160px]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-text-quaternary", children: weekday }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx_default(
-              "flex items-center justify-center text-xs font-semibold",
-              state === "selected" && "size-6 rounded-full bg-bg-brand-solid text-white",
-              state === "today" && "border-b-2 border-border-brand pb-xxs text-text-brand-secondary",
-              state === "default" && "text-text-secondary"
-            ),
-            "aria-current": state !== "default" ? "date" : void 0,
-            children: date2
-          }
-        )
-      ]
-    }
-  );
-}
 function CalendarDateIcon({ month, day, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -6445,39 +6770,6 @@ function CalendarEventDayWeekView({
     }
   );
 }
-function CalendarHeader({
-  title,
-  range: range6,
-  supportingText,
-  badge,
-  dateIcon,
-  actions,
-  className
-}) {
-  const subtitle = range6 ?? supportingText;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx_default(
-        "flex flex-wrap items-start justify-between gap-lg font-body",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-lg", children: [
-          dateIcon,
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xxs", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-md", children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-text-primary", children: title }),
-              badge
-            ] }),
-            subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-tertiary", children: subtitle }) : null
-          ] })
-        ] }),
-        actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-md", children: actions }) : null
-      ]
-    }
-  );
-}
 function CalendarRowLabel({ label, time: time2, className }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -6511,93 +6803,6 @@ function CalendarTimemarker({
     /* @__PURE__ */ jsx(Line, {})
   ] }) });
 }
-var DEFAULT_OPTIONS = [
-  { value: "day", label: "Day view", shortcut: "\u2318D" },
-  { value: "week", label: "Week view", shortcut: "\u2318W" },
-  { value: "month", label: "Month view", shortcut: "\u2318M" }
-];
-function Chevron2() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "m5 7.5 5 5 5-5",
-      stroke: "currentColor",
-      strokeWidth: "1.667",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function CalendarViewDropdown({
-  value,
-  onChange,
-  onSelect,
-  open: openProp,
-  onOpenChange,
-  options = DEFAULT_OPTIONS,
-  className
-}) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : internalOpen;
-  const setOpen = (next) => {
-    if (!isControlled) setInternalOpen(next);
-    onOpenChange?.(next);
-  };
-  const selected = options.find((o) => o.value === value) ?? options[0];
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative inline-block font-body", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        onClick: () => setOpen(!open),
-        className: "inline-flex items-center gap-md rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-skeuomorphic transition-colors hover:bg-bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
-        children: [
-          selected.label,
-          /* @__PURE__ */ jsx("span", { className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(Chevron2, {}) })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx(
-      "ul",
-      {
-        role: "listbox",
-        className: "absolute left-0 z-10 mt-xs min-w-[200px] rounded-md border border-border-secondary bg-bg-primary p-xs shadow-lg",
-        children: options.map((opt) => {
-          const isSelected = opt.value === value;
-          return /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onChange?.(opt.value);
-                onSelect?.(opt.value);
-                setOpen(false);
-              },
-              className: "flex w-full items-center gap-md rounded-sm px-md py-xs text-sm font-medium text-text-secondary transition-colors hover:bg-bg-primary-hover",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: clsx_default(
-                      "flex size-4 shrink-0 items-center justify-center rounded-full border",
-                      isSelected ? "border-border-brand" : "border-border-primary"
-                    ),
-                    children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: opt.label }),
-                opt.shortcut ? /* @__PURE__ */ jsx("span", { className: "text-xs text-text-quaternary", children: opt.shortcut }) : null
-              ]
-            }
-          ) }, opt.value);
-        })
-      }
-    ) : null
-  ] });
-}
 function CardHeader({
   title,
   description,
@@ -7684,20 +7889,20 @@ var import_isFunction2 = __toESM(require_isFunction());
 
 // node_modules/recharts/es6/util/LogUtils.js
 var isDev = process.env.NODE_ENV !== "production";
-var warn = function warn2(condition, format2) {
+var warn = function warn2(condition, format3) {
   for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     args[_key - 2] = arguments[_key];
   }
   if (isDev && typeof console !== "undefined" && console.warn) {
-    if (format2 === void 0) {
+    if (format3 === void 0) {
       console.warn("LogUtils requires an error message argument");
     }
     if (!condition) {
-      if (format2 === void 0) {
+      if (format3 === void 0) {
         console.warn("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");
       } else {
         var argIndex = 0;
-        console.warn(format2.replace(/%s/g, function() {
+        console.warn(format3.replace(/%s/g, function() {
           return args[argIndex++];
         }));
       }
@@ -10711,7 +10916,7 @@ var DecimalCSS = /* @__PURE__ */ (function() {
     }
   }], [{
     key: "parse",
-    value: function parse(str) {
+    value: function parse2(str) {
       var _NUM_SPLIT_REGEX$exec;
       var _ref = (_NUM_SPLIT_REGEX$exec = NUM_SPLIT_REGEX.exec(str)) !== null && _NUM_SPLIT_REGEX$exec !== void 0 ? _NUM_SPLIT_REGEX$exec : [], _ref2 = _slicedToArray3(_ref, 3), numStr = _ref2[1], unit2 = _ref2[2];
       return new DecimalCSS2(parseFloat(numStr), unit2 !== null && unit2 !== void 0 ? unit2 : "");
@@ -11701,10 +11906,10 @@ function color_formatHsl() {
 function color_formatRgb() {
   return this.rgb().formatRgb();
 }
-function color(format2) {
+function color(format3) {
   var m, l;
-  format2 = (format2 + "").trim().toLowerCase();
-  return (m = reHex.exec(format2)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format2)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format2)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format2)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format2)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format2)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format2)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format2) ? rgbn(named[format2]) : format2 === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
+  format3 = (format3 + "").trim().toLowerCase();
+  return (m = reHex.exec(format3)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format3)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format3)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format3)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format3)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format3)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format3)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format3) ? rgbn(named[format3]) : format3 === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
 }
 function rgbn(n) {
   return new Rgb(n >> 16 & 255, n >> 8 & 255, n & 255, 1);
@@ -12256,7 +12461,7 @@ function locale_default(locale3) {
     var prefix2 = (options && options.prefix !== void 0 ? options.prefix : "") + (symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : ""), suffix = (symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "") + (options && options.suffix !== void 0 ? options.suffix : "");
     var formatType = formatTypes_default[type], maybeSuffix = /[defgprs%]/.test(type);
     precision = precision === void 0 ? 6 : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision)) : Math.max(0, Math.min(20, precision));
-    function format2(value) {
+    function format3(value) {
       var valuePrefix = prefix2, valueSuffix = suffix, i, n, c2;
       if (type === "c") {
         valueSuffix = formatType(value) + valueSuffix;
@@ -12299,10 +12504,10 @@ function locale_default(locale3) {
       }
       return numerals(value);
     }
-    format2.toString = function() {
+    format3.toString = function() {
       return specifier + "";
     };
-    return format2;
+    return format3;
   }
   function formatPrefix2(specifier, value) {
     var e = Math.max(-8, Math.min(8, Math.floor(exponent_default(value) / 3))) * 3, k2 = Math.pow(10, -e), f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier), { suffix: prefixes[8 + e / 3] });
@@ -12318,7 +12523,7 @@ function locale_default(locale3) {
 
 // node_modules/d3-format/src/defaultLocale.js
 var locale;
-var format;
+var format2;
 var formatPrefix;
 defaultLocale({
   thousands: ",",
@@ -12327,7 +12532,7 @@ defaultLocale({
 });
 function defaultLocale(definition) {
   locale = locale_default(definition);
-  format = locale.format;
+  format2 = locale.format;
   formatPrefix = locale.formatPrefix;
   return locale;
 }
@@ -12372,7 +12577,7 @@ function tickFormat(start, stop, count, specifier) {
       break;
     }
   }
-  return format(specifier);
+  return format2(specifier);
 }
 
 // node_modules/d3-scale/src/linear.js
@@ -12551,7 +12756,7 @@ function loggish(transform) {
     if (specifier == null) specifier = base === 10 ? "s" : ",";
     if (typeof specifier !== "function") {
       if (!(base % 1) && (specifier = formatSpecifier(specifier)).precision == null) specifier.trim = true;
-      specifier = format(specifier);
+      specifier = format2(specifier);
     }
     if (count === Infinity) return specifier;
     const k2 = Math.max(1, base * count / scale.ticks().length);
@@ -13244,14 +13449,14 @@ function formatLocale(locale3) {
   utcFormats.c = newFormat(locale_dateTime, utcFormats);
   function newFormat(specifier, formats2) {
     return function(date2) {
-      var string = [], i = -1, j = 0, n = specifier.length, c2, pad4, format2;
+      var string = [], i = -1, j = 0, n = specifier.length, c2, pad4, format3;
       if (!(date2 instanceof Date)) date2 = /* @__PURE__ */ new Date(+date2);
       while (++i < n) {
         if (specifier.charCodeAt(i) === 37) {
           string.push(specifier.slice(j, i));
           if ((pad4 = pads[c2 = specifier.charAt(++i)]) != null) c2 = specifier.charAt(++i);
           else pad4 = c2 === "e" ? " " : "0";
-          if (format2 = formats2[c2]) c2 = format2(date2, pad4);
+          if (format3 = formats2[c2]) c2 = format3(date2, pad4);
           string.push(c2);
           j = i + 1;
         }
@@ -13302,14 +13507,14 @@ function formatLocale(locale3) {
     };
   }
   function parseSpecifier(d, specifier, string, j) {
-    var i = 0, n = specifier.length, m = string.length, c2, parse;
+    var i = 0, n = specifier.length, m = string.length, c2, parse2;
     while (i < n) {
       if (j >= m) return -1;
       c2 = specifier.charCodeAt(i++);
       if (c2 === 37) {
         c2 = specifier.charAt(i++);
-        parse = parses[c2 in pads ? specifier.charAt(i++) : c2];
-        if (!parse || (j = parse(d, string, j)) < 0) return -1;
+        parse2 = parses[c2 in pads ? specifier.charAt(i++) : c2];
+        if (!parse2 || (j = parse2(d, string, j)) < 0) return -1;
       } else if (c2 != string.charCodeAt(j++)) {
         return -1;
       }
@@ -13682,9 +13887,9 @@ function date(t) {
 function number3(t) {
   return t instanceof Date ? +t : +/* @__PURE__ */ new Date(+t);
 }
-function calendar(ticks2, tickInterval, year, month, week, day, hour, minute, second2, format2) {
+function calendar(ticks2, tickInterval, year, month, week, day, hour, minute, second2, format3) {
   var scale = continuous(), invert = scale.invert, domain = scale.domain;
-  var formatMillisecond = format2(".%L"), formatSecond = format2(":%S"), formatMinute = format2("%I:%M"), formatHour = format2("%I %p"), formatDay = format2("%a %d"), formatWeek = format2("%b %d"), formatMonth = format2("%B"), formatYear2 = format2("%Y");
+  var formatMillisecond = format3(".%L"), formatSecond = format3(":%S"), formatMinute = format3("%I:%M"), formatHour = format3("%I %p"), formatDay = format3("%a %d"), formatWeek = format3("%b %d"), formatMonth = format3("%B"), formatYear2 = format3("%Y");
   function tickFormat2(date2) {
     return (second2(date2) < date2 ? formatMillisecond : minute(date2) < date2 ? formatSecond : hour(date2) < date2 ? formatMinute : day(date2) < date2 ? formatHour : month(date2) < date2 ? week(date2) < date2 ? formatDay : formatWeek : year(date2) < date2 ? formatMonth : formatYear2)(date2);
   }
@@ -13699,7 +13904,7 @@ function calendar(ticks2, tickInterval, year, month, week, day, hour, minute, se
     return ticks2(d[0], d[d.length - 1], interval == null ? 10 : interval);
   };
   scale.tickFormat = function(count, specifier) {
-    return specifier == null ? tickFormat2 : format2(specifier);
+    return specifier == null ? tickFormat2 : format3(specifier);
   };
   scale.nice = function(interval) {
     var d = domain();
@@ -13707,7 +13912,7 @@ function calendar(ticks2, tickInterval, year, month, week, day, hour, minute, se
     return interval ? domain(nice(d, interval)) : scale;
   };
   scale.copy = function() {
-    return copy(scale, calendar(ticks2, tickInterval, year, month, week, day, hour, minute, second2, format2));
+    return copy(scale, calendar(ticks2, tickInterval, year, month, week, day, hour, minute, second2, format3));
   };
   return scale;
 }
@@ -18448,18 +18653,18 @@ var getTransitionVal = function getTransitionVal2(props, duration, easing) {
   }).join(",");
 };
 var isDev2 = process.env.NODE_ENV !== "production";
-var warn3 = function warn4(condition, format2, a2, b, c2, d, e, f) {
+var warn3 = function warn4(condition, format3, a2, b, c2, d, e, f) {
   if (isDev2 && typeof console !== "undefined" && console.warn) {
-    if (format2 === void 0) {
+    if (format3 === void 0) {
       console.warn("LogUtils requires an error message argument");
     }
     if (!condition) {
-      if (format2 === void 0) {
+      if (format3 === void 0) {
         console.warn("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");
       } else {
         var args = [a2, b, c2, d, e, f];
         var argIndex = 0;
-        console.warn(format2.replace(/%s/g, function() {
+        console.warn(format3.replace(/%s/g, function() {
           return args[argIndex++];
         }));
       }
@@ -29366,6 +29571,156 @@ function CommandShortcut({ keys: keys2, className }) {
     i
   )) });
 }
+var inputSizeClasses = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-[14px] py-2.5 text-md"
+};
+function boxClasses(destructive) {
+  return clsx_default(
+    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
+    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+    destructive ? "border-border-error focus-within:ring-border-error" : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand"
+  );
+}
+function FieldWrapper({
+  label,
+  required,
+  hint,
+  destructive,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col gap-sm font-body", className), children: [
+    label ? /* @__PURE__ */ jsxs("span", { className: "flex gap-xxs text-sm font-medium text-text-secondary", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "text-text-brand-tertiary", children: "*" }) : null
+    ] }) : null,
+    children,
+    hint ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx_default(
+          "text-sm font-normal",
+          destructive ? "text-text-error-primary" : "text-text-tertiary"
+        ),
+        children: hint
+      }
+    ) : null
+  ] });
+}
+function CheckboxBox({ selected, big }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default(
+        "flex shrink-0 items-center justify-center rounded-xs border",
+        big ? "size-5" : "size-4",
+        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
+      ),
+      children: selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3 text-fg-white", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M13.33 4 6 11.33 2.67 8", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+function SelectMenuItem({
+  label,
+  supportingText,
+  selected = false,
+  size = "sm",
+  leading,
+  multi = false,
+  disabled,
+  className,
+  ...rest
+}) {
+  const big = size !== "sm";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      disabled,
+      className: clsx_default(
+        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
+        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
+        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
+        className
+      ),
+      ...rest,
+      children: [
+        multi && /* @__PURE__ */ jsx(CheckboxBox, { selected, big }),
+        !multi && leading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leading }),
+        /* @__PURE__ */ jsxs("span", { className: clsx_default("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm"), children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-text-primary", children: label }),
+          supportingText && /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-text-tertiary", children: supportingText })
+        ] }),
+        !multi && selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0 text-fg-brand-primary", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M16.67 5 7.5 14.17 3.33 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
+function ComboBox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Search...",
+  disabled = false,
+  error = false,
+  label,
+  hint,
+  required,
+  className
+}) {
+  const selectedLabel = useMemo(
+    () => options.find((o) => o.value === value)?.label ?? "",
+    [options, value]
+  );
+  const [query, setQuery] = useState(selectedLabel);
+  const [open, setOpen] = useState(false);
+  const display = open ? query : selectedLabel;
+  const filtered = options.filter(
+    (o) => o.label.toLowerCase().includes(query.trim().toLowerCase())
+  );
+  const pick = (o) => {
+    onChange?.(o.value);
+    setQuery(o.label);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(FieldWrapper, { label, required, hint, destructive: error, className, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx_default(boxClasses(error), "px-lg py-md", disabled && "cursor-not-allowed bg-bg-secondary opacity-60"), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: display,
+          disabled,
+          placeholder,
+          onFocus: () => setOpen(true),
+          onBlur: () => setTimeout(() => setOpen(false), 120),
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+            onInputChange?.(e.target.value);
+          },
+          className: "min-w-0 flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: clsx_default("text-fg-quaternary transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(ChevronDown, {}) }) })
+    ] }),
+    open && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg", children: filtered.length ? filtered.map((o) => /* @__PURE__ */ jsx(
+      SelectMenuItem,
+      {
+        label: o.label,
+        supportingText: o.supportingText,
+        selected: o.value === value,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => pick(o)
+      },
+      o.value
+    )) : /* @__PURE__ */ jsx("div", { className: "px-md py-lg text-center text-sm text-text-tertiary", children: "No results" }) })
+  ] }) });
+}
 var isTextType = (t) => t === "heading" || t === "text";
 function ContentDivider({
   type = "heading",
@@ -30544,7 +30899,7 @@ function FilterLines2() {
     }
   ) });
 }
-function ChevronDown() {
+function ChevronDown2() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", strokeWidth: "1.333", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function FiltersDropdownMenu({
@@ -30578,7 +30933,7 @@ function FiltersDropdownMenu({
           /* @__PURE__ */ jsx(FilterLines2, {}),
           /* @__PURE__ */ jsx("span", { children: label }),
           active ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-bg-brand-solid px-1.5 text-xs font-medium text-text-white", children: count }) : null,
-          chevron ? /* @__PURE__ */ jsx(ChevronDown, {}) : null
+          chevron ? /* @__PURE__ */ jsx(ChevronDown2, {}) : null
         ]
       }
     ),
@@ -30794,44 +31149,6 @@ function HelpIcon2({
     /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: /* @__PURE__ */ jsx(Tooltip2, { text, supportingText, arrow }) })
   ] });
 }
-var inputSizeClasses = {
-  sm: "px-lg py-md text-sm",
-  md: "px-lg py-md text-md",
-  lg: "px-[14px] py-2.5 text-md"
-};
-function boxClasses(destructive) {
-  return clsx_default(
-    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
-    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
-    destructive ? "border-border-error focus-within:ring-border-error" : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand"
-  );
-}
-function FieldWrapper({
-  label,
-  required,
-  hint,
-  destructive,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col gap-sm font-body", className), children: [
-    label ? /* @__PURE__ */ jsxs("span", { className: "flex gap-xxs text-sm font-medium text-text-secondary", children: [
-      label,
-      required ? /* @__PURE__ */ jsx("span", { className: "text-text-brand-tertiary", children: "*" }) : null
-    ] }) : null,
-    children,
-    hint ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: clsx_default(
-          "text-sm font-normal",
-          destructive ? "text-text-error-primary" : "text-text-tertiary"
-        ),
-        children: hint
-      }
-    ) : null
-  ] });
-}
 function CalendarIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 text-fg-quaternary", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M17.5 8.333H2.5M13.333 1.667V5M6.667 1.667V5M6.5 18.333h7c1.4 0 2.1 0 2.635-.272a2.5 2.5 0 0 0 1.093-1.093C17.5 16.433 17.5 15.733 17.5 14.333v-7c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.093C15.6 3.333 14.9 3.333 13.5 3.333h-7c-1.4 0-2.1 0-2.635.272A2.5 2.5 0 0 0 2.772 4.698C2.5 5.233 2.5 5.933 2.5 7.333v7c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.093c.535.272 1.235.272 2.635.272Z", stroke: "currentColor", strokeWidth: "1.667", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -31760,57 +32077,6 @@ function ModalActions({
     )
   ] });
 }
-function CheckboxBox({ selected, big }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: clsx_default(
-        "flex shrink-0 items-center justify-center rounded-xs border",
-        big ? "size-5" : "size-4",
-        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
-      ),
-      children: selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3 text-fg-white", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M13.33 4 6 11.33 2.67 8", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
-    }
-  );
-}
-function SelectMenuItem({
-  label,
-  supportingText,
-  selected = false,
-  size = "sm",
-  leading,
-  multi = false,
-  disabled,
-  className,
-  ...rest
-}) {
-  const big = size !== "sm";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "option",
-      "aria-selected": selected,
-      disabled,
-      className: clsx_default(
-        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
-        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
-        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
-        className
-      ),
-      ...rest,
-      children: [
-        multi && /* @__PURE__ */ jsx(CheckboxBox, { selected, big }),
-        !multi && leading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leading }),
-        /* @__PURE__ */ jsxs("span", { className: clsx_default("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm"), children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-text-primary", children: label }),
-          supportingText && /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-text-tertiary", children: supportingText })
-        ] }),
-        !multi && selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0 text-fg-brand-primary", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M16.67 5 7.5 14.17 3.33 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
-      ]
-    }
-  );
-}
 function Tag({
   size = "md",
   children,
@@ -31940,20 +32206,6 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsx("span", { className: clsx_default("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary"), children: hint })
   ] });
 }
-function IconBox({ size = 20, className, children }) {
-  const icon = isValidElement(children) ? cloneElement(children, {
-    viewBox: children.props.viewBox ?? "0 0 24 24",
-    className: clsx_default("w-full h-full", children.props.className)
-  }) : children;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: clsx_default("relative flex shrink-0 items-center justify-center", className),
-      style: { width: size, height: size },
-      children: icon
-    }
-  );
-}
 var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
   /* @__PURE__ */ jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
   online !== void 0 && /* @__PURE__ */ jsx(
@@ -32207,7 +32459,7 @@ function NavItemBase({
               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
             ] }),
             badge != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-utility-neutral-200 bg-utility-neutral-50 px-md py-xxs text-xs font-medium text-utility-neutral-700", children: badge }),
-            trailingChevron && /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
+            trailingChevron && /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
           ]
         }
       )
@@ -32245,7 +32497,7 @@ function NavItemDropdownBase({
                 icon && /* @__PURE__ */ jsx(IconBox, { size: 20, className: "text-fg-quaternary", children: icon }),
                 /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
               ] }),
-              /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: clsx_default("transition-transform", open && "rotate-180") }) })
+              /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown, { className: clsx_default("transition-transform", open && "rotate-180") }) })
             ]
           }
         )
@@ -32359,7 +32611,7 @@ function NumberInput({
   const dec = () => set2(value - step);
   const inc = () => set2(value + step);
   const Minus = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
-  const Plus = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
+  const Plus2 = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
   const Chevron5 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const numberEl = /* @__PURE__ */ jsx(
     "input",
@@ -32382,7 +32634,7 @@ function NumberInput({
   const box = layout === "horizontal" ? /* @__PURE__ */ jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     /* @__PURE__ */ jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex items-center justify-center border-r border-border-primary p-2.5 text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: Minus }),
     numberEl,
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex items-center justify-center border-l border-border-primary p-2.5 text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: Plus })
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex items-center justify-center border-l border-border-primary p-2.5 text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: Plus2 })
   ] }) : /* @__PURE__ */ jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     numberEl,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col self-stretch border-l border-border-primary", children: [
@@ -32472,8 +32724,8 @@ function PaginationNumberBase({
     }
   );
 }
-var ArrowLeft = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15.83 10H4.17M4.17 10l5 5M4.17 10l5-5", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var ArrowRight = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4.17 10h11.66M15.83 10l-5 5M15.83 10l-5-5", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ArrowLeft2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15.83 10H4.17M4.17 10l5 5M4.17 10l5-5", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ArrowRight2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4.17 10h11.66M15.83 10l-5 5M15.83 10l-5-5", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function PaginationButtonGroupBase({
   cellType = "number",
   active = false,
@@ -32502,11 +32754,11 @@ function PaginationButtonGroupBase({
       ),
       ...rest,
       children: [
-        isLeading && (icon ?? /* @__PURE__ */ jsx(ArrowLeft, {})),
+        isLeading && (icon ?? /* @__PURE__ */ jsx(ArrowLeft2, {})),
         (isLeading || isTrailing) && /* @__PURE__ */ jsx("span", { className: "px-xxs", children: children ?? (isLeading ? "Previous" : "Next") }),
-        isTrailing && (icon ?? /* @__PURE__ */ jsx(ArrowRight, {})),
+        isTrailing && (icon ?? /* @__PURE__ */ jsx(ArrowRight2, {})),
         isNumber3 && children,
-        isIcon && (icon ?? /* @__PURE__ */ jsx(ArrowRight, {}))
+        isIcon && (icon ?? /* @__PURE__ */ jsx(ArrowRight2, {}))
       ]
     }
   );
@@ -32764,6 +33016,7 @@ function TagChip({ label, onRemove }) {
 function TagsInputField({
   tags = [],
   onRemoveTag,
+  onAddTag,
   variant = "inner",
   size = "md",
   label,
@@ -32774,6 +33027,21 @@ function TagsInputField({
   placeholder = "Add tag",
   ...rest
 }) {
+  const [draft, setDraft] = useState("");
+  const commit = (raw) => {
+    const next = raw.trim();
+    if (!next || tags.includes(next)) return;
+    onAddTag?.(next);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(draft);
+      setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length) {
+      onRemoveTag?.(tags.length - 1);
+    }
+  };
   const chips = tags.map((t, i) => /* @__PURE__ */ jsx(TagChip, { label: t, onRemove: onRemoveTag ? () => onRemoveTag(i) : void 0 }, i));
   const box = (inner) => /* @__PURE__ */ jsxs(
     "div",
@@ -32790,7 +33058,12 @@ function TagsInputField({
           {
             placeholder,
             className: "min-w-[80px] flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder",
-            ...rest
+            ...rest,
+            ...onAddTag ? {
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown
+            } : {}
           }
         )
       ]
@@ -34193,6 +34466,6 @@ object-assign/index.js:
   *)
 */
 
-export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditor, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu, useTextEditor };
+export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, Calendar, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, ComboBox, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditor, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu, useTextEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map