Thank you for providing the complete content. Here's the revised version:

mq

The mq object aggregates four functions that facilitate working with media queries. The function names are self-explanatory and offer intuitive usage:

• mq.between: Generates a media query string for a range of breakpoints.
• mq.from: Generates a media query string starting from a specific breakpoint.
• mq.upTo: Generates a media query string up to a certain breakpoint.
• mq.bp: Generates a media query string for an exact breakpoint.

All string arguments can reference either a key from the breakpoints object or a valid CSS value, such as 300px. Numeric values are treated as em units. However, it's important to note that mq.bp must match a key from the breakpoints object.

between(breakpoint1: string | number, breakpoint2: string | number, style: any)

from(breakpoint: string | number, style: any)

upTo(breakpoint: string | number, style: any)

bp(breakpoint: string | number, style: any)

Usage example:

import { mq } from 'styled-gen';
import styled, { css } from 'styled-components';

const DivMd = styled.div`
  display: none;

  ${mq.bp('md', css`
    display: block;
  `)}
`;

const DivXs = styled.div`
  display: block;

  ${mq.bp('sm', css`
    display: none;
  `)}
`;

export const MyComp = () => (
  <>
    <DivMd>
      <h3>This wrapper div will be visible only from the `md` breakpoint and above.</h3>
    </DivMd>

    <DivXs>
      <h3>This wrapper div will only be visible below the `sm` breakpoint.</h3>
    </DivXs>
  </>
);

In the example above, mq.bp is used to conditionally apply styles based on specific breakpoints. The DivMd component will only be displayed from the md breakpoint and above, while the DivXs component will only be visible below the sm breakpoint.

Please review the revised version, and let me know if you have any further modifications or if there's anything else I can assist you with.