import { jsx, jsxs } from "react/jsx-runtime";
import assert from "assert";
import { Box } from "../Box/Box.mjs";
import { Text, IconClear } from "../Accordion/AccordionItem.mjs";
import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { clearGutter } from "./Tag.css.mjs";
const Tag = ({
  onClear,
  clearLabel = "Clear",
  data,
  id,
  icon,
  children,
  ...restProps
}) => {
  assert(
    typeof children === "undefined" || typeof children === "string",
    "Tag may only contain a string"
  );
  assert(
    !icon || icon.props.size === void 0 || icon.props.tone === void 0,
    "Icons cannot set the 'size' or 'tone' prop when passed to a Tag component"
  );
  return /* @__PURE__ */ jsx(
    Box,
    {
      id,
      display: "flex",
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsxs(
        Box,
        {
          display: "flex",
          minWidth: 0,
          alignItems: "center",
          background: "neutralLight",
          paddingY: onClear ? void 0 : "xxsmall",
          paddingLeft: icon ? "xsmall" : "small",
          paddingRight: onClear ? void 0 : "small",
          borderRadius: "full",
          children: [
            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsx(Text, { baseline: false, maxLines: 1, icon, children }) }),
            onClear ? /* @__PURE__ */ jsx(Box, { flexShrink: 0, display: "flex", className: clearGutter, children: /* @__PURE__ */ jsx(
              ButtonIcon,
              {
                id: id ? `${id}-clear` : void 0,
                icon: /* @__PURE__ */ jsx(IconClear, {}),
                label: clearLabel,
                tone: "secondary",
                variant: "transparent",
                bleed: false,
                onClick: onClear
              }
            ) }) : null
          ]
        }
      )
    }
  );
};
export {
  Tag
};
