@spark-web/utils/internal/dist/spark-web-utils-internal.cjs.dev.js

--- title: Utilities isExperimentalPackage: true ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');

var buildDataAttributes = function buildDataAttributes() {
  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var keys = Object.keys(data);
  var dataAttributes = {};
  for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
    var key = _keys[_i];
    /**
     * NOTE: lowercase keys to support property value shorthand
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015
     *
     * @example
     * const { testId } = props
     * buildDataAttributes({ testId }) // data-testid="value"
     *
     */
    dataAttributes["data-".concat(key.toLocaleLowerCase())] = data[key];
  }
  return dataAttributes;
};

var base = {
  margin: 0,
  padding: 0,
  border: 0,
  boxSizing: 'border-box',
  fontSize: '100%',
  font: 'inherit',
  verticalAlign: 'baseline',
  WebkitTapHighlightColor: 'transparent'
};

// HTML5 display-role reset for older browsers
var block = {
  display: 'block'
};
var body = {
  lineHeight: 1
};
var list = {
  listStyle: 'none'
};
var quote = {
  quotes: 'none'
};
var sup = {
  verticalAlign: 'super'
};
var table = {
  borderCollapse: 'collapse',
  borderSpacing: 0
};
var transparent = {
  backgroundColor: 'transparent'
};
var field = Object.assign({}, block, transparent, {
  appearance: 'none'
});

// Custom reset rules
var mark = Object.assign({}, transparent, {
  color: 'inherit'
});
var select = Object.assign({}, field, {
  ':disabled': {
    opacity: 1
  },
  '&::-ms-expand': {
    display: 'none'
  }
});
var input = Object.assign({}, field, {
  '&::-ms-clear': {
    display: 'none'
  },
  '&::-webkit-search-cancel-button': {
    WebkitAppearance: 'none'
  }
});
var button = Object.assign({}, transparent);
var a = {
  textDecoration: 'none',
  color: 'inherit'
};
var element = {
  article: block,
  aside: block,
  sup: sup,
  details: block,
  figcaption: block,
  figure: block,
  footer: block,
  header: block,
  hgroup: block,
  menu: block,
  nav: block,
  section: block,
  ul: list,
  ol: list,
  blockquote: quote,
  q: quote,
  body: body,
  a: a,
  table: table,
  mark: mark,
  select: select,
  button: button,
  textarea: field,
  input: input
};

// TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
// would strictly accept HTML elements
function resetElementStyles(keyOrComponent) {
  if (typeof keyOrComponent !== 'string') {
    return base;
  }
  if (keyOrComponent in element) {
    var elementStyles = element[keyOrComponent];
    return _objectSpread(_objectSpread({}, base), elementStyles);
  }
  return base;
}

exports.buildDataAttributes = buildDataAttributes;
exports.resetElementStyles = resetElementStyles;