@bianic-ui/system/dist/cjs/jsx.js

Bianic UI system primitives

"use strict";

exports.__esModule = true;
exports["default"] = exports.jsx = void 0;

var _utils = require("@bianic-ui/utils");

var _core = require("@emotion/core");

var _styledSystem = require("@bianic-ui/styled-system");

function getCSS(props) {
  if (!props.sx && !props.css) return undefined;
  /**
   * Leverage emotion's css function interpolation to access the theme
   */

  return function (theme) {
    /**
     * process the theme-aware cx prop
     */
    var sxStyles = (0, _styledSystem.css)(props.sx)(theme);
    /**
     * process the normal emotion's css prop
     * (NB: This is not theme-aware, and you can't use shorthand style props)
     */

    var cssStyles = (0, _utils.runIfFn)(props.css, theme);
    /**
     * return an array value and allow emotion do the rest.
     * By default, emotion can handle array style values
     */

    return [cssStyles, sxStyles];
  };
}

function parse(props) {
  if (!props) return null;
  var computedProps = {};

  for (var prop in props) {
    if (prop === "sx") continue;
    computedProps[prop] = props[prop];
  }

  var css = getCSS(props);
  if (css) computedProps.css = css;
  return computedProps;
}

var jsx = function jsx(type, props) {
  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    children[_key - 2] = arguments[_key];
  }

  return _core.jsx.apply(undefined, [type, parse(props)].concat(children));
};

exports.jsx = jsx;
var _default = jsx;
exports["default"] = _default;
//# sourceMappingURL=jsx.js.map