@workday/canvas-kit-preview-react/dist/es6/divider/lib/Divider.js

Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.

import * as React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp, calc, cssVar, px2rem, } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const dividerStencil = createStencil({
    vars: {
        space: cssVar(system.space.x4),
    },
    base: { name: "xrlq2", styles: "--space-divider-156e29:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-156e29) / 2) 0;" }
}, "divider-156e29");
/**
 * # Divider
 * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
 *
 * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
 *
 * The `space` prop will equally apply top and bottom margin styles.
 * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
 *
 * @example
 * ```tsx
 * import { Divider } from '@workday/canvas-kit-preview-react/divider';
 * import {system} from '@workday/canvas-tokens-web';
 *
 * <Divider space={system.space.x2} />
 *
 * ```
 */
export const Divider = createComponent('hr')({
    displayName: 'Divider',
    Component: ({ space, ...elemProps }, ref, Element) => (React.createElement(Element, { ref: ref, ...handleCsProp(elemProps, dividerStencil({ space })) })),
});