@purpur/library 10.1.0 → 10.1.1

package/dist/{dropdown-DJr5COdU.mjs → dropdown-CxEElxNf.mjs}

@@ -1,17 +1,17 @@
 import { jsxs as ee, jsx as d, Fragment as ke } from "react/jsx-runtime";
-import { useState as xe, forwardRef as $e, useId as ye, useRef as fe, useCallback as Oe, useEffect as Ke } from "react";
+import { useState as xe, forwardRef as $e, useId as ye, useRef as fe, useCallback as Oe, useEffect as Ve } from "react";
 import { L as ue } from "./listbox-CtV-Vcmy.mjs";
-import { t as Ve } from "./use-autocomplete.es-CKb0RHKG.mjs";
+import { t as He } from "./use-autocomplete.es-CKb0RHKG.mjs";
 import { C as Se } from "./checkbox-DaRtZXrE.mjs";
 import { a as Ie } from "./dismissable-chip-group-DMNU7g5e.mjs";
-import { F as He } from "./field-error-text-CBSX8dGx.mjs";
-import { F as Me } from "./field-helper-text-C5ee4SFV.mjs";
-import { r as Ue } from "./check-circle-filled.es-umBwOv5_.mjs";
-import { l as Ye } from "./chevron-down.es-PCIIj6oG.mjs";
-import { L as qe } from "./label-7sJe5-pX.mjs";
-import { a as ze } from "./spinner-DRQN6YdK.mjs";
-import { c as je } from "./bind-CU-R61T-.mjs";
-const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
+import { F as Me } from "./field-error-text-CBSX8dGx.mjs";
+import { F as Ue } from "./field-helper-text-C5ee4SFV.mjs";
+import { r as Ye } from "./check-circle-filled.es-umBwOv5_.mjs";
+import { l as qe } from "./chevron-down.es-PCIIj6oG.mjs";
+import { L as ze } from "./label-7sJe5-pX.mjs";
+import { a as je } from "./spinner-DRQN6YdK.mjs";
+import { c as Ge } from "./bind-CU-R61T-.mjs";
+const re = (e) => typeof e.label == "string" ? e.label : e.value ?? "", We = {
   "purpur-dropdown": "_purpur-dropdown_p8b57_1",
   "purpur-dropdown--negative": "_purpur-dropdown--negative_p8b57_14",
   "purpur-dropdown__label": "_purpur-dropdown__label_p8b57_17",
@@ -55,20 +55,20 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
   "purpur-dropdown__checkbox-container": "_purpur-dropdown__checkbox-container_p8b57_304",
   "purpur-dropdown__checkbox-container--disabled": "_purpur-dropdown__checkbox-container--disabled_p8b57_311",
   "purpur-dropdown__select-all-child": "_purpur-dropdown__select-all-child_p8b57_314"
-}, m = je.bind(Ge), r = "purpur-dropdown", De = ({
+}, m = Ge.bind(We), r = "purpur-dropdown", De = ({
   fieldId: e,
   htmlForSuffix: o,
   label: i,
-  getTestId: s,
+  getTestId: l,
   disabled: n,
   negative: u,
   required: b
 }) => i ? /* @__PURE__ */ ee(
-  qe,
+  ze,
   {
     htmlFor: o ? `${e}-${o}` : e,
     className: m(`${r}__label`),
-    "data-testid": s("label"),
+    "data-testid": l("label"),
     disabled: n,
     negative: u,
     children: [
@@ -80,36 +80,36 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
   getTestId: e,
   loading: o,
   disabled: i,
-  negative: s,
+  negative: l,
   isValid: n,
   isOpen: u,
   readOnly: b,
   showChevronOpen: w
 }) => /* @__PURE__ */ d("span", { className: m(`${r}__end-adornments`), children: o ? /* @__PURE__ */ d(
-  ze,
+  je,
   {
     disabled: i,
     size: "xxs",
-    negative: s,
+    negative: l,
     "data-testid": e("spinner")
   }
 ) : /* @__PURE__ */ ee(ke, { children: [
   n && /* @__PURE__ */ d(
-    Ue,
+    Ye,
     {
       "data-testid": e("valid-icon"),
       className: m(`${r}__valid-icon`)
     }
   ),
   /* @__PURE__ */ d(
-    Ye,
+    qe,
     {
       className: m(`${r}__chevron-icon`, {
         [`${r}__chevron-icon--open`]: w && u,
         [`${r}__chevron-icon--disabled`]: i,
         [`${r}__chevron-icon--readonly`]: b && !i,
         [`${r}__chevron-icon--is-valid`]: n,
-        [`${r}__chevron-icon--negative`]: s
+        [`${r}__chevron-icon--negative`]: l
       }),
       "data-testid": e("dropdown-icon"),
       size: "sm"
@@ -119,7 +119,7 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
   selectedItems: e,
   getTestId: o,
   disabled: i,
-  negative: s,
+  negative: l,
   onRemove: n,
   isSelect: u,
   moreOptionsText: b,
@@ -133,23 +133,23 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
       className: m(`${r}__chip-group`, {
         [`${r}__chip-group--select`]: u
       }),
-      negative: s,
+      negative: l,
       "data-testid": o("tags"),
       size: "sm",
       children: [
-        p.map((l) => /* @__PURE__ */ d(
+        p.map((a) => /* @__PURE__ */ d(
           Ie.Item,
           {
-            id: l.id,
-            "data-testid": o(`tag-${l.id}`),
-            "aria-label": w ? `${w} ${ie(l)}` : ie(l),
+            id: a.id,
+            "data-testid": o(`tag-${a.id}`),
+            "aria-label": w ? `${w} ${re(a)}` : re(a),
             onDismiss: () => {
-              n(l);
+              n(a);
             },
-            disabled: i || l.disabled,
-            children: l.label
+            disabled: i || a.disabled,
+            children: a.label
           },
-          l.id
+          a.id
         )),
         h > 0 && /* @__PURE__ */ d(
           "li",
@@ -162,26 +162,26 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
       ]
     }
   );
-}, Ae = ({
+}, Ee = ({
   errorText: e,
   helperText: o,
   helperTextId: i,
-  negative: s
+  negative: l
 }) => /* @__PURE__ */ ee(ke, { children: [
-  e && /* @__PURE__ */ d(He, { negative: s, children: e }),
-  o && !e && /* @__PURE__ */ d(Me, { id: i, negative: s, children: o })
-] }), ne = "__purpur-dropdown-select-all__", Ee = ({
+  e && /* @__PURE__ */ d(Me, { negative: l, children: e }),
+  o && !e && /* @__PURE__ */ d(Ue, { id: i, negative: l, children: o })
+] }), de = "__purpur-dropdown-select-all__", Ae = ({
   selectAllLabel: e,
   multiple: o,
   options: i,
-  selectedItems: s
+  selectedItems: l
 }) => !e || !o || i.filter((w) => !w.disabled).length === 0 ? !1 : !i.filter((w) => w.disabled).some(
-  (w) => !s.some((C) => C.id === w.id)
+  (w) => !l.some((k) => k.id === w.id)
 ), Re = ({
   optionsToShow: e,
   getListboxItemProps: o,
   multiple: i,
-  negative: s,
+  negative: l,
   fieldId: n,
   noOptionsText: u,
   selectAllLabel: b,
@@ -189,17 +189,17 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
 }) => {
   if (u !== void 0 && !e.length)
     return /* @__PURE__ */ d(ue.Item, { noninteractive: !0, children: u });
-  const C = e[0]?.id === ne;
+  const k = e[0]?.id === de;
   let p = !1;
-  if (C) {
-    const l = e.filter((a) => a.id !== ne).filter((a) => !a.disabled), _ = l.filter(
-      (a) => w.some((y) => y.id === a.id)
-    ).length, $ = l.length > 0 && _ === l.length, f = w.length > 0;
-    p = $ ? !0 : f ? "indeterminate" : !1;
+  if (k) {
+    const a = e.filter((s) => s.id !== de).filter((s) => !s.disabled), _ = a.filter(
+      (s) => w.some((x) => x.id === s.id)
+    ).length, y = a.length > 0 && _ === a.length, f = w.length > 0;
+    p = y ? !0 : f ? "indeterminate" : !1;
   }
-  return e.map((h, l) => {
-    const { key: _, selected: $, ...f } = o(h, l);
-    return h.id === ne ? /* @__PURE__ */ d(
+  return e.map((h, a) => {
+    const { key: _, selected: y, ...f } = o(h, a);
+    return h.id === de ? /* @__PURE__ */ d(
       ue.Item,
       {
         ...f,
@@ -215,7 +215,7 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
             id: `${n}-checkbox-select-all`,
             checked: p,
             label: b,
-            negative: s,
+            negative: l,
             "aria-hidden": !0
           }
         ) })
@@ -226,9 +226,9 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
       {
         ...f,
         className: m(`${r}__checkbox-item-multiple`, {
-          [`${r}__select-all-child`]: C
+          [`${r}__select-all-child`]: k
         }),
-        selected: !!$,
+        selected: !!y,
         hideSelectedIcon: !0,
         children: /* @__PURE__ */ d(
           "span",
@@ -240,9 +240,9 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
               Se,
               {
                 id: `${n}-checkbox-${h.id}`,
-                checked: !!$,
+                checked: !!y,
                 label: h.label,
-                negative: s,
+                negative: l,
                 "aria-hidden": !0,
                 disabled: h.disabled
               }
@@ -251,15 +251,15 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
         )
       },
       _
-    ) : /* @__PURE__ */ d(ue.Item, { ...f, selected: !!$, children: /* @__PURE__ */ d("div", { children: h.label }) }, _);
+    ) : /* @__PURE__ */ d(ue.Item, { ...f, selected: !!y, children: /* @__PURE__ */ d("div", { children: h.label }) }, _);
   });
-}, We = (e, o, i) => {
+}, Xe = (e, o, i) => {
   if (i)
     return e.filter((n) => i(o, n));
   if (!o) return e;
-  const s = o.toUpperCase().split(" ");
+  const l = o.toUpperCase().split(" ");
   return e.filter(
-    (n) => s.every(
+    (n) => l.every(
       (u) => (n.value || (typeof n.label == "string" ? n.label : "")).toUpperCase().includes(u)
     )
   );
@@ -267,161 +267,167 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
   options: e,
   searchTerm: o,
   filterOption: i,
-  selectedOption: s,
+  selectedOption: l,
   multiple: n
-}) => !n && s && ie(s) === o ? e : We(e, o, i), Be = ({
+}) => !n && l && re(l) === o ? e : Xe(e, o, i), Be = ({
   controlledInputValue: e,
   defaultInputValue: o,
   selectedOption: i,
-  onInputChange: s
+  onInputChange: l
 }) => {
   const [n, u] = xe(
-    (typeof e == "string" ? e : o ?? (i ? ie(i) : void 0)) ?? ""
+    (typeof e == "string" ? e : o ?? (i ? re(i) : void 0)) ?? ""
   );
   return {
     displayInputValue: typeof e == "string" ? e : n,
-    populateInputField: (C) => {
-      s?.(C), u(C);
+    populateInputField: (k) => {
+      l?.(k), u(k);
     }
   };
 }, Fe = $e((e, o) => {
   const {
     id: i,
-    label: s,
+    label: l,
     options: n,
     className: u,
     errorText: b,
     helperText: w,
-    placeholder: C,
+    placeholder: k,
     negative: p = !1,
     readOnly: h = !1,
-    disabled: l = !1,
+    disabled: a = !1,
     required: _ = !1,
-    valid: $,
+    valid: y,
     loading: f,
-    multiple: a = !1,
-    selectedOption: y,
-    selectedOptions: N = [],
+    multiple: s = !1,
+    selectedOption: x,
+    selectedOptions: L = [],
     onSelect: S,
-    openOnFocus: de = !1,
-    listboxMaxHeight: A,
+    openOnFocus: se = !1,
+    listboxMaxHeight: E,
     listboxLabel: _e,
     filterOption: F,
-    inputValue: re,
-    defaultInputValue: U,
+    inputValue: te,
+    defaultInputValue: q,
     onInputChange: g,
-    noOptionsText: te,
+    noOptionsText: oe,
     highlightFirstOption: P = !1,
-    selectAllLabel: k,
-    moreOptionsText: X,
-    removeOptionAriaLabel: E,
-    ["data-testid"]: I
-  } = e, Y = ye(), K = i ?? Y, O = (c) => I ? `${I}-${c}` : void 0, q = !!$ && !b, z = `${K}-helper-text`, x = a ? N : y ? [y] : [], { displayInputValue: j, populateInputField: J } = Be({
-    controlledInputValue: re,
-    defaultInputValue: U,
-    selectedOption: y,
+    selectAllLabel: O,
+    moreOptionsText: Q,
+    removeOptionAriaLabel: A,
+    ["data-testid"]: C
+  } = e, z = ye(), K = i ?? z, D = (c) => C ? `${C}-${c}` : void 0, j = !!y && !b, G = `${K}-helper-text`, $ = s ? L : x ? [x] : [], { displayInputValue: M, populateInputField: W } = Be({
+    controlledInputValue: te,
+    defaultInputValue: q,
+    selectedOption: x,
     onInputChange: g
-  }), se = Te({
+  }), le = Te({
     options: n,
-    searchTerm: j,
+    searchTerm: M,
     filterOption: F,
-    selectedOption: y,
-    multiple: a
-  }), le = Ee({
-    selectAllLabel: k,
-    multiple: a,
+    selectedOption: x,
+    multiple: s
+  }), ae = Ae({
+    selectAllLabel: O,
+    multiple: s,
     options: n,
-    selectedItems: x
-  }), oe = le && (le && !j) ? [{ id: ne, label: k }, ...se] : se, V = () => {
-    const c = n.filter((D) => !D.disabled);
+    selectedItems: $
+  }), ne = ae && (ae && !M) ? [{ id: de, label: O }, ...le] : le, V = () => {
+    const c = n.filter((N) => !N.disabled);
     if (c.every(
-      (D) => x.some((B) => B.id === D.id)
+      (N) => $.some((B) => B.id === N.id)
     )) {
-      const D = x.filter((B) => B.disabled);
-      S?.(void 0, D);
+      const N = $.filter((B) => B.disabled);
+      S?.(void 0, N);
     } else {
-      const B = [...x.filter((ve) => ve.disabled), ...c];
+      const B = [...$.filter((ve) => ve.disabled), ...c];
       S?.(void 0, B);
     }
-    J("");
+    W("");
   }, ge = (c) => {
-    if (c.id === ne) {
+    if (c.id === de) {
       V();
       return;
     }
-    if (a) {
-      const D = x.some((B) => B.id === c.id) ? x.filter((B) => B.id !== c.id) : [...x, c];
-      S?.(c, D), J("");
+    if (s) {
+      const N = $.some((B) => B.id === c.id) ? $.filter((B) => B.id !== c.id) : [...$, c];
+      S?.(c, N), W("");
     } else
-      S?.(c, [c]), J(ie(c));
+      S?.(c, [c]), W(re(c));
   }, {
-    rootRef: Q,
+    rootRef: X,
     inputRef: Z,
-    inputProps: G,
-    listboxProps: ae,
+    inputProps: U,
+    listboxProps: ce,
     getListboxItemProps: be,
     isOpen: v,
-    openListbox: M,
+    openListbox: Y,
     anchorStyle: R
-  } = Ve({
+  } = He({
     id: K,
     // useAutocomplete only reads id/disabled, never label's value, so this is safe even though
     // DropdownOption.label can be a ReactNode instead of the string it's typed to require.
-    options: oe,
-    listboxLabel: _e || s || "Options",
-    selectedOption: a ? void 0 : y,
-    disabled: l,
+    options: ne,
+    listboxLabel: _e || l || "Options",
+    selectedOption: s ? void 0 : x,
+    disabled: a,
     readOnly: h,
-    openOnFocus: de,
-    listboxMaxHeight: A,
+    openOnFocus: se,
+    listboxMaxHeight: E,
     highlightFirstOption: P,
-    closeOnSelect: !a,
-    noOptionsText: te,
+    closeOnSelect: !s,
+    noOptionsText: oe,
     negative: p,
     onSelect: ge,
-    "data-testid": I
-  }), W = (c) => {
-    Q.current = c, typeof o == "function" ? o(c) : o && (o.current = c);
-  }, he = (c, L) => {
-    const D = be(c, L);
-    if (a) {
-      const B = x.some((ve) => ve.id === c.id);
-      return { ...D, selected: B, "aria-selected": B };
+    "data-testid": C
+  }), J = (c) => {
+    X.current = c, typeof o == "function" ? o(c) : o && (o.current = c);
+  }, he = (c, I) => {
+    const N = be(c, I);
+    if (s) {
+      const B = $.some((ve) => ve.id === c.id);
+      return { ...N, selected: B, "aria-selected": B };
     }
-    return D;
+    return N;
   }, t = (c) => {
-    const L = x.filter((D) => D.id !== c.id);
-    S?.(c, L);
+    const I = $.filter((N) => N.id !== c.id);
+    S?.(c, I);
   }, T = (c) => {
-    if (a && c.key === "Backspace" && c.currentTarget.value === "" && x.length > 0) {
-      for (let L = x.length - 1; L >= 0; L--)
-        if (!x[L].disabled) {
-          t(x[L]);
+    if (s && c.key === "Backspace" && c.currentTarget.value === "" && $.length > 0) {
+      for (let I = $.length - 1; I >= 0; I--)
+        if (!$[I].disabled) {
+          t($[I]);
           break;
         }
     }
-    G?.onKeyDown?.(c);
-  }, ce = (c) => {
-    J(c.target.value), v || M();
+    U?.onKeyDown?.(c);
+  }, pe = (c) => {
+    W(c.target.value), v || Y();
   }, H = (c) => {
-    if (l || h) return;
-    const L = c.target;
-    if (L === Z.current || L.closest("button"))
+    U?.onBlur?.(c), !s && setTimeout(() => {
+      if (X.current?.contains(document.activeElement)) return;
+      const I = x ? re(x) : "";
+      M !== I && W(I);
+    });
+  }, we = (c) => {
+    if (a || h) return;
+    const I = c.target;
+    if (I === Z.current || I.closest("button"))
       return;
-    const D = Z.current;
-    D?.dispatchEvent(new MouseEvent("mousedown", { bubbles: !0 })), D?.focus();
-  }, we = a && !!k && n.length > 0 && n.every((c) => x.some((L) => L.id === c.id)), pe = m(r, u, {
+    const N = Z.current;
+    N?.dispatchEvent(new MouseEvent("mousedown", { bubbles: !0 })), N?.focus();
+  }, ie = s && !!O && n.length > 0 && n.every((c) => $.some((I) => I.id === c.id)), Ke = m(r, u, {
     [`${r}--negative`]: p
   });
-  return /* @__PURE__ */ ee("div", { ref: W, className: pe, children: [
+  return /* @__PURE__ */ ee("div", { ref: J, className: Ke, children: [
     /* @__PURE__ */ d(
       De,
       {
         fieldId: K,
         htmlForSuffix: "input",
-        label: s,
-        getTestId: O,
-        disabled: l,
+        label: l,
+        getTestId: D,
+        disabled: a,
         negative: p,
         required: _
       }
@@ -431,54 +437,55 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
       {
         className: m(`${r}__combobox-container`, {
           [`${r}__combobox-container--error`]: !!b,
-          [`${r}__combobox-container--is-valid`]: q,
+          [`${r}__combobox-container--is-valid`]: j,
           [`${r}__combobox-container--negative`]: p,
-          [`${r}__combobox-container--disabled`]: l,
-          [`${r}__combobox-container--readonly`]: h && !l
+          [`${r}__combobox-container--disabled`]: a,
+          [`${r}__combobox-container--readonly`]: h && !a
         }),
         style: R,
-        onClick: H,
+        onClick: we,
         children: [
-          a && !we && /* @__PURE__ */ d(
+          s && !ie && /* @__PURE__ */ d(
             Le,
             {
-              selectedItems: x,
-              getTestId: O,
-              disabled: l,
+              selectedItems: $,
+              getTestId: D,
+              disabled: a,
               negative: p,
               onRemove: t,
-              moreOptionsText: X,
-              removeOptionAriaLabel: E
+              moreOptionsText: Q,
+              removeOptionAriaLabel: A
             }
           ),
           /* @__PURE__ */ d(
             "input",
             {
-              ...G,
+              ...U,
               ref: Z,
               id: `${K}-input`,
-              "data-testid": O("input"),
+              "data-testid": D("input"),
               onKeyDown: T,
-              onChange: ce,
-              value: we && !j ? k : j,
-              placeholder: C,
+              onChange: pe,
+              onBlur: H,
+              value: ie && !M ? O : M,
+              placeholder: k,
               className: m(`${r}__input`, {
                 [`${r}__input--negative`]: p
               }),
-              "aria-describedby": z,
+              "aria-describedby": G,
               "aria-invalid": !!b,
-              disabled: l,
+              disabled: a,
               readOnly: h
             }
           ),
           /* @__PURE__ */ d(
             Ne,
             {
-              getTestId: O,
+              getTestId: D,
               loading: f,
-              disabled: l,
+              disabled: a,
               negative: p,
-              isValid: q,
+              isValid: j,
               isOpen: v,
               showChevronOpen: !0
             }
@@ -494,173 +501,173 @@ const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
         ]
       }
     ) }),
-    v && /* @__PURE__ */ d(ue, { ...ae, className: m(`${r}__listbox`), children: Re({
-      optionsToShow: oe,
+    v && /* @__PURE__ */ d(ue, { ...ce, className: m(`${r}__listbox`), children: Re({
+      optionsToShow: ne,
       getListboxItemProps: he,
-      multiple: a,
+      multiple: s,
       negative: p,
       fieldId: K,
-      noOptionsText: te,
-      selectAllLabel: k,
-      selectedItems: x
+      noOptionsText: oe,
+      selectAllLabel: O,
+      selectedItems: $
     }) }),
     /* @__PURE__ */ d(
-      Ae,
+      Ee,
       {
         errorText: b,
         helperText: w,
-        helperTextId: z,
+        helperTextId: G,
         negative: p
       }
     )
   ] });
 });
 Fe.displayName = "DropdownCombobox";
-const Xe = ({
+const Je = ({
   options: e,
   highlightFirstOption: o
 }) => {
-  const i = fe(null), s = fe({}), [n, u] = xe(
+  const i = fe(null), l = fe({}), [n, u] = xe(
     o ? e[0] : void 0
   ), b = (_) => {
     if (_) {
-      const $ = _.getBoundingClientRect(), f = i.current?.getBoundingClientRect() || { top: 0, bottom: 0 };
-      ($.top < f.top || $.bottom > f.bottom) && _.scrollIntoView({ block: "nearest" });
+      const y = _.getBoundingClientRect(), f = i.current?.getBoundingClientRect() || { top: 0, bottom: 0 };
+      (y.top < f.top || y.bottom > f.bottom) && _.scrollIntoView({ block: "nearest" });
     }
   };
   return {
     highlightedOption: n,
     listboxRef: i,
-    optionRefs: s,
-    findNextOption: (_, $) => {
-      const f = $.filter((y) => !y.disabled);
+    optionRefs: l,
+    findNextOption: (_, y) => {
+      const f = y.filter((x) => !x.disabled);
       if (!f.length) return;
-      const a = n ? f.findIndex((y) => y.id === n.id) : -1;
-      return _ === "ArrowDown" ? f[(a + 1) % f.length] : f[(a - 1 + f.length) % f.length];
+      const s = n ? f.findIndex((x) => x.id === n.id) : -1;
+      return _ === "ArrowDown" ? f[(s + 1) % f.length] : f[(s - 1 + f.length) % f.length];
     },
     highlightOption: (_) => {
-      u(_ ? { ..._ } : void 0), _ && b(s.current[_.id]);
+      u(_ ? { ..._ } : void 0), _ && b(l.current[_.id]);
     },
     highlightByClick: (_) => {
       _.id !== n?.id && u({ ..._, isSetByClickEvent: !0 });
     },
-    highlightSelected: (_, $) => {
+    highlightSelected: (_, y) => {
       requestAnimationFrame(() => {
-        u({ ..._, isSetByClickEvent: $ === "CLICK" }), b(s.current[_.id]);
+        u({ ..._, isSetByClickEvent: y === "CLICK" }), b(l.current[_.id]);
       });
     },
     resetHighlight: () => {
       u(void 0);
     }
   };
-}, Je = (e, o) => {
+}, Qe = (e, o) => {
   const i = Oe(
-    (s) => {
-      e && !e.contains(s.target) && o();
+    (l) => {
+      e && !e.contains(l.target) && o();
     },
     [o, e]
   );
-  Ke(() => (document.addEventListener("mousedown", i), () => {
+  Ve(() => (document.addEventListener("mousedown", i), () => {
     document.removeEventListener("mousedown", i);
   }), [i]);
-}, Qe = ({
+}, Ze = ({
   id: e,
   variant: o,
   options: i,
-  listboxLabel: s,
+  listboxLabel: l,
   multiple: n = !1,
   selectedOption: u,
   selectedOptions: b = [],
   onSelect: w,
-  filterOption: C,
+  filterOption: k,
   inputValue: p,
   defaultInputValue: h,
-  onInputChange: l,
+  onInputChange: a,
   noOptionsText: _,
-  highlightFirstOption: $ = !1,
+  highlightFirstOption: y = !1,
   openOnFocus: f = !1,
-  listboxMaxHeight: a,
-  negative: y,
-  disabled: N = !1,
+  listboxMaxHeight: s,
+  negative: x,
+  disabled: L = !1,
   readOnly: S = !1,
-  ["data-testid"]: de
+  ["data-testid"]: se
 }) => {
-  const A = o === "combobox", _e = ye(), F = fe(null), re = fe(null), U = fe(null), g = Xe({ options: i, highlightFirstOption: $ }), { displayInputValue: te, populateInputField: P } = Be({
+  const E = o === "combobox", _e = ye(), F = fe(null), te = fe(null), q = fe(null), g = Je({ options: i, highlightFirstOption: y }), { displayInputValue: oe, populateInputField: P } = Be({
     controlledInputValue: p,
     defaultInputValue: h,
     selectedOption: u,
-    onInputChange: l
-  }), [k, X] = xe(!1), E = () => {
-    X(!1), g.resetHighlight();
+    onInputChange: a
+  }), [O, Q] = xe(!1), A = () => {
+    Q(!1), g.resetHighlight();
   };
-  Je(F.current, E);
-  const I = ({ eventType: t }) => {
-    X(!0);
+  Qe(F.current, A);
+  const C = ({ eventType: t }) => {
+    Q(!0);
     const T = n ? void 0 : u;
     T && g.highlightSelected(T, t);
-  }, Y = n ? b : u ? [u] : [], K = A ? Te({
+  }, z = n ? b : u ? [u] : [], K = E ? Te({
     options: i,
-    searchTerm: te,
-    filterOption: C,
+    searchTerm: oe,
+    filterOption: k,
     selectedOption: u,
     multiple: n
-  }) : i, O = k && (!!K.length || !!_), q = (t) => de ? `${de}-${t}` : void 0, z = (t) => {
+  }) : i, D = O && (!!K.length || !!_), j = (t) => se ? `${se}-${t}` : void 0, G = (t) => {
     if (!(!t || t.disabled))
       if (n) {
-        const ce = Y.some((H) => H.id === t.id) ? Y.filter((H) => H.id !== t.id) : [...Y, t];
-        w?.(t, ce), A && (P(""), U.current?.focus());
+        const pe = z.some((H) => H.id === t.id) ? z.filter((H) => H.id !== t.id) : [...z, t];
+        w?.(t, pe), E && (P(""), q.current?.focus());
       } else
-        w?.(t, [t]), A && P(ie(t)), E(), (A ? U : re).current?.focus();
-  }, x = (t) => {
-    O || I({ eventType: "KEYBOARD" });
+        w?.(t, [t]), E && P(re(t)), A(), (E ? q : te).current?.focus();
+  }, $ = (t) => {
+    D || C({ eventType: "KEYBOARD" });
     const T = g.findNextOption(t, K);
     g.highlightOption(T);
-  }, j = (t) => {
-    if (!(N || S))
+  }, M = (t) => {
+    if (!(L || S))
       switch (t.key) {
         case "ArrowUp":
         case "ArrowDown":
-          t.preventDefault(), x(t.key);
+          t.preventDefault(), $(t.key);
           break;
         case "Enter": {
-          t.preventDefault(), O && g.highlightedOption ? z(g.highlightedOption) : O || I({ eventType: "KEYBOARD" });
+          t.preventDefault(), D && g.highlightedOption ? G(g.highlightedOption) : D || C({ eventType: "KEYBOARD" });
           break;
         }
         case " ": {
-          A || (t.preventDefault(), O && g.highlightedOption ? z(g.highlightedOption) : O || I({ eventType: "KEYBOARD" }));
+          E || (t.preventDefault(), D && g.highlightedOption ? G(g.highlightedOption) : D || C({ eventType: "KEYBOARD" }));
           break;
         }
         case "Escape":
-          t.preventDefault(), E();
+          t.preventDefault(), A();
           break;
         case "Tab":
-          E();
+          A();
           break;
         case "Home":
         case "End":
-          A && E();
+          E && A();
           break;
       }
-  }, J = (t) => {
-    P(t.target.value), g.resetHighlight(), k || I({ eventType: "KEYBOARD" });
-  }, se = () => {
-    N || S || (k ? E() : I({ eventType: "CLICK" }));
+  }, W = (t) => {
+    P(t.target.value), g.resetHighlight(), O || C({ eventType: "KEYBOARD" });
   }, le = () => {
-    !k && f && !N && !S && I({ eventType: "KEYBOARD" }), U.current?.select();
+    L || S || (O ? A() : C({ eventType: "CLICK" }));
+  }, ae = () => {
+    !O && f && !L && !S && C({ eventType: "KEYBOARD" }), q.current?.select();
   }, me = () => {
     setTimeout(() => {
       const t = document.activeElement;
-      t !== document.body && !U.current?.contains(t) && !g.listboxRef.current?.contains(t) && !F.current?.contains(t) && (E(), A && !n && P(u ? ie(u) : ""));
+      t !== document.body && !q.current?.contains(t) && !g.listboxRef.current?.contains(t) && !F.current?.contains(t) && (A(), E && !n && P(u ? re(u) : ""));
     });
-  }, oe = () => {
-    N || S || (k ? E() : I({ eventType: "CLICK" }));
+  }, ne = () => {
+    L || S || (O ? A() : C({ eventType: "CLICK" }));
   }, V = (t) => {
-    if (N || S) return;
+    if (L || S) return;
     const T = t.target.closest("button");
-    T && T !== re.current || oe();
+    T && T !== te.current || ne();
   }, ge = () => {
-    !k && f && !N && !S && I({ eventType: "KEYBOARD" });
-  }, Q = `${e}-listbox`, Z = (t) => `${e}-listbox-item-${t.id}`, G = `--purpur-dropdown-${_e.replace(/:/g, "")}`, ae = { anchorName: G }, be = A ? null : {
+    !O && f && !L && !S && C({ eventType: "KEYBOARD" });
+  }, X = `${e}-listbox`, Z = (t) => `${e}-listbox-item-${t.id}`, U = `--purpur-dropdown-${_e.replace(/:/g, "")}`, ce = { anchorName: U }, be = E ? null : {
     onClick: V
   }, v = Oe(
     (t) => {
@@ -671,180 +678,180 @@ const Xe = ({
         }
     },
     [g.listboxRef]
-  ), M = {
-    "aria-label": s,
-    "aria-expanded": O,
-    "data-testid": q("listbox"),
-    id: Q,
+  ), Y = {
+    "aria-label": l,
+    "aria-expanded": D,
+    "data-testid": j("listbox"),
+    id: X,
     ref: v,
     onMouseLeave: () => g.resetHighlight(),
     popover: "manual",
-    negative: y,
+    negative: x,
     style: {
-      ...a ? {
-        maxHeight: typeof a == "number" ? `${a}px` : a
+      ...s ? {
+        maxHeight: typeof s == "number" ? `${s}px` : s
       } : {},
-      positionAnchor: G
+      positionAnchor: U
     }
   }, R = (t, T) => {
-    const ce = Y.some((pe) => pe.id === t.id), { highlightedOption: H } = g, we = (t.id === H?.id || $ && !H && T === 0) && !H?.isSetByClickEvent;
+    const pe = z.some((ie) => ie.id === t.id), { highlightedOption: H } = g, we = (t.id === H?.id || y && !H && T === 0) && !H?.isSetByClickEvent;
     return {
-      "data-testid": q(`listbox-item-${t.id}`),
+      "data-testid": j(`listbox-item-${t.id}`),
       id: Z(t),
       key: t.id,
       onMouseMove: () => g.highlightByClick(t),
-      onMouseUp: () => z(t),
-      ref: (pe) => {
-        pe && (g.optionRefs.current[t.id] = pe);
+      onMouseUp: () => G(t),
+      ref: (ie) => {
+        ie && (g.optionRefs.current[t.id] = ie);
       },
       tabIndex: -1,
-      selected: ce,
+      selected: pe,
       disabled: t.disabled,
       highlighted: we,
       hovered: t.id === H?.id && !!H?.isSetByClickEvent,
-      "aria-selected": ce
+      "aria-selected": pe
     };
-  }, W = A ? {} : {
-    ref: re,
+  }, J = E ? {} : {
+    ref: te,
     type: "button",
     role: "combobox",
     "aria-haspopup": "listbox",
-    "aria-expanded": O,
-    "aria-controls": Q,
-    "aria-disabled": N,
-    "data-testid": q("trigger"),
+    "aria-expanded": D,
+    "aria-controls": X,
+    "aria-disabled": L,
+    "data-testid": j("trigger"),
     id: `${e}-trigger`,
-    onKeyDown: j,
+    onKeyDown: M,
     onFocus: ge,
-    disabled: N,
-    tabIndex: N ? -1 : 0,
-    style: ae
-  }, he = A ? {
-    ref: U,
+    disabled: L,
+    tabIndex: L ? -1 : 0,
+    style: ce
+  }, he = E ? {
+    ref: q,
     role: "combobox",
     "aria-autocomplete": "list",
-    "aria-expanded": O,
-    "aria-controls": Q,
+    "aria-expanded": D,
+    "aria-controls": X,
     "aria-activedescendant": g.highlightedOption ? Z(g.highlightedOption) : void 0,
-    "data-testid": q("input"),
+    "data-testid": j("input"),
     autoComplete: "off",
     id: `${e}-input`,
     type: "text",
-    value: te,
-    onChange: J,
-    onMouseDown: se,
-    onFocus: le,
+    value: oe,
+    onChange: W,
+    onMouseDown: le,
+    onFocus: ae,
     onBlur: me,
-    onKeyDown: j,
-    disabled: N,
+    onKeyDown: M,
+    disabled: L,
     readOnly: S
   } : null;
   return {
     rootRef: F,
     triggerContainerProps: be,
-    triggerProps: W,
+    triggerProps: J,
     inputProps: he,
-    listboxProps: M,
+    listboxProps: Y,
     getListboxItemProps: R,
     optionsToShow: K,
-    isOpen: O,
+    isOpen: D,
     highlightedOption: g.highlightedOption,
-    selectedItems: Y,
-    anchorStyle: ae
+    selectedItems: z,
+    anchorStyle: ce
   };
 }, Pe = $e((e, o) => {
   const {
     id: i,
-    label: s,
+    label: l,
     options: n,
     className: u,
     errorText: b,
     helperText: w,
-    placeholder: C,
+    placeholder: k,
     negative: p = !1,
     readOnly: h = !1,
-    disabled: l = !1,
+    disabled: a = !1,
     required: _ = !1,
-    valid: $ = !1,
+    valid: y = !1,
     loading: f = !1,
-    multiple: a = !1,
-    selectedOption: y,
-    selectedOptions: N = [],
+    multiple: s = !1,
+    selectedOption: x,
+    selectedOptions: L = [],
     onSelect: S,
-    openOnFocus: de = !1,
-    listboxMaxHeight: A,
+    openOnFocus: se = !1,
+    listboxMaxHeight: E,
     listboxLabel: _e,
     selectAllLabel: F,
-    moreOptionsText: re,
-    removeOptionAriaLabel: U,
+    moreOptionsText: te,
+    removeOptionAriaLabel: q,
     ["data-testid"]: g
-  } = e, te = ye(), P = i ?? te, k = (v) => g ? `${g}-${v}` : void 0, X = !!$ && !b, E = `${P}-helper-text`, I = a ? N : y ? [y] : [], Y = Ee({
+  } = e, oe = ye(), P = i ?? oe, O = (v) => g ? `${g}-${v}` : void 0, Q = !!y && !b, A = `${P}-helper-text`, C = s ? L : x ? [x] : [], z = Ae({
     selectAllLabel: F,
-    multiple: a,
+    multiple: s,
     options: n,
-    selectedItems: I
+    selectedItems: C
   }), K = () => {
     const v = n.filter((R) => !R.disabled);
     if (v.every(
-      (R) => I.some((W) => W.id === R.id)
+      (R) => C.some((J) => J.id === R.id)
     )) {
-      const R = I.filter((W) => W.disabled);
+      const R = C.filter((J) => J.disabled);
       S?.(void 0, R);
     } else {
-      const W = [...I.filter((he) => he.disabled), ...v];
-      S?.(void 0, W);
+      const J = [...C.filter((he) => he.disabled), ...v];
+      S?.(void 0, J);
     }
-  }, O = (v, M) => {
-    if (v?.id === ne) {
+  }, D = (v, Y) => {
+    if (v?.id === de) {
       K();
       return;
     }
-    S?.(v, M);
-  }, q = Y ? [{ id: ne, label: F }, ...n] : n, z = Qe({
+    S?.(v, Y);
+  }, j = z ? [{ id: de, label: F }, ...n] : n, G = Ze({
     id: P,
     variant: "select",
-    options: q,
-    listboxLabel: _e || s || "Options",
-    multiple: a,
+    options: j,
+    listboxLabel: _e || l || "Options",
+    multiple: s,
     negative: p,
-    selectedOption: y,
-    selectedOptions: N,
-    onSelect: O,
-    openOnFocus: de,
-    listboxMaxHeight: A,
-    disabled: l,
+    selectedOption: x,
+    selectedOptions: L,
+    onSelect: D,
+    openOnFocus: se,
+    listboxMaxHeight: E,
+    disabled: a,
     readOnly: h,
     "data-testid": g
-  }), x = (v) => {
-    z.rootRef.current = v, typeof o == "function" ? o(v) : o && (o.current = v);
+  }), $ = (v) => {
+    G.rootRef.current = v, typeof o == "function" ? o(v) : o && (o.current = v);
   }, {
-    triggerContainerProps: j,
-    triggerProps: J,
-    listboxProps: se,
-    getListboxItemProps: le,
+    triggerContainerProps: M,
+    triggerProps: W,
+    listboxProps: le,
+    getListboxItemProps: ae,
     optionsToShow: me,
-    isOpen: oe,
+    isOpen: ne,
     selectedItems: V,
     anchorStyle: ge
-  } = z, Q = {
-    ...J
+  } = G, X = {
+    ...W
   };
-  delete Q.style;
+  delete X.style;
   const Z = (v) => {
-    const M = V.filter((R) => R.id !== v.id);
-    S?.(v, M);
-  }, G = a && !!F && n.length > 0 && n.every((v) => V.some((M) => M.id === v.id)), ae = a ? G ? F : V.length === 0 && C || "" : y?.label || C || "", be = m(r, u, {
+    const Y = V.filter((R) => R.id !== v.id);
+    S?.(v, Y);
+  }, U = s && !!F && n.length > 0 && n.every((v) => V.some((Y) => Y.id === v.id)), ce = s ? U ? F : V.length === 0 && k || "" : x?.label || k || "", be = m(r, u, {
     [`${r}--negative`]: p
   });
-  return /* @__PURE__ */ ee("div", { ref: x, className: be, children: [
+  return /* @__PURE__ */ ee("div", { ref: $, className: be, children: [
     /* @__PURE__ */ d(
       De,
       {
         fieldId: P,
         htmlForSuffix: "trigger",
-        label: s,
-        getTestId: k,
-        disabled: l,
+        label: l,
+        getTestId: O,
+        disabled: a,
         negative: p,
         required: _
       }
@@ -852,54 +859,54 @@ const Xe = ({
     /* @__PURE__ */ d("div", { className: m(`${r}__field-row`), children: /* @__PURE__ */ ee(
       "div",
       {
-        ...j,
+        ...M,
         className: m(`${r}__trigger-container`, {
           [`${r}__trigger-container--error`]: !!b,
-          [`${r}__trigger-container--is-valid`]: X,
+          [`${r}__trigger-container--is-valid`]: Q,
           [`${r}__trigger-container--negative`]: p,
-          [`${r}__trigger-container--disabled`]: l,
-          [`${r}__trigger-container--readonly`]: h && !l,
-          [`${r}__trigger-container--has-tags`]: a && V.length > 0 && !G
+          [`${r}__trigger-container--disabled`]: a,
+          [`${r}__trigger-container--readonly`]: h && !a,
+          [`${r}__trigger-container--has-tags`]: s && V.length > 0 && !U
         }),
         style: ge,
         children: [
-          a && !G && /* @__PURE__ */ d(
+          s && !U && /* @__PURE__ */ d(
             Le,
             {
               selectedItems: V,
-              getTestId: k,
-              disabled: l,
+              getTestId: O,
+              disabled: a,
               negative: p,
               onRemove: Z,
-              moreOptionsText: re,
-              removeOptionAriaLabel: U,
+              moreOptionsText: te,
+              removeOptionAriaLabel: q,
               isSelect: !0
             }
           ),
           /* @__PURE__ */ d(
             "button",
             {
-              ...Q,
+              ...X,
               className: m(`${r}__trigger`, {
-                [`${r}__trigger--is-valid`]: X,
+                [`${r}__trigger--is-valid`]: Q,
                 [`${r}__trigger--negative`]: p,
-                [`${r}__trigger--disabled`]: l,
-                [`${r}__trigger--readonly`]: h && !l,
+                [`${r}__trigger--disabled`]: a,
+                [`${r}__trigger--readonly`]: h && !a,
                 [`${r}__trigger--placeholder`]: !V.length
               }),
-              "aria-describedby": E,
-              children: /* @__PURE__ */ d("span", { className: m(`${r}__trigger-text`), children: ae })
+              "aria-describedby": A,
+              children: /* @__PURE__ */ d("span", { className: m(`${r}__trigger-text`), children: ce })
             }
           ),
           /* @__PURE__ */ d(
             Ne,
             {
-              getTestId: k,
+              getTestId: O,
               loading: f,
-              disabled: l,
+              disabled: a,
               negative: p,
-              isValid: X,
-              isOpen: oe,
+              isValid: Q,
+              isOpen: ne,
               readOnly: h,
               showChevronOpen: !0
             }
@@ -915,31 +922,31 @@ const Xe = ({
         ]
       }
     ) }),
-    oe && /* @__PURE__ */ d(ue, { ...se, className: m(`${r}__listbox`), children: Re({
+    ne && /* @__PURE__ */ d(ue, { ...le, className: m(`${r}__listbox`), children: Re({
       optionsToShow: me,
-      getListboxItemProps: le,
-      multiple: a,
+      getListboxItemProps: ae,
+      multiple: s,
       negative: p,
       fieldId: P,
       selectAllLabel: F,
       selectedItems: V
     }) }),
     /* @__PURE__ */ d(
-      Ae,
+      Ee,
       {
         errorText: b,
         helperText: w,
-        helperTextId: E,
+        helperTextId: A,
         negative: p
       }
     )
   ] });
 });
 Pe.displayName = "DropdownSelect";
-const Ze = $e((e, o) => e.combobox ? /* @__PURE__ */ d(Fe, { ref: o, ...e }) : /* @__PURE__ */ d(Pe, { ref: o, ...e }));
-Ze.displayName = "Dropdown";
+const er = $e((e, o) => e.combobox ? /* @__PURE__ */ d(Fe, { ref: o, ...e }) : /* @__PURE__ */ d(Pe, { ref: o, ...e }));
+er.displayName = "Dropdown";
 export {
-  Ze as D,
-  Qe as u
+  er as D,
+  Ze as u
 };
-//# sourceMappingURL=dropdown-DJr5COdU.mjs.map
+//# sourceMappingURL=dropdown-CxEElxNf.mjs.map