@equinor/eds-core-react/dist/esm/components/Divider/Divider.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import * as Divider_tokens from './Divider.tokens.js';
import { jsx } from 'react/jsx-runtime';

const {
  divider
} = Divider_tokens;
const StyledDivider = styled.hr.withConfig({
  displayName: "Divider__StyledDivider",
  componentId: "sc-1d8osde-0"
})(({
  $backgroundColor,
  $marginTop,
  $marginBottom,
  $dividerHeight
}) => {
  return css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], $backgroundColor, $marginTop, $marginBottom, $dividerHeight, $dividerHeight);
});
const Divider = /*#__PURE__*/forwardRef(function Divider({
  color = 'medium',
  variant = 'medium',
  size = '1',
  ...rest
}, ref) {
  const colorValue = color === 'medium' ? 'mediumColor' : color;
  const props = {
    $backgroundColor: divider[colorValue].background,
    $marginTop: Divider_tokens[variant].spacings.top,
    $marginBottom: Divider_tokens[variant].spacings.bottom,
    $dividerHeight: parseInt(size),
    ...rest
  };
  return /*#__PURE__*/jsx(StyledDivider, {
    ...props,
    ref: ref
  });
});

export { Divider };