@spark-web/hidden/dist/spark-web-hidden.cjs.prod.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 react = require('@emotion/react');
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('@emotion/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 jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
    as: as || (inline ? 'span' : 'div'),
    ref: ref,
    css: react.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;