@intility/bifrost-react/dist/components/Breakpoint/Breakpoint.js

React library for Intility's design system, Bifrost.

import { c as _c } from "react-compiler-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
/** Element that will only be displayed for certain screen sizes:
 *
 * - small = 600px
 * - medium = 960px
 * - large = 1280px
 * - xl = 1600px
 * - xxl = 1920px
 *
 * @see https://bifrost.intility.com/react/breakpoint
 *
 * @example
 * <Breakpoint to='small'>displayed up to small (0px-599px)</Breakpoint>
 * <Breakpoint from='small' to='medium'>displayed between small and medium (600px-959px)</Breakpoint>
 * <Breakpoint from='medium'>displayed for medium and larger (960px +)</Breakpoint>
 */
export default function Breakpoint(t0) {
  const $ = _c(6);
  const {
    children,
    from,
    to
  } = t0;
  let classes;
  if ($[0] !== from || $[1] !== to) {
    classes = [];
    if (from) {
      classes.push("from-" + from);
    }
    if (to) {
      classes.push("to-" + to);
    }
    $[0] = from;
    $[1] = to;
    $[2] = classes;
  } else {
    classes = $[2];
  }
  const t1 = classes.join(" ");
  let t2;
  if ($[3] !== children || $[4] !== t1) {
    t2 = /*#__PURE__*/_jsx("div", {
      className: t1,
      children: children
    });
    $[3] = children;
    $[4] = t1;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  return t2;
}