trc-ui 0.1.0 → 0.5.0

package/dist/index.cjs

@@ -22,34 +22,76 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AccentText: () => AccentText,
+  Accordion: () => Accordion,
+  Alert: () => Alert,
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
   ArrowUp: () => ArrowUp,
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
   BackToTop: () => BackToTop,
+  Breadcrumbs: () => Breadcrumbs,
+  Calendar: () => Calendar,
   Card: () => Card,
   Check: () => Check,
   Checkbox: () => Checkbox,
   ChevronDown: () => ChevronDown,
+  ChevronLeft: () => ChevronLeft,
+  ChevronRight: () => ChevronRight,
   Close: () => Close,
+  CodeBlock: () => CodeBlock,
+  Combobox: () => Combobox,
   Container: () => Container,
+  DatePicker: () => DatePicker,
+  Dialog: () => Dialog,
+  Divider: () => Divider,
+  Drawer: () => Drawer,
+  DropdownMenu: () => DropdownMenu,
+  Dropzone: () => Dropzone,
   Field: () => Field,
+  FileInput: () => FileInput,
   Heading: () => Heading,
   HeroVideo: () => HeroVideo,
   Input: () => Input,
+  Kbd: () => Kbd,
+  LanguageSwitcher: () => LanguageSwitcher,
   Menu: () => Menu,
   PageHero: () => PageHero,
+  Pagination: () => Pagination,
+  PasswordInput: () => PasswordInput,
   PillButton: () => PillButton,
   PillLink: () => PillLink,
+  PinInput: () => PinInput,
+  Popover: () => Popover,
+  Progress: () => Progress,
+  RadioGroup: () => RadioGroup,
   Section: () => Section,
+  SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SiteFooter: () => SiteFooter,
   SiteHeader: () => SiteHeader,
+  Skeleton: () => Skeleton,
+  Slider: () => Slider,
+  Spinner: () => Spinner2,
+  Stat: () => Stat,
   StepNumber: () => StepNumber,
+  Steps: () => Steps,
   Switch: () => Switch,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  Tag: () => Tag,
   Text: () => Text,
   Textarea: () => Textarea,
+  Toaster: () => Toaster,
+  Tooltip: () => Tooltip,
+  acceptsFile: () => acceptsFile,
   cx: () => cx,
-  plainText: () => plainText
+  formatBytes: () => formatBytes,
+  initials: () => initials,
+  paginationRange: () => paginationRange,
+  plainText: () => plainText,
+  toast: () => toast,
+  validateFiles: () => validateFiles
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -76,15 +118,21 @@ function AccentText({ text, accentLast = 0 }) {
   ] });
 }
 var plainText = (text) => text.replaceAll("*", "");
-function Heading({ as: Tag = "h2", size = "xl", accentLast, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { className: cx("trc-display", `trc-heading--${size}`, className), ...props, children: typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccentText, { text: children, accentLast }) : children });
+function Heading({ as: Tag2 = "h2", size: size2 = "xl", accentLast, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag2, { className: cx("trc-display", `trc-heading--${size2}`, className), ...props, children: typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccentText, { text: children, accentLast }) : children });
 }
-function Text({ as, size = "md", tone = "muted", className, ...props }) {
-  const Tag = as ?? "p";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { className: cx("trc-text", `trc-text--${size}`, `trc-text--${tone}`, className), ...props });
+function Text({
+  as,
+  size: size2 = "md",
+  tone = "muted",
+  className,
+  ...props
+}) {
+  const Tag2 = as ?? "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag2, { className: cx("trc-text", `trc-text--${size2}`, `trc-text--${tone}`, className), ...props });
 }
-function StepNumber({ n, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: cx("trc-step-number", size === "sm" && "trc-step-number--sm", className), children: String(n).padStart(2, "0") });
+function StepNumber({ n, size: size2 = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: cx("trc-step-number", size2 === "sm" && "trc-step-number--sm", className), children: String(n).padStart(2, "0") });
 }
 
 // src/components/pill.tsx
@@ -110,10 +158,16 @@ var Check = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...
 var Menu = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 var Close = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
 var ArrowUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 19V5M6 11l6-6 6 6" }) });
+var Calendar = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...base, ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "5", width: "18", height: "16", rx: "3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 10h18M8 3v4M16 3v4" })
+] });
+var ChevronLeft = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 6-6 6 6 6" }) });
+var ChevronRight = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 6 6 6-6 6" }) });
 
 // src/components/pill.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var pillClass = ({ solid, size }, className) => cx("trc-pill", size === "sm" && "trc-pill--sm", solid && "trc-pill--solid", className);
+var pillClass = ({ solid, size: size2 }, className) => cx("trc-pill", size2 === "sm" && "trc-pill--sm", solid && "trc-pill--solid", className);
 function PillInner({ icon, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "trc-pill__fill" }),
@@ -121,7 +175,7 @@ function PillInner({ icon, children }) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "trc-pill__label", children })
   ] });
 }
-var PillButton = (0, import_react.forwardRef)(function PillButton2({ solid, size = "md", icon, loading = false, disabled, type = "button", className, children, ...props }, ref) {
+var PillButton = (0, import_react.forwardRef)(function PillButton2({ solid, size: size2 = "md", icon, loading = false, disabled, type = "button", className, children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
@@ -129,22 +183,27 @@ var PillButton = (0, import_react.forwardRef)(function PillButton2({ solid, size
       type,
       disabled: disabled || loading,
       "aria-busy": loading || void 0,
-      className: pillClass({ solid, size }, className),
+      className: pillClass({ solid, size: size2 }, className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PillInner, { icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: "trc-spin" }) : icon, children })
     }
   );
 });
-var PillLink = (0, import_react.forwardRef)(function PillLink2({ as, solid, size = "md", icon, className, children, ...props }, ref) {
-  const Tag = as ?? "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tag, { ref, className: pillClass({ solid, size }, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PillInner, { icon, children }) });
+var PillLink = (0, import_react.forwardRef)(function PillLink2({ as, solid, size: size2 = "md", icon, className, children, ...props }, ref) {
+  const Tag2 = as ?? "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tag2, { ref, className: pillClass({ solid, size: size2 }, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PillInner, { icon, children }) });
 });
 
 // src/components/surfaces.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function Container({ as, size = "default", className, ...props }) {
-  const Tag = as ?? "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag, { className: cx("trc-container", size !== "default" && `trc-container--${size}`, className), ...props });
+function Container({
+  as,
+  size: size2 = "default",
+  className,
+  ...props
+}) {
+  const Tag2 = as ?? "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag2, { className: cx("trc-container", size2 !== "default" && `trc-container--${size2}`, className), ...props });
 }
 function Section({
   as,
@@ -154,11 +213,11 @@ function Section({
   children,
   ...props
 }) {
-  const Tag = as ?? "section";
+  const Tag2 = as ?? "section";
   if (inset) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag, { className: cx("trc-section-inset", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cx("trc-section-inset__card", spacing !== "none" && `trc-section--${spacing}`), children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag2, { className: cx("trc-section-inset", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cx("trc-section-inset__card", spacing !== "none" && `trc-section--${spacing}`), children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag, { className: cx(spacing !== "none" && `trc-section--${spacing}`, className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag2, { className: cx(spacing !== "none" && `trc-section--${spacing}`, className), ...props, children });
 }
 function Card({
   as,
@@ -170,9 +229,9 @@ function Card({
   children,
   ...props
 }) {
-  const Tag = as ?? "div";
+  const Tag2 = as ?? "div";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    Tag,
+    Tag2,
     {
       className: cx(
         "trc-card",
@@ -289,8 +348,10 @@ var Switch = (0, import_react3.forwardRef)(function Switch2({ label, description
 });
 
 // src/components/site-header.tsx
-var import_react5 = require("react");
-var import_react_dom = require("react-dom");
+var import_react7 = require("react");
+
+// src/components/layer.tsx
+var import_react6 = require("react");
 
 // src/hooks/use-modal.ts
 var import_react4 = require("react");
@@ -312,9 +373,9 @@ function useModal(open, panelRef, onClose) {
         return;
       }
       if (e.key !== "Tab") return;
-      const items = [...panel.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null);
-      const first = items[0];
-      const last = items[items.length - 1];
+      const items2 = [...panel.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null);
+      const first = items2[0];
+      const last = items2[items2.length - 1];
       if (!first || !last) {
         e.preventDefault();
         return;
@@ -336,8 +397,88 @@ function useModal(open, panelRef, onClose) {
   }, [open, panelRef]);
 }
 
-// src/components/site-header.tsx
+// src/utils/portal.tsx
+var import_react5 = require("react");
+var import_react_dom = require("react-dom");
+var noop = () => () => {
+};
+var useIsClient = () => (0, import_react5.useSyncExternalStore)(
+  noop,
+  () => true,
+  () => false
+);
+function Portal({ children }) {
+  return useIsClient() ? (0, import_react_dom.createPortal)(children, document.body) : null;
+}
+
+// src/components/layer.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function ModalLayer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  closeLabel,
+  closeOnOverlay,
+  rootClassName,
+  panelClassName
+}) {
+  const titleId = (0, import_react6.useId)();
+  const descriptionId = (0, import_react6.useId)();
+  const panel = (0, import_react6.useRef)(null);
+  useModal(open, panel, onClose);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("trc-layer", rootClassName, open && "trc-layer--open"), "aria-hidden": !open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "trc-layer__overlay", onClick: closeOnOverlay ? onClose : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        ref: panel,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": description != null ? descriptionId : void 0,
+        tabIndex: -1,
+        className: panelClassName,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "trc-layer__head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { id: titleId, className: "trc-layer__title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "trc-layer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Close, {}) })
+          ] }),
+          description != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { id: descriptionId, className: "trc-layer__description", children: description }),
+          children != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "trc-layer__body", children }),
+          footer != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "trc-layer__footer", children: footer })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/drawer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Drawer({
+  side = "right",
+  size: size2 = "sm",
+  closeLabel = "Close",
+  closeOnOverlay = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ModalLayer,
+    {
+      ...props,
+      closeLabel,
+      closeOnOverlay,
+      rootClassName: `trc-layer--drawer trc-layer--${side}`,
+      panelClassName: cx("trc-drawer", `trc-drawer--${size2}`, className)
+    }
+  );
+}
+
+// src/components/site-header.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var isMenu = (item) => "items" in item;
 function SiteHeader({
   logo,
@@ -353,19 +494,19 @@ function SiteHeader({
   closeLabel = "Close",
   className
 }) {
-  const [scrolled, setScrolled] = (0, import_react5.useState)(false);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [scrolled, setScrolled] = (0, import_react7.useState)(false);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     const update = () => setScrolled(window.scrollY > scrollThreshold);
     update();
     window.addEventListener("scroll", update, { passive: true });
     return () => window.removeEventListener("scroll", update);
   }, [scrollThreshold]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { className: cx("trc-header", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("trc-header__bar", scrolled && "trc-header__bar--scrolled"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-header__logo", children: logo }),
-      nav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { className: "trc-header__nav", children: nav.map(
-        (item, i) => isMenu(item) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavDropdown, { menu: item, linkAs: LinkTag }, i) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: cx("trc-header", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("trc-header__bar", scrolled && "trc-header__bar--scrolled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-header__logo", children: logo }),
+      nav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { className: "trc-header__nav", children: nav.map(
+        (item, i) => isMenu(item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NavDropdown, { menu: item, linkAs: LinkTag }, i) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           LinkTag,
           {
             href: item.href,
@@ -376,10 +517,10 @@ function SiteHeader({
           i
         )
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "trc-header__end", children: [
-        actions && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "trc-header__actions", children: actions }),
-        cta && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PillLink, { as: LinkTag, href: cta.href, size: "sm", className: "trc-header__cta", children: cta.label }),
-        (nav.length > 0 || cta || mobileFooter) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "trc-header__end", children: [
+        actions && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-header__actions", children: actions }),
+        cta && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PillLink, { as: LinkTag, href: cta.href, size: "sm", className: "trc-header__cta", children: cta.label }),
+        (nav.length > 0 || cta || mobileFooter) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -387,12 +528,12 @@ function SiteHeader({
             "aria-label": menuLabel,
             "aria-expanded": open,
             onClick: () => setOpen(true),
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Menu, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MobileMenu,
       {
         open,
@@ -408,19 +549,21 @@ function SiteHeader({
   ] });
 }
 function NavDropdown({ menu, linkAs: LinkTag }) {
-  const id = (0, import_react5.useId)();
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const closeTimer = (0, import_react5.useRef)(void 0);
-  const button = (0, import_react5.useRef)(null);
+  const id = (0, import_react7.useId)();
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const closeTimer = (0, import_react7.useRef)(void 0);
+  const button = (0, import_react7.useRef)(null);
+  const openedByHover = (0, import_react7.useRef)(false);
   const show = () => {
     window.clearTimeout(closeTimer.current);
+    if (!open) openedByHover.current = true;
     setOpen(true);
   };
   const hide = () => {
     closeTimer.current = window.setTimeout(() => setOpen(false), 120);
   };
-  (0, import_react5.useEffect)(() => () => window.clearTimeout(closeTimer.current), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  (0, import_react7.useEffect)(() => () => window.clearTimeout(closeTimer.current), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: "trc-dropdown",
@@ -434,22 +577,25 @@ function NavDropdown({ menu, linkAs: LinkTag }) {
       },
       onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && setOpen(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "button",
           {
             ref: button,
             type: "button",
             "aria-expanded": open,
             "aria-controls": id,
-            onClick: () => setOpen((o) => !o),
+            onClick: () => {
+              if (open && openedByHover.current) openedByHover.current = false;
+              else setOpen((o) => !o);
+            },
             className: cx("trc-header__link", "trc-dropdown__trigger", open && "trc-dropdown__trigger--open"),
             children: [
               menu.label,
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDown, { className: "trc-dropdown__chevron" })
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronDown, { className: "trc-dropdown__chevron" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, className: cx("trc-dropdown__panel", open && "trc-dropdown__panel--open"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "trc-dropdown__list", children: menu.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id, className: cx("trc-dropdown__panel", open && "trc-dropdown__panel--open"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "trc-dropdown__list", children: menu.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           LinkTag,
           {
             href: item.href,
@@ -457,8 +603,8 @@ function NavDropdown({ menu, linkAs: LinkTag }) {
             onClick: () => setOpen(false),
             className: "trc-dropdown__item",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "trc-dropdown__label", children: item.label }),
-              item.description != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "trc-dropdown__description", children: item.description })
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "trc-dropdown__label", children: item.label }),
+              item.description != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "trc-dropdown__description", children: item.description })
             ]
           }
         ) }, i)) }) })
@@ -476,66 +622,39 @@ function MobileMenu({
   title,
   closeLabel
 }) {
-  const titleId = (0, import_react5.useId)();
-  const panel = (0, import_react5.useRef)(null);
-  const [mounted, setMounted] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => setMounted(true), []);
-  useModal(open, panel, onClose);
-  if (!mounted) return null;
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("trc-drawer", open && "trc-drawer--open"), "aria-hidden": !open, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "trc-drawer__overlay", onClick: onClose }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Drawer, { open, onClose, title, closeLabel, className: "trc-mobile-menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { className: "trc-mobile-nav", children: nav.map(
+      (item, i) => isMenu(item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "trc-mobile-nav__group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "trc-mobile-nav__heading", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "trc-mobile-nav__sub", children: item.items.map((sub, j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          LinkTag,
+          {
+            href: sub.href,
+            "aria-current": sub.active ? "page" : void 0,
+            onClick: onClose,
+            className: "trc-mobile-nav__sublink",
+            children: sub.label
+          }
+        ) }, j)) })
+      ] }, i) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        LinkTag,
         {
-          ref: panel,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": titleId,
-          tabIndex: -1,
-          className: "trc-drawer__panel",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "trc-drawer__head", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { id: titleId, className: "trc-drawer__title", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "trc-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Close, {}) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { className: "trc-mobile-nav", children: nav.map(
-              (item, i) => isMenu(item) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "trc-mobile-nav__group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "trc-mobile-nav__heading", children: item.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "trc-mobile-nav__sub", children: item.items.map((sub, j) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  LinkTag,
-                  {
-                    href: sub.href,
-                    "aria-current": sub.active ? "page" : void 0,
-                    onClick: onClose,
-                    className: "trc-mobile-nav__sublink",
-                    children: sub.label
-                  }
-                ) }, j)) })
-              ] }, i) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                LinkTag,
-                {
-                  href: item.href,
-                  "aria-current": item.active ? "page" : void 0,
-                  onClick: onClose,
-                  className: cx("trc-mobile-nav__link", item.active && "trc-mobile-nav__link--active"),
-                  children: item.label
-                },
-                i
-              )
-            ) }),
-            cta && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PillLink, { as: LinkTag, href: cta.href, onClick: onClose, className: "trc-drawer__cta", children: cta.label }),
-            footer != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "trc-drawer__footer", children: footer })
-          ]
-        }
+          href: item.href,
+          "aria-current": item.active ? "page" : void 0,
+          onClick: onClose,
+          className: cx("trc-mobile-nav__link", item.active && "trc-mobile-nav__link--active"),
+          children: item.label
+        },
+        i
       )
-    ] }),
-    document.body
-  );
+    ) }),
+    cta && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PillLink, { as: LinkTag, href: cta.href, onClick: onClose, className: "trc-mobile-menu__cta", children: cta.label }),
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-mobile-menu__footer", children: footer })
+  ] });
 }
 
 // src/components/site-footer.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function SiteFooter({
   logo,
   logoLabel,
@@ -550,28 +669,28 @@ function SiteFooter({
   linkAs: LinkTag = "a",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("footer", { className: cx("trc-footer", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "trc-footer__card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "trc-footer__main", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "trc-footer__brand", children: [
-        logo != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-footer__logo", children: logo }),
-        tagline != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "trc-footer__tagline", children: tagline }),
-        children != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "trc-footer__extra", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: cx("trc-footer", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "trc-footer__card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "trc-footer__main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "trc-footer__brand", children: [
+        logo != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-footer__logo", children: logo }),
+        tagline != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "trc-footer__tagline", children: tagline }),
+        children != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "trc-footer__extra", children })
       ] }),
-      columns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: "trc-footer__columns", "aria-label": columnsLabel, children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "trc-footer__heading", children: col.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "trc-footer__list", children: col.links.map((link, j) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkTag, { href: link.href, className: "trc-footer__link", children: link.label }) }, j)) })
+      columns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { className: "trc-footer__columns", "aria-label": columnsLabel, children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "trc-footer__heading", children: col.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "trc-footer__list", children: col.links.map((link, j) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LinkTag, { href: link.href, className: "trc-footer__link", children: link.label }) }, j)) })
       ] }, i)) })
     ] }),
-    (copyright != null || legal.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "trc-footer__bottom", children: [
-      copyright != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "trc-footer__copyright", children: copyright }),
-      legal.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": legalLabel, className: "trc-footer__legal", children: legal.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkTag, { href: link.href, className: "trc-footer__legal-link", children: link.label }, i)) })
+    (copyright != null || legal.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "trc-footer__bottom", children: [
+      copyright != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "trc-footer__copyright", children: copyright }),
+      legal.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { "aria-label": legalLabel, className: "trc-footer__legal", children: legal.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LinkTag, { href: link.href, className: "trc-footer__legal-link", children: link.label }, i)) })
     ] })
   ] }) });
 }
 
 // src/components/hero.tsx
-var import_react6 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var delay = (ms) => ({ "--trc-delay": `${ms}ms` });
 function PageHero({
   title,
@@ -584,24 +703,24 @@ function PageHero({
   className
 }) {
   const words = title.split(" ").length;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("section", { className: cx("trc-hero-inset", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "trc-page-hero", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "aria-hidden": true, className: "trc-hero__media", children: typeof image === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: image, alt: "", className: "trc-hero__image", style: { objectPosition: imagePosition } }) : image != null ? image : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-page-hero__glow" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "aria-hidden": true, className: "trc-page-hero__veil" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "trc-page-hero__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "trc-display trc-page-hero__title trc-enter", style: delay(150), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AccentText, { text: title, accentLast: accentLast ?? (words > 3 ? 2 : 1) }) }),
-      description != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "trc-page-hero__description trc-enter", style: delay(250), children: description }),
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-page-hero__meta trc-enter", style: delay(350), children: meta }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-page-hero__actions trc-enter", style: delay(450), children })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("section", { className: cx("trc-hero-inset", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "trc-page-hero", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": true, className: "trc-hero__media", children: typeof image === "string" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: image, alt: "", className: "trc-hero__image", style: { objectPosition: imagePosition } }) : image != null ? image : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "trc-page-hero__glow" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": true, className: "trc-page-hero__veil" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "trc-page-hero__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: "trc-display trc-page-hero__title trc-enter", style: delay(150), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AccentText, { text: title, accentLast: accentLast ?? (words > 3 ? 2 : 1) }) }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "trc-page-hero__description trc-enter", style: delay(250), children: description }),
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "trc-page-hero__meta trc-enter", style: delay(350), children: meta }),
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "trc-page-hero__actions trc-enter", style: delay(450), children })
     ] })
   ] }) });
 }
 var prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, className }) {
-  const videos = (0, import_react6.useRef)([]);
-  const section = (0, import_react6.useRef)(null);
-  const media = (0, import_react6.useRef)(null);
-  const [active, setActive] = (0, import_react6.useState)(-1);
-  (0, import_react6.useEffect)(() => {
+  const videos = (0, import_react8.useRef)([]);
+  const section = (0, import_react8.useRef)(null);
+  const media = (0, import_react8.useRef)(null);
+  const [active, setActive] = (0, import_react8.useState)(-1);
+  (0, import_react8.useEffect)(() => {
     if (clips.length === 0) return;
     const start = Math.floor(Math.random() * clips.length);
     const video = videos.current[start];
@@ -613,7 +732,7 @@ function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, classN
       video?.pause();
     };
   }, [clips.length]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const el = section.current;
     const layer = media.current;
     if (!parallax || !el || !layer || prefersReducedMotion()) return;
@@ -642,8 +761,8 @@ function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, classN
     });
     setActive((i + 1) % clips.length);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("section", { ref: section, className: cx("trc-hero-inset", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "trc-hero-video", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: media, "aria-hidden": true, className: "trc-hero__media trc-hero-video__media", children: clips.map((clip, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("section", { ref: section, className: cx("trc-hero-inset", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "trc-hero-video", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: media, "aria-hidden": true, className: "trc-hero__media trc-hero-video__media", children: clips.map((clip, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "video",
       {
         ref: (el) => {
@@ -661,32 +780,32 @@ function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, classN
         },
         onEnded: () => i === active && playNext(i),
         children: [
-          clip.webm && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("source", { src: clip.webm, type: "video/webm" }),
-          clip.mp4 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("source", { src: clip.mp4, type: "video/mp4" })
+          clip.webm && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("source", { src: clip.webm, type: "video/webm" }),
+          clip.mp4 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("source", { src: clip.mp4, type: "video/mp4" })
         ]
       },
       i
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "aria-hidden": true, className: "trc-hero-video__veil" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "trc-hero-video__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-hero-video__main", children }),
-      aside != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "trc-hero-video__aside", children: aside })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": true, className: "trc-hero-video__veil" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "trc-hero-video__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "trc-hero-video__main", children }),
+      aside != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "trc-hero-video__aside", children: aside })
     ] })
   ] }) });
 }
 
 // src/components/back-to-top.tsx
-var import_react7 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function BackToTop({ label = "Back to top", threshold = 0.8, className }) {
-  const [visible, setVisible] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     const update = () => setVisible(window.scrollY > window.innerHeight * threshold);
     update();
     window.addEventListener("scroll", update, { passive: true });
     return () => window.removeEventListener("scroll", update);
   }, [threshold]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "button",
     {
       type: "button",
@@ -698,40 +817,1894 @@ function BackToTop({ label = "Back to top", threshold = 0.8, className }) {
       "aria-hidden": !visible,
       tabIndex: visible ? 0 : -1,
       className: cx("trc-back-to-top", visible && "trc-back-to-top--visible", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrowUp, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowUp, {})
+    }
+  );
+}
+
+// src/components/dialog.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Dialog({ size: size2 = "md", closeLabel = "Close", closeOnOverlay = true, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ModalLayer,
+    {
+      ...props,
+      closeLabel,
+      closeOnOverlay,
+      rootClassName: "trc-layer--dialog",
+      panelClassName: cx("trc-dialog", `trc-dialog--${size2}`, className)
+    }
+  );
+}
+
+// src/components/dropdown-menu.tsx
+var import_react12 = require("react");
+
+// src/hooks/use-floating.ts
+var import_react10 = require("react");
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react10.useEffect : import_react10.useLayoutEffect;
+var MARGIN = 8;
+function useAnchoredPosition(open, anchorRef, floatingRef, { side = "bottom", align = "start", offset = 8 } = {}) {
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = floating.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const below = a.bottom + offset;
+      const above = a.top - offset - f.height;
+      const fitsBelow = below + f.height <= vh - MARGIN;
+      const fitsAbove = above >= MARGIN;
+      const resolved = side === "bottom" ? fitsBelow || !fitsAbove ? "bottom" : "top" : fitsAbove || !fitsBelow ? "top" : "bottom";
+      const top = resolved === "bottom" ? below : above;
+      let left = align === "start" ? a.left : align === "end" ? a.right - f.width : a.left + a.width / 2 - f.width / 2;
+      left = Math.min(Math.max(left, MARGIN), Math.max(MARGIN, vw - f.width - MARGIN));
+      floating.style.top = `${Math.round(top)}px`;
+      floating.style.left = `${Math.round(left)}px`;
+      floating.dataset.side = resolved;
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, side, align, offset]);
+}
+function useDismiss(open, refs, onDismiss) {
+  const dismiss2 = (0, import_react10.useRef)(onDismiss);
+  dismiss2.current = onDismiss;
+  (0, import_react10.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!refs.some((ref) => ref.current?.contains(target))) dismiss2.current("outside");
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") dismiss2.current("escape");
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+}
+
+// src/utils/compose.ts
+var import_react11 = require("react");
+function callAll(...fns) {
+  return (...args) => fns.forEach((fn) => fn?.(...args));
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+function getElementRef(element) {
+  const fromProps = element.props.ref;
+  if (Number.parseInt(import_react11.version, 10) >= 19) return fromProps;
+  return element.ref;
+}
+
+// src/components/dropdown-menu.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var isAction = (item) => item !== "separator";
+var textOf = (item) => (item.textValue ?? (typeof item.label === "string" ? item.label : "")).toLowerCase();
+function DropdownMenu({ trigger, items: items2, align = "start", linkAs: LinkTag = "a", className }) {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const triggerRef = (0, import_react12.useRef)(null);
+  const menuRef = (0, import_react12.useRef)(null);
+  const itemRefs = (0, import_react12.useRef)([]);
+  const generatedId = (0, import_react12.useId)();
+  const triggerId = trigger.props.id ?? `${generatedId}-trigger`;
+  const menuId = `${generatedId}-menu`;
+  const enabled = items2.map((item, i) => isAction(item) && !item.disabled ? i : -1).filter((i) => i >= 0);
+  const focusItem = (index) => index !== void 0 && itemRefs.current[index]?.focus();
+  const openMenu = (focus) => {
+    setOpen(true);
+    requestAnimationFrame(() => focusItem(focus === "first" ? enabled[0] : enabled[enabled.length - 1]));
+  };
+  const close = (returnFocus = true) => {
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  };
+  useAnchoredPosition(open, triggerRef, menuRef, { side: "bottom", align });
+  useDismiss(open, [triggerRef, menuRef], (reason) => close(reason === "escape"));
+  const select = (item) => {
+    item.onSelect?.();
+    close();
+  };
+  const onMenuKeyDown = (e) => {
+    const current = itemRefs.current.findIndex((el) => el === document.activeElement);
+    const position = enabled.indexOf(current);
+    const move = (to) => {
+      e.preventDefault();
+      focusItem(enabled[(to + enabled.length) % enabled.length]);
+    };
+    if (e.key === "ArrowDown") move(position + 1);
+    else if (e.key === "ArrowUp") move(position - 1);
+    else if (e.key === "Home") move(0);
+    else if (e.key === "End") move(enabled.length - 1);
+    else if (e.key === "Tab") close(false);
+    else if (e.key.length === 1 && /\S/.test(e.key)) {
+      const letter = e.key.toLowerCase();
+      const order = [...enabled.slice(position + 1), ...enabled.slice(0, position + 1)];
+      const match = order.find((i) => textOf(items2[i]).startsWith(letter));
+      if (match !== void 0) focusItem(match);
+    }
+  };
+  const triggerElement = (0, import_react12.cloneElement)(trigger, {
+    ref: mergeRefs(triggerRef, getElementRef(trigger)),
+    id: triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onClick: callAll(trigger.props.onClick, () => open ? close() : openMenu("first")),
+    onKeyDown: callAll(trigger.props.onKeyDown, (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openMenu(e.key === "ArrowDown" ? "first" : "last");
+      }
+    })
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    triggerElement,
+    open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        id: menuId,
+        role: "menu",
+        "aria-labelledby": triggerId,
+        className: cx("trc-floating", "trc-menu", className),
+        onKeyDown: onMenuKeyDown,
+        children: items2.map((item, i) => {
+          if (!isAction(item)) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "separator", className: "trc-menu__separator" }, i);
+          const shared = {
+            ref: (el) => {
+              itemRefs.current[i] = el;
+            },
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-disabled": item.disabled || void 0,
+            className: cx("trc-menu__item", item.danger && "trc-menu__item--danger"),
+            onMouseMove: (e) => !item.disabled && e.currentTarget.focus(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "trc-menu__label", children: item.label }),
+              item.hint != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "trc-menu__hint", children: item.hint })
+            ] })
+          };
+          return item.href && !item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LinkTag, { href: item.href, ...shared, onClick: () => select(item) }, i) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "div",
+            {
+              ...shared,
+              onClick: () => !item.disabled && select(item),
+              onKeyDown: (e) => {
+                if ((e.key === "Enter" || e.key === " ") && !item.disabled) {
+                  e.preventDefault();
+                  select(item);
+                }
+              }
+            },
+            i
+          );
+        })
+      }
+    ) })
+  ] });
+}
+
+// src/components/popover.tsx
+var import_react13 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Popover({
+  trigger,
+  title,
+  label,
+  children,
+  side = "bottom",
+  align = "start",
+  open: controlled,
+  onOpenChange,
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = (0, import_react13.useState)(false);
+  const open = controlled ?? uncontrolled;
+  const setOpen = (value) => {
+    if (controlled === void 0) setUncontrolled(value);
+    onOpenChange?.(value);
+  };
+  const triggerRef = (0, import_react13.useRef)(null);
+  const panelRef = (0, import_react13.useRef)(null);
+  const id = (0, import_react13.useId)();
+  useAnchoredPosition(open, triggerRef, panelRef, { side, align });
+  useDismiss(open, [triggerRef, panelRef], (reason) => {
+    setOpen(false);
+    if (reason === "escape") triggerRef.current?.focus();
+  });
+  (0, import_react13.useEffect)(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const first = panel?.querySelector(
+      "[data-autofocus], input, select, textarea, button, a[href], [tabindex]:not([tabindex='-1'])"
+    );
+    (first ?? panel)?.focus();
+  }, [open]);
+  const triggerElement = (0, import_react13.cloneElement)(trigger, {
+    ref: mergeRefs(triggerRef, getElementRef(trigger)),
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": open ? `${id}-panel` : void 0,
+    onClick: callAll(trigger.props.onClick, () => setOpen(!open))
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    triggerElement,
+    open && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        id: `${id}-panel`,
+        role: "dialog",
+        "aria-labelledby": title != null ? `${id}-title` : void 0,
+        "aria-label": title == null ? label : void 0,
+        tabIndex: -1,
+        className: cx("trc-floating", "trc-popover", className),
+        children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { id: `${id}-title`, className: "trc-popover__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "trc-popover__body", children })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/tooltip.tsx
+var import_react14 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Tooltip({ label, children, side = "top", delay: delay2 = 300, className }) {
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const anchorRef = (0, import_react14.useRef)(null);
+  const tipRef = (0, import_react14.useRef)(null);
+  const timer = (0, import_react14.useRef)(void 0);
+  const id = (0, import_react14.useId)();
+  const show = (wait) => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setOpen(true), wait);
+  };
+  const hide = () => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setOpen(false), 100);
+  };
+  (0, import_react14.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  useAnchoredPosition(open, anchorRef, tipRef, { side, align: "center", offset: 8 });
+  const child = (0, import_react14.cloneElement)(children, {
+    ref: mergeRefs(anchorRef, getElementRef(children)),
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+    onMouseEnter: callAll(children.props.onMouseEnter, () => show(delay2)),
+    onMouseLeave: callAll(children.props.onMouseLeave, hide),
+    onFocus: callAll(children.props.onFocus, () => show(0)),
+    onBlur: callAll(children.props.onBlur, () => {
+      window.clearTimeout(timer.current);
+      setOpen(false);
+    })
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    child,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        ref: tipRef,
+        id,
+        role: "tooltip",
+        className: cx("trc-floating", "trc-tooltip", open && "trc-tooltip--open", className),
+        onMouseEnter: () => window.clearTimeout(timer.current),
+        onMouseLeave: hide,
+        children: label
+      }
+    ) })
+  ] });
+}
+
+// src/components/toast.tsx
+var import_react15 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var items = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((listener) => listener());
+var subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var EMPTY = [];
+var LEAVE_MS = 200;
+function dismiss(id) {
+  items = items.map((t) => id === void 0 || t.id === id ? { ...t, leaving: true } : t);
+  emit();
+  window.setTimeout(() => {
+    items = items.filter((t) => !(t.leaving && (id === void 0 || t.id === id)));
+    emit();
+  }, LEAVE_MS);
+}
+function toast(title, options = {}) {
+  const id = nextId++;
+  items = [...items, { ...options, id, title, leaving: false }];
+  emit();
+  return id;
+}
+toast.success = (title, options = {}) => toast(title, { ...options, tone: "success" });
+toast.error = (title, options = {}) => toast(title, { ...options, tone: "error" });
+toast.dismiss = dismiss;
+function Toaster({
+  position = "bottom-right",
+  duration = 5e3,
+  label = "Notifications",
+  closeLabel = "Close"
+}) {
+  const toasts = (0, import_react15.useSyncExternalStore)(
+    subscribe,
+    () => items,
+    () => EMPTY
+  );
+  const [paused, setPaused] = (0, import_react15.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "section",
+    {
+      "aria-label": label,
+      className: cx("trc-toaster", `trc-toaster--${position}`),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && setPaused(false),
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ol", { "aria-live": "polite", "aria-relevant": "additions", className: "trc-toaster__list", children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToastCard, { toast: t, duration: t.duration ?? duration, paused, closeLabel }, t.id)) })
+    }
+  ) });
+}
+function ToastCard({
+  toast: t,
+  duration,
+  paused,
+  closeLabel
+}) {
+  const remaining = (0, import_react15.useRef)(duration);
+  (0, import_react15.useEffect)(() => {
+    if (paused || t.leaving || !Number.isFinite(remaining.current)) return;
+    const started = Date.now();
+    const timer = window.setTimeout(() => dismiss(t.id), remaining.current);
+    return () => {
+      window.clearTimeout(timer);
+      remaining.current -= Date.now() - started;
+    };
+  }, [paused, t.leaving, t.id]);
+  const tone = t.tone ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("li", { className: cx("trc-toast", `trc-toast--${tone}`, t.leaving && "trc-toast--leaving"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "trc-toast__text", role: tone === "error" ? "alert" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "trc-toast__title", children: t.title }),
+      t.description != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "trc-toast__description", children: t.description })
+    ] }),
+    t.action && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "trc-toast__action",
+        onClick: () => {
+          t.action?.onClick();
+          dismiss(t.id);
+        },
+        children: t.action.label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "trc-toast__close", "aria-label": closeLabel, onClick: () => dismiss(t.id), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Close, {}) })
+  ] });
+}
+
+// src/components/alert.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Alert({ title, tone = "info", actions, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cx("trc-alert", `trc-alert--${tone}`, className), ...props, children: [
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "trc-alert__title", children: title }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "trc-alert__body", children }),
+    actions != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "trc-alert__actions", children: actions })
+  ] });
+}
+
+// src/components/tabs.tsx
+var import_react17 = require("react");
+
+// src/hooks/use-controllable.ts
+var import_react16 = require("react");
+function useControllable(value, defaultValue, onChange) {
+  const [internal, setInternal] = (0, import_react16.useState)(defaultValue);
+  const controlled = (0, import_react16.useRef)(value !== void 0).current;
+  const current = controlled ? value : internal;
+  const set = (next) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  return [current, set];
+}
+
+// src/components/tabs.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Tabs({
+  items: items2,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  activation = "automatic",
+  className
+}) {
+  const firstEnabled = items2.find((item) => !item.disabled)?.value ?? "";
+  const [selected, setSelected] = useControllable(value, defaultValue ?? firstEnabled, onValueChange);
+  const id = (0, import_react17.useId)();
+  const tabRefs = (0, import_react17.useRef)([]);
+  const enabled = items2.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+  const onKeyDown = (e, index) => {
+    const position = enabled.indexOf(index);
+    let target;
+    if (e.key === "ArrowRight") target = enabled[(position + 1) % enabled.length];
+    else if (e.key === "ArrowLeft") target = enabled[(position - 1 + enabled.length) % enabled.length];
+    else if (e.key === "Home") target = enabled[0];
+    else if (e.key === "End") target = enabled[enabled.length - 1];
+    if (target === void 0) return;
+    e.preventDefault();
+    tabRefs.current[target]?.focus();
+    if (activation === "automatic") setSelected(items2[target].value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cx("trc-tabs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "tablist", "aria-label": label, className: "trc-tabs__list", children: items2.map((item, i) => {
+      const isSelected = item.value === selected;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[i] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${id}-tab-${i}`,
+          "aria-selected": isSelected,
+          "aria-controls": `${id}-panel-${i}`,
+          disabled: item.disabled,
+          tabIndex: isSelected ? 0 : -1,
+          className: "trc-tabs__tab",
+          onClick: () => setSelected(item.value),
+          onKeyDown: (e) => onKeyDown(e, i),
+          children: item.label
+        },
+        item.value
+      );
+    }) }),
+    items2.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${id}-panel-${i}`,
+        "aria-labelledby": `${id}-tab-${i}`,
+        hidden: item.value !== selected,
+        tabIndex: 0,
+        className: "trc-tabs__panel",
+        children: item.content
+      },
+      item.value
+    ))
+  ] });
+}
+
+// src/components/segmented-control.tsx
+var import_react18 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  name,
+  size: size2 = "md",
+  className
+}) {
+  const [selected, setSelected] = useControllable(value, defaultValue ?? options[0]?.value ?? "", onValueChange);
+  const generated = (0, import_react18.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx("trc-segmented", size2 === "sm" && "trc-segmented--sm", className),
+      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "trc-segmented__option", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "input",
+          {
+            type: "radio",
+            name: name ?? generated,
+            value: option.value,
+            checked: option.value === selected,
+            disabled: option.disabled,
+            onChange: () => setSelected(option.value),
+            className: "trc-segmented__input"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "trc-segmented__label", children: option.label })
+      ] }, option.value))
     }
   );
 }
+
+// src/components/accordion.tsx
+var import_react19 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Accordion({
+  items: items2,
+  type = "single",
+  value,
+  defaultValue = [],
+  onValueChange,
+  headingLevel = 3,
+  className
+}) {
+  const [open, setOpen] = useControllable(value, defaultValue, onValueChange);
+  const id = (0, import_react19.useId)();
+  const buttons = (0, import_react19.useRef)([]);
+  const Heading2 = `h${headingLevel}`;
+  const enabled = items2.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+  const toggle = (itemValue) => {
+    const isOpen = open.includes(itemValue);
+    if (type === "single") setOpen(isOpen ? [] : [itemValue]);
+    else setOpen(isOpen ? open.filter((v) => v !== itemValue) : [...open, itemValue]);
+  };
+  const onKeyDown = (e, index) => {
+    const position = enabled.indexOf(index);
+    let target;
+    if (e.key === "ArrowDown") target = enabled[(position + 1) % enabled.length];
+    else if (e.key === "ArrowUp") target = enabled[(position - 1 + enabled.length) % enabled.length];
+    else if (e.key === "Home") target = enabled[0];
+    else if (e.key === "End") target = enabled[enabled.length - 1];
+    if (target === void 0) return;
+    e.preventDefault();
+    buttons.current[target]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx("trc-accordion", className), children: items2.map((item, i) => {
+    const isOpen = open.includes(item.value);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx("trc-accordion__item", isOpen && "trc-accordion__item--open"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Heading2, { className: "trc-accordion__heading", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "button",
+        {
+          ref: (el) => {
+            buttons.current[i] = el;
+          },
+          type: "button",
+          id: `${id}-trigger-${i}`,
+          "aria-expanded": isOpen,
+          "aria-controls": `${id}-panel-${i}`,
+          disabled: item.disabled,
+          className: "trc-accordion__trigger",
+          onClick: () => toggle(item.value),
+          onKeyDown: (e) => onKeyDown(e, i),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDown, { className: "trc-accordion__chevron" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          id: `${id}-panel-${i}`,
+          role: "region",
+          "aria-labelledby": `${id}-trigger-${i}`,
+          className: "trc-accordion__panel",
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "trc-accordion__inner", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "trc-accordion__content", children: item.content }) })
+        }
+      )
+    ] }, item.value);
+  }) });
+}
+
+// src/components/steps.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Steps({ items: items2, current, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: cx("trc-steps", className), children: items2.map((item, i) => {
+    const state = current === void 0 ? "default" : i < current ? "complete" : i === current ? "current" : "upcoming";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "li",
+      {
+        className: cx("trc-steps__item", `trc-steps__item--${state}`),
+        "aria-current": state === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: "trc-steps__number", children: String(i + 1).padStart(2, "0") }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "trc-steps__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "trc-steps__title", children: item.title }),
+            item.description != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "trc-steps__description", children: item.description })
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
+}
+
+// src/components/breadcrumbs.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Breadcrumbs({ items: items2, label = "Breadcrumb", linkAs: LinkTag = "a", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { "aria-label": label, className: cx("trc-breadcrumbs", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ol", { className: "trc-breadcrumbs__list", children: items2.map((item, i) => {
+    const last = i === items2.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "trc-breadcrumbs__item", children: [
+      last || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-current": last ? "page" : void 0, className: "trc-breadcrumbs__current", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LinkTag, { href: item.href, className: "trc-breadcrumbs__link", children: item.label }),
+      !last && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "trc-breadcrumbs__separator", children: "/" })
+    ] }, i);
+  }) }) });
+}
+
+// src/utils/label.ts
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+}
+
+// src/components/pagination.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function paginationRange(page, total, siblings = 1) {
+  const slots = siblings * 2 + 5;
+  if (total <= slots) return Array.from({ length: total }, (_, i) => i + 1);
+  const range = (from, to) => Array.from({ length: to - from + 1 }, (_, i) => from + i);
+  if (page <= siblings + 3) return [...range(1, slots - 2), "ellipsis", total];
+  if (page >= total - siblings - 2) return [1, "ellipsis", ...range(total - slots + 3, total)];
+  return [1, "ellipsis", ...range(page - siblings, page + siblings), "ellipsis", total];
+}
+function Pagination({
+  page,
+  total,
+  onPageChange,
+  href,
+  siblings = 1,
+  linkAs: LinkTag = "a",
+  label = "Pagination",
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  pageLabel = "Page {page}",
+  className
+}) {
+  if (total <= 1) return null;
+  const getHref = href === void 0 ? void 0 : typeof href === "string" ? (p) => href.replace("{page}", String(p)) : href;
+  const control = (target, content, extra) => {
+    const disabled = target < 1 || target > total;
+    const common = {
+      className: cx("trc-pagination__control", extra.className),
+      "aria-label": extra.ariaLabel,
+      "aria-current": extra.current ? "page" : void 0
+    };
+    if (getHref) {
+      return disabled ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { ...common, "aria-disabled": "true", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LinkTag, { href: getHref(target), ...common, children: content });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", ...common, disabled, onClick: () => !extra.current && onPageChange?.(target), children: content });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { "aria-label": label, className: cx("trc-pagination", className), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ul", { className: "trc-pagination__list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: control(page - 1, /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowLeft, {}), { className: "trc-pagination__step", ariaLabel: previousLabel }) }),
+    paginationRange(page, total, siblings).map(
+      (entry, i) => entry === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { "aria-hidden": true, className: "trc-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: control(entry, entry, {
+        className: "trc-pagination__page",
+        ariaLabel: typeof pageLabel === "string" ? fill(pageLabel, { page: entry }) : pageLabel(entry),
+        current: entry === page
+      }) }, entry)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: control(page + 1, /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRight, {}), { className: "trc-pagination__step", ariaLabel: nextLabel }) })
+  ] }) });
+}
+
+// src/components/language-switcher.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function LanguageSwitcher({
+  languages,
+  value,
+  onChange,
+  label = "Language",
+  linkAs: LinkTag = "a",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { "aria-label": label, className: cx("trc-languages", className), children: languages.map((language) => {
+    const common = {
+      lang: language.code,
+      "aria-label": language.name,
+      "aria-current": language.code === value ? "true" : void 0,
+      className: "trc-languages__item",
+      children: language.code.toUpperCase()
+    };
+    return language.href ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LinkTag, { href: language.href, hrefLang: language.code, ...common }, language.code) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick: () => onChange?.(language.code), ...common }, language.code);
+  }) });
+}
+
+// src/components/radio-group.tsx
+var import_react20 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function RadioGroup({
+  label,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  hint,
+  error,
+  required = false,
+  orientation = "vertical",
+  className
+}) {
+  const [selected, setSelected] = useControllable(
+    value,
+    defaultValue,
+    (v) => v && onValueChange?.(v)
+  );
+  const id = (0, import_react20.useId)();
+  const message = error ?? hint;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "fieldset",
+    {
+      className: cx("trc-radio-group", className),
+      "aria-describedby": message != null ? `${id}-message` : void 0,
+      "aria-invalid": error != null || void 0,
+      "aria-required": required || void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("legend", { className: "trc-field__label", children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { "aria-hidden": true, className: "trc-field__required", children: [
+            " ",
+            "*"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cx("trc-radio-group__options", orientation === "horizontal" && "trc-radio-group__options--row"), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "trc-toggle trc-toggle--radio", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "trc-radio", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "input",
+            {
+              type: "radio",
+              name: name ?? id,
+              value: option.value,
+              checked: selected === option.value,
+              disabled: option.disabled,
+              required,
+              onChange: () => setSelected(option.value),
+              className: "trc-radio__input"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "trc-toggle__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "trc-toggle__label", children: option.label }),
+            option.description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "trc-toggle__description", children: option.description })
+          ] })
+        ] }, option.value)) }),
+        message != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { id: `${id}-message`, className: cx("trc-field__message", error != null && "trc-field__message--error"), children: message })
+      ]
+    }
+  );
+}
+
+// src/components/password-input.tsx
+var import_react21 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react21.forwardRef)(function PasswordInput2({ showLabel = "Show", hideLabel = "Hide", noun = "password", className, autoComplete = "current-password", ...props }, ref) {
+  const [visible, setVisible] = (0, import_react21.useState)(false);
+  const { id } = useFieldProps(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: cx("trc-password", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Input, { ref, ...props, id, type: visible ? "text" : "password", autoComplete }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("button", { type: "button", className: "trc-password__toggle", "aria-controls": id, onClick: () => setVisible((v) => !v), children: [
+      visible ? hideLabel : showLabel,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "trc-visually-hidden", children: noun })
+    ] })
+  ] });
+});
+
+// src/components/pin-input.tsx
+var import_react22 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function PinInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  mask = false,
+  label = "Verification code",
+  charLabel = "Character {index} of {length}",
+  invalid,
+  disabled,
+  id,
+  name,
+  className
+}) {
+  const [code, setCode] = useControllable(value, defaultValue, onChange);
+  const inputs = (0, import_react22.useRef)([]);
+  const field = useFieldProps({ id, invalid });
+  const accepted = type === "numeric" ? /[0-9]/ : /[0-9a-z]/i;
+  const clean = (text) => [...text].filter((c) => accepted.test(c)).join("");
+  const update = (next) => {
+    const trimmed = next.slice(0, length);
+    setCode(trimmed);
+    if (trimmed.length === length && !trimmed.includes(" ")) onComplete?.(trimmed);
+  };
+  const focus = (index) => {
+    const target = inputs.current[Math.max(0, Math.min(index, length - 1))];
+    target?.focus();
+    target?.select();
+  };
+  const charAt = (i) => code[i] && code[i] !== " " ? code[i] : "";
+  const setCharAt = (i, char) => {
+    const chars = Array.from({ length }, (_, k) => code[k] ?? " ");
+    chars[i] = char || " ";
+    return chars.join("").replace(/\s+$/, "");
+  };
+  const onInput = (i, raw) => {
+    const typed = clean(raw);
+    if (!typed) return;
+    if (typed.length > 1) {
+      const merged = (code.slice(0, i).padEnd(i, " ") + typed).slice(0, length);
+      update(merged);
+      focus(Math.min(i + typed.length, length - 1));
+      return;
+    }
+    update(setCharAt(i, typed.slice(-1)));
+    focus(i + 1);
+  };
+  const onKeyDown = (i, e) => {
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (charAt(i)) update(setCharAt(i, ""));
+      else if (i > 0) {
+        update(setCharAt(i - 1, ""));
+        focus(i - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focus(i - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focus(i + 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focus(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focus(length - 1);
+    }
+  };
+  const onPaste = (i, e) => {
+    e.preventDefault();
+    onInput(i, e.clipboardData.getData("text"));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      "aria-describedby": field["aria-describedby"],
+      className: cx("trc-pin", className),
+      children: [
+        Array.from({ length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "input",
+          {
+            ref: (el) => {
+              inputs.current[i] = el;
+            },
+            id: i === 0 ? field.id : void 0,
+            type: mask ? "password" : "text",
+            inputMode: type === "numeric" ? "numeric" : "text",
+            autoComplete: i === 0 ? "one-time-code" : "off",
+            maxLength: length,
+            "aria-label": typeof charLabel === "string" ? fill(charLabel, { index: i + 1, length }) : charLabel(i, length),
+            "aria-invalid": field["aria-invalid"],
+            disabled,
+            value: charAt(i),
+            onChange: (e) => onInput(i, e.target.value.replace(charAt(i), "") || e.target.value),
+            onKeyDown: (e) => onKeyDown(i, e),
+            onPaste: (e) => onPaste(i, e),
+            onFocus: (e) => e.target.select(),
+            className: "trc-control trc-pin__box"
+          },
+          i
+        )),
+        name && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { type: "hidden", name, value: code.replace(/\s/g, "") })
+      ]
+    }
+  );
+}
+
+// src/components/combobox.tsx
+var import_react23 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var normalize = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onValueChange,
+  placeholder,
+  emptyText = "No results",
+  invalid,
+  disabled,
+  required,
+  id,
+  name,
+  className
+}) {
+  const [selected, setSelected] = useControllable(value, defaultValue, onValueChange);
+  const selectedOption = options.find((o) => o.value === selected) ?? null;
+  const [query, setQuery] = (0, import_react23.useState)(selectedOption?.label ?? "");
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const [active, setActive] = (0, import_react23.useState)(-1);
+  const wrapperRef = (0, import_react23.useRef)(null);
+  const inputRef = (0, import_react23.useRef)(null);
+  const listRef = (0, import_react23.useRef)(null);
+  const listId = (0, import_react23.useId)();
+  const a11y = useFieldProps({ id, invalid, required });
+  const searching = query !== (selectedOption?.label ?? "");
+  const visible = searching ? options.filter((o) => normalize(o.label).includes(normalize(query))) : options;
+  const enabled = visible.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
+  (0, import_react23.useEffect)(() => {
+    if (!open) setQuery(selectedOption?.label ?? "");
+  }, [selectedOption?.label, open]);
+  useAnchoredPosition(open, wrapperRef, listRef, { side: "bottom", align: "start", offset: 6 });
+  useIsomorphicLayoutEffect(() => {
+    if (open && listRef.current && wrapperRef.current)
+      listRef.current.style.width = `${wrapperRef.current.offsetWidth}px`;
+  }, [open]);
+  useDismiss(open, [wrapperRef, listRef], () => close());
+  (0, import_react23.useEffect)(() => {
+    if (open && active >= 0)
+      listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+  const openList = (index) => {
+    setOpen(true);
+    const current = visible.findIndex((o) => o.value === selected);
+    setActive(index ?? (current >= 0 ? current : enabled[0] ?? -1));
+  };
+  const close = () => {
+    setOpen(false);
+    setActive(-1);
+    setQuery(selectedOption?.label ?? "");
+  };
+  const choose = (option) => {
+    if (option.disabled) return;
+    setSelected(option.value);
+    setQuery(option.label);
+    setOpen(false);
+    setActive(-1);
+  };
+  const onKeyDown = (e) => {
+    const position = enabled.indexOf(active);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) openList();
+      else setActive(enabled[(position + 1) % enabled.length] ?? -1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) openList(enabled[enabled.length - 1]);
+      else setActive(enabled[(position - 1 + enabled.length) % enabled.length] ?? -1);
+    } else if (e.key === "Enter" && open) {
+      e.preventDefault();
+      const option = visible[active];
+      if (option) choose(option);
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        close();
+      } else if (query) {
+        setQuery(selectedOption?.label ?? "");
+      }
+    } else if (e.key === "Tab" && open) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wrapperRef, className: cx("trc-combobox", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": open && active >= 0 ? `${listId}-${active}` : void 0,
+        autoComplete: "off",
+        placeholder,
+        disabled,
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+          setActive(0);
+        },
+        onClick: () => open ? close() : openList(),
+        onKeyDown,
+        className: "trc-control trc-combobox__input",
+        ...a11y
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDown, { "aria-hidden": true, className: "trc-combobox__chevron" }),
+    name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { type: "hidden", name, value: selected ?? "" }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("ul", { ref: listRef, id: listId, role: "listbox", className: "trc-floating trc-listbox", children: [
+      visible.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { role: "presentation", className: "trc-listbox__empty", children: emptyText }),
+      visible.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "li",
+        {
+          id: `${listId}-${i}`,
+          "data-index": i,
+          role: "option",
+          "aria-selected": option.value === selected,
+          "aria-disabled": option.disabled || void 0,
+          className: cx("trc-listbox__option", i === active && "trc-listbox__option--active"),
+          onMouseDown: (e) => e.preventDefault(),
+          onMouseMove: () => !option.disabled && setActive(i),
+          onClick: () => choose(option),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "trc-listbox__label", children: option.label }),
+            option.description != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "trc-listbox__description", children: option.description })
+          ]
+        },
+        option.value
+      ))
+    ] }) })
+  ] });
+}
+
+// src/components/file-input.tsx
+var import_react24 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+function acceptsFile(file, accept) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some(
+    (rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule
+  );
+}
+function validateFiles(files, { accept, maxSize, maxFiles }, alreadyAccepted = 0) {
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (!acceptsFile(file, accept)) rejected.push({ file, reason: "type" });
+    else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
+    else if (maxFiles !== void 0 && alreadyAccepted + accepted.length >= maxFiles)
+      rejected.push({ file, reason: "count" });
+    else accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+var FileInput = (0, import_react24.forwardRef)(function FileInput2({
+  onFilesChange,
+  buttonLabel = "Choose a file",
+  placeholder = "No file chosen",
+  countLabel = "{count} files",
+  disabled,
+  invalid,
+  className,
+  ...props
+}, ref) {
+  const [files, setFiles] = (0, import_react24.useState)([]);
+  const a11y = useFieldProps({ ...props, invalid });
+  const summary = files.length === 0 ? placeholder : files.length === 1 ? files[0].name : typeof countLabel === "string" ? fill(countLabel, { count: files.length }) : countLabel(files.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: cx("trc-file-input", disabled && "trc-file-input--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "input",
+      {
+        ref,
+        ...props,
+        ...a11y,
+        type: "file",
+        disabled,
+        className: "trc-visually-hidden",
+        onChange: (e) => {
+          const chosen = [...e.target.files ?? []];
+          setFiles(chosen);
+          onFilesChange?.(chosen);
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": true, className: "trc-file-input__button", children: buttonLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cx("trc-file-input__name", files.length === 0 && "trc-file-input__name--empty"), children: summary })
+  ] });
+});
+var DEFAULT_REJECTIONS = {
+  type: "{name}: this type of file is not accepted",
+  size: "{name}: the file is too large",
+  count: "{name}: too many files"
+};
+function Dropzone({
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = true,
+  onFilesChange,
+  title = "Drop files here or",
+  browseLabel = "browse",
+  hint,
+  removeLabel = "Remove {name}",
+  rejectionLabel = DEFAULT_REJECTIONS,
+  name,
+  disabled,
+  id,
+  className
+}) {
+  const [files, setFiles] = (0, import_react24.useState)([]);
+  const [rejections, setRejections] = (0, import_react24.useState)([]);
+  const rejectionText = (rejection) => typeof rejectionLabel === "function" ? rejectionLabel(rejection) : fill(rejectionLabel[rejection.reason] ?? DEFAULT_REJECTIONS[rejection.reason], { name: rejection.file.name });
+  const [dragging, setDragging] = (0, import_react24.useState)(false);
+  const hintId = (0, import_react24.useId)();
+  const a11y = useFieldProps({ id });
+  const add = (incoming) => {
+    const base2 = multiple ? files : [];
+    const { accepted, rejected } = validateFiles(
+      multiple ? incoming : incoming.slice(0, 1),
+      { accept, maxSize, maxFiles },
+      base2.length
+    );
+    const next = [...base2, ...accepted];
+    setFiles(next);
+    setRejections(rejected);
+    onFilesChange?.(next);
+  };
+  const remove = (index) => {
+    const next = files.filter((_, i) => i !== index);
+    setFiles(next);
+    setRejections([]);
+    onFilesChange?.(next);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (!disabled) add([...e.dataTransfer.files]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cx("trc-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      "label",
+      {
+        className: cx(
+          "trc-dropzone__area",
+          dragging && "trc-dropzone__area--dragging",
+          disabled && "trc-dropzone__area--disabled"
+        ),
+        onDragEnter: (e) => {
+          e.preventDefault();
+          if (!disabled) setDragging(true);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+        },
+        onDrop,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            "input",
+            {
+              type: "file",
+              accept,
+              multiple,
+              name,
+              disabled,
+              className: "trc-visually-hidden",
+              onChange: (e) => {
+                add([...e.target.files ?? []]);
+                e.target.value = "";
+              },
+              ...a11y,
+              "aria-describedby": cx(a11y["aria-describedby"], hint != null && hintId) || void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "trc-dropzone__title", children: [
+            title,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "trc-dropzone__browse", children: browseLabel })
+          ] }),
+          hint != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: hintId, "aria-hidden": true, className: "trc-dropzone__hint", children: hint })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-live": "polite", children: rejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: "trc-dropzone__rejections", children: rejections.map((rejection, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { children: rejectionText(rejection) }, i)) }) }),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: "trc-dropzone__files", children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("li", { className: "trc-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "trc-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "trc-dropzone__file-size", children: formatBytes(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "trc-dropzone__remove",
+          "aria-label": typeof removeLabel === "string" ? fill(removeLabel, { name: file.name }) : removeLabel(file),
+          onClick: () => remove(i),
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Close, {})
+        }
+      )
+    ] }, `${file.name}-${i}`)) })
+  ] });
+}
+
+// src/components/slider.tsx
+var import_react25 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Slider = (0, import_react25.forwardRef)(function Slider2({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  formatValue = (v) => v,
+  invalid,
+  className,
+  style,
+  ...props
+}, ref) {
+  const [current, setCurrent] = useControllable(value, defaultValue ?? min, onValueChange);
+  const a11y = useFieldProps({ ...props, invalid });
+  const progress = max > min ? (current - min) / (max - min) * 100 : 0;
+  const formatted = formatValue(current);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("trc-slider", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "input",
+      {
+        ref,
+        ...props,
+        ...a11y,
+        type: "range",
+        min,
+        max,
+        step,
+        value: current,
+        "aria-valuetext": typeof formatted === "string" ? formatted : void 0,
+        onChange: (e) => setCurrent(Number(e.target.value)),
+        className: "trc-slider__input",
+        style: { ...style, "--trc-slider-progress": `${progress}%` }
+      }
+    ),
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("output", { htmlFor: a11y.id, className: "trc-slider__value", "aria-hidden": true, children: formatted })
+  ] });
+});
+
+// src/components/date-picker.tsx
+var import_react26 = require("react");
+
+// src/utils/dates.ts
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var addDays = (date, days) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+var sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var toISODate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+function gridStart(month, weekStartsOn) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  return addDays(first, -offset);
+}
+var isBefore = (a, b) => startOfDay(a).getTime() < startOfDay(b).getTime();
+
+// src/components/date-picker.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function DatePicker({
+  value,
+  defaultValue = null,
+  onValueChange,
+  min,
+  max,
+  locale,
+  weekStartsOn = 1,
+  placeholder = "Choose a date",
+  formatDate,
+  name,
+  label = "Choose a date",
+  previousMonthLabel = "Previous month",
+  nextMonthLabel = "Next month",
+  invalid,
+  disabled,
+  required,
+  id,
+  className
+}) {
+  const [selected, setSelected] = useControllable(value, defaultValue, onValueChange);
+  const [open, setOpen] = (0, import_react26.useState)(false);
+  const [focused, setFocused] = (0, import_react26.useState)(() => startOfDay(selected ?? /* @__PURE__ */ new Date()));
+  const triggerRef = (0, import_react26.useRef)(null);
+  const panelRef = (0, import_react26.useRef)(null);
+  const uid = (0, import_react26.useId)();
+  const a11y = useFieldProps({ id, invalid, required });
+  const display = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  const full = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+  const monthTitle = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
+  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long" });
+  const format = formatDate ?? ((d) => display.format(d));
+  const outOfRange = (date) => !!min && isBefore(date, min) || !!max && isBefore(max, date);
+  const clamp = (date) => min && isBefore(date, min) ? startOfDay(min) : max && isBefore(max, date) ? startOfDay(max) : date;
+  const openCalendar = () => {
+    setFocused(clamp(startOfDay(selected ?? /* @__PURE__ */ new Date())));
+    setOpen(true);
+  };
+  const close = (returnFocus = true) => {
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  };
+  const choose = (date) => {
+    if (outOfRange(date)) return;
+    setSelected(date);
+    close();
+  };
+  useAnchoredPosition(open, triggerRef, panelRef, { side: "bottom", align: "start" });
+  useDismiss(open, [triggerRef, panelRef], (reason) => close(reason === "escape"));
+  (0, import_react26.useEffect)(() => {
+    if (open) panelRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
+  }, [open, focused]);
+  const onGridKeyDown = (e) => {
+    const moves = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      Home: () => addDays(focused, -((focused.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(focused, 6 - (focused.getDay() - weekStartsOn + 7) % 7),
+      PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1)
+    };
+    const move = moves[e.key];
+    if (move) {
+      e.preventDefault();
+      setFocused(clamp(move()));
+    }
+  };
+  const onPanelKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const items2 = [
+      ...panelRef.current?.querySelectorAll("button:not([disabled]):not([tabindex='-1'])") ?? []
+    ];
+    const first = items2[0];
+    const last = items2[items2.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last?.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first?.focus();
+    }
+  };
+  const start = gridStart(focused, weekStartsOn);
+  const days = Array.from({ length: 42 }, (_, i) => addDays(start, i));
+  const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const valueId = `${uid}-value`;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("trc-date-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        id: a11y.id,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-invalid": a11y["aria-invalid"],
+        "aria-describedby": cx(valueId, a11y["aria-describedby"]) || void 0,
+        disabled,
+        onClick: () => open ? close() : openCalendar(),
+        className: cx("trc-control", "trc-date-picker__trigger", !selected && "trc-date-picker__trigger--empty"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id: valueId, children: selected ? format(selected) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Calendar, { className: "trc-date-picker__icon" })
+        ]
+      }
+    ),
+    name && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "hidden", name, value: selected ? toISODate(selected) : "", required }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": label,
+        className: "trc-floating trc-calendar",
+        onKeyDown: onPanelKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "trc-calendar__head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "trc-calendar__nav",
+                "aria-label": previousMonthLabel,
+                onClick: () => setFocused(clamp(addMonths(focused, -1))),
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { id: `${uid}-title`, className: "trc-calendar__title", "aria-live": "polite", children: monthTitle.format(focused) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "trc-calendar__nav",
+                "aria-label": nextMonthLabel,
+                onClick: () => setFocused(clamp(addMonths(focused, 1))),
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronRight, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "table",
+            {
+              role: "grid",
+              "aria-labelledby": `${uid}-title`,
+              className: "trc-calendar__grid",
+              onKeyDown: onGridKeyDown,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: weeks[0].map((day) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { scope: "col", abbr: weekdayLong.format(day), className: "trc-calendar__weekday", children: weekdayShort.format(day).replace(".", "").slice(0, 3) }, day.getDay())) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { children: weeks.map((week, w) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: week.map((day) => {
+                  const isSelected = sameDay(day, selected);
+                  const disabledDay = outOfRange(day);
+                  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { role: "gridcell", "aria-selected": isSelected || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "data-date": toISODate(day),
+                      tabIndex: sameDay(day, focused) ? 0 : -1,
+                      "aria-label": full.format(day),
+                      "aria-current": sameDay(day, today) ? "date" : void 0,
+                      disabled: disabledDay,
+                      onClick: () => choose(day),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          choose(day);
+                        }
+                      },
+                      className: cx(
+                        "trc-calendar__day",
+                        day.getMonth() !== focused.getMonth() && "trc-calendar__day--outside",
+                        isSelected && "trc-calendar__day--selected"
+                      ),
+                      children: day.getDate()
+                    }
+                  ) }, toISODate(day));
+                }) }, w)) })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/avatar.tsx
+var import_react27 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function initials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? [words[0][0], words[words.length - 1][0]] : [words[0]?.[0]];
+  return letters.filter(Boolean).join("").toUpperCase();
+}
+function Avatar({ name, src, size: size2 = "md", className }) {
+  const [failed, setFailed] = (0, import_react27.useState)(false);
+  const showImage = src && !failed;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cx("trc-avatar", `trc-avatar--${size2}`, className), children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src, alt: name, className: "trc-avatar__image", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { role: "img", "aria-label": name, className: "trc-avatar__initials", children: initials(name) }) });
+}
+function AvatarGroup({
+  children,
+  max = 4,
+  moreLabel = "{count} more",
+  size: size2 = "md",
+  className
+}) {
+  const items2 = import_react27.Children.toArray(children);
+  const hidden = items2.length - max;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("trc-avatar-group", className), children: [
+    items2.slice(0, max),
+    hidden > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cx("trc-avatar", `trc-avatar--${size2}`, "trc-avatar--more"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "span",
+      {
+        role: "img",
+        "aria-label": typeof moreLabel === "string" ? fill(moreLabel, { count: hidden }) : moreLabel(hidden),
+        className: "trc-avatar__initials",
+        children: [
+          "+",
+          hidden
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/tag.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Tag({ tone = "default", onRemove, removeLabel = "Remove", className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cx("trc-tag", tone === "accent" && "trc-tag--accent", className), ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "trc-tag__remove",
+        "aria-label": `${removeLabel} ${typeof children === "string" ? children : ""}`.trim(),
+        onClick: onRemove,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Close, {})
+      }
+    )
+  ] });
+}
+
+// src/components/stat.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Stat({ label, value, change, changeTone = "neutral", description, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("dl", { className: cx("trc-stat", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "trc-stat__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dd", { className: "trc-stat__value", children: value }),
+    (change != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("dd", { className: "trc-stat__meta", children: [
+      change != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cx("trc-stat__change", `trc-stat__change--${changeTone}`), children: change }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "trc-stat__description", children: description })
+    ] })
+  ] });
+}
+
+// src/components/table.tsx
+var import_react28 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var compare = (a, b) => {
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  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,
+  caption,
+  hideCaption = false,
+  defaultSort,
+  dense = false,
+  emptyText = "No data",
+  className
+}) {
+  const [sort, setSort] = (0, import_react28.useState)(defaultSort);
+  const field = (row, key) => row[key];
+  const sorted = (() => {
+    const column = columns.find((c) => c.key === sort?.key);
+    if (!sort || !column) return rows;
+    const value = (row) => column.sortValue ? column.sortValue(row) : field(row, column.key);
+    const ordered = [...rows].sort((a, b) => compare(value(a), value(b)));
+    return sort.direction === "ascending" ? ordered : ordered.reverse();
+  })();
+  const toggle = (key) => setSort(
+    (current) => current?.key === key && current.direction === "ascending" ? { key, direction: "descending" } : { key, direction: "ascending" }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      className: cx("trc-table", dense && "trc-table--dense", className),
+      role: "region",
+      "aria-label": typeof caption === "string" ? caption : void 0,
+      tabIndex: 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "trc-table__table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("caption", { className: cx("trc-table__caption", hideCaption && "trc-visually-hidden"), children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: columns.map((column) => {
+          const direction = sort?.key === column.key ? sort.direction : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": column.sortable ? direction ?? "none" : void 0,
+              className: cx("trc-table__head", column.align && `trc-table__cell--${column.align}`),
+              children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("button", { type: "button", className: "trc-table__sort", onClick: () => toggle(column.key), children: [
+                column.header,
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  ChevronDown,
+                  {
+                    className: cx(
+                      "trc-table__sort-icon",
+                      direction && "trc-table__sort-icon--active",
+                      direction === "ascending" && "trc-table__sort-icon--up"
+                    )
+                  }
+                )
+              ] }) : column.header
+            },
+            column.key
+          );
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { colSpan: columns.length, className: "trc-table__empty", children: emptyText }) }) : sorted.map((row) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "td",
+          {
+            className: cx("trc-table__cell", column.align && `trc-table__cell--${column.align}`),
+            children: column.render ? column.render(row) : field(row, column.key)
+          },
+          column.key
+        )) }, rowKey(row))) })
+      ] })
+    }
+  );
+}
+
+// src/components/loading.tsx
+var import_react29 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var size = (value) => typeof value === "number" ? `${value}px` : value;
+function Skeleton({ width, height, circle = false, lines, className }) {
+  if (lines && lines > 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: cx("trc-skeleton-lines", className), style: { width: size(width) }, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "span",
+      {
+        className: "trc-skeleton trc-skeleton--text",
+        style: { width: i === lines - 1 ? "60%" : "100%" }
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cx(
+        "trc-skeleton",
+        circle && "trc-skeleton--circle",
+        !height && !circle && "trc-skeleton--text",
+        className
+      ),
+      style: { width: size(width), height: size(height) ?? (circle ? size(width) : void 0) }
+    }
+  );
+}
+function Spinner2({ size: s = "md", label = "Loading", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { role: "status", className: cx("trc-spinner", `trc-spinner--${s}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: "trc-spinner__svg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10", className: "trc-spinner__track" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", className: "trc-spinner__arc" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "trc-visually-hidden", children: label })
+  ] });
+}
+function Progress({
+  value,
+  max = 100,
+  label,
+  "aria-label": ariaLabel,
+  showValue = false,
+  formatValue = (v, m) => `${Math.round(v / m * 100)} %`,
+  className
+}) {
+  const id = (0, import_react29.useId)();
+  const determinate = value !== void 0 && value !== null;
+  const clamped = determinate ? Math.min(Math.max(value, 0), max) : 0;
+  const text = determinate ? formatValue(clamped, max) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("trc-progress", !determinate && "trc-progress--indeterminate", className), children: [
+    (label != null || showValue && text) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "trc-progress__head", children: [
+      label != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { id: `${id}-label`, className: "trc-progress__label", children: label }),
+      showValue && text && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "trc-progress__value", children: text })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-labelledby": label != null ? `${id}-label` : void 0,
+        "aria-label": label == null ? ariaLabel : void 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": determinate ? clamped : void 0,
+        "aria-valuetext": text,
+        className: "trc-progress__track",
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "div",
+          {
+            className: "trc-progress__fill",
+            style: { "--trc-progress": `${clamped / max * 100}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/kbd.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("kbd", { className: cx("trc-kbd", className), ...props });
+}
+function Divider({ label, orientation = "horizontal", className }) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { role: "separator", "aria-orientation": "vertical", className: cx("trc-divider--vertical", className) });
+  }
+  if (label == null) return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("hr", { className: cx("trc-divider", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "separator", className: cx("trc-divider-label", className), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "trc-divider-label__text", children: label }) });
+}
+
+// src/components/code-block.tsx
+var import_react30 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var BADGES = {
+  tsx: "TS",
+  ts: "TS",
+  jsx: "JS",
+  js: "JS",
+  css: "CSS",
+  bash: "SH",
+  sh: "SH",
+  html: "HTML",
+  json: "JSON"
+};
+var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5" })
+    ]
+  }
+);
+function CodeBlock({
+  code,
+  title,
+  language,
+  children,
+  copyLabel = "Copy code",
+  copiedLabel = "Copied",
+  className
+}) {
+  const [copied, setCopied] = (0, import_react30.useState)(false);
+  const timer = (0, import_react30.useRef)(void 0);
+  (0, import_react30.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  const copy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setCopied(false), 1600);
+  };
+  const button = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      className: "trc-code__copy",
+      "aria-label": copyLabel,
+      title: copyLabel,
+      "data-copied": copied,
+      children: [
+        copied ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CopyIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "trc-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("trc-code", title == null && "trc-code--bare", className), children: [
+    title != null ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "trc-code__bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "trc-code__file", children: [
+        language && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "trc-code__lang", children: BADGES[language] ?? language.toUpperCase() }),
+        title
+      ] }),
+      button
+    ] }) : button,
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("pre", { className: "trc-code__pre", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: children ?? code }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccentText,
+  Accordion,
+  Alert,
   ArrowLeft,
   ArrowRight,
   ArrowUp,
+  Avatar,
+  AvatarGroup,
   BackToTop,
+  Breadcrumbs,
+  Calendar,
   Card,
   Check,
   Checkbox,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   Close,
+  CodeBlock,
+  Combobox,
   Container,
+  DatePicker,
+  Dialog,
+  Divider,
+  Drawer,
+  DropdownMenu,
+  Dropzone,
   Field,
+  FileInput,
   Heading,
   HeroVideo,
   Input,
+  Kbd,
+  LanguageSwitcher,
   Menu,
   PageHero,
+  Pagination,
+  PasswordInput,
   PillButton,
   PillLink,
+  PinInput,
+  Popover,
+  Progress,
+  RadioGroup,
   Section,
+  SegmentedControl,
   Select,
   SiteFooter,
   SiteHeader,
+  Skeleton,
+  Slider,
+  Spinner,
+  Stat,
   StepNumber,
+  Steps,
   Switch,
+  Table,
+  Tabs,
+  Tag,
   Text,
   Textarea,
+  Toaster,
+  Tooltip,
+  acceptsFile,
   cx,
-  plainText
+  formatBytes,
+  initials,
+  paginationRange,
+  plainText,
+  toast,
+  validateFiles
 });
 //# sourceMappingURL=index.cjs.map