"use strict";

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _index = require("../../index");

var _hide = _interopRequireDefault(require("./hide.mdx"));

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

var _default = {
  title: 'Utilities/Responsive Hide',
  parameters: {
    docs: {
      page: _hide["default"]
    }
  }
};
exports["default"] = _default;
var StyledBox = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "StyledBox",
  componentId: "sc-1udj5no-0"
})(["background:", ";border-radius:10px;color:", ";"], (0, _index.getPaletteColor)('brand-secondary-bg'), (0, _index.getPaletteColor)('brand-secondary-fg'));

var Demo = function Demo() {
  return /*#__PURE__*/_react["default"].createElement(_index.Box, {
    spacing: ['mv4', 'mhauto', 'p2']
  }, /*#__PURE__*/_react["default"].createElement(StyledBox, {
    hide: "sm",
    spacing: ['p2', 'm1']
  }, "I am hidden in the small breakpoint"), /*#__PURE__*/_react["default"].createElement(StyledBox, {
    hide: "xl",
    spacing: ['p2', 'm1']
  }, "I am hidden in the extra large breakpoint"), /*#__PURE__*/_react["default"].createElement(StyledBox, {
    hide: ['sm', 'xl'],
    spacing: ['p2', 'm1']
  }, "I am hidden in small and extra large breakpoints"));
};

exports.Demo = Demo;