/**
 * Hook to detect if the current viewport is narrow (below specified breakpoint).
 * Uses the same pattern as ToastContainer with window.innerWidth and resize event.
 *
 * According to MFUI Guidelines (Screen Layout and Patterns - Responsive and Breakpoints):
 * - Wide layout components (e.g., GlobalHeader): 1200px breakpoint
 * - Other mobile-responsive components: 600px breakpoint (sm breakpoint in panda.config.ts)
 *
 * @param breakpoint - The breakpoint width in pixels. Default is 600px (sm breakpoint).
 *                     Use 1200px for wide layout components like GlobalHeader.
 *
 * @returns true if the viewport width is less than the breakpoint, false otherwise
 *
 * @example
 * ```tsx
 * // Default 600px breakpoint (most mobile components)
 * function MyComponent() {
 *   const isNarrow = useIsNarrowViewport();
 *
 *   return (
 *     <div>
 *       {isNarrow ? 'Narrow Viewport' : 'Wide Viewport'}
 *     </div>
 *   );
 * }
 *
 * // 1200px breakpoint (GlobalHeader, wide layout components)
 * function WideLayoutComponent() {
 *   const isNarrow = useIsNarrowViewport(1200);
 *
 *   return (
 *     <div>
 *       {isNarrow ? 'Below 1200px' : 'Above 1200px'}
 *     </div>
 *   );
 * }
 * ```
 */
export declare const useIsNarrowViewport: (breakpoint?: number) => boolean;