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

package/dist/components/Drawer/Drawer.js

@@ -1,76 +1,81 @@
 "use client";
-import { t as z } from "../../x-CESTrenk.js";
-import { t as B } from "../../dist-C6Cif8-U.js";
+import { t as g } from "../../x-BI9jmc7e.js";
+import { t as z } from "../../dist-DX0sBG3Q.js";
 import { t as o } from "../../utils-Cx-WzRZF.js";
-import { t as C } from "../../Combination-cjXRJS03.js";
-import { DrawerContext as F } from "./contexts/Drawer.context.js";
-import { Header as I } from "./components/Header/Header.js";
-import { Body as M } from "./components/Body/Body.js";
-import { Footer as j } from "./components/Footer/Footer.js";
-import { buttonCloseVariants as k, drawerVariants as A, overlayVariants as K, resizeHandleVariants as P } from "./Drawer.variants.js";
+import { t as B } from "../../Combination-CnMM05mt.js";
+import { t as C } from "../../es2015-DigR3dar.js";
+import { DrawerContext as I } from "./contexts/Drawer.context.js";
+import { Header as M } from "./components/Header/Header.js";
+import { Body as j } from "./components/Body/Body.js";
+import { Footer as k } from "./components/Footer/Footer.js";
+import { buttonCloseVariants as A, drawerVariants as K, overlayVariants as P, resizeHandleVariants as R } from "./Drawer.variants.js";
 import "./constants/index.js";
-import { useDrawer as R } from "./hooks/useDrawer.js";
-import { useId as T, useMemo as E } from "react";
+import { useDrawer as T } from "./hooks/useDrawer.js";
+import { useId as _, useMemo as E } from "react";
 import { createPortal as L } from "react-dom";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-var d = ({ canResize: t = !1, children: f, className: u, classNames: r, container: c, defaultWidth: m = 500, isOpen: p, maxWidth: h, minWidth: w, position: i = "right", showCloseButton: y = !0, theme: v, onClose: a }) => {
-  const n = T(), { handleKeyDown: b, handleMouseDown: D, isAnimating: s, isVisible: x, translateClass: V, width: H } = R({
+var d = ({ canResize: t = !1, children: u, className: c, classNames: r, container: f, defaultWidth: m = 500, isOpen: p, maxWidth: h, minWidth: w, position: a = "right", showCloseButton: y = !0, theme: v, onClose: i }) => {
+  const n = _(), { handleKeyDown: b, handleMouseDown: D, isAnimating: s, isVisible: x, translateClass: V, width: H } = T({
     canResize: t,
     defaultWidth: m,
     isOpen: p,
     maxWidth: h,
     minWidth: w,
-    position: i,
-    onClose: a
-  }), g = E(() => ({
+    position: a,
+    onClose: i
+  }), F = E(() => ({
     classNames: r,
     headerId: n
   }), [r, n]);
-  return x ? L(/* @__PURE__ */ e(F.Provider, {
-    value: g,
-    children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ l("div", {
+  return x ? L(/* @__PURE__ */ e(I.Provider, {
+    value: F,
+    children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ l("div", {
       className: o("fixed inset-0 z-40", r?.root),
       "data-theme": v,
       children: [/* @__PURE__ */ e("div", {
-        className: o(K(), {
+        className: o(P(), {
           "opacity-50": s,
           "opacity-0": !s
         }, r?.overlay),
         "aria-hidden": "true",
-        onClick: a,
+        onClick: i,
         role: "presentation"
-      }), /* @__PURE__ */ l("div", {
-        className: o(A({ position: i }), V, r?.panel, u),
-        style: { width: t ? H : m },
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": n,
-        children: [
-          t && /* @__PURE__ */ e("button", {
-            type: "button",
-            "aria-label": "Resize drawer",
-            className: o(P({ position: i }), r?.resizeHandle),
-            onMouseDown: D,
-            onKeyDown: b
-          }),
-          y && /* @__PURE__ */ l("button", {
-            className: o(k(), r?.closeButton),
-            onClick: a,
-            type: "button",
-            children: [/* @__PURE__ */ e(z, { size: 20 }), /* @__PURE__ */ e(B, { children: "Dismiss drawer" })]
-          }),
-          /* @__PURE__ */ e("div", {
-            className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
-            children: f
-          })
-        ]
+      }), /* @__PURE__ */ e(C, {
+        returnFocus: !0,
+        className: "contents",
+        children: /* @__PURE__ */ l("div", {
+          className: o(K({ position: a }), V, r?.panel, c),
+          style: { width: t ? H : m },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": n,
+          children: [
+            t && /* @__PURE__ */ e("button", {
+              type: "button",
+              "aria-label": "Resize drawer",
+              className: o(R({ position: a }), r?.resizeHandle),
+              onMouseDown: D,
+              onKeyDown: b
+            }),
+            y && /* @__PURE__ */ l("button", {
+              className: o(A(), r?.closeButton),
+              onClick: i,
+              type: "button",
+              children: [/* @__PURE__ */ e(g, { size: 20 }), /* @__PURE__ */ e(z, { children: "Dismiss drawer" })]
+            }),
+            /* @__PURE__ */ e("div", {
+              className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
+              children: u
+            })
+          ]
+        })
       })]
     }) })
-  }), c || document.body) : null;
+  }), f || document.body) : null;
 };
-d.Header = I;
-d.Body = M;
-d.Footer = j;
+d.Header = M;
+d.Body = j;
+d.Footer = k;
 export {
   d as Drawer
 };

package/dist/components/Drawer/hooks/useDrawer.js

@@ -1,62 +1,57 @@
 import "../constants/index.js";
-import { useCallback as D, useEffect as c, useMemo as v, useRef as w, useState as E } from "react";
-var H = ({ canResize: n = !1, defaultWidth: I = 500, isOpen: s, maxWidth: u = 800, minWidth: l = 400, position: t = "right", onClose: M }) => {
-  const [T, g] = E(!1), [a, h] = E(!1), [L, f] = E(I), d = w(!1), i = w(() => {
-  }), m = w(() => {
+import { useCallback as b, useEffect as u, useRef as y, useState as D } from "react";
+var F = ({ canResize: o = !1, defaultWidth: g = 500, isOpen: n, maxWidth: l = 800, minWidth: a = 400, position: r = "right", onClose: w }) => {
+  const [I, h] = D(!1), [E, M] = D(!1), [T, c] = D(g), f = y(!1), i = y(() => {
+  }), d = y(() => {
   });
-  c(() => {
+  u(() => {
     let e;
-    return s ? (g(!0), e = setTimeout(() => h(!0), 10)) : (h(!1), e = setTimeout(() => g(!1), 300)), () => {
+    return n ? (h(!0), e = setTimeout(() => M(!0), 10)) : (M(!1), e = setTimeout(() => h(!1), 300)), () => {
       clearTimeout(e);
     };
-  }, [s]), c(() => {
-    if (!s) return;
-    const e = new AbortController(), r = (A) => {
-      A.code === "Escape" && M?.();
+  }, [n]), u(() => {
+    if (!n) return;
+    const e = new AbortController(), t = (m) => {
+      m.code === "Escape" && w?.();
     };
-    return window.addEventListener("keydown", r, { signal: e.signal }), () => {
+    return window.addEventListener("keydown", t, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [s, M]);
-  const o = D(() => {
-    document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", m.current), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }, [n, w]);
+  const s = b(() => {
+    document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", d.current), document.body.style.cursor = "", document.body.style.userSelect = "";
   }, []);
-  c(() => {
+  u(() => {
     i.current = (e) => {
-      if (!d.current || !n) return;
-      let r;
-      t === "right" ? r = window.innerWidth - e.clientX : r = e.clientX, r = Math.max(l, Math.min(u, r)), f(r);
-    }, m.current = () => {
-      d.current = !1, o();
+      if (!f.current || !o) return;
+      let t;
+      r === "right" ? t = window.innerWidth - e.clientX : t = e.clientX, t = Math.max(a, Math.min(l, t)), c(t);
+    }, d.current = () => {
+      f.current = !1, s();
     };
   }, [
-    t,
+    r,
+    a,
     l,
-    u,
-    n,
-    o
+    o,
+    s
   ]);
-  const _ = D(() => {
-    d.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", m.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
-  }, []), b = D((e) => {
-    if (!n) return;
-    const r = t === "right" && e.key === "ArrowLeft" || t === "left" && e.key === "ArrowRight", A = t === "right" && e.key === "ArrowRight" || t === "left" && e.key === "ArrowLeft";
-    r ? (e.preventDefault(), f((y) => Math.min(u, y + 20))) : A && (e.preventDefault(), f((y) => Math.max(l, y - 20)));
-  }, [
-    n,
-    t,
-    u,
-    l
-  ]);
-  return c(() => o, [o]), {
-    isAnimating: a,
-    isVisible: T,
-    width: L,
-    translateClass: v(() => a ? "translate-x-0" : t === "left" ? "-translate-x-full" : "translate-x-full", [a, t]),
-    handleMouseDown: _,
-    handleKeyDown: b
+  const L = () => {
+    f.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", d.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }, _ = (e) => {
+    if (!o) return;
+    const t = r === "right" && e.key === "ArrowLeft" || r === "left" && e.key === "ArrowRight", m = r === "right" && e.key === "ArrowRight" || r === "left" && e.key === "ArrowLeft";
+    t ? (e.preventDefault(), c((A) => Math.min(l, A + 20))) : m && (e.preventDefault(), c((A) => Math.max(a, A - 20)));
+  };
+  return u(() => s, [s]), {
+    isAnimating: E,
+    isVisible: I,
+    width: T,
+    translateClass: E ? "translate-x-0" : r === "left" ? "-translate-x-full" : "translate-x-full",
+    handleMouseDown: L,
+    handleKeyDown: _
   };
 };
 export {
-  H as useDrawer
+  F as useDrawer
 };

package/dist/components/DropdownButton/DropdownButton.js

@@ -1,4 +1,4 @@
-import { t } from "../../DropdownButton-Beel5_gN.js";
+import { t } from "../../DropdownButton-DfNojmCW.js";
 export {
   t as DropdownButton
 };

package/dist/components/Filter/Filter.js

@@ -1,34 +1,36 @@
 "use client";
-import { t as l } from "../../utils-Cx-WzRZF.js";
-import { FilterProvider as a } from "./contexts/filter.provider.js";
-import { filterVariants as p } from "./Filter.variants.js";
-import { BadgeMultiSelect as n } from "./components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as d } from "./components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as f } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as c } from "./components/ResetButton/ResetButton.js";
-import { TextMultiSelect as s } from "./components/TextMultiSelect/TextMultiSelect.js";
-import { TimeFilterDropdown as D } from "./components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { t as a } from "../../utils-Cx-WzRZF.js";
+import { FilterProvider as p } from "./contexts/filter.provider.js";
+import { filterVariants as n } from "./Filter.variants.js";
+import { BadgeMultiSelect as d } from "./components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as f } from "./components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as s } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as D } from "./components/ResetButton/ResetButton.js";
+import { TextMultiSelect as c } from "./components/TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as u } from "./components/TimeFilterDropdown/TimeFilterDropdown.js";
 import { jsx as e } from "react/jsx-runtime";
-var t = ({ className: r, theme: o = "civo", children: i, closeOnApply: m = !0 }) => /* @__PURE__ */ e(a, {
+var t = ({ className: o, theme: r, children: i, closeOnApply: m = !0, resetScope: l }) => /* @__PURE__ */ e(p, {
   closeOnApply: m,
+  resetScope: l,
+  theme: r,
   children: /* @__PURE__ */ e("div", {
-    className: l(p({ className: r })),
-    "data-theme": o,
+    className: a(n({ className: o })),
+    "data-theme": r,
     children: i
   })
 });
 t.displayName = "KonstructFilter";
-t.BadgeMultiSelect = n;
-t.TextMultiSelect = s;
-t.DateFilterDropdown = d;
-t.DateRangeFilterDropdown = f;
-t.TimeFilterDropdown = D;
-t.ResetButton = c;
+t.BadgeMultiSelect = d;
+t.TextMultiSelect = c;
+t.DateFilterDropdown = f;
+t.DateRangeFilterDropdown = s;
+t.TimeFilterDropdown = u;
+t.ResetButton = D;
 export {
-  n as BadgeMultiSelect,
-  d as DateFilterDropdown,
-  f as DateRangeFilterDropdown,
+  d as BadgeMultiSelect,
+  f as DateFilterDropdown,
+  s as DateRangeFilterDropdown,
   t as Filter,
-  s as TextMultiSelect,
-  D as TimeFilterDropdown
+  c as TextMultiSelect,
+  u as TimeFilterDropdown
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.js

@@ -1,65 +1,50 @@
-import { useFilterContext as L } from "../../contexts/filter.hook.js";
-import { FilterEvent as p, sendOpenFilterEvent as F } from "../../events/index.js";
-import { useCallback as r, useEffect as m, useId as k, useMemo as v, useRef as x, useState as O } from "react";
-var B = ({ onApply: l, options: c = [] }) => {
-  const { closeOnApply: o } = L(), a = k(), u = x(null), [g, d] = O(!1), [s, i] = O([]);
-  m(() => {
-    const e = new AbortController();
-    return document.addEventListener(p.OPEN, (t) => {
-      t.detail !== a && d(!1);
-    }, { signal: e.signal }), document.addEventListener(p.RESET, () => {
-      i([]), l?.([]);
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [a, l]);
-  const h = r(() => d((e) => (e || (F(a), i((t) => t.filter((n) => n.isApplied))), !e)), [a, d]), f = r(() => d(!1), []), E = r((e, t) => {
-    i(t ? [...s, {
+import { useFilterContext as F } from "../../contexts/filter.hook.js";
+import { sendOpenFilterEvent as w } from "../../events/index.js";
+import { useFilterDropdownSync as x } from "../../hooks/useFilterDropdownSync.js";
+import { useCallback as a, useId as y, useMemo as f, useState as m } from "react";
+var B = ({ onApply: o, options: d = [] }) => {
+  const { closeOnApply: p } = F(), c = y(), [u, n] = m(!1), [t, i] = m([]), O = a(() => n(!1), []), r = a(() => {
+    i([]), o?.([]);
+  }, [o]);
+  x({
+    id: c,
+    onClose: O,
+    onReset: r
+  });
+  const A = (e) => {
+    e && (w(c), i((s) => s.filter((l) => l.isApplied))), n(e);
+  }, h = (e, s) => {
+    i(s ? [...t, {
       ...e,
       isApplied: !1
-    }] : s.map((n) => n.id === e.id ? {
-      ...n,
+    }] : t.map((l) => l.id === e.id ? {
+      ...l,
       isRemoved: !0
-    } : n));
-  }, [i, s]), R = r(() => {
-    i([]), l?.([]), o && d(!1);
-  }, [o, l]), A = r(() => {
-    const e = s?.filter((t) => !t.isRemoved).map((t) => ({
-      ...t,
+    } : l));
+  }, S = () => {
+    r(), p && n(!1);
+  }, v = () => {
+    const e = t?.filter((s) => !s.isRemoved).map((s) => ({
+      ...s,
       isApplied: !0
     }));
-    i(e), l?.(e.map(({ isApplied: t, isRemoved: n, ...w }) => w)), o && d(!1);
-  }, [
-    o,
-    l,
-    s,
-    i
-  ]), C = v(() => s.filter((e) => e.isApplied), [s]), S = v(() => c.length > 0 && c.every((e) => s.some((t) => t.id === e.id && !t.isRemoved)), [c, s]), b = r((e, t) => {
-    t && i(e.map((n) => ({
-      ...n,
-      isApplied: !1
-    })));
-  }, []);
-  return m(() => {
-    const e = new AbortController(), t = (n) => {
-      u.current?.contains(n.target) || f();
-    };
-    return document.addEventListener("mousedown", t, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
-      document.hidden && f();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [f, u]), {
-    isOpen: g,
-    isAllSelected: S,
-    selectedCount: C,
-    selectedOptions: s,
-    wrapperRef: u,
-    handleApplyOptions: A,
-    handleOpen: h,
-    handleResetOptions: R,
-    handleSelectAll: b,
-    handleSelectOption: E
+    i(e), o?.(e.map(({ isApplied: s, isRemoved: l, ...g }) => g)), p && n(!1);
+  }, R = f(() => t.filter((e) => e.isApplied), [t]), C = f(() => d.length > 0 && d.every((e) => t.some((s) => s.id === e.id && !s.isRemoved)), [d, t]);
+  return {
+    isOpen: u,
+    isAllSelected: C,
+    selectedCount: R,
+    selectedOptions: t,
+    handleApplyOptions: v,
+    handleOpenChange: A,
+    handleResetOptions: S,
+    handleSelectAll: (e, s) => {
+      s && i(e.map((l) => ({
+        ...l,
+        isApplied: !1
+      })));
+    },
+    handleSelectOption: h
   };
 };
 export {

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

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