@atlaskit/icon/dist/esm/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';
var skeletonStyles = css({
  display: 'inline-block',
  borderRadius: "var(--ds-border-radius-circle, 50%)"
});
var subtleOpacityStyles = css({
  opacity: 0.15
});
var strongOpacityStyles = css({
  opacity: 0.3
});

/**
 * __Skeleton__
 */
var Skeleton = /*#__PURE__*/memo(function Skeleton(_ref) {
  var testId = _ref.testId,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
    _ref$weight = _ref.weight,
    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
  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;