@lanaco/lnc-react-ui/dist/Badge.js

React component library

import { jsx as h } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { s as b } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as y, c as t, b as z } from "./utils-BUdHa0nB.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const r = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B = b.div`
  ${(e) => y(e.theme, "Badge", e.size, "enabled")};
  background-color: ${(e) => t(
  e.theme,
  "Badge",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  color: ${(e) => t(e.theme, "Badge", e.color, "enabled", "text")};
  border-radius: ${(e) => z(e.theme, e.borderRadius)};
  display: inline-flex;
  min-width: ${(e) => r(e.size)};
  min-height: ${(e) => r(e.size)};
  max-height: ${(e) => r(e.size)};
  justify-content: center;
  align-items: center;
  padding: 0.313rem;

  & i {
    font-size: ${(e) => e.size == "small" ? "0.75rem" : e.size == "medium" ? "0.875rem" : "1rem"};
  }
`, j = f((e, i) => {
  const {
    borderRadius: a = "curved",
    onClick: o = () => {
    },
    className: m = "",
    style: s = {},
    color: d = "primary",
    size: n = "small",
    children: l,
    ...c
  } = e, u = $(), g = {
    borderRadius: a,
    theme: u,
    size: n,
    color: d,
    className: "lnc-ui-badge " + m,
    style: s
  };
  return /* @__PURE__ */ h(B, { ref: i, ...g, onClick: o, ...c, children: l });
});
export {
  j as default
};