trc-ui 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,737 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AccentText: () => AccentText,
+  ArrowLeft: () => ArrowLeft,
+  ArrowRight: () => ArrowRight,
+  ArrowUp: () => ArrowUp,
+  BackToTop: () => BackToTop,
+  Card: () => Card,
+  Check: () => Check,
+  Checkbox: () => Checkbox,
+  ChevronDown: () => ChevronDown,
+  Close: () => Close,
+  Container: () => Container,
+  Field: () => Field,
+  Heading: () => Heading,
+  HeroVideo: () => HeroVideo,
+  Input: () => Input,
+  Menu: () => Menu,
+  PageHero: () => PageHero,
+  PillButton: () => PillButton,
+  PillLink: () => PillLink,
+  Section: () => Section,
+  Select: () => Select,
+  SiteFooter: () => SiteFooter,
+  SiteHeader: () => SiteHeader,
+  StepNumber: () => StepNumber,
+  Switch: () => Switch,
+  Text: () => Text,
+  Textarea: () => Textarea,
+  cx: () => cx,
+  plainText: () => plainText
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/components/typography.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AccentText({ text, accentLast = 0 }) {
+  if (text.includes("*")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: text.split("*").map(
+      (part, i) => i % 2 === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trc-accent", children: part }, i) : part
+    ) });
+  }
+  const words = text.split(" ");
+  if (!accentLast || words.length < 2) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: text });
+  const n = Math.min(accentLast, words.length - 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    words.slice(0, -n).join(" "),
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trc-accent", children: words.slice(-n).join(" ") })
+  ] });
+}
+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 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 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") });
+}
+
+// src/components/pill.tsx
+var import_react = require("react");
+
+// src/utils/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var base = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var ArrowRight = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 12h14M13 6l6 6-6 6" }) });
+var ArrowLeft = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 12H5M11 18l-6-6 6-6" }) });
+var Spinner = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) });
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+var Check = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+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" }) });
+
+// 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);
+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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "trc-pill__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowRight, {}) }),
+    /* @__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) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: pillClass({ solid, size }, 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 }) });
+});
+
+// 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 Section({
+  as,
+  spacing = "md",
+  inset = false,
+  className,
+  children,
+  ...props
+}) {
+  const Tag = 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)(Tag, { className: cx(spacing !== "none" && `trc-section--${spacing}`, className), ...props, children });
+}
+function Card({
+  as,
+  tone = "default",
+  padding = "md",
+  interactive = false,
+  watermark,
+  className,
+  children,
+  ...props
+}) {
+  const Tag = as ?? "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    Tag,
+    {
+      className: cx(
+        "trc-card",
+        tone === "alt" && "trc-card--alt",
+        padding !== "none" && `trc-card--pad-${padding}`,
+        interactive && "trc-card--interactive",
+        !!watermark && "trc-card--watermark",
+        className
+      ),
+      ...props,
+      children: [
+        !!watermark && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "trc-card__watermark", children: watermark }),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/field.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FieldContext = (0, import_react2.createContext)(null);
+function Field({ label, hint, error, required = false, id, className, children }) {
+  const generated = (0, import_react2.useId)();
+  const fieldId = id ?? generated;
+  const messageId = `${fieldId}-message`;
+  const message = error ?? hint;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    FieldContext.Provider,
+    {
+      value: { id: fieldId, describedBy: message ? messageId : void 0, invalid: error != null, required },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx("trc-field", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: fieldId, className: "trc-field__label", children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "aria-hidden": true, className: "trc-field__required", children: [
+            " ",
+            "*"
+          ] })
+        ] }),
+        children,
+        message != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: messageId, className: cx("trc-field__message", error != null && "trc-field__message--error"), children: message })
+      ] })
+    }
+  );
+}
+function useFieldProps(props) {
+  const field = (0, import_react2.useContext)(FieldContext);
+  const invalid = props.invalid ?? field?.invalid ?? false;
+  return {
+    id: props.id ?? field?.id,
+    required: props.required ?? field?.required,
+    "aria-describedby": cx(field?.describedBy, props["aria-describedby"]) || void 0,
+    "aria-invalid": invalid || void 0
+  };
+}
+var Input = (0, import_react2.forwardRef)(function Input2({ invalid, className, ...props }, ref) {
+  const a11y = useFieldProps({ ...props, invalid });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { ref, className: cx("trc-control", className), ...props, ...a11y });
+});
+var Textarea = (0, import_react2.forwardRef)(function Textarea2({ invalid, rows = 4, className, ...props }, ref) {
+  const a11y = useFieldProps({ ...props, invalid });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "textarea",
+    {
+      ref,
+      rows,
+      className: cx("trc-control", "trc-control--textarea", className),
+      ...props,
+      ...a11y
+    }
+  );
+});
+var Select = (0, import_react2.forwardRef)(function Select2({ invalid, placeholder, defaultValue, className, children, ...props }, ref) {
+  const a11y = useFieldProps({ ...props, invalid });
+  const initial = defaultValue ?? (props.value === void 0 && placeholder != null ? "" : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: cx("trc-select", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("select", { ref, className: "trc-control trc-control--select", defaultValue: initial, ...props, ...a11y, children: [
+      placeholder != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", disabled: true, children: placeholder }),
+      children
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDown, { className: "trc-select__chevron" })
+  ] });
+});
+
+// src/components/toggle.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ToggleLabel({
+  kind,
+  label,
+  description,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: cx("trc-toggle", `trc-toggle--${kind}`, className), children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "trc-toggle__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "trc-toggle__label", children: label }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "trc-toggle__description", children: description })
+    ] })
+  ] });
+}
+var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label, description, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleLabel, { kind: "checkbox", label, description, className, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "trc-checkbox", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ref, type: "checkbox", className: "trc-checkbox__input", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Check, { className: "trc-checkbox__check" })
+  ] }) });
+});
+var Switch = (0, import_react3.forwardRef)(function Switch2({ label, description, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleLabel, { kind: "switch", label, description, className, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "trc-switch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ref, type: "checkbox", role: "switch", className: "trc-switch__input", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "trc-switch__thumb" })
+  ] }) });
+});
+
+// src/components/site-header.tsx
+var import_react5 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/hooks/use-modal.ts
+var import_react4 = require("react");
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useModal(open, panelRef, onClose) {
+  const close = (0, import_react4.useRef)(onClose);
+  close.current = onClose;
+  (0, import_react4.useEffect)(() => {
+    const panel = panelRef.current;
+    if (!open || !panel) return;
+    const previous = document.activeElement;
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    (panel.querySelector("[data-autofocus]") ?? panel.querySelector(FOCUSABLE) ?? panel).focus();
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close.current();
+        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];
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = overflow;
+      previous?.focus();
+    };
+  }, [open, panelRef]);
+}
+
+// src/components/site-header.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var isMenu = (item) => "items" in item;
+function SiteHeader({
+  logo,
+  logoLabel,
+  homeHref = "/",
+  nav = [],
+  cta,
+  actions,
+  mobileFooter,
+  linkAs: LinkTag = "a",
+  scrollThreshold = 24,
+  menuLabel = "Menu",
+  closeLabel = "Close",
+  className
+}) {
+  const [scrolled, setScrolled] = (0, import_react5.useState)(false);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  (0, import_react5.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)(
+          LinkTag,
+          {
+            href: item.href,
+            "aria-current": item.active ? "page" : void 0,
+            className: cx("trc-header__link", item.active && "trc-header__link--active"),
+            children: item.label
+          },
+          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)(
+          "button",
+          {
+            type: "button",
+            className: "trc-header__burger",
+            "aria-label": menuLabel,
+            "aria-expanded": open,
+            onClick: () => setOpen(true),
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      MobileMenu,
+      {
+        open,
+        onClose: () => setOpen(false),
+        nav,
+        cta,
+        footer: mobileFooter,
+        linkAs: LinkTag,
+        title: menuLabel,
+        closeLabel
+      }
+    )
+  ] });
+}
+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 show = () => {
+    window.clearTimeout(closeTimer.current);
+    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)(
+    "div",
+    {
+      className: "trc-dropdown",
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && open) {
+          setOpen(false);
+          button.current?.focus();
+        }
+      },
+      onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && setOpen(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "button",
+          {
+            ref: button,
+            type: "button",
+            "aria-expanded": open,
+            "aria-controls": id,
+            onClick: () => 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_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)(
+          LinkTag,
+          {
+            href: item.href,
+            "aria-current": item.active ? "page" : void 0,
+            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 })
+            ]
+          }
+        ) }, i)) }) })
+      ]
+    }
+  );
+}
+function MobileMenu({
+  open,
+  onClose,
+  nav,
+  cta,
+  footer,
+  linkAs: LinkTag,
+  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",
+        {
+          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 })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+// src/components/site-footer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SiteFooter({
+  logo,
+  logoLabel,
+  homeHref = "/",
+  tagline,
+  children,
+  columns = [],
+  columnsLabel = "Site map",
+  copyright,
+  legal = [],
+  legalLabel = "Legal",
+  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 })
+      ] }),
+      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)) })
+      ] }, 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)) })
+    ] })
+  ] }) });
+}
+
+// src/components/hero.tsx
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var delay = (ms) => ({ "--trc-delay": `${ms}ms` });
+function PageHero({
+  title,
+  accentLast,
+  description,
+  meta,
+  image,
+  imagePosition = "50% 50%",
+  children,
+  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 })
+    ] })
+  ] }) });
+}
+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)(() => {
+    if (clips.length === 0) return;
+    const start = Math.floor(Math.random() * clips.length);
+    const video = videos.current[start];
+    if (!prefersReducedMotion()) void video?.play().catch(() => {
+    });
+    const frame = requestAnimationFrame(() => setActive(start));
+    return () => {
+      cancelAnimationFrame(frame);
+      video?.pause();
+    };
+  }, [clips.length]);
+  (0, import_react6.useEffect)(() => {
+    const el = section.current;
+    const layer = media.current;
+    if (!parallax || !el || !layer || prefersReducedMotion()) return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const rect = el.getBoundingClientRect();
+      const progress = Math.min(Math.max(-rect.top / rect.height, 0), 1);
+      layer.style.transform = `translate3d(0, ${progress * 120}px, 0)`;
+    };
+    const onScroll = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(frame);
+    };
+  }, [parallax]);
+  const playNext = (i) => {
+    const next = videos.current[(i + 1) % clips.length];
+    if (!next) return;
+    next.currentTime = 0;
+    void next.play().catch(() => {
+    });
+    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)(
+      "video",
+      {
+        ref: (el) => {
+          videos.current[i] = el;
+        },
+        className: cx("trc-hero__image", "trc-hero-video__clip", i === active && "trc-hero-video__clip--active"),
+        style: { transitionDuration: `${fade}s` },
+        muted: true,
+        playsInline: true,
+        preload: "metadata",
+        poster: clip.poster,
+        onTimeUpdate: (e) => {
+          const v = e.currentTarget;
+          if (i === active && v.duration && v.duration - v.currentTime <= fade) playNext(i);
+        },
+        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" })
+        ]
+      },
+      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 })
+    ] })
+  ] }) });
+}
+
+// src/components/back-to-top.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = 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 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)(
+    "button",
+    {
+      type: "button",
+      onClick: () => window.scrollTo({
+        top: 0,
+        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+      }),
+      "aria-label": label,
+      "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, {})
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccentText,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  BackToTop,
+  Card,
+  Check,
+  Checkbox,
+  ChevronDown,
+  Close,
+  Container,
+  Field,
+  Heading,
+  HeroVideo,
+  Input,
+  Menu,
+  PageHero,
+  PillButton,
+  PillLink,
+  Section,
+  Select,
+  SiteFooter,
+  SiteHeader,
+  StepNumber,
+  Switch,
+  Text,
+  Textarea,
+  cx,
+  plainText
+});
+//# sourceMappingURL=index.cjs.map