@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/chip/Chip.js

@@ -1,62 +1,104 @@
-import { jsxs as _, jsx as e } from "react/jsx-runtime";
-import __f from "@mattermost/compass-icons/components/close-circle.js";const f=__f&&__f.default?__f.default:__f;
-import b from "../icon/Icon.js";
-import N from "../user-avatar/UserAvatar.js";
-import { toKebab as C } from "../../utils/string.js";
-import l from "./Chip.module.scss.js";
-const z = {
+import { jsxs as A, jsx as c } from "react/jsx-runtime";
+import { useContext as I } from "react";
+import __M from "@mattermost/compass-icons/components/close-circle.js";const M=__M&&__M.default?__M.default:__M;
+import D from "../icon/Icon.js";
+import k from "../user-avatar/UserAvatar.js";
+import { toKebab as w } from "../../utils/string.js";
+import { ChipGroupContext as L, activateChip as N } from "./ChipGroup.js";
+import o from "./Chip.module.scss.js";
+const H = {
   small: "10",
   medium: "12",
-  "medium-compact": "12",
   large: "16"
-}, A = {
+}, P = {
   small: "12",
   medium: "16",
-  "medium-compact": "16",
   large: "20"
 };
-function E({
-  children: c,
-  size: o = "medium",
-  leadingIcon: i,
-  leadingAvatar: r,
-  onRemove: s,
-  removeLabel: m = "Remove",
-  error: t = !1,
-  colored: n = !1,
-  className: p = "",
-  ...u
+function g(t) {
+  return typeof t == "string" || typeof t == "number" ? String(t).trim() : Array.isArray(t) ? t.map(g).filter(Boolean).join(" ") : "";
+}
+function j(t) {
+  var r;
+  const s = (b, h) => {
+    let n = b;
+    for (; n; ) {
+      if (n instanceof HTMLElement && n.dataset.chip != null || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement)
+        return n;
+      n = h === "next" ? n.nextElementSibling : n.previousElementSibling;
+    }
+    return null;
+  }, l = t.parentElement, u = l == null ? void 0 : l.nextElementSibling, m = u instanceof HTMLInputElement || u instanceof HTMLTextAreaElement ? u : null;
+  return s(t.nextElementSibling, "next") ?? s(t.previousElementSibling, "previous") ?? m ?? (l == null ? void 0 : l.querySelector("input, textarea")) ?? ((r = l == null ? void 0 : l.parentElement) == null ? void 0 : r.querySelector("input, textarea")) ?? null;
+}
+function $({
+  children: t,
+  size: s = "medium",
+  compact: l = !1,
+  leadingIcon: u,
+  leadingAvatar: m,
+  onRemove: r,
+  error: b = !1,
+  colored: h = !1,
+  className: n = "",
+  ...i
 }) {
-  const a = z[o], h = A[o], d = [
-    l.chip,
-    l[`chip--size-${C(o)}`],
-    t && l["chip--error"],
-    n && l["chip--colored"],
-    p
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: d, ...u, children: [
-    r != null ? /* @__PURE__ */ e("span", { className: l["chip__avatar-slot"], children: /* @__PURE__ */ e(
-      N,
-      {
-        src: r.src,
-        alt: r.alt,
-        size: h
-      }
-    ) }) : i != null ? /* @__PURE__ */ e("span", { className: l["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(b, { glyph: i, size: a }) }) : null,
-    /* @__PURE__ */ e("span", { className: l.chip__label, children: c }),
-    s != null ? /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: l.chip__remove,
-        onClick: s,
-        "aria-label": m,
-        children: /* @__PURE__ */ e(f, { size: Number(a), "aria-hidden": !0 })
-      }
-    ) : null
-  ] });
+  const x = I(L), y = H[s], T = P[s], f = g(t), E = i["aria-label"] ?? (r != null && f !== "" ? `${f}. Press Delete to remove.` : f !== "" ? f : void 0), d = r != null, S = (e) => {
+    const p = e.currentTarget.closest("[data-chip]"), a = p instanceof HTMLElement ? j(p) : null, v = e.currentTarget;
+    r == null || r(e), window.setTimeout(() => {
+      v.isConnected || a == null || a.isConnected && (a.dataset.chip != null ? N(a) : a.focus({ focusVisible: !0 }));
+    }, 0);
+  }, C = [
+    o.chip,
+    o[`chip--size-${w(s)}`],
+    l && o["chip--compact"],
+    b && o["chip--error"],
+    h && o["chip--colored"],
+    n
+  ].filter(Boolean).join(" "), _ = (e) => {
+    var p, a;
+    (p = i.onKeyDown) == null || p.call(i, e), !(x || !d || e.defaultPrevented) && (e.key === "Delete" || e.key === "Backspace" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), (a = e.currentTarget.querySelector("[data-chip-remove]")) == null || a.click());
+  };
+  return /* @__PURE__ */ A(
+    "div",
+    {
+      className: C,
+      ...i,
+      role: d ? "button" : i.role,
+      tabIndex: d ? x ? -1 : 0 : i.tabIndex,
+      "aria-label": d ? E : i["aria-label"],
+      "data-chip": "",
+      onKeyDown: _,
+      children: [
+        m != null ? /* @__PURE__ */ c("span", { className: o["chip__avatar-slot"], children: /* @__PURE__ */ c(
+          k,
+          {
+            src: m.src,
+            alt: m.alt,
+            size: T
+          }
+        ) }) : u != null ? /* @__PURE__ */ c("span", { className: o["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(D, { glyph: u, size: y }) }) : null,
+        /* @__PURE__ */ c("span", { className: o.chip__label, children: t }),
+        r != null ? /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: o.chip__remove,
+            "data-chip-remove": "",
+            tabIndex: -1,
+            "aria-hidden": !0,
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: S,
+            children: /* @__PURE__ */ c(M, { size: Number(y), "aria-hidden": !0 })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 export {
-  E as default
+  $ as default
 };
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leadingIcon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) button and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Accessible label for the remove button. Default: \"Remove\". */\n  removeLabel?: string;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  removeLabel = 'Remove',\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          onClick={onRemove}\n          aria-label={removeLabel}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","Chip","children","size","leadingIcon","leadingAvatar","onRemove","removeLabel","error","colored","className","rest","iconSize","avatarSize","rootClass","styles","toKebab","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":";;;;;;AAkCA,MAAMA,IAA4C;AAAA,EAChD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,OAAO;AACT,GAEMC,IAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,OAAO;AACT;AAOA,SAAwBC,EAAK;AAAA,EAC3B,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAWb,EAAcI,CAAI,GAC7BU,IAAab,EAAgBG,CAAI,GAEjCW,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPA,EAAO,cAAcC,EAAQb,CAAI,CAAC,EAAE;AAAA,IACpCK,KAASO,EAAO,aAAa;AAAA,IAC7BN,KAAWM,EAAO,eAAe;AAAA,IACjCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO,EAAC,OAAA,EAAI,WAAWH,GAAY,GAAGH,GAC5B,UAAA;AAAA,IAAAN,KAAiB,OAChB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,EAAO,mBAAmB,GACzC,UAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKd,EAAc;AAAA,QACnB,KAAKA,EAAc;AAAA,QACnB,MAAMQ;AAAA,MAAA;AAAA,IAAA,GAEV,IACET,KAAe,OACjB,gBAAAc,EAAC,QAAA,EAAK,WAAWH,EAAO,iBAAiB,GAAG,eAAW,IACrD,4BAACK,GAAA,EAAK,OAAOhB,GAAa,MAAMQ,EAAA,CAAU,GAC5C,IACE;AAAA,sBACH,QAAA,EAAK,WAAWG,EAAO,aAAiB,UAAAb,GAAS;AAAA,IACjDI,KAAY,OACX,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWH,EAAO;AAAA,QAClB,SAAST;AAAA,QACT,cAAYC;AAAA,QAEZ,4BAACc,GAAA,EAAgB,MAAM,OAAOT,CAAQ,GAAG,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA,IAErD;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import {\n  useContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'large';\n\n/**\n * Removable chips derive their accessible name from string children as\n * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.\n */\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Reduces vertical and horizontal padding. */\n  compact?: boolean;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {\n        return el;\n      }\n      el =\n        direction === 'next'\n          ? el.nextElementSibling\n          : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  compact = false,\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    compact && styles['chip--compact'],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.stopPropagation();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.module.css');const _="_chip_1cqqu_2",c="_chip__label_1cqqu_24",i="_chip__remove_1cqqu_39",e={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_1cqqu_27","chip__avatar-slot":"_chip__avatar-slot_1cqqu_33",chip__remove:i,"chip--colored":"_chip--colored_1cqqu_55","chip--error":"_chip--error_1cqqu_62","chip--size-small":"_chip--size-small_1cqqu_65","chip--size-medium":"_chip--size-medium_1cqqu_80","chip--size-medium-compact":"_chip--size-medium-compact_1cqqu_94","chip--size-large":"_chip--size-large_1cqqu_108"};exports.chip=_;exports.chip__label=c;exports.chip__remove=i;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.css');const _="_chip_avr9t_13",i="_chip__label_avr9t_54",c="_chip__remove_avr9t_72",a={chip:_,"focus-ring-in":"_focus-ring-in_avr9t_1",chip__label:i,"chip__icon-slot":"_chip__icon-slot_avr9t_60","chip__avatar-slot":"_chip__avatar-slot_avr9t_66",chip__remove:c,"-host-shadow-a":"_-host-shadow-a_avr9t_88","-host-shadow-b":"_-host-shadow-b_avr9t_88","chip--colored":"_chip--colored_avr9t_91","chip--error":"_chip--error_avr9t_99","chip--size-small":"_chip--size-small_avr9t_102","chip--size-medium":"_chip--size-medium_avr9t_117","chip--size-large":"_chip--size-large_avr9t_131","chip--compact":"_chip--compact_avr9t_145"};exports.chip=_;exports.chip__label=i;exports.chip__remove=c;exports.default=a;
 //# sourceMappingURL=Chip.module.scss.cjs.map

package/dist/components/chip/Chip.module.scss.js

@@ -1,20 +1,23 @@
-import './Chip.module.css';const _ = "_chip_1cqqu_2", c = "_chip__label_1cqqu_24", i = "_chip__remove_1cqqu_39", e = {
+import './Chip.css';const _ = "_chip_avr9t_13", c = "_chip__label_avr9t_54", i = "_chip__remove_avr9t_72", a = {
   chip: _,
+  "focus-ring-in": "_focus-ring-in_avr9t_1",
   chip__label: c,
-  "chip__icon-slot": "_chip__icon-slot_1cqqu_27",
-  "chip__avatar-slot": "_chip__avatar-slot_1cqqu_33",
+  "chip__icon-slot": "_chip__icon-slot_avr9t_60",
+  "chip__avatar-slot": "_chip__avatar-slot_avr9t_66",
   chip__remove: i,
-  "chip--colored": "_chip--colored_1cqqu_55",
-  "chip--error": "_chip--error_1cqqu_62",
-  "chip--size-small": "_chip--size-small_1cqqu_65",
-  "chip--size-medium": "_chip--size-medium_1cqqu_80",
-  "chip--size-medium-compact": "_chip--size-medium-compact_1cqqu_94",
-  "chip--size-large": "_chip--size-large_1cqqu_108"
+  "-host-shadow-a": "_-host-shadow-a_avr9t_88",
+  "-host-shadow-b": "_-host-shadow-b_avr9t_88",
+  "chip--colored": "_chip--colored_avr9t_91",
+  "chip--error": "_chip--error_avr9t_99",
+  "chip--size-small": "_chip--size-small_avr9t_102",
+  "chip--size-medium": "_chip--size-medium_avr9t_117",
+  "chip--size-large": "_chip--size-large_avr9t_131",
+  "chip--compact": "_chip--compact_avr9t_145"
 };
 export {
   _ as chip,
   c as chip__label,
   i as chip__remove,
-  e as default
+  a as default
 };
 //# sourceMappingURL=Chip.module.scss.js.map

package/dist/components/chip/Chip.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"Chip.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/chip/ChipGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),b=require("react"),M=require("./ChipGroup.module.scss.cjs"),v=b.createContext(!1);function l(o){return[...o.querySelectorAll("[data-chip]")]}function g(o){const s=o.closest('[role="toolbar"]');s&&l(s).forEach(a=>{a.tabIndex=a===o?0:-1}),o.focus({focusVisible:!0})}function j({children:o,className:s="",disabled:a=!1,onKeyDown:f,onFocus:d,...E}){const h=b.useRef(null);b.useLayoutEffect(()=>{const e=h.current;if(e==null)return;const r=l(e);if(r.length===0)return;if(a){r.forEach(t=>{t.tabIndex=-1});return}const n=r.find(t=>t===document.activeElement);if(n!=null){r.forEach(t=>{t.tabIndex=t===n?0:-1});return}r.some(t=>t.tabIndex===0)||(r[0].tabIndex=0,r.slice(1).forEach(t=>{t.tabIndex=-1}))},[o,a]);const C=e=>{if(d==null||d(e),a)return;const r=e.target;if(!(r instanceof HTMLElement))return;const n=r.closest("[data-chip]"),t=e.currentTarget;n==null||!t.contains(n)||l(t).forEach(c=>{c.tabIndex=c===n?0:-1})},I=e=>{if(f==null||f(e),e.defaultPrevented||a)return;const r=h.current;if(r==null)return;const n=l(r);if(n.length===0)return;const t=document.activeElement;if(!(t instanceof HTMLElement)||!r.contains(t))return;const c=t.closest("[data-chip]"),p=n.findIndex(i=>i===c);if(p<0)return;const u=i=>{const x=n[Math.max(0,Math.min(n.length-1,i))];x!=null&&(e.preventDefault(),e.stopPropagation(),g(x))};switch(e.key){case"ArrowRight":case"ArrowDown":u(p+1);break;case"ArrowLeft":case"ArrowUp":u(p-1);break;case"Home":u(0);break;case"End":u(n.length-1);break;case"Delete":case"Backspace":case"Enter":case" ":{const i=c==null?void 0:c.querySelector("[data-chip-remove]");i!=null&&!i.disabled&&(e.preventDefault(),e.stopPropagation(),i.click());break}}},k=[M.default["chip-group"],s].filter(Boolean).join(" ");return m.jsx(v.Provider,{value:!0,children:m.jsx("div",{...E,ref:h,className:k,role:"toolbar","aria-orientation":"horizontal","aria-disabled":a||void 0,onKeyDown:I,onFocus:C,children:o})})}exports.ChipGroupContext=v;exports.activateChip=g;exports.default=j;
+//# sourceMappingURL=ChipGroup.cjs.map

package/dist/components/chip/ChipGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.cjs","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './ChipGroup.module.scss';\n\nexport const ChipGroupContext = createContext(false);\n\nexport interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** When true, chips are not a tab stop. */\n  disabled?: boolean;\n}\n\nfunction chipsIn(toolbar: ParentNode): HTMLElement[] {\n  return [...toolbar.querySelectorAll<HTMLElement>('[data-chip]')];\n}\n\n/** Roving tabindex + focus for a chip inside a ChipGroup. */\nexport function activateChip(el: HTMLElement) {\n  const toolbar = el.closest('[role=\"toolbar\"]');\n  if (toolbar) {\n    chipsIn(toolbar).forEach((chip) => {\n      chip.tabIndex = chip === el ? 0 : -1;\n    });\n  }\n  el.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move\n * between chips; Delete, Backspace, Enter, and Space remove the focused chip.\n * The × is mouse-only. Keys the group acts on don't propagate past it.\n */\nexport default function ChipGroup({\n  children,\n  className = '',\n  disabled = false,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: ChipGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n    if (disabled) {\n      chips.forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n      return;\n    }\n    const focused = chips.find((chip) => chip === document.activeElement);\n    if (focused != null) {\n      chips.forEach((chip) => {\n        chip.tabIndex = chip === focused ? 0 : -1;\n      });\n      return;\n    }\n    if (!chips.some((chip) => chip.tabIndex === 0)) {\n      chips[0].tabIndex = 0;\n      chips.slice(1).forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n    }\n  }, [children, disabled]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    if (disabled) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const chip = target.closest<HTMLElement>('[data-chip]');\n    const toolbar = e.currentTarget;\n    if (chip == null || !toolbar.contains(chip)) return;\n    chipsIn(toolbar).forEach((c) => {\n      c.tabIndex = c === chip ? 0 : -1;\n    });\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || disabled) return;\n\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !toolbar.contains(active)) return;\n    const chip = active.closest<HTMLElement>('[data-chip]');\n    const index = chips.findIndex((c) => c === chip);\n    if (index < 0) return;\n\n    const moveTo = (nextIndex: number) => {\n      const next = chips[Math.max(0, Math.min(chips.length - 1, nextIndex))];\n      if (next == null) return;\n      e.preventDefault();\n      e.stopPropagation();\n      activateChip(next);\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        moveTo(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        moveTo(index - 1);\n        break;\n      case 'Home':\n        moveTo(0);\n        break;\n      case 'End':\n        moveTo(chips.length - 1);\n        break;\n      case 'Delete':\n      case 'Backspace':\n      case 'Enter':\n      case ' ': {\n        const btn =\n          chip?.querySelector<HTMLButtonElement>('[data-chip-remove]');\n        if (btn != null && !btn.disabled) {\n          e.preventDefault();\n          e.stopPropagation();\n          btn.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const rootClass = [styles['chip-group'], className].filter(Boolean).join(' ');\n\n  return (\n    <ChipGroupContext.Provider value={true}>\n      <div\n        {...rest}\n        ref={ref}\n        className={rootClass}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n      >\n        {children}\n      </div>\n    </ChipGroupContext.Provider>\n  );\n}\n"],"names":["ChipGroupContext","createContext","chipsIn","toolbar","activateChip","el","chip","ChipGroup","children","className","disabled","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","chips","focused","handleFocus","target","handleKeyDown","active","index","c","moveTo","nextIndex","next","btn","rootClass","styles","jsx"],"mappings":"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"}

package/dist/components/chip/ChipGroup.css

@@ -0,0 +1 @@
+._chip-group_silqp_13{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xxs);min-width:0}

package/dist/components/chip/ChipGroup.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const ChipGroupContext: import('react').Context<boolean>;
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** When true, chips are not a tab stop. */
+    disabled?: boolean;
+}
+/** Roving tabindex + focus for a chip inside a ChipGroup. */
+export declare function activateChip(el: HTMLElement): void;
+/**
+ * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move
+ * between chips; Delete, Backspace, Enter, and Space remove the focused chip.
+ * The × is mouse-only. Keys the group acts on don't propagate past it.
+ */
+export default function ChipGroup({ children, className, disabled, onKeyDown, onFocus, ...rest }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChipGroup.d.ts.map

package/dist/components/chip/ChipGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../src/components/chip/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,gBAAgB,kCAAuB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,QAQ3C;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAoHhB"}

package/dist/components/chip/ChipGroup.js

@@ -0,0 +1,112 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as I, useLayoutEffect as k, createContext as C } from "react";
+import A from "./ChipGroup.module.scss.js";
+const w = C(!1);
+function f(o) {
+  return [...o.querySelectorAll("[data-chip]")];
+}
+function L(o) {
+  const i = o.closest('[role="toolbar"]');
+  i && f(i).forEach((a) => {
+    a.tabIndex = a === o ? 0 : -1;
+  }), o.focus({ focusVisible: !0 });
+}
+function y({
+  children: o,
+  className: i = "",
+  disabled: a = !1,
+  onKeyDown: u,
+  onFocus: h,
+  ...x
+}) {
+  const p = I(null);
+  k(() => {
+    const e = p.current;
+    if (e == null) return;
+    const r = f(e);
+    if (r.length === 0) return;
+    if (a) {
+      r.forEach((t) => {
+        t.tabIndex = -1;
+      });
+      return;
+    }
+    const n = r.find((t) => t === document.activeElement);
+    if (n != null) {
+      r.forEach((t) => {
+        t.tabIndex = t === n ? 0 : -1;
+      });
+      return;
+    }
+    r.some((t) => t.tabIndex === 0) || (r[0].tabIndex = 0, r.slice(1).forEach((t) => {
+      t.tabIndex = -1;
+    }));
+  }, [o, a]);
+  const v = (e) => {
+    if (h == null || h(e), a) return;
+    const r = e.target;
+    if (!(r instanceof HTMLElement)) return;
+    const n = r.closest("[data-chip]"), t = e.currentTarget;
+    n == null || !t.contains(n) || f(t).forEach((c) => {
+      c.tabIndex = c === n ? 0 : -1;
+    });
+  }, E = (e) => {
+    if (u == null || u(e), e.defaultPrevented || a) return;
+    const r = p.current;
+    if (r == null) return;
+    const n = f(r);
+    if (n.length === 0) return;
+    const t = document.activeElement;
+    if (!(t instanceof HTMLElement) || !r.contains(t)) return;
+    const c = t.closest("[data-chip]"), d = n.findIndex((s) => s === c);
+    if (d < 0) return;
+    const l = (s) => {
+      const m = n[Math.max(0, Math.min(n.length - 1, s))];
+      m != null && (e.preventDefault(), e.stopPropagation(), L(m));
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        l(d + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        l(d - 1);
+        break;
+      case "Home":
+        l(0);
+        break;
+      case "End":
+        l(n.length - 1);
+        break;
+      case "Delete":
+      case "Backspace":
+      case "Enter":
+      case " ": {
+        const s = c == null ? void 0 : c.querySelector("[data-chip-remove]");
+        s != null && !s.disabled && (e.preventDefault(), e.stopPropagation(), s.click());
+        break;
+      }
+    }
+  }, g = [A["chip-group"], i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ b(w.Provider, { value: !0, children: /* @__PURE__ */ b(
+    "div",
+    {
+      ...x,
+      ref: p,
+      className: g,
+      role: "toolbar",
+      "aria-orientation": "horizontal",
+      "aria-disabled": a || void 0,
+      onKeyDown: E,
+      onFocus: v,
+      children: o
+    }
+  ) });
+}
+export {
+  w as ChipGroupContext,
+  L as activateChip,
+  y as default
+};
+//# sourceMappingURL=ChipGroup.js.map

package/dist/components/chip/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './ChipGroup.module.scss';\n\nexport const ChipGroupContext = createContext(false);\n\nexport interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** When true, chips are not a tab stop. */\n  disabled?: boolean;\n}\n\nfunction chipsIn(toolbar: ParentNode): HTMLElement[] {\n  return [...toolbar.querySelectorAll<HTMLElement>('[data-chip]')];\n}\n\n/** Roving tabindex + focus for a chip inside a ChipGroup. */\nexport function activateChip(el: HTMLElement) {\n  const toolbar = el.closest('[role=\"toolbar\"]');\n  if (toolbar) {\n    chipsIn(toolbar).forEach((chip) => {\n      chip.tabIndex = chip === el ? 0 : -1;\n    });\n  }\n  el.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move\n * between chips; Delete, Backspace, Enter, and Space remove the focused chip.\n * The × is mouse-only. Keys the group acts on don't propagate past it.\n */\nexport default function ChipGroup({\n  children,\n  className = '',\n  disabled = false,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: ChipGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n    if (disabled) {\n      chips.forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n      return;\n    }\n    const focused = chips.find((chip) => chip === document.activeElement);\n    if (focused != null) {\n      chips.forEach((chip) => {\n        chip.tabIndex = chip === focused ? 0 : -1;\n      });\n      return;\n    }\n    if (!chips.some((chip) => chip.tabIndex === 0)) {\n      chips[0].tabIndex = 0;\n      chips.slice(1).forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n    }\n  }, [children, disabled]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    if (disabled) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const chip = target.closest<HTMLElement>('[data-chip]');\n    const toolbar = e.currentTarget;\n    if (chip == null || !toolbar.contains(chip)) return;\n    chipsIn(toolbar).forEach((c) => {\n      c.tabIndex = c === chip ? 0 : -1;\n    });\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || disabled) return;\n\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !toolbar.contains(active)) return;\n    const chip = active.closest<HTMLElement>('[data-chip]');\n    const index = chips.findIndex((c) => c === chip);\n    if (index < 0) return;\n\n    const moveTo = (nextIndex: number) => {\n      const next = chips[Math.max(0, Math.min(chips.length - 1, nextIndex))];\n      if (next == null) return;\n      e.preventDefault();\n      e.stopPropagation();\n      activateChip(next);\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        moveTo(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        moveTo(index - 1);\n        break;\n      case 'Home':\n        moveTo(0);\n        break;\n      case 'End':\n        moveTo(chips.length - 1);\n        break;\n      case 'Delete':\n      case 'Backspace':\n      case 'Enter':\n      case ' ': {\n        const btn =\n          chip?.querySelector<HTMLButtonElement>('[data-chip-remove]');\n        if (btn != null && !btn.disabled) {\n          e.preventDefault();\n          e.stopPropagation();\n          btn.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const rootClass = [styles['chip-group'], className].filter(Boolean).join(' ');\n\n  return (\n    <ChipGroupContext.Provider value={true}>\n      <div\n        {...rest}\n        ref={ref}\n        className={rootClass}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n      >\n        {children}\n      </div>\n    </ChipGroupContext.Provider>\n  );\n}\n"],"names":["ChipGroupContext","createContext","chipsIn","toolbar","activateChip","el","chip","ChipGroup","children","className","disabled","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","chips","focused","handleFocus","target","handleKeyDown","active","index","c","moveTo","nextIndex","next","btn","rootClass","styles","jsx"],"mappings":"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"}

package/dist/components/chip/ChipGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChipGroup.css');const e={"chip-group":"_chip-group_silqp_13"};exports.default=e;
+//# sourceMappingURL=ChipGroup.module.scss.cjs.map

package/dist/components/chip/ChipGroup.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/chip/ChipGroup.module.scss.js

@@ -0,0 +1,7 @@
+import './ChipGroup.css';const p = {
+  "chip-group": "_chip-group_silqp_13"
+};
+export {
+  p as default
+};
+//# sourceMappingURL=ChipGroup.module.scss.js.map

package/dist/components/chip/ChipGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/chip/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Chip.cjs");exports.Chip=e.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Chip.cjs"),r=require("./ChipGroup.cjs");exports.Chip=e.default;exports.ChipGroup=r.default;
 //# sourceMappingURL=index.cjs.map

package/dist/components/chip/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Chip } from './Chip';
 export type { ChipProps, ChipSize } from './Chip';
+export { default as ChipGroup } from './ChipGroup';
+export type { ChipGroupProps } from './ChipGroup';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/chip/index.js

@@ -1,5 +1,7 @@
-import { default as f } from "./Chip.js";
+import { default as r } from "./Chip.js";
+import { default as e } from "./ChipGroup.js";
 export {
-  f as Chip
+  r as Chip,
+  e as ChipGroup
 };
 //# sourceMappingURL=index.js.map

package/dist/components/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/combobox/Combobox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),s=require("react"),__Ee=require("@mattermost/compass-icons/components/chevron-down.js"),Ee=__Ee?.default??__Ee,Be=require("../chip/Chip.cjs"),$e=require("../icon/Icon.cjs"),Fe=require("../menu-item/MenuItem.cjs"),re=require("../popover-menu/PopoverMenu.cjs"),He=require("../user-avatar/UserAvatar.cjs"),Te=require("../../hooks/use-anchored-popup-portal.cjs"),Le=require("../../hooks/use-outside-close.cjs"),Ue=require("../../hooks/use-popover-transition.cjs"),ze=require("../../utils/string.cjs"),r=require("./Combobox.module.scss.cjs"),ae=280,Ke={small:"small",medium:"medium",large:"large"};function Qe(a,d){return d?a.label.toLowerCase().includes(d.toLowerCase()):!0}function Xe(a){return a==null?null:Array.isArray(a)?a[0]??null:a===""?null:a}function Ge(a){return a==null?[]:Array.isArray(a)?a:a===""?[]:[a]}function We(a){if(a.leadingVisual!=null)return a.leadingVisual;if(a.leadingAvatar!=null)return u.jsx(He.default,{src:a.leadingAvatar.src,alt:a.leadingAvatar.alt,size:"24"})}const Ye=s.forwardRef(function({options:d,multiple:n=!1,value:L,defaultValue:U,onChange:D,inputValue:q,defaultInputValue:oe="",onInputChange:x,label:y,placeholder:ue,leadingIcon:N,size:z="medium",invalid:K=!1,disabled:_=!1,filter:w=!0,emptyMessage:ce="No results",className:ie="",id:de,"aria-label":Q,portalContainer:fe=null,zIndex:be},j){const ve=s.useId(),P=de??ve,g=`${P}-listbox`,S=s.useRef(null),X=s.useRef(null),p=s.useRef(null),xe=s.useCallback(e=>{p.current=e,typeof j=="function"?j(e):j&&(j.current=e)},[j]),V=L!==void 0,[me,he]=s.useState(()=>U!==void 0?U:n?[]:null),G=V?L:me,f=n?null:Xe(G),i=n?Ge(G):[],b=q!==void 0,[R,E]=s.useState(oe),[c,W]=s.useState(!1),[_e,Y]=s.useState(!1),[v,m]=s.useState(-1),[M,B]=s.useState(null),C=s.useMemo(()=>f==null?void 0:d.find(e=>e.value===f),[d,f]),$=b?q:n?R:M!==null?M:(C==null?void 0:C.label)??R,Z=b?q:n?R:M!==null?M:"",F=s.useCallback(e=>{b||(E(e),n||B(e)),x==null||x(e)},[b,n,x]),A=s.useCallback(e=>{V||he(e),D==null||D(e)},[V,D]),o=s.useMemo(()=>{if(w===!1)return d;const e=typeof w=="function"?w:Qe;return d.filter(t=>e(t,Z))},[d,w,Z]),{mounted:J,visible:ge}=Ue.usePopoverTransition(c),{placement:pe,maxHeight:ke,style:ye,portalRef:ee,renderPortal:je}=Te.useAnchoredPopupPortal(X,J,{preferredHeight:ae,maxHeightCap:ae,portalContainer:fe,zIndex:be}),k=s.useCallback(()=>{W(!1),m(-1),!n&&!b&&(B(null),E(""))},[n,b]),I=s.useCallback(()=>{_||W(!0)},[_]);Le.useOutsideClose(S,c,k,ee),s.useEffect(()=>{c&&m(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=n?o.findIndex(l=>i.includes(l.value)):o.findIndex(l=>l.value===f);return t>=0?t:0})},[c,o,n,i,f]);const Ae=s.useCallback(e=>n?i.includes(e):f===e,[n,i,f]),te=s.useCallback(e=>{var t;if(!e.disabled){if(n){const l=i.includes(e.value)?i.filter(h=>h!==e.value):[...i,e.value];A(l),F(""),k(),(t=p.current)==null||t.focus();return}A(e.value),b?x==null||x(e.label):(E(""),B(null)),k()}},[n,i,A,F,b,x,k]),le=s.useCallback(e=>{var t;n&&(A(i.filter(l=>l!==e)),(t=p.current)==null||t.focus())},[n,i,A]),se=s.useCallback(e=>{const t=o.map((l,h)=>({o:l,i:h})).filter(({o:l})=>!l.disabled);if(t.length===0){m(-1);return}m(l=>{const h=t.findIndex(({i:T})=>T===l),O=h<0?e>0?0:t.length-1:(h+e+t.length)%t.length;return t[O].i})},[o]);s.useEffect(()=>{if(!c||v<0)return;const e=o[v];if(!e)return;const t=document.getElementById(`${g}-option-${e.value}`);t==null||t.scrollIntoView({block:"nearest"})},[c,v,o,g]);const Ie=e=>{const t=e.target.value;F(t),c||I(),m(0)},De=()=>{Y(!0),I(),!n&&!b&&C&&requestAnimationFrame(()=>{var e;(e=p.current)==null||e.select()})},we=e=>{var l;const t=e.relatedTarget;t&&((l=S.current)!=null&&l.contains(t))||Y(!1)},Me=e=>{var t;if(!_)switch(e.key){case"ArrowDown":e.preventDefault(),c?se(1):I();break;case"ArrowUp":e.preventDefault(),c?se(-1):I();break;case"Home":c&&o.length>0&&(e.preventDefault(),m(o.findIndex(l=>!l.disabled)>=0?o.findIndex(l=>!l.disabled):0));break;case"End":if(c&&o.length>0){e.preventDefault();for(let l=o.length-1;l>=0;l--)if(!((t=o[l])!=null&&t.disabled)){m(l);break}}break;case"Enter":c&&v>=0&&o[v]&&(e.preventDefault(),te(o[v]));break;case"Escape":c&&(e.preventDefault(),k());break;case"Backspace":n&&$===""&&i.length>0&&(e.preventDefault(),le(i[i.length-1]));break;case"Tab":k();break}},Ce=e=>{var t;_||e.target.closest("button")||(e.target!==p.current&&(e.preventDefault(),(t=p.current)==null||t.focus()),c||I())},Oe=n?i.length>0:f!=null&&f!=="",qe=$.length>0,Ne=_e||c||Oe||qe,ne=v>=0?o[v]:void 0,Pe=ne!=null?`${g}-option-${ne.value}`:void 0,H=s.useMemo(()=>d.filter(e=>i.includes(e.value)),[d,i]),Se=r.default[`combobox--size-${ze.toKebab(z)}`],Ve=n&&H.length>0,Re=[r.default.combobox,Se,K?r.default["combobox--invalid"]:"",y!=null&&Ne?r.default["combobox--label-floated"]:"",N!=null?r.default["combobox--has-leading-icon"]:"",Ve?r.default["combobox--has-chips"]:"",c?r.default["combobox--open"]:"",_?r.default["combobox--disabled"]:"",ie].filter(Boolean).join(" ");return u.jsxs("div",{className:Re,ref:S,children:[u.jsxs("div",{className:r.default.combobox__wrapper,ref:X,children:[y!=null&&u.jsx("label",{className:r.default.combobox__label,htmlFor:P,children:y}),u.jsxs("div",{className:r.default.combobox__inner,onMouseDown:Ce,children:[N!=null&&u.jsx("span",{className:r.default.combobox__leadingIcon,"aria-hidden":!0,children:N}),u.jsxs("div",{className:r.default.combobox__value,children:[n&&H.map(e=>u.jsx(Be.default,{size:Ke[z],leadingAvatar:e.leadingAvatar,leadingIcon:e.leadingAvatar==null?e.leadingVisual:void 0,onRemove:_?void 0:t=>{t.stopPropagation(),le(e.value)},removeLabel:`Remove ${e.label}`,children:e.label},e.value)),u.jsx("input",{ref:xe,id:P,className:r.default.combobox__control,type:"text",role:"combobox",autoComplete:"off",spellCheck:!1,disabled:_,placeholder:n&&H.length>0?void 0:ue,value:$,"aria-label":Q,"aria-invalid":K?!0:void 0,"aria-expanded":c,"aria-controls":g,"aria-autocomplete":"list","aria-activedescendant":Pe,onChange:Ie,onFocus:De,onBlur:we,onKeyDown:Me})]}),u.jsx("span",{className:r.default.combobox__trailingIcon,"aria-hidden":!0,children:u.jsx($e.default,{size:"12",glyph:u.jsx(Ee,{})})})]})]}),J&&je(u.jsx("div",{ref:ee,className:[r.default.combobox__popup,pe==="above"?r.default["combobox__popup--above"]:"",ge?r.default["combobox__popup--visible"]:""].filter(Boolean).join(" "),style:ye,children:u.jsx(re.default,{className:r.default.combobox__menu,children:u.jsx(re.PopoverMenuScroll,{maxHeight:ke,children:o.length===0?u.jsx("p",{className:r.default.combobox__empty,children:ce}):u.jsx("ul",{id:g,className:r.default.combobox__list,role:"listbox","aria-multiselectable":n||void 0,"aria-label":typeof y=="string"?y:Q??"Options",children:o.map((e,t)=>{const l=Ae(e.value),h=t===v,O=We(e);return u.jsx("li",{className:r.default.combobox__option,role:"presentation",children:u.jsx(Fe.default,{id:`${g}-option-${e.value}`,role:"option",label:e.label,secondaryLabel:e.secondaryLabel,leadingElement:O!=null,leadingVisual:O,trailingElement:l,active:h,disabled:e.disabled,"aria-selected":l,onMouseDown:T=>{T.preventDefault()},onMouseEnter:()=>m(t),onClick:()=>te(e)})},e.value)})})})})}))]})});exports.default=Ye;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),s=require("react"),__Nt=require("@mattermost/compass-icons/components/chevron-down.js"),Nt=__Nt?.default??__Nt,__St=require("@mattermost/compass-icons/components/close-circle.js"),St=__St?.default??__St,__It=require("@mattermost/compass-icons/components/plus.js"),It=__It?.default??__It,Rt=require("../chip/Chip.cjs"),pt=require("../chip/ChipGroup.cjs"),P=require("../icon/Icon.cjs"),ue=require("../field/fieldDescribedBy.cjs"),Et=require("../field-message/FieldMessage.cjs"),pe=require("../menu-item/MenuItem.cjs"),Ee=require("../popover-menu/PopoverMenu.cjs"),Vt=require("../spinner/Spinner.cjs"),Ft=require("../team-avatar/TeamAvatar.cjs"),Tt=require("../user-avatar/UserAvatar.cjs"),Lt=require("../../hooks/use-anchored-popup-portal.cjs"),Ot=require("../../hooks/use-outside-close.cjs"),$t=require("../../hooks/use-popover-transition.cjs"),zt=require("../../utils/menuItemProps.cjs"),Ht=require("../../utils/props.cjs"),Ut=require("../../utils/string.cjs"),o=require("./Combobox.module.scss.cjs"),Ve=280,Gt={small:"small",medium:"medium",large:"large"},Kt={small:"12",medium:"16",large:"16"};function Pt(a){return typeof a=="string"?`${a} selections`:"Selected"}function Qt(a){return`Create "${a}"`}function Q(a){return a.kind==="option"&&a.option.disabled===!0}function Xt(a,v){return v?a.label.toLowerCase().includes(v.toLowerCase()):!0}function Zt(a){return a==null?null:Array.isArray(a)?a[0]??null:a===""?null:a}function Wt(a){return a==null?[]:Array.isArray(a)?a:a===""?[]:[a]}function Yt(a){if(a.leadingVisual!=null)return a.leadingVisual;if(a.leadingAvatar!=null)return l.jsx(Tt.default,{src:a.leadingAvatar.src,alt:a.leadingAvatar.alt,size:"24"});if(a.leadingTeamAvatar!=null)return l.jsx(Ft.default,{src:a.leadingTeamAvatar.src,initials:a.leadingTeamAvatar.initials??(a.leadingTeamAvatar.src?void 0:Array.from(a.label).slice(0,2).join("")),alt:a.leadingTeamAvatar.alt,size:"24",variant:"menu"})}const Jt=s.forwardRef(function({options:v,menuItemProps:Fe,multiple:r=!1,value:de,defaultValue:fe,onChange:T,inputValue:X,defaultInputValue:Te="",onInputChange:d,label:C,placeholder:Le,leadingIcon:Z,size:W="medium",invalid:Oe=!1,message:Y,messageTone:be,disabled:_=!1,filter:L=!0,emptyMessage:$e="No results",loading:me=!1,loadingMessage:ze="Loading…",selectedOptions:A,creatable:D=!1,onCreateOption:J,formatCreateLabel:He=Qt,clearable:Ue=!1,openOnFocus:Ge=!1,submitOnEnter:Ke=!0,clearLabel:Pe="Clear",clearButtonProps:b,selectionsLabel:Qe,listboxLabel:Xe="Options",className:Ze="",id:We,"aria-label":ve,"aria-describedby":Ye,required:Je=!1,onFocus:B,onBlur:ee,onKeyDown:te,portalContainer:Be=null,zIndex:et,...tt},w){const st=s.useId(),O=We??st,N=`${O}-listbox`,se=s.useRef(null),xe=s.useRef(null),M=s.useRef(null),at=s.useCallback(e=>{M.current=e,typeof w=="function"?w(e):w&&(w.current=e)},[w]),ae=de!==void 0,[rt,lt]=s.useState(()=>fe!==void 0?fe:r?[]:null),re=ae?de:rt,x=r?null:Zt(re),i=s.useMemo(()=>r?Wt(re):[],[r,re]),m=X!==void 0,[le,S]=s.useState(Te),[u,he]=s.useState(!1),[nt,ge]=s.useState(!1),[h,k]=s.useState(-1),$=s.useRef(!1),I=s.useRef(null),_e=s.useCallback(e=>{e!==h&&($.current=!0,k(e))},[h]),[z,R]=s.useState(null),H=s.useCallback(e=>v.find(t=>t.value===e)??(A==null?void 0:A.find(t=>t.value===e))??(D?{value:e,label:e}:void 0),[v,A,D]),U=s.useMemo(()=>x==null?void 0:H(x),[H,x]),ne=m?X:r?le:z!==null?z:(U==null?void 0:U.label)??le,oe=m?X:r?le:z!==null?z:"",p=s.useCallback(e=>{m||(S(e),r||R(e)),d==null||d(e)},[m,r,d]),g=s.useCallback(e=>{ae||lt(e),T==null||T(e)},[ae,T]),ke=s.useMemo(()=>{if(L===!1)return v;const e=typeof L=="function"?L:Xt;return v.filter(t=>e(t,oe))},[v,L,oe]),E=D?oe.trim():"",je=s.useMemo(()=>{if(E==="")return!1;const e=E.toLowerCase(),t=y=>y.toLowerCase()===e;return[...v,...A??[]].some(y=>t(y.label)||t(y.value))?!1:!(r?i:x!=null?[x]:[]).some(t)},[E,v,A,r,i,x]),c=s.useMemo(()=>[...ke.map(e=>({kind:"option",option:e})),...je?[{kind:"create",inputValue:E}]:[]],[ke,je,E]),q=s.useCallback(e=>e.kind==="option"?`${N}-option-${e.option.value}`:`${N}-create`,[N]),{mounted:ye,visible:ot}=$t.usePopoverTransition(u),{placement:it,maxHeight:ct,style:ut,portalRef:Ae,renderPortal:dt}=Lt.useAnchoredPopupPortal(xe,ye,{preferredHeight:Ve,maxHeightCap:Ve,portalContainer:Be,zIndex:et}),j=s.useCallback(()=>{he(!1),k(-1),!r&&!m&&(R(null),S(""))},[r,m]),V=s.useCallback(()=>{_||he(!0)},[_]);Ot.useOutsideClose(se,u,j,Ae),s.useEffect(()=>{u&&k(e=>{if(c.length===0)return-1;if(e>=0&&e<c.length)return e;const t=c.findIndex(n=>n.kind==="option"&&(r?i.includes(n.option.value):n.option.value===x));return t>=0?t:0})},[u,c,r,i,x]);const ft=s.useCallback(e=>r?i.includes(e):x===e,[r,i,x]),ie=s.useCallback(e=>{var t;if(!e.disabled){if(r){const n=i.includes(e.value)?i.filter(f=>f!==e.value):[...i,e.value];g(n),p(""),j(),(t=M.current)==null||t.focus();return}g(e.value),m?d==null||d(e.label):(S(""),R(null)),j()}},[r,i,g,p,m,d,j]),ce=s.useCallback(e=>{var t;if(J?J(e):g(r?[...i,e]:e),r){p(""),j(),(t=M.current)==null||t.focus();return}m?d==null||d(e):(S(""),R(null)),j()},[J,r,i,g,p,m,d,j]),bt=s.useCallback(e=>{e.kind==="create"?ce(e.inputValue):ie(e.option)},[ce,ie]),Me=s.useCallback(()=>{var e;g(null),m?d==null||d(""):(S(""),R(null)),(e=M.current)==null||e.focus()},[g,m,d]),Ce=s.useCallback(e=>{r&&g(i.filter(t=>t!==e))},[r,i,g]),qe=s.useCallback(e=>{$.current=!1;const t=c.map((n,f)=>({row:n,i:f})).filter(({row:n})=>!Q(n));if(t.length===0){k(-1);return}k(n=>{const f=t.findIndex(({i:K})=>K===n),y=f<0?e>0?0:t.length-1:(f+e+t.length)%t.length;return t[y].i})},[c]);s.useEffect(()=>{var t,n;if(!u||h<0)return;if($.current){$.current=!1;return}const e=c[h];e&&((n=(t=document.getElementById(q(e)))==null?void 0:t.scrollIntoView)==null||n.call(t,{block:"nearest"}))},[u,h,c,q]);const mt=e=>{F();const t=e.target.value;p(t),u||V(),k(0)},F=()=>{I.current!==null&&(cancelAnimationFrame(I.current),I.current=null)};s.useEffect(()=>F,[]);const vt=()=>{ge(!0),Ge&&V(),!r&&!m&&U&&(F(),I.current=requestAnimationFrame(()=>{var e;I.current=null,(e=M.current)==null||e.select()}))},De=e=>{var n;const t=e.relatedTarget;t&&((n=se.current)!=null&&n.contains(t))||(F(),ge(!1))},xt=e=>{if(!_)switch(F(),e.key){case"ArrowDown":e.preventDefault(),u?qe(1):V();break;case"ArrowUp":if(e.preventDefault(),u)qe(-1);else{for(let t=c.length-1;t>=0;t--)if(!Q(c[t])){k(t);break}V()}break;case"Home":u&&c.length>0&&(e.preventDefault(),k(Math.max(0,c.findIndex(t=>!Q(t)))));break;case"End":if(u&&c.length>0){e.preventDefault();for(let t=c.length-1;t>=0;t--)if(!Q(c[t])){k(t);break}}break;case"Enter":if(e.nativeEvent.isComposing||e.keyCode===229)break;(u||!Ke)&&(e.preventDefault(),e.stopPropagation()),u&&h>=0&&c[h]&&bt(c[h]);break;case"Escape":u&&(e.preventDefault(),e.stopPropagation(),j());break;case"Backspace":r&&ne===""&&i.length>0&&(e.preventDefault(),Ce(i[i.length-1]));break;case"Tab":j();break}},ht=e=>{vt(),B==null||B(e)},gt=e=>{De(e),ee==null||ee(e)},_t=e=>{xt(e),te==null||te(e)},kt=e=>{var t;_||e.target.closest("[data-chip], [data-combobox-clear]")||(e.target!==M.current&&(e.preventDefault(),(t=M.current)==null||t.focus()),u||V())},jt=e=>{e.target.closest('input, textarea, select, [contenteditable="true"]')||e.preventDefault()},we=r?i.length>0:x!=null&&x!=="",yt=ne.length>0,At=Ue&&!r&&we&&!_,Mt=nt||u||we||yt,Ne=h>=0?c[h]:void 0,Ct=Ne!=null?q(Ne):void 0,G=s.useMemo(()=>{if(!r)return[];if(A==null){const e=v.filter(n=>i.includes(n.value));if(!D)return e;const t=new Set(e.map(n=>n.value));return[...e,...i.filter(n=>!t.has(n)).map(n=>({value:n,label:n}))]}return i.map(H).filter(e=>e!=null)},[r,A,v,i,D,H]),qt=o.default[`combobox--size-${Ut.toKebab(W)}`],Dt=r&&G.length>0,Se=ue.isFieldInvalid(Oe,Y,be),Ie=ue.hasFieldMessage(Y),Re=Ie?`${O}-message`:void 0,wt=[o.default.combobox,qt,Se?o.default["combobox--invalid"]:"",C!=null&&Mt?o.default["combobox--label-floated"]:"",Z!=null?o.default["combobox--has-leading-icon"]:"",Dt?o.default["combobox--has-chips"]:"",u?o.default["combobox--open"]:"",_?o.default["combobox--disabled"]:"",Ze].filter(Boolean).join(" ");return l.jsxs("div",{className:wt,ref:se,children:[l.jsxs("div",{className:o.default.combobox__wrapper,ref:xe,children:[C!=null&&l.jsx("label",{className:o.default.combobox__label,htmlFor:O,children:C}),l.jsxs("div",{className:o.default.combobox__inner,onMouseDown:kt,children:[Z!=null&&l.jsx("span",{className:o.default["combobox__leading-icon"],"aria-hidden":!0,children:l.jsx(P.IconSlotContext.Provider,{value:{size:"16"},children:Z})}),l.jsxs("div",{className:o.default.combobox__value,children:[r&&G.length>0&&l.jsx(pt.default,{"aria-label":Qe??Pt(C),disabled:_,children:G.map(e=>l.jsx(Rt.default,{size:Gt[W],leadingAvatar:e.leadingAvatar,leadingIcon:e.leadingAvatar==null?e.leadingVisual:void 0,onRemove:_?void 0:t=>{t.stopPropagation(),Ce(e.value)},children:e.label},e.value))}),l.jsx("input",{...tt,ref:at,id:O,className:o.default.combobox__control,type:"text",role:"combobox",autoComplete:"off",spellCheck:!1,disabled:_,placeholder:r&&G.length>0?void 0:Le,value:ne,"aria-label":ve,"aria-describedby":ue.mergeFieldDescribedBy(Ye,Re,void 0),"aria-required":Je?!0:void 0,"aria-invalid":Se?!0:void 0,"aria-expanded":u,"aria-controls":N,"aria-autocomplete":"list","aria-activedescendant":Ct,"aria-busy":me||void 0,onChange:mt,onFocus:ht,onBlur:gt,onKeyDown:_t})]}),At&&l.jsx("button",{...b,type:"button",className:Ht.mergeClassNames(o.default.combobox__clear,b==null?void 0:b.className),"aria-label":Pe,"data-combobox-clear":"",onClick:Me,onKeyDown:e=>{var t;e.key==="Enter"&&(e.preventDefault(),e.stopPropagation(),Me()),(t=b==null?void 0:b.onKeyDown)==null||t.call(b,e)},onBlur:e=>{var t;(t=b==null?void 0:b.onBlur)==null||t.call(b,e),De(e)},children:l.jsx(P.default,{size:Kt[W],glyph:l.jsx(St,{})})}),l.jsx("span",{className:o.default["combobox__trailing-icon"],"aria-hidden":!0,children:l.jsx(P.default,{size:"12",glyph:l.jsx(Nt,{})})})]})]}),Ie&&l.jsx(Et.default,{id:Re,className:o.default.combobox__message,message:Y,tone:be??"error"}),ye&&dt(l.jsx("div",{ref:Ae,className:[o.default.combobox__popup,it==="above"?o.default["combobox__popup--above"]:"",ot?o.default["combobox__popup--visible"]:""].filter(Boolean).join(" "),style:ut,onMouseDown:jt,children:l.jsx(Ee.default,{className:o.default.combobox__menu,children:l.jsxs(Ee.PopoverMenuScroll,{maxHeight:ct,children:[c.length>0&&l.jsx("ul",{id:N,className:o.default.combobox__list,role:"listbox","aria-multiselectable":r||void 0,"aria-label":typeof C=="string"?C:ve??Xe,children:c.map((e,t)=>{const n=t===h;if(e.kind==="create")return l.jsx("li",{className:o.default.combobox__option,role:"presentation",children:l.jsx(pe.default,{id:q(e),role:"option",label:He(e.inputValue),leadingVisual:l.jsx(P.default,{glyph:l.jsx(It,{})}),active:n,"aria-selected":!1,onMouseEnter:()=>_e(t),onClick:()=>ce(e.inputValue)})},q(e));const{option:f}=e,y=ft(f.value),K=Yt(f);return l.jsx("li",{className:o.default.combobox__option,role:"presentation",children:l.jsx(pe.default,{...zt.mergeMenuItemProps(Fe,f.menuItemProps),id:q(e),role:"option",label:f.label,secondaryLabel:f.secondaryLabel,leadingElement:K!=null,leadingVisual:K,trailingElement:y,active:n,disabled:f.disabled,"aria-selected":y,onMouseEnter:()=>_e(t),onClick:()=>ie(f)})},f.value)})}),me?l.jsxs("div",{className:o.default.combobox__loading,role:"status",children:[l.jsx(Vt.default,{size:"16","aria-hidden":!0}),l.jsx("span",{children:ze})]}):c.length===0&&l.jsx("p",{className:o.default.combobox__empty,children:$e})]})})}))]})});exports.default=Jt;
 //# sourceMappingURL=Combobox.cjs.map