import { jsx as v, jsxs as M, Fragment as W } from "react/jsx-runtime";
import { tw as a, makeVariants as O } from "@spark-ui/internal-utils";
import { c as H, a as L } from "../index-BmAFn37q.mjs";
import { createContext as ee, useContext as ne, Children as ae, isValidElement as re, useCallback as te, cloneElement as ie } from "react";
import { useCombinedState as S } from "@spark-ui/hooks/use-combined-state";
import { a as F } from "../Slot-C98rL4yy.mjs";
import { Close as se } from "@spark-ui/icons/Close";
import { I as oe } from "../Icon-D1RueiPY.mjs";
const de = [
  /** Intents **/
  {
    design: "outlined",
    intent: "main",
    class: a([
      "enabled:hover:bg-main/dim-5",
      "enabled:active:bg-main/dim-5",
      "focus-visible:bg-main/dim-5",
      "aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1",
      "text-main"
    ])
  },
  {
    design: "outlined",
    intent: "support",
    class: a([
      "enabled:hover:bg-support/dim-5",
      "enabled:active:bg-support/dim-5",
      "focus-visible:bg-support/dim-5",
      "aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1",
      "text-support"
    ])
  },
  {
    design: "outlined",
    intent: "basic",
    class: a([
      "enabled:hover:bg-basic/dim-5",
      "enabled:active:bg-basic/dim-5",
      "focus-visible:bg-basic/dim-5",
      "aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
      "text-basic"
    ])
  },
  {
    intent: "accent",
    design: "outlined",
    class: a([
      "enabled:hover:bg-accent/dim-5",
      "enabled:active:bg-accent/dim-5",
      "focus-visible:bg-accent/dim-5",
      "aria-pressed:bg-accent-container",
      "aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1",
      "text-accent"
    ])
  },
  {
    design: "outlined",
    intent: "success",
    class: a([
      "enabled:hover:bg-success/dim-5",
      "enabled:active:bg-success/dim-5",
      "focus-visible:bg-success/dim-5",
      "aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1",
      "text-success"
    ])
  },
  {
    intent: "alert",
    design: "outlined",
    class: a([
      "enabled:hover:bg-alert/dim-5",
      "enabled:active:bg-alert/dim-5",
      "focus-visible:bg-alert/dim-5",
      "aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1",
      "text-alert"
    ])
  },
  {
    design: "outlined",
    intent: "danger",
    class: a([
      "enabled:hover:bg-error/dim-5",
      "enabled:active:bg-error/dim-5",
      "focus-visible:bg-error/dim-5",
      "aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1",
      "text-error"
    ])
  },
  {
    design: "outlined",
    intent: "info",
    class: a([
      "enabled:hover:bg-info/dim-5",
      "enabled:active:bg-info/dim-5",
      "focus-visible:bg-info/dim-5",
      "aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1",
      "text-info"
    ])
  },
  {
    design: "outlined",
    intent: "neutral",
    class: a([
      "enabled:hover:bg-neutral/dim-5",
      "enabled:active:bg-neutral/dim-5",
      "focus-visible:bg-neutral/dim-5",
      "aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1",
      "text-neutral"
    ])
  },
  {
    design: "outlined",
    intent: "surface",
    class: a([
      "enabled:hover:bg-surface/dim-5",
      "enabled:active:bg-surface/dim-5",
      "focus-visible:bg-surface/dim-5",
      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
      "text-surface"
    ])
  },
  /** Spacings **/
  {
    design: "outlined",
    hasClearButton: !1,
    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
  },
  {
    design: "outlined",
    hasClearButton: !0,
    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
  }
], ce = [
  /** Intents **/
  {
    intent: "main",
    design: "tinted",
    class: a([
      "bg-main-container",
      "enabled:hover:bg-main-container-hovered",
      "enabled:active:bg-main-container-hovered",
      "focus-visible:bg-main-container-hovered",
      "aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1",
      "text-on-main-container"
    ])
  },
  {
    intent: "support",
    design: "tinted",
    class: a([
      "bg-support-container",
      "enabled:hover:bg-support-container-hovered",
      "enabled:active:bg-support-container-hovered",
      "focus-visible:bg-support-container-hovered",
      "aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1",
      "text-on-support-container"
    ])
  },
  {
    intent: "basic",
    design: "tinted",
    class: a([
      "bg-basic-container",
      "enabled:hover:bg-basic-container-hovered",
      "enabled:active:bg-basic-container-hovered",
      "focus-visible:bg-basic-container-hovered",
      "aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1",
      "text-on-basic-container"
    ])
  },
  {
    intent: "accent",
    design: "tinted",
    class: a([
      "bg-accent-container",
      "enabled:hover:bg-accent-container-hovered",
      "enabled:active:bg-accent-container-hovered",
      "focus-visible:bg-accent-container-hovered",
      "aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1",
      "text-on-accent-container"
    ])
  },
  {
    intent: "success",
    design: "tinted",
    class: a([
      "bg-success-container",
      "enabled:hover:bg-success-container-hovered",
      "enabled:active:bg-success-container-hovered",
      "focus-visible:bg-success-container-hovered",
      "aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1",
      "text-on-success-container"
    ])
  },
  {
    intent: "alert",
    design: "tinted",
    class: a([
      "bg-alert-container",
      "enabled:hover:bg-alert-container-hovered",
      "enabled:active:bg-alert-container-hovered",
      "focus-visible:bg-alert-container-hovered",
      "aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1",
      "text-on-alert-container"
    ])
  },
  {
    intent: "danger",
    design: "tinted",
    class: a([
      "bg-error-container",
      "enabled:hover:bg-error-container-hovered",
      "enabled:active:bg-error-container-hovered",
      "focus-visible:bg-error-container-hovered",
      "aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1",
      "text-on-error-container"
    ])
  },
  {
    intent: "info",
    design: "tinted",
    class: a([
      "bg-info-container",
      "enabled:hover:bg-info-container-hovered",
      "enabled:active:bg-info-container-hovered",
      "focus-visible:bg-info-container-hovered",
      "aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1",
      "text-on-info-container"
    ])
  },
  {
    intent: "neutral",
    design: "tinted",
    class: a([
      "bg-neutral-container",
      "enabled:hover:bg-neutral-container-hovered",
      "enabled:active:bg-neutral-container-hovered",
      "focus-visible:bg-neutral-container-hovered",
      "aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1",
      "text-on-neutral-container"
    ])
  },
  {
    intent: "surface",
    design: "tinted",
    class: a([
      "bg-surface/dim-1",
      "enabled:hover:bg-surface-hovered/dim-1",
      "enabled:active:bg-surface-hovered/dim-1",
      "focus-visible:bg-surface-hovered/dim-1",
      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
      "text-on-surface/dim-1"
    ])
  },
  /** Spacings **/
  {
    design: "tinted",
    hasClearButton: !1,
    class: a(["px-md"])
  },
  {
    design: "tinted",
    hasClearButton: !0,
    class: a(["pl-md"])
  }
], le = [
  /** Intents **/
  {
    intent: "main",
    design: "dashed",
    class: a([
      "enabled:hover:bg-main/dim-5",
      "enabled:active:bg-main/dim-5",
      "focus-visible:bg-main/dim-5",
      "aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1",
      "text-main"
    ])
  },
  {
    intent: "support",
    design: "dashed",
    class: a([
      "enabled:hover:bg-support/dim-5",
      "enabled:active:bg-support/dim-5",
      "focus-visible:bg-support/dim-5",
      "aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1",
      "text-support"
    ])
  },
  {
    intent: "basic",
    design: "dashed",
    class: a([
      "enabled:hover:bg-basic/dim-5",
      "enabled:active:bg-basic/dim-5",
      "focus-visible:bg-basic/dim-5",
      "aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
      "text-basic"
    ])
  },
  {
    intent: "accent",
    design: "dashed",
    class: a([
      "enabled:hover:bg-accent/dim-5",
      "enabled:active:bg-accent/dim-5",
      "focus-visible:bg-accent/dim-5",
      "aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1",
      "text-accent"
    ])
  },
  {
    intent: "success",
    design: "dashed",
    class: a([
      "enabled:hover:bg-success/dim-5",
      "enabled:active:bg-success/dim-5",
      "focus-visible:bg-success/dim-5",
      "aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1",
      "text-success"
    ])
  },
  {
    intent: "alert",
    design: "dashed",
    class: a([
      "enabled:hover:bg-alert/dim-5",
      "enabled:active:bg-alert/dim-5",
      "focus-visible:bg-alert/dim-5",
      "aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1",
      "text-alert"
    ])
  },
  {
    intent: "danger",
    design: "dashed",
    class: a([
      "enabled:hover:bg-error/dim-5",
      "enabled:active:bg-error/dim-5",
      "focus-visible:bg-error/dim-5",
      "aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1",
      "text-error"
    ])
  },
  {
    intent: "info",
    design: "dashed",
    class: a([
      "enabled:hover:bg-info/dim-5",
      "enabled:active:bg-info/dim-5",
      "focus-visible:bg-info/dim-5",
      "aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1",
      "text-info"
    ])
  },
  {
    intent: "neutral",
    design: "dashed",
    class: a([
      "enabled:hover:bg-neutral/dim-5",
      "enabled:active:bg-neutral/dim-5",
      "focus-visible:bg-neutral/dim-5",
      "aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1",
      "text-neutral"
    ])
  },
  {
    intent: "surface",
    design: "dashed",
    class: a([
      "enabled:hover:bg-surface/dim-5",
      "enabled:active:bg-surface/dim-5",
      "focus-visible:bg-surface/dim-5",
      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
      "text-surface"
    ])
  },
  /** Spacings **/
  {
    design: "dashed",
    hasClearButton: !1,
    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
  },
  {
    design: "dashed",
    hasClearButton: !0,
    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
  }
], be = H(
  [
    "box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular",
    "focus-visible:u-outline",
    "ease-out duration-150"
  ],
  {
    variants: {
      /**
       * Main style of the chip.
       *
       * - `filled`: Chip will be plain.
       *
       * - `outlined`: Chip will be transparent with an outline.
       *
       * - `tinted`: Chip will be filled but using a lighter color scheme.
       *
       * - `dashed`: Chip will be transparent with an outline dashed.
       */
      design: O({
        outlined: ["bg-transparent border-sm border-solid border-current"],
        tinted: [""],
        dashed: [
          "bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high"
        ]
      }),
      /**
       * Color scheme of the chip.
       */
      intent: O({
        main: [],
        support: [],
        basic: [],
        accent: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: []
      }),
      /**
       * Disable the chip, preventing user interaction and adding opacity.
       */
      disabled: {
        true: ["cursor-not-allowed", "opacity-dim-3"]
      },
      hasClearButton: {
        true: [],
        false: []
      }
      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'
    },
    compoundVariants: [...de, ...ce, ...le],
    defaultVariants: {
      design: "outlined",
      intent: "basic"
    }
  }
), $ = ee({}), ue = () => ne($) || {};
var P = {}, q;
function pe() {
  return q || (q = 1, (function(t) {
    Object.defineProperty(t, "__esModule", { value: !0 }), t.emulateTab = void 0;
    var i = new Array("offsetHeight", "scrollHeight", "clientHeight"), s = !0, f = /text|password|search|tel|url/;
    function c() {
      var e = m() || document.body, n = N(e);
      return u(e, n);
    }
    t.emulateTab = c, (function(e) {
      e.from = b, e.to = function(n, r) {
        return r === void 0 && (r = !1), b(m()).to(n, r);
      }, e.backwards = function() {
        return e.to(l(m()), s);
      }, e.forwards = function() {
        return e();
      }, e.findSelectableElements = x;
    })(c = t.emulateTab || (t.emulateTab = {}));
    function b(e) {
      return e === void 0 && (e = document.body), {
        /**
         * emulate tab to the element before the starting element (which is the active element by default)
         *
         * @returns true if switched elemenet and false if default action had been prevented
         */
        toPreviousElement: function() {
          return u(e, l(), s);
        },
        /**
         * emulate tab to the element after the starting element (which is the active element by default)
         *
         * @returns true if switched elemenet and false if default action had been prevented
         */
        toNextElement: function() {
          return u(e, N(e));
        },
        /**
         * emulate tab to a custom given element
         *
         * @param target element after tab
         * @param sendKeyEventsWithShiftModifier like shift tab would do
         * @returns true if switched elemenet and false if default action had been prevented
         */
        to: function(n, r) {
          return r === void 0 && (r = !1), u(e, n, r);
        }
      };
    }
    function u(e, n, r) {
      r === void 0 && (r = !1);
      var o = e.dispatchEvent(p("keydown", r));
      if (o) {
        if (e.blur(), n.focus(), document.activeElement !== n)
          try {
            document.activeElement = n;
          } catch {
            console.warn("could not switch active element");
          }
        n instanceof HTMLInputElement && f.test(n.type) && (n.selectionStart = 0);
        var d = p("keyup", r);
        return n.dispatchEvent(d), !0;
      } else
        return e.dispatchEvent(p("keypress", r)), e.dispatchEvent(p("keyup", r)), !1;
    }
    function p(e, n) {
      return n === void 0 && (n = !1), new KeyboardEvent(e, {
        code: "Tab",
        key: "Tab",
        cancelable: !0,
        bubbles: !0,
        shiftKey: n
      });
    }
    function m() {
      var e = document.activeElement;
      return e instanceof HTMLElement ? e : void 0;
    }
    function l(e) {
      e === void 0 && (e = document.body);
      var n = x();
      if (n.length < 1)
        throw new Error("no selectable elements found");
      var r = n.indexOf(e), o = (r > 0 ? r : n.length) - 1, d = n[o];
      return d;
    }
    function N(e) {
      e === void 0 && (e = document.body);
      var n = x();
      if (n.length < 1)
        throw new Error("no selectable elements found");
      var r = n.indexOf(e), o = r + 1 < n.length ? r + 1 : 0, d = n[o];
      return d;
    }
    function x() {
      var e = Array.from(document.querySelectorAll("*")).filter(y);
      I();
      var n = e.filter(k(V, g, C, X, Z)).reduce(function(o, d) {
        var w = d.tabIndex, A = o["" + w] || { tabIndex: w, elements: [] };
        return A.elements.push(d), o[w] = A, o;
      }, {}), r = Object.values(n).sort(K).reduce(function(o, d) {
        return o.concat(d.elements);
      }, new Array());
      return r;
    }
    var y = function(e) {
      return e instanceof HTMLElement;
    }, g, I = function() {
      var e = h();
      e ? g = E(e) : g = T, I = function() {
      };
    }, E = function(e) {
      return function(n) {
        var r = n[e];
        return !!r && typeof r == "number" && r > 0;
      };
    };
    function h(e) {
      e === void 0 && (e = document.body);
      var n = e, r = i.find(function(_) {
        var z = n[_];
        return z && typeof z == "number" && z > 0;
      });
      if (r)
        return r;
      for (var o = e.children, d = 0, w = Array.from(o); d < w.length; d++) {
        var A = w[d], D = h(A);
        if (D)
          return D;
      }
    }
    var T = function(e) {
      if (!e.isConnected)
        return !1;
      if (e.tagName === "BODY")
        return !0;
      var n = getComputedStyle(e);
      if (n.display === "none" || n.visibility === "collapse")
        return !1;
      var r = e.parentElement;
      return r ? T(r) : !1;
    };
    function k() {
      for (var e = [], n = 0; n < arguments.length; n++)
        e[n] = arguments[n];
      return function(r) {
        return !e.some(function(o) {
          return !o(r);
        });
      };
    }
    function V(e) {
      return typeof e.tabIndex == "number" && e.tabIndex >= 0;
    }
    var C = function(e) {
      return !e.disabled;
    };
    function X(e) {
      return !(e instanceof HTMLAnchorElement) || !!e.href || e.getAttribute("tabIndex") !== null;
    }
    var Z = function(e) {
      return getComputedStyle(e).visibility !== "collapse";
    };
    function K(e, n) {
      if (e.tabIndex > 0 && n.tabIndex > 0)
        return e.tabIndex - n.tabIndex;
      if (e.tabIndex > 0)
        return -e.tabIndex;
      if (n.tabIndex > 0)
        return n.tabIndex;
      throw new Error("same tab index for two groups");
    }
  })(P)), P;
}
var G = pe();
const me = (t) => t ? t.type.displayName : "", ge = (t) => (...i) => ae.toArray(t).filter(re).find((f) => {
  const c = me(f);
  return i.includes(c || "");
}), ve = ({
  onClick: t,
  asChild: i,
  pressed: s,
  defaultPressed: f,
  disabled: c,
  value: b,
  defaultValue: u,
  children: p,
  onClear: m
}) => {
  const [l, N] = S(s, f), [x] = S(
    b,
    u
  ), y = ge(p), g = y("Chip.LeadingIcon"), I = y("Chip.TrailingIcon"), E = y("Chip.Content"), h = y("Chip.ClearButton"), T = (t || l) !== void 0, k = [g, E, h].every(
    (C) => C === void 0
  ) ? /* @__PURE__ */ v("span", { className: "inline-block grow truncate", children: p }) : /* @__PURE__ */ M(W, { children: [
    g,
    E,
    g === void 0 ? I : null,
    h
  ] }), V = (C) => {
    h && !c && ["Delete", "Backspace"].includes(C.key) && m && (m(), C.key === "Delete" && G.emulateTab(), C.key === "Backspace" && G.emulateTab.backwards());
  };
  return T ? {
    Element: i ? F : "button",
    chipProps: {
      type: "button",
      ...l !== void 0 && {
        "aria-pressed": l,
        "data-state": l ? "on" : "off"
      },
      onClick: (C) => {
        l !== void 0 && N(!l), t && t(C, { pressed: l, value: x });
      },
      onKeyDown: V,
      disabled: c,
      children: k
    },
    compoundElements: {
      leadingIcon: g,
      trailingIcon: I,
      content: E,
      clearButton: h
    }
  } : {
    Element: i ? F : "div",
    chipProps: {
      "aria-disabled": c,
      children: k,
      onKeyDown: V
    },
    compoundElements: {
      leadingIcon: g,
      trailingIcon: I,
      content: E,
      clearButton: h
    }
  };
}, R = ({
  design: t = "outlined",
  disabled: i,
  children: s,
  intent: f = "basic",
  defaultPressed: c,
  pressed: b,
  asChild: u,
  className: p,
  onClick: m,
  onClear: l,
  ref: N,
  ...x
}) => {
  const {
    Element: y,
    chipProps: { children: g, ...I },
    compoundElements: E
  } = ve({
    asChild: u,
    pressed: b,
    defaultPressed: c,
    onClick: m,
    disabled: !!i,
    value: x.value,
    defaultValue: x.defaultValue,
    children: s,
    onClear: l
  }), { clearButton: h } = E;
  return /* @__PURE__ */ v($.Provider, { value: { disabled: i, design: t, intent: f, onClear: l }, children: /* @__PURE__ */ v(
    y,
    {
      ref: N,
      className: be({
        className: p,
        design: t,
        disabled: i,
        intent: f,
        hasClearButton: !!h
      }),
      ...I,
      ...x,
      "data-spark-component": "chip",
      children: g
    }
  ) });
};
R.displayName = "Chip";
const fe = H(
  ["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],
  {
    variants: {
      disabled: {
        false: ["cursor-pointer"],
        true: ["cursor-not-allowed"]
      },
      isBordered: {
        false: ["pr-md"],
        true: ["pr-[7px]"]
      },
      design: {
        outlined: [],
        tinted: [],
        dashed: []
      }
    },
    compoundVariants: [
      {
        design: "outlined",
        disabled: !1,
        class: a(["hover:opacity-dim-1"])
      },
      {
        design: "outlined",
        disabled: !0,
        class: a(["opacity-dim-3"])
      },
      {
        design: "tinted",
        disabled: !1,
        class: a(["hover:opacity-dim-1"])
      },
      {
        design: "tinted",
        disabled: !0,
        class: a(["opacity-dim-3"])
      },
      {
        design: "dashed",
        disabled: !1,
        class: a(["hover:opacity-dim-1"])
      },
      {
        design: "dashed",
        disabled: !0,
        class: a(["opacity-dim-3"])
      }
    ]
  }
), he = H(
  ["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm", "focus-visible:u-outline"],
  {
    variants: {
      disabled: {
        true: ["cursor-not-allowed"],
        false: ["cursor-pointer"]
      }
    },
    defaultVariants: {
      disabled: !1
    }
  }
), Y = ({
  children: t = /* @__PURE__ */ v(oe, { children: /* @__PURE__ */ v(se, {}) }),
  tabIndex: i = 0,
  label: s,
  ref: f
}) => {
  const { design: c, disabled: b, onClear: u } = ue(), p = te(
    (m) => {
      m.stopPropagation(), !b && u && u(m);
    },
    [b, u]
  );
  return /* @__PURE__ */ v(
    "span",
    {
      className: fe({
        isBordered: ["outline", "dashed"].includes(`${c}`),
        disabled: !!b,
        design: c
      }),
      onClick: p,
      ref: f,
      children: /* @__PURE__ */ v(
        "button",
        {
          tabIndex: i,
          type: "button",
          disabled: !!b,
          className: he({ disabled: b }),
          "aria-label": s,
          children: t && ie(t, { ariaLabel: s })
        }
      )
    }
  );
};
Y.displayName = "Chip.ClearButton";
const J = ({ children: t, className: i, ref: s }) => /* @__PURE__ */ v("span", { className: L("inline-block grow truncate", i), ref: s, children: t });
J.displayName = "Chip.Content";
const j = ({ children: t, className: i, ref: s }) => /* @__PURE__ */ v("span", { className: L("flex h-full items-center justify-center", i), ref: s, children: t });
j.displayName = "Chip.Icon";
const Q = ({
  className: t,
  ref: i,
  ...s
}) => /* @__PURE__ */ v(j, { className: L("mr-sm", t), ref: i, ...s });
Q.displayName = "Chip.LeadingIcon";
const U = ({
  className: t,
  ref: i,
  ...s
}) => /* @__PURE__ */ v(j, { className: L("ml-md", t), ref: i, ...s });
U.displayName = "Chip.TrailingIcon";
const B = Object.assign(R, {
  Content: J,
  LeadingIcon: Q,
  TrailingIcon: U,
  ClearButton: Y
});
B.displayName = "Chip";
B.ClearButton.displayName = "Chip.ClearButton";
B.Content.displayName = "Chip.Content";
B.LeadingIcon.displayName = "Chip.LeadingIcon";
B.TrailingIcon.displayName = "Chip.TrailingIcon";
export {
  B as Chip
};
//# sourceMappingURL=index.mjs.map
