"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.visibility = exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _default = {
  title: 'Utilities/Visibility',
  parameters: {
    docs: {
      source: {
        type: 'dynamic'
      }
    }
  }
}; // an example for responsive visibility -- referenced in doc site

exports.default = _default;

var visibility = function visibility() {
  return /*#__PURE__*/_react.default.createElement("div", null, ['sm', 'md', 'lg', 'xl'].map(function (breakpoint) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "ds-u-padding--1 ds-u-border--1",
      key: breakpoint
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "ds-u-".concat(breakpoint, "-visibility--hidden ds-u-color--muted")
    }, "Hidden on ", breakpoint, " screens and larger"), /*#__PURE__*/_react.default.createElement("div", {
      className: "ds-u-visibility--hidden ds-u-".concat(breakpoint, "-visibility--visible")
    }, "Visible on ", breakpoint, " screens and larger"));
  }));
};

exports.visibility = visibility;