@spark-web/hidden/dist/spark-web-hidden.cjs.dev.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var css = require('@emotion/css');
var box = require('@spark-web/box');
var heading = require('@spark-web/heading');
var text = require('@spark-web/text');
var theme = require('@spark-web/theme');
var internal = require('@spark-web/utils/internal');
var ts = require('@spark-web/utils/ts');
var jsxRuntime = require('react/jsx-runtime');

/** Conditionally display content for different screen sizes. */
var Hidden = ts.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$1 = theme.useTheme();

  var _theme$utils$responsi = theme$1.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(text.useTextContext());
  var inHeading = Boolean(heading.useHeadingContext());
  var inline = inlineProp !== null && inlineProp !== void 0 ? inlineProp : inText || inHeading;
  var display = inline ? 'inline' : 'block';
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
    as: as || (inline ? 'span' : 'div'),
    ref: ref,
    className: css.css([hiddenOnScreen ? null : theme$1.utils.resolveResponsiveProps({
      display: theme$1.utils.optimizeResponsiveArray([hiddenOnMobile ? 'none' : display, hiddenOnTablet ? 'none' : display, hiddenOnDesktop ? 'none' : display, hiddenOnWide ? 'none' : display])
    }), conditionalStyles])
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
    children: children
  }));
});

exports.Hidden = Hidden;