import * as React from 'react' ; import styled from '@emotion/styled' ; import { createComponent , StyledType } from '@workday/canvas-kit-react/common' ; import { colors , space } from '@workday/canvas-kit-react/tokens' ; export interface SkeletonShapeProps { default width ? : number | string ; default height ? : number | string ; default borderRadius ? : number | string ; default backgroundColor ? : string ; } const Shape = styled ( 'div' ) < SkeletonShapeProps & StyledType > ( ( { backgroundColor , borderRadius , height , width } ) => ( { backgroundColor , borderRadius , height , width , marginBottom : space . s , } ) ) ; export const SkeletonShape = createComponent ( 'div' ) ( { displayName : 'Skeleton.Shape' , Component : ( { backgroundColor = colors . soap200 , borderRadius = 0 , height = '100%' , width = '100%' , ... elemProps } , ref , Element ) => ( < Shape ref = { ref } as = { Element } backgroundColor = { backgroundColor } borderRadius = { borderRadius } height = { height } width = { width } { ... elemProps } / > ) , } ) ;