@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/chip/index.mjs

@@ -1,17 +1,18 @@
-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 = [
+import { jsx as r, jsxs as A, Fragment as F } from "react/jsx-runtime";
+import { tw as e, makeVariants as E } from "@spark-ui/internal-utils";
+import { cva as B, cx as C } from "class-variance-authority";
+import { createContext as H, useContext as K, Children as O, isValidElement as W, useCallback as q, cloneElement as G } from "react";
+import { useCombinedState as V } from "@spark-ui/hooks/use-combined-state";
+import { emulateTab as k } from "emulate-tab";
+import { a as L } from "../Slot-D2Bbf8Gw.mjs";
+import { Close as J } from "@spark-ui/icons/Close";
+import { I as M } from "../Icon-Ck-dhfLd.mjs";
+const Q = [
   /** Intents **/
   {
     design: "outlined",
     intent: "main",
-    class: a([
+    class: e([
       "enabled:hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -22,7 +23,7 @@ const de = [
   {
     design: "outlined",
     intent: "support",
-    class: a([
+    class: e([
       "enabled:hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -33,7 +34,7 @@ const de = [
   {
     design: "outlined",
     intent: "basic",
-    class: a([
+    class: e([
       "enabled:hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -44,7 +45,7 @@ const de = [
   {
     intent: "accent",
     design: "outlined",
-    class: a([
+    class: e([
       "enabled:hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -56,7 +57,7 @@ const de = [
   {
     design: "outlined",
     intent: "success",
-    class: a([
+    class: e([
       "enabled:hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -67,7 +68,7 @@ const de = [
   {
     intent: "alert",
     design: "outlined",
-    class: a([
+    class: e([
       "enabled:hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -78,7 +79,7 @@ const de = [
   {
     design: "outlined",
     intent: "danger",
-    class: a([
+    class: e([
       "enabled:hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -89,7 +90,7 @@ const de = [
   {
     design: "outlined",
     intent: "info",
-    class: a([
+    class: e([
       "enabled:hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -100,7 +101,7 @@ const de = [
   {
     design: "outlined",
     intent: "neutral",
-    class: a([
+    class: e([
       "enabled:hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -111,7 +112,7 @@ const de = [
   {
     design: "outlined",
     intent: "surface",
-    class: a([
+    class: e([
       "enabled:hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -123,19 +124,19 @@ const de = [
   {
     design: "outlined",
     hasClearButton: !1,
-    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    class: e(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   },
   {
     design: "outlined",
     hasClearButton: !0,
-    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    class: e(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   }
-], ce = [
+], R = [
   /** Intents **/
   {
     intent: "main",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-main-container",
       "enabled:hover:bg-main-container-hovered",
       "enabled:active:bg-main-container-hovered",
@@ -147,7 +148,7 @@ const de = [
   {
     intent: "support",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-support-container",
       "enabled:hover:bg-support-container-hovered",
       "enabled:active:bg-support-container-hovered",
@@ -159,7 +160,7 @@ const de = [
   {
     intent: "basic",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-basic-container",
       "enabled:hover:bg-basic-container-hovered",
       "enabled:active:bg-basic-container-hovered",
@@ -171,7 +172,7 @@ const de = [
   {
     intent: "accent",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-accent-container",
       "enabled:hover:bg-accent-container-hovered",
       "enabled:active:bg-accent-container-hovered",
@@ -183,7 +184,7 @@ const de = [
   {
     intent: "success",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-success-container",
       "enabled:hover:bg-success-container-hovered",
       "enabled:active:bg-success-container-hovered",
@@ -195,7 +196,7 @@ const de = [
   {
     intent: "alert",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-alert-container",
       "enabled:hover:bg-alert-container-hovered",
       "enabled:active:bg-alert-container-hovered",
@@ -207,7 +208,7 @@ const de = [
   {
     intent: "danger",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-error-container",
       "enabled:hover:bg-error-container-hovered",
       "enabled:active:bg-error-container-hovered",
@@ -219,7 +220,7 @@ const de = [
   {
     intent: "info",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-info-container",
       "enabled:hover:bg-info-container-hovered",
       "enabled:active:bg-info-container-hovered",
@@ -231,7 +232,7 @@ const de = [
   {
     intent: "neutral",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-neutral-container",
       "enabled:hover:bg-neutral-container-hovered",
       "enabled:active:bg-neutral-container-hovered",
@@ -243,7 +244,7 @@ const de = [
   {
     intent: "surface",
     design: "tinted",
-    class: a([
+    class: e([
       "bg-surface/dim-1",
       "enabled:hover:bg-surface-hovered/dim-1",
       "enabled:active:bg-surface-hovered/dim-1",
@@ -256,19 +257,19 @@ const de = [
   {
     design: "tinted",
     hasClearButton: !1,
-    class: a(["px-md"])
+    class: e(["px-md"])
   },
   {
     design: "tinted",
     hasClearButton: !0,
-    class: a(["pl-md"])
+    class: e(["pl-md"])
   }
-], le = [
+], U = [
   /** Intents **/
   {
     intent: "main",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -279,7 +280,7 @@ const de = [
   {
     intent: "support",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -290,7 +291,7 @@ const de = [
   {
     intent: "basic",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -301,7 +302,7 @@ const de = [
   {
     intent: "accent",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -312,7 +313,7 @@ const de = [
   {
     intent: "success",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -323,7 +324,7 @@ const de = [
   {
     intent: "alert",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -334,7 +335,7 @@ const de = [
   {
     intent: "danger",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -345,7 +346,7 @@ const de = [
   {
     intent: "info",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -356,7 +357,7 @@ const de = [
   {
     intent: "neutral",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -367,7 +368,7 @@ const de = [
   {
     intent: "surface",
     design: "dashed",
-    class: a([
+    class: e([
       "enabled:hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -379,14 +380,14 @@ const de = [
   {
     design: "dashed",
     hasClearButton: !1,
-    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    class: e(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   },
   {
     design: "dashed",
     hasClearButton: !0,
-    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    class: e(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   }
-], be = H(
+], X = B(
   [
     "box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular",
     "focus-visible:u-outline",
@@ -405,7 +406,7 @@ const de = [
        *
        * - `dashed`: Chip will be transparent with an outline dashed.
        */
-      design: O({
+      design: E({
         outlined: ["bg-transparent border-sm border-solid border-current"],
         tinted: [""],
         dashed: [
@@ -415,7 +416,7 @@ const de = [
       /**
        * Color scheme of the chip.
        */
-      intent: O({
+      intent: E({
         main: [],
         support: [],
         basic: [],
@@ -439,298 +440,123 @@ const de = [
       }
       // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'
     },
-    compoundVariants: [...de, ...ce, ...le],
+    compoundVariants: [...Q, ...R, ...U],
     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
+), T = H({}), Y = () => K(T) || {}, Z = (a) => a ? a.type.displayName : "", _ = (a) => (...n) => O.toArray(a).filter(W).find((o) => {
+  const s = Z(o);
+  return n.includes(s || "");
+}), ee = ({
+  onClick: a,
+  asChild: n,
+  pressed: i,
+  defaultPressed: o,
+  disabled: s,
+  value: d,
+  defaultValue: c,
+  children: g,
+  onClear: l
 }) => {
-  const [l, N] = S(s, f), [x] = S(
+  const [t, y] = V(i, o), [h] = V(
+    d,
+    c
+  ), m = _(g), b = m("Chip.LeadingIcon"), f = m("Chip.TrailingIcon"), v = m("Chip.Content"), p = m("Chip.ClearButton"), $ = (a || t) !== void 0, I = [b, v, p].every(
+    (u) => u === void 0
+  ) ? /* @__PURE__ */ r("span", { className: "inline-block grow truncate", children: g }) : /* @__PURE__ */ A(F, { children: [
     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());
+    v,
+    b === void 0 ? f : null,
+    p
+  ] }), w = (u) => {
+    p && !s && ["Delete", "Backspace"].includes(u.key) && l && (l(), u.key === "Delete" && k(), u.key === "Backspace" && k.backwards());
   };
-  return T ? {
-    Element: i ? F : "button",
+  return $ ? {
+    Element: n ? L : "button",
     chipProps: {
       type: "button",
-      ...l !== void 0 && {
-        "aria-pressed": l,
-        "data-state": l ? "on" : "off"
+      ...t !== void 0 && {
+        "aria-pressed": t,
+        "data-state": t ? "on" : "off"
       },
-      onClick: (C) => {
-        l !== void 0 && N(!l), t && t(C, { pressed: l, value: x });
+      onClick: (u) => {
+        t !== void 0 && y(!t), a && a(u, { pressed: t, value: h });
       },
-      onKeyDown: V,
-      disabled: c,
-      children: k
+      onKeyDown: w,
+      disabled: s,
+      children: I
     },
     compoundElements: {
-      leadingIcon: g,
-      trailingIcon: I,
-      content: E,
-      clearButton: h
+      leadingIcon: b,
+      trailingIcon: f,
+      content: v,
+      clearButton: p
     }
   } : {
-    Element: i ? F : "div",
+    Element: n ? L : "div",
     chipProps: {
-      "aria-disabled": c,
-      children: k,
-      onKeyDown: V
+      "aria-disabled": s,
+      children: I,
+      onKeyDown: w
     },
     compoundElements: {
-      leadingIcon: g,
-      trailingIcon: I,
-      content: E,
-      clearButton: h
+      leadingIcon: b,
+      trailingIcon: f,
+      content: v,
+      clearButton: p
     }
   };
-}, 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
+}, j = ({
+  design: a = "outlined",
+  disabled: n,
+  children: i,
+  intent: o = "basic",
+  defaultPressed: s,
+  pressed: d,
+  asChild: c,
+  className: g,
+  onClick: l,
+  onClear: t,
+  ref: y,
+  ...h
 }) => {
   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,
+    Element: m,
+    chipProps: { children: b, ...f },
+    compoundElements: v
+  } = ee({
+    asChild: c,
+    pressed: d,
+    defaultPressed: s,
+    onClick: l,
+    disabled: !!n,
+    value: h.value,
+    defaultValue: h.defaultValue,
+    children: i,
+    onClear: t
+  }), { clearButton: p } = v;
+  return /* @__PURE__ */ r(T.Provider, { value: { disabled: n, design: a, intent: o, onClear: t }, children: /* @__PURE__ */ r(
+    m,
     {
-      ref: N,
-      className: be({
-        className: p,
-        design: t,
-        disabled: i,
-        intent: f,
-        hasClearButton: !!h
+      ref: y,
+      className: X({
+        className: g,
+        design: a,
+        disabled: n,
+        intent: o,
+        hasClearButton: !!p
       }),
-      ...I,
-      ...x,
+      ...f,
+      ...h,
       "data-spark-component": "chip",
-      children: g
+      children: b
     }
   ) });
 };
-R.displayName = "Chip";
-const fe = H(
+j.displayName = "Chip";
+const ae = B(
   ["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],
   {
     variants: {
@@ -752,36 +578,36 @@ const fe = H(
       {
         design: "outlined",
         disabled: !1,
-        class: a(["hover:opacity-dim-1"])
+        class: e(["hover:opacity-dim-1"])
       },
       {
         design: "outlined",
         disabled: !0,
-        class: a(["opacity-dim-3"])
+        class: e(["opacity-dim-3"])
       },
       {
         design: "tinted",
         disabled: !1,
-        class: a(["hover:opacity-dim-1"])
+        class: e(["hover:opacity-dim-1"])
       },
       {
         design: "tinted",
         disabled: !0,
-        class: a(["opacity-dim-3"])
+        class: e(["opacity-dim-3"])
       },
       {
         design: "dashed",
         disabled: !1,
-        class: a(["hover:opacity-dim-1"])
+        class: e(["hover:opacity-dim-1"])
       },
       {
         design: "dashed",
         disabled: !0,
-        class: a(["opacity-dim-3"])
+        class: e(["opacity-dim-3"])
       }
     ]
   }
-), he = H(
+), ne = B(
   ["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm", "focus-visible:u-outline"],
   {
     variants: {
@@ -794,71 +620,71 @@ const fe = H(
       disabled: !1
     }
   }
-), Y = ({
-  children: t = /* @__PURE__ */ v(oe, { children: /* @__PURE__ */ v(se, {}) }),
-  tabIndex: i = 0,
-  label: s,
-  ref: f
+), P = ({
+  children: a = /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(J, {}) }),
+  tabIndex: n = 0,
+  label: i,
+  ref: o
 }) => {
-  const { design: c, disabled: b, onClear: u } = ue(), p = te(
-    (m) => {
-      m.stopPropagation(), !b && u && u(m);
+  const { design: s, disabled: d, onClear: c } = Y(), g = q(
+    (l) => {
+      l.stopPropagation(), !d && c && c(l);
     },
-    [b, u]
+    [d, c]
   );
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ r(
     "span",
     {
-      className: fe({
-        isBordered: ["outline", "dashed"].includes(`${c}`),
-        disabled: !!b,
-        design: c
+      className: ae({
+        isBordered: ["outline", "dashed"].includes(`${s}`),
+        disabled: !!d,
+        design: s
       }),
-      onClick: p,
-      ref: f,
-      children: /* @__PURE__ */ v(
+      onClick: g,
+      ref: o,
+      children: /* @__PURE__ */ r(
         "button",
         {
-          tabIndex: i,
+          tabIndex: n,
           type: "button",
-          disabled: !!b,
-          className: he({ disabled: b }),
-          "aria-label": s,
-          children: t && ie(t, { ariaLabel: s })
+          disabled: !!d,
+          className: ne({ disabled: d }),
+          "aria-label": i,
+          children: a && G(a, { ariaLabel: i })
         }
       )
     }
   );
 };
-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
+P.displayName = "Chip.ClearButton";
+const S = ({ children: a, className: n, ref: i }) => /* @__PURE__ */ r("span", { className: C("inline-block grow truncate", n), ref: i, children: a });
+S.displayName = "Chip.Content";
+const N = ({ children: a, className: n, ref: i }) => /* @__PURE__ */ r("span", { className: C("flex h-full items-center justify-center", n), ref: i, children: a });
+N.displayName = "Chip.Icon";
+const z = ({
+  className: a,
+  ref: n,
+  ...i
+}) => /* @__PURE__ */ r(N, { className: C("mr-sm", a), ref: n, ...i });
+z.displayName = "Chip.LeadingIcon";
+const D = ({
+  className: a,
+  ref: n,
+  ...i
+}) => /* @__PURE__ */ r(N, { className: C("ml-md", a), ref: n, ...i });
+D.displayName = "Chip.TrailingIcon";
+const x = Object.assign(j, {
+  Content: S,
+  LeadingIcon: z,
+  TrailingIcon: D,
+  ClearButton: P
 });
-B.displayName = "Chip";
-B.ClearButton.displayName = "Chip.ClearButton";
-B.Content.displayName = "Chip.Content";
-B.LeadingIcon.displayName = "Chip.LeadingIcon";
-B.TrailingIcon.displayName = "Chip.TrailingIcon";
+x.displayName = "Chip";
+x.ClearButton.displayName = "Chip.ClearButton";
+x.Content.displayName = "Chip.Content";
+x.LeadingIcon.displayName = "Chip.LeadingIcon";
+x.TrailingIcon.displayName = "Chip.TrailingIcon";
 export {
-  B as Chip
+  x as Chip
 };
 //# sourceMappingURL=index.mjs.map