const c = {
  fontSize: "sm",
  colorScheme: "teal",
  variant: "subtle",
  px: 3,
  py: 2,
  borderRadius: "lg",
  whiteSpace: "nowrap",
  textOverflow: "ellipsis",
  textTransform: "none"
};
function i() {
  const t = window.__UIKIT_REMOTE_DEPS__, e = [];
  if (t?.React || e.push("React"), t?.createRoot || e.push("createRoot"), t?.ChakraProvider || e.push("ChakraProvider"), t?.Badge || e.push("Badge"), e.length)
    throw new Error(
      `[uikit-g-badge] Missing remote dependencies: ${e.join(", ")}. Set window.__UIKIT_REMOTE_DEPS__ before loading the remote component.`
    );
  return t;
}
function d(t = {}) {
  const { children: e, theme: r, chakraProviderProps: n, ...o } = t;
  return {
    children: e,
    theme: r,
    chakraProviderProps: n,
    badgeProps: {
      ...c,
      ...o,
      fontFamily: o.fontFamily || "var(--uikit-font-family, inherit)"
    }
  };
}
class l extends HTMLElement {
  constructor() {
    super(), this._props = {}, this._root = null, this._unmountTimer = null;
  }
  connectedCallback() {
    this._unmountTimer && (clearTimeout(this._unmountTimer), this._unmountTimer = null);
    const { createRoot: e } = i();
    this._root || (this._root = e(this)), this.renderComponent();
  }
  disconnectedCallback() {
    !this._root || this._unmountTimer || (this._unmountTimer = setTimeout(() => {
      this._unmountTimer = null, this._root && (this._root.unmount(), this._root = null);
    }, 0));
  }
  set componentProps(e) {
    this._props = e ?? {}, this.isConnected && this.renderComponent();
  }
  get componentProps() {
    return this._props;
  }
  renderComponent() {
    if (!this._root) return;
    const {
      React: e,
      ChakraProvider: r,
      Badge: n,
      theme: o,
      chakraProviderProps: s
    } = i(), { children: a, theme: h, chakraProviderProps: m, badgeProps: u } = d(this._props);
    this._root.render(
      e.createElement(
        r,
        {
          theme: h || o,
          resetCSS: !1,
          ...s || {},
          ...m || {}
        },
        e.createElement(n, u, a)
      )
    );
  }
}
customElements.get("uikit-g-badge") || customElements.define("uikit-g-badge", l);