@grafana/alerting/dist/cjs/grafana/rules/components/state/StateDot.cjs

Grafana Alerting Library – Build vertical integrations on top of the industry-leading alerting solution

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ui = require('@grafana/ui');

"use strict";
const StateDot = ({ color }) => {
  const styles = ui.useStyles2(getDotStyles, { color });
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", gap: 0.5, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dot }) });
};
const getDotStyles = (theme, { color }) => {
  const size = theme.spacing(1.25);
  const outlineSize = `calc(${size} / 2.5)`;
  const errorStyle = color === "error";
  const successStyle = color === "success";
  const warningStyle = color === "warning";
  const infoStyle = color === "info";
  return {
    dot: css.css(
      {
        width: size,
        height: size,
        borderRadius: theme.shape.radius.circle,
        backgroundColor: theme.colors.secondary.shade,
        outline: `solid ${outlineSize} ${theme.colors.secondary.transparent}`,
        margin: outlineSize
      },
      successStyle && css.css({
        backgroundColor: theme.colors.success.main,
        outlineColor: theme.colors.success.transparent
      }),
      warningStyle && css.css({
        backgroundColor: theme.colors.warning.main,
        outlineColor: theme.colors.warning.transparent
      }),
      errorStyle && css.css({
        backgroundColor: theme.colors.error.main,
        outlineColor: theme.colors.error.transparent
      }),
      infoStyle && css.css({
        backgroundColor: theme.colors.info.main,
        outlineColor: theme.colors.info.transparent
      })
    )
  };
};

exports.StateDot = StateDot;
//# sourceMappingURL=StateDot.cjs.map