@the-portland-company/shell 0.87.1 → 0.89.0

package/dist/index.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
 var react = require('@chakra-ui/react');
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx2 = require('clsx');
 var reactRouterDom = require('react-router-dom');
 var react$1 = require('react');
 require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 // src/theme/index.ts
 
@@ -768,6 +768,12 @@ var components = {
 };
 
 // src/theme/index.ts
+var SHELL_FIELD_MARKER = "data-shell-field";
+var nativeFieldSelector = (state) => {
+  const own = `:not([${SHELL_FIELD_MARKER}])`;
+  const input = `input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])${own}${state}`;
+  return `${input}, textarea${own}${state}, select${own}${state}`;
+};
 var config = {
   initialColorMode: "light",
   useSystemColorMode: false
@@ -791,13 +797,13 @@ var styles = {
       "--mode-input-focus-shadow-color": "var(--app-color-brand-500)"
     },
     // Ensure non-Chakra/native text-like inputs follow mode border colors as well.
-    'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select': {
+    [nativeFieldSelector("")]: {
       borderColor: "var(--mode-input-border-color)"
     },
-    'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):hover, textarea:hover, select:hover': {
+    [nativeFieldSelector(":hover")]: {
       borderColor: "var(--mode-input-hover-border-color)"
     },
-    'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus, textarea:focus, select:focus': {
+    [nativeFieldSelector(":focus")]: {
       borderColor: "var(--mode-primary-color)",
       boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
     }
@@ -833,29 +839,72 @@ var politogyTheme = react.extendTheme({
     full: "9999px"
   }
 });
+var PADDING = {
+  none: "p-0",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
 function Card({
   title,
+  subtitle,
+  aside,
+  actions,
+  footer,
   children,
+  padding = "md",
+  bodyClassName,
   minH,
   className,
   style,
   ...props
 }) {
+  const structured = Boolean(subtitle || aside || actions || footer || bodyClassName);
+  const surface = "rounded-lg border border-[color:var(--app-card-border,var(--color-border))] bg-[color:var(--app-card-bg,var(--color-panel))] text-[color:var(--app-card-fg,var(--color-text))] shadow-sm";
+  if (!structured) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-shell-card": "",
+        className: clsx__default.default(surface, PADDING[padding], className),
+        style: { minHeight: minH, ...style },
+        ...props,
+        children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }) : null,
+          children
+        ]
+      }
+    );
+  }
+  const hasHeader = Boolean(title || subtitle || aside || actions);
+  const divider = "border-[color:var(--app-card-border,var(--color-border))]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `rounded-lg border border-slate-200 bg-white p-6 shadow-sm ${className || ""}`,
+      "data-shell-card": "",
+      "data-shell-card-structured": "",
+      className: clsx__default.default(surface, "overflow-hidden", className),
       style: { minHeight: minH, ...style },
       ...props,
       children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }),
-        children
+        hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("flex flex-wrap items-start justify-between gap-3 border-b px-5 py-4", divider), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-sm text-[color:var(--app-card-fg-muted,var(--color-text-muted))]", children: subtitle }) : null
+          ] }),
+          aside || actions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            aside,
+            actions
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyClassName ?? PADDING[padding], children }),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("border-t px-5 py-3", divider), children: footer }) : null
       ]
     }
   );
 }
 function FormColumn({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx2__default.default("w-full max-w-[960px]", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx__default.default("w-full max-w-[960px]", className), children });
 }
 var MODE_EYEBROW_LABEL = {
   relationship: "Relationship mode",
@@ -868,7 +917,8 @@ var resolveMaxWidthClass = (maxW) => {
   if (maxW === "container.md") return "max-w-5xl";
   return "max-w-7xl";
 };
-function PageHeader({
+function PageHeaderView({
+  renderCrumbLink,
   title,
   mode,
   eyebrow,
@@ -896,11 +946,11 @@ function PageHeader({
     "div",
     {
       style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
-      className: clsx2__default.default("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
+      className: clsx__default.default("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
         "md:ml-60": !hideSidebar
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             eyebrowText ? /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -927,14 +977,14 @@ function PageHeader({
               "nav",
               {
                 "aria-label": "Breadcrumb",
-                className: clsx2__default.default("min-w-0 text-slate-100", title ? "mt-1" : ""),
+                className: clsx__default.default("min-w-0 text-slate-100", title ? "mt-1" : ""),
                 children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-nowrap items-center gap-2 overflow-hidden text-sm text-gray-600", children: breadcrumbsWithoutCurrent.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "li",
                   {
                     className: "flex min-w-0 flex-shrink-0 items-center gap-2",
                     children: [
                       index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: ">" }) : null,
-                      item.href ? /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: item.href, className: "truncate text-slate-100 hover:underline", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-slate-100", children: item.label })
+                      item.href ? renderCrumbLink(item.href, item.label, "truncate text-slate-100 hover:underline") : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-slate-100", children: item.label })
                     ]
                   },
                   `${item.label}-${index}`
@@ -949,6 +999,320 @@ function PageHeader({
     }
   );
 }
+function PageHeader(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PageHeaderView,
+    {
+      ...props,
+      renderCrumbLink: (href, label, className) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: href, className, children: label })
+    }
+  );
+}
+var VARIANT_CLASS = {
+  primary: "border border-transparent bg-[color:var(--app-btn-primary-bg,var(--color-accent))] text-[color:var(--app-btn-primary-fg,var(--color-white))] hover:bg-[color:var(--app-btn-primary-bg-hover,var(--color-accent-hover))]",
+  secondary: "border border-[color:var(--app-btn-secondary-border,var(--color-border))] bg-[color:var(--app-btn-secondary-bg,var(--color-white))] text-[color:var(--app-btn-secondary-fg,var(--color-text))] hover:bg-[color:var(--app-btn-secondary-bg-hover,var(--color-bg))]",
+  ghost: "border border-transparent bg-transparent text-[color:var(--app-btn-secondary-fg,var(--color-text))] hover:bg-[color:var(--app-btn-secondary-bg-hover,var(--color-bg))]",
+  danger: "border border-transparent bg-[color:var(--chrome-danger,var(--color-race-red))] text-[color:var(--color-white)] hover:bg-[color:var(--color-race-red-600)]"
+};
+var SIZE_CLASS = {
+  md: "h-[44px]",
+  sm: "h-[36px]"
+};
+var Button = react$1.forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  href,
+  as,
+  type,
+  className,
+  children,
+  onClick,
+  ...props
+}, ref) {
+  const Component = as ?? (href ? "a" : "button");
+  const isNativeButton = Component === "button";
+  const inactive = disabled || loading;
+  const linkProps = isNativeButton ? { type: type ?? "button", disabled: inactive } : {
+    href,
+    "aria-disabled": inactive || void 0,
+    tabIndex: inactive ? -1 : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      ref,
+      "data-shell-button": "",
+      "data-variant": variant,
+      "aria-busy": loading || void 0,
+      className: clsx__default.default(
+        "inline-flex items-center justify-center gap-2 rounded-[5px] px-3 text-sm font-semibold no-underline transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--app-field-focus,var(--color-accent))] focus-visible:ring-offset-2",
+        SIZE_CLASS[size],
+        VARIANT_CLASS[variant],
+        inactive && "cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: inactive ? (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      } : onClick,
+      ...linkProps,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-shell-button-spinner": "",
+            className: "inline-block h-4 w-4 animate-spin motion-reduce:animate-none rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+});
+var Button_default = Button;
+function FormField({
+  id,
+  label,
+  helperText,
+  error,
+  required,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("flex w-full flex-col gap-1", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: "text-sm font-semibold text-[color:var(--color-text)]", children: [
+      label,
+      required ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " *" }) : null
+    ] }) : null,
+    children,
+    error ? /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: "text-xs text-[color:var(--chrome-danger,var(--color-race-red))]",
+        children: error
+      }
+    ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-helper`, className: "text-xs text-[color:var(--color-text-muted)]", children: helperText }) : null
+  ] });
+}
+function describedBy(id, helperText, error, extra) {
+  const generated = error ? `${id}-error` : helperText ? `${id}-helper` : void 0;
+  const merged = [generated, extra].filter(Boolean).join(" ");
+  return merged || void 0;
+}
+
+// src/components/fieldStyles.ts
+var FIELD_BASE = "w-full rounded-[5px] border bg-[color:var(--app-field-bg,var(--color-white))] px-3 text-sm text-[color:var(--color-text)] placeholder:text-[color:var(--color-text-muted)] focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50";
+var FIELD_VALID = "border-[color:var(--app-field-border,var(--color-border))] hover:border-[color:var(--app-field-border-hover,var(--color-g4))] focus:border-[color:var(--app-field-focus,var(--color-accent))] focus:ring-[color:var(--app-field-focus,var(--color-accent))]";
+var FIELD_INVALID = "border-[color:var(--chrome-danger,var(--color-race-red))] focus:ring-[color:var(--chrome-danger,var(--color-race-red))]";
+var Input = react$1.forwardRef(function Input2({ label, helperText, error, invalid, className, wrapperClassName, id, required, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id: fieldId,
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx__default.default(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          ...props
+        }
+      )
+    }
+  );
+});
+var Input_default = Input;
+var Select = react$1.forwardRef(function Select2({ label, helperText, error, invalid, className, wrapperClassName, id, required, children, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          ref,
+          id: fieldId,
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx__default.default(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+});
+var Select_default = Select;
+var Textarea = react$1.forwardRef(function Textarea2({ label, helperText, error, invalid, className, wrapperClassName, id, required, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref,
+          id: fieldId,
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx__default.default(FIELD_BASE, "min-h-[88px] py-3", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          ...props
+        }
+      )
+    }
+  );
+});
+var Textarea_default = Textarea;
+var Checkbox = react$1.forwardRef(function Checkbox2({
+  label,
+  description,
+  indeterminate,
+  invalid,
+  className,
+  wrapperClassName,
+  id,
+  disabled,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const descId = description ? `${fieldId}-description` : void 0;
+  const inner = react$1.useRef(null);
+  const setRef = react$1.useCallback(
+    (node) => {
+      inner.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  react$1.useEffect(() => {
+    if (inner.current) inner.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const describedBy2 = [descId, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: fieldId,
+      "data-shell-checkbox": "",
+      className: clsx__default.default(
+        "flex min-h-[44px] items-start gap-3 py-[10px] text-sm text-[color:var(--app-card-fg,var(--color-text))]",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...props,
+            ref: setRef,
+            id: fieldId,
+            type: "checkbox",
+            disabled,
+            "data-shell-field": "",
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy2,
+            className: clsx__default.default(
+              "mt-[2px] h-5 w-5 shrink-0 rounded-[5px] border focus:outline-none focus-visible:ring-2",
+              "accent-[color:var(--color-accent-bg-safe,var(--color-accent))]",
+              "focus-visible:ring-[color:var(--app-field-focus,var(--color-accent))]",
+              invalid ? "border-[color:var(--chrome-danger,var(--color-race-red))] outline outline-2 outline-[color:var(--chrome-danger,var(--color-race-red))]" : "border-[color:var(--app-field-border,var(--color-border))]",
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+              className
+            )
+          }
+        ),
+        label || description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+          label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium", children: label }) : null,
+          description ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: descId,
+              className: "block text-xs text-[color:var(--app-card-fg-muted,var(--color-text-muted))]",
+              children: description
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var Checkbox_default = Checkbox;
+var FileInput = react$1.forwardRef(function FileInput2({ label, helperText, error, invalid, className, wrapperClassName, id, required, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...props,
+          ref,
+          id: fieldId,
+          type: "file",
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx__default.default(
+            FIELD_BASE,
+            "h-[44px] cursor-pointer py-[5px] file:mr-3 file:h-[32px] file:cursor-pointer file:rounded-[5px] file:border file:border-[color:var(--app-btn-secondary-border,var(--color-border))] file:bg-[color:var(--app-btn-secondary-bg,var(--color-white))] file:px-3 file:text-sm file:font-medium file:text-[color:var(--app-btn-secondary-fg,var(--color-text))]",
+            isInvalid ? FIELD_INVALID : FIELD_VALID,
+            className
+          )
+        }
+      )
+    }
+  );
+});
+var FileInput_default = FileInput;
 
 // src/lib/deprecation.ts
 var warned = /* @__PURE__ */ new Set();
@@ -992,7 +1356,7 @@ function PageContainer({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx2__default.default(
+          className: clsx__default.default(
             "mx-auto w-full",
             maxWClass,
             pxClass,
@@ -1006,7 +1370,8 @@ function PageContainer({
     }
   );
 }
-function BreadcrumbBar({
+function BreadcrumbBarView({
+  renderCrumbLink,
   breadcrumbs = [],
   actions = null,
   maxW = "full"
@@ -1024,16 +1389,25 @@ function BreadcrumbBar({
     {
       className: "ml-0 border-b border-gray-200 px-4 py-3 md:ml-60",
       style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("mx-auto w-full px-0", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("mx-auto w-full px-0", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
         breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-2 text-sm text-slate-100", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2", children: [
           index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: ">" }) : null,
-          item.href ? /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: item.href, className: "text-slate-100 hover:underline", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-100", children: item.label })
+          item.href ? renderCrumbLink(item.href, item.label, "text-slate-100 hover:underline") : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-100", children: item.label })
         ] }, index)) }) }),
         actions && /* @__PURE__ */ jsxRuntime.jsx("div", { children: actions })
       ] }) })
     }
   );
 }
+function BreadcrumbBar(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BreadcrumbBarView,
+    {
+      ...props,
+      renderCrumbLink: (href, label, className) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: href, className, children: label })
+    }
+  );
+}
 
 // src/notifications/adapter.ts
 function emptyNotificationsFeed() {
@@ -1182,7 +1556,7 @@ function HeaderTabBar({
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: clsx2__default.default(
+      className: clsx__default.default(
         // Header-wide tab strip: background + bottom border only (no outer box).
         // Left-aligned and fluid: the container spans the full content width,
         // the tabs keep their natural width packed from the left (Global-Rules
@@ -1206,7 +1580,7 @@ function HeaderTabBar({
             "aria-label": item.label,
             disabled: isDisabled,
             onClick: () => onChange(item.id),
-            className: clsx2__default.default(
+            className: clsx__default.default(
               // `group/tbtip relative` powers the shared <TopBarTooltip>.
               // Natural width (no flex-1 stretch); 40px square hit area for the
               // icon-only tab so the strip stays tappable.
@@ -1768,12 +2142,17 @@ function SpeculationRulesScript({ items }) {
 exports.BrandIcon = BrandIcon;
 exports.BrandLogo = BrandLogo;
 exports.BreadcrumbBar = BreadcrumbBar;
+exports.Button = Button_default;
 exports.Card = Card;
+exports.Checkbox = Checkbox_default;
+exports.FileInput = FileInput_default;
 exports.FormColumn = FormColumn;
 exports.GlobalUiIdProvider = GlobalUiIdProvider;
 exports.HeaderTabBar = HeaderTabBar;
+exports.Input = Input_default;
 exports.PageContainer = PageContainer;
 exports.PageHeader = PageHeader;
+exports.Select = Select_default;
 exports.ShellChromeContext = ShellChromeContext;
 exports.ShellFooterContext = ShellFooterContext;
 exports.ShellLinkedAccountsContext = ShellLinkedAccountsContext;
@@ -1785,6 +2164,7 @@ exports.ShellProvider = ShellProvider;
 exports.ShellRoleContext = ShellRoleContext;
 exports.ShellSupportProviderContext = ShellSupportProviderContext;
 exports.SpeculationRulesScript = SpeculationRulesScript;
+exports.Textarea = Textarea_default;
 exports.buildNavSpeculationRules = buildNavSpeculationRules;
 exports.buildSpeculationRules = buildSpeculationRules;
 exports.collectSiblingAppUrls = collectSiblingAppUrls;