welcome-ui/dist/Badge.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as f } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as b } from "./System.mjs";
import u, { th as t, css as n } from "@xstyled/styled-components";
const x = u.divBox(
  ({ disabled: e, length: d, size: s, variant: i }) => n`
    ${t("badges.default")};
    ${t(`badges.variants.${i}`)};
    ${t(`badges.sizes.${s}`)};
    display: inline-flex;
    align-items: center;
    justify-content: center;

    ${e && n`
      ${t(`badges.disabled.${i}`)};
    `}

    ${d === 1 && n`
      width: ${t(`badges.sizes.${s}.height`)};
    `}
  `
), p = b(
  ({
    children: e,
    dataTestId: d,
    disabled: s,
    size: i = "md",
    variant: o = "default",
    withNumberAbbreviation: g,
    ...r
  }, l) => {
    let a;
    const m = Number.isInteger(e), $ = e.toString().length;
    return m && g && e > 99 ? a = "99+" : a = e, /* @__PURE__ */ f.jsx(
      x,
      {
        "data-testid": d,
        disabled: s,
        length: $,
        ref: l,
        size: i,
        variant: o,
        ...r,
        children: a
      }
    );
  }
);
p.displayName = "Badge";
export {
  p as Badge
};