@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.104

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js

@@ -1,56 +1,35 @@
-import { useFilterContext as C } from "../../contexts/filter.hook.js";
-import { FilterEvent as f, sendOpenFilterEvent as S } from "../../events/index.js";
-import { t as y } from "../../../../utils-B6A9pnrH.js";
-import { useCallback as a, useEffect as m, useId as F, useMemo as R, useRef as k, useState as g } from "react";
-var A = ({ onApply: n, countryCode: p = "US" }) => {
-  const { closeOnApply: r } = C(), i = k(null), t = F(), [E, o] = g(!1), [l, d] = g(), [v, c] = g(), h = R(() => v?.toLocaleDateString(y(p), {
+import { useFilterContext as O } from "../../contexts/filter.hook.js";
+import { sendOpenFilterEvent as v } from "../../events/index.js";
+import { useFilterDropdownSync as C } from "../../hooks/useFilterDropdownSync.js";
+import { t as g } from "../../../../utils-B-BTGYA5.js";
+import { useCallback as a, useId as w, useMemo as x, useState as l } from "react";
+var A = ({ onApply: o, countryCode: r = "US" }) => {
+  const { closeOnApply: i } = O(), s = w(), [f, e] = l(!1), [n, c] = l(), [d, p] = l(), D = x(() => d?.toLocaleDateString(g(r), {
     day: "numeric",
     month: "short",
     year: "numeric"
-  }), [v, p]), D = a(() => o((e) => (e || S(t), !e)), [t]), b = a(() => {
-    c(l), n?.(l), r && o(!1);
-  }, [
-    r,
-    n,
-    l
-  ]), O = a((e) => d(e), []), u = a(() => o(!1), []), L = a(() => {
-    d(void 0), c(void 0), n?.(), r && o(!1);
-  }, [r, n]);
-  return m(() => {
-    const e = new AbortController();
-    return document.addEventListener(f.OPEN, ((s) => {
-      s.detail !== t && o(!1);
-    }), { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [t]), m(() => {
-    const e = new AbortController();
-    return document.addEventListener(f.OPEN, (s) => {
-      s.detail !== t && o(!1);
-    }, { signal: e.signal }), document.addEventListener(f.RESET, () => {
-      d(void 0), c(void 0), n?.();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [t, n]), m(() => {
-    const e = new AbortController(), s = (w) => {
-      i.current?.contains(w.target) || u();
-    };
-    return document.addEventListener("mousedown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
-      document.hidden && u();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [u, i]), {
-    id: t,
-    appliedDay: h,
-    isOpen: E,
-    selectedDay: l,
-    wrapperRef: i,
-    handleApply: b,
-    handleOpen: D,
-    handleSelect: O,
-    handleReset: L
+  }), [d, r]), u = (t) => {
+    t && v(s), e(t);
+  }, h = () => {
+    p(n), o?.(n), i && e(!1);
+  }, y = a((t) => c(t), []), S = a(() => e(!1), []), m = a(() => {
+    c(void 0), p(void 0), o?.();
+  }, [o]), F = () => {
+    m(), i && e(!1);
+  };
+  return C({
+    id: s,
+    onClose: S,
+    onReset: m
+  }), {
+    id: s,
+    appliedDay: D,
+    isOpen: f,
+    selectedDay: n,
+    handleApply: h,
+    handleOpenChange: u,
+    handleSelect: y,
+    handleReset: F
   };
 };
 export {

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js

@@ -1,55 +1,50 @@
 import { t as e } from "../../../../utils-Cx-WzRZF.js";
-import { Button as i } from "../../../Button/Button.js";
-import { t as g } from "../../../../chevron-down-DNP-OOAQ.js";
+import { Button as l } from "../../../Button/Button.js";
+import { t as u } from "../../../../chevron-down-DNP-OOAQ.js";
 import { Badge as x } from "../../../Badge/Badge.js";
-import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
-import { filterButtonIconVariants as y, filterButtonVariants as k } from "../../Filter.variants.js";
-import { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-var A = ({ label: d, position: l = "left", countryCode: s = "US", onApply: p }) => {
-  const { id: m, appliedDay: n, isOpen: r, selectedDay: o, wrapperRef: c, handleApply: f, handleOpen: h, handleSelect: u, handleReset: b } = D({
-    onApply: p,
+import { DatePicker as y } from "../../../Datepicker/DatePicker.js";
+import { filterButtonIconVariants as C, filterButtonVariants as D } from "../../Filter.variants.js";
+import { FilterDropdown as w } from "../FilterDropdown/FilterDropdown.js";
+import { useDateFilterDropdown as N } from "./DateFilterDropdown.hook.js";
+import { Fragment as S, jsx as t, jsxs as o } from "react/jsx-runtime";
+var R = ({ label: p, position: i = "left", countryCode: s = "US", onApply: m }) => {
+  const { id: c, appliedDay: n, isOpen: r, selectedDay: a, handleApply: d, handleOpenChange: f, handleSelect: h, handleReset: g } = N({
+    onApply: m,
     countryCode: s
   });
-  return /* @__PURE__ */ a("div", {
-    ref: c,
-    className: "relative",
-    children: [/* @__PURE__ */ a("button", {
-      className: e(k(), { "text-slate-700": r }),
-      onClick: h,
-      children: [
-        d,
-        n && /* @__PURE__ */ t(x, { label: n }),
-        /* @__PURE__ */ t(g, { className: e(y(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
-      ]
-    }), r && /* @__PURE__ */ a("div", {
-      className: e("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "border", "border-gray-200", "flex", "flex-col", "gap-4", "py-4", "px-6", "dark:bg-metal-800", "dark:border-metal-700", {
-        "left-0": l === "left",
-        "right-0": l === "right"
-      }),
-      children: [/* @__PURE__ */ t(w, {
-        className: "p-0",
-        arrowClassName: "-top-1 right-0",
-        monthsClassName: e("shadow-none", "p-0", "w-auto", "dark:border-transparent"),
-        defaultSelected: o,
-        defaultMonth: o,
-        onSelect: u
-      }, o?.toISOString() ?? m), /* @__PURE__ */ a("div", {
-        className: e("flex", "justify-end", "items-center", "gap-4", "py-2"),
-        children: [/* @__PURE__ */ t(i, {
-          variant: "secondary",
-          appearance: "compact",
-          onClick: b,
-          children: "Reset"
-        }), /* @__PURE__ */ t(i, {
-          appearance: "compact",
-          onClick: f,
-          children: "Apply"
-        })]
+  return /* @__PURE__ */ o(w, {
+    isOpen: r,
+    position: i,
+    contentClassName: e("border", "border-gray-200", "flex", "flex-col", "gap-4", "py-4", "px-6"),
+    triggerClassName: e(D(), { "text-slate-700": r }),
+    trigger: /* @__PURE__ */ o(S, { children: [
+      p,
+      n && /* @__PURE__ */ t(x, { label: n }),
+      /* @__PURE__ */ t(u, { className: e(C(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
+    ] }),
+    onOpenChange: f,
+    children: [/* @__PURE__ */ t(y, {
+      className: "p-0",
+      arrowClassName: "-top-1 right-0",
+      monthsClassName: e("shadow-none", "p-0", "w-auto", "dark:border-transparent"),
+      defaultSelected: a,
+      defaultMonth: a,
+      onSelect: h
+    }, a?.toISOString() ?? c), /* @__PURE__ */ o("div", {
+      className: e("flex", "justify-end", "items-center", "gap-4", "py-2"),
+      children: [/* @__PURE__ */ t(l, {
+        variant: "secondary",
+        appearance: "compact",
+        onClick: g,
+        children: "Reset"
+      }), /* @__PURE__ */ t(l, {
+        appearance: "compact",
+        onClick: d,
+        children: "Apply"
       })]
     })]
   });
 };
 export {
-  A as DateFilterDropdown
+  R as DateFilterDropdown
 };

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.hook.js

@@ -1,63 +1,49 @@
 import { useFilterContext as F } from "../../contexts/filter.hook.js";
-import { FilterEvent as g, sendOpenFilterEvent as S } from "../../events/index.js";
-import { t as D } from "../../../../utils-B6A9pnrH.js";
-import { useCallback as a, useEffect as p, useId as k, useMemo as x, useRef as I, useState as u } from "react";
-var P = ({ defaultRange: h, onApply: t, countryCode: v = "US" }) => {
-  const { closeOnApply: i } = F(), d = I(null), o = k(), [R, r] = u(!1), [l, c] = u(h), [n, f] = u(), E = x(() => {
-    if (!n?.from) return;
-    const e = (s) => s.toLocaleDateString(D(v), {
+import { sendOpenFilterEvent as O } from "../../events/index.js";
+import { useFilterDropdownSync as w } from "../../hooks/useFilterDropdownSync.js";
+import { t as x } from "../../../../utils-B-BTGYA5.js";
+import { useCallback as a, useId as y, useMemo as I, useState as i } from "react";
+var E = ({ defaultRange: d, onApply: n, countryCode: p = "US" }) => {
+  const { closeOnApply: l } = F(), r = y(), [g, o] = i(!1), [s, c] = i(d), [t, m] = i(), u = I(() => {
+    if (!t?.from) return;
+    const e = (D) => D.toLocaleDateString(x(p), {
       day: "numeric",
       month: "short"
     });
-    return n.to ? `${e(n.from)} - ${e(n.to)}` : e(n.from);
-  }, [n]), C = a(() => r((e) => (e || S(o), !e)), [o]), O = a(() => {
+    return t.to ? `${e(t.from)} - ${e(t.to)}` : e(t.from);
+  }, [t]), h = (e) => {
+    e && O(r), o(e);
+  }, R = () => {
     const e = {
-      from: l?.from,
-      to: l?.to
+      from: s?.from,
+      to: s?.to
     };
-    f(e), t?.(e), i && r(!1);
-  }, [
-    i,
-    t,
-    l
-  ]), b = a((e) => {
+    m(e), n?.(e), l && o(!1);
+  }, C = a((e) => {
     c({
       from: e.from,
       to: e.to
     });
-  }, []), m = a(() => r(!1), []), L = a(() => {
-    c(void 0), f(void 0), t?.(), i && r(!1);
-  }, [i, t]);
-  return p(() => {
-    const e = new AbortController();
-    return document.addEventListener(g.OPEN, (s) => {
-      s.detail !== o && r(!1);
-    }, { signal: e.signal }), document.addEventListener(g.RESET, () => {
-      c(void 0), f(void 0), t?.();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [o, t]), p(() => {
-    const e = new AbortController(), s = (w) => {
-      d.current?.contains(w.target) || m();
-    };
-    return document.addEventListener("mousedown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
-      document.hidden && m();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [m, d]), {
-    id: o,
-    appliedRange: E,
-    isOpen: R,
-    selectedRange: l,
-    wrapperRef: d,
-    handleApply: O,
-    handleOpen: C,
-    handleRangeChange: b,
-    handleReset: L
+  }, []), S = a(() => o(!1), []), f = a(() => {
+    c(void 0), m(void 0), n?.();
+  }, [n]), v = () => {
+    f(), l && o(!1);
+  };
+  return w({
+    id: r,
+    onClose: S,
+    onReset: f
+  }), {
+    id: r,
+    appliedRange: u,
+    isOpen: g,
+    selectedRange: s,
+    handleApply: R,
+    handleOpenChange: h,
+    handleRangeChange: C,
+    handleReset: v
   };
 };
 export {
-  P as useDateRangeFilterDropdown
+  E as useDateRangeFilterDropdown
 };

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js

@@ -1,58 +1,52 @@
-import { t as a } from "../../../../utils-Cx-WzRZF.js";
-import { Button as l } from "../../../Button/Button.js";
-import { t as x } from "../../../../chevron-down-DNP-OOAQ.js";
-import { Badge as C } from "../../../Badge/Badge.js";
-import { DateRangePicker as D } from "../../../DateRangePicker/DateRangePicker.js";
-import { filterButtonIconVariants as N, filterButtonVariants as y } from "../../Filter.variants.js";
-import { useDateRangeFilterDropdown as B } from "./DateRangeFilterDropdown.hook.js";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var S = ({ label: i, position: n = "left", showTime: s = !1, timeFormat: d = "24", showPresets: m = !0, defaultRange: p, minDate: c, maxDate: f, countryCode: h = "US", onApply: g }) => {
-  const { appliedRange: o, isOpen: r, selectedRange: u, wrapperRef: R, handleApply: b, handleOpen: k, handleRangeChange: v, handleReset: w } = B({
-    defaultRange: p,
-    onApply: g,
-    countryCode: h
+import { t } from "../../../../utils-Cx-WzRZF.js";
+import { Button as o } from "../../../Button/Button.js";
+import { t as w } from "../../../../chevron-down-DNP-OOAQ.js";
+import { Badge as k } from "../../../Badge/Badge.js";
+import { DateRangePicker as v } from "../../../DateRangePicker/DateRangePicker.js";
+import { filterButtonIconVariants as y, filterButtonVariants as B } from "../../Filter.variants.js";
+import { FilterDropdown as F } from "../FilterDropdown/FilterDropdown.js";
+import { useDateRangeFilterDropdown as N } from "./DateRangeFilterDropdown.hook.js";
+import { Fragment as j, jsx as e, jsxs as r } from "react/jsx-runtime";
+var z = ({ label: i, position: l = "left", showTime: p = !1, timeFormat: s = "24", showPresets: m = !0, defaultRange: c, minDate: d, maxDate: g, countryCode: f = "US", onApply: h }) => {
+  const { appliedRange: n, isOpen: a, selectedRange: u, handleApply: R, handleOpenChange: C, handleRangeChange: x, handleReset: D } = N({
+    defaultRange: c,
+    onApply: h,
+    countryCode: f
   });
-  return /* @__PURE__ */ t("div", {
-    ref: R,
-    className: "relative",
-    children: [/* @__PURE__ */ t("button", {
-      className: a(y(), { "text-slate-700": r }),
-      onClick: k,
-      children: [
-        i,
-        o && /* @__PURE__ */ e(C, { label: o }),
-        /* @__PURE__ */ e(x, { className: a(N(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
-      ]
-    }), r && /* @__PURE__ */ t("div", {
-      className: a("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "dark:bg-metal-800", "dark:border-metal-700", {
-        "left-0": n === "left",
-        "right-0": n === "right"
-      }),
-      children: [/* @__PURE__ */ e(D, {
-        defaultRange: u,
-        showTime: s,
-        timeFormat: d,
-        showPresets: m,
-        minDate: c,
-        maxDate: f,
-        onRangeChange: v,
-        classNames: { container: "shadow-none" }
-      }), /* @__PURE__ */ t("div", {
-        className: a("flex", "justify-end", "items-center", "gap-4", "p-4", "pt-0"),
-        children: [/* @__PURE__ */ e(l, {
-          variant: "secondary",
-          appearance: "compact",
-          onClick: w,
-          children: "Reset"
-        }), /* @__PURE__ */ e(l, {
-          appearance: "compact",
-          onClick: b,
-          children: "Apply"
-        })]
+  return /* @__PURE__ */ r(F, {
+    isOpen: a,
+    position: l,
+    triggerClassName: t(B(), { "text-slate-700": a }),
+    trigger: /* @__PURE__ */ r(j, { children: [
+      i,
+      n && /* @__PURE__ */ e(k, { label: n }),
+      /* @__PURE__ */ e(w, { className: t(y(), { "rotate-180 text-blue-600 dark:text-aurora-500": a }) })
+    ] }),
+    onOpenChange: C,
+    children: [/* @__PURE__ */ e(v, {
+      defaultRange: u,
+      showTime: p,
+      timeFormat: s,
+      showPresets: m,
+      minDate: d,
+      maxDate: g,
+      onRangeChange: x,
+      classNames: { container: "shadow-none" }
+    }), /* @__PURE__ */ r("div", {
+      className: t("flex", "justify-end", "items-center", "gap-4", "p-4", "pt-0"),
+      children: [/* @__PURE__ */ e(o, {
+        variant: "secondary",
+        appearance: "compact",
+        onClick: D,
+        children: "Reset"
+      }), /* @__PURE__ */ e(o, {
+        appearance: "compact",
+        onClick: R,
+        children: "Apply"
       })]
     })]
   });
 };
 export {
-  S as DateRangeFilterDropdown
+  z as DateRangeFilterDropdown
 };

package/dist/components/Filter/components/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,28 @@
+import { t as l } from "../../../../utils-Cx-WzRZF.js";
+import { useFilterContext as f } from "../../contexts/filter.hook.js";
+import { i as p, n as c, r as h, t as g } from "../../../../dist-BaPW7qXd2.js";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+var j = ({ isOpen: t, trigger: r, triggerClassName: o, position: a = "left", contentClassName: n, children: s, onOpenChange: i }) => {
+  const { theme: m } = f();
+  return /* @__PURE__ */ u(h, {
+    open: t,
+    onOpenChange: i,
+    children: [/* @__PURE__ */ e(p, {
+      className: o,
+      children: r
+    }), /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(g, {
+      "data-theme": m,
+      side: "bottom",
+      sideOffset: 4,
+      align: a === "right" ? "end" : "start",
+      onOpenAutoFocus: (d) => {
+        d.preventDefault();
+      },
+      className: l("bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-50", "dark:bg-metal-800", "dark:border-metal-700", n),
+      children: s
+    }) })]
+  });
+};
+export {
+  j as FilterDropdown
+};

package/dist/components/Filter/components/ResetButton/ResetButton.js

@@ -1,21 +1,24 @@
-import { t as n } from "../../../../utils-Cx-WzRZF.js";
-import { Button as a } from "../../../Button/Button.js";
+import { t as a } from "../../../../utils-Cx-WzRZF.js";
+import { Button as i } from "../../../Button/Button.js";
+import { useFilterContext as c } from "../../contexts/filter.hook.js";
 import { resetEvent as m } from "../../events/index.js";
-import { useCallback as i } from "react";
-import { jsx as p } from "react/jsx-runtime";
-var v = ({ disabled: r, className: e, onClick: t, ...o }) => /* @__PURE__ */ p(a, {
-  type: "button",
-  variant: "link",
-  appearance: "compact",
-  version: "alternate",
-  onClick: i(() => {
-    m(), t?.();
-  }, [t]),
-  disabled: r,
-  className: n("hover:no-underline", e),
-  ...o,
-  children: "Reset"
-});
+import { jsx as s } from "react/jsx-runtime";
+var h = ({ disabled: t, className: e, onClick: r, ...o }) => {
+  const { resetScope: n } = c();
+  return /* @__PURE__ */ s(i, {
+    type: "button",
+    variant: "link",
+    appearance: "compact",
+    version: "alternate",
+    onClick: () => {
+      m(n), r?.();
+    },
+    disabled: t,
+    className: a("hover:no-underline", e),
+    ...o,
+    children: "Reset"
+  });
+};
 export {
-  v as ResetButton
+  h as ResetButton
 };

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.js

@@ -1,76 +1,71 @@
-import { t as o } from "../../../../Checkbox-B1rTwzR3.js";
-import { t as r } from "../../../../utils-Cx-WzRZF.js";
-import { Button as p } from "../../../Button/Button.js";
+import { t as m } from "../../../../Checkbox-B_ngk9Dj.js";
+import { t as s } from "../../../../utils-Cx-WzRZF.js";
+import { Button as o } from "../../../Button/Button.js";
 import { t as y } from "../../../../chevron-down-DNP-OOAQ.js";
-import { Badge as S } from "../../../Badge/Badge.js";
-import { filterButtonIconVariants as O, filterButtonVariants as A } from "../../Filter.variants.js";
+import { Badge as O } from "../../../Badge/Badge.js";
+import { filterButtonIconVariants as S, filterButtonVariants as w } from "../../Filter.variants.js";
+import { FilterDropdown as A } from "../FilterDropdown/FilterDropdown.js";
 import { useBadgeMultiSelect as B } from "../BadgeDropdown/BadgeMultiSelect.hook.js";
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-var T = ({ options: l, label: h, position: c = "left", onApply: f, showSelectAll: x = !0, selectAllLabel: u = "All" }) => {
-  const { wrapperRef: g, isOpen: d, isAllSelected: s, selectedOptions: b, selectedCount: i, handleOpen: k, handleResetOptions: v, handleApplyOptions: N, handleSelectAll: C, handleSelectOption: w } = B({
+import { Fragment as j, jsx as e, jsxs as a } from "react/jsx-runtime";
+var z = ({ options: l, label: p, position: h = "left", onApply: f, showSelectAll: x = !0, selectAllLabel: g = "All" }) => {
+  const { isOpen: r, isAllSelected: c, selectedOptions: u, selectedCount: d, handleOpenChange: C, handleResetOptions: b, handleApplyOptions: k, handleSelectAll: N, handleSelectOption: v } = B({
     onApply: f,
     options: l
   });
-  return l.length === 0 ? null : /* @__PURE__ */ a("div", {
-    ref: g,
-    className: "relative",
-    children: [/* @__PURE__ */ a("button", {
-      className: r(A(), { "text-slate-700 dark:text-metal-50": d }),
-      onClick: k,
-      children: [
-        h,
-        i.length > 0 && /* @__PURE__ */ e(S, { label: i.length.toString() }),
-        /* @__PURE__ */ e(y, { className: r(O(), { "rotate-180 text-blue-600 dark:text-aurora-500": d }) })
-      ]
-    }), d && /* @__PURE__ */ a("div", {
-      className: r("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "border", "border-gray-200", "dark:bg-metal-800", "dark:border-metal-700", {
-        "left-0": c === "left",
-        "right-0": c === "right"
-      }),
-      children: [/* @__PURE__ */ e("div", {
-        className: "px-6 py-4",
-        children: /* @__PURE__ */ a("div", {
-          className: "flex flex-col gap-2",
-          children: [x && /* @__PURE__ */ a("div", {
+  return l.length === 0 ? null : /* @__PURE__ */ a(A, {
+    isOpen: r,
+    position: h,
+    contentClassName: "border border-gray-200",
+    triggerClassName: s(w(), { "text-slate-700 dark:text-metal-50": r }),
+    trigger: /* @__PURE__ */ a(j, { children: [
+      p,
+      d.length > 0 && /* @__PURE__ */ e(O, { label: d.length.toString() }),
+      /* @__PURE__ */ e(y, { className: s(S(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
+    ] }),
+    onOpenChange: C,
+    children: [/* @__PURE__ */ e("div", {
+      className: "px-6 py-4",
+      children: /* @__PURE__ */ a("div", {
+        className: "flex flex-col gap-2",
+        children: [x && /* @__PURE__ */ a("div", {
+          className: "flex gap-4",
+          children: [/* @__PURE__ */ e(m, {
+            defaultChecked: c,
+            onChange: (t) => N(l, t)
+          }, `select-all-${c}`), /* @__PURE__ */ e("span", {
+            className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
+            children: g
+          })]
+        }), l.map((t) => {
+          const i = !!u.find((n) => n.id === t.id);
+          return /* @__PURE__ */ a("div", {
             className: "flex gap-4",
-            children: [/* @__PURE__ */ e(o, {
-              defaultChecked: s,
-              onChange: (t) => C(l, t)
-            }, `select-all-${s}`), /* @__PURE__ */ e("span", {
+            children: [/* @__PURE__ */ e(m, {
+              defaultChecked: i,
+              "data-label": t.id,
+              onChange: (n) => v(t, n)
+            }, `${t.id}-${i}`), /* @__PURE__ */ e("span", {
               className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
-              children: u
+              children: t.label
             })]
-          }), l.map((t) => {
-            const m = !!b.find((n) => n.id === t.id);
-            return /* @__PURE__ */ a("div", {
-              className: "flex gap-4",
-              children: [/* @__PURE__ */ e(o, {
-                defaultChecked: m,
-                "data-label": t.id,
-                onChange: (n) => w(t, n)
-              }, `${t.id}-${m}`), /* @__PURE__ */ e("span", {
-                className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
-                children: t.label
-              })]
-            }, t.id);
-          })]
-        })
-      }), /* @__PURE__ */ a("div", {
-        className: r("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
-        children: [/* @__PURE__ */ e(p, {
-          variant: "secondary",
-          appearance: "compact",
-          onClick: v,
-          children: "Reset"
-        }), /* @__PURE__ */ e(p, {
-          appearance: "compact",
-          onClick: N,
-          children: "Apply"
+          }, t.id);
         })]
+      })
+    }), /* @__PURE__ */ a("div", {
+      className: s("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
+      children: [/* @__PURE__ */ e(o, {
+        variant: "secondary",
+        appearance: "compact",
+        onClick: b,
+        children: "Reset"
+      }), /* @__PURE__ */ e(o, {
+        appearance: "compact",
+        onClick: k,
+        children: "Apply"
       })]
     })]
   });
 };
 export {
-  T as TextMultiSelect
+  z as TextMultiSelect
 };