@borisj74/bv-ds 0.1.8 → 0.1.9

package/dist/index.cjs

@@ -2,6 +2,9 @@
 
 var React28 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactBigCalendar = require('react-big-calendar');
+var dateFns = require('date-fns');
+var locale$1 = require('date-fns/locale');
 var bvDsIcons = require('@borisj74/bv-ds-icons');
 var react = require('@tiptap/react');
 var starterKit = require('@tiptap/starter-kit');
@@ -6122,6 +6125,91 @@ function ButtonUtility({
     ) : null
   ] });
 }
+function IconBox({ size = 20, className, children }) {
+  const icon = React28.isValidElement(children) ? React28.cloneElement(children, {
+    viewBox: children.props.viewBox ?? "0 0 24 24",
+    className: clsx_default("w-full h-full", children.props.className)
+  }) : children;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx_default(
+        "flex flex-wrap items-start justify-between gap-lg font-body",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-lg", children: [
+          dateIcon,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xxs", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-md", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-text-primary", children: title }),
+              badge
+            ] }),
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-tertiary", children: subtitle }) : null
+          ] })
+        ] }),
+        actions ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-text-quaternary", children: weekday }),
+        /* @__PURE__ */ jsxRuntime.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",
@@ -6213,6 +6301,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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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] = React28.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__ */ jsxRuntime.jsxs("div", { className: clsx_default("relative inline-block font-body", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron2, {}) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: opt.label }),
+                opt.shortcut ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-text-quaternary", children: opt.shortcut }) : null
+              ]
+            }
+          ) }, opt.value);
+        })
+      }
+    ) : null
+  ] });
+}
+var localizer = reactBigCalendar.dateFnsLocalizer({
+  format: dateFns.format,
+  parse: dateFns.parse,
+  // Monday-first week, matching the Figma column-header order (Mon…Sun).
+  startOfWeek: (date2) => dateFns.startOfWeek(date2, { weekStartsOn: 1 }),
+  getDay: dateFns.getDay,
+  locales: { "en-US": locale$1.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__ */ jsxRuntime.jsx(IconBox, { size: 20, children: dir === "left" ? /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ArrowLeft, {}) : /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ArrowRight, {}) });
+}
+function Calendar({
+  events,
+  defaultView = "month",
+  defaultDate,
+  onNavigate,
+  onView,
+  onSelectEvent,
+  onSelectSlot,
+  onAddEvent,
+  className
+}) {
+  const [date2, setDate] = React28.useState(defaultDate ?? new Date(2027, 0, 1));
+  const [view, setView] = React28.useState(defaultView);
+  const [selected, setSelected] = React28.useState(null);
+  const handleNavigate = React28.useCallback(
+    (next) => {
+      setDate(next);
+      onNavigate?.(next);
+    },
+    [onNavigate]
+  );
+  const handleView = React28.useCallback(
+    (next) => {
+      setView(next);
+      onView?.(next);
+    },
+    [onView]
+  );
+  const handleSelectSlot = React28.useCallback(
+    (slot) => {
+      setSelected(slot.start);
+      onSelectSlot?.(slot);
+    },
+    [onSelectSlot]
+  );
+  const components = React28.useMemo(
+    () => ({
+      // Header bar → CalendarHeader primitive + nav/view/add controls.
+      toolbar: (tb) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border-secondary px-3xl py-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CalendarHeader,
+        {
+          title: tb.label,
+          actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center overflow-hidden rounded-md border border-border-primary shadow-xs", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavArrow, { dir: "left" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavArrow, { dir: "right" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarViewDropdown,
+              {
+                value: tb.view,
+                onChange: (v) => tb.onView(v)
+              }
+            ),
+            onAddEvent && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 20, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.Plus, {}) }) }),
+                  "Add event"
+                ]
+              }
+            )
+          ] })
+        }
+      ) }),
+      month: {
+        // Weekday column header → CalendarColumnHeader primitive.
+        header: ({ label }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center border-b border-r border-border-secondary bg-bg-primary p-md", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarColumnHeader, { weekday: label, date: "" }) }),
+        // Date-number circle (Figma 7991:81840): default / today / selected.
+        dateHeader: ({ date: cellDate, label }) => {
+          const today = dateFns.isSameDay(cellDate, /* @__PURE__ */ new Date());
+          const isSel = selected ? dateFns.isSameDay(cellDate, selected) : false;
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex p-md", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          CalendarEvent,
+          {
+            title: event.title,
+            time: event.allDay ? void 0 : dateFns.format(event.start, "h:mm a"),
+            color: event.color ?? "brand",
+            filled: true
+          }
+        )
+      }
+    }),
+    [onAddEvent, selected]
+  );
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        reactBigCalendar.Calendar,
+        {
+          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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -6350,44 +6713,6 @@ function CalendarCellDayWeekView({
     }
   );
 }
-function CalendarColumnHeader({
-  weekday,
-  date: date2,
-  type,
-  current = false,
-  orientation = "vertical",
-  breakpoint = "desktop",
-  className
-}) {
-  const state = type ?? (current ? "selected" : "default");
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-text-quaternary", children: weekday }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
@@ -6466,39 +6791,6 @@ function CalendarEventDayWeekView({
     }
   );
 }
-function CalendarHeader({
-  title,
-  range: range6,
-  supportingText,
-  badge,
-  dateIcon,
-  actions,
-  className
-}) {
-  const subtitle = range6 ?? supportingText;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: clsx_default(
-        "flex flex-wrap items-start justify-between gap-lg font-body",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-lg", children: [
-          dateIcon,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xxs", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-md", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-text-primary", children: title }),
-              badge
-            ] }),
-            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-tertiary", children: subtitle }) : null
-          ] })
-        ] }),
-        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-md", children: actions }) : null
-      ]
-    }
-  );
-}
 function CalendarRowLabel({ label, time: time2, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -6532,93 +6824,6 @@ function CalendarTimemarker({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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] = React28.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__ */ jsxRuntime.jsxs("div", { className: clsx_default("relative inline-block font-body", className), children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron2, {}) })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: opt.label }),
-                opt.shortcut ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-text-quaternary", children: opt.shortcut }) : null
-              ]
-            }
-          ) }, opt.value);
-        })
-      }
-    ) : null
-  ] });
-}
 function CardHeader({
   title,
   description,
@@ -7705,20 +7910,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++];
         }));
       }
@@ -10732,7 +10937,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 : "");
@@ -11722,10 +11927,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);
@@ -12277,7 +12482,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;
@@ -12320,10 +12525,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] });
@@ -12339,7 +12544,7 @@ function locale_default(locale3) {
 
 // node_modules/d3-format/src/defaultLocale.js
 var locale;
-var format;
+var format2;
 var formatPrefix;
 defaultLocale({
   thousands: ",",
@@ -12348,7 +12553,7 @@ defaultLocale({
 });
 function defaultLocale(definition) {
   locale = locale_default(definition);
-  format = locale.format;
+  format2 = locale.format;
   formatPrefix = locale.formatPrefix;
   return locale;
 }
@@ -12393,7 +12598,7 @@ function tickFormat(start, stop, count, specifier) {
       break;
     }
   }
-  return format(specifier);
+  return format2(specifier);
 }
 
 // node_modules/d3-scale/src/linear.js
@@ -12572,7 +12777,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);
@@ -13265,14 +13470,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;
         }
@@ -13323,14 +13528,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;
       }
@@ -13703,9 +13908,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);
   }
@@ -13720,7 +13925,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();
@@ -13728,7 +13933,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;
 }
@@ -18469,18 +18674,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++];
         }));
       }
@@ -31961,20 +32166,6 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsxRuntime.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 = React28.isValidElement(children) ? React28.cloneElement(children, {
-    viewBox: children.props.viewBox ?? "0 0 24 24",
-    className: clsx_default("w-full h-full", children.props.className)
-  }) : children;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
   online !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -32380,7 +32571,7 @@ function NumberInput({
   const dec = () => set2(value - step);
   const inc = () => set2(value + step);
   const Minus = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
-  const Plus = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
+  const Plus2 = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
   const Chevron5 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const numberEl = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
@@ -32403,7 +32594,7 @@ function NumberInput({
   const box = layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     numberEl,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col self-stretch border-l border-border-primary", children: [
@@ -32493,8 +32684,8 @@ function PaginationNumberBase({
     }
   );
 }
-var ArrowLeft = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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,
@@ -32523,11 +32714,11 @@ function PaginationButtonGroupBase({
       ),
       ...rest,
       children: [
-        isLeading && (icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft, {})),
+        isLeading && (icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft2, {})),
         (isLeading || isTrailing) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-xxs", children: children ?? (isLeading ? "Previous" : "Next") }),
-        isTrailing && (icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRight, {})),
+        isTrailing && (icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRight2, {})),
         isNumber3 && children,
-        isIcon && (icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRight, {}))
+        isIcon && (icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRight2, {}))
       ]
     }
   );
@@ -34233,6 +34424,7 @@ exports.ButtonDestructive = ButtonDestructive;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupSegment = ButtonGroupSegment;
 exports.ButtonUtility = ButtonUtility;
+exports.Calendar = Calendar;
 exports.CalendarCell = CalendarCell;
 exports.CalendarCellDayWeekView = CalendarCellDayWeekView;
 exports.CalendarColumnHeader = CalendarColumnHeader;