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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonShape = exports.skeletonShapeStencil = exports.skeletonSurfaceFillStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
exports.skeletonSurfaceFillStencil = (0, canvas_kit_styling_1.createStencil)({
    vars: {
        backgroundColor: '',
    },
    base: { name: "2jz12", 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");
exports.skeletonShapeStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: exports.skeletonSurfaceFillStencil,
    vars: {
        width: '',
        height: '',
        borderRadius: '',
        backgroundColor: '',
    },
    base: { name: "2o17dz", 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");
exports.SkeletonShape = (0, common_1.createComponent)('div')({
    displayName: 'Skeleton.Shape',
    Component: ({ width = '100%', height, backgroundColor, borderRadius, ...elemProps }, ref, Element) => {
        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonShapeStencil)({
                width: typeof width === 'number' ? (0, canvas_kit_styling_1.px2rem)(width) : width,
                height: typeof height === 'number' ? (0, canvas_kit_styling_1.px2rem)(height) : height,
                backgroundColor,
                borderRadius: typeof borderRadius === 'number' ? (0, canvas_kit_styling_1.px2rem)(borderRadius) : borderRadius,
            })) }));
    },
});