@sincpro/mobile-ui 1.1.0 → 2.0.1

package/dist/Form/Form.Select.js

@@ -4,33 +4,20 @@ import Pressable from "../primitives/Pressable.js";
 import { themeToVars, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
 import { vars } from "nativewind";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { Animated, Modal, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function Select({ options, value, onChange, label, placeholder = "Seleccionar…", title, disabled = false, accessibleSizing = false, className, testID, showCloseButton = accessibleSizing, }) {
+function Select({ options, value, onChange, label, placeholder = "Seleccionar…", title, disabled = false, className, testID, showCloseButton = true, }) {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
     const [open, setOpen] = useState(false);
     const selected = options.find((o) => o.value === value) ?? null;
-    // eslint-disable-next-line react-hooks/refs
-    const translateY = useRef(new Animated.Value(800)).current;
-    useEffect(() => {
-        if (open) {
-            Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            }).start();
-        }
-        else {
-            translateY.setValue(800);
-        }
-    }, [open, translateY]);
+    const { translateY } = useSheetTranslation(open);
     return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre la lista de opciones", accessibilityLabel: label
                     ? `${label}: ${selected?.label ?? placeholder}`
-                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled, expanded: open }, className: cn("flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3", accessibleSizing ? "min-h-[48px]" : "min-h-[44px]"), disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: accessibleSizing ? undefined : 1, style: accessibleSizing ? { paddingVertical: 12 } : undefined, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "none", onRequestClose: () => setOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: open, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: () => setOpen(false), onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: () => setOpen(false), style: [
+                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled, expanded: open }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[48px]", disabled: disabled, onPress: () => setOpen(true), style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "none", onRequestClose: () => setOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: open, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: () => setOpen(false), onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: () => setOpen(false), style: [
                                 vars(themeToVars(theme)),
                                 {
                                     transform: [{ translateY }],
@@ -48,7 +35,7 @@ function Select({ options, value, onChange, label, placeholder = "Seleccionar…
                                         return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: isSelected }, className: "flex-row items-center justify-between px-4 py-3 border-b border-border-light", onPress: () => {
                                                 onChange(option.value);
                                                 setOpen(false);
-                                            }, style: accessibleSizing ? { minHeight: 48 } : undefined, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-text-accent font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.text.accent, name: "checkmark", size: 18 })) : null] }, String(option.value)));
+                                            }, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-text-accent font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.text.accent, name: "checkmark", size: 18 })) : null] }, String(option.value)));
                                     }) })] })] }) })] }));
 }
 export default Select;

package/dist/Form/index.d.ts

@@ -6,6 +6,7 @@ import ControlledMonetaryInput from "./Form.ControlledMonetaryInput.js";
 import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
+import ErrorSummary from "./Form.ErrorSummary.js";
 import FAB from "./Form.FAB.js";
 import { FilterButtonGroup } from "./Form.FilterButton.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
@@ -27,6 +28,7 @@ export declare const Form: {
     InputField: import("react").FC<import("./Form.InputField.js").InputFieldProps>;
     KeyboardForm: typeof KeyboardForm;
     KeyboardToolbar: typeof KeyboardToolbar;
+    ErrorSummary: typeof ErrorSummary;
     Button: import("react").FC<import("./Form.Button.js").ButtonProps> & {
         Icon: import("react").FC<import("./Form.Button.js").ButtonIconProps>;
     };
@@ -54,6 +56,7 @@ export declare const Form: {
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export { type DropdownOption };
+export type { ErrorSummaryItem, ErrorSummaryProps, } from "./Form.ErrorSummary.js";
 export type { KeyboardFormProps } from "./Form.KeyboardForm.js";
 export type { KeyboardToolbarAction, KeyboardToolbarProps, } from "./Form.KeyboardToolbar.js";
 export default Form;

package/dist/Form/index.js

@@ -7,6 +7,7 @@ import ControlledMonetaryInput from "./Form.ControlledMonetaryInput.js";
 import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
+import ErrorSummary from "./Form.ErrorSummary.js";
 import FAB from "./Form.FAB.js";
 import { FilterButton, FilterButtonGroup } from "./Form.FilterButton.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
@@ -31,6 +32,7 @@ export const Form = {
     InputField,
     KeyboardForm,
     KeyboardToolbar,
+    ErrorSummary,
     Button: ButtonWithIcon,
     IconButton,
     PasswordInput,

package/dist/Navigation/Navigation.AppBar.d.ts

@@ -16,8 +16,6 @@ export interface AppBarActionProps {
     onDark?: boolean;
     /** Drop the contained surface → bare icon/text (iOS-style plain back/action). */
     bare?: boolean;
-    /** Increase the action target to 48 points. */
-    accessibleSizing?: boolean;
     testID?: string;
 }
 /**
@@ -25,7 +23,7 @@ export interface AppBarActionProps {
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
  * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-declare function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, accessibleSizing, testID, }: AppBarActionProps): import("react").JSX.Element;
+declare function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: AppBarActionProps): import("react").JSX.Element;
 export interface AppBarProps {
     title?: string;
     subtitle?: string;
@@ -49,8 +47,6 @@ export interface AppBarProps {
     border?: boolean;
     /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
     safeArea?: boolean;
-    /** Increase the back-action target to 48 points. */
-    accessibleSizing?: boolean;
     /**
      * [large variant] Extra top padding (px) above the large title row.
      * Default is 8. Use ~16–24 on root/home screens without a back button.
@@ -113,7 +109,7 @@ export interface AppBarBackground {
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, accessibleSizing, topSpacing, background, bottomDivider, className, testID, }: AppBarProps): import("react").JSX.Element;
+declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: AppBarProps): import("react").JSX.Element;
 declare const AppBarWithAction: typeof AppBar & {
     Action: typeof AppBarAction;
 };

package/dist/Navigation/Navigation.AppBar.js

@@ -15,7 +15,7 @@ const HERO_DARK_FALLBACK = "#0E1714";
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
  * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, accessibleSizing = false, testID, }) {
+function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
     const theme = useTheme();
     const bg = bare
         ? "transparent"
@@ -35,16 +35,18 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
     // primary/secondary header actions like "Editar", "Nuevo", "Guardar".
     if (label) {
         return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label, accessibilityRole: "button", className: "flex-row items-center justify-center gap-1.5", hitSlop: 6, onPress: onPress, style: {
-                height: accessibleSizing ? 48 : 36,
+                minHeight: 48,
+                minWidth: 48,
                 paddingHorizontal: 14,
+                paddingVertical: 8,
                 borderRadius: 999,
                 backgroundColor: bg,
                 ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
-            }, testID: testID, children: [icon ? _jsx(Icon, { color: iconColor, name: icon, size: 16 }) : null, _jsx(Typography.Text, { semibold: true, style: { color: iconColor }, variant: "bodySmall", children: label })] }));
+            }, testID: testID, children: [icon ? _jsx(Icon, { color: iconColor, name: icon, size: 16 }) : null, _jsx(Typography.Text, { semibold: true, style: { color: iconColor, flexShrink: 1 }, variant: "bodySmall", children: label })] }));
     }
     return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center", hitSlop: 6, onPress: onPress, style: {
-            width: accessibleSizing ? 48 : 40,
-            height: accessibleSizing ? 48 : 40,
+            width: 48,
+            height: 48,
             borderRadius: 12,
             backgroundColor: bg,
             ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
@@ -56,7 +58,7 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, accessibleSizing = false, topSpacing, background, bottomDivider, className, testID, }) {
+function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, topSpacing, background, bottomDivider, className, testID, }) {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
     const centered = variant === "center";
@@ -106,7 +108,7 @@ function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant
                 ? { borderBottomLeftRadius: 24, borderBottomRightRadius: 24, overflow: "hidden" }
                 : null),
             ...(showShadow ? theme.shadow.md : null),
-        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", accessibleSizing: accessibleSizing, bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", accessibleSizing: accessibleSizing, bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
+        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
                             width: 4,
                             marginRight: 10,
                             marginVertical: 2,

package/dist/Navigation/Navigation.BottomNav.d.ts

@@ -44,8 +44,6 @@ export interface BottomNavProps {
     bordered?: boolean;
     /** Token for the active color. `primary` (default) or `accent` (e.g. green CTA brand). */
     activeColor?: "primary" | "accent";
-    /** Increase each tab's target to at least 48 points. */
-    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
@@ -54,6 +52,6 @@ export interface BottomNavProps {
  * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
  * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, shape, tone, indicator, bordered, activeColor, accessibleSizing, className, testID, }: BottomNavProps): import("react").JSX.Element;
+declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, shape, tone, indicator, bordered, activeColor, className, testID, }: BottomNavProps): import("react").JSX.Element;
 export default BottomNav;
 export { BottomNav };

package/dist/Navigation/Navigation.BottomNav.js

@@ -16,7 +16,7 @@ function resolveDarkSurface(theme) {
  * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
  * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", accessibleSizing = false, className, testID, }) {
+function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", className, testID, }) {
     const insets = useSafeAreaInsets();
     const theme = useTheme();
     const dark = tone === "dark";
@@ -55,10 +55,11 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
                 return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: true }, className: "flex-row items-center px-4 py-2", onPress: () => onChange(item.key), style: {
                         borderRadius: 999,
                         backgroundColor: activeTint,
-                        ...(accessibleSizing ? { minHeight: 48, minWidth: 48 } : null),
-                    }, children: [renderIconNode(item, true, onActive), item.label ? (_jsx(Typography.Text, { semibold: true, style: { color: onActive, fontSize: 13, marginLeft: 8 }, children: item.label })) : null] }, item.key));
+                        minHeight: 48,
+                        minWidth: 48,
+                    }, children: [renderIconNode(item, true, onActive), item.label ? (_jsx(Typography.Text, { semibold: true, style: { color: onActive, fontSize: 13, marginLeft: 8, flexShrink: 1 }, children: item.label })) : null] }, item.key));
             }
-            return (_jsx(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", className: "items-center justify-center px-3 py-2", onPress: () => onChange(item.key), style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, children: renderIconNode(item, false, inactiveColor) }, item.key));
+            return (_jsx(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", className: "items-center justify-center px-3 py-2", onPress: () => onChange(item.key), style: { minHeight: 48, minWidth: 48 }, children: renderIconNode(item, false, inactiveColor) }, item.key));
         }
         // Variants none / pill / bar / glow — vertical icon + optional indicator + optional label.
         const inPill = indicator === "pill" && active;
@@ -74,7 +75,7 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
             labelColor = theme.text.inverse;
         else if (active)
             labelColor = brandText;
-        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, children: [indicator === "bar" && active ? (_jsx(View, { style: {
+        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), style: { minHeight: 48, minWidth: 48 }, children: [indicator === "bar" && active ? (_jsx(View, { style: {
                         position: "absolute",
                         top: 0,
                         width: 26,
@@ -91,7 +92,7 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
                         shadowOpacity: 0.9,
                         shadowRadius: 5,
                         elevation: 4,
-                    } })) : null, showLabels && item.label && indicator !== "glow" ? (_jsx(Typography.Text, { numberOfLines: 1, semibold: active, style: { color: labelColor, fontSize: 11, marginTop: 3 }, children: item.label })) : null] }, item.key));
+                    } })) : null, showLabels && item.label && indicator !== "glow" ? (_jsx(Typography.Text, { semibold: active, style: { color: labelColor, fontSize: 11, marginTop: 3, textAlign: "center" }, children: item.label })) : null] }, item.key));
     };
     const renderCenterFab = () => (_jsx(Pressable, { accessibilityLabel: centerAction?.accessibilityLabel ?? "Acción", accessibilityRole: "button", className: "items-center justify-center", onPress: centerAction?.onPress, style: {
             width: 52,

package/dist/Navigation/Navigation.Header.d.ts

@@ -1,9 +1,9 @@
+import type { ImageSource } from "../utils/image.js";
 import React, { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface HeaderProps {
     title?: string;
     logo?: ReactNode;
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
     backButton?: boolean;
     handleBackButton?: () => void;
     className?: string;

package/dist/Navigation/Navigation.Menu.js

@@ -4,10 +4,12 @@ import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { cloneElement, useRef, useState } from "react";
 import { Dimensions, Modal, Pressable as RNPressable, View, } from "react-native";
 function Menu({ items, trigger, menuWidth = 220, testID }) {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const triggerRef = useRef(null);
     const [anchor, setAnchor] = useState(null);
     const open = () => {
@@ -21,7 +23,12 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
     const top = anchor ? anchor.y + anchor.height + 4 : 0;
     return (_jsxs(View, { collapsable: false, ref: triggerRef, testID: testID, children: [trigger ? (
             // eslint-disable-next-line react-hooks/refs
-            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
+            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, style: {
+                    minWidth: 48,
+                    minHeight: 48,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { accessibilityViewIsModal: true, className: "rounded-lg py-1", onAccessibilityEscape: close, style: {
                             position: "absolute",
                             top,
                             right,
@@ -35,10 +42,10 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
                                 return _jsx(View, { className: "my-1 h-px bg-border-default" }, `sep-${index}`);
                             }
                             const item = entry;
-                            return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { disabled: item.disabled }, className: "flex-row items-center gap-3 px-4 py-3", disabled: item.disabled, onPress: () => {
+                            return (_jsxs(Pressable, { accessibilityLabel: item.label, accessibilityRole: "menuitem", accessibilityState: { disabled: item.disabled }, className: "flex-row items-center gap-3 px-4 py-3", disabled: item.disabled, onPress: () => {
                                     close();
                                     item.onPress();
-                                }, children: [item.icon ? (_jsx(Icon, { color: item.destructive ? theme.danger : theme.icon.secondary, name: item.icon, size: 18 })) : null, _jsx(Typography.Text, { className: cn("flex-1 text-sm", item.destructive ? "text-danger" : "text-text-primary", item.disabled && "text-text-disabled"), children: item.label })] }, item.label));
+                                }, style: { minHeight: 48 }, children: [item.icon ? (_jsx(Icon, { color: item.destructive ? theme.danger : theme.icon.secondary, name: item.icon, size: 18 })) : null, _jsx(Typography.Text, { className: cn("flex-1 text-sm", item.destructive ? "text-danger" : "text-text-primary", item.disabled && "text-text-disabled"), children: item.label })] }, item.label));
                         }) }) }) })] }));
 }
 export default Menu;

package/dist/Navigation/Navigation.Search.d.ts

@@ -0,0 +1,41 @@
+import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
+import { type ReactNode } from "react";
+import { type SearchBarProps } from "./Navigation.SearchBar";
+import { type SearchSuggestionsProps } from "./Navigation.SearchSuggestions";
+export interface SearchRootProps {
+    children: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function Root({ children, className, testID }: SearchRootProps): import("react").JSX.Element;
+declare function Field(props: SearchBarProps): import("react").JSX.Element;
+export interface SearchFiltersProps {
+    children: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function Filters({ children, className, testID }: SearchFiltersProps): import("react").JSX.Element;
+export interface SearchFilterSheetProps {
+    children: ReactNode;
+    activeCount?: number;
+    title?: string;
+    triggerLabel?: string;
+    applyLabel?: string;
+    clearLabel?: string;
+    onApply: () => void;
+    onClear?: () => void;
+    testID?: string;
+}
+declare function FilterSheet({ children, activeCount, title, triggerLabel, applyLabel, clearLabel, onApply, onClear, testID, }: SearchFilterSheetProps): import("react").JSX.Element;
+declare function History(props: SearchHistoryProps): import("react").JSX.Element;
+declare function Suggestions(props: SearchSuggestionsProps): import("react").JSX.Element;
+declare const Search: {
+    Root: typeof Root;
+    Field: typeof Field;
+    Filters: typeof Filters;
+    FilterSheet: typeof FilterSheet;
+    History: typeof History;
+    Suggestions: typeof Suggestions;
+};
+export type { SearchBarProps, SearchHistoryProps, SearchSuggestionsProps };
+export default Search;

package/dist/Navigation/Navigation.Search.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Button from "../Actions/Actions.Button.js";
+import { FilterButtonGroup } from "../Actions/Actions.FilterButton.js";
+import Sheet from "../Dialog/Dialog.Sheet.js";
+import Icon from "../Display/Display.Icon.js";
+import SearchHistory from "../Display/Display.SearchHistory.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useState } from "react";
+import { View } from "react-native";
+import SearchBar from "./Navigation.SearchBar";
+import SearchSuggestions from "./Navigation.SearchSuggestions";
+function Root({ children, className, testID }) {
+    return (_jsx(View, { className: cn("gap-3", className), testID: testID, children: children }));
+}
+function Field(props) {
+    return _jsx(SearchBar, { ...props });
+}
+function Filters({ children, className, testID }) {
+    return (_jsx(FilterButtonGroup, { className: className, layout: "scroll", testID: testID, children: children }));
+}
+function FilterSheet({ children, activeCount = 0, title = "Filtros", triggerLabel = "Filtros", applyLabel = "Aplicar", clearLabel = "Limpiar", onApply, onClear, testID, }) {
+    const [visible, setVisible] = useState(false);
+    const theme = useTheme();
+    const countLabel = activeCount > 0 ? `, ${activeCount} activos` : "";
+    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { accessibilityLabel: `${triggerLabel}${countLabel}`, accessibilityRole: "button", className: "min-h-11 flex-row items-center justify-center gap-2 self-start rounded-full bg-bg-muted px-4", onPress: () => setVisible(true), style: { minHeight: 44 }, testID: testID ? `${testID}-trigger` : undefined, children: [_jsx(Icon, { color: theme.icon.secondary, name: "options-outline", size: 18 }), _jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: triggerLabel }), activeCount > 0 ? (_jsx(Typography.Text, { accessibilityLabel: `${activeCount} filtros activos`, className: "text-text-accent", variant: "caption", children: activeCount })) : null] }), _jsx(Sheet, { dismissOnBackdrop: true, footer: _jsxs(View, { className: "flex-row gap-3", children: [onClear ? (_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: onClear, title: clearLabel, variant: "secondary" }) })) : null, _jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: () => {
+                                    onApply();
+                                    setVisible(false);
+                                }, title: applyLabel }) })] }), onClose: () => setVisible(false), showCloseButton: true, testID: testID ? `${testID}-sheet` : undefined, title: title, visible: visible, children: children })] }));
+}
+function History(props) {
+    return _jsx(SearchHistory, { ...props });
+}
+function Suggestions(props) {
+    return _jsx(SearchSuggestions, { ...props });
+}
+const Search = {
+    Root,
+    Field,
+    Filters,
+    FilterSheet,
+    History,
+    Suggestions,
+};
+export default Search;

package/dist/Navigation/Navigation.SearchBar.d.ts

@@ -10,7 +10,6 @@ export interface SearchBarProps {
     onPress?: () => void;
     className?: string;
     testID?: string;
-    accessibleSizing?: boolean;
     accessibilityLabel?: string;
     clearAccessibilityLabel?: string;
     suggestions?: SearchSuggestionsProps;
@@ -19,5 +18,5 @@ export interface SearchBarProps {
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
-declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, accessibleSizing, accessibilityLabel, clearAccessibilityLabel, suggestions, }: SearchBarProps): import("react").JSX.Element;
+declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, accessibilityLabel, clearAccessibilityLabel, suggestions, }: SearchBarProps): import("react").JSX.Element;
 export default SearchBar;

package/dist/Navigation/Navigation.SearchBar.js

@@ -12,33 +12,30 @@ import { Keyboard, TextInput, View } from "react-native";
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
-function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, accessibleSizing = false, accessibilityLabel, clearAccessibilityLabel = "Limpiar", suggestions, }) {
+function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, accessibilityLabel, clearAccessibilityLabel = "Limpiar", suggestions, }) {
     const theme = useTheme();
     const [focused, setFocused] = useState(false);
     const body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full px-4", focused ? "bg-bg-card" : "bg-bg-muted", className), style: {
-            ...(accessibleSizing ? { minHeight: 48 } : { height: 44 }),
+            minHeight: 48,
+            minWidth: 48,
             borderWidth: 1,
             borderColor: focused ? theme.border.focus : "transparent",
-        }, children: [_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }) }), editable ? (_jsx(TextInput, { accessibilityLabel: accessibilityLabel ?? placeholder, autoFocus: autoFocus, className: cn("flex-1 text-text-primary", !accessibleSizing && "text-sm"), onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", selectionColor: theme.primary, style: accessibleSizing
-                    ? {
-                        ...typographyVariants.bodyReadable,
-                        fontFamily: resolveTextFontFamily("bodyReadable"),
-                        minHeight: 48,
-                        paddingVertical: 8,
-                    }
-                    : undefined, testID: testID ? `${testID}-input` : undefined, underlineColorAndroid: "transparent", value: value })) : (_jsx(Typography.Text, { className: cn("flex-1 text-text-tertiary", !accessibleSizing && "text-sm"), numberOfLines: accessibleSizing ? undefined : 1, variant: accessibleSizing ? "bodyReadable" : "body", children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: clearAccessibilityLabel, hitSlop: 8, onPress: () => {
+        }, children: [_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }) }), editable ? (_jsx(TextInput, { accessibilityLabel: accessibilityLabel ?? placeholder, autoFocus: autoFocus, className: "flex-1 text-text-primary", onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", selectionColor: theme.primary, style: {
+                    ...typographyVariants.bodyReadable,
+                    fontFamily: resolveTextFontFamily("bodyReadable"),
+                    minHeight: 48,
+                    paddingVertical: 8,
+                }, testID: testID ? `${testID}-input` : undefined, underlineColorAndroid: "transparent", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary", variant: "bodyReadable", children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: clearAccessibilityLabel, hitSlop: 8, onPress: () => {
                     onChangeText("");
                     onClear?.();
-                }, style: accessibleSizing
-                    ? {
-                        minHeight: 48,
-                        minWidth: 48,
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }
-                    : undefined, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
+                }, style: {
+                    minHeight: 48,
+                    minWidth: 48,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
     if (!editable && onPress) {
-        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel ?? placeholder, accessibilityRole: "search", onPress: onPress, testID: testID, children: body }));
+        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel ?? placeholder, accessibilityRole: "search", onPress: onPress, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: body }));
     }
     return (_jsxs(View, { testID: testID, children: [body, focused && suggestions ? (_jsx(SearchSuggestions, { ...suggestions, onSelect: (suggestion) => {
                     suggestions.onSelect(suggestion);

package/dist/Navigation/Navigation.SegmentedControl.d.ts

@@ -1,4 +1,6 @@
+import { Typography } from "../Typography/index.js";
 import { ComponentType } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface SegmentedOption<T extends string> {
     label: string;
     value: T;
@@ -9,6 +11,9 @@ export interface SegmentedOption<T extends string> {
         size?: number;
         color?: string;
     }>;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
 }
 export interface SegmentedControlProps<T extends string> {
     options: SegmentedOption<T>[];
@@ -20,11 +25,14 @@ export interface SegmentedControlProps<T extends string> {
      * - `"left"` — icon inline left of the label (compact, single-line).
      */
     iconLayout?: "top" | "left";
-    /** Increase each option's target to at least 48 points. */
-    accessibleSizing?: boolean;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    optionStyle?: StyleProp<ViewStyle>;
+    labelTextProps?: Partial<React.ComponentProps<typeof Typography.Text>>;
     className?: string;
     testID?: string;
 }
-declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, accessibleSizing, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
+declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, disabled, accessibilityLabel, style, optionStyle, labelTextProps, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export default SegmentedControl;
 export { SegmentedControl };

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -4,28 +4,41 @@ import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-function SegmentedControl({ options, value, onChange, iconLayout = "top", accessibleSizing = false, className, testID, }) {
+function SegmentedControl({ options, value, onChange, iconLayout = "top", disabled = false, accessibilityLabel, style, optionStyle, labelTextProps, className, testID, }) {
     const theme = useTheme();
     const hasIcons = options.some((o) => o.icon || o.customIcon);
-    return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row bg-bg-muted rounded-lg p-1 gap-1", className), testID: testID, children: options.map((option) => {
+    return (_jsx(View, { accessibilityLabel: accessibilityLabel, accessibilityRole: "tablist", className: cn("flex-row bg-bg-muted rounded-lg p-1 gap-1", className), style: style, testID: testID, children: options.map((option) => {
             const selected = option.value === value;
+            const isDisabled = disabled || !!option.disabled;
             const iconColor = selected ? theme.text.primary : theme.text.secondary;
             const hasIcon = !!(option.icon || option.customIcon);
             const inline = hasIcons && iconLayout === "left";
-            return (_jsxs(TouchableOpacity, { accessibilityLabel: option.label, accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, onPress: () => onChange(option.value), style: {
-                    flex: 1,
-                    minHeight: accessibleSizing ? 48 : undefined,
-                    flexDirection: inline ? "row" : "column",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: hasIcon ? 4 : 0,
-                    paddingVertical: hasIcons && !inline ? 8 : 8,
-                    paddingHorizontal: 4,
-                    borderRadius: 8,
-                    ...(selected
-                        ? { backgroundColor: theme.bg.card, ...theme.shadow.sm }
-                        : undefined),
-                }, children: [hasIcon ? (_jsx(Icon, { color: iconColor, customIcon: option.customIcon, name: option.icon, size: 16, type: option.customIcon ? "custom" : "ionicons" })) : null, _jsx(Typography.Text, { numberOfLines: 1, semibold: selected, style: { color: iconColor, fontSize: 12 }, variant: "caption", children: option.label })] }, option.value));
+            const baseStyle = {
+                flex: 1,
+                minHeight: 48,
+                minWidth: 48,
+                flexDirection: inline ? "row" : "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: hasIcon ? 4 : 0,
+                paddingVertical: 8,
+                paddingHorizontal: 4,
+                borderRadius: 8,
+                ...(selected ? { backgroundColor: theme.bg.card, ...theme.shadow.sm } : undefined),
+                opacity: isDisabled ? 0.5 : 1,
+            };
+            return (_jsxs(TouchableOpacity, { accessibilityHint: option.accessibilityHint, accessibilityLabel: option.accessibilityLabel ?? option.label, accessibilityRole: "tab", accessibilityState: isDisabled ? { selected, disabled: true } : { selected }, activeOpacity: 0.7, disabled: isDisabled || undefined, hitSlop: 0, onPress: () => {
+                    if (!isDisabled)
+                        onChange(option.value);
+                }, style: optionStyle ? [baseStyle, optionStyle] : baseStyle, children: [hasIcon ? (_jsx(Icon, { color: iconColor, customIcon: option.customIcon, name: option.icon, size: 16, type: option.customIcon ? "custom" : "ionicons" })) : null, _jsx(Typography.Text, { ...labelTextProps, semibold: labelTextProps?.semibold ?? selected, style: [
+                            {
+                                color: iconColor,
+                                fontSize: 14,
+                                textAlign: "center",
+                                flexShrink: 1,
+                            },
+                            labelTextProps?.style,
+                        ], variant: labelTextProps?.variant ?? "caption", children: option.label })] }, option.value));
         }) }));
 }
 export default SegmentedControl;

package/dist/Navigation/index.d.ts

@@ -12,16 +12,25 @@ import Steps from "./Navigation.Steps.js";
 import TabIcon from "./Navigation.TabIcon.js";
 export type { AppBarBackground } from "./Navigation.AppBar.js";
 export type { MenuSectionProps } from "./Navigation.MenuSection.js";
+export type { SearchFilterSheetProps, SearchFiltersProps, SearchRootProps, } from "./Navigation.Search.js";
 export type { SearchBarProps } from "./Navigation.SearchBar.js";
 export type { SearchSuggestion, SearchSuggestionsProps, } from "./Navigation.SearchSuggestions.js";
 export declare const Navigation: {
-    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, accessibleSizing, topSpacing, background, bottomDivider, className, testID, }: import("./Navigation.AppBar.js").AppBarProps) => import("react").JSX.Element) & {
-        Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, accessibleSizing, testID, }: import("./Navigation.AppBar.js").AppBarActionProps) => import("react").JSX.Element;
+    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: import("./Navigation.AppBar.js").AppBarProps) => import("react").JSX.Element) & {
+        Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("./Navigation.AppBar.js").AppBarActionProps) => import("react").JSX.Element;
     };
     BottomNav: typeof BottomNav;
     CollapsingHeader: typeof CollapsingHeader;
     FloatingBar: typeof FloatingBar;
     SearchBar: typeof SearchBar;
+    Search: {
+        Root: ({ children, className, testID }: import("./Navigation.Search.js").SearchRootProps) => import("react").JSX.Element;
+        Field: (props: import("./Navigation.SearchBar.js").SearchBarProps) => import("react").JSX.Element;
+        Filters: ({ children, className, testID }: import("./Navigation.Search.js").SearchFiltersProps) => import("react").JSX.Element;
+        FilterSheet: ({ children, activeCount, title, triggerLabel, applyLabel, clearLabel, onApply, onClear, testID, }: import("./Navigation.Search.js").SearchFilterSheetProps) => import("react").JSX.Element;
+        History: (props: import("./Navigation.Search.js").SearchHistoryProps) => import("react").JSX.Element;
+        Suggestions: (props: import("./Navigation.SearchSuggestions.js").SearchSuggestionsProps) => import("react").JSX.Element;
+    };
     SearchSuggestions: typeof SearchSuggestions;
     Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("./Navigation.Header.js").HeaderProps) => import("react").JSX.Element;
     HeaderToolbar: typeof HeaderToolbar;

package/dist/Navigation/index.js

@@ -7,6 +7,7 @@ import HeaderToolbar from "./Navigation.HeaderToolbar.js";
 import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
+import Search from "./Navigation.Search.js";
 import SearchBar from "./Navigation.SearchBar.js";
 import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import SegmentedControl from "./Navigation.SegmentedControl.js";
@@ -20,6 +21,7 @@ export const Navigation = {
     CollapsingHeader,
     FloatingBar,
     SearchBar,
+    Search,
     SearchSuggestions,
     Header,
     HeaderToolbar,