@octopusdeploy/design-system-components/dist/src/hooks/breakpoints.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useIsMobile = useIsMobile;
exports.useIsLegacySmallScreen = useIsLegacySmallScreen;
exports.useIsLargerThanIpadResolution = useIsLargerThanIpadResolution;
exports.useIsDesktop = useIsDesktop;
const react_responsive_1 = require("react-responsive");
/**
 * These breakpoints are currently not in line with the design system.
 * These are instead in line with existing usages.
 * We need to account for these existing usages when changing these.breakpoints.
 */
function useIsMobile() {
    return (0, react_responsive_1.useMediaQuery)({ query: `(max-width: 430px)` }); // iPhone 14 Pro Max
}
function useIsLegacySmallScreen() {
    return (0, react_responsive_1.useMediaQuery)({ query: `(max-width: 37.4rem)` }); // @screen-sm from portal
}
function useIsLargerThanIpadResolution() {
    return (0, react_responsive_1.useMediaQuery)({ query: `(min-width: 821px)` }); // iPad Air
}
function useIsDesktop() {
    return (0, react_responsive_1.useMediaQuery)({ query: `(min-width: 1440px)` });
}