@codegouvfr/react-dsfr/fr/breakpoints.d.ts

French State Design System React integration library

import type { BreakpointKeys } from "./generatedFromCss/breakpoints";
export type { BreakpointKeys };
export declare const breakpoints: {
    up: (key: Exclude<BreakpointKeys, "xs">) => "@media (min-width:36em)" | "@media (min-width:48em)" | "@media (min-width:62em)" | "@media (min-width:78em)";
    down: (key: Exclude<BreakpointKeys, "xs">) => `@media (max-width:${number}em)`;
    between: (start: BreakpointKeys, end: BreakpointKeys) => `@media (min-width:0em) and (max-width:${number}em)` | `@media (min-width:36em) and (max-width:${number}em)` | `@media (min-width:48em) and (max-width:${number}em)` | `@media (min-width:62em) and (max-width:${number}em)` | `@media (min-width:78em) and (max-width:${number}em)`;
    only: (key: BreakpointKeys) => "@media (min-width:36em)" | "@media (min-width:48em)" | "@media (min-width:62em)" | "@media (min-width:78em)" | `@media (min-width:0em) and (max-width:${number}em)` | `@media (min-width:36em) and (max-width:${number}em)` | `@media (min-width:48em) and (max-width:${number}em)` | `@media (min-width:62em) and (max-width:${number}em)` | `@media (min-width:78em) and (max-width:${number}em)`;
    not: (key: BreakpointKeys) => string;
};