@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/react';
import { useTheme } from '@spark-web/theme';
import { jsx } from '@emotion/react/jsx-runtime';

var directionMap = {
  row: ['minHeight', 'width'],
  column: ['minWidth', 'height']
};

// TODO: handle dark backgrounds

var Divider = function Divider(_ref) {
  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 = _defineProperty(_defineProperty({
    alignSelf: 'stretch',
    // 1.
    backgroundColor: theme.border.color[color],
    flexShrink: 0
  }, crossAxis, theme.border.width[width]), mainAxis, '100%');
  return jsx("div", {
    css: css(styles)
  });
};

export { Divider };