@openwarelabs/ui 0.0.0-stage → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,4622 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionItem: () => AccordionItem,
+  Alert: () => Alert,
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
+  Badge: () => Badge,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  Calendar: () => Calendar,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
+  Chip: () => Chip,
+  ChoiceCard: () => ChoiceCard,
+  CloseButton: () => CloseButton,
+  Code: () => Code,
+  CodeBlock: () => CodeBlock,
+  ColorField: () => ColorField,
+  ColorPicker: () => ColorPicker,
+  ColorSwatch: () => ColorSwatch,
+  Combobox: () => Combobox,
+  CommandPalette: () => CommandPalette,
+  ConfirmDialog: () => ConfirmDialog,
+  CopyButton: () => CopyButton,
+  DatePicker: () => DatePicker,
+  Dialog: () => Dialog,
+  Disclosure: () => Disclosure,
+  DotGrid: () => DotGrid,
+  Drawer: () => Drawer,
+  EmptyState: () => EmptyState,
+  Field: () => Field,
+  Fieldset: () => Fieldset,
+  FileDropZone: () => FileDropZone,
+  FileTree: () => FileTree,
+  Input: () => Input,
+  InputOTP: () => InputOTP,
+  Kbd: () => Kbd,
+  Link: () => Link,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  MenuLabel: () => MenuLabel,
+  MenuSeparator: () => MenuSeparator,
+  NavItem: () => NavItem,
+  NavList: () => NavList,
+  NumberField: () => NumberField,
+  Pagination: () => Pagination,
+  Popover: () => Popover,
+  ProgressBar: () => ProgressBar,
+  ProgressCircle: () => ProgressCircle,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  ScrollShadow: () => ScrollShadow,
+  SearchField: () => SearchField,
+  SectionHeading: () => SectionHeading,
+  SegmentedControl: () => SegmentedControl,
+  Select: () => Select,
+  Separator: () => Separator,
+  SettingsRow: () => SettingsRow,
+  SiteHeader: () => SiteHeader,
+  Skeleton: () => Skeleton,
+  SkeletonRows: () => SkeletonRows,
+  Slider: () => Slider,
+  Snippet: () => Snippet,
+  Spinner: () => Spinner,
+  Stack: () => Stack,
+  Stat: () => Stat,
+  Steps: () => Steps,
+  Switch: () => Switch,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  Tag: () => Tag,
+  TagGroup: () => TagGroup,
+  Textarea: () => Textarea,
+  Toaster: () => Toaster,
+  ToggleButton: () => ToggleButton,
+  Tooltip: () => Tooltip,
+  User: () => User,
+  VisuallyHidden: () => VisuallyHidden,
+  addDays: () => addDays,
+  addMonths: () => addMonths,
+  applyBrand: () => applyBrand,
+  brandCss: () => brandCss,
+  brandPresets: () => brandPresets,
+  brandScale: () => brandScale,
+  brandSteps: () => brandSteps,
+  brandVariables: () => brandVariables,
+  buttonClassName: () => buttonClassName,
+  copyText: () => copyText,
+  cx: () => cx,
+  filterCommands: () => filterCommands,
+  formatDate: () => formatDate,
+  getInitials: () => getInitials,
+  linkClassName: () => linkClassName,
+  paginationItems: () => paginationItems,
+  parseISO: () => parseISO,
+  toISO: () => toISO,
+  toast: () => import_sonner.toast,
+  todayISO: () => todayISO,
+  useControllableState: () => useControllableState,
+  useDismiss: () => useDismiss,
+  useFloating: () => useFloating,
+  useMenuKeyboard: () => useMenuKeyboard,
+  useModalDialog: () => useModalDialog,
+  usePresence: () => usePresence,
+  weekday: () => weekday
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.tsx
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...values) {
+  const classes = [];
+  for (const value of values) {
+    if (!value) continue;
+    if (typeof value === "string") {
+      classes.push(value);
+      continue;
+    }
+    for (const [name, on] of Object.entries(value)) if (on) classes.push(name);
+  }
+  return classes.join(" ");
+}
+
+// src/utils/text.ts
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = words[0]?.[0] ?? "";
+  const last = words.length > 1 ? words[words.length - 1]?.[0] ?? "" : "";
+  return `${first}${last}`.toUpperCase();
+}
+function toAriaShortcut(shortcut) {
+  return shortcut.replace("\u2318", "Meta+").replace("Ctrl+", "Control+");
+}
+
+// src/components/Spinner/Spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Spinner({ size = "md", tone = "primary", label = "Loading", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: cx("ow-spinner", `ow-spinner--${size}`, `ow-spinner--${tone}`, className),
+      ...label ? { role: "status", "aria-label": label } : { "aria-hidden": true }
+    }
+  );
+}
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function buttonClassName({
+  variant = "secondary",
+  size = "md",
+  shape = "rounded",
+  iconOnly = false
+} = {}) {
+  return cx(
+    "ow-button",
+    `ow-button--${variant}`,
+    `ow-button--${size}`,
+    shape === "pill" && "ow-button--pill",
+    iconOnly && "ow-button--icon-only"
+  );
+}
+var Button = (0, import_react.forwardRef)(function Button2({
+  children,
+  className,
+  disabled,
+  endIcon,
+  fullWidth = false,
+  iconOnly = false,
+  loading = false,
+  shape = "rounded",
+  shortcut,
+  size = "md",
+  startIcon,
+  type = "button",
+  variant = "secondary",
+  ...buttonProps
+}, ref) {
+  const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "sm", tone: "current", label: "" }) : startIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      ref,
+      className: cx(
+        buttonClassName({ variant, size, shape, iconOnly }),
+        shortcut && !iconOnly && "ow-button--with-shortcut",
+        loading && "ow-button--loading",
+        fullWidth && "ow-button--full",
+        className
+      ),
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
+      ...buttonProps,
+      children: [
+        leading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ow-button__icon", children: leading }) : null,
+        iconOnly && loading ? null : children,
+        endIcon && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ow-button__icon", children: endIcon }) : null,
+        shortcut && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { "aria-hidden": "true", className: "ow-button__shortcut", children: shortcut }) : null
+      ]
+    }
+  );
+});
+
+// src/components/Button/ButtonGroup.tsx
+var import_react3 = require("react");
+
+// src/hooks/useControllableState.ts
+var import_react2 = require("react");
+function useControllableState(value, defaultValue, onChange) {
+  const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const currentRef = (0, import_react2.useRef)(current);
+  currentRef.current = current;
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const setValue = (0, import_react2.useCallback)(
+    (next) => {
+      const resolved = typeof next === "function" ? next(currentRef.current) : next;
+      if (Object.is(resolved, currentRef.current)) return;
+      if (!isControlled) setInternal(resolved);
+      onChangeRef.current?.(resolved);
+    },
+    [isControlled]
+  );
+  return [current, setValue];
+}
+
+// src/icons.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function icon(paths) {
+  return function Icon({ size = 16, strokeWidth = 2, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: paths
+      }
+    );
+  };
+}
+var CheckIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" }));
+var ChevronDownIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }));
+var SearchIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 21-4.3-4.3" })
+  ] })
+);
+var CornerDownLeftIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 10 4 15 9 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
+  ] })
+);
+var XIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
+  ] })
+);
+var UserIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+  ] })
+);
+var TrashIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+  ] })
+);
+var CircleCheckIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 12 2 2 4-4" })
+  ] })
+);
+var CircleAlertIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+  ] })
+);
+var ChevronRightIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }));
+var ChevronLeftIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 18-6-6 6-6" }));
+var ChevronUpIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m18 15-6-6-6 6" }));
+var MinusIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }));
+var PlusIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 5v14" })
+  ] })
+);
+var InfoIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8h.01" })
+  ] })
+);
+var TriangleAlertIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17h.01" })
+  ] })
+);
+var PipetteIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m2 22 1-1h3l9-9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 21v-3l9-9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+  ] })
+);
+var CopyIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] })
+);
+var CalendarIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 2v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 2v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 10h18" })
+  ] })
+);
+var FileIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  ] })
+);
+var FolderIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" })
+);
+var FolderOpenIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" })
+);
+var UploadIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+  ] })
+);
+var ArrowUpRightIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 7h10v10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 17 17 7" })
+  ] })
+);
+var ArrowUpIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 12 7-7 7 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19V5" })
+  ] })
+);
+var ArrowDownIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 5v14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m19 12-7 7-7-7" })
+  ] })
+);
+var ChevronsUpDownIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 9 5-5 5 5" })
+  ] })
+);
+var InboxIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
+  ] })
+);
+var EllipsisIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+);
+
+// src/components/Button/ButtonGroup.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ButtonGroup({ attached = true, orientation = "horizontal", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      role: "group",
+      className: cx(
+        "ow-button-group",
+        attached && "ow-button-group--attached",
+        orientation === "vertical" && "ow-button-group--vertical",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size = "md", label = "Close", className, type = "button", ...buttonProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ref,
+      type,
+      "aria-label": label,
+      className: cx("ow-close-button", `ow-close-button--${size}`, className),
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XIcon, { size: size === "sm" ? 14 : 17 })
+    }
+  );
+});
+var ToggleButton = (0, import_react3.forwardRef)(function ToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, className, variant = "secondary", ...buttonProps }, ref) {
+  const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Button,
+    {
+      ref,
+      variant,
+      "aria-pressed": isPressed,
+      className: cx(isPressed && "ow-button--pressed", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setPressed(!isPressed);
+      },
+      ...buttonProps
+    }
+  );
+});
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_react5 = require("react");
+
+// src/hooks/useIndicator.ts
+var import_react4 = require("react");
+function useIndicator(containerRef, selector, key) {
+  (0, import_react4.useLayoutEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return void 0;
+    let frame = 0;
+    const measure = () => {
+      const selected = container.querySelector(selector);
+      if (!selected) {
+        delete container.dataset.indicator;
+        return;
+      }
+      container.style.setProperty("--ow-indicator-x", `${selected.offsetLeft}px`);
+      container.style.setProperty("--ow-indicator-y", `${selected.offsetTop}px`);
+      container.style.setProperty("--ow-indicator-w", `${selected.offsetWidth}px`);
+      container.style.setProperty("--ow-indicator-h", `${selected.offsetHeight}px`);
+      if (!container.dataset.indicator) {
+        container.dataset.indicator = "placed";
+        frame = requestAnimationFrame(() => {
+          frame = requestAnimationFrame(() => {
+            if (container.dataset.indicator) container.dataset.indicator = "ready";
+          });
+        });
+      }
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return () => cancelAnimationFrame(frame);
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    for (const child of container.children) observer.observe(child);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [containerRef, selector, key]);
+}
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  className,
+  ...aria
+}) {
+  const [current, setCurrent] = useControllableState(value, defaultValue ?? options[0]?.value ?? "", onChange);
+  const refs = (0, import_react5.useRef)([]);
+  const groupRef = (0, import_react5.useRef)(null);
+  useIndicator(groupRef, '[aria-checked="true"]', current);
+  const enabled = options.map((option, index) => ({ option, index })).filter(({ option }) => !option.disabled);
+  function onKeyDown(event, index) {
+    const keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+    let target;
+    if (event.key in keys) {
+      const position = enabled.findIndex((entry) => entry.index === index);
+      target = enabled[(position + keys[event.key] + enabled.length) % enabled.length]?.index;
+    } else if (event.key === "Home") target = enabled[0]?.index;
+    else if (event.key === "End") target = enabled[enabled.length - 1]?.index;
+    if (target === void 0) return;
+    event.preventDefault();
+    refs.current[target]?.focus();
+    setCurrent(options[target].value);
+  }
+  const focusable = options.some((option) => option.value === current && !option.disabled) ? current : enabled[0]?.option.value;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: groupRef,
+      role: "radiogroup",
+      className: cx("ow-segmented", `ow-segmented--${size}`, fullWidth && "ow-segmented--full", disabled && "ow-segmented--disabled", className),
+      ...aria,
+      children: [
+        options.map((option, index) => {
+          const isSelected = option.value === current;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "button",
+            {
+              ref: (element) => {
+                refs.current[index] = element;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": isSelected,
+              "aria-label": option["aria-label"],
+              tabIndex: option.value === focusable ? 0 : -1,
+              disabled: disabled || option.disabled,
+              className: cx("ow-segmented__item", isSelected && "ow-segmented__item--selected"),
+              onClick: () => setCurrent(option.value),
+              onKeyDown: (event) => onKeyDown(event, index),
+              children: [
+                option.icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ow-segmented__icon", children: option.icon }) : null,
+                option.label
+              ]
+            },
+            option.value
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+// src/components/ChoiceCard/ChoiceCard.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ChoiceCard = (0, import_react6.forwardRef)(function ChoiceCard2({ className, description, icon: icon2, recommended = false, shortcut, title, type = "button", ...buttonProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      ref,
+      className: cx("ow-choice", recommended && "ow-choice--recommended", className),
+      type,
+      "aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
+      ...buttonProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ow-choice__top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-choice__icon", children: icon2 }),
+          shortcut ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("kbd", { "aria-hidden": "true", className: "ow-choice__shortcut", children: shortcut }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ow-choice__text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-choice__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-choice__description", children: description })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/CodeBlock/CodeBlock.tsx
+var import_react7 = require("react");
+
+// src/utils/copyText.ts
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+      ok = false;
+    }
+    area.remove();
+    return ok;
+  }
+}
+
+// src/components/CodeBlock/CodeBlock.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly = false, tone = "default", onCopy, className }) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const timer = (0, import_react7.useRef)(0);
+  (0, import_react7.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cx(
+        "ow-copy-button",
+        tone === "onDark" && "ow-copy-button--on-dark",
+        iconOnly && "ow-copy-button--icon-only",
+        copied && "ow-copy-button--copied",
+        className
+      ),
+      "aria-label": iconOnly ? copied ? copiedLabel : label : void 0,
+      onClick: async () => {
+        if (await copyText(value)) {
+          setCopied(true);
+          onCopy?.();
+          window.clearTimeout(timer.current);
+          timer.current = window.setTimeout(() => setCopied(false), 2e3);
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ow-copy-button__icon", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyIcon, { size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, { size: 14 })
+        ] }),
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copied ? copiedLabel : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+      ]
+    }
+  );
+}
+function CodeBlock({ code, html, title, language, showLineNumbers = false, copyable = true, maxHeight, className }) {
+  const hasHeader = title !== void 0 || language !== void 0;
+  const lines = code.replace(/\n$/, "").split("\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("ow-code-block", showLineNumbers && "ow-code-block--numbered", className), children: [
+    hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ow-code-block__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-code-block__title", children: title }),
+      language ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-code-block__language", children: language }) : null,
+      copyable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code" }) : null
+    ] }) : copyable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code", className: "ow-code-block__floating-copy" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("pre", { className: "ow-code-block__pre", style: maxHeight ? { maxHeight } : void 0, tabIndex: 0, children: [
+      showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-code-block__numbers", "aria-hidden": "true", children: lines.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: index + 1 }, index)) }) : null,
+      html ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "ow-code-block__code", dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "ow-code-block__code", children: code.replace(/\n$/, "") })
+    ] })
+  ] });
+}
+function Snippet({ value, prompt = "$", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("ow-snippet", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("code", { className: "ow-snippet__code", children: [
+      prompt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-snippet__prompt", "aria-hidden": "true", children: prompt }) : null,
+      value
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyButton, { value, iconOnly: true, label: `Copy ${value}` })
+  ] });
+}
+
+// src/components/Field/Field.tsx
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Field({ label, children, hint, error, className }) {
+  const generatedId = (0, import_react8.useId)();
+  const hintId = `${generatedId}-hint`;
+  const errorId = `${generatedId}-error`;
+  const child = (0, import_react8.isValidElement)(children) ? children : null;
+  const controlId = child?.props.id ?? `${generatedId}-control`;
+  const describedBy = [child?.props["aria-describedby"], hint ? hintId : void 0, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const invalidProp = child && typeof child.type !== "string" ? { isInvalid: child.props.isInvalid ?? Boolean(error) } : { "aria-invalid": error ? true : void 0 };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("ow-field", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
+    child ? (0, import_react8.cloneElement)(child, { id: controlId, "aria-describedby": describedBy, ...invalidProp }) : children,
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
+  ] });
+}
+
+// src/components/Input/Input.tsx
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid = false, size = "md", startContent, endContent, ...inputProps }, ref) {
+  const invalid = isInvalid || void 0;
+  if (startContent === void 0 && endContent === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        ref,
+        className: cx("ow-input", size === "sm" && "ow-input--sm", isInvalid && "ow-input--invalid", className),
+        "aria-invalid": invalid,
+        ...inputProps
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: cx(
+        "ow-input-group",
+        size === "sm" && "ow-input-group--sm",
+        isInvalid && "ow-input-group--invalid",
+        inputProps.disabled && "ow-input-group--disabled",
+        className
+      ),
+      children: [
+        startContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ow-input-group__addon", children: startContent }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
+        endContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ow-input-group__addon", children: endContent }) : null
+      ]
+    }
+  );
+});
+
+// src/components/SearchField/SearchField.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var SearchField = (0, import_react10.forwardRef)(function SearchField2({
+  value,
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  loading = false,
+  placeholder = "Search",
+  "aria-label": ariaLabel = "Search",
+  size = "md",
+  onKeyDown,
+  ...inputProps
+}, ref) {
+  const [text, setText] = useControllableState(value, defaultValue, onChange);
+  const inputRef = (0, import_react10.useRef)(null);
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape" && text) {
+      event.preventDefault();
+      event.stopPropagation();
+      setText("");
+    } else if (event.key === "Enter") {
+      onSubmit?.(text);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Input,
+    {
+      ref: (element) => {
+        inputRef.current = element;
+        assignRef(ref, element);
+      },
+      type: "search",
+      size,
+      placeholder,
+      "aria-label": ariaLabel,
+      value: text,
+      onChange: (event) => setText(event.target.value),
+      onKeyDown: handleKeyDown,
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchIcon, { size: size === "sm" ? 14 : 16 }),
+      endContent: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        CloseButton,
+        {
+          size: "sm",
+          label: "Clear search",
+          onClick: () => {
+            setText("");
+            inputRef.current?.focus();
+          }
+        }
+      ) : null,
+      ...inputProps
+    }
+  );
+});
+
+// src/components/NumberField/NumberField.tsx
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var decimals = (step) => (String(step).split(".")[1] ?? "").length;
+var NumberField = (0, import_react11.forwardRef)(function NumberField2({
+  value,
+  defaultValue = null,
+  onChange,
+  min,
+  max,
+  step = 1,
+  formatOptions,
+  size = "md",
+  isInvalid = false,
+  disabled,
+  className,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  ...inputProps
+}, ref) {
+  const [number, setNumber] = useControllableState(value, defaultValue, onChange);
+  const [draft, setDraft] = (0, import_react11.useState)(null);
+  const format = (n) => n === null ? "" : formatOptions ? new Intl.NumberFormat(void 0, formatOptions).format(n) : String(n);
+  const clamp = (n) => {
+    const rounded = Number(n.toFixed(decimals(step)));
+    return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, rounded));
+  };
+  function commit(text, keepEditing = false) {
+    setDraft(keepEditing ? text : null);
+    const cleaned = text.replace(/[^\d.,-]/g, "").replace(",", ".");
+    if (cleaned === "" || cleaned === "-") {
+      setNumber(null);
+      return;
+    }
+    const parsed = Number(cleaned);
+    if (Number.isNaN(parsed)) return;
+    const next = clamp(parsed);
+    setNumber(next);
+    if (keepEditing) setDraft(String(next));
+  }
+  function stepBy(multiple) {
+    const base = draft !== null && draft !== "" && !Number.isNaN(Number(draft)) ? Number(draft) : number ?? min ?? 0;
+    const next = clamp(base + step * multiple);
+    setNumber(next);
+    if (draft !== null) setDraft(String(next));
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const moves = {
+      ArrowUp: () => stepBy(1),
+      ArrowDown: () => stepBy(-1),
+      PageUp: () => stepBy(10),
+      PageDown: () => stepBy(-10),
+      Home: () => min !== void 0 && commit(String(min), draft !== null),
+      End: () => max !== void 0 && commit(String(max), draft !== null),
+      Enter: () => draft !== null && commit(draft, true)
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    move();
+  }
+  const atMin = min !== void 0 && number !== null && number <= min;
+  const atMax = max !== void 0 && number !== null && number >= max;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: cx(
+        "ow-number-field",
+        size === "sm" && "ow-number-field--sm",
+        isInvalid && "ow-number-field--invalid",
+        disabled && "ow-number-field--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ow-number-field__step",
+            "aria-label": "Decrease",
+            tabIndex: -1,
+            disabled: disabled || atMin,
+            onClick: () => stepBy(-1),
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MinusIcon, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            ref,
+            type: "text",
+            inputMode: decimals(step) > 0 || (min ?? 0) < 0 ? "decimal" : "numeric",
+            role: "spinbutton",
+            autoComplete: "off",
+            className: "ow-number-field__input",
+            "aria-valuenow": number ?? void 0,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuetext": number === null ? void 0 : format(number),
+            "aria-invalid": isInvalid || void 0,
+            disabled,
+            value: draft ?? format(number),
+            onFocus: (event) => {
+              onFocus?.(event);
+              setDraft(number === null ? "" : String(number));
+            },
+            onChange: (event) => setDraft(event.target.value),
+            onBlur: (event) => {
+              onBlur?.(event);
+              commit(event.target.value);
+            },
+            onKeyDown: handleKeyDown,
+            ...inputProps
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ow-number-field__step",
+            "aria-label": "Increase",
+            tabIndex: -1,
+            disabled: disabled || atMax,
+            onClick: () => stepBy(1),
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { size: 14 })
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/InputOTP/InputOTP.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function InputOTP({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  groupSize,
+  isInvalid = false,
+  disabled,
+  autoFocus,
+  "aria-label": ariaLabel = "Verification code",
+  name,
+  className
+}) {
+  const [code, setCode] = useControllableState(value, defaultValue, onChange);
+  const refs = (0, import_react12.useRef)([]);
+  const latest = (0, import_react12.useRef)(code);
+  latest.current = code;
+  const allowed = type === "numeric" ? /\d/ : /[a-z0-9]/i;
+  const clean = (text) => [...text].filter((char) => allowed.test(char)).join("").toUpperCase();
+  const chars = Array.from({ length }, (_, index) => code[index] ?? "");
+  function update(next, focusIndex) {
+    const trimmed = next.slice(0, length);
+    latest.current = trimmed;
+    setCode(trimmed);
+    refs.current[Math.min(focusIndex, length - 1)]?.focus();
+    if (trimmed.length === length && !trimmed.includes(" ")) onComplete?.(trimmed);
+  }
+  function setAt(index, char) {
+    const next = chars.map((existing, i) => i === index ? char : existing);
+    const firstGap = next.indexOf("");
+    return (firstGap === -1 ? next : next.slice(0, firstGap)).join("");
+  }
+  function onInput(index, text) {
+    const typed = clean(text);
+    if (!typed) return;
+    if (typed.length > 1) {
+      update(chars.slice(0, index).join("") + typed, index + typed.length);
+      return;
+    }
+    update(setAt(index, typed), index + 1);
+  }
+  function onKeyDown(index, event) {
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      if (chars[index]) update(code.slice(0, index) + code.slice(index + 1), index);
+      else if (index > 0) update(code.slice(0, index - 1) + code.slice(index), index - 1);
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      refs.current[Math.max(0, index - 1)]?.focus();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      refs.current[Math.min(length - 1, index + 1, code.length)]?.focus();
+    }
+  }
+  function onPaste(index, event) {
+    event.preventDefault();
+    const pasted = clean(event.clipboardData.getData("text"));
+    if (pasted) update(chars.slice(0, index).join("") + pasted, index + pasted.length);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
+    chars.map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "ow-otp__slot", children: [
+      groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "input",
+        {
+          ref: (element) => {
+            refs.current[index] = element;
+          },
+          className: "ow-otp__input",
+          type: "text",
+          inputMode: type === "numeric" ? "numeric" : "text",
+          autoComplete: index === 0 ? "one-time-code" : "off",
+          autoCapitalize: "characters",
+          maxLength: length,
+          "aria-label": `Character ${index + 1} of ${length}`,
+          "aria-invalid": isInvalid || void 0,
+          disabled,
+          autoFocus: autoFocus && index === 0,
+          value: char,
+          onFocus: (event) => {
+            const filled = latest.current.length;
+            if (index > filled) refs.current[filled]?.focus();
+            else event.target.select();
+          },
+          onChange: (event) => onInput(index, event.target.value.replace(char, "") || event.target.value),
+          onKeyDown: (event) => onKeyDown(index, event),
+          onPaste: (event) => onPaste(index, event)
+        }
+      )
+    ] }, index)),
+    name ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "hidden", name, value: code }) : null
+  ] });
+}
+
+// src/components/Textarea/Textarea.tsx
+var import_react13 = require("react");
+
+// src/utils/resizeTextArea.ts
+var surelyOverflowingLength = 2e4;
+function surelyOverflows(textArea, maxHeight) {
+  const text = textArea.value;
+  if (text.length > surelyOverflowingLength) return true;
+  const style = window.getComputedStyle(textArea);
+  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
+  if (!lineHeight) return false;
+  const needed = Math.ceil(maxHeight / lineHeight) + 1;
+  let lines = 1;
+  for (let index = text.indexOf("\n"); index !== -1 && lines < needed; index = text.indexOf("\n", index + 1))
+    lines += 1;
+  return lines >= needed;
+}
+function resizeTextArea(textArea) {
+  const maxHeight = Number.parseFloat(window.getComputedStyle(textArea).maxHeight);
+  if (Number.isFinite(maxHeight) && surelyOverflows(textArea, maxHeight)) {
+    textArea.style.height = `${maxHeight.toString()}px`;
+    textArea.style.overflowY = "auto";
+    return;
+  }
+  textArea.style.height = "auto";
+  const shouldScroll = Number.isFinite(maxHeight) && textArea.scrollHeight > maxHeight;
+  textArea.style.height = `${textArea.scrollHeight}px`;
+  textArea.style.overflowY = shouldScroll ? "auto" : "hidden";
+}
+
+// src/components/Textarea/Textarea.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var defaultAutoGrowMaxHeight = 180;
+function assignRef2(ref, element) {
+  if (typeof ref === "function") ref(element);
+  else if (ref) ref.current = element;
+}
+var Textarea = (0, import_react13.forwardRef)(function Textarea2({
+  autoGrow = false,
+  autoGrowMaxHeight = defaultAutoGrowMaxHeight,
+  bare = false,
+  className,
+  isInvalid = false,
+  onChange,
+  style,
+  value,
+  ...textareaProps
+}, ref) {
+  const textAreaRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useLayoutEffect)(() => {
+    if (autoGrow && textAreaRef.current) resizeTextArea(textAreaRef.current);
+  }, [autoGrow, autoGrowMaxHeight, value]);
+  function setTextAreaRef(element) {
+    textAreaRef.current = element;
+    assignRef2(ref, element);
+    if (autoGrow && element) resizeTextArea(element);
+  }
+  function handleChange(event) {
+    if (autoGrow && value === void 0) resizeTextArea(event.currentTarget);
+    onChange?.(event);
+  }
+  const textareaStyle = autoGrow ? {
+    ...style,
+    maxHeight: typeof autoGrowMaxHeight === "number" ? `${autoGrowMaxHeight}px` : autoGrowMaxHeight
+  } : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "textarea",
+    {
+      ...textareaProps,
+      ref: setTextAreaRef,
+      className: cx(
+        "ow-textarea",
+        bare && "ow-textarea--bare",
+        isInvalid && !bare && "ow-textarea--invalid",
+        autoGrow && "ow-textarea--auto-grow",
+        className
+      ),
+      "aria-invalid": isInvalid || void 0,
+      style: textareaStyle,
+      value,
+      onChange: handleChange
+    }
+  );
+});
+
+// src/components/Select/Select.tsx
+var import_react16 = require("react");
+
+// src/hooks/useFloating.ts
+var import_react14 = require("react");
+var margin = 8;
+function useFloating({
+  open,
+  anchorRef,
+  floatingRef,
+  placement = "bottom-start",
+  offset = 4,
+  matchWidth = false,
+  maxHeight = 360
+}) {
+  const [style, setStyle] = (0, import_react14.useState)({
+    position: "fixed",
+    inset: "auto",
+    left: 0,
+    right: "auto",
+    top: 0,
+    bottom: "auto",
+    visibility: "hidden"
+  });
+  const place = (0, import_react14.useCallback)(() => {
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!anchor || !floating) return;
+    const rect = anchor.getBoundingClientRect();
+    const width = Math.max(floating.offsetWidth, matchWidth ? rect.width : 0);
+    const height = floating.scrollHeight;
+    const below = window.innerHeight - rect.bottom - offset - margin;
+    const above = rect.top - offset - margin;
+    const wantsTop = placement.startsWith("top");
+    const fitsBelow = height <= below;
+    const fitsAbove = height <= above;
+    const top = wantsTop ? fitsAbove || above > below : !fitsBelow && above > below;
+    const align = placement.endsWith("start") ? "start" : placement.endsWith("end") ? "end" : "center";
+    let left = align === "start" ? rect.left : align === "end" ? rect.right - width : rect.left + rect.width / 2 - width / 2;
+    left = Math.min(Math.max(margin, left), window.innerWidth - width - margin);
+    floating.dataset.side = top ? "top" : "bottom";
+    setStyle({
+      position: "fixed",
+      inset: "auto",
+      margin: 0,
+      left,
+      right: "auto",
+      top: top ? "auto" : rect.bottom + offset,
+      bottom: top ? window.innerHeight - rect.top + offset : "auto",
+      minWidth: matchWidth ? rect.width : void 0,
+      maxHeight: Math.max(120, Math.min(maxHeight, top ? above : below)),
+      ["--ow-floating-origin"]: `${top ? "bottom" : "top"} ${align === "start" ? "left" : align === "end" ? "right" : "center"}`
+    });
+  }, [anchorRef, floatingRef, placement, offset, matchWidth, maxHeight]);
+  (0, import_react14.useLayoutEffect)(() => {
+    const floating = floatingRef.current;
+    if (!open || !floating) return;
+    try {
+      if (!floating.matches(":popover-open")) floating.showPopover();
+    } catch {
+    }
+    place();
+    return () => {
+      try {
+        if (floating.matches(":popover-open")) floating.hidePopover();
+      } catch {
+      }
+    };
+  }, [open, floatingRef, place]);
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const onScroll = (event) => {
+      if (floatingRef.current?.contains(event.target)) return;
+      place();
+    };
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => place());
+    if (floatingRef.current) observer?.observe(floatingRef.current);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", place);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open, place, floatingRef]);
+  return style;
+}
+function useDismiss(open, refs, onDismiss) {
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (refs.every((ref) => !ref.current?.contains(target))) onDismiss("outside");
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      event.stopPropagation();
+      onDismiss("escape");
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, onDismiss]);
+}
+var manualPopover = { popover: "manual" };
+
+// src/hooks/usePresence.ts
+var import_react15 = require("react");
+var exitDuration = 140;
+function usePresence(open, exitMs = exitDuration) {
+  const [mounted, setMounted] = (0, import_react15.useState)(open);
+  if (open && !mounted) setMounted(true);
+  (0, import_react15.useEffect)(() => {
+    if (open || !mounted) return void 0;
+    const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const timer = window.setTimeout(() => setMounted(false), reduceMotion ? 0 : exitMs);
+    return () => window.clearTimeout(timer);
+  }, [open, mounted, exitMs]);
+  return { mounted: open || mounted, state: open ? "open" : "closed" };
+}
+
+// src/components/Select/Select.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var menuGap = 4;
+var menuMaxHeight = 288;
+var typeaheadResetMs = 600;
+function isGroup(item) {
+  return "options" in item;
+}
+function textOf(option) {
+  return option.textValue ?? (typeof option.label === "string" ? option.label : option.value);
+}
+function Select({
+  value,
+  options,
+  onChange,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  id,
+  disabled = false,
+  placeholder = "Select\u2026",
+  size = "md",
+  isInvalid = false,
+  className,
+  valueClassName
+}) {
+  const listboxId = (0, import_react16.useId)();
+  const optionIdPrefix = (0, import_react16.useId)();
+  const triggerRef = (0, import_react16.useRef)(null);
+  const menuRef = (0, import_react16.useRef)(null);
+  const typeahead = (0, import_react16.useRef)({ text: "", timer: 0 });
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react16.useState)(-1);
+  const flat = (0, import_react16.useMemo)(() => options.flatMap((item) => isGroup(item) ? item.options : [item]), [options]);
+  const selectedIndex = flat.findIndex((option) => option.value === value);
+  const selected = flat[selectedIndex];
+  const optionId = (index) => `${optionIdPrefix}-${index}`;
+  const enabledFrom = (0, import_react16.useCallback)(
+    (start, step) => {
+      for (let index = start; index >= 0 && index < flat.length; index += step) {
+        if (!flat[index].disabled) return index;
+      }
+      return -1;
+    },
+    [flat]
+  );
+  const { mounted, state } = usePresence(isOpen);
+  const floatingStyle = useFloating({
+    open: mounted,
+    anchorRef: triggerRef,
+    floatingRef: menuRef,
+    offset: menuGap,
+    matchWidth: true,
+    maxHeight: menuMaxHeight
+  });
+  function open(startAt) {
+    if (disabled || isOpen) return;
+    setActiveIndex(
+      startAt === "first" ? enabledFrom(0, 1) : startAt === "last" ? enabledFrom(flat.length - 1, -1) : selectedIndex >= 0 && !flat[selectedIndex].disabled ? selectedIndex : enabledFrom(0, 1)
+    );
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function choose(index) {
+    const option = flat[index];
+    if (!option || option.disabled) return;
+    close();
+    triggerRef.current?.focus();
+    if (option.value !== value) onChange(option.value);
+  }
+  (0, import_react16.useEffect)(() => {
+    if (!isOpen || activeIndex < 0) return;
+    document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: "nearest" });
+  }, [isOpen, activeIndex]);
+  (0, import_react16.useEffect)(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!menuRef.current?.contains(target) && !triggerRef.current?.contains(target)) close();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [isOpen]);
+  (0, import_react16.useEffect)(() => {
+    if (disabled) setIsOpen(false);
+  }, [disabled]);
+  (0, import_react16.useEffect)(() => () => window.clearTimeout(typeahead.current.timer), []);
+  function findByTyping(key) {
+    const state2 = typeahead.current;
+    window.clearTimeout(state2.timer);
+    state2.text += key.toLowerCase();
+    state2.timer = window.setTimeout(() => {
+      state2.text = "";
+    }, typeaheadResetMs);
+    const from = isOpen ? activeIndex : selectedIndex;
+    const repeated = state2.text.length > 1 && [...state2.text].every((letter) => letter === state2.text[0]);
+    const search = repeated ? state2.text[0] : state2.text;
+    const start = repeated || state2.text.length === 1 ? from + 1 : from;
+    for (let offset = 0; offset < flat.length; offset += 1) {
+      const index = (Math.max(start, 0) + offset) % flat.length;
+      const option = flat[index];
+      if (!option.disabled && textOf(option).toLowerCase().startsWith(search)) {
+        if (isOpen) setActiveIndex(index);
+        else if (option.value !== value) onChange(option.value);
+        return;
+      }
+    }
+  }
+  function onKeyDown(event) {
+    if (disabled) return;
+    const { key } = event;
+    if (!isOpen) {
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+        event.preventDefault();
+        open(key === "ArrowUp" && selectedIndex < 0 ? "last" : void 0);
+      } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
+        findByTyping(key);
+      }
+      return;
+    }
+    switch (key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = enabledFrom(activeIndex + 1, 1);
+        if (next >= 0) setActiveIndex(next);
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const previous = enabledFrom(activeIndex - 1, -1);
+        if (previous >= 0) setActiveIndex(previous);
+        return;
+      }
+      case "Home":
+      case "PageUp":
+        event.preventDefault();
+        setActiveIndex(enabledFrom(0, 1));
+        return;
+      case "End":
+      case "PageDown":
+        event.preventDefault();
+        setActiveIndex(enabledFrom(flat.length - 1, -1));
+        return;
+      case "Enter":
+        event.preventDefault();
+        choose(activeIndex);
+        return;
+      case " ":
+        event.preventDefault();
+        if (typeahead.current.text) findByTyping(" ");
+        else choose(activeIndex);
+        return;
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+        return;
+      case "Tab":
+        close();
+        return;
+      default:
+        if (key.length === 1 && !event.metaKey && !event.ctrlKey) findByTyping(key);
+    }
+  }
+  let flatIndex = -1;
+  const renderOption = (option) => {
+    flatIndex += 1;
+    const index = flatIndex;
+    const isSelected = index === selectedIndex;
+    const isActive = index === activeIndex;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        id: optionId(index),
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": option.disabled || void 0,
+        className: cx("ow-option", {
+          "ow-option--active": isActive && !option.disabled,
+          "ow-option--selected": isSelected,
+          "ow-option--disabled": Boolean(option.disabled)
+        }),
+        onPointerMove: () => {
+          if (!option.disabled && activeIndex !== index) setActiveIndex(index);
+        },
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => choose(index),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckIcon, { size: 14 }) : null }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ow-option__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
+            option.description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ow-option__description", children: option.description }) : null
+          ] })
+        ]
+      },
+      `${option.value}-${index}`
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "button",
+      {
+        ref: triggerRef,
+        id,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? listboxId : void 0,
+        "aria-activedescendant": isOpen && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": isInvalid || void 0,
+        disabled,
+        title: selected ? textOf(selected) : void 0,
+        className: cx("ow-select", `ow-select--${size}`, { "ow-select--open": isOpen, "ow-select--invalid": isInvalid && !isOpen }, className),
+        onClick: () => isOpen ? close() : open(),
+        onKeyDown,
+        onBlur: (event) => {
+          if (!menuRef.current?.contains(event.relatedTarget)) close();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
+        ]
+      }
+    ),
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        ref: menuRef,
+        ...manualPopover,
+        "data-state": state,
+        id: listboxId,
+        role: "listbox",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        tabIndex: -1,
+        className: cx("ow-listbox", "ow-floating", `ow-listbox--${size}`),
+        style: floatingStyle,
+        children: [
+          options.map(
+            (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
+              item.options.map(renderOption)
+            ] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
+          ),
+          flat.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ow-listbox__empty", children: "No options" }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/components/Combobox/Combobox.tsx
+var import_react17 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function assignRef3(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var Combobox = (0, import_react17.forwardRef)(function Combobox2({
+  options,
+  value,
+  defaultValue = "",
+  onChange,
+  onInputChange,
+  placeholder = "Search\u2026",
+  emptyMessage = "No matches",
+  allowCustomValue = false,
+  size = "md",
+  isInvalid = false,
+  disabled = false,
+  id,
+  className,
+  ...aria
+}, ref) {
+  const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
+  const labelOf = (v) => options.find((option) => option.value === v)?.label ?? (allowCustomValue ? v : "");
+  const [text, setText] = (0, import_react17.useState)(() => labelOf(selected));
+  const [isOpen, setOpen] = (0, import_react17.useState)(false);
+  const [typed, setTyped] = (0, import_react17.useState)(false);
+  const [active, setActive] = (0, import_react17.useState)(-1);
+  const inputRef = (0, import_react17.useRef)(null);
+  const fieldRef = (0, import_react17.useRef)(null);
+  const listRef = (0, import_react17.useRef)(null);
+  const listId = (0, import_react17.useId)();
+  const optionId = (index) => `${listId}-${index}`;
+  const results = (0, import_react17.useMemo)(() => {
+    const query = text.trim().toLowerCase();
+    if (!typed || !query) return options;
+    return options.filter(
+      (option) => option.label.toLowerCase().includes(query) || typeof option.description === "string" && option.description.toLowerCase().includes(query)
+    );
+  }, [options, text, typed]);
+  (0, import_react17.useEffect)(() => {
+    if (!isOpen) setText(labelOf(selected));
+  }, [selected, options]);
+  const { mounted, state } = usePresence(isOpen);
+  const style = useFloating({ open: mounted, anchorRef: fieldRef, floatingRef: listRef, matchWidth: true, maxHeight: 288 });
+  function open() {
+    if (disabled || isOpen) return;
+    setOpen(true);
+    const index = results.findIndex((option) => option.value === selected);
+    setActive(index >= 0 ? index : results.findIndex((option) => !option.disabled));
+  }
+  function close(restore = true) {
+    setOpen(false);
+    setTyped(false);
+    if (!restore) return;
+    if (allowCustomValue) {
+      if (text !== labelOf(selected)) {
+        const match = options.find((option) => option.label.toLowerCase() === text.trim().toLowerCase());
+        setSelected(match ? match.value : text);
+      }
+    } else if (text.trim() === "") setSelected("");
+    else setText(labelOf(selected));
+  }
+  useDismiss(isOpen, [fieldRef, listRef], () => close());
+  function choose(option) {
+    if (!option || option.disabled) return;
+    setSelected(option.value);
+    setText(option.label);
+    setOpen(false);
+    setTyped(false);
+  }
+  function move(step) {
+    if (!results.length) return;
+    let next = active;
+    for (let tries = 0; tries < results.length; tries += 1) {
+      next = (next + step + results.length) % results.length;
+      if (!results[next].disabled) break;
+    }
+    setActive(next);
+  }
+  (0, import_react17.useEffect)(() => {
+    if (isOpen && active >= 0) document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
+  }, [active, isOpen]);
+  function onKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) open();
+        else move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!isOpen) open();
+        else move(-1);
+        break;
+      case "Enter":
+        if (isOpen && active >= 0) {
+          event.preventDefault();
+          choose(results[active]);
+        } else if (isOpen) close();
+        break;
+      case "Escape":
+        if (isOpen) return;
+        if (text) {
+          event.preventDefault();
+          setText("");
+          setSelected("");
+        }
+        break;
+      case "Tab":
+        if (isOpen) close();
+        break;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        ref: fieldRef,
+        className: cx(
+          "ow-input-group",
+          "ow-combobox",
+          size === "sm" && "ow-input-group--sm",
+          isInvalid && "ow-input-group--invalid",
+          disabled && "ow-input-group--disabled",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "input",
+            {
+              ref: (element) => {
+                inputRef.current = element;
+                assignRef3(ref, element);
+              },
+              id,
+              className: "ow-input-group__input",
+              role: "combobox",
+              "aria-autocomplete": "list",
+              "aria-expanded": isOpen,
+              "aria-controls": isOpen ? listId : void 0,
+              "aria-activedescendant": isOpen && active >= 0 ? optionId(active) : void 0,
+              "aria-invalid": isInvalid || void 0,
+              autoComplete: "off",
+              disabled,
+              placeholder,
+              value: text,
+              onChange: (event) => {
+                setText(event.target.value);
+                setTyped(true);
+                onInputChange?.(event.target.value);
+                if (!isOpen) setOpen(true);
+                setActive(0);
+              },
+              onClick: open,
+              onKeyDown,
+              ...aria
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ow-combobox__toggle",
+              tabIndex: -1,
+              "aria-label": isOpen ? "Hide options" : "Show options",
+              disabled,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => {
+                if (isOpen) close();
+                else {
+                  open();
+                  inputRef.current?.focus();
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
+            }
+          )
+        ]
+      }
+    ),
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        ref: listRef,
+        ...manualPopover,
+        "data-state": state,
+        id: listId,
+        role: "listbox",
+        "aria-label": aria["aria-label"],
+        "aria-labelledby": aria["aria-labelledby"],
+        className: cx("ow-listbox", "ow-floating", `ow-listbox--${size}`),
+        style,
+        children: [
+          results.map((option, index) => {
+            const isSelected = option.value === selected;
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "div",
+              {
+                id: optionId(index),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": option.disabled || void 0,
+                className: cx("ow-option", {
+                  "ow-option--active": index === active && !option.disabled,
+                  "ow-option--selected": isSelected,
+                  "ow-option--disabled": Boolean(option.disabled)
+                }),
+                onPointerMove: () => !option.disabled && setActive(index),
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => choose(option),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 14 }) : null }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ow-option__text", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__label", children: option.label }),
+                    option.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__description", children: option.description }) : null
+                  ] })
+                ]
+              },
+              option.value
+            );
+          }),
+          results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
+        ]
+      }
+    ) : null
+  ] });
+});
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react18.createContext)(null);
+function assignRef4(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
+  className,
+  size = "md",
+  tone = "primary",
+  indeterminate = false,
+  children,
+  description,
+  value,
+  checked,
+  onChange,
+  disabled,
+  name,
+  "aria-describedby": describedBy,
+  ...inputProps
+}, ref) {
+  const group = (0, import_react18.useContext)(CheckboxGroupContext);
+  const innerRef = (0, import_react18.useRef)(null);
+  const descriptionId = (0, import_react18.useId)();
+  const inGroup = group !== null && value !== void 0;
+  (0, import_react18.useEffect)(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  const box = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "span",
+    {
+      className: cx(
+        "ow-checkbox",
+        `ow-checkbox--${size}`,
+        tone === "danger" && "ow-checkbox--danger",
+        children === void 0 && className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "input",
+          {
+            ref: (element) => {
+              innerRef.current = element;
+              assignRef4(ref, element);
+            },
+            type: "checkbox",
+            className: "ow-checkbox__input",
+            value,
+            name: inGroup ? group.name : name,
+            checked: inGroup ? group.value.includes(String(value)) : checked,
+            disabled: disabled || inGroup && group.disabled,
+            "aria-describedby": [describedBy, description ? descriptionId : void 0].filter(Boolean).join(" ") || void 0,
+            onChange: (event) => {
+              onChange?.(event);
+              if (inGroup) group.toggle(String(value), event.target.checked);
+            },
+            ...inputProps
+          }
+        ),
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MinusIcon, { className: "ow-checkbox__check ow-checkbox__check--dash", size: size === "sm" ? 10 : 12, strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { className: "ow-checkbox__check", size: size === "sm" ? 10 : 12, strokeWidth: 3 })
+      ]
+    }
+  );
+  if (children === void 0) return box;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
+    box,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ow-check-label__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
+    ] })
+  ] });
+});
+function CheckboxGroup({
+  label,
+  description,
+  value,
+  defaultValue = [],
+  onChange,
+  orientation = "vertical",
+  error,
+  disabled = false,
+  name,
+  children,
+  className
+}) {
+  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const generatedName = (0, import_react18.useId)();
+  const errorId = (0, import_react18.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    CheckboxGroupContext.Provider,
+    {
+      value: {
+        value: current,
+        name: name ?? generatedName,
+        disabled,
+        toggle(item, checked) {
+          setCurrent(checked ? [...current.filter((v) => v !== item), item] : current.filter((v) => v !== item));
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Fieldset,
+        {
+          legend: label,
+          description,
+          error,
+          errorId,
+          className: cx(orientation === "horizontal" && "ow-fieldset--horizontal", className),
+          children
+        }
+      )
+    }
+  );
+}
+function Fieldset({ legend, description, error, errorId, disabled, children, className }) {
+  const generatedId = (0, import_react18.useId)();
+  const descriptionId = `${generatedId}-description`;
+  const resolvedErrorId = errorId ?? `${generatedId}-error`;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "fieldset",
+    {
+      className: cx("ow-fieldset", className),
+      disabled,
+      "aria-describedby": [description ? descriptionId : "", error ? resolvedErrorId : ""].filter(Boolean).join(" ") || void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("legend", { className: "ow-fieldset__legend", children: legend }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-fieldset__content", children }),
+        error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
+      ]
+    }
+  );
+}
+
+// src/components/RadioGroup/RadioGroup.tsx
+var import_react19 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react19.createContext)(null);
+function RadioGroup({
+  label,
+  description,
+  value,
+  defaultValue = "",
+  onChange,
+  orientation = "vertical",
+  variant = "default",
+  error,
+  disabled = false,
+  name,
+  children,
+  className
+}) {
+  const [current, select] = useControllableState(value, defaultValue, onChange);
+  const generatedName = (0, import_react19.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Fieldset,
+    {
+      legend: label,
+      description,
+      error,
+      className: cx(
+        "ow-radio-group",
+        orientation === "horizontal" && "ow-fieldset--horizontal",
+        variant === "cards" && "ow-radio-group--cards",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function Radio({ value, children, description, disabled, className, ...inputProps }) {
+  const group = (0, import_react19.useContext)(RadioGroupContext);
+  const descriptionId = (0, import_react19.useId)();
+  if (!group) throw new Error("Radio must be inside <RadioGroup>.");
+  const isDisabled = disabled || group.disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ow-radio", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "input",
+      {
+        type: "radio",
+        className: "ow-radio__input",
+        name: group.name,
+        value,
+        checked: group.value === value,
+        disabled: isDisabled,
+        "aria-describedby": description ? descriptionId : void 0,
+        onChange: () => group.select(value),
+        ...inputProps
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-check-label__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/Switch/Switch.tsx
+var import_react20 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      disabled,
+      className: cx("ow-switch", checked && "ow-switch--on", className),
+      onClick: () => onChange(!checked),
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ow-switch__knob" })
+    }
+  );
+});
+
+// src/components/Slider/Slider.tsx
+var import_react21 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Slider({
+  value,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = true,
+  formatValue = String,
+  "aria-label": ariaLabel,
+  disabled,
+  className
+}) {
+  const [current, setCurrent] = useControllableState(value, defaultValue ?? min, onChange);
+  const labelId = (0, import_react21.useId)();
+  const isRange = Array.isArray(current);
+  const [low, high] = isRange ? current : [min, current];
+  const pct = (n) => (n - min) / (max - min || 1) * 100;
+  const style = { "--ow-slider-from": `${isRange ? pct(low) : 0}%`, "--ow-slider-to": `${pct(high)}%` };
+  const display = isRange ? `${formatValue(low)} \u2013 ${formatValue(high)}` : formatValue(high);
+  const end = () => onChangeEnd?.(current);
+  const input = (which) => {
+    const own = which === "low" ? low : high;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "input",
+      {
+        type: "range",
+        className: cx("ow-slider__input", isRange && `ow-slider__input--${which}`),
+        style: which === "low" && low === high && pct(low) > 50 ? { zIndex: 3 } : void 0,
+        min,
+        max,
+        step,
+        value: own,
+        disabled,
+        "aria-labelledby": label ? labelId : void 0,
+        "aria-label": label ? void 0 : isRange ? `${ariaLabel ?? "Range"}, ${which === "low" ? "minimum" : "maximum"}` : ariaLabel,
+        "aria-valuetext": formatValue(own),
+        onChange: (event) => {
+          const n = Number(event.target.value);
+          if (!isRange) setCurrent(n);
+          else if (which === "low") setCurrent([Math.min(n, high), high]);
+          else setCurrent([low, Math.max(n, low)]);
+        },
+        onPointerUp: end,
+        onKeyUp: end
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
+    label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-slider__header", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
+      showValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-slider__control", style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-slider__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-slider__fill" }) }),
+      isRange ? input("low") : null,
+      input("high")
+    ] })
+  ] });
+}
+
+// src/components/FileDropZone/FileDropZone.tsx
+var import_react22 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function matches(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const pattern = rule.trim().toLowerCase();
+    if (!pattern) return false;
+    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
+    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+    return file.type.toLowerCase() === pattern;
+  });
+}
+var formatSize = (bytes) => bytes >= 1048576 ? `${Math.round(bytes / 104857.6) / 10} MB` : `${Math.round(bytes / 1024)} KB`;
+function FileDropZone({
+  onFiles,
+  accept,
+  multiple = false,
+  maxSize,
+  label = "Drop files here, or browse",
+  hint,
+  error,
+  icon: icon2,
+  disabled = false,
+  name,
+  className
+}) {
+  const inputRef = (0, import_react22.useRef)(null);
+  const depth = (0, import_react22.useRef)(0);
+  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
+  const [problem, setProblem] = (0, import_react22.useState)();
+  const hintId = (0, import_react22.useId)();
+  function take(list) {
+    if (!list || disabled) return;
+    const files = [...list].slice(0, multiple ? void 0 : 1);
+    const wrongType = files.find((file) => !matches(file, accept));
+    const tooBig = maxSize ? files.find((file) => file.size > maxSize) : void 0;
+    if (!multiple && list.length > 1) setProblem("Drop one file at a time.");
+    else if (wrongType) setProblem(`\u201C${wrongType.name}\u201D isn't a file this accepts.`);
+    else if (tooBig && maxSize) setProblem(`\u201C${tooBig.name}\u201D is over ${formatSize(maxSize)}.`);
+    else {
+      setProblem(void 0);
+      if (files.length) onFiles(files);
+    }
+  }
+  const hasFiles = (event) => event.dataTransfer.types.includes("Files");
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "label",
+    {
+      className: cx(
+        "ow-dropzone",
+        isDragging && "ow-dropzone--dragging",
+        Boolean(error || problem) && "ow-dropzone--invalid",
+        disabled && "ow-dropzone--disabled",
+        className
+      ),
+      onDragEnter: (event) => {
+        if (!hasFiles(event) || disabled) return;
+        event.preventDefault();
+        depth.current += 1;
+        setIsDragging(true);
+      },
+      onDragOver: (event) => {
+        if (!hasFiles(event) || disabled) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      },
+      onDragLeave: () => {
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setIsDragging(false);
+      },
+      onDrop: (event) => {
+        if (!hasFiles(event)) return;
+        event.preventDefault();
+        depth.current = 0;
+        setIsDragging(false);
+        take(event.dataTransfer.files);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            className: "ow-visually-hidden",
+            accept,
+            multiple,
+            disabled,
+            name,
+            "aria-describedby": hintId,
+            onChange: (event) => {
+              take(event.target.files);
+              event.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UploadIcon, { size: 20 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
+      ]
+    }
+  );
+}
+
+// src/components/Calendar/Calendar.tsx
+var import_react23 = require("react");
+
+// src/components/Calendar/dates.ts
+var pad = (n) => String(n).padStart(2, "0");
+function toISO(year, month, day) {
+  const date = new Date(Date.UTC(year, month, day));
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+}
+function parseISO(iso) {
+  const [year, month, day] = iso.split("-").map(Number);
+  return { year, month: month - 1, day };
+}
+function todayISO() {
+  const now = /* @__PURE__ */ new Date();
+  return toISO(now.getFullYear(), now.getMonth(), now.getDate());
+}
+function addDays(iso, days) {
+  const { year, month, day } = parseISO(iso);
+  return toISO(year, month, day + days);
+}
+function addMonths(iso, months) {
+  const { year, month, day } = parseISO(iso);
+  const lastDay = new Date(Date.UTC(year, month + months + 1, 0)).getUTCDate();
+  return toISO(year, month + months, Math.min(day, lastDay));
+}
+function weekday(iso) {
+  const { year, month, day } = parseISO(iso);
+  return new Date(Date.UTC(year, month, day)).getUTCDay();
+}
+function toDate(iso) {
+  const { year, month, day } = parseISO(iso);
+  return new Date(Date.UTC(year, month, day));
+}
+function formatDate(iso, locale, options) {
+  return new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(toDate(iso));
+}
+
+// src/components/Calendar/Calendar.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
+  const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
+  const today = todayISO();
+  const [focused, setFocused] = (0, import_react23.useState)(() => selected || clampDate(today, min, max));
+  const [shouldFocus, setShouldFocus] = (0, import_react23.useState)(autoFocus);
+  const gridRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useImperativeHandle)(ref, () => ({ focus: () => setShouldFocus(true) }), []);
+  (0, import_react23.useEffect)(() => {
+    if (selected) setFocused(selected);
+  }, [selected]);
+  (0, import_react23.useEffect)(() => {
+    if (!shouldFocus) return;
+    gridRef.current?.querySelector('button[tabindex="0"]')?.focus();
+    setShouldFocus(false);
+  }, [shouldFocus, focused]);
+  const { year, month } = parseISO(focused);
+  const first = toISO(year, month, 1);
+  const monthIndex = year * 12 + month;
+  const slide = (0, import_react23.useRef)({ month: monthIndex });
+  if (slide.current.month !== monthIndex) {
+    slide.current = { month: monthIndex, direction: monthIndex > slide.current.month ? "next" : "previous" };
+  }
+  const offset = (weekday(first) - weekStartsOn + 7) % 7;
+  const gridStart = addDays(first, -offset);
+  const weeks = (0, import_react23.useMemo)(() => Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_2, d) => addDays(gridStart, w * 7 + d))), [gridStart]);
+  const weekdayNames = weeks[0].map((date) => ({
+    short: formatDate(date, locale, { weekday: "short" }),
+    long: formatDate(date, locale, { weekday: "long" })
+  }));
+  const isDisabled = (date) => min !== void 0 && date < min || max !== void 0 && date > max || Boolean(isDateDisabled?.(date));
+  function moveTo(date) {
+    setFocused(clampDate(date, min, max));
+    setShouldFocus(true);
+  }
+  function choose(date) {
+    if (isDisabled(date)) return;
+    setSelected(date);
+    setFocused(date);
+  }
+  function onKeyDown(event, date) {
+    const day = (weekday(date) - weekStartsOn + 7) % 7;
+    const moves = {
+      ArrowLeft: () => addDays(date, -1),
+      ArrowRight: () => addDays(date, 1),
+      ArrowUp: () => addDays(date, -7),
+      ArrowDown: () => addDays(date, 7),
+      Home: () => addDays(date, -day),
+      End: () => addDays(date, 6 - day),
+      PageUp: () => addMonths(date, event.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(date, event.shiftKey ? 12 : 1)
+    };
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      moveTo(move());
+    }
+  }
+  const monthLabel = formatDate(first, locale, { month: "long", year: "numeric" });
+  const prevMonth = addMonths(first, -1);
+  const nextMonth = addMonths(first, 1);
+  const canGoBack = !min || toISO(year, month, 0) >= min;
+  const canGoForward = !max || nextMonth <= max;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx("ow-calendar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ow-calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ow-calendar__nav",
+          "aria-label": `Previous month, ${formatDate(prevMonth, locale, { month: "long", year: "numeric" })}`,
+          disabled: !canGoBack,
+          onClick: () => setFocused(clampDate(addMonths(focused, -1), min, max)),
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "span",
+        {
+          className: cx("ow-calendar__title-text", slide.current.direction && `ow-calendar__slide--${slide.current.direction}`),
+          children: monthLabel
+        },
+        monthIndex
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ow-calendar__nav",
+          "aria-label": `Next month, ${formatDate(nextMonth, locale, { month: "long", year: "numeric" })}`,
+          disabled: !canGoForward,
+          onClick: () => setFocused(clampDate(addMonths(focused, 1), min, max)),
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, { size: 16 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: weekdayNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", { scope: "col", abbr: name.long, className: "ow-calendar__weekday", children: name.short.slice(0, 2) }, name.long)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { className: cx(slide.current.direction && `ow-calendar__slide--${slide.current.direction}`), children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: week.map((date) => {
+        const inMonth = parseISO(date).month === month;
+        const isSelected = date === selected;
+        const disabled = isDisabled(date);
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { role: "gridcell", "aria-selected": isSelected, className: "ow-calendar__cell", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "button",
+          {
+            type: "button",
+            tabIndex: date === focused ? 0 : -1,
+            "aria-label": formatDate(date, locale, { dateStyle: "full" }),
+            "aria-current": date === today ? "date" : void 0,
+            "aria-disabled": disabled || void 0,
+            className: cx("ow-calendar__day", {
+              "ow-calendar__day--outside": !inMonth,
+              "ow-calendar__day--selected": isSelected,
+              "ow-calendar__day--today": date === today,
+              "ow-calendar__day--disabled": disabled
+            }),
+            onClick: () => choose(date),
+            onKeyDown: (event) => onKeyDown(event, date),
+            onFocus: () => date !== focused && setFocused(date),
+            children: parseISO(date).day
+          }
+        ) }, date);
+      }) }, week[0])) }, monthIndex)
+    ] })
+  ] });
+});
+function clampDate(date, min, max) {
+  if (min && date < min) return min;
+  if (max && date > max) return max;
+  return date;
+}
+
+// src/components/Calendar/DatePicker.tsx
+var import_react24 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function assignRef5(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Pick a date",
+  formatOptions = { dateStyle: "medium" },
+  size = "md",
+  isInvalid = false,
+  disabled = false,
+  id,
+  className,
+  locale,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...calendarProps
+}, ref) {
+  const [date, setDate] = useControllableState(value, defaultValue, onChange);
+  const [isOpen, setOpen] = (0, import_react24.useState)(false);
+  const triggerRef = (0, import_react24.useRef)(null);
+  const panelRef = (0, import_react24.useRef)(null);
+  const panelId = (0, import_react24.useId)();
+  const { mounted, state } = usePresence(isOpen);
+  const style = useFloating({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement: "bottom-start", offset: 6 });
+  const close = (0, import_react24.useCallback)((reason) => {
+    setOpen(false);
+    if (reason !== "outside") triggerRef.current?.focus();
+  }, []);
+  useDismiss(isOpen, [panelRef, triggerRef], close);
+  const label = date ? formatDate(date, locale, formatOptions) : placeholder;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "button",
+      {
+        ref: (element) => {
+          triggerRef.current = element;
+          assignRef5(ref, element);
+        },
+        id,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? panelId : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+        "aria-invalid": isInvalid || void 0,
+        disabled,
+        className: cx(
+          "ow-select",
+          "ow-date-picker",
+          `ow-select--${size}`,
+          { "ow-select--open": isOpen, "ow-select--invalid": isInvalid && !isOpen },
+          className
+        ),
+        onClick: () => setOpen(!isOpen),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !isOpen) {
+            event.preventDefault();
+            setOpen(true);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
+        ]
+      }
+    ),
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        ref: panelRef,
+        ...manualPopover,
+        "data-state": state,
+        id: panelId,
+        role: "dialog",
+        "aria-label": "Choose a date",
+        className: "ow-popover ow-floating ow-date-picker__panel",
+        style,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          Calendar,
+          {
+            ...calendarProps,
+            locale,
+            value: date,
+            autoFocus: true,
+            onChange: (next) => {
+              setDate(next);
+              close();
+            }
+          }
+        )
+      }
+    ) : null
+  ] });
+});
+
+// src/components/Alert/Alert.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var icons = {
+  info: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InfoIcon, { size: 16 }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircleCheckIcon, { size: 16 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TriangleAlertIcon, { size: 16 }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircleAlertIcon, { size: 16 }),
+  neutral: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InfoIcon, { size: 16 })
+};
+function Alert({
+  variant = "info",
+  title,
+  icon: icon2,
+  actions,
+  onClose,
+  children,
+  className,
+  role,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
+      className: cx("ow-alert", `ow-alert--${variant}`, className),
+      ...props,
+      children: [
+        icon2 === false ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ow-alert__body", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ow-alert__title", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ow-alert__description", children }) : null,
+          actions ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ow-alert__actions", children: actions }) : null
+        ] }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Badge({ children, className, icon: icon2, size = "md", variant = "neutral", ...spanProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ow-badge__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children })
+  ] });
+}
+
+// src/components/Progress/Progress.tsx
+var import_react25 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function ProgressBar({
+  value,
+  max = 100,
+  label,
+  showValue = true,
+  valueLabel,
+  size = "sm",
+  tone = "primary",
+  "aria-label": ariaLabel,
+  className
+}) {
+  const labelId = (0, import_react25.useId)();
+  const indeterminate = value === void 0;
+  const pct = indeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
+  const text = valueLabel ?? `${Math.round(pct)}%`;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
+    label || showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ow-progress__header", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", {}),
+      showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ow-progress__value", children: text }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-labelledby": label ? labelId : void 0,
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": indeterminate ? void 0 : value,
+        "aria-valuetext": indeterminate ? void 0 : text,
+        className: cx("ow-progress__track", indeterminate && "ow-progress__track--indeterminate"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
+      }
+    )
+  ] });
+}
+var circleSizes = { sm: { box: 16, stroke: 2.5 }, md: { box: 24, stroke: 3 }, lg: { box: 48, stroke: 4 } };
+function ProgressCircle({
+  value,
+  max = 100,
+  size = "md",
+  tone = "primary",
+  "aria-label": ariaLabel = "Progress",
+  className
+}) {
+  const { box, stroke } = circleSizes[size];
+  const radius = (box - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const indeterminate = value === void 0;
+  const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "span",
+    {
+      role: "progressbar",
+      "aria-label": ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": indeterminate ? void 0 : value,
+      className: cx(
+        "ow-progress-circle",
+        `ow-progress--${tone}`,
+        indeterminate && "ow-progress-circle--indeterminate",
+        className
+      ),
+      style: { width: box, height: box },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "circle",
+            {
+              className: "ow-progress-circle__fill",
+              cx: box / 2,
+              cy: box / 2,
+              r: radius,
+              strokeWidth: stroke,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference * (1 - pct / 100),
+              transform: `rotate(-90 ${box / 2} ${box / 2})`
+            }
+          )
+        ] }),
+        size === "lg" && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "ow-progress-circle__value", children: [
+          Math.round(pct),
+          "%"
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Skeleton/Skeleton.tsx
+var import_react26 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Skeleton({ width = "100%", height = 14, soft = false, shape = "bar", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "span",
+    {
+      className: cx("ow-skeleton", soft && "ow-skeleton--soft", shape === "block" && "ow-skeleton--block", className),
+      style: { width, height },
+      "aria-hidden": "true"
+    }
+  );
+}
+function SkeletonRows({ label = "Loading", rows = 4, delayMs = 150 }) {
+  const [isVisible, setIsVisible] = (0, import_react26.useState)(delayMs === 0);
+  (0, import_react26.useEffect)(() => {
+    if (delayMs === 0) return;
+    const timer = window.setTimeout(() => setIsVisible(true), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [delayMs]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { role: "status", "aria-label": label, "aria-busy": "true", children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ow-skeleton-rows", "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-skeleton-rows__row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-skeleton-rows__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
+  ] }, index)) }) : null });
+}
+
+// src/components/Toast/Toast.tsx
+var import_react27 = require("react");
+var import_sonner = require("sonner");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var icons2 = {
+  success: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CircleCheckIcon, { size: 16 }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CircleAlertIcon, { size: 16 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TriangleAlertIcon, { size: 16 }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, { size: 16 }),
+  loading: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Spinner, { size: "sm", label: "" }),
+  close: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(XIcon, { size: 12 })
+};
+function Toaster({
+  position = "bottom-center",
+  expand = false,
+  visibleToasts = 3,
+  duration = 6e3,
+  closeButton = true,
+  offset = 16,
+  gap = 10,
+  id,
+  className
+}) {
+  const layerRef = (0, import_react27.useRef)(null);
+  (0, import_react27.useEffect)(() => {
+    const layer = layerRef.current;
+    if (!layer || typeof layer.showPopover !== "function") return void 0;
+    const raise = () => {
+      try {
+        if (layer.matches(":popover-open")) layer.hidePopover();
+        layer.showPopover();
+      } catch {
+      }
+    };
+    raise();
+    const observer = new MutationObserver((records) => {
+      if (records.some((record) => record.target instanceof HTMLDialogElement && record.target.open)) raise();
+    });
+    observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["open"] });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_sonner.Toaster,
+    {
+      id,
+      position,
+      expand,
+      visibleToasts,
+      duration,
+      closeButton,
+      offset,
+      mobileOffset: offset,
+      gap,
+      icons: icons2,
+      className: cx("ow-toaster", className),
+      containerAriaLabel: "Notifications",
+      toastOptions: { className: "ow-toast" }
+    }
+  ) });
+}
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react28 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var lastClosedAt = 0;
+var warmWindow = 500;
+function Tooltip({ children, label, placement = "top", delay = 400 }) {
+  const anchorRef = (0, import_react28.useRef)(null);
+  const bubbleRef = (0, import_react28.useRef)(null);
+  const timer = (0, import_react28.useRef)(0);
+  const [open, setOpen] = (0, import_react28.useState)(false);
+  const { mounted, state } = usePresence(open, 100);
+  const style = useFloating({ open: mounted, anchorRef, floatingRef: bubbleRef, placement, offset: 6 });
+  const show = (immediately = false) => {
+    window.clearTimeout(timer.current);
+    if (immediately || Date.now() - lastClosedAt < warmWindow) setOpen(true);
+    else timer.current = window.setTimeout(() => setOpen(true), delay);
+  };
+  const hide = () => {
+    window.clearTimeout(timer.current);
+    setOpen((current) => {
+      if (current) lastClosedAt = Date.now();
+      return false;
+    });
+  };
+  (0, import_react28.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  (0, import_react28.useEffect)(() => {
+    if (!open) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "span",
+    {
+      ref: anchorRef,
+      className: "ow-tooltip",
+      onPointerEnter: (event) => {
+        if (event.pointerType === "mouse") show();
+      },
+      onPointerLeave: hide,
+      onPointerDown: hide,
+      onFocus: (event) => {
+        if (event.target.matches(":focus-visible")) show(true);
+      },
+      onBlur: hide,
+      children: [
+        children,
+        mounted ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { ref: bubbleRef, ...manualPopover, "data-state": state, className: "ow-tooltip__bubble ow-floating", style, "aria-hidden": "true", children: label }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Dialog/Dialog.tsx
+var import_react30 = require("react");
+
+// src/hooks/useModalDialog.ts
+var import_react29 = require("react");
+var closeAnimationMs = 160;
+function useModalDialog(open, onCancel) {
+  const dialogRef = (0, import_react29.useRef)(null);
+  const onCancelRef = (0, import_react29.useRef)(onCancel);
+  const [mounted, setMounted] = (0, import_react29.useState)(open);
+  onCancelRef.current = onCancel;
+  (0, import_react29.useEffect)(() => {
+    if (open) setMounted(true);
+  }, [open]);
+  (0, import_react29.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      if (!dialog.open) dialog.showModal();
+      return;
+    }
+    if (dialog.open) dialog.close();
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const timer = window.setTimeout(() => setMounted(false), reduceMotion ? 0 : closeAnimationMs);
+    return () => window.clearTimeout(timer);
+  }, [open, mounted]);
+  (0, import_react29.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || !mounted) return;
+    const onCancelEvent = (event) => {
+      event.preventDefault();
+      onCancelRef.current();
+    };
+    const isOutside = (event) => {
+      const rect = dialog.getBoundingClientRect();
+      return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+    };
+    let pressedOutside = false;
+    const onPointerDown = (event) => {
+      pressedOutside = event.target === dialog && isOutside(event);
+    };
+    const onClick = (event) => {
+      if (pressedOutside && event.target === dialog && isOutside(event) && // Clicks from the keyboard (Enter on a button) report 0,0.
+      event.detail > 0)
+        dialog.dispatchEvent(new Event("cancel", { cancelable: true }));
+      pressedOutside = false;
+    };
+    dialog.addEventListener("cancel", onCancelEvent);
+    dialog.addEventListener("pointerdown", onPointerDown);
+    dialog.addEventListener("click", onClick);
+    return () => {
+      dialog.removeEventListener("cancel", onCancelEvent);
+      dialog.removeEventListener("pointerdown", onPointerDown);
+      dialog.removeEventListener("click", onClick);
+    };
+  }, [mounted]);
+  return { dialogRef, mounted };
+}
+
+// src/components/Dialog/Dialog.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  width = 420,
+  dismissible = true,
+  onSubmit,
+  className
+}) {
+  const titleId = (0, import_react30.useId)();
+  const descriptionId = (0, import_react30.useId)();
+  const { dialogRef, mounted } = useModalDialog(open, () => {
+    if (dismissible) onClose();
+  });
+  if (!mounted) return null;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-dialog__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: titleId, className: "ow-dialog__title", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
+    ] }),
+    children,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-dialog__actions", children: actions }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: cx("ow-dialog", className),
+      style: { width: `min(${width}px, calc(100% - 32px))` },
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
+      children: onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "form",
+        {
+          className: "ow-dialog__body",
+          onSubmit: (event) => {
+            event.preventDefault();
+            onSubmit(event);
+          },
+          children: body
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-dialog__body", children: body })
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  description,
+  confirmLabel,
+  destructive = false,
+  confirmDisabled = false,
+  onConfirm,
+  children
+}) {
+  const [isWorking, setIsWorking] = (0, import_react30.useState)(false);
+  const [error, setError] = (0, import_react30.useState)("");
+  async function confirm() {
+    setIsWorking(true);
+    setError("");
+    try {
+      await onConfirm();
+      onClose();
+    } catch (confirmError) {
+      setError(
+        confirmError instanceof Error && confirmError.message ? confirmError.message : "That didn't work. Try again."
+      );
+    } finally {
+      setIsWorking(false);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    Dialog,
+    {
+      open,
+      onClose,
+      dismissible: !isWorking,
+      width: 380,
+      className: "ow-dialog--confirm",
+      title: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+        destructive ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ow-dialog__danger-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TrashIcon, { size: 18 }) }) : null,
+        title
+      ] }),
+      description,
+      onSubmit: () => {
+        if (!confirmDisabled && !isWorking) void confirm();
+      },
+      actions: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          Button,
+          {
+            type: "submit",
+            variant: destructive ? "danger" : "primary",
+            disabled: isWorking || confirmDisabled,
+            children: isWorking ? "Working\u2026" : confirmLabel
+          }
+        )
+      ] }),
+      children: [
+        children,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Drawer/Drawer.tsx
+var import_react31 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  size = 420,
+  dismissible = true,
+  className
+}) {
+  const titleId = (0, import_react31.useId)();
+  const descriptionId = (0, import_react31.useId)();
+  const { dialogRef, mounted } = useModalDialog(open, () => {
+    if (dismissible) onClose();
+  });
+  if (!mounted) return null;
+  const sizeStyle = side === "bottom" ? { height: `min(${size}px, 90dvh)` } : { width: `min(${size}px, 100vw - 24px)` };
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: cx("ow-drawer", `ow-drawer--${side}`, className),
+      style: sizeStyle,
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "ow-drawer__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-drawer__titles", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { id: titleId, className: "ow-drawer__title", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
+          ] }),
+          dismissible ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseButton, { onClick: onClose }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-drawer__body", children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "ow-drawer__footer", children: footer }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Popover/Popover.tsx
+var import_react32 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Popover({
+  trigger,
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
+  title,
+  "aria-label": ariaLabel,
+  width = 280,
+  autoFocus = true,
+  className
+}) {
+  const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
+  const triggerRef = (0, import_react32.useRef)(null);
+  const panelRef = (0, import_react32.useRef)(null);
+  const anchorRef = (0, import_react32.useRef)(null);
+  const id = (0, import_react32.useId)();
+  const { mounted, state } = usePresence(isOpen);
+  const style = useFloating({ open: mounted, anchorRef, floatingRef: panelRef, placement, offset: 8, maxHeight: 640 });
+  const close = (0, import_react32.useCallback)(
+    (reason) => {
+      setOpen(false);
+      if (reason !== "outside") triggerRef.current?.focus();
+    },
+    [setOpen]
+  );
+  useDismiss(isOpen, [panelRef, anchorRef], close);
+  (0, import_react32.useEffect)(() => {
+    triggerRef.current = anchorRef.current?.firstElementChild;
+  });
+  (0, import_react32.useEffect)(() => {
+    if (!isOpen || !autoFocus) return;
+    const frame = requestAnimationFrame(() => {
+      const panel = panelRef.current;
+      const first = panel?.querySelector(
+        'input, select, textarea, button, [href], [tabindex]:not([tabindex="-1"])'
+      );
+      (first ?? panel)?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen, autoFocus]);
+  const triggerElement = (0, import_react32.isValidElement)(trigger) ? (0, import_react32.cloneElement)(trigger, {
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? id : void 0,
+    onClick: (event) => {
+      trigger.props.onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!isOpen);
+    }
+  }) : trigger;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        ...manualPopover,
+        "data-state": state,
+        id,
+        role: "dialog",
+        "aria-label": title ? void 0 : ariaLabel,
+        "aria-labelledby": title ? `${id}-title` : void 0,
+        tabIndex: -1,
+        className: cx("ow-popover", "ow-floating", className),
+        style: { ...style, width },
+        onBlur: (event) => {
+          const next = event.relatedTarget;
+          if (next && !panelRef.current?.contains(next) && !anchorRef.current?.contains(next)) setOpen(false);
+        },
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
+          children
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/components/Menu/Menu.tsx
+var import_react34 = require("react");
+
+// src/hooks/useMenuKeyboard.ts
+var import_react33 = require("react");
+var itemSelector = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"]), [role="menuitemradio"]:not([disabled]), [role="menuitemcheckbox"]:not([disabled])';
+function items(menu) {
+  return menu ? [...menu.querySelectorAll(itemSelector)] : [];
+}
+function useMenuKeyboard({
+  open,
+  menuRef,
+  triggerRef,
+  onClose
+}) {
+  (0, import_react33.useEffect)(() => {
+    if (!open) return;
+    const frame = window.requestAnimationFrame(() => {
+      const menu = menuRef.current;
+      if (menu?.contains(document.activeElement)) return;
+      items(menu)[0]?.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [open, menuRef]);
+  return (event) => {
+    const list = items(menuRef.current);
+    const index = list.indexOf(document.activeElement);
+    const move = (next) => {
+      event.preventDefault();
+      list[(next + list.length) % list.length]?.focus();
+    };
+    switch (event.key) {
+      case "ArrowDown":
+        move(index + 1);
+        break;
+      case "ArrowUp":
+        move(index < 0 ? list.length - 1 : index - 1);
+        break;
+      case "Home":
+        move(0);
+        break;
+      case "End":
+        move(list.length - 1);
+        break;
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+        triggerRef?.current?.focus();
+        break;
+      case "Tab":
+        onClose();
+        break;
+    }
+  };
+}
+
+// src/components/Menu/Menu.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var MenuContext = (0, import_react34.createContext)(null);
+function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
+  const [open, setOpen] = (0, import_react34.useState)(defaultOpen);
+  const rootRef = (0, import_react34.useRef)(null);
+  const menuRef = (0, import_react34.useRef)(null);
+  const triggerRef = (0, import_react34.useRef)(null);
+  const menuId = (0, import_react34.useId)();
+  const close = () => setOpen(false);
+  const onMenuKeyDown = useMenuKeyboard({ open, menuRef, triggerRef, onClose: close });
+  const { mounted, state } = usePresence(open);
+  const floatingStyle = useFloating({
+    open: mounted,
+    anchorRef: rootRef,
+    floatingRef: menuRef,
+    placement: `${above ? "top" : "bottom"}-${align}`,
+    offset: 8
+  });
+  (0, import_react34.useEffect)(() => {
+    triggerRef.current = rootRef.current?.firstElementChild;
+  });
+  (0, import_react34.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open]);
+  const triggerElement = (0, import_react34.isValidElement)(trigger) ? (0, import_react34.cloneElement)(trigger, {
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onClick: (event) => {
+      trigger.props.onClick?.(event);
+      if (!event.defaultPrevented) setOpen((current) => !current);
+    }
+  }) : trigger;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { ref: rootRef, className: "ow-menu", children: [
+    triggerElement,
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      MenuContext.Provider,
+      {
+        value: {
+          close() {
+            setOpen(false);
+            triggerRef.current?.focus();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            ref: menuRef,
+            ...manualPopover,
+            "data-state": state,
+            id: menuId,
+            role: "menu",
+            "aria-label": label,
+            className: cx("ow-menu__panel", "ow-floating", className),
+            style: width === void 0 ? floatingStyle : { ...floatingStyle, width },
+            onKeyDown: onMenuKeyDown,
+            children
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2, onSelect, destructive = false, shortcut, className, children, onClick, ...buttonProps }, ref) {
+  const menu = (0, import_react34.useContext)(MenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      className: cx("ow-menu__item", destructive && "ow-menu__item--destructive", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        menu?.close();
+        onSelect?.();
+      },
+      ...buttonProps,
+      children: [
+        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ow-menu__icon", children: icon2 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ow-menu__label", children }),
+        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
+      ]
+    }
+  );
+});
+function MenuLabel({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ow-menu__group-label", role: "presentation", children });
+}
+function MenuSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ow-menu__separator", role: "separator" });
+}
+
+// src/components/CommandPalette/CommandPalette.tsx
+var import_react35 = require("react");
+
+// src/components/CommandPalette/filterCommands.ts
+function score(query, text, loose = true) {
+  const haystack = text.toLowerCase();
+  if (haystack.startsWith(query)) return 100 - Math.min(haystack.length, 50) / 10;
+  const wordStart = haystack.indexOf(` ${query}`);
+  if (wordStart >= 0) return 80 - wordStart / 10;
+  const anywhere = haystack.indexOf(query);
+  if (anywhere >= 0) return 60 - anywhere / 10;
+  if (!loose) return 0;
+  let position = 0;
+  let gaps = 0;
+  for (const letter of query) {
+    const found = haystack.indexOf(letter, position);
+    if (found < 0) return 0;
+    gaps += found - position;
+    position = found + 1;
+  }
+  return Math.max(1, 40 - gaps);
+}
+function filterCommands(commands, query) {
+  const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return commands;
+  return commands.map((command, index) => {
+    const extra = `${command.group ?? ""} ${command.keywords ?? ""} ${command.hint ?? ""}`;
+    let total = 0;
+    for (const word of words) {
+      const best = Math.max(score(word, command.title) * 1.5, score(word, extra, false));
+      if (!best) return void 0;
+      total += best;
+    }
+    return { command, rank: total - (command.disabled ? 50 : 0) - index / 1e3 };
+  }).filter((entry) => Boolean(entry)).sort((a, b) => b.rank - a.rank).map((entry) => entry.command);
+}
+
+// src/components/CommandPalette/CommandPalette.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function CommandPalette({ open, onClose, commands, placeholder = "Search commands\u2026" }) {
+  const { dialogRef, mounted } = useModalDialog(open, onClose);
+  const [query, setQuery] = (0, import_react35.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react35.useState)(0);
+  const listRef = (0, import_react35.useRef)(null);
+  const listId = (0, import_react35.useId)();
+  const results = (0, import_react35.useMemo)(() => filterCommands(commands, query), [commands, query]);
+  const active = results[Math.min(activeIndex, results.length - 1)];
+  (0, import_react35.useEffect)(() => setActiveIndex(0), [query]);
+  (0, import_react35.useEffect)(() => {
+    if (open) setQuery("");
+  }, [open]);
+  (0, import_react35.useEffect)(() => {
+    listRef.current?.querySelector("[aria-selected=true]")?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, results]);
+  if (!mounted) return null;
+  function run(command) {
+    if (!command || command.disabled) return;
+    onClose();
+    window.setTimeout(() => command.run(), 0);
+  }
+  function move(step) {
+    if (!results.length) return;
+    setActiveIndex((index) => (Math.min(index, results.length - 1) + step + results.length) % results.length);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ow-palette__search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "input",
+        {
+          autoFocus: true,
+          className: "ow-palette__input",
+          placeholder,
+          role: "combobox",
+          "aria-expanded": "true",
+          "aria-controls": listId,
+          "aria-activedescendant": active ? `${listId}-${active.id}` : void 0,
+          "aria-autocomplete": "list",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "ArrowDown" || event.ctrlKey && event.key === "n") {
+              event.preventDefault();
+              move(1);
+            } else if (event.key === "ArrowUp" || event.ctrlKey && event.key === "p") {
+              event.preventDefault();
+              move(-1);
+            } else if (event.key === "Enter") {
+              event.preventDefault();
+              run(active);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-palette__esc", children: "esc" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "ow-palette__list", children: results.length ? results.map((command, index) => {
+      const showGroup = !query.trim() && command.group && command.group !== results[index - 1]?.group;
+      const isActive = command === active;
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { role: "presentation", children: [
+        showGroup ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-palette__group", children: command.group }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          "div",
+          {
+            id: `${listId}-${command.id}`,
+            role: "option",
+            "aria-selected": isActive,
+            "aria-disabled": Boolean(command.disabled),
+            title: command.disabled,
+            className: cx("ow-palette__option", {
+              "ow-palette__option--active": isActive,
+              "ow-palette__option--disabled": Boolean(command.disabled)
+            }),
+            onMouseMove: () => setActiveIndex(index),
+            onClick: () => run(command),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__title", children: command.title }),
+              command.disabled && isActive ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__hint", children: command.disabled }) : command.hint ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__hint", children: command.hint }) : null,
+              command.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
+              isActive && !command.disabled ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
+            ]
+          }
+        )
+      ] }, command.id);
+    }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "ow-palette__empty", children: [
+      "No commands match \u201C",
+      query,
+      "\u201D."
+    ] }) })
+  ] });
+}
+
+// src/components/Tabs/Tabs.tsx
+var import_react36 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TabsContext = (0, import_react36.createContext)(null);
+function useTabs(component) {
+  const context = (0, import_react36.useContext)(TabsContext);
+  if (!context) throw new Error(`${component} must be inside <Tabs>.`);
+  return context;
+}
+var idPart = (value) => value.replace(/[^\w-]/g, "_");
+function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
+  const [current, select] = useControllableState(value, defaultValue, onValueChange);
+  const baseId = (0, import_react36.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
+}
+function TabList({ className, onKeyDown, children, ...props }) {
+  const { value, select } = useTabs("TabList");
+  const listRef = (0, import_react36.useRef)(null);
+  useIndicator(listRef, '[role="tab"][aria-selected="true"]', value);
+  (0, import_react36.useLayoutEffect)(() => {
+    const list = listRef.current;
+    if (!list || list.querySelector('[role="tab"][aria-selected="true"]')) return;
+    const first = list.querySelector('[role="tab"]:not(:disabled)');
+    if (first?.dataset.value) select(first.dataset.value);
+  }, [value, select]);
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)')];
+    const index = tabs.indexOf(document.activeElement);
+    if (index < 0) return;
+    const moves = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: tabs.length - 1 };
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    const next = tabs[(moves[event.key] + tabs.length) % tabs.length];
+    next.focus();
+    if (next.dataset.value) select(next.dataset.value);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
+  ] });
+}
+function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
+  const { value: current, select, baseId } = useTabs("Tab");
+  const selected = current === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${baseId}-tab-${idPart(value)}`,
+      "aria-selected": selected,
+      "aria-controls": `${baseId}-panel-${idPart(value)}`,
+      tabIndex: selected ? 0 : -1,
+      "data-value": value,
+      className: cx("ow-tab", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) select(value);
+      },
+      ...props,
+      children: [
+        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-tab__icon", children: icon2 }) : null,
+        children
+      ]
+    }
+  );
+}
+function TabPanel({ value, keepMounted = false, className, children, ...props }) {
+  const { value: current, baseId } = useTabs("TabPanel");
+  const selected = current === value;
+  if (!selected && !keepMounted) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${baseId}-panel-${idPart(value)}`,
+      "aria-labelledby": `${baseId}-tab-${idPart(value)}`,
+      tabIndex: 0,
+      hidden: !selected,
+      className: cx("ow-tabs__panel", className),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Accordion/Accordion.tsx
+var import_react37 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function DisclosureView({
+  open,
+  onToggle,
+  title,
+  subtitle,
+  icon: icon2,
+  actions,
+  headingLevel,
+  disabled,
+  children,
+  className,
+  item
+}) {
+  const id = (0, import_react37.useId)();
+  const panelRef = (0, import_react37.useRef)(null);
+  const Heading = `h${headingLevel}`;
+  (0, import_react37.useEffect)(() => {
+    if (panelRef.current) panelRef.current.inert = !open;
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ow-disclosure__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        "button",
+        {
+          type: "button",
+          id: `${id}-trigger`,
+          className: "ow-disclosure__trigger",
+          "aria-expanded": open,
+          "aria-controls": `${id}-panel`,
+          disabled,
+          "data-accordion-trigger": item ? "" : void 0,
+          onClick: onToggle,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
+            icon2 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ow-disclosure__titles", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-disclosure__title", children: title }),
+              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
+            ] })
+          ]
+        }
+      ) }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ow-disclosure__actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      {
+        ref: panelRef,
+        id: `${id}-panel`,
+        role: "region",
+        "aria-labelledby": `${id}-trigger`,
+        className: "ow-disclosure__panel",
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ow-disclosure__clip", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ow-disclosure__content", children }) })
+      }
+    )
+  ] });
+}
+function Disclosure({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  variant = "card",
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    DisclosureView,
+    {
+      ...props,
+      open: isOpen,
+      onToggle: () => setOpen(!isOpen),
+      headingLevel,
+      className: cx(variant === "plain" && "ow-disclosure--plain", className)
+    }
+  );
+}
+var AccordionContext = (0, import_react37.createContext)(null);
+function Accordion({
+  type = "single",
+  value,
+  defaultValue = [],
+  onValueChange,
+  variant = "bordered",
+  headingLevel = 3,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}) {
+  const [openValues, setOpenValues] = useControllableState(value, defaultValue, onValueChange);
+  function toggle(item) {
+    const isOpen = openValues.includes(item);
+    if (type === "single") setOpenValues(isOpen ? [] : [item]);
+    else setOpenValues(isOpen ? openValues.filter((open) => open !== item) : [...openValues, item]);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    const triggers = [
+      ...event.currentTarget.querySelectorAll("[data-accordion-trigger]:not(:disabled)")
+    ];
+    const index = triggers.indexOf(document.activeElement);
+    if (index < 0) return;
+    const moves = { ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: triggers.length - 1 };
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    triggers[(moves[event.key] + triggers.length) % triggers.length]?.focus();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionContext.Provider, { value: { isOpen: (item) => openValues.includes(item), toggle, headingLevel }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("ow-accordion", `ow-accordion--${variant}`, className), onKeyDown: handleKeyDown, ...props, children }) });
+}
+function AccordionItem({ value, ...props }) {
+  const context = (0, import_react37.useContext)(AccordionContext);
+  if (!context) throw new Error("AccordionItem must be inside <Accordion>.");
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    DisclosureView,
+    {
+      ...props,
+      item: true,
+      open: context.isOpen(value),
+      onToggle: () => context.toggle(value),
+      headingLevel: context.headingLevel
+    }
+  );
+}
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+var import_react38 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("nav", { "aria-label": label, className: cx("ow-breadcrumbs", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ol", { className: "ow-breadcrumbs__list", children: items2.map((item, index) => {
+    const isLast = index === items2.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "ow-breadcrumbs__item", children: [
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-breadcrumbs__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { className: "ow-breadcrumbs__link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: "ow-breadcrumbs__link", onClick: item.onClick, children: item.label }),
+      isLast ? null : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-breadcrumbs__separator", "aria-hidden": "true", children: separator === "slash" ? "/" : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 14 }) })
+    ] }, index);
+  }) }) });
+}
+function linkClassName({ variant = "default" } = {}) {
+  return cx("ow-link", `ow-link--${variant}`);
+}
+var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default", external = false, className, children, target, rel, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "a",
+    {
+      ref,
+      className: cx(linkClassName({ variant }), className),
+      target: external ? target ?? "_blank" : target,
+      rel: external ? rel ?? "noopener noreferrer" : rel,
+      ...props,
+      children: [
+        children,
+        external ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
+        ] }) : null
+      ]
+    }
+  );
+});
+
+// src/components/Pagination/Pagination.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function paginationItems(page, pageCount, siblingCount = 1, boundaryCount = 1) {
+  const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+  const startPages = range(1, Math.min(boundaryCount, pageCount));
+  const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : pageCount - 1
+  );
+  return [
+    ...startPages,
+    ...siblingsStart > boundaryCount + 2 ? ["start-gap"] : boundaryCount + 1 < pageCount - boundaryCount ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < pageCount - boundaryCount - 1 ? ["end-gap"] : pageCount - boundaryCount > boundaryCount ? [pageCount - boundaryCount] : [],
+    ...endPages
+  ];
+}
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  size = "md",
+  label = "Pagination",
+  className
+}) {
+  const items2 = paginationItems(page, pageCount, siblingCount, boundaryCount);
+  const go = (next) => onPageChange(Math.min(Math.max(1, next), pageCount));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { "aria-label": label, className: cx("ow-pagination", `ow-pagination--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { className: "ow-pagination__list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ow-pagination__button ow-pagination__step",
+        "aria-label": "Previous page",
+        disabled: page <= 1,
+        onClick: () => go(page - 1),
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronLeftIcon, { size: 16 })
+      }
+    ) }),
+    items2.map(
+      (item) => typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ow-pagination__button",
+          "aria-current": item === page ? "page" : void 0,
+          "aria-label": `Page ${item}`,
+          onClick: () => go(item),
+          children: item
+        }
+      ) }, item) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ow-pagination__button ow-pagination__step",
+        "aria-label": "Next page",
+        disabled: page >= pageCount,
+        onClick: () => go(page + 1),
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 16 })
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/Steps/Steps.tsx
+var import_react39 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Steps({ items: items2, current = 0, orientation = "vertical", title, label = "Steps", className }) {
+  const statuses = items2.map((item, index) => item.status ?? (index < current ? "done" : index === current ? "current" : "upcoming"));
+  const doneCount = statuses.filter((status) => status === "done").length;
+  const headingId = (0, import_react39.useId)();
+  const list = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
+    const status = statuses[index];
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      "li",
+      {
+        className: cx("ow-steps__item", `ow-steps__item--${status}`),
+        "aria-current": status === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__marker", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckIcon, { size: 14, strokeWidth: 3 }) : index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "ow-steps__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "ow-steps__title", children: [
+              status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
+              item.title
+            ] }),
+            item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__description", children: item.description }) : null
+          ] }),
+          item.action && status !== "done" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
+        ]
+      },
+      index
+    );
+  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "section",
+    {
+      className: cx("ow-steps", `ow-steps--${orientation}`, className),
+      "aria-labelledby": title && orientation === "vertical" ? headingId : void 0,
+      "aria-label": title && orientation === "vertical" ? void 0 : label,
+      children: [
+        title && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ow-steps__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { id: headingId, className: "ow-steps__heading", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "ow-steps__count", children: [
+            doneCount,
+            " of ",
+            items2.length,
+            " done"
+          ] })
+        ] }) : null,
+        list
+      ]
+    }
+  );
+}
+
+// src/components/NavList/NavList.tsx
+var import_react40 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function NavList({ label, heading, orientation = "vertical", children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
+    heading && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__heading", children: heading }) : null,
+    children
+  ] });
+}
+var NavItem = (0, import_react40.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__label", children }),
+    end !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__end", children: end }) : null
+  ] });
+  const shared = {
+    "aria-current": active ? "page" : void 0,
+    className: cx("ow-nav__item", active && "ow-nav__item--active", className)
+  };
+  if (href !== void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "a",
+      {
+        ref,
+        href,
+        ...shared,
+        ...buttonProps,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
+});
+
+// src/components/Table/Table.tsx
+var import_react41 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function compare(a, b) {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function Table({
+  columns,
+  rows,
+  rowKey = "id",
+  caption,
+  hideCaption = false,
+  sort,
+  defaultSort,
+  onSortChange,
+  manualSort = false,
+  selectionMode = "none",
+  selectedKeys,
+  defaultSelectedKeys = [],
+  onSelectionChange,
+  emptyContent = "Nothing here yet.",
+  density = "comfortable",
+  stickyHeader = false,
+  maxHeight,
+  className
+}) {
+  const [currentSort, setSort] = useControllableState(sort, defaultSort, onSortChange);
+  const [selected, setSelected] = useControllableState(selectedKeys, defaultSelectedKeys, onSelectionChange);
+  const keyOf = (row) => typeof rowKey === "function" ? rowKey(row) : row[rowKey];
+  const field = (row, key) => row[key];
+  const sorted = (0, import_react41.useMemo)(() => {
+    if (!currentSort || manualSort) return rows;
+    const column = columns.find((c) => c.key === currentSort.key);
+    if (!column) return rows;
+    const value = (row) => column.sortValue ? column.sortValue(row) : field(row, column.key);
+    const result = [...rows].sort((a, b) => compare(value(a), value(b)));
+    return currentSort.direction === "descending" ? result.reverse() : result;
+  }, [rows, columns, currentSort, manualSort]);
+  const allKeys = sorted.map(keyOf);
+  const selectedCount = allKeys.filter((key) => selected.includes(key)).length;
+  function toggleSort(key) {
+    setSort(
+      currentSort?.key === key ? { key, direction: currentSort.direction === "ascending" ? "descending" : "ascending" } : { key, direction: "ascending" }
+    );
+  }
+  const selectable = selectionMode === "multiple";
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
+      style: maxHeight ? { maxHeight } : void 0,
+      tabIndex: maxHeight ? 0 : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
+          selectable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            Checkbox,
+            {
+              size: "sm",
+              "aria-label": "Select all rows",
+              checked: sorted.length > 0 && selectedCount === sorted.length,
+              indeterminate: selectedCount > 0 && selectedCount < sorted.length,
+              onChange: (event) => setSelected(
+                event.target.checked ? [.../* @__PURE__ */ new Set([...selected, ...allKeys])] : selected.filter((key) => !allKeys.includes(key))
+              )
+            }
+          ) }) : null,
+          columns.map((column) => {
+            const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
+            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": direction ?? (column.sortable ? "none" : void 0),
+                className: cx(`ow-table__cell--${column.align ?? "start"}`),
+                style: column.width !== void 0 ? { width: column.width } : void 0,
+                children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
+                  column.header,
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronsUpDownIcon, { size: 12 }) })
+                ] }) : column.header
+              },
+              column.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row) => {
+          const key = keyOf(row);
+          const isSelected = selected.includes(key);
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
+            selectable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              Checkbox,
+              {
+                size: "sm",
+                "aria-label": "Select row",
+                checked: isSelected,
+                onChange: (event) => setSelected(
+                  event.target.checked ? [...selected, key] : selected.filter((k) => k !== key)
+                )
+              }
+            ) }) : null,
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
+          ] }, key);
+        }) })
+      ] })
+    }
+  );
+}
+
+// src/components/Stat/Stat.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function Sparkline({ values }) {
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const span = max - min || 1;
+  const points = values.map((value, index) => {
+    const x = index / (values.length - 1) * 100;
+    const y = 36 - (value - min) / span * 32;
+    return [x, y];
+  });
+  const line = points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" ");
+  const [lastX, lastY] = points[points.length - 1];
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
+  ] });
+}
+function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
+  const tone = changeTone ?? (change?.startsWith("+") ? "positive" : /^[-−]/.test(change ?? "") ? "negative" : "neutral");
+  const rising = change ? !/^[-−]/.test(change) : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("ow-stat", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ow-stat__label", children: [
+      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ow-stat__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ow-stat__value", children: value }),
+      change ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
+        tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowDownIcon, { size: 12 }),
+        change
+      ] }) : null
+    ] }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "ow-stat__description", children: description }) : null,
+    trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Sparkline, { values: trend }) : null
+  ] });
+}
+
+// src/components/FileTree/FileTree.tsx
+var import_react42 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function flatten(nodes, expanded, parent, level = 1) {
+  return nodes.flatMap((node) => {
+    const path = parent ? `${parent}/${node.name}` : node.name;
+    const isFolder = node.children !== void 0;
+    const row = { node, path, level, parent, isFolder };
+    return isFolder && expanded.has(path) ? [row, ...flatten(node.children, expanded, path, level + 1)] : [row];
+  });
+}
+function allFolders(nodes, parent) {
+  return nodes.flatMap((node) => {
+    const path = parent ? `${parent}/${node.name}` : node.name;
+    return node.children ? [path, ...allFolders(node.children, path)] : [];
+  });
+}
+function FileTree({
+  items: items2,
+  selected,
+  defaultSelected = "",
+  onSelect,
+  defaultExpanded = "all",
+  label = "Files",
+  className
+}) {
+  const [current, setCurrent] = useControllableState(selected, defaultSelected, onSelect);
+  const [expanded, setExpanded] = (0, import_react42.useState)(() => new Set(defaultExpanded === "all" ? allFolders(items2) : defaultExpanded));
+  const rows = (0, import_react42.useMemo)(() => flatten(items2, expanded), [items2, expanded]);
+  const [focusPath, setFocusPath] = (0, import_react42.useState)();
+  const refs = (0, import_react42.useRef)(/* @__PURE__ */ new Map());
+  const tabStop = rows.some((row) => row.path === focusPath) ? focusPath : (rows.find((row) => row.path === current) ?? rows[0])?.path;
+  function focus(path) {
+    if (!path) return;
+    setFocusPath(path);
+    refs.current.get(path)?.focus();
+  }
+  function toggle(path, open) {
+    setExpanded((previous) => {
+      const next = new Set(previous);
+      if (open ?? !next.has(path)) next.add(path);
+      else next.delete(path);
+      return next;
+    });
+  }
+  function activate(row) {
+    if (row.isFolder) toggle(row.path);
+    else setCurrent(row.path);
+  }
+  function onKeyDown(event, row) {
+    const index = rows.indexOf(row);
+    const handlers = {
+      ArrowDown: () => focus(rows[index + 1]?.path),
+      ArrowUp: () => focus(rows[index - 1]?.path),
+      Home: () => focus(rows[0]?.path),
+      End: () => focus(rows[rows.length - 1]?.path),
+      ArrowRight: () => {
+        if (!row.isFolder) return;
+        if (!expanded.has(row.path)) toggle(row.path, true);
+        else focus(rows[index + 1]?.level === row.level + 1 ? rows[index + 1].path : void 0);
+      },
+      ArrowLeft: () => {
+        if (row.isFolder && expanded.has(row.path)) toggle(row.path, false);
+        else focus(row.parent);
+      },
+      Enter: () => activate(row),
+      " ": () => activate(row)
+    };
+    const handler = handlers[event.key];
+    if (!handler) return;
+    event.preventDefault();
+    event.stopPropagation();
+    handler();
+  }
+  function render(nodes, parent, level = 1) {
+    return nodes.map((node) => {
+      const path = parent ? `${parent}/${node.name}` : node.name;
+      const row = rows.find((entry) => entry.path === path);
+      if (!row) return null;
+      const isOpen = row.isFolder && expanded.has(path);
+      const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FolderIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FileIcon, { size: 16 }));
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        "li",
+        {
+          ref: (element) => {
+            if (element) refs.current.set(path, element);
+            else refs.current.delete(path);
+          },
+          role: "treeitem",
+          "aria-level": level,
+          "aria-expanded": row.isFolder ? isOpen : void 0,
+          "aria-selected": row.isFolder ? void 0 : current === path,
+          tabIndex: tabStop === path ? 0 : -1,
+          className: "ow-tree__item",
+          onKeyDown: (event) => onKeyDown(event, row),
+          onFocus: (event) => {
+            if (event.target === event.currentTarget) setFocusPath(path);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              "div",
+              {
+                className: cx("ow-tree__row", !row.isFolder && current === path && "ow-tree__row--selected"),
+                title: path,
+                onClick: () => {
+                  focus(path);
+                  activate(row);
+                },
+                children: [
+                  row.isFolder ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-tree__spacer" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-tree__name", children: node.name }),
+                  node.meta ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
+                ]
+              }
+            ),
+            isOpen && node.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
+          ]
+        },
+        path
+      );
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
+}
+
+// src/components/EmptyState/EmptyState.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(InboxIcon, { size: 20 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "ow-empty__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "ow-empty__title", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "ow-empty__description", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
+  ] });
+}
+
+// src/components/Tag/Tag.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function Tag({ onRemove, variant = "neutral", size = "md", icon: icon2, removeLabel, className, children, ...props }) {
+  const name = removeLabel ?? (typeof children === "string" ? children : "tag");
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size}`, onRemove && "ow-tag--removable", className), ...props, children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-tag__label", children }),
+    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(XIcon, { size: 12 }) }) : null
+  ] });
+}
+function TagGroup({ label, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
+}
+function ColorSwatch({ color, name, value, size = "md", shape = "square", className }) {
+  const swatch = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "span",
+    {
+      className: cx("ow-swatch", `ow-swatch--${size}`, shape === "circle" && "ow-swatch--circle"),
+      style: { background: color },
+      ...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
+    }
+  );
+  if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className, children: swatch });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
+    swatch,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ow-swatch-label__text", children: [
+      name ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-swatch-label__value", children: value })
+    ] })
+  ] });
+}
+
+// src/components/Avatar/Avatar.tsx
+var import_react43 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function Avatar({ name, src, size = "md", label, className }) {
+  const initials = getInitials(name);
+  const [failedImage, setFailedImage] = (0, import_react43.useState)();
+  const showImage = src && src !== failedImage;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "span",
+    {
+      className: cx("ow-avatar", `ow-avatar--${size}`, !initials && !showImage && "ow-avatar--empty", className),
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UserIcon, { size: size === "sm" ? 13 : size === "lg" ? 18 : 15 })
+    }
+  );
+}
+
+// src/components/Avatar/AvatarGroup.tsx
+var import_react44 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function AvatarGroup({ children, max = 4, size = "md", label, className }) {
+  const avatars = import_react44.Children.toArray(children).filter(import_react44.isValidElement);
+  const shown = avatars.slice(0, max);
+  const hidden = avatars.length - shown.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
+    shown.map((avatar) => (0, import_react44.cloneElement)(avatar, { size })),
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: cx("ow-avatar", `ow-avatar--${size}`, "ow-avatar--count"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { "aria-hidden": "true", children: [
+        "+",
+        hidden
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ow-visually-hidden", children: [
+        "and ",
+        hidden,
+        " more"
+      ] })
+    ] }) : null
+  ] });
+}
+function User({ name, description, src, size = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("ow-user", `ow-user--${size}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Avatar, { name, src, size }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ow-user__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ow-user__name", children: name }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ow-user__description", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/Kbd/Kbd.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
+}
+function Code({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("code", { className: cx("ow-code", className), ...props });
+}
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function Card({ className, padding = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
+}
+function SettingsRow({ children, description, label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx("ow-settings-row", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ow-settings-row__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ow-settings-row__label", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ow-settings-row__control", children })
+  ] });
+}
+
+// src/components/Layout/Layout.tsx
+var import_react45 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
+var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
+function Stack({
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  as = "div",
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    Element,
+    {
+      className: cx("ow-stack", className),
+      style: {
+        flexDirection: direction,
+        gap: space(gap),
+        alignItems: align ? alignments[align] : void 0,
+        justifyContent: justify ? alignments[justify] : void 0,
+        flexWrap: wrap ? "wrap" : void 0,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
+  const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
+  if (label && orientation === "horizontal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ow-separator-label__text", children: label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cx("ow-separator", `ow-separator--${orientation}`, className),
+      style: { margin: margin2 }
+    }
+  );
+}
+function ScrollShadow({
+  orientation = "vertical",
+  size = 32,
+  maxSize,
+  className,
+  style,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const ref = (0, import_react45.useRef)(null);
+  const [edges, setEdges] = (0, import_react45.useState)({ start: false, end: false });
+  (0, import_react45.useEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    const update = () => {
+      const position = orientation === "vertical" ? element.scrollTop : element.scrollLeft;
+      const extent = orientation === "vertical" ? element.scrollHeight - element.clientHeight : element.scrollWidth - element.clientWidth;
+      setEdges({ start: position > 1, end: position < extent - 1 });
+    };
+    update();
+    element.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    observer?.observe(element);
+    if (element.firstElementChild) observer?.observe(element.firstElementChild);
+    return () => {
+      element.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [orientation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "div",
+    {
+      ref,
+      className: cx("ow-scroll-shadow", `ow-scroll-shadow--${orientation}`, className),
+      "data-start": edges.start || void 0,
+      "data-end": edges.end || void 0,
+      tabIndex: ariaLabel ? 0 : void 0,
+      role: ariaLabel ? "region" : void 0,
+      "aria-label": ariaLabel,
+      style: {
+        "--ow-scroll-shadow": `${size}px`,
+        [orientation === "vertical" ? "maxHeight" : "maxWidth"]: maxSize,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function VisuallyHidden({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
+}
+
+// src/components/Marketing/Marketing.tsx
+var import_react46 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function Chip({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cx("ow-chip", className), ...props });
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  intro,
+  align = "start",
+  as: Heading = "h2",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Chip, { children: eyebrow }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
+    intro ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
+  ] });
+}
+function SiteHeader({ brand, nav, actions, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("header", { className: cx("ow-site-header", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ow-site-header__brand", children: brand }),
+    nav ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
+  ] });
+}
+function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
+  const ref = (0, import_react46.useRef)(null);
+  function track(event) {
+    onPointerMove?.(event);
+    const element = ref.current;
+    if (!interactive || !element) return;
+    const rect = element.getBoundingClientRect();
+    element.style.setProperty("--ow-pointer-x", `${event.clientX - rect.left}px`);
+    element.style.setProperty("--ow-pointer-y", `${event.clientY - rect.top}px`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "div",
+    {
+      ref,
+      className: cx("ow-dot-grid", fade && "ow-dot-grid--fade", interactive && "ow-dot-grid--interactive", className),
+      onPointerMove: track,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
+        interactive ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ow-dot-grid__content", children })
+      ]
+    }
+  );
+}
+
+// src/components/ColorPicker/ColorPicker.tsx
+var import_react47 = require("react");
+var import_react_colorful = require("react-colorful");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
+var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
+var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
+function ColorPicker({
+  value,
+  defaultValue = "#312c7e",
+  onChange,
+  alpha = false,
+  swatches,
+  showInput = true,
+  eyeDropper = true,
+  "aria-label": ariaLabel = "Colour",
+  className
+}) {
+  const [color, setColor] = useControllableState(value, defaultValue, onChange);
+  const [canPick, setCanPick] = (0, import_react47.useState)(false);
+  const rootRef = (0, import_react47.useRef)(null);
+  (0, import_react47.useEffect)(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
+  (0, import_react47.useEffect)(() => {
+    const names = { saturation: "Colour", hue: "Hue", alpha: "Opacity" };
+    for (const [part, label] of Object.entries(names)) {
+      rootRef.current?.querySelector(`.react-colorful__${part} .react-colorful__interactive`)?.setAttribute("aria-label", label);
+    }
+  }, [alpha]);
+  const Picker = alpha ? import_react_colorful.HexAlphaColorPicker : import_react_colorful.HexColorPicker;
+  const change = (next) => setColor(next.toLowerCase());
+  async function pickFromScreen() {
+    if (!window.EyeDropper) return;
+    try {
+      const result = await new window.EyeDropper().open();
+      change(result.sRGBHex);
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Picker, { color, onChange: change }),
+    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "ow-color-picker__row", children: [
+      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PipetteIcon, { size: 15 }) }) : null,
+      showInput ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          import_react_colorful.HexColorInput,
+          {
+            className: "ow-input-group__input",
+            color,
+            onChange: change,
+            alpha,
+            "aria-label": "Hex colour",
+            spellCheck: false
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
+    ] }) : null,
+    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
+      const swatchValue = swatchColor(swatch);
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ow-color-picker__swatch",
+          style: { "--ow-color-picker-value": swatchValue },
+          "aria-label": swatchName(swatch),
+          "aria-pressed": same(swatchValue, color),
+          title: swatchName(swatch),
+          onClick: () => change(swatchValue)
+        },
+        swatchValue
+      );
+    }) }) : null
+  ] });
+}
+function assignRef6(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var ColorField = (0, import_react47.forwardRef)(function ColorField2({
+  value,
+  defaultValue = "#312c7e",
+  onChange,
+  size = "md",
+  isInvalid = false,
+  disabled = false,
+  placement = "bottom-start",
+  id,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...pickerProps
+}, ref) {
+  const [color, setColor] = useControllableState(value, defaultValue, onChange);
+  const [isOpen, setOpen] = (0, import_react47.useState)(false);
+  const triggerRef = (0, import_react47.useRef)(null);
+  const panelRef = (0, import_react47.useRef)(null);
+  const panelId = (0, import_react47.useId)();
+  const { mounted, state } = usePresence(isOpen);
+  const style = useFloating({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement, offset: 6, maxHeight: 640 });
+  const close = (0, import_react47.useCallback)((reason) => {
+    setOpen(false);
+    if (reason !== "outside") triggerRef.current?.focus();
+  }, []);
+  useDismiss(isOpen, [panelRef, triggerRef], close);
+  (0, import_react47.useEffect)(() => {
+    if (!isOpen) return void 0;
+    const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      "button",
+      {
+        ref: (element) => {
+          triggerRef.current = element;
+          assignRef6(ref, element);
+        },
+        id,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? panelId : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+        "aria-invalid": isInvalid || void 0,
+        disabled,
+        className: cx(
+          "ow-select",
+          "ow-color-field",
+          `ow-select--${size}`,
+          { "ow-select--open": isOpen, "ow-select--invalid": isInvalid && !isOpen },
+          className
+        ),
+        onClick: () => setOpen(!isOpen),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !isOpen) {
+            event.preventDefault();
+            setOpen(true);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
+        ]
+      }
+    ),
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "div",
+      {
+        ref: panelRef,
+        ...manualPopover,
+        "data-state": state,
+        id: panelId,
+        role: "dialog",
+        "aria-label": "Choose a colour",
+        className: "ow-popover ow-floating ow-color-field__panel",
+        style,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
+      }
+    ) : null
+  ] });
+});
+
+// src/utils/brand.ts
+var brandSteps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+var lightness = [0.968, 0.94, 0.89, 0.81, 0.68, 0.53, 0.42, 0.33, 0.27, 0.22, 0.17];
+var chroma = [0.012, 0.022, 0.04, 0.066, 0.1, 0.135, 0.134, 0.086, 0.072, 0.058, 0.045];
+var peakChroma = 0.135;
+function parseHex(color) {
+  let hex = color.trim().replace(/^#/, "");
+  if (hex.length === 3 || hex.length === 4) hex = [...hex.slice(0, 3)].map((d) => d + d).join("");
+  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(hex)) throw new Error(`brandScale: "${color}" isn't a hex colour like #2563eb.`);
+  return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+}
+var toLinear = (v) => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+var fromLinear = (v) => v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+function hexToOklch(color) {
+  const [r, g, b] = parseHex(color).map(toLinear);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return { l: L, c: Math.hypot(A, B), h: (Math.atan2(B, A) * 180 / Math.PI + 360) % 360 };
+}
+function oklchToLinear({ l: L, c, h }) {
+  const A = c * Math.cos(h * Math.PI / 180);
+  const B = c * Math.sin(h * Math.PI / 180);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var inGamut = (rgb) => rgb.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+function toHex(color) {
+  let { c } = color;
+  if (!inGamut(oklchToLinear(color))) {
+    let low = 0;
+    let high = c;
+    for (let i = 0; i < 24; i += 1) {
+      const mid = (low + high) / 2;
+      if (inGamut(oklchToLinear({ ...color, c: mid }))) low = mid;
+      else high = mid;
+    }
+    c = low;
+  }
+  return `#${oklchToLinear({ ...color, c }).map((v) => Math.round(Math.min(1, Math.max(0, fromLinear(Math.min(1, Math.max(0, v))))) * 255)).map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+function brandScale(color) {
+  const { c, h } = hexToOklch(color);
+  const strength = Math.min(1.6, c / peakChroma);
+  return Object.fromEntries(brandSteps.map((step, i) => [step, toHex({ l: lightness[i], c: chroma[i] * strength, h })]));
+}
+function brandVariables(brand) {
+  const scale = typeof brand === "string" ? brandScale(brand) : brand;
+  return Object.fromEntries(brandSteps.map((step) => [`--ow-brand-${step}`, scale[step]]));
+}
+function brandCss(brand, selector = ":root") {
+  const scale = typeof brand === "string" ? brandScale(brand) : brand;
+  return `${selector} {
+${brandSteps.map((step) => `    --ow-brand-${step}: ${scale[step]};`).join("\n")}
+}`;
+}
+function applyBrand(brand, element = document.documentElement) {
+  for (const step of brandSteps) element.style.removeProperty(`--ow-brand-${step}`);
+  if (brand === null) return;
+  const variables = brandVariables(brand);
+  for (const [name, value] of Object.entries(variables)) element.style.setProperty(name, value);
+}
+var brandPresets = [
+  {
+    id: "midnight",
+    name: "Midnight",
+    scale: {
+      50: "#f2f3fc",
+      100: "#e7e9f9",
+      200: "#d4d7f4",
+      300: "#b7bbea",
+      400: "#898cd0",
+      500: "#5856ad",
+      600: "#312c7e",
+      700: "#1e1b4b",
+      800: "#18163d",
+      900: "#13112f",
+      950: "#0b0a20"
+    }
+  },
+  {
+    id: "ocean",
+    name: "Ocean",
+    scale: {
+      50: "#edf5fe",
+      100: "#dfedfd",
+      200: "#c3defa",
+      300: "#9ac5f3",
+      400: "#5a9de0",
+      500: "#006ebe",
+      600: "#004f8a",
+      700: "#003763",
+      800: "#00274a",
+      900: "#001b36",
+      950: "#001023"
+    }
+  },
+  {
+    id: "teal",
+    name: "Teal",
+    scale: {
+      50: "#ebf7f7",
+      100: "#daf1f0",
+      200: "#bae4e4",
+      300: "#87d0cf",
+      400: "#1fadad",
+      500: "#007c7c",
+      600: "#005959",
+      700: "#003e3e",
+      800: "#002d2d",
+      900: "#002020",
+      950: "#001313"
+    }
+  },
+  {
+    id: "forest",
+    name: "Forest",
+    scale: {
+      50: "#eef7f0",
+      100: "#e0f0e3",
+      200: "#c6e4cd",
+      300: "#9ecfaa",
+      400: "#5fac76",
+      500: "#008240",
+      600: "#005d2d",
+      700: "#00411d",
+      800: "#003014",
+      900: "#00220c",
+      950: "#001506"
+    }
+  },
+  {
+    id: "plum",
+    name: "Plum",
+    scale: {
+      50: "#f9f2f9",
+      100: "#f4e6f4",
+      200: "#ead1eb",
+      300: "#dab1db",
+      400: "#bb80be",
+      500: "#95489a",
+      600: "#732778",
+      700: "#4d2150",
+      800: "#39163b",
+      900: "#290e2b",
+      950: "#1a071b"
+    }
+  },
+  {
+    id: "rose",
+    name: "Rose",
+    scale: {
+      50: "#fef1f1",
+      100: "#fce5e6",
+      200: "#f8cfd1",
+      300: "#eeadb1",
+      400: "#d67981",
+      500: "#b43b4e",
+      600: "#8e1331",
+      700: "#5e1924",
+      800: "#470f19",
+      900: "#330910",
+      950: "#210408"
+    }
+  },
+  {
+    id: "ember",
+    name: "Ember",
+    scale: {
+      50: "#fdf2ec",
+      100: "#fae7dd",
+      200: "#f5d3c0",
+      300: "#eab395",
+      400: "#d18254",
+      500: "#a94e00",
+      600: "#7b3700",
+      700: "#572500",
+      800: "#411900",
+      900: "#2f1100",
+      950: "#1e0800"
+    }
+  }
+];
+//# sourceMappingURL=index.cjs.map