@serendie/ui/dist/components/Badge/Badge.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { SerendieSymbolClose as m } from "@serendie/symbols";
import { cx as y } from "../../styled-system/css/cx.js";
import { cva as o } from "../../styled-system/css/cva.js";
const l = o({
  base: {
    display: "inline-flex",
    alignItems: "center",
    gap: "2px",
    borderRadius: "sd.system.dimension.radius.extraLarge",
    bg: "sd.system.color.interaction.hoveredVariant"
  },
  variants: {
    size: {
      small: {
        height: "16px",
        pr: "sd.system.dimension.spacing.twoExtraSmall",
        pl: "sd.system.dimension.spacing.twoExtraSmall",
        textStyle: "sd.system.typography.label.small_compact",
        expanded: {
          textStyle: "sd.system.typography.label.small_expanded"
        }
      },
      medium: {
        height: "24px",
        pr: "sd.system.dimension.spacing.extraSmall",
        pl: "sd.system.dimension.spacing.extraSmall",
        textStyle: "sd.system.typography.label.medium_compact",
        expanded: {
          textStyle: "sd.system.typography.label.medium_expanded"
        }
      },
      large: {
        height: "32px",
        pr: "sd.system.dimension.spacing.medium",
        pl: "sd.system.dimension.spacing.medium",
        textStyle: "sd.system.typography.label.large_compact",
        expanded: {
          textStyle: "sd.system.typography.label.large_expanded"
        }
      }
    },
    styleColor: {
      gray: {
        bg: "sd.reference.color.scale.gray.600",
        color: "sd.reference.color.scale.white.1000"
      },
      blue: {
        bg: "sd.reference.color.scale.blue.600",
        color: "sd.reference.color.scale.white.1000"
      },
      green: {
        bg: "sd.reference.color.scale.green.600",
        color: "sd.reference.color.scale.white.1000"
      },
      yellow: {
        bg: "sd.reference.color.scale.yellow.600",
        color: "sd.reference.color.scale.white.1000"
      },
      chestnut: {
        bg: "sd.reference.color.scale.chestnut.600",
        color: "sd.reference.color.scale.white.1000"
      },
      red: {
        bg: "sd.reference.color.scale.red.600",
        color: "sd.reference.color.scale.white.1000"
      },
      "gray-subtle": {
        bg: "sd.reference.color.scale.gray.100",
        color: "sd.reference.color.scale.gray.800"
      },
      "blue-subtle": {
        bg: "sd.reference.color.scale.blue.100",
        color: "sd.reference.color.scale.blue.800"
      },
      "green-subtle": {
        bg: "sd.reference.color.scale.green.100",
        color: "sd.reference.color.scale.green.800"
      },
      "yellow-subtle": {
        bg: "sd.reference.color.scale.yellow.100",
        color: "sd.reference.color.scale.yellow.800"
      },
      "chestnut-subtle": {
        bg: "sd.reference.color.scale.chestnut.100",
        color: "sd.reference.color.scale.chestnut.800"
      },
      "red-subtle": {
        bg: "sd.reference.color.scale.red.100",
        color: "sd.reference.color.scale.red.800"
      }
    }
  },
  defaultVariants: {
    size: "medium",
    styleColor: "gray"
  }
}), h = ({
  children: e,
  closeButton: s,
  ...c
}) => {
  const [t, { className: a, ...n }] = l.splitVariantProps(c), d = l(t);
  return /* @__PURE__ */ i("span", { className: y(d, a), ...n, children: [
    e,
    s
  ] });
}, g = o({
  base: {
    cursor: "pointer"
  }
}), x = (e) => {
  const s = g();
  return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(m, { width: 12, height: 12 }) });
};
export {
  h as Badge,
  x as BadgeCloseButton,
  l as BadgeStyle
};