import { useContext , useMemo } from "react" ; import { ColorMode , ColorModeContext } from "./theme/color" ; import { BreakpointKey , breakpoint , maxWidth , minWidth , betweenWidth , } from "./theme/media" ; import { useMedia } from "@architus/lib/hooks" ; /**
 * Gets the current active color mode.
 * **Note**: care should be taken when using this to render on the server,
 * as there may be a flash upon initially rendering
 */ export function useColorMode ( ) { return useContext ( ColorModeContext ) . mode ; } param b export function useUp ( b ) { const breakpoints = useMemo ( ( ) => [ minWidth ( breakpoint ( b ) ) ] , [ b ] ) ; const values = useMemo ( ( ) => [ true ] , [ ] ) ; return useMedia ( breakpoints , values , false ) ; } param b export function useDown ( b ) { const breakpoints = useMemo ( ( ) => [ maxWidth ( breakpoint ( b ) ) ] , [ b ] ) ; const values = useMemo ( ( ) => [ true ] , [ ] ) ; return useMedia ( breakpoints , values , false ) ; } param a param b export function useBetween ( a , b ) { const breakpoints = useMemo ( ( ) => [ betweenWidth ( breakpoint ( a ) , breakpoint ( b ) ) ] , [ a , b ] ) ; const values = useMemo ( ( ) => [ true ] , [ ] ) ; return useMedia ( breakpoints , values , false ) ; }