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

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-DnlwdPmb.js";
+import { t } from "../../DropdownButton-DfNojmCW.js";
 export {
   t as DropdownButton
 };

package/dist/components/Filter/Filter.js

@@ -1,35 +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: o, theme: r = "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: 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,66 +1,52 @@
-import { useFilterContext as w } from "../../contexts/filter.hook.js";
-import { FilterEvent as p, sendOpenFilterEvent as F } from "../../events/index.js";
-import { useCallback as d, useEffect as m, useId as L, useMemo as u, useState as v } from "react";
-var _ = ({ onApply: l, options: c = [] }) => {
-  const { closeOnApply: o } = w(), a = L(), [O, r] = v(!1), [s, i] = v([]);
-  m(() => {
-    const e = new AbortController();
-    return document.addEventListener(p.OPEN, (t) => {
-      t.detail !== a && r(!1);
-    }, { signal: e.signal }), document.addEventListener(p.RESET, () => {
-      i([]), l?.([]);
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [a, l]);
-  const g = d((e) => {
-    e && (F(a), i((t) => t.filter((n) => n.isApplied))), r(e);
-  }, [a]), f = d(() => r(!1), []), h = d((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]), E = d(() => {
-    i([]), l?.([]), o && r(!1);
-  }, [o, l]), A = d(() => {
-    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, ...b }) => b)), o && r(!1);
-  }, [
-    o,
-    l,
-    s,
-    i
-  ]), C = u(() => s.filter((e) => e.isApplied), [s]), R = u(() => c.length > 0 && c.every((e) => s.some((t) => t.id === e.id && !t.isRemoved)), [c, s]), S = d((e, t) => {
-    t && i(e.map((n) => ({
-      ...n,
-      isApplied: !1
-    })));
-  }, []);
-  return m(() => {
-    const e = new AbortController();
-    return document.addEventListener("visibilitychange", () => {
-      document.hidden && f();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [f]), {
-    isOpen: O,
-    isAllSelected: R,
-    selectedCount: C,
-    selectedOptions: s,
-    handleApplyOptions: A,
-    handleOpenChange: g,
-    handleResetOptions: E,
-    handleSelectAll: S,
+    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 {
-  _ as useBadgeMultiSelect
+  B as useBadgeMultiSelect
 };

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

@@ -1,4 +1,4 @@
-import { t as m } from "../../../../Checkbox-DzAx7n67.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";

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

@@ -1,50 +1,37 @@
-import { useFilterContext as S } from "../../contexts/filter.hook.js";
-import { FilterEvent as u, sendOpenFilterEvent as y } from "../../events/index.js";
-import { t as C } from "../../../../utils-B-BTGYA5.js";
-import { useCallback as o, useEffect as p, useId as F, useMemo as L, useState as d } from "react";
-var k = ({ onApply: t, countryCode: c = "US" }) => {
-  const { closeOnApply: a } = S(), n = F(), [v, s] = d(!1), [i, r] = d(), [m, l] = d(), g = L(() => m?.toLocaleDateString(C(c), {
+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"
-  }), [m, c]), h = o((e) => {
-    e && y(n), s(e);
-  }, [n]), D = o(() => {
-    l(i), t?.(i), a && s(!1);
-  }, [
-    a,
-    t,
-    i
-  ]), E = o((e) => r(e), []), f = o(() => s(!1), []), b = o(() => {
-    r(void 0), l(void 0), t?.(), a && s(!1);
-  }, [a, t]);
-  return p(() => {
-    const e = new AbortController();
-    return document.addEventListener(u.OPEN, (O) => {
-      O.detail !== n && s(!1);
-    }, { signal: e.signal }), document.addEventListener(u.RESET, () => {
-      r(void 0), l(void 0), t?.();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [n, t]), p(() => {
-    const e = new AbortController();
-    return document.addEventListener("visibilitychange", () => {
-      document.hidden && f();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [f]), {
-    id: n,
-    appliedDay: g,
-    isOpen: v,
-    selectedDay: i,
-    handleApply: D,
-    handleOpenChange: h,
-    handleSelect: E,
-    handleReset: b
+  }), [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 {
-  k as useDateFilterDropdown
+  A as useDateFilterDropdown
 };

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

@@ -1,62 +1,49 @@
 import { useFilterContext as F } from "../../contexts/filter.hook.js";
-import { FilterEvent as g, sendOpenFilterEvent as L } from "../../events/index.js";
-import { t as S } from "../../../../utils-B-BTGYA5.js";
-import { useCallback as a, useEffect as u, useId as D, useMemo as w, useState as f } from "react";
-var k = ({ defaultRange: h, onApply: t, countryCode: v = "US" }) => {
-  const { closeOnApply: s } = F(), o = D(), [p, r] = f(!1), [i, l] = f(h), [n, d] = f(), R = w(() => {
-    if (!n?.from) return;
-    const e = (c) => c.toLocaleDateString(S(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]), E = a((e) => {
-    e && L(o), r(e);
-  }, [o]), C = 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: i?.from,
-      to: i?.to
+      from: s?.from,
+      to: s?.to
     };
-    d(e), t?.(e), s && r(!1);
-  }, [
-    s,
-    t,
-    i
-  ]), b = a((e) => {
-    l({
+    m(e), n?.(e), l && o(!1);
+  }, C = a((e) => {
+    c({
       from: e.from,
       to: e.to
     });
-  }, []), m = a(() => r(!1), []), O = a(() => {
-    l(void 0), d(void 0), t?.(), s && r(!1);
-  }, [s, t]);
-  return u(() => {
-    const e = new AbortController();
-    return document.addEventListener(g.OPEN, (c) => {
-      c.detail !== o && r(!1);
-    }, { signal: e.signal }), document.addEventListener(g.RESET, () => {
-      l(void 0), d(void 0), t?.();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [o, t]), u(() => {
-    const e = new AbortController();
-    return document.addEventListener("visibilitychange", () => {
-      document.hidden && m();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [m]), {
-    id: o,
-    appliedRange: R,
-    isOpen: p,
-    selectedRange: i,
-    handleApply: C,
-    handleOpenChange: E,
-    handleRangeChange: b,
-    handleReset: O
+  }, []), 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 {
-  k as useDateRangeFilterDropdown
+  E as useDateRangeFilterDropdown
 };

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

@@ -1,6 +1,6 @@
 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-2bGlmy8N2.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();

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,4 +1,4 @@
-import { t as m } from "../../../../Checkbox-DzAx7n67.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";

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

@@ -1,51 +1,37 @@
-import { getFormattedTime as w } from "../../../TimePicker/utils/index.js";
-import { useFilterContext as x } from "../../contexts/filter.hook.js";
-import { FilterEvent as b, sendOpenFilterEvent as I } from "../../events/index.js";
-import { useCallback as s, useEffect as p, useId as R, useState as i } from "react";
-var j = ({ onApply: t, format: g = "24" }) => {
-  const { closeOnApply: l } = x(), n = R(), [h, o] = i(!1), [d, r] = i(), [f, c] = i(), [m, a] = i(), [E, v] = i(), L = E ?? (f ? w(f, g) : void 0), C = s((e) => {
-    e && I(n), o(e);
-  }, [n]), T = s((e) => {
-    r(e.value), a(e.label);
-  }, []), O = s((e) => {
-    r(e), a(void 0);
-  }, []), P = s(() => {
-    c(d), v(m), t?.(d), l && o(!1);
-  }, [
-    l,
-    t,
-    d,
-    m
-  ]), u = s(() => o(!1), []), S = s(() => {
-    r(void 0), c(void 0), a(void 0), v(void 0), t?.(), l && o(!1);
-  }, [l, t]);
-  return p(() => {
-    const e = new AbortController();
-    return document.addEventListener(b.OPEN, (F) => {
-      F.detail !== n && o(!1);
-    }, { signal: e.signal }), document.addEventListener(b.RESET, () => {
-      r(void 0), c(void 0), a(void 0), v(void 0), t?.();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [n, t]), p(() => {
-    const e = new AbortController();
-    return document.addEventListener("visibilitychange", () => {
-      document.hidden && u();
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [u]), {
-    id: n,
-    appliedLabel: L,
-    isOpen: h,
-    selectedTime: d,
+import { getFormattedTime as g } from "../../../TimePicker/utils/index.js";
+import { useFilterContext as w } from "../../contexts/filter.hook.js";
+import { sendOpenFilterEvent as x } from "../../events/index.js";
+import { useFilterDropdownSync as A } from "../../hooks/useFilterDropdownSync.js";
+import { useCallback as d, useId as D, useState as t } from "react";
+var j = ({ onApply: o, format: v = "24" }) => {
+  const { closeOnApply: c } = w(), l = D(), [b, s] = t(!1), [n, i] = t(), [r, p] = t(), [m, a] = t(), [h, f] = t(), S = h ?? (r ? g(r, v) : void 0), C = (e) => {
+    e && x(l), s(e);
+  }, T = (e) => {
+    i(e.value), a(e.label);
+  }, F = d((e) => {
+    i(e), a(void 0);
+  }, []), L = () => {
+    p(n), f(m), o?.(n), c && s(!1);
+  }, O = d(() => s(!1), []), u = d(() => {
+    i(void 0), p(void 0), a(void 0), f(void 0), o?.();
+  }, [o]), P = () => {
+    u(), c && s(!1);
+  };
+  return A({
+    id: l,
+    onClose: O,
+    onReset: u
+  }), {
+    id: l,
+    appliedLabel: S,
+    isOpen: b,
+    selectedTime: n,
     selectedPresetLabel: m,
-    handleApply: P,
+    handleApply: L,
     handleOpenChange: C,
     handleSelectPreset: T,
-    handleSelectCustom: O,
-    handleReset: S
+    handleSelectCustom: F,
+    handleReset: P
   };
 };
 export {