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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _react2 = require("react");
var _styles = require("./styles");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var skeletonStyles = (0, _react.css)({
  display: 'inline-block',
  borderRadius: "var(--ds-border-radius-circle, 50%)"
});
var subtleOpacityStyles = (0, _react.css)({
  opacity: 0.15
});
var strongOpacityStyles = (0, _react.css)({
  opacity: 0.3
});

/**
 * __Skeleton__
 */
var Skeleton = /*#__PURE__*/(0, _react2.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 (0, _react.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
    _styles.sizeStyleMap[size]]
  });
});
var _default = exports.default = Skeleton;