import { jsx } from "react/jsx-runtime";
import { useContext } from "react";
import { Box } from "../Box/Box.mjs";
import { TextContext } from "../Accordion/AccordionItem.mjs";
import { HeadingContext } from "../Heading/Heading.mjs";
import { breakpointNames } from "../../css/breakpoints.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { hiddenOnPrint } from "./Hidden.css.mjs";
import { optimizeResponsiveArray } from "../Column/Column.mjs";
const resolveResponsiveRangeProps = (props) => {
  const { above, below } = props;
  if (!above && !below) {
    return [false, false, false, false];
  }
  const startIndex = above ? breakpointNames.indexOf(above) + 1 : 0;
  const endIndex = below ? breakpointNames.indexOf(below) - 1 : breakpointNames.length - 1;
  const range = breakpointNames.slice(startIndex, endIndex + 1);
  const includeMobile = range.indexOf("mobile") >= 0;
  const includeTablet = range.indexOf("tablet") >= 0;
  const includeDesktop = range.indexOf("desktop") >= 0;
  const includeWide = range.indexOf("wide") >= 0;
  return [includeMobile, includeTablet, includeDesktop, includeWide];
};
const Hidden = ({
  children,
  component,
  above,
  below,
  screen,
  print,
  inline: inlineProp,
  data,
  ...restProps
}) => {
  if (process.env.NODE_ENV === "development" && screen) {
    console.warn(
      `You used the "screen" prop on Hidden, but this probably doesn't do what you expect. If you're trying to provide content to screen readers without rendering it to the screen, use the <HiddenVisually> component instead. The "screen" prop is likely to be deprecated in a future release.`
    );
  }
  const inText = Boolean(useContext(TextContext));
  const inHeading = Boolean(useContext(HeadingContext));
  const hiddenOnScreen = Boolean(screen);
  const hiddenOnPrint$1 = Boolean(print);
  const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = resolveResponsiveRangeProps({ above, below });
  const inline = inlineProp ?? (inText || inHeading);
  const display = inline ? "inline" : "block";
  return /* @__PURE__ */ jsx(
    Box,
    {
      display: hiddenOnScreen ? "none" : optimizeResponsiveArray([
        hiddenOnMobile ? "none" : display,
        hiddenOnTablet ? "none" : display,
        hiddenOnDesktop ? "none" : display,
        hiddenOnWide ? "none" : display
      ]),
      className: hiddenOnPrint$1 ? hiddenOnPrint : void 0,
      component: component || (inline ? "span" : "div"),
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children
    }
  );
};
export {
  Hidden,
  resolveResponsiveRangeProps
};
