@asphalt-react/crater/dist/index.cjs

Crater

'use strict';

var React = require('react');
var PropTypes = require('prop-types');
var cn = require('classnames');
var context = require('@asphalt-react/context');

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".Crater__wWAoJ {\n  /* default custom properties */\n  --crater-background: var(--static-surface-tertiary, #e8ebef);\n  --crater-border-radius: var(--roundness-container-S, 0.5rem);\n  --crater-font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --crater-color: var(--content-primary, #2d2e34);\n\n  background-color: var(--crater-background);\n  border-radius: var(--crater-border-radius);\n  font: var(--crater-font);\n  color: var(--crater-color);\n}\n\n.s__zxn6b {\n  padding: 1rem;\n}\n\n.m__aX1vU {\n  padding: 1.5rem;\n}\n\n.l__A-kj3 {\n  padding: 2.25rem;\n}\n\n.bezelless__cpDRj {\n  padding: 0;\n}\n";
var styles = {"Crater":"Crater__wWAoJ","s":"s__zxn6b","m":"m__aX1vU","l":"l__A-kj3","bezelless":"bezelless__cpDRj"};
var stylesheet=".Crater__wWAoJ {\n  /* default custom properties */\n  --crater-background: var(--static-surface-tertiary, #e8ebef);\n  --crater-border-radius: var(--roundness-container-S, 0.5rem);\n  --crater-font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --crater-color: var(--content-primary, #2d2e34);\n\n  background-color: var(--crater-background);\n  border-radius: var(--crater-border-radius);\n  font: var(--crater-font);\n  color: var(--crater-color);\n}\n\n.s__zxn6b {\n  padding: 1rem;\n}\n\n.m__aX1vU {\n  padding: 1.5rem;\n}\n\n.l__A-kj3 {\n  padding: 2.25rem;\n}\n\n.bezelless__cpDRj {\n  padding: 0;\n}\n";
styleInject(css_248z);

const Crater=({children,size="m",bezel=true,...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles.Crater,styles[size],{[styles.bezelless]:!bezel})}),children)};Crater.displayName="Crater";Crater.propTypes={children:PropTypes.node.isRequired,bezel:PropTypes.bool,size:PropTypes.oneOf(["s","m","l"])};Crater.defaultProps={bezel:true,size:"m"};

exports.Crater = Crater;