@cerberus-design/react/dist/components/tag/closable.cjs

The Cerberus Design React component library.

'use client';
'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const jsxRuntime = require('react/jsx-runtime');
const cerberus = require('../../context/cerberus.cjs');
const primitives = require('./primitives.cjs');
const button = require('../icon-button/button.cjs');

function ClosableTag(props) {
  const { onClick, children, ...rootProps } = props;
  const { icons } = cerberus.useCerberusContext();
  const { close: Close } = icons;
  const palette = rootProps.palette === "page" ? "secondaryAction" : rootProps.palette ?? "secondaryAction";
  return /* @__PURE__ */ jsxRuntime.jsxs(
    primitives.TagRoot,
    {
      "data-palette": palette,
      palette,
      shape: "pill",
      pe: "0",
      ...rootProps,
      children: [
        children,
        /* @__PURE__ */ jsxRuntime.jsx(
          button.IconButton,
          {
            ariaLabel: "Close",
            onClick,
            palette,
            usage: "filled",
            size: "sm",
            children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
          }
        )
      ]
    }
  );
}

exports.ClosableTag = ClosableTag;