@dloizides/ui-nav 1.13.1 → 1.16.0

package/dist/index.js

@@ -1,18 +1,51 @@
 'use strict';
 
+var React3 = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
-var React2 = require('react');
+var uiMotion = require('@dloizides/ui-motion');
 var jsxRuntime = require('react/jsx-runtime');
 var uiLayout = require('@dloizides/ui-layout');
 var authWeb = require('@dloizides/auth-web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 // src/Sidebar.tsx
 
+// src/sidebarFilter.ts
+function searchTokens(query) {
+  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+function labelMatches(item, tokens) {
+  const label = item.label.toLowerCase();
+  return tokens.every((token) => label.includes(token));
+}
+function filterNavItems(items, query) {
+  const tokens = searchTokens(query);
+  if (tokens.length === 0) return [...items];
+  return filterByTokens(items, tokens);
+}
+function filterByTokens(items, tokens) {
+  const kept = [];
+  for (const item of items) {
+    const selfMatch = labelMatches(item, tokens);
+    const children = item.children ?? [];
+    if (selfMatch) {
+      kept.push(item);
+      continue;
+    }
+    if (children.length === 0) continue;
+    const prunedChildren = filterByTokens(children, tokens);
+    if (prunedChildren.length > 0) kept.push({ ...item, children: prunedChildren });
+  }
+  return kept;
+}
+function isFilterActive(query) {
+  return searchTokens(query).length > 0;
+}
+
 // src/isRouteActive.ts
 function isRouteActive(pathname, route) {
   if (route === "/") return pathname === "/";
@@ -20,6 +53,9 @@ function isRouteActive(pathname, route) {
 }
 var ACTIVE_BORDER_RADIUS = 4;
 var ACTIVE_ACCENT_WIDTH = 3;
+var NAV_ROW_RADIUS = 8;
+var ACTIVE_TINT_OPACITY = 0.14;
+var HOVER_TINT_OPACITY = 0.06;
 var NAV_LINK_GAP = 4;
 var navStyles = reactNative.StyleSheet.create({
   // --- Sidebar ---
@@ -45,6 +81,12 @@ var navStyles = reactNative.StyleSheet.create({
   sidebarSpacer: {
     flex: 1
   },
+  // Inline-search no-match text — sits where the nav list would, muted + padded.
+  sidebarEmpty: {
+    fontSize: 13,
+    paddingVertical: 10,
+    paddingHorizontal: 12
+  },
   // --- Topbar ---
   topbarContainer: {
     height: 64,
@@ -245,8 +287,12 @@ var collapsedRailStyles = reactNative.StyleSheet.create({
 var expandableStyles = reactNative.StyleSheet.create({
   // Every leaf reserves the accent-bar gutter (a TRANSPARENT left border of the
   // same width the active item colours in) so activation never shifts the row.
+  // `overflow: hidden` clips the rounded {@link tintOverlay} to the row's corners;
+  // `position: relative` anchors that absolutely-filled overlay to the row.
   childItem: {
-    borderRadius: 6,
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: NAV_ROW_RADIUS,
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 9,
@@ -257,8 +303,24 @@ var expandableStyles = reactNative.StyleSheet.create({
   childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },
   chevron: { marginLeft: "auto" },
   childrenContainer: { overflow: "hidden", marginBottom: 4 },
+  // The hover/active brand wash: a rounded fill behind the row's icon + label,
+  // its opacity eased between 0 / hover / active. Colour + opacity are applied at
+  // render time (theme primary); this only positions and rounds it.
+  tintOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: NAV_ROW_RADIUS,
+    // `style.pointerEvents` (not the deprecated prop) so the overlay never
+    // intercepts the row's press/hover — RNW forwards this style key to the DOM.
+    pointerEvents: "none"
+  },
   header: {
-    borderRadius: 6,
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: NAV_ROW_RADIUS,
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 8
@@ -285,6 +347,7 @@ var IS_WEB = reactNative.Platform.OS === "web";
 var FOCUS_RING_WIDTH = 2;
 var FOCUS_RING_OFFSET = 2;
 var HOVER_TRANSITION_MS = 150;
+var TINT_TRANSITION_MS = 160;
 function focusRingStyle(focused, ringColor) {
   if (!IS_WEB || !focused) return void 0;
   const ring = {
@@ -295,24 +358,80 @@ function focusRingStyle(focused, ringColor) {
   };
   return ring;
 }
-function hoverTransitionStyle(reducedMotion) {
+function webTransition(properties, durationMs, reducedMotion) {
   if (!IS_WEB) return void 0;
   const transition = {
-    transitionProperty: "color, background-color",
-    transitionDuration: reducedMotion ? "0ms" : `${HOVER_TRANSITION_MS}ms`
+    transitionProperty: properties,
+    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
   };
   return transition;
 }
+function hoverTransitionStyle(reducedMotion) {
+  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
+}
+function tintTransitionStyle(reducedMotion) {
+  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
+}
+function rotateTransitionStyle(reducedMotion) {
+  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
+}
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function getReducedMotionQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
+  return window.matchMedia(REDUCED_MOTION_QUERY);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = React3.useState(() => getReducedMotionQuery()?.matches ?? false);
+  React3.useEffect(() => {
+    const mql = getReducedMotionQuery();
+    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
+    const onChange = () => setReduced(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener?.("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+var CHEVRON_GLYPH = "\u203A";
+var EXPANDED_ROTATION = "90deg";
+var COLLAPSED_ROTATION = "0deg";
+var CHEVRON_FONT_WEIGHT = "700";
+var SidebarChevron = ({ expanded, color, size }) => {
+  const reducedMotion = useReducedMotion();
+  const style = {
+    color,
+    fontSize: size,
+    fontWeight: CHEVRON_FONT_WEIGHT,
+    transform: [{ rotate: expanded ? EXPANDED_ROTATION : COLLAPSED_ROTATION }]
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: [style, rotateTransitionStyle(reducedMotion)],
+      children: CHEVRON_GLYPH
+    }
+  );
+};
 function ariaCurrentProps(isActive) {
   return isActive ? { "aria-current": "page" } : {};
 }
 function ariaExpandedProps(expanded) {
   return { "aria-expanded": expanded };
 }
+function hoverHandlerProps(onIn, onOut) {
+  return IS_WEB ? { onHoverIn: onIn, onHoverOut: onOut } : {};
+}
 function hasActiveDescendant(item, pathname) {
   if (isRouteActive(pathname, item.route)) return true;
   return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
 }
+function TintOverlay({ opacity, color }) {
+  const reducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [expandableStyles.tintOverlay, { backgroundColor: color, opacity }, tintTransitionStyle(reducedMotion)] });
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -323,27 +442,27 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = React2.useState(() => hasActiveDescendant(item, pathname));
-  const [focused, setFocused] = React2.useState(false);
+  const [expanded, setExpanded] = React3.useState(() => hasActiveDescendant(item, pathname));
+  const [focused, setFocused] = React3.useState(false);
+  const [hovered, setHovered] = React3.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const toggle = React2.useCallback(() => setExpanded((v) => !v), []);
+  const toggle = React3.useCallback(() => setExpanded((v) => !v), []);
+  const onHoverIn = React3.useCallback(() => setHovered(true), []);
+  const onHoverOut = React3.useCallback(() => setHovered(false), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
   const isSectionHeader = hasChildren && depth === 0;
-  const activeItemStyle = React2.useMemo(
-    () => ({
-      backgroundColor: colors.border,
-      borderRadius: ACTIVE_BORDER_RADIUS,
-      borderLeftWidth: ACTIVE_ACCENT_WIDTH,
-      borderLeftColor: primaryColor
-    }),
-    [colors.border, primaryColor]
+  const activeAccentStyle = React3.useMemo(
+    () => ({ borderLeftWidth: ACTIVE_ACCENT_WIDTH, borderLeftColor: primaryColor }),
+    [primaryColor]
   );
-  const paddingStyle = React2.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
-  const headerPaddingStyle = React2.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const paddingStyle = React3.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = React3.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const leafTintOpacity = isActive ? ACTIVE_TINT_OPACITY : hovered ? HOVER_TINT_OPACITY : 0;
+  const headerTintOpacity = hovered ? HOVER_TINT_OPACITY : 0;
   if (!hasChildren)
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.TouchableOpacity,
@@ -355,15 +474,17 @@ var NavExpandableItem = ({
         style: [
           expandableStyles.childItem,
           paddingStyle,
-          isActive ? activeItemStyle : void 0,
+          isActive ? activeAccentStyle : void 0,
           focusRingStyle(focused, primaryColor)
         ],
         testID: item.testID ?? item.key,
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: () => onNavigate(item.route),
+        ...hoverHandlerProps(onHoverIn, onHoverOut),
         ...ariaCurrentProps(isActive),
         children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TintOverlay, { color: primaryColor, opacity: leafTintOpacity }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
@@ -378,6 +499,7 @@ var NavExpandableItem = ({
         ]
       }
     );
+  const chevronColor = colors.textSecondary;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.TouchableOpacity,
@@ -396,8 +518,10 @@ var NavExpandableItem = ({
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: toggle,
+        ...hoverHandlerProps(onHoverIn, onHoverOut),
         ...ariaExpandedProps(expanded),
         children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TintOverlay, { color: primaryColor, opacity: headerTintOpacity }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(isSectionHeader ? colors.textSecondary : colors.text, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
@@ -409,11 +533,11 @@ var NavExpandableItem = ({
               children: item.label
             }
           ),
-          typeof renderChevron === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.chevron, children: renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE) }) : null
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.chevron, children: typeof renderChevron === "function" ? renderChevron(expanded, chevronColor, CHEVRON_ICON_SIZE) : /* @__PURE__ */ jsxRuntime.jsx(SidebarChevron, { color: chevronColor, expanded, size: CHEVRON_ICON_SIZE }) })
         ]
       }
     ),
-    expanded ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(uiMotion.Collapse, { open: expanded, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
       NavExpandableItem,
       {
         collapseHint,
@@ -426,16 +550,96 @@ var NavExpandableItem = ({
         onNavigate
       },
       child.key
-    )) }) : null
+    )) }) })
   ] });
 };
+var FIELD_MIN_HEIGHT = 38;
+var CLEAR_GLYPH = "\u2715";
+var CLEAR_MIN_TARGET = 28;
+var styles = reactNative.StyleSheet.create({
+  wrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingLeft: 12,
+    paddingRight: 6,
+    marginBottom: 12
+  },
+  input: {
+    flex: 1,
+    fontSize: 14,
+    paddingVertical: 8,
+    minHeight: FIELD_MIN_HEIGHT
+  },
+  clear: {
+    minWidth: CLEAR_MIN_TARGET,
+    minHeight: CLEAR_MIN_TARGET,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6
+  },
+  clearGlyph: { fontSize: 13, fontWeight: "700" }
+});
+var SidebarSearch = ({
+  value,
+  onChangeText,
+  onClear,
+  labels,
+  testID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React3.useState(false);
+  const hasQuery = value.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        styles.wrap,
+        { backgroundColor: colors.surface, borderColor: focused ? primary : colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TextInput,
+          {
+            accessibilityHint: labels.hint,
+            accessibilityLabel: labels.placeholder,
+            placeholder: labels.placeholder,
+            placeholderTextColor: colors.textSecondary,
+            style: [styles.input, { color: colors.text }],
+            testID,
+            value,
+            onBlur: () => setFocused(false),
+            onChangeText,
+            onFocus: () => setFocused(true)
+          }
+        ),
+        hasQuery ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            accessibilityHint: labels.clearHint,
+            accessibilityLabel: labels.clearLabel,
+            accessibilityRole: "button",
+            style: styles.clear,
+            testID: `${testID}-clear`,
+            onPress: onClear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
+          }
+        ) : null
+      ]
+    }
+  );
+};
 function isBareText(node) {
   return typeof node === "string" || typeof node === "number";
 }
 function renderTextSlot(node, style) {
   if (node === void 0 || node === null) return node;
   if (isBareText(node)) return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: node });
-  return React2__default.default.Children.map(
+  return React3__default.default.Children.map(
     node,
     (child) => isBareText(child) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: child }) : child
   );
@@ -450,12 +654,30 @@ var Sidebar = ({
   expandHint = "",
   collapseHint = "",
   renderChevron,
+  enableInlineSearch = false,
+  search,
+  searchQuery,
+  onSearchChange,
   header,
   footer,
   containerStyle
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
+  const [internalQuery, setInternalQuery] = React3.useState("");
+  const controlled = searchQuery !== void 0;
+  const query = controlled ? searchQuery : internalQuery;
+  const setQuery = React3.useCallback(
+    (next) => {
+      if (!controlled) setInternalQuery(next);
+      onSearchChange?.(next);
+    },
+    [controlled, onSearchChange]
+  );
+  const clearQuery = React3.useCallback(() => setQuery(""), [setQuery]);
+  const searchOn = enableInlineSearch && search !== void 0;
+  const visibleItems = searchOn ? filterNavItems(items, query) : items;
+  const showEmpty = searchOn && isFilterActive(query) && visibleItems.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -469,8 +691,18 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
+        searchOn && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarSearch,
+          {
+            labels: search,
+            testID: "sidebar-search",
+            value: query,
+            onChangeText: setQuery,
+            onClear: clearQuery
+          }
+        ) : null,
         renderTextSlot(header, { color: colors.text }),
-        items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        showEmpty && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           NavExpandableItem,
           {
             collapseHint,
@@ -490,6 +722,12 @@ var Sidebar = ({
   );
 };
 
+// src/searchAffordance.ts
+var DEFAULT_SEARCH_BREAKPOINT = 768;
+function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
+  return viewport >= breakpoint ? "inline" : "palette";
+}
+
 // src/constants.ts
 var NAV_TEST_IDS = {
   /** displayName line in the rich account header (tappable when `onAccount` set). */
@@ -537,7 +775,7 @@ var FocusableTouchable = ({
   testID,
   children
 }) => {
-  const [focused, setFocused] = React2.useState(false);
+  const [focused, setFocused] = React3.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -690,8 +928,8 @@ var NavBarLink = ({
   navigateHint,
   onPress
 }) => {
-  const [hovered, setHovered] = React2.useState(false);
-  const [focused, setFocused] = React2.useState(false);
+  const [hovered, setHovered] = React3.useState(false);
+  const [focused, setFocused] = React3.useState(false);
   const isHovered = hovered && !isActive;
   const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
   const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
@@ -735,12 +973,12 @@ var NavOverflowMenu = ({
   testID,
   variant
 }) => {
-  const options = React2.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
-  const activeRoute = React2.useMemo(
+  const options = React3.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
+  const activeRoute = React3.useMemo(
     () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
     [items, pathname]
   );
-  const optionTestID = React2.useMemo(() => {
+  const optionTestID = React3.useMemo(() => {
     const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
     return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
   }, [items, testID]);
@@ -797,13 +1035,13 @@ function resizeWidthBuffer(previous, count) {
   return next;
 }
 function useNavOverflow(itemCount, gap) {
-  const [availableWidth, setAvailableWidthState] = React2.useState(0);
-  const [moreWidth, setMoreWidthState] = React2.useState(0);
-  const [itemWidths, setItemWidths] = React2.useState(() => new Array(itemCount).fill(0));
-  React2.useEffect(() => {
+  const [availableWidth, setAvailableWidthState] = React3.useState(0);
+  const [moreWidth, setMoreWidthState] = React3.useState(0);
+  const [itemWidths, setItemWidths] = React3.useState(() => new Array(itemCount).fill(0));
+  React3.useEffect(() => {
     setItemWidths((previous) => previous.length === itemCount ? previous : resizeWidthBuffer(previous, itemCount));
   }, [itemCount]);
-  const setItemWidth = React2.useCallback((index, width) => {
+  const setItemWidth = React3.useCallback((index, width) => {
     setItemWidths((previous) => {
       if (index < 0 || index >= previous.length || previous[index] === width) return previous;
       const next = previous.slice();
@@ -811,38 +1049,20 @@ function useNavOverflow(itemCount, gap) {
       return next;
     });
   }, []);
-  const setAvailableWidth = React2.useCallback(
+  const setAvailableWidth = React3.useCallback(
     (width) => setAvailableWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const setMoreWidth = React2.useCallback(
+  const setMoreWidth = React3.useCallback(
     (width) => setMoreWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const visibleCount = React2.useMemo(
+  const visibleCount = React3.useMemo(
     () => computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }),
     [availableWidth, itemWidths, moreWidth, gap]
   );
   return { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth };
 }
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-function getReducedMotionQuery() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
-  return window.matchMedia(REDUCED_MOTION_QUERY);
-}
-function useReducedMotion() {
-  const [reduced, setReduced] = React2.useState(() => getReducedMotionQuery()?.matches ?? false);
-  React2.useEffect(() => {
-    const mql = getReducedMotionQuery();
-    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
-    const onChange = () => setReduced(mql.matches);
-    mql.addEventListener("change", onChange);
-    return () => {
-      mql.removeEventListener?.("change", onChange);
-    };
-  }, []);
-  return reduced;
-}
 var LINKS_REGION_ID = "navbar-links-region";
 var DEFAULT_COLLAPSE_BELOW = 760;
 var MENU_GLYPH = "\u2630";
@@ -871,24 +1091,24 @@ var NavBarInner = ({
   const primaryColor = theme.palette.primary["500"];
   const { width } = reactNative.useWindowDimensions();
   const reducedMotion = useReducedMotion();
-  const [open, setOpen] = React2.useState(false);
-  const [toggleFocused, setToggleFocused] = React2.useState(false);
+  const [open, setOpen] = React3.useState(false);
+  const [toggleFocused, setToggleFocused] = React3.useState(false);
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
-  const innerCapStyle = React2.useMemo(
+  const innerCapStyle = React3.useMemo(
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
   );
-  const toggleMenu = React2.useCallback(() => setOpen((v) => !v), []);
-  const handlePress = React2.useCallback(
+  const toggleMenu = React3.useCallback(() => setOpen((v) => !v), []);
+  const handlePress = React3.useCallback(
     (route) => {
       setOpen(false);
       onNavigate(route);
     },
     [onNavigate]
   );
-  const linkColors = React2.useMemo(
+  const linkColors = React3.useMemo(
     () => ({
       rest: colors.textSecondary,
       hoverText: colors.text,
@@ -943,7 +1163,7 @@ var NavBarInner = ({
             }
           );
           if (collapsed) {
-            return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -1009,7 +1229,7 @@ var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles = reactNative.StyleSheet.create({
+var styles2 = reactNative.StyleSheet.create({
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   card: {
     padding: CARD_PADDING,
@@ -1026,9 +1246,9 @@ function MessageCard({
 }) {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1040,7 +1260,7 @@ function useContentBody(state, children, testID) {
   if (state?.error)
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
   if (state?.loading === true)
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
   return children;
 }
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
@@ -1064,7 +1284,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
   // The scrim's tap-to-close hit area is anchored to the RIGHT of the panel
   // (`left: DRAWER_WIDTH`), so it NEVER overlaps the panel: nav-item taps always
@@ -1099,10 +1319,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles2.menuToggle,
+      style: styles3.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1114,8 +1334,8 @@ var MobileDrawer = ({
   scrimTestID
 }) => {
   const { theme } = uiFeedback.useUi();
-  const panelRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const panelRef = React3.useRef(null);
+  React3.useEffect(() => {
     const node = panelRef.current;
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
@@ -1128,14 +1348,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles2.scrim,
+        style: styles3.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1146,7 +1366,7 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles2.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles3.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
@@ -1177,7 +1397,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   root: { flex: 1 },
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
@@ -1222,32 +1442,32 @@ var AppShell = ({
     range: railRange
   });
   const useDrawer = railMode === "drawer";
-  const [drawerOpen, setDrawerOpen] = React2.useState(false);
-  const openDrawer = React2.useCallback(() => setDrawerOpen(true), []);
-  const closeDrawer = React2.useCallback(() => setDrawerOpen(false), []);
-  React2.useEffect(() => {
+  const [drawerOpen, setDrawerOpen] = React3.useState(false);
+  const openDrawer = React3.useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = React3.useCallback(() => setDrawerOpen(false), []);
+  React3.useEffect(() => {
     if (!useDrawer && drawerOpen) setDrawerOpen(false);
   }, [useDrawer, drawerOpen]);
   const drawerLabels = { ...DEFAULT_DRAWER_LABELS, ...mobileMenu };
   const isUnauthenticated = gate !== void 0 && !gate.pending && !gate.authenticated;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.root, styles3.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.root, styles4.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles3.columnFull : [styles3.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles3.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles4.columnFull : [styles4.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles4.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.ScrollView,
     {
-      contentContainerStyle: [styles3.scrollContent, { padding: contentPadding }],
-      style: styles3.scroll,
+      contentContainerStyle: [styles4.scrollContent, { padding: contentPadding }],
+      style: styles4.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -1257,14 +1477,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
   const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.root, { backgroundColor: theme.colors.background }], testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles4.root, { backgroundColor: theme.colors.background }], testID, children: [
     headerRegion,
     nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
-    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1482,7 +1702,7 @@ var DarkModeControl = ({
   const primaryColor = theme.palette.primary["500"];
   const currentIndex = options.findIndex((option) => option.value === value);
   const current = currentIndex >= 0 ? options[currentIndex] : options[0];
-  const advance = React2.useCallback(() => {
+  const advance = React3.useCallback(() => {
     if (options.length === 0) return;
     const from = currentIndex >= 0 ? currentIndex : 0;
     const next = options[(from + 1) % options.length];
@@ -1558,7 +1778,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -1587,14 +1807,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles4.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles5.row, selected ? { backgroundColor: colors.border } : void 0],
       testID: item.testID ?? item.key,
       onPress: () => onChoose(item),
       children: [
         typeof item.renderIcon === "function" ? item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.rowText, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -1603,27 +1823,27 @@ var PaletteRow = ({ item, selected, onChoose }) => {
 var CommandPalette = ({ open, items, onClose, labels, testID }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  const [query, setQuery] = React2.useState("");
-  const [selected, setSelected] = React2.useState(0);
-  const inputRef = React2.useRef(null);
-  const results = React2.useMemo(() => filterCommands(items, query), [items, query]);
-  React2.useEffect(() => {
+  const [query, setQuery] = React3.useState("");
+  const [selected, setSelected] = React3.useState(0);
+  const inputRef = React3.useRef(null);
+  const results = React3.useMemo(() => filterCommands(items, query), [items, query]);
+  React3.useEffect(() => {
     if (!open) return;
     setQuery("");
     setSelected(0);
     inputRef.current?.focus();
   }, [open]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     setSelected((prev) => Math.min(prev, Math.max(0, results.length - 1)));
   }, [results.length]);
-  const choose = React2.useCallback(
+  const choose = React3.useCallback(
     (item) => {
       item.onSelect();
       onClose();
     },
     [onClose]
   );
-  const onKeyPress = React2.useCallback(
+  const onKeyPress = React3.useCallback(
     (event) => {
       const key = event.nativeEvent.key;
       if (key === KEY_DOWN) setSelected((i) => Math.min(i + 1, results.length - 1));
@@ -1634,14 +1854,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles4.scrim,
+        style: styles5.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -1652,7 +1872,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles4.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles5.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1662,21 +1882,21 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles4.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles5.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles4.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles5.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
   ] });
 };
 var MIN_TARGET = 36;
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   trigger: {
     flexDirection: "row",
     alignItems: "center",
@@ -1701,7 +1921,7 @@ var CommandPaletteTrigger = ({
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React2__default.default.useState(false);
+  const [focused, setFocused] = React3__default.default.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Pressable,
     {
@@ -1709,7 +1929,7 @@ var CommandPaletteTrigger = ({
       accessibilityLabel: label,
       accessibilityRole: "button",
       style: [
-        styles5.trigger,
+        styles6.trigger,
         { backgroundColor: colors.surface, borderColor: colors.border },
         focusRingStyle(focused, primary)
       ],
@@ -1718,15 +1938,15 @@ var CommandPaletteTrigger = ({
       onFocus: () => setFocused(true),
       onPress,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, { color: colors.textSecondary }], children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.badgeText, { color: colors.textSecondary }], children: shortcut }) })
       ]
     }
   );
 };
 var LAUNCH_KEY = "k";
 function useCommandPaletteHotkey(onOpen, enabled = true) {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled || typeof document === "undefined") return void 0;
     const handler = (event) => {
       const isLauncher = event.key.toLowerCase() === LAUNCH_KEY && (event.metaKey || event.ctrlKey);
@@ -1750,6 +1970,7 @@ function accessibleNavItems(user, table, translate) {
 }
 
 exports.ACTIVE_BORDER_RADIUS = ACTIVE_BORDER_RADIUS;
+exports.ACTIVE_TINT_OPACITY = ACTIVE_TINT_OPACITY;
 exports.APP_SHELL_SUFFIX = APP_SHELL_SUFFIX;
 exports.AppShell = AppShell;
 exports.BASE_INDENT = BASE_INDENT;
@@ -1758,9 +1979,12 @@ exports.CollapsedRail = CollapsedRail;
 exports.CommandPalette = CommandPalette;
 exports.CommandPaletteTrigger = CommandPaletteTrigger;
 exports.DEFAULT_COLLAPSED_RAIL_MAX = DEFAULT_COLLAPSED_RAIL_MAX;
+exports.DEFAULT_SEARCH_BREAKPOINT = DEFAULT_SEARCH_BREAKPOINT;
 exports.DarkModeControl = DarkModeControl;
+exports.HOVER_TINT_OPACITY = HOVER_TINT_OPACITY;
 exports.NAV_ICON_SIZE = NAV_ICON_SIZE;
 exports.NAV_LINK_GAP = NAV_LINK_GAP;
+exports.NAV_ROW_RADIUS = NAV_ROW_RADIUS;
 exports.NAV_TEST_IDS = NAV_TEST_IDS;
 exports.Nav = Nav;
 exports.NavBar = NavBar;
@@ -1770,18 +1994,24 @@ exports.NavShell = NavShell;
 exports.PillNav = PillNav;
 exports.RAIL_FULL_BREAKPOINT = RAIL_FULL_BREAKPOINT;
 exports.Sidebar = Sidebar;
+exports.SidebarChevron = SidebarChevron;
+exports.SidebarSearch = SidebarSearch;
 exports.Topbar = Topbar;
 exports.accessibleNavItems = accessibleNavItems;
 exports.collapsedRailStyles = collapsedRailStyles;
 exports.darkModeStyles = darkModeStyles;
 exports.expandableStyles = expandableStyles;
 exports.filterCommands = filterCommands;
+exports.filterNavItems = filterNavItems;
+exports.isFilterActive = isFilterActive;
 exports.isRouteActive = isRouteActive;
 exports.navStyles = navStyles;
 exports.pillNavStyles = pillNavStyles;
 exports.resolveContentMaxWidth = resolveContentMaxWidth;
 exports.resolveRailMode = resolveRailMode;
+exports.resolveSearchAffordance = resolveSearchAffordance;
 exports.roleRoutesToNavItems = roleRoutesToNavItems;
+exports.searchTokens = searchTokens;
 exports.useCommandPaletteHotkey = useCommandPaletteHotkey;
 exports.useContentMaxWidth = useContentMaxWidth;
 //# sourceMappingURL=index.js.map