@mediaradar/design-components 0.20.0 → 0.21.0

package/dist/index.cjs

@@ -37,11 +37,13 @@ __export(index_exports, {
   DateRangeFilter: () => DateRangeFilter,
   DateRangePicker: () => DateRangePicker,
   Delta: () => Delta,
+  EmptyState: () => EmptyState,
   FilterChipBar: () => FilterChipBar,
   FilterDropdownFooter: () => FilterDropdownFooter,
   Freshness: () => Freshness,
   InfoTip: () => InfoTip,
   LineChartPlaceholder: () => LineChartPlaceholder,
+  Modal: () => Modal,
   MultiSelectFilter: () => MultiSelectFilter,
   NO_RESULTS_BODY: () => NO_RESULTS_BODY,
   NO_RESULTS_TITLE: () => NO_RESULTS_TITLE,
@@ -56,6 +58,7 @@ __export(index_exports, {
   SearchBar: () => SearchBar,
   SectionHeading: () => SectionHeading,
   SectionRail: () => SectionRail,
+  SegmentedControl: () => SegmentedControl,
   SelectAllVisible: () => SelectAllVisible,
   SelectFilter: () => SelectFilter,
   SelectedSection: () => SelectedSection,
@@ -63,7 +66,9 @@ __export(index_exports, {
   SortButton: () => SortButton,
   StackedColumnPlaceholder: () => StackedColumnPlaceholder,
   TablePagination: () => TablePagination,
+  Tabs: () => Tabs,
   Tag: () => Tag,
+  TextField: () => TextField,
   Toast: () => Toast,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
@@ -312,7 +317,7 @@ function AdvertiserQuickFilter({
         "aria-label": caption,
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
@@ -991,6 +996,7 @@ function NavBtn({ children, onClick, ...rest }) {
 var import_react4 = require("react");
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var HEIGHT = { sm: "h-8", md: "h-10", lg: "h-11" };
 var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
 var MODE_LABEL = {
   anyWord: "Any Word",
@@ -1006,6 +1012,7 @@ function SearchBar({
   value,
   onChange,
   variant = "default",
+  size = "lg",
   matchValue,
   onMatchChange,
   className,
@@ -1013,6 +1020,7 @@ function SearchBar({
 }) {
   const [open, setOpen] = (0, import_react4.useState)(false);
   const ref = (0, import_react4.useRef)(null);
+  const input = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && setOpen(false);
@@ -1031,7 +1039,8 @@ function SearchBar({
     "div",
     {
       className: cx2(
-        "flex h-11 min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input",
+        "flex min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus",
+        HEIGHT[size],
         className
       ),
       children: [
@@ -1040,16 +1049,31 @@ function SearchBar({
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
+              ref: input,
               type: "text",
               value,
               onChange: (e) => onChange?.(e.target.value),
               placeholder,
               "aria-label": placeholder,
               "data-testid": testIdPrefix && `${testIdPrefix}-search`,
-              className: "min-w-0 flex-1 bg-transparent text-[13px] text-text-primary outline-hidden placeholder:text-text-tertiary"
+              className: "min-w-0 flex-1 bg-transparent text-dense text-text-primary outline-hidden placeholder:text-text-tertiary"
             }
           )
         ] }),
+        value && onChange && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onChange("");
+              input.current?.focus();
+            },
+            "aria-label": "Clear search",
+            "data-testid": testIdPrefix && `${testIdPrefix}-clear`,
+            className: "mr-1.5 flex size-6 shrink-0 items-center justify-center self-center rounded-control text-text-tertiary hover:bg-subtle hover:text-text-primary focus-visible:outline-2 focus-visible:outline-border-focus",
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.X, { size: 14, "aria-hidden": "true" })
+          }
+        ),
         showMatch && // border-border-default, not the bare `border-border` both source
         // implementations used -- confirmed by actually compiling against
         // @mediaradar/design-tokens' real published theme.css (not assumed):
@@ -2401,7 +2425,7 @@ function SelectionPicker({
     }) }),
     source === "search" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-8 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
@@ -2715,7 +2739,7 @@ function FilterDropdown({
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
-        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        className: "inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
         children: [
           label,
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
@@ -2921,7 +2945,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       size: {
         xs: "h-6 px-2 text-xs",
         sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-sm"
+        md: "h-10 px-4 text-sm",
+        // 44, the filter row's height, so a button at the end of a row of
+        // filter dropdowns lines up with them. One control scale: 32 / 40 / 44.
+        lg: "h-11 px-5 text-sm"
       },
       // Shape is orthogonal to size. As a fourth SIZE, `icon` could only ever
       // be one dimension, so an icon button never lined up with the labelled
@@ -2936,6 +2963,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       { size: "xs", iconOnly: true, class: "w-6" },
       { size: "sm", iconOnly: true, class: "w-8" },
       { size: "md", iconOnly: true, class: "w-10" },
+      { size: "lg", iconOnly: true, class: "w-11" },
       // A boxed button is a target you aim at, so its label carries the weight
       // of one. `link` sits inline in a sentence, where semibold reads as
       // emphasis on the words rather than as a control.
@@ -3049,7 +3077,7 @@ function NameListModal({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
-        className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
+        className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim px-4",
         onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "div",
@@ -3059,7 +3087,7 @@ function NameListModal({
             "aria-modal": "true",
             "aria-labelledby": titleId,
             onKeyDown: trapTab,
-            className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
+            className: "w-full max-w-110 rounded-card border border-border-default bg-surface p-5 shadow-overlay",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
@@ -3072,7 +3100,7 @@ function NameListModal({
                     value: name,
                     onChange: (e) => setName(e.target.value),
                     placeholder,
-                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
+                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-dense focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus"
                   }
                 )
               ] }),
@@ -3617,7 +3645,7 @@ function MiniSelect({ value, onChange, options }) {
         const opt = options.find((o) => String(o.value) === e.target.value);
         if (opt) onChange(opt.value);
       },
-      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
+      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
       children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
@@ -3870,7 +3898,7 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "input",
@@ -4080,16 +4108,294 @@ function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, clas
 }
 
 // src/PageHeader.tsx
+var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function PageHeader({ title, description, actions, className }) {
+function PageHeader({ title, description, actions, back, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0", children: [
+      back && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        "a",
+        {
+          href: back.href ?? "#",
+          onClick: back.onClick,
+          className: "mb-1.5 inline-flex items-center gap-1.5 rounded-control text-micro font-semibold uppercase tracking-wider text-text-tertiary hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.ArrowLeft, { size: 13, "aria-hidden": "true" }),
+            back.label
+          ]
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
       description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
     ] }),
     actions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
   ] });
 }
+
+// src/Modal.tsx
+var import_react19 = require("react");
+var import_react_dom7 = require("react-dom");
+var import_lucide_react26 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var WIDTH = {
+  sm: "max-w-110",
+  md: "max-w-160",
+  lg: "max-w-220"
+};
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({ open, onClose, title, description, size = "md", footer, children, className }) {
+  const titleId = (0, import_react19.useId)();
+  const descId = (0, import_react19.useId)();
+  const panel = (0, import_react19.useRef)(null);
+  const close = (0, import_react19.useRef)(onClose);
+  close.current = onClose;
+  (0, import_react19.useEffect)(() => {
+    if (!open) return;
+    const opener = document.activeElement;
+    const first = panel.current?.querySelector(`[data-modal-body] :is(${FOCUSABLE})`) ?? panel.current?.querySelector(`[data-modal-footer] :is(${FOCUSABLE})`);
+    (first ?? panel.current)?.focus();
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close.current();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      if (items.length === 0) return;
+      const [head, tail] = [items[0], items[items.length - 1]];
+      if (e.shiftKey && document.activeElement === head) {
+        e.preventDefault();
+        tail.focus();
+      } else if (!e.shiftKey && document.activeElement === tail) {
+        e.preventDefault();
+        head.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = overflow;
+      opener?.focus?.();
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom7.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim px-4 py-6",
+        onMouseDown: (e) => e.target === e.currentTarget && onClose(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "div",
+          {
+            ref: panel,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description ? descId : void 0,
+            tabIndex: -1,
+            className: cn(
+              "flex max-h-full w-full flex-col rounded-card border border-border-default bg-surface shadow-overlay outline-hidden",
+              WIDTH[size],
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-start gap-3 px-5 pt-5 pb-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h2", { id: titleId, className: "text-base font-semibold text-text-primary", children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { id: descId, className: "mt-0.5 text-sm text-text-secondary", children: description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    className: "-mr-1.5 -mt-1 flex size-8 shrink-0 items-center justify-center rounded-control text-text-tertiary hover:bg-subtle hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.X, { size: 16, "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { "data-modal-body": true, className: "min-h-0 flex-1 overflow-y-auto px-5 pb-5 text-sm text-text-primary", children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { "data-modal-footer": true, className: "flex items-center justify-end gap-2 border-t border-border-default px-5 py-3", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/EmptyState.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action, size = "sm", className }) {
+  const md = size === "md";
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        md ? "gap-2 px-6 py-16" : "gap-1.5 px-4 py-8",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center justify-center text-text-tertiary",
+              md && "mb-1 size-11 rounded-full bg-subtle"
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: cn("font-semibold text-text-primary", md ? "text-base" : "text-sm"), children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: cn("max-w-sm text-text-secondary", md ? "text-sm" : "text-xs"), children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: md ? "mt-3" : "mt-2", children: action })
+      ]
+    }
+  );
+}
+
+// src/Tabs.tsx
+var import_react20 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function arrowKeys(e, row) {
+  if (!row || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+  const items = Array.from(row.querySelectorAll("button:not([disabled])"));
+  const at = items.indexOf(document.activeElement);
+  const next = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (at + (e.key === "ArrowRight" ? 1 : -1) + items.length) % items.length;
+  e.preventDefault();
+  items[next]?.focus();
+  items[next]?.click();
+}
+function Tabs({ items, value, onChange, idPrefix = "tabs", className, ...rest }) {
+  const row = (0, import_react20.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      ref: row,
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      onKeyDown: (e) => arrowKeys(e, row.current),
+      className: cn("flex gap-6 border-b border-border-default", className),
+      children: items.map((item) => {
+        const on = item.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            id: `${idPrefix}-tab-${item.value}`,
+            "aria-controls": `${idPrefix}-panel-${item.value}`,
+            "aria-selected": on,
+            tabIndex: on ? 0 : -1,
+            disabled: item.disabled,
+            onClick: () => onChange(item.value),
+            className: cn(
+              "-mb-px flex items-center gap-1.5 rounded-control border-b-2 pt-1 pb-2.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:opacity-50",
+              on ? "border-brand-primaryAction font-semibold text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary"
+            ),
+            children: [
+              item.label,
+              item.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs text-text-tertiary", children: item.count })
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const row = (0, import_react20.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      ref: row,
+      role: "radiogroup",
+      "aria-label": rest["aria-label"],
+      onKeyDown: (e) => arrowKeys(e, row.current),
+      className: cn("inline-flex w-fit items-stretch gap-0.5 rounded-full bg-subtle p-1", size === "md" ? "h-10" : "h-8", className),
+      children: options.map((o) => {
+        const on = o.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            tabIndex: on ? 0 : -1,
+            onClick: () => onChange(o.value),
+            className: cn(
+              "rounded-full px-3 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+              size === "md" ? "text-sm" : "text-xs",
+              on ? "bg-surface font-semibold text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
+            ),
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+
+// src/TextField.tsx
+var import_react21 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var HEIGHT2 = { sm: "h-8", md: "h-10", lg: "h-11" };
+var TextField = (0, import_react21.forwardRef)(
+  ({ label, hint, error, size = "md", icon, className, id, disabled, ...props }, ref) => {
+    const auto = (0, import_react21.useId)();
+    const fieldId = id ?? auto;
+    const noteId = `${fieldId}-note`;
+    const note = error ?? hint;
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { htmlFor: fieldId, className: "text-xs font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-2 rounded-control border bg-input px-3 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus",
+            HEIGHT2[size],
+            error ? "border-status-danger" : "border-border-strong",
+            disabled && "opacity-50"
+          ),
+          children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-hidden": "true", className: "flex shrink-0 text-text-tertiary", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "input",
+              {
+                ref,
+                id: fieldId,
+                disabled,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": note ? noteId : void 0,
+                className: "min-w-0 flex-1 bg-transparent text-dense text-text-primary outline-hidden placeholder:text-text-tertiary",
+                ...props
+              }
+            )
+          ]
+        }
+      ),
+      note && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { id: noteId, className: cn("text-xs", error ? "text-text-danger" : "text-text-tertiary"), children: note })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AISpark,
@@ -4108,11 +4414,13 @@ function PageHeader({ title, description, actions, className }) {
   DateRangeFilter,
   DateRangePicker,
   Delta,
+  EmptyState,
   FilterChipBar,
   FilterDropdownFooter,
   Freshness,
   InfoTip,
   LineChartPlaceholder,
+  Modal,
   MultiSelectFilter,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
@@ -4127,6 +4435,7 @@ function PageHeader({ title, description, actions, className }) {
   SearchBar,
   SectionHeading,
   SectionRail,
+  SegmentedControl,
   SelectAllVisible,
   SelectFilter,
   SelectedSection,
@@ -4134,7 +4443,9 @@ function PageHeader({ title, description, actions, className }) {
   SortButton,
   StackedColumnPlaceholder,
   TablePagination,
+  Tabs,
   Tag,
+  TextField,
   Toast,
   Toggle,
   Tooltip,