import { bool } from "prop-types";
import styled from "styled-components";
import tokens from "@gympass/yoga-tokens";
import { media } from "@gympass/yoga-helpers";
const { breakpoints } = tokens;
const defaultProps = {
  xxs: void 0,
  xs: void 0,
  sm: void 0,
  md: void 0,
  lg: void 0,
  xl: void 0,
  xxl: void 0,
  xxxl: void 0,
  "xxs-start": void 0,
  "xs-start": void 0,
  "sm-start": void 0,
  "md-start": void 0,
  "lg-start": void 0,
  "xl-start": void 0,
  "xxl-start": void 0,
  "xxxl-start": void 0
};
const Hide = styled.div`
  ${(props = defaultProps) => Object.keys(props).filter((prop) => props[prop] && Object.keys(breakpoints).includes(prop)).map((breakpoint) => media.hide[breakpoint])}

  ${(props) => Object.keys(props).filter((prop) => props[`${prop}-start`]).map((breakpoint) => media.hide[`${breakpoint}-start`])}
`;
Hide.propTypes = {
  xxs: bool,
  xs: bool,
  sm: bool,
  md: bool,
  lg: bool,
  xl: bool,
  xxl: bool,
  xxxl: bool,
  "xxs-start": bool,
  "xs-start": bool,
  "sm-start": bool,
  "md-start": bool,
  "lg-start": bool,
  "xl-start": bool,
  "xxl-start": bool,
  "xxxl-start": bool
};
Hide.defaultProps = {
  xxs: void 0,
  xs: void 0,
  sm: void 0,
  md: void 0,
  lg: void 0,
  xl: void 0,
  xxl: void 0,
  xxxl: void 0,
  "xxs-start": void 0,
  "xs-start": void 0,
  "sm-start": void 0,
  "md-start": void 0,
  "lg-start": void 0,
  "xl-start": void 0,
  "xxl-start": void 0,
  "xxxl-start": void 0
};
var Hide_default = Hide;
export {
  Hide_default as default
};
