@mediaradar/design-components 0.20.0 → 0.21.0

package/dist/index.js

@@ -233,7 +233,7 @@ function AdvertiserQuickFilter({
         "aria-label": caption,
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
         children: [
-          /* @__PURE__ */ jsx3("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs3("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__ */ jsx3("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs3("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__ */ jsx3(Search2, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx3(
               "input",
@@ -910,8 +910,9 @@ function NavBtn({ children, onClick, ...rest }) {
 
 // src/SearchBar.tsx
 import { useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState4 } from "react";
-import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
+import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3, X as X2 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "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",
@@ -927,6 +928,7 @@ function SearchBar({
   value,
   onChange,
   variant = "default",
+  size = "lg",
   matchValue,
   onMatchChange,
   className,
@@ -934,6 +936,7 @@ function SearchBar({
 }) {
   const [open, setOpen] = useState4(false);
   const ref = useRef4(null);
+  const input = useRef4(null);
   useEffect4(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && setOpen(false);
@@ -952,7 +955,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: [
@@ -961,16 +965,31 @@ function SearchBar({
           /* @__PURE__ */ jsx8(
             "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__ */ jsx8(
+          "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__ */ jsx8(X2, { 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):
@@ -1609,7 +1628,7 @@ function NoResultsEmptyState({
 
 // src/WorkspaceSelectedCard.tsx
 import { useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
-import { ChevronDown as ChevronDown6, X as X2 } from "lucide-react";
+import { ChevronDown as ChevronDown6, X as X3 } from "lucide-react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function cx5(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -1673,7 +1692,7 @@ function SummaryGroupItem({
                   "aria-label": `Remove ${item.name}`,
                   onClick: () => group.onRemove(item.id),
                   className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
-                  children: /* @__PURE__ */ jsx14(X2, { size: 12, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx14(X3, { size: 12, "aria-hidden": "true" })
                 }
               )
             ]
@@ -2322,7 +2341,7 @@ function SelectionPicker({
     }) }),
     source === "search" && /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-col gap-3", children: [
       /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs22("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__ */ jsxs22("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__ */ jsx24(Search4, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx24(
             "input",
@@ -2636,7 +2655,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__ */ jsx24(ChevronDown8, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
@@ -2842,7 +2861,10 @@ var buttonVariants = 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
@@ -2857,6 +2879,7 @@ var buttonVariants = 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.
@@ -2970,7 +2993,7 @@ function NameListModal({
     /* @__PURE__ */ jsx28(
       "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__ */ jsxs26(
           "div",
@@ -2980,7 +3003,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__ */ jsx28("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ jsxs26("div", { className: "mt-4 flex flex-col gap-1.5", children: [
@@ -2993,7 +3016,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"
                   }
                 )
               ] }),
@@ -3039,7 +3062,7 @@ function ChipContent({ caption, value, icon }) {
 }
 
 // src/FilterChipBar.tsx
-import { CircleSlash, X as X3 } from "lucide-react";
+import { CircleSlash, X as X4 } from "lucide-react";
 import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
   if (chips.length === 0) return null;
@@ -3085,7 +3108,7 @@ function Chip({
               onClick: onRemove,
               "aria-label": `Remove ${groupLabel}: ${label}`,
               className: "text-text-tertiary transition-colors hover:text-text-primary",
-              children: /* @__PURE__ */ jsx30(X3, { size: 12 })
+              children: /* @__PURE__ */ jsx30(X4, { size: 12 })
             }
           )
         ]
@@ -3538,7 +3561,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__ */ jsx37("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
@@ -3667,7 +3690,7 @@ function DateRangePicker({
 
 // src/MultiSelectFilter.tsx
 import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef14, useState as useState14 } from "react";
-import { ChevronDown as ChevronDown11, Check as Check8, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
+import { ChevronDown as ChevronDown11, Check as Check8, Minus as Minus2, Search as Search5, X as X5 } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 function MultiSelectFilter({
   caption,
@@ -3791,7 +3814,7 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ jsx38("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs34("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
+          searchable && /* @__PURE__ */ jsx38("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs34("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__ */ jsx38(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx38(
               "input",
@@ -3803,7 +3826,7 @@ function MultiSelectFilter({
                 className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
               }
             ),
-            q && /* @__PURE__ */ jsx38("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx38(X4, { size: 13 }) })
+            q && /* @__PURE__ */ jsx38("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx38(X5, { size: 13 }) })
           ] }) }),
           /* @__PURE__ */ jsxs34("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
             groups ? visibleGroups.map((g) => {
@@ -4001,16 +4024,294 @@ function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, clas
 }
 
 // src/PageHeader.tsx
+import { ArrowLeft } from "lucide-react";
 import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
-function PageHeader({ title, description, actions, className }) {
+function PageHeader({ title, description, actions, back, className }) {
   return /* @__PURE__ */ jsxs37("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
     /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
+      back && /* @__PURE__ */ jsxs37(
+        "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__ */ jsx43(ArrowLeft, { size: 13, "aria-hidden": "true" }),
+            back.label
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx43("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
       description && /* @__PURE__ */ jsx43("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
     ] }),
     actions && /* @__PURE__ */ jsx43("div", { className: "flex shrink-0 items-center gap-2", children: actions })
   ] });
 }
+
+// src/Modal.tsx
+import { useEffect as useEffect14, useId as useId6, useRef as useRef15 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
+import { X as X6 } from "lucide-react";
+import { jsx as jsx44, jsxs as jsxs38 } from "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 = useId6();
+  const descId = useId6();
+  const panel = useRef15(null);
+  const close = useRef15(onClose);
+  close.current = onClose;
+  useEffect14(() => {
+    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 createPortal7(
+    /* @__PURE__ */ jsx44(
+      "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__ */ jsxs38(
+          "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__ */ jsxs38("div", { className: "flex items-start gap-3 px-5 pt-5 pb-3", children: [
+                /* @__PURE__ */ jsxs38("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx44("h2", { id: titleId, className: "text-base font-semibold text-text-primary", children: title }),
+                  description && /* @__PURE__ */ jsx44("p", { id: descId, className: "mt-0.5 text-sm text-text-secondary", children: description })
+                ] }),
+                /* @__PURE__ */ jsx44(
+                  "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__ */ jsx44(X6, { size: 16, "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ jsx44("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__ */ jsx44("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
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, size = "sm", className }) {
+  const md = size === "md";
+  return /* @__PURE__ */ jsxs39(
+    "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__ */ jsx45(
+          "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__ */ jsx45("p", { className: cn("font-semibold text-text-primary", md ? "text-base" : "text-sm"), children: title }),
+        description && /* @__PURE__ */ jsx45("p", { className: cn("max-w-sm text-text-secondary", md ? "text-sm" : "text-xs"), children: description }),
+        action && /* @__PURE__ */ jsx45("div", { className: md ? "mt-3" : "mt-2", children: action })
+      ]
+    }
+  );
+}
+
+// src/Tabs.tsx
+import { useRef as useRef16 } from "react";
+import { jsx as jsx46, jsxs as jsxs40 } from "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 = useRef16(null);
+  return /* @__PURE__ */ jsx46(
+    "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__ */ jsxs40(
+          "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__ */ jsx46("span", { className: "text-xs text-text-tertiary", children: item.count })
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const row = useRef16(null);
+  return /* @__PURE__ */ jsx46(
+    "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__ */ jsx46(
+          "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
+import { forwardRef as forwardRef3, useId as useId7 } from "react";
+import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
+var HEIGHT2 = { sm: "h-8", md: "h-10", lg: "h-11" };
+var TextField = forwardRef3(
+  ({ label, hint, error, size = "md", icon, className, id, disabled, ...props }, ref) => {
+    const auto = useId7();
+    const fieldId = id ?? auto;
+    const noteId = `${fieldId}-note`;
+    const note = error ?? hint;
+    return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-1.5", className), children: [
+      label && /* @__PURE__ */ jsx47("label", { htmlFor: fieldId, className: "text-xs font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ jsxs41(
+        "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__ */ jsx47("span", { "aria-hidden": "true", className: "flex shrink-0 text-text-tertiary", children: icon }),
+            /* @__PURE__ */ jsx47(
+              "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__ */ jsx47("p", { id: noteId, className: cn("text-xs", error ? "text-text-danger" : "text-text-tertiary"), children: note })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
 export {
   AISpark,
   AdvertiserNoResults,
@@ -4028,11 +4329,13 @@ export {
   DateRangeFilter,
   DateRangePicker,
   Delta,
+  EmptyState,
   FilterChipBar,
   FilterDropdownFooter,
   Freshness,
   InfoTip,
   LineChartPlaceholder,
+  Modal,
   MultiSelectFilter,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
@@ -4047,6 +4350,7 @@ export {
   SearchBar,
   SectionHeading,
   SectionRail,
+  SegmentedControl,
   SelectAllVisible,
   SelectFilter,
   SelectedSection,
@@ -4054,7 +4358,9 @@ export {
   SortButton,
   StackedColumnPlaceholder,
   TablePagination,
+  Tabs,
   Tag,
+  TextField,
   Toast,
   Toggle,
   Tooltip,