@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/chip/index.mjs

@@ -1,655 +1,604 @@
-import { jsx as i, 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 { S as L } from "../Slot-DLY1rJrG.mjs";
-import { Close as J } from "@spark-ui/icons/Close";
-import { I as M } from "../Icon-BO327oHU.mjs";
-const Q = [
-  /** Intents **/
-  {
-    design: "outlined",
-    intent: "main",
-    class: e([
-      "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: e([
-      "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: "accent",
-    design: "outlined",
-    class: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  },
-  {
-    design: "outlined",
-    hasClearButton: !0,
-    class: e(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  }
-], R = [
-  /** Intents **/
-  {
-    intent: "main",
-    design: "tinted",
-    class: e([
-      "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: e([
-      "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: "accent",
-    design: "tinted",
-    class: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e(["px-md"])
-  },
-  {
-    design: "tinted",
-    hasClearButton: !0,
-    class: e(["pl-md"])
-  }
-], U = [
-  /** Intents **/
-  {
-    intent: "main",
-    design: "dashed",
-    class: e([
-      "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: e([
-      "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: "accent",
-    design: "dashed",
-    class: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e([
-      "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: e(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  },
-  {
-    design: "dashed",
-    hasClearButton: !0,
-    class: e(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  }
-], 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",
-    "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: E({
-        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: E({
-        main: [],
-        support: [],
-        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: [...Q, ...R, ...U],
-    defaultVariants: {
-      design: "outlined",
-      intent: "support"
-    }
-  }
-), 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: r,
-  defaultPressed: o,
-  disabled: s,
-  value: d,
-  defaultValue: c,
-  children: g,
-  onClear: l
-}) => {
-  const [t, y] = V(r, o), [h] = V(
-    d,
-    c
-  ), m = _(g), b = m("Chip.LeadingIcon"), f = m("Chip.TrailingIcon"), v = m("Chip.Content"), u = m("Chip.ClearButton"), $ = (a || t) !== void 0, I = [b, v, u].every(
-    (p) => p === void 0
-  ) ? /* @__PURE__ */ i("span", { className: "inline-block grow truncate", children: g }) : /* @__PURE__ */ A(F, { children: [
-    b,
-    v,
-    b === void 0 ? f : null,
-    u
-  ] }), w = (p) => {
-    u && !s && ["Delete", "Backspace"].includes(p.key) && l && (l(), p.key === "Delete" && k(), p.key === "Backspace" && k.backwards());
-  };
-  return $ ? {
-    Element: n ? L : "button",
-    chipProps: {
-      type: "button",
-      ...t !== void 0 && {
-        "aria-pressed": t,
-        "data-state": t ? "on" : "off"
-      },
-      onClick: (p) => {
-        t !== void 0 && y(!t), a && a(p, { pressed: t, value: h });
-      },
-      onKeyDown: w,
-      disabled: s,
-      children: I
-    },
-    compoundElements: {
-      leadingIcon: b,
-      trailingIcon: f,
-      content: v,
-      clearButton: u
-    }
-  } : {
-    Element: n ? L : "div",
-    chipProps: {
-      "aria-disabled": s,
-      children: I,
-      onKeyDown: w
-    },
-    compoundElements: {
-      leadingIcon: b,
-      trailingIcon: f,
-      content: v,
-      clearButton: u
-    }
-  };
-}, j = ({
-  design: a = "outlined",
-  disabled: n,
-  children: r,
-  intent: o = "support",
-  defaultPressed: s,
-  pressed: d,
-  asChild: c,
-  className: g,
-  onClick: l,
-  onClear: t,
-  ref: y,
-  ...h
-}) => {
-  const {
-    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: r,
-    onClear: t
-  }), { clearButton: u } = v;
-  return /* @__PURE__ */ i(T.Provider, { value: { disabled: n, design: a, intent: o, onClear: t }, children: /* @__PURE__ */ i(
-    m,
-    {
-      ref: y,
-      className: X({
-        className: g,
-        design: a,
-        disabled: n,
-        intent: o,
-        hasClearButton: !!u
-      }),
-      ...f,
-      ...h,
-      "data-spark-component": "chip",
-      children: b
-    }
-  ) });
+import { Slot as e } from "../slot/index.mjs";
+import { t } from "../icon-D05Uqh8_.mjs";
+import { cva as n, cx as r } from "class-variance-authority";
+import { Children as i, cloneElement as a, createContext as o, isValidElement as s, useCallback as c, useContext as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { makeVariants as p, tw as m } from "@spark-ui/internal-utils";
+import { useCombinedState as h } from "@spark-ui/hooks/use-combined-state";
+import { emulateTab as g } from "emulate-tab";
+import { Close as _ } from "@spark-ui/icons/Close";
+//#region src/chip/variants/outlined.ts
+var v = [
+	{
+		design: "outlined",
+		intent: "main",
+		class: m([
+			"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: m([
+			"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: "accent",
+		design: "outlined",
+		class: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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"
+		])
+	},
+	{
+		design: "outlined",
+		hasClearButton: !1,
+		class: m(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+	},
+	{
+		design: "outlined",
+		hasClearButton: !0,
+		class: m(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+	}
+], y = [
+	{
+		intent: "main",
+		design: "tinted",
+		class: m([
+			"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: m([
+			"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: "accent",
+		design: "tinted",
+		class: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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"
+		])
+	},
+	{
+		design: "tinted",
+		hasClearButton: !1,
+		class: m(["px-md"])
+	},
+	{
+		design: "tinted",
+		hasClearButton: !0,
+		class: m(["pl-md"])
+	}
+], b = [
+	{
+		intent: "main",
+		design: "dashed",
+		class: m([
+			"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: m([
+			"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: "accent",
+		design: "dashed",
+		class: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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: m([
+			"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"
+		])
+	},
+	{
+		design: "dashed",
+		hasClearButton: !1,
+		class: m(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+	},
+	{
+		design: "dashed",
+		hasClearButton: !0,
+		class: m(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+	}
+], x = n([
+	"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: {
+		design: p({
+			outlined: ["bg-transparent border-sm border-solid border-current"],
+			tinted: [""],
+			dashed: ["bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high"]
+		}),
+		intent: p({
+			main: [],
+			support: [],
+			accent: [],
+			success: [],
+			alert: [],
+			danger: [],
+			info: [],
+			neutral: [],
+			surface: []
+		}),
+		disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] },
+		hasClearButton: {
+			true: [],
+			false: []
+		}
+	},
+	compoundVariants: [
+		...v,
+		...y,
+		...b
+	],
+	defaultVariants: {
+		design: "outlined",
+		intent: "support"
+	}
+}), S = o({}), C = () => l(S) || {}, w = (e) => e ? e.type.displayName : "", T = (e) => (...t) => i.toArray(e).filter(s).find((e) => {
+	let n = w(e);
+	return t.includes(n || "");
+}), E = ({ onClick: t, asChild: n, pressed: r, defaultPressed: i, disabled: a, value: o, defaultValue: s, children: c, onClear: l }) => {
+	let [p, m] = h(r, i), [_] = h(o, s), v = T(c), y = v("Chip.LeadingIcon"), b = v("Chip.TrailingIcon"), x = v("Chip.Content"), S = v("Chip.ClearButton"), C = (t || p) !== void 0, w = [
+		y,
+		x,
+		S
+	].every((e) => e === void 0) ? /* @__PURE__ */ d("span", {
+		className: "inline-block grow truncate",
+		children: c
+	}) : /* @__PURE__ */ f(u, { children: [
+		y,
+		x,
+		y === void 0 ? b : null,
+		S
+	] }), E = (e) => {
+		S && !a && ["Delete", "Backspace"].includes(e.key) && l && (l(), e.key === "Delete" && g(), e.key === "Backspace" && g.backwards());
+	};
+	return C ? {
+		Element: n ? e : "button",
+		chipProps: {
+			type: "button",
+			...p !== void 0 && {
+				"aria-pressed": p,
+				"data-state": p ? "on" : "off"
+			},
+			onClick: (e) => {
+				p !== void 0 && m(!p), t && t(e, {
+					pressed: p,
+					value: _
+				});
+			},
+			onKeyDown: E,
+			disabled: a,
+			children: w
+		},
+		compoundElements: {
+			leadingIcon: y,
+			trailingIcon: b,
+			content: x,
+			clearButton: S
+		}
+	} : {
+		Element: n ? e : "div",
+		chipProps: {
+			"aria-disabled": a,
+			children: w,
+			onKeyDown: E
+		},
+		compoundElements: {
+			leadingIcon: y,
+			trailingIcon: b,
+			content: x,
+			clearButton: S
+		}
+	};
+}, D = ({ design: e = "outlined", disabled: t, children: n, intent: r = "support", defaultPressed: i, pressed: a, asChild: o, className: s, onClick: c, onClear: l, ref: u, ...f }) => {
+	let { Element: p, chipProps: { children: m, ...h }, compoundElements: g } = E({
+		asChild: o,
+		pressed: a,
+		defaultPressed: i,
+		onClick: c,
+		disabled: !!t,
+		value: f.value,
+		defaultValue: f.defaultValue,
+		children: n,
+		onClear: l
+	}), { clearButton: _ } = g;
+	return /* @__PURE__ */ d(S.Provider, {
+		value: {
+			disabled: t,
+			design: e,
+			intent: r,
+			onClear: l
+		},
+		children: /* @__PURE__ */ d(p, {
+			ref: u,
+			className: x({
+				className: s,
+				design: e,
+				disabled: t,
+				intent: r,
+				hasClearButton: !!_
+			}),
+			...h,
+			...f,
+			"data-spark-component": "chip",
+			children: m
+		})
+	});
 };
-j.displayName = "Chip";
-const ae = B(
-  ["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: e(["hover:opacity-dim-1"])
-      },
-      {
-        design: "outlined",
-        disabled: !0,
-        class: e(["opacity-dim-3"])
-      },
-      {
-        design: "tinted",
-        disabled: !1,
-        class: e(["hover:opacity-dim-1"])
-      },
-      {
-        design: "tinted",
-        disabled: !0,
-        class: e(["opacity-dim-3"])
-      },
-      {
-        design: "dashed",
-        disabled: !1,
-        class: e(["hover:opacity-dim-1"])
-      },
-      {
-        design: "dashed",
-        disabled: !0,
-        class: e(["opacity-dim-3"])
-      }
-    ]
-  }
-), ne = B(
-  ["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
-    }
-  }
-), P = ({
-  children: a = /* @__PURE__ */ i(M, { children: /* @__PURE__ */ i(J, {}) }),
-  tabIndex: n = 0,
-  label: r,
-  ref: o
-}) => {
-  const { design: s, disabled: d, onClear: c } = Y(), g = q(
-    (l) => {
-      l.stopPropagation(), !d && c && c(l);
-    },
-    [d, c]
-  );
-  return /* @__PURE__ */ i(
-    "span",
-    {
-      className: ae({
-        isBordered: ["outline", "dashed"].includes(`${s}`),
-        disabled: !!d,
-        design: s
-      }),
-      onClick: g,
-      ref: o,
-      children: /* @__PURE__ */ i(
-        "button",
-        {
-          tabIndex: n,
-          type: "button",
-          disabled: !!d,
-          className: ne({ disabled: d }),
-          "aria-label": r,
-          children: a && G(a, { ariaLabel: r })
-        }
-      )
-    }
-  );
+D.displayName = "Chip";
+//#endregion
+//#region src/chip/ChipClearButton.styles.tsx
+var O = n(["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: m(["hover:opacity-dim-1"])
+		},
+		{
+			design: "outlined",
+			disabled: !0,
+			class: m(["opacity-dim-3"])
+		},
+		{
+			design: "tinted",
+			disabled: !1,
+			class: m(["hover:opacity-dim-1"])
+		},
+		{
+			design: "tinted",
+			disabled: !0,
+			class: m(["opacity-dim-3"])
+		},
+		{
+			design: "dashed",
+			disabled: !1,
+			class: m(["hover:opacity-dim-1"])
+		},
+		{
+			design: "dashed",
+			disabled: !0,
+			class: m(["opacity-dim-3"])
+		}
+	]
+}), k = n(["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 }
+}), A = ({ children: e = /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d(_, {}) }), tabIndex: n = 0, label: r, ref: i }) => {
+	let { design: o, disabled: s, onClear: l } = C(), u = c((e) => {
+		e.stopPropagation(), !s && l && l(e);
+	}, [s, l]);
+	return /* @__PURE__ */ d("span", {
+		className: O({
+			isBordered: ["outline", "dashed"].includes(`${o}`),
+			disabled: !!s,
+			design: o
+		}),
+		onClick: u,
+		ref: i,
+		children: /* @__PURE__ */ d("button", {
+			tabIndex: n,
+			type: "button",
+			disabled: !!s,
+			className: k({ disabled: s }),
+			"aria-label": r,
+			children: e && a(e, { ariaLabel: r })
+		})
+	});
 };
-P.displayName = "Chip.ClearButton";
-const S = ({ children: a, className: n, ref: r }) => /* @__PURE__ */ i("span", { className: C("inline-block grow truncate", n), ref: r, children: a });
-S.displayName = "Chip.Content";
-const N = ({ children: a, className: n, ref: r }) => /* @__PURE__ */ i("span", { className: C("flex h-full items-center justify-center", n), ref: r, children: a });
-N.displayName = "Chip.Icon";
-const z = ({
-  className: a,
-  ref: n,
-  ...r
-}) => /* @__PURE__ */ i(N, { className: C("mr-sm", a), ref: n, ...r });
-z.displayName = "Chip.LeadingIcon";
-const D = ({
-  className: a,
-  ref: n,
-  ...r
-}) => /* @__PURE__ */ i(N, { className: C("ml-md", a), ref: n, ...r });
-D.displayName = "Chip.TrailingIcon";
-const x = Object.assign(j, {
-  Content: S,
-  LeadingIcon: z,
-  TrailingIcon: D,
-  ClearButton: P
+A.displayName = "Chip.ClearButton";
+//#endregion
+//#region src/chip/ChipContent.tsx
+var j = ({ children: e, className: t, ref: n }) => /* @__PURE__ */ d("span", {
+	className: r("inline-block grow truncate", t),
+	ref: n,
+	children: e
 });
-x.displayName = "Chip";
-x.ClearButton.displayName = "Chip.ClearButton";
-x.Content.displayName = "Chip.Content";
-x.LeadingIcon.displayName = "Chip.LeadingIcon";
-x.TrailingIcon.displayName = "Chip.TrailingIcon";
-export {
-  x as Chip
-};
-//# sourceMappingURL=index.mjs.map
+j.displayName = "Chip.Content";
+//#endregion
+//#region src/chip/ChipIcon.tsx
+var M = ({ children: e, className: t, ref: n }) => /* @__PURE__ */ d("span", {
+	className: r("flex h-full items-center justify-center", t),
+	ref: n,
+	children: e
+});
+M.displayName = "Chip.Icon";
+//#endregion
+//#region src/chip/ChipLeadingIcon.tsx
+var N = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ d(M, {
+	className: r("mr-sm", e),
+	ref: t,
+	...n
+});
+N.displayName = "Chip.LeadingIcon";
+//#endregion
+//#region src/chip/ChipTrailingIcon.tsx
+var P = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ d(M, {
+	className: r("ml-md", e),
+	ref: t,
+	...n
+});
+P.displayName = "Chip.TrailingIcon";
+//#endregion
+//#region src/chip/index.ts
+var F = Object.assign(D, {
+	Content: j,
+	LeadingIcon: N,
+	TrailingIcon: P,
+	ClearButton: A
+});
+F.displayName = "Chip", F.ClearButton.displayName = "Chip.ClearButton", F.Content.displayName = "Chip.Content", F.LeadingIcon.displayName = "Chip.LeadingIcon", F.TrailingIcon.displayName = "Chip.TrailingIcon";
+//#endregion
+export { F as Chip };
+
+//# sourceMappingURL=index.mjs.map