@fluidattacks/design 9.1.0 → 9.1.1

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,6 +1,6 @@
-import { jsx as o, jsxs as z } from "react/jsx-runtime";
+import { jsx as t, jsxs as R } 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 { useState as v, useMemo as F, 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";
@@ -13,26 +13,27 @@ import { StyledTextInputContainer as Ze } 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 { describeSelection as no, toSelection as so } from "../utils.js";
 import { Icon as q } from "../../../../icon/index.js";
-import { IconButton as no } from "../../../../icon-button/index.js";
+import { IconButton as lo } 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 io } from "../../../../../hooks/use-click-outside.js";
+const Fo = ({
   field: u,
   disabled: h = !1,
-  disabledKeys: R,
+  disabledKeys: x,
   error: me,
   helpLink: ye,
   helpLinkText: ge,
   helpText: ve,
   label: P,
   loadingItems: xe,
-  name: a,
+  name: i,
   multiSelection: r = !1,
-  items: n,
-  onBlur: L,
+  items: o,
+  onBlur: K,
   onChange: f,
   onClear: Q,
   placeholder: $e,
@@ -40,90 +41,93 @@ const zo = ({
   emptyMessage: X,
   statusMessage: Z,
   required: we,
-  setValue: x,
+  setValue: $,
   tooltip: Se,
   value: Be,
-  watch: F,
+  watch: b,
   weight: Ce
 }) => {
-  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]
+  const m = Qe(), D = h ? void 0 : me, d = u?.value ?? Be, [G, w] = v(() => r ? no(
+    so(b?.(`${i}Options`)),
+    o.map((e) => e.value),
+    x ?? [],
+    o.find((e) => e.value === "All")?.name
+  ).text : o.find((e) => e.value === d)?.name ?? ""), [_, k] = v(d), j = (xe === !1 || !d) && !r, N = F(
+    () => j ? o.find((e) => e.value === d)?.name ?? "" : "",
+    [j, d, o]
   ), [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;
+  j && (d !== Ae || N !== ze) && (Oe(d), Ie(N), w(N), k(d ?? ""));
+  const [Re, H] = v(o), [ee, S] = v(!1), { contains: M } = Ye({ sensitivity: "base" }), U = y(null), W = y(null), B = y(null), C = y(null), oe = y(null), A = y(null), Y = y(/* @__PURE__ */ new Set()), Fe = F(() => {
+    const e = Y.current, s = Array.from(x ?? []), l = 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);
+      const E = s.includes(n.value), L = 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 z = n.group ?? "", I = p.group ?? "";
+        if (!n.group && p.group) return -1;
+        if (n.group && !p.group) return 1;
+        if (z !== I)
+          return z.localeCompare(I);
+        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 z = e.has(n.value), I = e.has(p.value);
+        return z && !I ? -1 : !z && I ? 1 : n.name.localeCompare(p.name);
       }
       return 0;
     }).map(
-      (t) => M(t.name, G) || ee ? /* @__PURE__ */ o(
+      (n) => M(n.name, G) || ee ? /* @__PURE__ */ t(
         Pe,
         {
-          "aria-label": t.value,
-          hrefLang: t.href,
-          textValue: t.tag,
-          children: t.name
+          "aria-label": n.value,
+          hrefLang: n.href,
+          textValue: n.tag,
+          children: n.name
         },
-        t.value
+        n.value
       ) : null
     );
-  }, [M, R, G, n, r, ee]), De = g(
+  }, [M, x, G, o, r, ee]), De = g(
     (e) => {
       const s = e.split(/,|\s/u).slice(-1)[0].trim();
-      $(r ? s : e), e === "" || e.endsWith(",") ? b(!0) : (b(!1), k((l) => {
+      w(r ? s : e), e === "" || e.endsWith(",") ? S(!0) : (S(!1), k((l) => {
         const c = e === "" ? "" : l;
         return u && u.onChange(c), f && f(e), c;
       }), H(
-        n.filter(
+        o.filter(
           (l) => M(l.name, r ? s : e)
         )
       ));
     },
-    [M, n, u, r, f]
+    [M, o, u, r, f]
   ), Ge = g(
     (e) => {
-      $(n.find((s) => s.value === e)?.name ?? ""), k(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(n);
+      w(o.find((s) => s.value === e)?.name ?? ""), k(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(o);
     },
-    [n, u, f]
+    [o, u, f]
   ), te = g(
     (e) => {
-      e.key === "Enter" && e.preventDefault(), b(!1);
+      e.key === "Enter" && e.preventDefault(), S(!1);
     },
     []
   ), ke = g(() => {
-    L && L(), u && u.onBlur();
-  }, [u, L]), Ne = g(() => {
-    b(!0);
-  }, []), i = Je({
+    K && K(), u && u.onBlur();
+  }, [u, K]), Ne = g(() => {
+    S(!0);
+  }, []), a = Je({
     allowsCustomValue: r,
     allowsEmptyCollection: !0,
-    disabledKeys: R,
+    disabledKeys: x,
     inputValue: G,
     items: Re,
     menuTrigger: "focus",
@@ -134,11 +138,11 @@ const zo = ({
     onKeyDown: te,
     onKeyUp: Ne,
     onOpenChange(e, s) {
-      if (e && r && F) {
-        const l = F(`${a}Options`) ?? [], c = Array.isArray(l) ? l : l ? [l] : [];
+      if (e && r && b) {
+        const l = b(`${i}Options`) ?? [], c = Array.isArray(l) ? l : l ? [l] : [];
         Y.current = new Set(c.filter(Boolean));
       }
-      b(
+      S(
         e && (s === "manual" || s === "focus")
       ), e && s !== "focus" && requestAnimationFrame(() => {
         U.current?.focus();
@@ -147,8 +151,8 @@ const zo = ({
     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]), {
+    w(""), k(null), H(o), a.setSelectedKey(null), a.setInputValue(""), f && f(""), r && $ && ($(`${i}Options`, []), $(`${i}CheckAll`, "")), Q?.();
+  }, [o, r, i, Q, f, $, a]), {
     buttonProps: Ve,
     inputProps: Te,
     listBoxProps: Ee
@@ -156,45 +160,45 @@ const zo = ({
     {
       inputValue: G,
       buttonRef: W,
-      id: a,
+      id: i,
       inputRef: U,
-      label: P ?? a,
-      listBoxRef: w,
-      name: a,
+      label: P ?? i,
+      listBoxRef: B,
+      name: i,
       placeholder: $e,
-      popoverRef: B
+      popoverRef: A
     },
-    i
-  ), { listBoxProps: re } = qe(Ee, i, w), { buttonProps: Ke } = Ue(Ve, W), { width: ne } = S.current?.getBoundingClientRect() ?? {
+    a
+  ), { listBoxProps: re } = qe(Ee, a, B), { buttonProps: Le } = Ue(Ve, W), { width: ne } = C.current?.getBoundingClientRect() ?? {
     width: 240
   };
-  so(S, () => {
-    i.isOpen && !r && i.close();
-  }, [B]);
-  const C = Array.from(i.collection), se = r ? C.findLastIndex(
+  io(C, () => {
+    a.isOpen && !r && a.close();
+  }, [A]);
+  const O = Array.from(a.collection), se = r ? O.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(
+  ) : -1, Ke = F(() => o.map((e) => e.value), [o]), le = F(
+    () => new Map(o.map((e) => [e.value, e.group])),
+    [o]
+  ), V = F(() => O.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;
     },
     { result: [], currentGroup: void 0 }
-  ).result, [C, le]), ie = He({
+  ).result, [O, le]), ie = He({
     count: V.length,
     estimateSize: (e) => V[e].type === "header" ? 44 : 28,
-    getScrollElement: () => w.current,
+    getScrollElement: () => B.current,
     useFlushSync: !1
-  }), ae = i.isOpen && !h, T = ae && !!Z, ce = ae && n.length === 0 && !!X, je = g(
+  }), ae = a.isOpen && !h, T = ae && !!Z, ce = ae && o.length === 0 && !!X, je = g(
     (e) => {
       e.preventDefault();
     },
     []
   ), pe = T ? (
     // 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(eo, { onMouseDown: je, role: "presentation", children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ t(
       J,
       {
         color: m.palette.gray[400],
@@ -205,7 +209,7 @@ const zo = ({
       }
     ) }) })
   ) : null;
-  return /* @__PURE__ */ z(
+  return /* @__PURE__ */ R(
     Xe,
     {
       containerRef: oe,
@@ -213,31 +217,31 @@ const zo = ({
       helpLink: ye,
       helpLinkText: ge,
       helpText: ve,
-      htmlFor: a,
-      id: `combobox-${a}`,
+      htmlFor: i,
+      id: `combobox-${i}`,
       label: P,
       required: we,
       tooltip: Se,
       weight: Ce,
       children: [
-        /* @__PURE__ */ z(
+        /* @__PURE__ */ R(
           Ze,
           {
             className: `${h ? "disabled" : ""} ${D ? "error" : ""}`,
-            ref: S,
+            ref: C,
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 "input",
                 {
                   ...Te,
                   "aria-invalid": D ? "true" : "false",
-                  "aria-label": a,
+                  "aria-label": i,
                   disabled: h,
                   onKeyDown: te,
                   ref: U
                 }
               ),
-              D ? /* @__PURE__ */ o(
+              D ? /* @__PURE__ */ t(
                 q,
                 {
                   icon: "exclamation-circle",
@@ -246,8 +250,8 @@ const zo = ({
                   iconSize: "lg"
                 }
               ) : void 0,
-              be && !h && (r ? (F?.(`${a}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ o(
-                no,
+              be && !h && (r ? (b?.(`${i}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ t(
+                lo,
                 {
                   icon: "xmark",
                   iconColor: m.palette.gray[400],
@@ -260,19 +264,19 @@ const zo = ({
                   variant: "ghost"
                 }
               ) : void 0,
-              /* @__PURE__ */ z(
+              /* @__PURE__ */ R(
                 oo,
                 {
-                  ...Ke,
+                  ...Le,
                   $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 +286,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,26 +302,26 @@ 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-${i}`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: B,
-            state: i,
-            triggerRef: S,
-            children: /* @__PURE__ */ z(
+            popoverRef: A,
+            state: a,
+            triggerRef: C,
+            children: /* @__PURE__ */ R(
               he,
               {
                 ...re,
                 $hasStatus: T,
-                $multiSelection: r && !Array.from(R ?? []).includes("All"),
+                $multiSelection: r && !Array.from(x ?? []).includes("All"),
                 $width: ne,
-                ref: w,
+                ref: B,
                 children: [
-                  /* @__PURE__ */ o(
+                  /* @__PURE__ */ t(
                     "div",
                     {
                       style: {
@@ -327,7 +331,7 @@ const zo = ({
                       children: ie.getVirtualItems().map((e) => {
                         const s = V[e.index];
                         if (s.type === "header")
-                          return /* @__PURE__ */ o(
+                          return /* @__PURE__ */ t(
                             "div",
                             {
                               style: {
@@ -338,7 +342,7 @@ const zo = ({
                                 height: `${e.size}px`,
                                 transform: `translateY(${e.start}px)`
                               },
-                              children: /* @__PURE__ */ o(to, { children: /* @__PURE__ */ o(
+                              children: /* @__PURE__ */ t(to, { children: /* @__PURE__ */ t(
                                 J,
                                 {
                                   color: m.palette.gray[400],
@@ -350,8 +354,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 l = O[s.index], c = V[e.index + 1], n = l.key === "All" && c?.type === "header", p = r && s.index === se && se >= 0 && s.index < O.length - 1 && !n;
+                        return /* @__PURE__ */ t(
                           "div",
                           {
                             style: {
@@ -363,19 +367,19 @@ const zo = ({
                               transform: `translateY(${e.start}px)`,
                               borderBottom: p ? `1px solid ${m.palette.gray[200]}` : void 0
                             },
-                            children: /* @__PURE__ */ o(
+                            children: /* @__PURE__ */ t(
                               _e,
                               {
-                                allItemKeys: Le,
+                                allItemKeys: Ke,
                                 containerRef: oe,
                                 item: l,
                                 multiSelection: r,
-                                name: a,
-                                popoverRef: B,
-                                setInputValue: $,
-                                setValue: x,
-                                state: i,
-                                watch: F
+                                name: i,
+                                popoverRef: A,
+                                setInputValue: w,
+                                setValue: $,
+                                state: a,
+                                watch: b
                               }
                             )
                           },
@@ -389,26 +393,26 @@ const zo = ({
               }
             )
           }
-        ) : !ce && !T ? null : /* @__PURE__ */ o(
+        ) : !ce && !T ? null : /* @__PURE__ */ t(
           de,
           {
             className: "dropdown",
-            id: `popover-${a}-empty`,
+            id: `popover-${i}-empty`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: B,
-            state: i,
-            triggerRef: S,
-            children: /* @__PURE__ */ z(
+            popoverRef: A,
+            state: a,
+            triggerRef: C,
+            children: /* @__PURE__ */ R(
               he,
               {
                 ...re,
                 $hasStatus: T,
                 $multiSelection: !1,
                 $width: ne,
-                ref: w,
+                ref: B,
                 children: [
-                  ce ? /* @__PURE__ */ o(ro, { children: /* @__PURE__ */ o(
+                  ce ? /* @__PURE__ */ t(ro, { children: /* @__PURE__ */ t(
                     J,
                     {
                       color: m.palette.gray[400],
@@ -429,5 +433,5 @@ const zo = ({
   );
 };
 export {
-  zo as ComboBoxField
+  Fo 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.js

@@ -1,10 +1,10 @@
-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 { 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 { jsx as d, jsxs as E } from "react/jsx-runtime";
+import { useRef as G, useMemo as h, useCallback as k } from "react";
+import { useOption as H } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
+import { useTheme as J } from "styled-components";
+import { StyledOption as Q } from "../styles.js";
+import { describeSelection as W } from "../utils.js";
+import { Checkbox as T } 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";
@@ -14,105 +14,103 @@ 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,
+  allItemKeys: g,
+  containerRef: j,
   item: o,
   multiSelection: p,
-  name: e,
+  name: r,
   popoverRef: D,
   setInputValue: t,
   setValue: n,
   state: c,
   watch: f
 }) => {
-  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 w = J(), O = G(null), a = o.props.hrefLang, y = c.disabledKeys, C = g.filter(
+    (e) => !Array.from(y).includes(e) && e !== "All"
+  ), { optionProps: z, isSelected: $, isFocused: F, isDisabled: A } = H(
     { key: o.key },
     c,
-    C
-  ), k = g(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), z = [
-    O ? "selected" : "",
-    w ? "focused" : "",
-    $ ? "disabled" : ""
-  ].join(" "), m = y(
-    (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`
-        );
-      }
+    O
+  ), b = h(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), q = [
+    $ ? "selected" : "",
+    F ? "focused" : "",
+    A ? "disabled" : ""
+  ].join(" "), S = k(
+    (e) => {
+      const { allSelected: s, text: i } = W(
+        e,
+        g,
+        y,
+        b
+      );
+      n?.(`${r}CheckAll`, s ? i : ""), t(i);
     },
-    [k, A, i, e, t, n]
-  ), F = y(
-    (r) => {
-      if (r.target.checked) {
-        const a = [...i].sort();
-        n?.(`${e}Options`, a), n?.(`${e}CheckAll`, r.target.value), t(r.target.value);
+    [g, b, y, r, t, n]
+  ), B = k(
+    (e) => {
+      if (e.target.checked) {
+        const s = [...C].sort();
+        n?.(`${r}Options`, s), n?.(`${r}CheckAll`, e.target.value), t(e.target.value);
       } else
-        n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), t("");
+        n?.(`${r}Options`, []), n?.(`${r}CheckAll`, ""), t("");
     },
-    [i, e, t, n]
-  ), B = y(
-    (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);
+    [C, r, t, n]
+  ), K = k(
+    (e) => {
+      const s = e.target.value, i = f?.(`${r}Options`) ?? [], v = Array.isArray(i) ? i : i ? [i] : [], L = e.target.checked ? [...v, s] : v.filter((U) => U !== s);
+      n?.(`${r}Options`, L), S(L);
     },
-    [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,
+    [r, n, f, S]
+  ), l = f?.(`${r}Options`), m = h(() => Array.isArray(l) ? l : typeof l == "string" && l ? [l] : [], [l]), M = h(
+    () => m.includes(o.key.toString()),
+    [m, o.key]
+  ), x = f?.(`${r}CheckAll`), N = h(() => !!x, [x]), P = o.key === "All" ? /* @__PURE__ */ d(
+    T,
     {
-      checked: M,
+      checked: N,
       label: o.rendered?.toString(),
-      name: `${e}CheckAll`,
-      onChange: F,
+      name: `${r}CheckAll`,
+      onChange: B,
       value: o.rendered?.toString()
     }
   ) : /* @__PURE__ */ d(
-    j,
+    T,
     {
-      checked: E,
+      checked: M,
       label: o.rendered?.toString(),
-      name: `${e}Options`,
-      onChange: B,
+      name: `${r}Options`,
+      onChange: K,
       value: o.key.toString()
     }
-  ), x = p && !$ ? N : /* @__PURE__ */ d(
+  ), u = p && !A ? P : /* @__PURE__ */ d(
     _,
     {
-      color: K.palette.gray[800],
+      color: w.palette.gray[800],
       size: "md",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
       children: o.rendered
     }
-  ), P = y(
-    (r) => {
-      r.preventDefault(), t(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
+  ), R = k(
+    (e) => {
+      e.preventDefault(), t(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
         c.setOpen(!1);
-      }), V(h);
+      }), V(a);
     },
-    [h, o.key, o.rendered, c, t]
+    [a, o.key, o.rendered, c, t]
   );
   return I(D, () => {
     p && c.close();
-  }, [T]), /* @__PURE__ */ U(
-    W,
+  }, [j]), /* @__PURE__ */ E(
+    Q,
     {
-      ...!p && !h ? q : {},
+      ...!p && !a ? z : {},
       $multiSelection: p,
-      className: z,
-      ref: C,
+      className: q,
+      ref: O,
       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,
+        a ? /* @__PURE__ */ d(Y, { href: a, onClick: R, children: u }) : u,
+        $ && !A && !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" })
       ]
     }

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.1"
 }