import {
  setDefaultReactNodesTypography
} from "./chunk-EZI6E6UO.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  standardBorderRadius
} from "./chunk-HGZGGJQB.js";
import {
  getColor
} from "./chunk-VAH342U2.js";

// src/components/Badge.tsx
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function Badge({
  content: contentProp,
  kind,
  icon,
  ml = 0,
  mr = 0,
  size = "sm",
  block = false,
  typography: typographyProp
}) {
  const defaultTypography = {
    type: (typographyProp == null ? void 0 : typographyProp.type) || "Label Moderate",
    size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
    color: (typographyProp == null ? void 0 : typographyProp.color) || (kind === "danger" ? "danger" : kind === "success" ? "white" : "text")
  };
  const nodesWithTypography = setDefaultReactNodesTypography(contentProp, {
    default: defaultTypography
  });
  const content = toReactNodes(nodesWithTypography);
  return contentProp ? /* @__PURE__ */ jsxs(StyledBadge, { kind, ml, mr, size, block, children: [
    icon ? /* @__PURE__ */ jsx(
      Icon,
      {
        name: icon.name,
        width: 20,
        color: icon.color ? icon.color : kind === "danger" ? "danger" : kind === "success" ? "success" : void 0
      }
    ) : null,
    /* @__PURE__ */ jsx(BadgeContent, { children: content })
  ] }) : null;
}
var badgeSmVPadding = 2;
var badgeSmHPadding = 6;
var StyledBadge = styled.div`
  ${({ size }) => standardBorderRadius(size === "sm" ? 4 : 12)}
  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
  ${({ mr }) => mr === 0 ? "" : `margin-right: ${mr}px;`}

  display: ${({ block }) => block ? "flex" : "inline-flex"};
  gap: ${({ size }) => size === "sm" ? badgeSmHPadding : 12}px;
  align-items: center;
  padding: ${({ size }) => size === "sm" ? `${badgeSmVPadding}px ${badgeSmHPadding}px` : "12px 16px"};
  background-color: ${({ theme, kind }) => {
  if (kind === "danger") {
    return getColor(theme, "red42a10");
  } else if (kind === "success") {
    return getColor(theme, "success");
  } else {
    return getColor(theme, theme.badge.bg);
  }
}};
`;
var BadgeContent = styled.div``;

export {
  Badge,
  badgeSmVPadding
};
