@spark-web/divider/dist/spark-web-divider.cjs.dev.js

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

'use strict';

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

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var react = require('@emotion/react');
var theme = require('@spark-web/theme');
var jsxRuntime = require('@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$1 = 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$1.border.color[color],
    flexShrink: 0
  }, crossAxis, theme$1.border.width[width]), mainAxis, '100%');
  return jsxRuntime.jsx("div", {
    css: react.css(styles)
  });
};

exports.Divider = Divider;