@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';
/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
export const skeletonSurfaceFillStencil = createStencil({
    vars: {
        backgroundColor: '',
    },
    base: { name: "3z8hev", styles: "box-sizing:border-box;background:var(--backgroundColor-skeleton-surface-fill-2acf91, linear-gradient(to left, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))), var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13))));border:0.0625rem solid transparent;@media (forced-colors: active){border-color:CanvasText;}" }
}, "skeleton-surface-fill-2acf91");
export const skeletonShapeStencil = createStencil({
    extends: skeletonSurfaceFillStencil,
    vars: {
        width: '',
        height: '',
        borderRadius: '',
        backgroundColor: '',
    },
    base: { name: "3mu4nb", styles: "box-sizing:border-box;border-radius:var(--borderRadius-skeleton-shape-068fb0, 0);height:var(--height-skeleton-shape-068fb0, 100%);width:var(--width-skeleton-shape-068fb0);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
}, "skeleton-shape-068fb0");
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,
            })) }));
    },
});