@spark-web/hidden/dist/spark-web-hidden.esm.js

--- title: Hidden storybookPath: accessibility-hidden--default isExperimentalPackage: false ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import { css } from '@emotion/css';
import { Box } from '@spark-web/box';
import { useHeadingContext } from '@spark-web/heading';
import { useTextContext } from '@spark-web/text';
import { useTheme } from '@spark-web/theme';
import { buildDataAttributes } from '@spark-web/utils/internal';
import { forwardRefWithAs } from '@spark-web/utils/ts';
import { jsx } from 'react/jsx-runtime';

/** Conditionally display content for different screen sizes. */
var Hidden = forwardRefWithAs(function (_ref, ref) {
  var above = _ref.above,
      as = _ref.as,
      below = _ref.below,
      children = _ref.children,
      data = _ref.data,
      inlineProp = _ref.inline,
      on = _ref.on;
  var theme = useTheme();

  var _theme$utils$responsi = theme.utils.responsiveRange({
    above: above,
    below: below
  }),
      _theme$utils$responsi2 = _slicedToArray(_theme$utils$responsi, 4),
      hiddenOnMobile = _theme$utils$responsi2[0],
      hiddenOnTablet = _theme$utils$responsi2[1],
      hiddenOnDesktop = _theme$utils$responsi2[2],
      hiddenOnWide = _theme$utils$responsi2[3];

  var hiddenOnScreen = on === 'screen';
  var conditionalStyles = on ? _defineProperty({}, "@media ".concat(on), {
    display: 'none !important'
  }) : null;
  var inText = Boolean(useTextContext());
  var inHeading = Boolean(useHeadingContext());
  var inline = inlineProp !== null && inlineProp !== void 0 ? inlineProp : inText || inHeading;
  var display = inline ? 'inline' : 'block';
  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
    as: as || (inline ? 'span' : 'div'),
    ref: ref,
    className: css([hiddenOnScreen ? null : theme.utils.resolveResponsiveProps({
      display: theme.utils.optimizeResponsiveArray([hiddenOnMobile ? 'none' : display, hiddenOnTablet ? 'none' : display, hiddenOnDesktop ? 'none' : display, hiddenOnWide ? 'none' : display])
    }), conditionalStyles])
  }, data ? buildDataAttributes(data) : undefined), {}, {
    children: children
  }));
});

export { Hidden };