@workday/canvas-kit-react/dist/es6/skeleton/lib/parts/SkeletonShape.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const skeletonShapeStencil = createStencil({
    vars: {
        width: '',
        height: '',
        borderRadius: '',
        backgroundColor: '',
    },
    base: { name: "3ivdb7", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-shape-5b810e, var(--cnvs-sys-color-bg-alt-strong));border-radius:var(--borderRadius-skeleton-shape-5b810e, var(--cnvs-sys-space-zero));height:var(--height-skeleton-shape-5b810e, 100%);width:var(--width-skeleton-shape-5b810e);margin-bottom:var(--cnvs-sys-space-x4);" }
}, "skeleton-shape-5b810e");
export const SkeletonShape = createComponent('div')({
    displayName: 'Skeleton.Shape',
    Component: ({ width = '100%', height, backgroundColor, borderRadius, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, skeletonShapeStencil({
                width: typeof width === 'number' ? px2rem(width) : width,
                height: typeof height === 'number' ? px2rem(height) : height,
                backgroundColor,
                borderRadius: typeof borderRadius === 'number' ? px2rem(borderRadius) : borderRadius,
            })) }));
    },
});