import { r as i, h as t, H as a } from "./index.e6beb8d9.js";
import { c as e } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const o = () => ':host{display:block}:host *{box-sizing:border-box}.status-indicator{display:flex;align-items:center;gap:var(--s-space-4)}.status-indicator--intent-critical .status-indicator__dot:before{background-color:var(--s-icon-critical)}.status-indicator--intent-info .status-indicator__dot:before{background-color:var(--s-icon-info)}.status-indicator--intent-success .status-indicator__dot:before{background-color:var(--s-icon-success)}.status-indicator--intent-warning .status-indicator__dot:before{background-color:var(--s-icon-warning)}.status-indicator__dot{display:inline-flex;width:1.25rem;height:1.25rem;flex-shrink:0;justify-content:center;align-items:center}.status-indicator__dot:before{display:inline-flex;width:0.5rem;height:0.5rem;border-radius:50%;content:""}.status-indicator__label{overflow:hidden;min-width:0;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis}', r = class {
  constructor(s) {
    i(this, s);
  }
  render() {
    const s = e("status-indicator", `status-indicator--intent-${this.intent}`);
    return t(a, { key: "dffacc974bb9f70ce8029c0eec4ba3452544ffd5" }, t("div", { key: "84d21c11f39f1d01a767f650a62f5e6995bd8bcc", class: s }, t("span", { key: "84edd676049cbbd81a7de2b24e65d74cd636b0d2", class: "status-indicator__dot" }), t("span", { key: "e1a8cee0a970791cc1a275aacfb4bc1fc76544bd", class: "status-indicator__label" }, this.label)));
  }
};
r.style = o();
export {
  r as swirl_status_indicator
};
