eip-components-web/build/lib/styled-responsive.js

EIP components

'use client';
import { css } from 'styled-components';
// Simple breakpoints for web
const breakpoints = {
    mobile: '768px',
    tablet: '1024px',
    desktop: '1200px'
};
// Simplified responsive utility for web-only usage
export const styledResponsive = {
    mobile: (styles) => css `
    @media (max-width: ${breakpoints.mobile}) {
      ${styles}
    }
  `,
    tablet: (styles) => css `
    @media (max-width: ${breakpoints.tablet}) {
      ${styles}
    }
  `,
    desktop: (styles) => css `
    @media (min-width: ${breakpoints.desktop}) {
      ${styles}
    }
  `,
    // Additional utility functions
    between: (min, max) => (styles) => css `
    @media (min-width: ${min}) and (max-width: ${max}) {
      ${styles}
    }
  `,
    above: (breakpoint) => (styles) => css `
    @media (min-width: ${breakpoint}) {
      ${styles}
    }
  `,
    below: (breakpoint) => (styles) => css `
    @media (max-width: ${breakpoint}) {
      ${styles}
    }
  `
};
export default styledResponsive;
//# sourceMappingURL=styled-responsive.js.map