import { h } from '@stencil/core';
import Breakpoint from './Breakpoint';
export default { title: 'Breakpoint' };
export const xsOnly = () => h(Breakpoint, { xs: true, sm: false }, "This item shows when screen size is under 480px");
export const mdOnly = () => h(Breakpoint, { sm: false, md: true, lg: false }, "This item shows when screen size is between 768px and 992px");
export const lgOnly = () => h(Breakpoint, { md: false, lg: true }, "This item shows when screen size is above 992px");
export const notXs = () => h(Breakpoint, { xs: false, sm: true }, "This item shows when screen size is above 480px");
export const notMd = () => h(Breakpoint, { xs: true, sm: true, md: false, lg: true }, "This item shows when screen size is smaller than 768px or greater than 992px");
