@fluidattacks/design 9.1.0 → 9.1.2

package/dist/components/card/card-with-input/index.js

@@ -12,6 +12,7 @@ import "react-dom";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";
+import "../../inputs/styles.js";
 import "../../container/index.js";
 import "../../icon-button/index.js";
 import "../../../_virtual/dayjs.min.js";
@@ -20,7 +21,7 @@ import "../../layout/categories/buttons/index.js";
 import { InputNumber as S } from "../../inputs/fields/number/index.js";
 import "../../inputs/utils/action-button/index.js";
 import "../../../node_modules/react-international-phone/dist/index.js";
-const it = ({
+const pt = ({
   control: u,
   description: B,
   disabled: t,
@@ -141,5 +142,5 @@ const it = ({
   );
 };
 export {
-  it as CardWithInput
+  pt as CardWithInput
 };

package/dist/components/filters/filters-menu/index.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import I from "../../../_virtual/snakeCase.js";
-import { forwardRef as O, useContext as $, useMemo as B, useCallback as h, Fragment as L } from "react";
+import { forwardRef as O, useContext as $, useMemo as B, useCallback as p, Fragment as L } from "react";
 import { useTheme as R } from "styled-components";
 import { FiltersContext as A } from "../context/index.js";
 import { NoMatches as P } from "../search/no-matches/index.js";
@@ -15,6 +15,7 @@ import "react-dom";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import { Text as M } from "../../typography/text/index.js";
+import "../../inputs/styles.js";
 import { Tag as K } from "../../tag/index.js";
 import "../../../_virtual/dayjs.min.js";
 import "../../icon-button/index.js";
@@ -26,8 +27,8 @@ import { parseTextFilterValue as U, parseCheckboxesFilterValue as X, parseInclud
 const Z = (c, d) => {
   if (d?.some((t) => t.type === "text") ?? !1)
     return U(c ?? "").text ? "1" : "0";
-  const l = new Set(d?.map((t) => t.type) ?? []);
-  if (l.size === 1 && l.has("checkboxes"))
+  const i = new Set(d?.map((t) => t.type) ?? []);
+  if (i.size === 1 && i.has("checkboxes"))
     return X(
       c ?? ""
     ).values.length.toString();
@@ -38,11 +39,11 @@ const Z = (c, d) => {
     return (t.length + f.length).toString();
   }
   return (c ?? "").split(",").filter((t) => t && t !== "-").length.toString();
-}, ke = O(function({
+}, Te = O(function({
   includeSearch: d = !1,
   groupedFilters: g,
-  handleChangeId: l,
-  pinnedFilters: p
+  handleChangeId: i,
+  pinnedFilters: h
 }, b) {
   const t = R(), {
     id: f,
@@ -51,16 +52,16 @@ const Z = (c, d) => {
     values: s,
     updateSearch: v,
     setValues: u
-  } = $(A), C = q(g, y), w = B(() => Object.values(s).filter(Boolean).length > 0, [s]), S = p.length > 0, V = h(
+  } = $(A), C = q(g, y), w = B(() => Object.values(s).filter(Boolean).length > 0, [s]), S = h.length > 0, V = p(
     (e) => () => {
-      l(e), v({ previousValue: s[e] ?? "" }), m({ searchFilter: "", searchGlobal: "" });
+      i(e), v({ previousValue: s[e] ?? "" }), m({ searchFilter: "", searchGlobal: "" });
     },
-    [l, v, m, s]
-  ), j = h(() => {
+    [i, v, m, s]
+  ), j = p(() => {
     u(
       (e) => Object.keys(e).reduce((n, r) => ({ ...n, [r]: "" }), {})
-    ), l("");
-  }, [u, l]), z = h(
+    ), i("");
+  }, [u, i]), z = p(
     (e) => {
       m((n) => ({
         ...n,
@@ -68,7 +69,7 @@ const Z = (c, d) => {
       }));
     },
     [m]
-  ), E = h(
+  ), E = p(
     (e) => (n) => {
       u((r) => ({ ...r, [e]: n }));
     },
@@ -107,7 +108,7 @@ const Z = (c, d) => {
         scroll: "y",
         width: "100%",
         children: [
-          S ? /* @__PURE__ */ o(k, { "data-testid": "menu-pinned", children: p.map((e) => {
+          S ? /* @__PURE__ */ o(k, { "data-testid": "menu-pinned", children: h.map((e) => {
             const n = e.options?.[0]?.items?.map((r) => ({
               name: r.label ?? r.value,
               value: r.value
@@ -140,17 +141,17 @@ const Z = (c, d) => {
                     children: e
                   }
                 ) : void 0,
-                n.map((i) => {
-                  const G = s[i.id], F = Z(
+                n.map((l) => {
+                  const G = s[l.id], F = Z(
                     G,
-                    i.options
+                    l.options
                   );
                   return /* @__PURE__ */ o(L, { children: /* @__PURE__ */ a(
                     N,
                     {
                       as: "button",
-                      "data-testid": i.id,
-                      onClick: V(i.id),
+                      "data-testid": l.id,
+                      onClick: V(l.id),
                       children: [
                         /* @__PURE__ */ o(
                           T,
@@ -161,7 +162,7 @@ const Z = (c, d) => {
                             iconType: "fa-light"
                           }
                         ),
-                        i.label,
+                        l.label,
                         /* @__PURE__ */ a(
                           x,
                           {
@@ -170,7 +171,7 @@ const Z = (c, d) => {
                             gap: 0.5,
                             style: { marginLeft: "auto" },
                             children: [
-                              f === i.id ? /* @__PURE__ */ o(
+                              f === l.id ? /* @__PURE__ */ o(
                                 T,
                                 {
                                   icon: "chevron-right",
@@ -185,7 +186,7 @@ const Z = (c, d) => {
                         )
                       ]
                     }
-                  ) }, i.id);
+                  ) }, l.id);
                 })
               ]
             },
@@ -197,5 +198,5 @@ const Z = (c, d) => {
   ] });
 });
 export {
-  ke as FiltersMenu
+  Te as FiltersMenu
 };

package/dist/components/filters/options-menu/options/index.js

@@ -16,9 +16,9 @@ import "react-dom";
 import "../../../typography/heading/index.js";
 import { Span as G } from "../../../typography/span/index.js";
 import "../../../typography/text/index.js";
+import "../../../inputs/styles.js";
 import "../../../container/index.js";
 import { Tag as H } from "../../../tag/index.js";
-import "../../../../_virtual/isEqual.js";
 import "../../../icon-button/index.js";
 import "../../../button/index.js";
 import { InputDateRange as J } from "../../../inputs/fields/date-range/index.js";

package/dist/components/inputs/fields/combobox/field/index.js

@@ -1,200 +1,205 @@
-import { jsx as o, jsxs as z } from "react/jsx-runtime";
-import { useVirtualizer as He } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { useState as v, useMemo as I, useRef as y, useCallback as g } from "react";
-import { useButton as Ue } from "../../../../../node_modules/react-aria/dist/private/button/useButton.js";
-import { useComboBox as We } from "../../../../../node_modules/react-aria/dist/private/combobox/useComboBox.js";
-import { useFilter as Ye } from "../../../../../node_modules/react-aria/dist/private/i18n/useFilter.js";
-import { useListBox as qe } from "../../../../../node_modules/react-aria/dist/private/listbox/useListBox.js";
-import { useComboBoxState as Je } from "../../../../../node_modules/react-stately/dist/private/combobox/useComboBoxState.js";
-import { Item as Pe } from "../../../../../node_modules/react-stately/dist/private/collections/Item.js";
-import { useTheme as Qe } from "styled-components";
-import { OutlineContainer as Xe } from "../../../outline-container/index.js";
-import { StyledTextInputContainer as Ze } from "../../../styles.js";
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { useVirtualizer as We } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { useState as v, useMemo as x, useRef as g, useCallback as y } from "react";
+import { useButton as Ye } from "../../../../../node_modules/react-aria/dist/private/button/useButton.js";
+import { useComboBox as qe } from "../../../../../node_modules/react-aria/dist/private/combobox/useComboBox.js";
+import { useFilter as Je } from "../../../../../node_modules/react-aria/dist/private/i18n/useFilter.js";
+import { useListBox as Pe } from "../../../../../node_modules/react-aria/dist/private/listbox/useListBox.js";
+import { useComboBoxState as Qe } from "../../../../../node_modules/react-stately/dist/private/combobox/useComboBoxState.js";
+import { Item as Xe } from "../../../../../node_modules/react-stately/dist/private/collections/Item.js";
+import { useTheme as Ze } from "styled-components";
+import { OutlineContainer as _e } from "../../../outline-container/index.js";
+import { StyledTextInputContainer as eo } from "../../../styles.js";
 import { Popover as de } from "../../../utils/popover/index.js";
-import { Option as _e } from "../option/index.js";
-import { StyledStatusMessage as eo, ChevronIconButton as oo, StyledDropdown as he, StyledGroupHeader as to, StyledEmptyMessage as ro } from "../styles.js";
+import { Option as oo } from "../option/index.js";
+import { StyledStatusMessage as to, ChevronIconButton as ro, StyledDropdown as he, StyledGroupHeader as no, StyledEmptyMessage as so } from "../styles.js";
+import { describeSelection as lo, toSelection as me } from "../utils.js";
 import { Icon as q } from "../../../../icon/index.js";
-import { IconButton as no } from "../../../../icon-button/index.js";
+import { IconButton as ao } from "../../../../icon-button/index.js";
 import "../../../../typography/heading/index.js";
 import "../../../../typography/span/index.js";
 import { Text as J } from "../../../../typography/text/index.js";
-import { useClickOutside as so } from "../../../../../hooks/use-click-outside.js";
-const zo = ({
+import { useClickOutside as co } from "../../../../../hooks/use-click-outside.js";
+const ko = ({
   field: u,
   disabled: h = !1,
-  disabledKeys: R,
-  error: me,
+  disabledKeys: $,
+  error: ge,
   helpLink: ye,
-  helpLinkText: ge,
-  helpText: ve,
+  helpLinkText: ve,
+  helpText: xe,
   label: P,
-  loadingItems: xe,
-  name: a,
+  loadingItems: $e,
+  name: l,
   multiSelection: r = !1,
-  items: n,
-  onBlur: L,
+  items: o,
+  onBlur: K,
   onChange: f,
   onClear: Q,
-  placeholder: $e,
-  clearable: be = !1,
+  placeholder: be,
+  clearable: we = !1,
   emptyMessage: X,
   statusMessage: Z,
-  required: we,
-  setValue: x,
-  tooltip: Se,
-  value: Be,
-  watch: F,
-  weight: Ce
+  required: Se,
+  setValue: b,
+  tooltip: Be,
+  value: Ce,
+  watch: w,
+  weight: Ae
 }) => {
-  const m = Qe(), D = h ? void 0 : me, d = u?.value ?? Be, [G, $] = v(
-    n.find((e) => e.value === d)?.name ?? ""
-  ), [_, k] = v(d), j = (xe === !1 || !d) && !r, N = I(
-    () => j ? n.find((e) => e.value === d)?.name ?? "" : "",
-    [j, d, n]
-  ), [Ae, Oe] = v(d), [ze, Ie] = v(N);
-  j && (d !== Ae || N !== ze) && (Oe(d), Ie(N), $(N), k(d ?? ""));
-  const [Re, H] = v(n), [ee, b] = v(!1), { contains: M } = Ye({ sensitivity: "base" }), U = y(null), W = y(null), w = y(null), S = y(null), oe = y(null), B = y(null), Y = y(/* @__PURE__ */ new Set()), Fe = I(() => {
-    const e = Y.current, s = Array.from(R ?? []), l = n.some((t) => t.group !== void 0);
-    return n.toSorted((t, p) => {
-      if (t.value === "All") return -1;
+  const m = Ze(), k = h ? void 0 : ge, d = u?.value ?? Ce, [D, S] = v(() => r ? lo(
+    me(w?.(`${l}Options`)),
+    o.map((e) => e.value),
+    $ ?? [],
+    o.find((e) => e.value === "All")?.name
+  ).text : o.find((e) => e.value === d)?.name ?? ""), [_, G] = v(d), j = ($e === !1 || !d) && !r, M = x(
+    () => j ? o.find((e) => e.value === d)?.name ?? "" : "",
+    [j, d, o]
+  ), [Oe, ze] = v(d), [Ie, Re] = v(M);
+  j && (d !== Oe || M !== Ie) && (ze(d), Re(M), S(M), G(d ?? ""));
+  const [Fe, H] = v(o), [ee, B] = v(!1), { contains: N } = Je({ sensitivity: "base" }), U = g(null), W = g(null), C = g(null), A = g(null), oe = g(null), O = g(null), Y = g(/* @__PURE__ */ new Set()), ke = x(() => {
+    const e = Y.current, s = Array.from($ ?? []), c = o.some((n) => n.group !== void 0);
+    return o.toSorted((n, p) => {
+      if (n.value === "All") return -1;
       if (p.value === "All") return 1;
-      const E = s.includes(t.value), K = s.includes(p.value);
-      if (l) {
-        const A = t.group ?? "", O = p.group ?? "";
-        if (!t.group && p.group) return -1;
-        if (t.group && !p.group) return 1;
-        if (A !== O)
-          return A.localeCompare(O);
-        if (E && !K) return 1;
-        if (!E && K) return -1;
+      const E = s.includes(n.value), L = s.includes(p.value);
+      if (c) {
+        const I = n.group ?? "", R = p.group ?? "";
+        if (!n.group && p.group) return -1;
+        if (n.group && !p.group) return 1;
+        if (I !== R)
+          return I.localeCompare(R);
+        if (E && !L) return 1;
+        if (!E && L) return -1;
         if (r) {
-          const ue = e.has(t.value), fe = e.has(p.value);
+          const ue = e.has(n.value), fe = e.has(p.value);
           if (ue && !fe) return -1;
           if (!ue && fe) return 1;
         }
-        return t.name.localeCompare(p.name);
+        return n.name.localeCompare(p.name);
       }
-      if (E && !K) return 1;
-      if (!E && K) return -1;
+      if (E && !L) return 1;
+      if (!E && L) return -1;
       if (r) {
-        const A = e.has(t.value), O = e.has(p.value);
-        return A && !O ? -1 : !A && O ? 1 : t.name.localeCompare(p.name);
+        const I = e.has(n.value), R = e.has(p.value);
+        return I && !R ? -1 : !I && R ? 1 : n.name.localeCompare(p.name);
       }
       return 0;
     }).map(
-      (t) => M(t.name, G) || ee ? /* @__PURE__ */ o(
-        Pe,
+      (n) => N(n.name, D) || ee ? /* @__PURE__ */ t(
+        Xe,
         {
-          "aria-label": t.value,
-          hrefLang: t.href,
-          textValue: t.tag,
-          children: t.name
+          "aria-label": n.value,
+          hrefLang: n.href,
+          textValue: n.name,
+          children: n.name
         },
-        t.value
+        n.value
       ) : null
     );
-  }, [M, R, G, n, r, ee]), De = g(
+  }, [N, $, D, o, r, ee]), De = y(
     (e) => {
       const s = e.split(/,|\s/u).slice(-1)[0].trim();
-      $(r ? s : e), e === "" || e.endsWith(",") ? b(!0) : (b(!1), k((l) => {
-        const c = e === "" ? "" : l;
-        return u && u.onChange(c), f && f(e), c;
+      S(r ? s : e), e === "" || e.endsWith(",") ? B(!0) : (B(!1), G((c) => {
+        const i = e === "" ? "" : c;
+        return u && u.onChange(i), f && f(e), i;
       }), H(
-        n.filter(
-          (l) => M(l.name, r ? s : e)
+        o.filter(
+          (c) => N(c.name, r ? s : e)
         )
       ));
     },
-    [M, n, u, r, f]
-  ), Ge = g(
+    [N, o, u, r, f]
+  ), Ge = y(
     (e) => {
-      $(n.find((s) => s.value === e)?.name ?? ""), k(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(n);
+      S(o.find((s) => s.value === e)?.name ?? ""), G(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(o);
     },
-    [n, u, f]
-  ), te = g(
+    [o, u, f]
+  ), te = y(
     (e) => {
-      e.key === "Enter" && e.preventDefault(), b(!1);
+      e.key === "Enter" && e.preventDefault(), B(!1);
     },
     []
-  ), ke = g(() => {
-    L && L(), u && u.onBlur();
-  }, [u, L]), Ne = g(() => {
-    b(!0);
-  }, []), i = Je({
+  ), Me = y(() => {
+    K && K(), u && u.onBlur();
+  }, [u, K]), Ne = y(() => {
+    B(!0);
+  }, []), a = Qe({
     allowsCustomValue: r,
     allowsEmptyCollection: !0,
-    disabledKeys: R,
-    inputValue: G,
-    items: Re,
+    disabledKeys: $,
+    inputValue: D,
+    items: Fe,
     menuTrigger: "focus",
     shouldCloseOnBlur: !r,
     selectedKey: _,
-    onBlur: ke,
+    onBlur: Me,
     onInputChange: De,
     onKeyDown: te,
     onKeyUp: Ne,
     onOpenChange(e, s) {
-      if (e && r && F) {
-        const l = F(`${a}Options`) ?? [], c = Array.isArray(l) ? l : l ? [l] : [];
-        Y.current = new Set(c.filter(Boolean));
-      }
-      b(
+      e && r && w && (Y.current = new Set(
+        me(w(`${l}Options`)).filter(Boolean)
+      )), B(
         e && (s === "manual" || s === "focus")
       ), e && s !== "focus" && requestAnimationFrame(() => {
         U.current?.focus();
       });
     },
     onSelectionChange: r ? void 0 : Ge,
-    children: Fe
-  }), Me = g(() => {
-    $(""), k(null), H(n), i.setSelectedKey(null), i.setInputValue(""), f && f(""), r && x && (x(`${a}Options`, []), x(`${a}CheckAll`, "")), Q?.();
-  }, [n, r, a, Q, f, x, i]), {
+    children: ke
+  }), Te = y(() => {
+    S(""), G(null), H(o), a.setSelectedKey(null), a.setInputValue(""), f && f(""), r && b && (b(`${l}Options`, []), b(`${l}CheckAll`, "")), Q?.();
+  }, [o, r, l, Q, f, b, a]), {
     buttonProps: Ve,
-    inputProps: Te,
-    listBoxProps: Ee
-  } = We(
+    inputProps: Ee,
+    listBoxProps: Le
+  } = qe(
     {
-      inputValue: G,
+      inputValue: D,
       buttonRef: W,
-      id: a,
+      id: l,
       inputRef: U,
-      label: P ?? a,
-      listBoxRef: w,
-      name: a,
-      placeholder: $e,
-      popoverRef: B
+      label: P ?? l,
+      listBoxRef: C,
+      name: l,
+      placeholder: be,
+      popoverRef: O
     },
-    i
-  ), { listBoxProps: re } = qe(Ee, i, w), { buttonProps: Ke } = Ue(Ve, W), { width: ne } = S.current?.getBoundingClientRect() ?? {
+    a
+  ), { listBoxProps: re } = Pe(Le, a, C), { buttonProps: Ke } = Ye(Ve, W), { width: ne } = A.current?.getBoundingClientRect() ?? {
     width: 240
   };
-  so(S, () => {
-    i.isOpen && !r && i.close();
-  }, [B]);
-  const C = Array.from(i.collection), se = r ? C.findLastIndex(
+  co(A, () => {
+    a.isOpen && !r && a.close();
+  }, [O]);
+  const z = Array.from(a.collection), se = r ? z.findLastIndex(
     (e) => e.key === "All" || Y.current.has(String(e.key))
-  ) : -1, Le = I(() => n.map((e) => e.value), [n]), le = I(
-    () => new Map(n.map((e) => [e.value, e.group])),
-    [n]
-  ), V = I(() => C.reduce(
-    (e, s, l) => {
-      const c = le.get(String(s.key));
-      return c !== void 0 && c !== e.currentGroup ? (e.result.push({ type: "header", group: c }), e.currentGroup = c) : c === void 0 && e.currentGroup !== void 0 && (e.currentGroup = void 0), e.result.push({ type: "item", index: l }), e;
+  ) : -1, je = x(() => o.map((e) => e.value), [o]), le = x(
+    () => new Map(o.map((e) => [e.value, e.group])),
+    [o]
+  ), He = x(
+    () => new Map(o.map((e) => [e.value, e.tag])),
+    [o]
+  ), T = x(() => z.reduce(
+    (e, s, c) => {
+      const i = le.get(String(s.key));
+      return i !== void 0 && i !== e.currentGroup ? (e.result.push({ type: "header", group: i }), e.currentGroup = i) : i === void 0 && e.currentGroup !== void 0 && (e.currentGroup = void 0), e.result.push({ type: "item", index: c }), e;
     },
     { result: [], currentGroup: void 0 }
-  ).result, [C, le]), ie = He({
-    count: V.length,
-    estimateSize: (e) => V[e].type === "header" ? 44 : 28,
-    getScrollElement: () => w.current,
+  ).result, [z, le]), ae = We({
+    count: T.length,
+    estimateSize: (e) => T[e].type === "header" ? 44 : 28,
+    getScrollElement: () => C.current,
     useFlushSync: !1
-  }), ae = i.isOpen && !h, T = ae && !!Z, ce = ae && n.length === 0 && !!X, je = g(
+  }), ce = a.isOpen && !h, V = ce && !!Z, ie = ce && o.length === 0 && !!X, Ue = y(
     (e) => {
       e.preventDefault();
     },
     []
-  ), pe = T ? (
+  ), pe = V ? (
     // A listbox only owns options, so the row itself must stay presentational
-    /* @__PURE__ */ o(eo, { onMouseDown: je, role: "presentation", children: /* @__PURE__ */ o("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ o(
+    /* @__PURE__ */ t(to, { onMouseDown: Ue, role: "presentation", children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ t(
       J,
       {
         color: m.palette.gray[400],
@@ -205,39 +210,39 @@ const zo = ({
       }
     ) }) })
   ) : null;
-  return /* @__PURE__ */ z(
-    Xe,
+  return /* @__PURE__ */ F(
+    _e,
     {
       containerRef: oe,
-      error: D,
+      error: k,
       helpLink: ye,
-      helpLinkText: ge,
-      helpText: ve,
-      htmlFor: a,
-      id: `combobox-${a}`,
+      helpLinkText: ve,
+      helpText: xe,
+      htmlFor: l,
+      id: `combobox-${l}`,
       label: P,
-      required: we,
-      tooltip: Se,
-      weight: Ce,
+      required: Se,
+      tooltip: Be,
+      weight: Ae,
       children: [
-        /* @__PURE__ */ z(
-          Ze,
+        /* @__PURE__ */ F(
+          eo,
           {
-            className: `${h ? "disabled" : ""} ${D ? "error" : ""}`,
-            ref: S,
+            className: `${h ? "disabled" : ""} ${k ? "error" : ""}`,
+            ref: A,
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 "input",
                 {
-                  ...Te,
-                  "aria-invalid": D ? "true" : "false",
-                  "aria-label": a,
+                  ...Ee,
+                  "aria-invalid": k ? "true" : "false",
+                  "aria-label": l,
                   disabled: h,
                   onKeyDown: te,
                   ref: U
                 }
               ),
-              D ? /* @__PURE__ */ o(
+              k ? /* @__PURE__ */ t(
                 q,
                 {
                   icon: "exclamation-circle",
@@ -246,33 +251,33 @@ const zo = ({
                   iconSize: "lg"
                 }
               ) : void 0,
-              be && !h && (r ? (F?.(`${a}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ o(
-                no,
+              we && !h && (r ? (w?.(`${l}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ t(
+                ao,
                 {
                   icon: "xmark",
                   iconColor: m.palette.gray[400],
                   iconSize: "sm",
                   iconType: "fa-light",
-                  onClick: Me,
+                  onClick: Te,
                   px: 0.125,
                   py: 0.125,
                   type: "reset",
                   variant: "ghost"
                 }
               ) : void 0,
-              /* @__PURE__ */ z(
-                oo,
+              /* @__PURE__ */ F(
+                ro,
                 {
                   ...Ke,
                   $variant: "ghost",
-                  className: `action ${i.isOpen && !h ? "open" : "closed"}`,
+                  className: `action ${a.isOpen && !h ? "open" : "closed"}`,
                   disabled: h,
                   px: 0.125,
                   py: 0.125,
                   ref: W,
                   type: "button",
                   children: [
-                    /* @__PURE__ */ o("div", { className: "chevron-down", children: /* @__PURE__ */ o(
+                    /* @__PURE__ */ t("div", { className: "chevron-down", children: /* @__PURE__ */ t(
                       q,
                       {
                         clickable: !1,
@@ -282,7 +287,7 @@ const zo = ({
                         iconType: "fa-light"
                       }
                     ) }),
-                    /* @__PURE__ */ o("div", { className: "chevron-up", children: /* @__PURE__ */ o(
+                    /* @__PURE__ */ t("div", { className: "chevron-up", children: /* @__PURE__ */ t(
                       q,
                       {
                         clickable: !1,
@@ -298,36 +303,36 @@ const zo = ({
             ]
           }
         ),
-        i.isOpen && i.collection.size > 0 && !h ? /* @__PURE__ */ o(
+        a.isOpen && a.collection.size > 0 && !h ? /* @__PURE__ */ t(
           de,
           {
             className: "dropdown",
-            id: `popover-${a}`,
+            id: `popover-${l}`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: B,
-            state: i,
-            triggerRef: S,
-            children: /* @__PURE__ */ z(
+            popoverRef: O,
+            state: a,
+            triggerRef: A,
+            children: /* @__PURE__ */ F(
               he,
               {
                 ...re,
-                $hasStatus: T,
-                $multiSelection: r && !Array.from(R ?? []).includes("All"),
+                $hasStatus: V,
+                $multiSelection: r && !Array.from($ ?? []).includes("All"),
                 $width: ne,
-                ref: w,
+                ref: C,
                 children: [
-                  /* @__PURE__ */ o(
+                  /* @__PURE__ */ t(
                     "div",
                     {
                       style: {
-                        height: `${ie.getTotalSize()}px`,
+                        height: `${ae.getTotalSize()}px`,
                         position: "relative"
                       },
-                      children: ie.getVirtualItems().map((e) => {
-                        const s = V[e.index];
+                      children: ae.getVirtualItems().map((e) => {
+                        const s = T[e.index];
                         if (s.type === "header")
-                          return /* @__PURE__ */ o(
+                          return /* @__PURE__ */ t(
                             "div",
                             {
                               style: {
@@ -338,7 +343,7 @@ const zo = ({
                                 height: `${e.size}px`,
                                 transform: `translateY(${e.start}px)`
                               },
-                              children: /* @__PURE__ */ o(to, { children: /* @__PURE__ */ o(
+                              children: /* @__PURE__ */ t(no, { children: /* @__PURE__ */ t(
                                 J,
                                 {
                                   color: m.palette.gray[400],
@@ -350,8 +355,8 @@ const zo = ({
                             },
                             `header-${e.index}`
                           );
-                        const l = C[s.index], c = V[e.index + 1], t = l.key === "All" && c?.type === "header", p = r && s.index === se && se >= 0 && s.index < C.length - 1 && !t;
-                        return /* @__PURE__ */ o(
+                        const c = z[s.index], i = T[e.index + 1], n = c.key === "All" && i?.type === "header", p = r && s.index === se && se >= 0 && s.index < z.length - 1 && !n;
+                        return /* @__PURE__ */ t(
                           "div",
                           {
                             style: {
@@ -363,23 +368,24 @@ const zo = ({
                               transform: `translateY(${e.start}px)`,
                               borderBottom: p ? `1px solid ${m.palette.gray[200]}` : void 0
                             },
-                            children: /* @__PURE__ */ o(
-                              _e,
+                            children: /* @__PURE__ */ t(
+                              oo,
                               {
-                                allItemKeys: Le,
+                                allItemKeys: je,
                                 containerRef: oe,
-                                item: l,
+                                item: c,
                                 multiSelection: r,
-                                name: a,
-                                popoverRef: B,
-                                setInputValue: $,
-                                setValue: x,
-                                state: i,
-                                watch: F
+                                name: l,
+                                popoverRef: O,
+                                setInputValue: S,
+                                setValue: b,
+                                state: a,
+                                tag: He.get(String(c.key)),
+                                watch: w
                               }
                             )
                           },
-                          l.key
+                          c.key
                         );
                       })
                     }
@@ -389,26 +395,26 @@ const zo = ({
               }
             )
           }
-        ) : !ce && !T ? null : /* @__PURE__ */ o(
+        ) : !ie && !V ? null : /* @__PURE__ */ t(
           de,
           {
             className: "dropdown",
-            id: `popover-${a}-empty`,
+            id: `popover-${l}-empty`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: B,
-            state: i,
-            triggerRef: S,
-            children: /* @__PURE__ */ z(
+            popoverRef: O,
+            state: a,
+            triggerRef: A,
+            children: /* @__PURE__ */ F(
               he,
               {
                 ...re,
-                $hasStatus: T,
+                $hasStatus: V,
                 $multiSelection: !1,
                 $width: ne,
-                ref: w,
+                ref: C,
                 children: [
-                  ce ? /* @__PURE__ */ o(ro, { children: /* @__PURE__ */ o(
+                  ie ? /* @__PURE__ */ t(so, { children: /* @__PURE__ */ t(
                     J,
                     {
                       color: m.palette.gray[400],
@@ -429,5 +435,5 @@ const zo = ({
   );
 };
 export {
-  zo as ComboBoxField
+  ko as ComboBoxField
 };

package/dist/components/inputs/fields/combobox/index.stories.d.ts

@@ -7,5 +7,6 @@ declare const withEmptyMessage: import('storybook/internal/csf').AnnotatedStoryF
 declare const withStatusMessage: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComboBoxProps>;
 declare const withClearButton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComboBoxProps>;
 declare const groupedMultiSelect: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComboBoxProps>;
-export { Default, multiSelectWithAll, withEmptyMessage, withStatusMessage, withClearButton, groupedMultiSelect, };
+declare const preselectedMultiSelect: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComboBoxProps>;
+export { Default, multiSelectWithAll, withEmptyMessage, withStatusMessage, withClearButton, groupedMultiSelect, preselectedMultiSelect, };
 export default config;

package/dist/components/inputs/fields/combobox/option/index.d.ts

@@ -1,3 +1,3 @@
 import { IOptionProps } from '../types';
-declare const Option: <T extends object>({ allItemKeys, containerRef, item, multiSelection, name, popoverRef, setInputValue, setValue, state, watch, }: Readonly<IOptionProps<T>>) => JSX.Element;
+declare const Option: <T extends object>({ allItemKeys, containerRef, item, multiSelection, name, popoverRef, setInputValue, setValue, state, tag, watch, }: Readonly<IOptionProps<T>>) => JSX.Element;
 export { Option };

package/dist/components/inputs/fields/combobox/option/index.js

@@ -1,123 +1,125 @@
-import { jsx as d, jsxs as U } from "react/jsx-runtime";
-import G from "../../../../../_virtual/isEqual.js";
-import { useRef as H, useMemo as g, useCallback as y } from "react";
+import { jsx as l, jsxs as G } from "react/jsx-runtime";
+import { useRef as H, useMemo as f, useCallback as k } from "react";
 import { useOption as J } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
 import { useTheme as Q } from "styled-components";
 import { StyledOption as W } from "../styles.js";
-import { Checkbox as j } from "../../../../checkbox/index.js";
-import { Icon as X } from "../../../../icon/index.js";
-import { Link as Y } from "../../../../link/index.js";
-import { Tag as Z } from "../../../../tag/index.js";
+import { describeSelection as X, toSelection as j } from "../utils.js";
+import { Checkbox as u } from "../../../../checkbox/index.js";
+import { Icon as Y } from "../../../../icon/index.js";
+import { Link as Z } from "../../../../link/index.js";
+import { Tag as _ } from "../../../../tag/index.js";
 import "../../../../typography/heading/index.js";
 import "../../../../typography/span/index.js";
-import { Text as _ } from "../../../../typography/text/index.js";
-import { useClickOutside as I } from "../../../../../hooks/use-click-outside.js";
-import { openUrl as V } from "../../../../../utils/open-url.js";
-const yo = ({
-  allItemKeys: L,
-  containerRef: T,
+import { Text as I } from "../../../../typography/text/index.js";
+import { useClickOutside as V } from "../../../../../hooks/use-click-outside.js";
+import { openUrl as oo } from "../../../../../utils/open-url.js";
+const Co = ({
+  allItemKeys: a,
+  containerRef: D,
   item: o,
-  multiSelection: p,
+  multiSelection: s,
   name: e,
-  popoverRef: D,
-  setInputValue: t,
+  popoverRef: w,
+  setInputValue: i,
   setValue: n,
   state: c,
-  watch: f
+  tag: C,
+  watch: h
 }) => {
-  const K = Q(), C = H(null), h = o.props.hrefLang, A = c.disabledKeys, i = L.filter(
-    (r) => !Array.from(A).includes(r) && r !== "All"
-  ), { optionProps: q, isSelected: O, isFocused: w, isDisabled: $ } = J(
+  const z = Q(), y = H(null), d = o.props.hrefLang, g = c.disabledKeys, A = a.filter(
+    (r) => !Array.from(g).includes(r) && r !== "All"
+  ), { optionProps: F, isSelected: $, isFocused: q, isDisabled: O } = J(
     { key: o.key },
     c,
-    C
-  ), k = g(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), z = [
-    O ? "selected" : "",
-    w ? "focused" : "",
-    $ ? "disabled" : ""
-  ].join(" "), m = y(
+    y
+  ), m = f(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), B = [
+    $ ? "selected" : "",
+    q ? "focused" : "",
+    O ? "disabled" : ""
+  ].join(" "), b = k(
     (r) => {
-      if (i.length > 0 && r.length === i.length && G([...i].sort(), [...r].sort()) && !Array.from(A).includes("All") && k)
-        n?.(`${e}CheckAll`, k), t(k);
-      else {
-        n?.(`${e}CheckAll`, "");
-        const l = [...r].sort();
-        t(
-          l.length <= 2 ? l.join(", ") : `${l.slice(0, 2).join(", ")}, +${l.length - 2} more`
-        );
-      }
+      const { allSelected: t, text: p } = X(
+        r,
+        a,
+        g,
+        m
+      );
+      n?.(`${e}CheckAll`, t ? p : ""), i(p);
     },
-    [k, A, i, e, t, n]
-  ), F = y(
+    [a, m, g, e, i, n]
+  ), K = k(
     (r) => {
       if (r.target.checked) {
-        const a = [...i].sort();
-        n?.(`${e}Options`, a), n?.(`${e}CheckAll`, r.target.value), t(r.target.value);
+        const t = [...A].sort();
+        n?.(`${e}Options`, t), n?.(`${e}CheckAll`, r.target.value), i(r.target.value);
       } else
-        n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), t("");
+        n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), i("");
     },
-    [i, e, t, n]
-  ), B = y(
+    [A, e, i, n]
+  ), M = k(
     (r) => {
-      const a = r.target.value, l = f?.(`${e}Options`) ?? [], u = Array.isArray(l) ? l : l ? [l] : [], v = r.target.checked ? [...u, a] : u.filter((R) => R !== a);
-      n?.(`${e}Options`, v), m(v);
+      const t = r.target.value, p = j(h?.(`${e}Options`)), T = r.target.checked ? [...p, t] : p.filter((E) => E !== t);
+      n?.(`${e}Options`, T), b(T);
     },
-    [e, n, f, m]
-  ), s = f?.(`${e}Options`), b = g(() => Array.isArray(s) ? s : typeof s == "string" && s ? [s] : [], [s]), E = g(
-    () => b.includes(o.key.toString()),
-    [b, o.key]
-  ), S = f?.(`${e}CheckAll`), M = g(() => !!S, [S]), N = o.key === "All" ? /* @__PURE__ */ d(
-    j,
+    [e, n, h, b]
+  ), S = h?.(`${e}Options`), v = f(
+    () => j(S),
+    [S]
+  ), N = f(
+    () => v.includes(o.key.toString()),
+    [v, o.key]
+  ), x = h?.(`${e}CheckAll`), P = f(() => !!x, [x]), R = o.key === "All" ? /* @__PURE__ */ l(
+    u,
     {
-      checked: M,
+      checked: P,
       label: o.rendered?.toString(),
       name: `${e}CheckAll`,
-      onChange: F,
+      onChange: K,
       value: o.rendered?.toString()
     }
-  ) : /* @__PURE__ */ d(
-    j,
+  ) : /* @__PURE__ */ l(
+    u,
     {
-      checked: E,
+      checked: N,
       label: o.rendered?.toString(),
       name: `${e}Options`,
-      onChange: B,
+      onChange: M,
       value: o.key.toString()
     }
-  ), x = p && !$ ? N : /* @__PURE__ */ d(
-    _,
+  ), L = s && !O ? R : /* @__PURE__ */ l(
+    I,
     {
-      color: K.palette.gray[800],
+      color: z.palette.gray[800],
       size: "md",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
       children: o.rendered
     }
-  ), P = y(
+  ), U = k(
     (r) => {
-      r.preventDefault(), t(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
+      r.preventDefault(), i(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
         c.setOpen(!1);
-      }), V(h);
+      }), oo(d);
     },
-    [h, o.key, o.rendered, c, t]
+    [d, o.key, o.rendered, c, i]
   );
-  return I(D, () => {
-    p && c.close();
-  }, [T]), /* @__PURE__ */ U(
+  return V(w, () => {
+    s && c.close();
+  }, [D]), /* @__PURE__ */ G(
     W,
     {
-      ...!p && !h ? q : {},
-      $multiSelection: p,
-      className: z,
-      ref: C,
+      ...!s && !d ? F : {},
+      $multiSelection: s,
+      className: B,
+      ref: y,
       children: [
-        h ? /* @__PURE__ */ d(Y, { href: h, onClick: P, children: x }) : x,
-        O && !$ && !p ? /* @__PURE__ */ d(X, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
-        o.rendered === o.textValue ? void 0 : /* @__PURE__ */ d(Z, { tagLabel: o.textValue, variant: "inactive" })
+        d ? /* @__PURE__ */ l(Z, { href: d, onClick: U, children: L }) : L,
+        $ && !O && !s ? /* @__PURE__ */ l(Y, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
+        C === void 0 ? void 0 : /* @__PURE__ */ l(_, { tagLabel: C, variant: "inactive" })
       ]
     }
   );
 };
 export {
-  yo as Option
+  Co as Option
 };

package/dist/components/inputs/fields/combobox/types.d.ts

@@ -28,6 +28,7 @@ interface IItem {
  * @property { string } name - The name of the Select.
  * @property { MutableRefObject } popoverRef - The ref of the options popover.
  * @property { ComboBoxState<T> } state - The state of the ComboBox.
+ * @property { string } [tag] - Optional tag shown next to the option.
  */
 interface IOptionProps<T> {
     allItemKeys: string[];
@@ -39,6 +40,7 @@ interface IOptionProps<T> {
     setInputValue: React.Dispatch<React.SetStateAction<string>>;
     state: ComboBoxState<T>;
     setValue?: UseFormSetValue<any>;
+    tag?: string;
     watch?: UseFormWatch<any>;
 }
 /**

package/dist/components/inputs/fields/combobox/utils.d.ts

@@ -0,0 +1,7 @@
+import { Key } from 'react-aria';
+declare const toSelection: (options: unknown) => string[];
+declare const describeSelection: (selected: readonly string[], keys: readonly string[], disabledKeys: Iterable<Key>, allName: string | undefined) => {
+    allSelected: boolean;
+    text: string;
+};
+export { describeSelection, toSelection };

package/dist/components/inputs/fields/combobox/utils.js

@@ -0,0 +1,16 @@
+import h from "../../../../_virtual/isEqual.js";
+const g = (t) => Array.isArray(t) ? t : typeof t == "string" && t ? [t] : [], u = (t, i, a, c) => {
+  const o = new Set(a), r = i.filter(
+    (s) => s !== "All" && !o.has(s)
+  ), l = o.has("All") ? void 0 : c, n = !!l && r.length > 0 && t.length === r.length && h([...r].sort(), [...t].sort());
+  if (n && l) return { allSelected: n, text: l };
+  const e = [...t].sort();
+  return {
+    allSelected: n,
+    text: e.length <= 2 ? e.join(", ") : `${e.slice(0, 2).join(", ")}, +${e.length - 2} more`
+  };
+};
+export {
+  u as describeSelection,
+  g as toSelection
+};

package/dist/components/search/index.js

@@ -6,7 +6,6 @@ import { Icon as E } from "../icon/index.js";
 import { IconButton as P } from "../icon-button/index.js";
 import { OutlineContainer as S } from "../inputs/outline-container/index.js";
 import { StyledTextInputContainer as x } from "../inputs/styles.js";
-import "../../_virtual/isEqual.js";
 import "../checkbox/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
@@ -38,7 +37,7 @@ const C = 300, s = () => {
     timeStamp: t.timeStamp,
     type: t.type
   };
-}, J = ({
+}, q = ({
   name: o,
   onClear: t,
   onChange: i,
@@ -112,5 +111,5 @@ const C = 300, s = () => {
   ] }) });
 };
 export {
-  J as Search
+  q as Search
 };

package/dist/components/slider/index.js

@@ -9,7 +9,7 @@ import { Thumb as k } from "./thumb/index.js";
 import { normalizeValue as v } from "./utils.js";
 import { Container as w } from "../container/index.js";
 import { OutlineContainer as y } from "../inputs/outline-container/index.js";
-import "../../_virtual/isEqual.js";
+import "../inputs/styles.js";
 import "../checkbox/index.js";
 import "../icon/index.js";
 import "../../_virtual/lodash.js";

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "9.1.0"
+  "version": "9.1.2"
 }