@spark-web/divider/dist/spark-web-divider.esm.js

--- title: Divider storybookPath: page-layout-divider--default isExperimentalPackage: false ---

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import { css } from '@emotion/css';
import { useTheme } from '@spark-web/theme';
import { jsx } from 'react/jsx-runtime';

var directionMap = {
  row: ['minHeight', 'width'],
  column: ['minWidth', 'height']
}; // TODO: handle dark backgrounds

var Divider = function Divider(_ref) {
  var _styles;

  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'standard' : _ref$color,
      vertical = _ref.vertical,
      _ref$width = _ref.width,
      width = _ref$width === void 0 ? 'standard' : _ref$width;
  var theme = useTheme();
  var direction = vertical ? 'row' : 'column';

  var _directionMap$directi = _slicedToArray(directionMap[direction], 2),
      mainAxis = _directionMap$directi[0],
      crossAxis = _directionMap$directi[1];

  var styles = (_styles = {
    alignSelf: 'stretch',
    // 1.
    backgroundColor: theme.border.color[color],
    flexShrink: 0
  }, _defineProperty(_styles, crossAxis, theme.border.width[width]), _defineProperty(_styles, mainAxis, '100%'), _styles);
  return /*#__PURE__*/jsx("div", {
    className: css(styles)
  });
};

export { Divider };