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

package/dist/components/Datepicker/DatePicker.js

@@ -1,7 +1,7 @@
 import { t } from "../../utils-Cx-WzRZF.js";
 import { t as h } from "../../chevron-left-DxGDBBKA.js";
 import { t as f } from "../../chevron-right-CDwgDdp-.js";
-import { t as p } from "../../DayPicker-CwO8Zff5.js";
+import { t as p } from "../../DayPicker-kweJz134.js";
 import { datePickerVariants as k } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
 import { useCallback as g, useState as w } from "react";
@@ -29,12 +29,11 @@ var y = ({ className: l, showOutsideDays: n = !0, animate: d = !0, arrowClassNam
       nav: t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", s),
       outside: "text-slate-400 dark:text-metal-500",
       selected: t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "[&>button]:transition-all", "[&>button]:duration-300", "[&>button]:rounded-full", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900"),
-      table: "w-full",
       weekdays: "text-slate-500 dark:text-metal-300",
       weeks: t("text-slate-700", "[&>tr>td]:border-transparent", "[&>tr>td]:border-r-[8px]", "[&>tr>td]:last:border-r-0", "dark:text-white"),
       weekday: "font-semibold text-sm uppercase text-sm",
       today: "text-blue-600 dark:text-aurora-500 data-[selected=true]:text-white",
-      month_grid: t("[&>thead]:table-header-group", "[&>thead]:relative", "[&>thead]:after:block", '[&>thead]:after:content-[" "]', "[&>thead]:after:h-4")
+      month_grid: t("w-full", "[&>thead]:table-header-group", "[&>thead]:relative", "[&>thead]:after:block", '[&>thead]:after:content-[" "]', "[&>thead]:after:h-4")
     },
     components: { Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(h, {
       className: t(e),

package/dist/components/Drawer/Drawer.js

@@ -1,6 +1,6 @@
 "use client";
-import { t as z } from "../../x-CESTrenk.js";
-import { t as B } from "../../dist-C6Cif8-U.js";
+import { t as z } from "../../x-BI9jmc7e.js";
+import { t as B } from "../../dist-CTvBzxW8.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";

package/dist/components/DropdownButton/DropdownButton.js

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

package/dist/components/Filter/Filter.js

@@ -9,11 +9,12 @@ 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 { 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 = "civo", children: i, closeOnApply: m = !0 }) => /* @__PURE__ */ e(a, {
   closeOnApply: m,
+  theme: r,
   children: /* @__PURE__ */ e("div", {
-    className: l(p({ className: r })),
-    "data-theme": o,
+    className: l(p({ className: o })),
+    "data-theme": r,
     children: i
   })
 });

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

@@ -1,19 +1,21 @@
-import { useFilterContext as L } from "../../contexts/filter.hook.js";
+import { useFilterContext as w } 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([]);
+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 && d(!1);
+      t.detail !== a && r(!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) => {
+  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, {
       ...e,
       isApplied: !1
@@ -21,47 +23,44 @@ var B = ({ onApply: l, options: c = [] }) => {
       ...n,
       isRemoved: !0
     } : n));
-  }, [i, s]), R = r(() => {
-    i([]), l?.([]), o && d(!1);
-  }, [o, l]), A = r(() => {
+  }, [i, s]), E = d(() => {
+    i([]), l?.([]), o && r(!1);
+  }, [o, l]), A = d(() => {
     const e = s?.filter((t) => !t.isRemoved).map((t) => ({
       ...t,
       isApplied: !0
     }));
-    i(e), l?.(e.map(({ isApplied: t, isRemoved: n, ...w }) => w)), o && d(!1);
+    i(e), l?.(e.map(({ isApplied: t, isRemoved: n, ...b }) => b)), o && r(!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) => {
+  ]), 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(), t = (n) => {
-      u.current?.contains(n.target) || f();
-    };
-    return document.addEventListener("mousedown", t, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+    const e = new AbortController();
+    return document.addEventListener("visibilitychange", () => {
       document.hidden && f();
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [f, u]), {
-    isOpen: g,
-    isAllSelected: S,
+  }, [f]), {
+    isOpen: O,
+    isAllSelected: R,
     selectedCount: C,
     selectedOptions: s,
-    wrapperRef: u,
     handleApplyOptions: A,
-    handleOpen: h,
-    handleResetOptions: R,
-    handleSelectAll: b,
-    handleSelectOption: E
+    handleOpenChange: g,
+    handleResetOptions: E,
+    handleSelectAll: S,
+    handleSelectOption: h
   };
 };
 export {
-  B as useBadgeMultiSelect
+  _ as useBadgeMultiSelect
 };

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-DzAx7n67.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
 };

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

@@ -1,58 +1,50 @@
-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 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), {
     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);
+  }), [m, c]), h = o((e) => {
+    e && y(n), s(e);
+  }, [n]), D = o(() => {
+    l(i), t?.(i), a && s(!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(() => {
+    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(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?.();
+    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();
     };
-  }, [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();
+  }, [n, t]), p(() => {
+    const e = new AbortController();
+    return document.addEventListener("visibilitychange", () => {
+      document.hidden && f();
     }, { 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
+  }, [f]), {
+    id: n,
+    appliedDay: g,
+    isOpen: v,
+    selectedDay: i,
+    handleApply: D,
+    handleOpenChange: h,
+    handleSelect: E,
+    handleReset: b
   };
 };
 export {
-  A as useDateFilterDropdown
+  k as useDateFilterDropdown
 };

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,62 @@
 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(() => {
+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 = (s) => s.toLocaleDateString(D(v), {
+    const e = (c) => c.toLocaleDateString(S(v), {
       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(() => {
+  }, [n]), E = a((e) => {
+    e && L(o), r(e);
+  }, [o]), C = a(() => {
     const e = {
-      from: l?.from,
-      to: l?.to
+      from: i?.from,
+      to: i?.to
     };
-    f(e), t?.(e), i && r(!1);
+    d(e), t?.(e), s && r(!1);
   }, [
-    i,
+    s,
     t,
-    l
+    i
   ]), b = a((e) => {
-    c({
+    l({
       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(() => {
+  }, []), 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, (s) => {
-      s.detail !== o && r(!1);
+    return document.addEventListener(g.OPEN, (c) => {
+      c.detail !== o && r(!1);
     }, { signal: e.signal }), document.addEventListener(g.RESET, () => {
-      c(void 0), f(void 0), t?.();
+      l(void 0), d(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", () => {
+  }, [o, t]), u(() => {
+    const e = new AbortController();
+    return document.addEventListener("visibilitychange", () => {
       document.hidden && m();
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [m, d]), {
+  }, [m]), {
     id: o,
-    appliedRange: E,
-    isOpen: R,
-    selectedRange: l,
-    wrapperRef: d,
-    handleApply: O,
-    handleOpen: C,
+    appliedRange: R,
+    isOpen: p,
+    selectedRange: i,
+    handleApply: C,
+    handleOpenChange: E,
     handleRangeChange: b,
-    handleReset: L
+    handleReset: O
   };
 };
 export {
-  P as useDateRangeFilterDropdown
+  k as useDateRangeFilterDropdown
 };