@atlaskit/icon/dist/es2019/components/skeleton.js

An icon is a symbol representing a command, device, directory, or common action.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { memo } from 'react';
import { sizeStyleMap } from './styles';
const skeletonStyles = css({
  display: 'inline-block',
  borderRadius: "var(--ds-border-radius-circle, 50%)"
});
const subtleOpacityStyles = css({
  opacity: 0.15
});
const strongOpacityStyles = css({
  opacity: 0.3
});

/**
 * __Skeleton__
 */
const Skeleton = /*#__PURE__*/memo(function Skeleton({
  testId,
  size = 'medium',
  color = 'currentColor',
  weight = 'normal'
}) {
  return jsx("div", {
    "data-testid": testId,
    style: {
      backgroundColor: color
    },
    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    sizeStyleMap[size]]
  });
});
export default Skeleton;