@spark-ui/components 13.0.7 → 13.1.0

package/dist/chip/index.mjs

@@ -1,23 +1,17 @@
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import {
-  Slot
-} from "../chunk-6QCEPQ3U.mjs";
-
-// src/chip/Chip.styles.tsx
-import { makeVariants } from "@spark-ui/internal-utils";
-import { cva } from "class-variance-authority";
-
-// src/chip/variants/outlined.ts
-import { tw } from "@spark-ui/internal-utils";
-var outlinedVariants = [
+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: tw([
+    class: a([
       "enabled:hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -28,7 +22,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "support",
-    class: tw([
+    class: a([
       "enabled:hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -39,7 +33,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "basic",
-    class: tw([
+    class: a([
       "enabled:hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -50,7 +44,7 @@ var outlinedVariants = [
   {
     intent: "accent",
     design: "outlined",
-    class: tw([
+    class: a([
       "enabled:hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -62,7 +56,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "success",
-    class: tw([
+    class: a([
       "enabled:hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -73,7 +67,7 @@ var outlinedVariants = [
   {
     intent: "alert",
     design: "outlined",
-    class: tw([
+    class: a([
       "enabled:hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -84,7 +78,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "danger",
-    class: tw([
+    class: a([
       "enabled:hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -95,7 +89,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "info",
-    class: tw([
+    class: a([
       "enabled:hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -106,7 +100,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "neutral",
-    class: tw([
+    class: a([
       "enabled:hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -117,7 +111,7 @@ var outlinedVariants = [
   {
     design: "outlined",
     intent: "surface",
-    class: tw([
+    class: a([
       "enabled:hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -128,24 +122,20 @@ var outlinedVariants = [
   /** Spacings **/
   {
     design: "outlined",
-    hasClearButton: false,
-    class: tw(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: !1,
+    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   },
   {
     design: "outlined",
-    hasClearButton: true,
-    class: tw(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: !0,
+    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   }
-];
-
-// src/chip/variants/tinted.ts
-import { tw as tw2 } from "@spark-ui/internal-utils";
-var tintedVariants = [
+], ce = [
   /** Intents **/
   {
     intent: "main",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-main-container",
       "enabled:hover:bg-main-container-hovered",
       "enabled:active:bg-main-container-hovered",
@@ -157,7 +147,7 @@ var tintedVariants = [
   {
     intent: "support",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-support-container",
       "enabled:hover:bg-support-container-hovered",
       "enabled:active:bg-support-container-hovered",
@@ -169,7 +159,7 @@ var tintedVariants = [
   {
     intent: "basic",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-basic-container",
       "enabled:hover:bg-basic-container-hovered",
       "enabled:active:bg-basic-container-hovered",
@@ -181,7 +171,7 @@ var tintedVariants = [
   {
     intent: "accent",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-accent-container",
       "enabled:hover:bg-accent-container-hovered",
       "enabled:active:bg-accent-container-hovered",
@@ -193,7 +183,7 @@ var tintedVariants = [
   {
     intent: "success",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-success-container",
       "enabled:hover:bg-success-container-hovered",
       "enabled:active:bg-success-container-hovered",
@@ -205,7 +195,7 @@ var tintedVariants = [
   {
     intent: "alert",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-alert-container",
       "enabled:hover:bg-alert-container-hovered",
       "enabled:active:bg-alert-container-hovered",
@@ -217,7 +207,7 @@ var tintedVariants = [
   {
     intent: "danger",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-error-container",
       "enabled:hover:bg-error-container-hovered",
       "enabled:active:bg-error-container-hovered",
@@ -229,7 +219,7 @@ var tintedVariants = [
   {
     intent: "info",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-info-container",
       "enabled:hover:bg-info-container-hovered",
       "enabled:active:bg-info-container-hovered",
@@ -241,7 +231,7 @@ var tintedVariants = [
   {
     intent: "neutral",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-neutral-container",
       "enabled:hover:bg-neutral-container-hovered",
       "enabled:active:bg-neutral-container-hovered",
@@ -253,7 +243,7 @@ var tintedVariants = [
   {
     intent: "surface",
     design: "tinted",
-    class: tw2([
+    class: a([
       "bg-surface/dim-1",
       "enabled:hover:bg-surface-hovered/dim-1",
       "enabled:active:bg-surface-hovered/dim-1",
@@ -265,24 +255,20 @@ var tintedVariants = [
   /** Spacings **/
   {
     design: "tinted",
-    hasClearButton: false,
-    class: tw2(["px-md"])
+    hasClearButton: !1,
+    class: a(["px-md"])
   },
   {
     design: "tinted",
-    hasClearButton: true,
-    class: tw2(["pl-md"])
+    hasClearButton: !0,
+    class: a(["pl-md"])
   }
-];
-
-// src/chip/variants/dashed.ts
-import { tw as tw3 } from "@spark-ui/internal-utils";
-var dashedVariants = [
+], le = [
   /** Intents **/
   {
     intent: "main",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -293,7 +279,7 @@ var dashedVariants = [
   {
     intent: "support",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -304,7 +290,7 @@ var dashedVariants = [
   {
     intent: "basic",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -315,7 +301,7 @@ var dashedVariants = [
   {
     intent: "accent",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -326,7 +312,7 @@ var dashedVariants = [
   {
     intent: "success",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -337,7 +323,7 @@ var dashedVariants = [
   {
     intent: "alert",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -348,7 +334,7 @@ var dashedVariants = [
   {
     intent: "danger",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -359,7 +345,7 @@ var dashedVariants = [
   {
     intent: "info",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -370,7 +356,7 @@ var dashedVariants = [
   {
     intent: "neutral",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -381,7 +367,7 @@ var dashedVariants = [
   {
     intent: "surface",
     design: "dashed",
-    class: tw3([
+    class: a([
       "enabled:hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -392,18 +378,15 @@ var dashedVariants = [
   /** Spacings **/
   {
     design: "dashed",
-    hasClearButton: false,
-    class: tw3(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: !1,
+    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   },
   {
     design: "dashed",
-    hasClearButton: true,
-    class: tw3(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: !0,
+    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   }
-];
-
-// src/chip/Chip.styles.tsx
-var chipStyles = cva(
+], 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",
@@ -422,7 +405,7 @@ var chipStyles = cva(
        *
        * - `dashed`: Chip will be transparent with an outline dashed.
        */
-      design: makeVariants({
+      design: O({
         outlined: ["bg-transparent border-sm border-solid border-current"],
         tinted: [""],
         dashed: [
@@ -432,7 +415,7 @@ var chipStyles = cva(
       /**
        * Color scheme of the chip.
        */
-      intent: makeVariants({
+      intent: O({
         main: [],
         support: [],
         basic: [],
@@ -456,182 +439,298 @@ var chipStyles = cva(
       }
       // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'
     },
-    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],
+    compoundVariants: [...de, ...ce, ...le],
     defaultVariants: {
       design: "outlined",
       intent: "basic"
     }
   }
-);
-
-// src/chip/useChipContext.tsx
-import { createContext, useContext } from "react";
-var ChipContext = createContext({});
-var useChipContext = () => useContext(ChipContext) || {};
-
-// src/chip/useChipElement.tsx
-import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { emulateTab } from "emulate-tab";
-import {
-  Children,
-  isValidElement
-} from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var getDisplayName = (element) => {
-  return element ? element.type.displayName : "";
-};
-var findElement = (children) => (...values) => {
-  const validChildren = Children.toArray(children).filter(isValidElement);
-  return validChildren.find((child) => {
-    const displayName = getDisplayName(child);
-    return values.includes(displayName || "");
-  });
-};
-var useChipElement = ({
-  onClick,
-  asChild,
-  pressed,
-  defaultPressed,
-  disabled,
-  value,
-  defaultValue,
-  children,
-  onClear
-}) => {
-  const [isPressed, setIsPressed] = useCombinedState(pressed, defaultPressed);
-  const [innerValue] = useCombinedState(
-    value,
-    defaultValue
-  );
-  const findChipElement = findElement(children);
-  const leadingIcon = findChipElement("Chip.LeadingIcon");
-  const trailingIcon = findChipElement("Chip.TrailingIcon");
-  const content = findChipElement("Chip.Content");
-  const clearButton = findChipElement("Chip.ClearButton");
-  const isButton = (onClick || isPressed) !== void 0;
-  const formattedChildren = [leadingIcon, content, clearButton].every(
-    (element) => element === void 0
-  ) ? /* @__PURE__ */ jsx("span", { className: "inline-block grow truncate", children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    leadingIcon,
-    content,
-    leadingIcon === void 0 ? trailingIcon : null,
-    clearButton
-  ] });
-  const onKeyDown = (event) => {
-    if (!!clearButton && !disabled && ["Delete", "Backspace"].includes(event.key)) {
-      if (onClear) {
-        onClear();
-        event.key === "Delete" && emulateTab();
-        event.key === "Backspace" && emulateTab.backwards();
-      }
+), $ = 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);
     }
-  };
-  if (isButton) {
-    return {
-      Element: asChild ? Slot : "button",
-      chipProps: {
-        type: "button",
-        ...isPressed !== void 0 && {
-          "aria-pressed": isPressed,
-          "data-state": isPressed ? "on" : "off"
+    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);
         },
-        onClick: (event) => {
-          isPressed !== void 0 && setIsPressed(!isPressed);
-          onClick && onClick(event, { pressed: isPressed, value: innerValue });
+        /**
+         * 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));
         },
-        onKeyDown,
-        disabled,
-        children: formattedChildren
-      },
-      compoundElements: {
-        leadingIcon,
-        trailingIcon,
-        content,
-        clearButton
+        /**
+         * 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;
     };
-  }
-  return {
-    Element: asChild ? Slot : "div",
+    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": disabled,
-      children: formattedChildren,
-      onKeyDown
+      "aria-disabled": c,
+      children: k,
+      onKeyDown: V
     },
     compoundElements: {
-      leadingIcon,
-      trailingIcon,
-      content,
-      clearButton
+      leadingIcon: g,
+      trailingIcon: I,
+      content: E,
+      clearButton: h
     }
   };
-};
-
-// src/chip/Chip.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Chip = ({
-  design = "outlined",
-  disabled,
-  children,
-  intent = "basic",
-  defaultPressed,
-  pressed,
-  asChild,
-  className,
-  onClick,
-  onClear,
-  ref: forwardedRef,
-  ...otherProps
+}, 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: ChipElement,
-    chipProps: { children: formattedChildren, ...chipProps },
-    compoundElements
-  } = useChipElement({
-    asChild,
-    pressed,
-    defaultPressed,
-    onClick,
-    disabled: !!disabled,
-    value: otherProps.value,
-    defaultValue: otherProps.defaultValue,
-    children,
-    onClear
-  });
-  const { clearButton } = compoundElements;
-  return /* @__PURE__ */ jsx2(ChipContext.Provider, { value: { disabled, design, intent, onClear }, children: /* @__PURE__ */ jsx2(
-    ChipElement,
+    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: forwardedRef,
-      className: chipStyles({
-        className,
-        design,
-        disabled,
-        intent,
-        hasClearButton: !!clearButton
+      ref: N,
+      className: be({
+        className: p,
+        design: t,
+        disabled: i,
+        intent: f,
+        hasClearButton: !!h
       }),
-      ...{
-        ...chipProps,
-        ...otherProps
-      },
+      ...I,
+      ...x,
       "data-spark-component": "chip",
-      children: formattedChildren
+      children: g
     }
   ) });
 };
-Chip.displayName = "Chip";
-
-// src/chip/ChipClearButton.tsx
-import { Close } from "@spark-ui/icons/Close";
-import {
-  cloneElement,
-  useCallback
-} from "react";
-
-// src/chip/ChipClearButton.styles.tsx
-import { tw as tw4 } from "@spark-ui/internal-utils";
-import { cva as cva2 } from "class-variance-authority";
-var chipClearButtonWrapperStyles = cva2(
+R.displayName = "Chip";
+const fe = H(
   ["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],
   {
     variants: {
@@ -652,38 +751,37 @@ var chipClearButtonWrapperStyles = cva2(
     compoundVariants: [
       {
         design: "outlined",
-        disabled: false,
-        class: tw4(["hover:opacity-dim-1"])
+        disabled: !1,
+        class: a(["hover:opacity-dim-1"])
       },
       {
         design: "outlined",
-        disabled: true,
-        class: tw4(["opacity-dim-3"])
+        disabled: !0,
+        class: a(["opacity-dim-3"])
       },
       {
         design: "tinted",
-        disabled: false,
-        class: tw4(["hover:opacity-dim-1"])
+        disabled: !1,
+        class: a(["hover:opacity-dim-1"])
       },
       {
         design: "tinted",
-        disabled: true,
-        class: tw4(["opacity-dim-3"])
+        disabled: !0,
+        class: a(["opacity-dim-3"])
       },
       {
         design: "dashed",
-        disabled: false,
-        class: tw4(["hover:opacity-dim-1"])
+        disabled: !1,
+        class: a(["hover:opacity-dim-1"])
       },
       {
         design: "dashed",
-        disabled: true,
-        class: tw4(["opacity-dim-3"])
+        disabled: !0,
+        class: a(["opacity-dim-3"])
       }
     ]
   }
-);
-var chipClearButtonStyles = cva2(
+), he = H(
   ["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm", "focus-visible:u-outline"],
   {
     variants: {
@@ -693,104 +791,74 @@ var chipClearButtonStyles = cva2(
       }
     },
     defaultVariants: {
-      disabled: false
+      disabled: !1
     }
   }
-);
-
-// src/chip/ChipClearButton.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ChipClearButton = ({
-  children = /* @__PURE__ */ jsx3(Icon, { children: /* @__PURE__ */ jsx3(Close, {}) }),
-  tabIndex = 0,
-  label,
-  ref: forwardedRef
+), Y = ({
+  children: t = /* @__PURE__ */ v(oe, { children: /* @__PURE__ */ v(se, {}) }),
+  tabIndex: i = 0,
+  label: s,
+  ref: f
 }) => {
-  const { design, disabled, onClear } = useChipContext();
-  const onClearHandler = useCallback(
-    (event) => {
-      event.stopPropagation();
-      !disabled && onClear && onClear(event);
+  const { design: c, disabled: b, onClear: u } = ue(), p = te(
+    (m) => {
+      m.stopPropagation(), !b && u && u(m);
     },
-    [disabled, onClear]
+    [b, u]
   );
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ v(
     "span",
     {
-      className: chipClearButtonWrapperStyles({
-        isBordered: ["outline", "dashed"].includes(`${design}`),
-        disabled: !!disabled,
-        design
+      className: fe({
+        isBordered: ["outline", "dashed"].includes(`${c}`),
+        disabled: !!b,
+        design: c
       }),
-      onClick: onClearHandler,
-      ref: forwardedRef,
-      children: /* @__PURE__ */ jsx3(
+      onClick: p,
+      ref: f,
+      children: /* @__PURE__ */ v(
         "button",
         {
-          tabIndex,
+          tabIndex: i,
           type: "button",
-          disabled: !!disabled,
-          className: chipClearButtonStyles({ disabled }),
-          "aria-label": label,
-          children: children && cloneElement(children, { ariaLabel: label })
+          disabled: !!b,
+          className: he({ disabled: b }),
+          "aria-label": s,
+          children: t && ie(t, { ariaLabel: s })
         }
       )
     }
   );
 };
-ChipClearButton.displayName = "Chip.ClearButton";
-
-// src/chip/ChipContent.tsx
-import { cx } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ChipContent = ({ children, className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ jsx4("span", { className: cx("inline-block grow truncate", className), ref: forwardedRef, children });
-};
-ChipContent.displayName = "Chip.Content";
-
-// src/chip/ChipLeadingIcon.tsx
-import { cx as cx3 } from "class-variance-authority";
-
-// src/chip/ChipIcon.tsx
-import { cx as cx2 } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ChipIcon = ({ children, className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ jsx5("span", { className: cx2("flex h-full items-center justify-center", className), ref: forwardedRef, children });
-};
-ChipIcon.displayName = "Chip.Icon";
-
-// src/chip/ChipLeadingIcon.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ChipLeadingIcon = ({
-  className,
-  ref: forwardedRef,
-  ...props
-}) => /* @__PURE__ */ jsx6(ChipIcon, { className: cx3("mr-sm", className), ref: forwardedRef, ...props });
-ChipLeadingIcon.displayName = "Chip.LeadingIcon";
-
-// src/chip/ChipTrailingIcon.tsx
-import { cx as cx4 } from "class-variance-authority";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ChipTrailingIcon = ({
-  className,
-  ref: forwardedRef,
-  ...props
-}) => /* @__PURE__ */ jsx7(ChipIcon, { className: cx4("ml-md", className), ref: forwardedRef, ...props });
-ChipTrailingIcon.displayName = "Chip.TrailingIcon";
-
-// src/chip/index.ts
-var Chip2 = Object.assign(Chip, {
-  Content: ChipContent,
-  LeadingIcon: ChipLeadingIcon,
-  TrailingIcon: ChipTrailingIcon,
-  ClearButton: ChipClearButton
+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
 });
-Chip2.displayName = "Chip";
-Chip2.ClearButton.displayName = "Chip.ClearButton";
-Chip2.Content.displayName = "Chip.Content";
-Chip2.LeadingIcon.displayName = "Chip.LeadingIcon";
-Chip2.TrailingIcon.displayName = "Chip.TrailingIcon";
+B.displayName = "Chip";
+B.ClearButton.displayName = "Chip.ClearButton";
+B.Content.displayName = "Chip.Content";
+B.LeadingIcon.displayName = "Chip.LeadingIcon";
+B.TrailingIcon.displayName = "Chip.TrailingIcon";
 export {
-  Chip2 as Chip
+  B as Chip
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map