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

package/dist/components/PhoneNumberInput/components/index.js

@@ -1,5 +1,5 @@
-import { t } from "../../../FlagSelectorList-BoYG-_It.js";
-import { t as p } from "../../../Wrapper-XeeD3av7.js";
+import { t } from "../../../FlagSelectorList-CkTR3j6O.js";
+import { t as p } from "../../../Wrapper-DP6Sxngx.js";
 export {
   t as FlagSelectorList,
   p as Wrapper

package/dist/components/PieChart/PieChart.js

@@ -1,51 +1,52 @@
-import { a as $, r as D, t as v } from "../../dist-AihTpWdF.js";
-import { useMemo as i } from "react";
-import { jsx as y } from "react/jsx-runtime";
-$.register(D);
-var T = ({ values: p, colors: x = ["#525252", "#00D492"], borderColors: h = ["#FFFFFF", "#FFFFFF"], borderWidth: m = 0, cutoutPercentage: l = 80, title: n, subtitle: s, titleFontSize: a = 16, subtitleFontSize: o = 14, titleColor: g = "#111827", subtitleColor: c = "#6B7280", titleFontWeight: u = "bold", subtitleFontWeight: w = "normal", redraw: F = !0 }) => /* @__PURE__ */ y(v, {
-  data: i(() => ({ datasets: [{
-    data: p,
-    backgroundColor: x,
-    borderWidth: m,
-    borderColor: h
+import { i as e } from "../../utils-Cx-WzRZF.js";
+import { a as v, r as C, t as D } from "../../dist-AihTpWdF.js";
+import { useMemo as d } from "react";
+import { jsx as A } from "react/jsx-runtime";
+v.register(C);
+var E = ({ values: c, colors: m = [e("--color-neutral-600"), e("--color-emerald-400")], borderColors: p = [e("--color-white"), e("--color-white")], borderWidth: h = 0, cutoutPercentage: x = 80, title: a, subtitle: s, titleFontSize: n = 16, subtitleFontSize: l = 14, titleColor: g = e("--color-gray-900"), subtitleColor: w = e("--color-gray-500"), titleFontWeight: u = "bold", subtitleFontWeight: y = "normal", redraw: $ = !0 }) => /* @__PURE__ */ A(D, {
+  data: d(() => ({ datasets: [{
+    data: c,
+    backgroundColor: m,
+    borderWidth: h,
+    borderColor: p
   }] }), [
+    p,
     h,
     m,
-    x,
-    p
+    c
   ]),
-  options: i(() => ({
+  options: d(() => ({
     plugins: { legend: { display: !1 } },
-    cutout: `${l}%`,
+    cutout: `${x}%`,
     hover: { mode: null }
-  }), [l]),
-  plugins: i(() => {
-    const f = [];
-    return n && f.push({
+  }), [x]),
+  plugins: d(() => {
+    const t = [];
+    return a && t.push({
       id: "titleCenter",
-      beforeDraw(r) {
-        const e = r.ctx, t = r.width, d = r.height;
-        e.restore(), e.font = `${u} ${a}px sans-serif`, e.fillStyle = g, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, t / 2, d / 2 - (s ? a / 2 : 0)), e.save();
+      beforeDraw(o) {
+        const r = o.ctx, f = o.width, i = o.height;
+        r.restore(), r.font = `${u} ${n}px sans-serif`, r.fillStyle = g, r.textAlign = "center", r.textBaseline = "middle", r.fillText(a, f / 2, i / 2 - (s ? n / 2 : 0)), r.save();
       }
-    }), s && f.push({
+    }), s && t.push({
       id: "subtitleCenter",
-      beforeDraw(r) {
-        const e = r.ctx, t = r.width, d = r.height;
-        e.restore(), e.font = `${w} ${o}px sans-serif`, e.fillStyle = c, e.fillText(s, t / 2, d / 2 + o / 2), e.save();
+      beforeDraw(o) {
+        const r = o.ctx, f = o.width, i = o.height;
+        r.restore(), r.font = `${y} ${l}px sans-serif`, r.fillStyle = w, r.fillText(s, f / 2, i / 2 + l / 2), r.save();
       }
-    }), f;
+    }), t;
   }, [
     s,
-    c,
-    o,
     w,
-    n,
-    g,
+    l,
+    y,
     a,
+    g,
+    n,
     u
   ]),
-  redraw: F
+  redraw: $
 });
 export {
-  T as PieChart
+  E as PieChart
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,32 +1,38 @@
-import { t as n } from "../../utils-Cx-WzRZF.js";
-import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
-import { jsx as s, jsxs as i } from "react/jsx-runtime";
-var w = ({ className: l, fillClassName: r, leftContent: a, percent: c, rightContent: e, status: m, theme: d, trackClassName: t }) => {
-  const h = Math.min(Math.max(c, 0), 100), o = a || e;
+import { t as p } from "../../dist-DX0sBG3Q.js";
+import { t as v } from "../../utils-Cx-WzRZF.js";
+import { progressBarFillVariants as x, progressBarTrackVariants as f } from "./ProgressBar.variants.js";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+var b = ({ ariaLabel: m, className: o, fillClassName: l, leftContent: r, percent: d, rightContent: e, status: s, theme: t, trackClassName: n }) => {
+  const c = Math.min(Math.max(d, 0), 100), h = r || e;
   return /* @__PURE__ */ i("div", {
-    className: n("flex flex-col gap-1 w-full", l),
-    "data-theme": d,
-    children: [o && /* @__PURE__ */ i("div", {
+    className: v("flex flex-col gap-1 w-full", o),
+    "data-theme": t,
+    children: [h && /* @__PURE__ */ i("div", {
       className: "flex items-center justify-between",
-      children: [a && /* @__PURE__ */ s("div", {
+      children: [r && /* @__PURE__ */ a("div", {
         className: "overflow-hidden text-ellipsis whitespace-nowrap",
-        children: a
-      }), e && /* @__PURE__ */ s("div", {
+        children: r
+      }), e && /* @__PURE__ */ a("div", {
         className: "text-right shrink-0",
         children: e
       })]
-    }), /* @__PURE__ */ s("div", {
-      className: x({ className: t }),
-      children: /* @__PURE__ */ s("div", {
-        className: p({
-          status: r ? null : m,
-          className: r
+    }), /* @__PURE__ */ i("div", {
+      className: f({ className: n }),
+      role: "progressbar",
+      "aria-label": m,
+      "aria-valuenow": c,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: [/* @__PURE__ */ a("div", {
+        className: x({
+          status: l ? null : s,
+          className: l
         }),
-        style: { width: `${h}%` }
-      })
+        style: { width: `${c}%` }
+      }), s && /* @__PURE__ */ a(p, { children: s })]
     })]
   });
 };
 export {
-  w as ProgressBar
+  b as ProgressBar
 };

package/dist/components/Radio/Radio.js

@@ -1,53 +1,51 @@
 import { t as a } from "../../utils-Cx-WzRZF.js";
-import { Typography as c } from "../Typography/Typography.js";
-import { labelRadioVariants as p, radioVariants as V, wrapperRadioVariants as j } from "./Radio.variants.js";
-import { forwardRef as w, useCallback as F, useId as $ } from "react";
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-var v = w(({ checked: l = !1, className: f, defaultChecked: o, disabled: e, label: N, labelTextClassName: h, description: r, descriptionClassName: x, name: m, theme: R, value: n, wrapperClassName: u, onChange: t }, y) => {
-  const i = `${$()}-${m}`, b = F((g) => {
-    t?.(g);
-  }, [t]);
-  return /* @__PURE__ */ d("label", {
-    htmlFor: i,
-    className: a(j({
-      className: u,
+import { Typography as t } from "../Typography/Typography.js";
+import { labelRadioVariants as p, radioVariants as u, wrapperRadioVariants as V } from "./Radio.variants.js";
+import { forwardRef as b, useId as j } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var w = b(({ checked: o = !1, className: d, defaultChecked: l, disabled: e, label: f, labelTextClassName: N, description: r, descriptionClassName: h, name: m, theme: x, value: i, wrapperClassName: R, onChange: y }, g) => {
+  const n = `${j()}-${m}`;
+  return /* @__PURE__ */ c("label", {
+    htmlFor: n,
+    className: a(V({
+      className: R,
       disabled: e || !1
     })),
-    "data-theme": R,
+    "data-theme": x,
     children: [
       /* @__PURE__ */ s("input", {
-        ref: y,
-        id: i,
+        ref: g,
+        id: n,
         type: "radio",
         name: m,
-        value: n,
-        checked: l,
-        defaultChecked: o,
+        value: i,
+        checked: o,
+        defaultChecked: l,
         className: "hidden peer",
-        onChange: () => b(n),
+        onChange: () => y?.(i),
         disabled: e
       }),
-      /* @__PURE__ */ s("span", { className: a(V({
-        className: f,
+      /* @__PURE__ */ s("span", { className: a(u({
+        className: d,
         disabled: e || !1,
-        checked: l || o || !1
+        checked: o || l || !1
       })) }),
-      /* @__PURE__ */ d("div", {
+      /* @__PURE__ */ c("div", {
         className: a(r && "flex flex-col gap-1"),
-        children: [/* @__PURE__ */ s(c, {
+        children: [/* @__PURE__ */ s(t, {
           component: "span",
-          className: a(p({ className: h })),
-          children: N
-        }), r && /* @__PURE__ */ s(c, {
+          className: a(p({ className: N })),
+          children: f
+        }), r && /* @__PURE__ */ s(t, {
           component: "span",
-          className: a(p({ className: x })),
+          className: a(p({ className: h })),
           children: r
         })]
       })
     ]
   });
 });
-v.displayName = "KonstructRadio";
+w.displayName = "KonstructRadio";
 export {
-  v as Radio
+  w as Radio
 };

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -1,28 +1,28 @@
-import { t } from "../../utils-Cx-WzRZF.js";
+import { t as e } from "../../utils-Cx-WzRZF.js";
 import { RadioCard as C } from "../RadioCard/RadioCard.js";
 import { radioCardGroupVariants as N } from "./RadioCardGroup.variants.js";
-import { useCallback as S, useState as k } from "react";
-import { jsx as a } from "react/jsx-runtime";
-var g = ({ className: o, defaultChecked: m, direction: s, name: d, options: c, theme: i, wrapperClassName: p, onValueChange: e }) => {
-  const [n, f] = k(m), l = S((r) => {
-    f(r), e?.(r);
-  }, [e]);
-  return /* @__PURE__ */ a("div", {
-    className: t(N({
-      className: p,
-      direction: s
+import { useState as S } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var k = ({ className: t, defaultChecked: a, direction: m, name: d, options: s, theme: c, wrapperClassName: i, onValueChange: n }) => {
+  const [p, f] = S(a), h = (r) => {
+    f(r), n?.(r);
+  };
+  return /* @__PURE__ */ o("div", {
+    className: e(N({
+      className: i,
+      direction: m
     })),
-    "data-theme": i,
-    children: c.map(({ value: r, ...h }) => /* @__PURE__ */ a(C, {
+    "data-theme": c,
+    children: s.map(({ value: r, ...l }) => /* @__PURE__ */ o(C, {
       value: r,
       name: d,
-      className: t(o),
-      checked: n === r,
-      onChange: () => l(r),
-      ...h
+      className: e(t),
+      checked: p === r,
+      onChange: () => h(r),
+      ...l
     }, r))
   });
 };
 export {
-  g as RadioCardGroup
+  k as RadioCardGroup
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,29 +1,29 @@
-import { t as G } from "../../dist-DqKFpce5.js";
-import { t as s } from "../../utils-Cx-WzRZF.js";
-import { Radio as R } from "../Radio/Radio.js";
-import { radioGroupVariants as b } from "./RadioGroup.variants.js";
-import { useCallback as j, useState as I } from "react";
-import { jsx as m } from "react/jsx-runtime";
-var D = ({ asChild: a, className: c, defaultChecked: i, direction: n, name: d, options: p, theme: l, value: e, wrapperClassName: f, onValueChange: r }) => {
-  const S = a ? G : "div", o = e !== void 0, [h, C] = I(() => i), N = o ? e : h, k = j((t) => {
-    o || C(t), r?.(t);
-  }, [o, r]);
-  return /* @__PURE__ */ m(S, {
-    className: s(b({
-      className: f,
-      direction: n
+import { t as R } from "../../dist-xCbHbMLA.js";
+import { t as r } from "../../utils-Cx-WzRZF.js";
+import { Radio as g } from "../Radio/Radio.js";
+import { radioGroupVariants as j } from "./RadioGroup.variants.js";
+import { useState as k } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var B = ({ asChild: m, className: n, defaultChecked: a, direction: c, name: i, options: d, theme: p, value: t, wrapperClassName: l, onValueChange: f }) => {
+  const h = m ? R : "div", e = t !== void 0, [S, C] = k(() => a), N = e ? t : S, x = (o) => {
+    e || C(o), f?.(o);
+  };
+  return /* @__PURE__ */ s(h, {
+    className: r(j({
+      className: l,
+      direction: c
     })),
-    "data-theme": l,
-    children: p.map(({ value: t, ...x }) => /* @__PURE__ */ m(R, {
-      value: t,
-      name: d,
-      className: s(c),
-      checked: N === t,
-      onChange: () => k(t),
-      ...x
-    }, t))
+    "data-theme": p,
+    children: d.map(({ value: o, ...G }) => /* @__PURE__ */ s(g, {
+      value: o,
+      name: i,
+      className: r(n),
+      checked: N === o,
+      onChange: () => x(o),
+      ...G
+    }, o))
   });
 };
 export {
-  D as RadioGroup
+  B as RadioGroup
 };

package/dist/components/Range/Range.js

@@ -1,21 +1,23 @@
 import { t as e } from "../../utils-Cx-WzRZF.js";
-import { i as v, n as V, r as i, t as S } from "../../dist-CT6d9xe7.js";
-import { rangeOutsideVariants as R, rangeVariants as j, thumbVariants as c, trackVariants as b } from "./Range.variants.js";
-import { forwardRef as k, useCallback as w, useEffect as y, useImperativeHandle as C, useRef as T, useState as E } from "react";
+import { i as v, n as V, r as i, t as S } from "../../dist-DDck_2lb.js";
+import { rangeOutsideVariants as R, rangeVariants as j, thumbVariants as c, trackVariants as w } from "./Range.variants.js";
+import { forwardRef as y, useEffect as b, useImperativeHandle as k, useRef as C, useState as T } from "react";
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-var A = k(({ label: l, labelWrapperClassName: u, defaultValue: m = [0, 100], name: d, theme: f, size: n, showValue: o, ...h }, p) => {
-  const r = T(null), [t, x] = E(m);
-  C(p, () => r.current, [r]), y(() => {
+var q = y(({ label: n, labelWrapperClassName: m, defaultValue: u = [0, 100], name: d, theme: f, size: l, showValue: o, ...h }, p) => {
+  const r = C(null), [t, x] = T(u);
+  k(p, () => r.current, [r]), b(() => {
     r.current && (r.current.value = `[${t.toString()}]`);
   }, [t]);
-  const N = w((g) => x(g), []);
+  const N = (g) => {
+    x(g);
+  };
   return /* @__PURE__ */ s("div", {
     className: "w-full relative flex flex-col gap-3",
     "data-theme": f,
     children: [
       /* @__PURE__ */ s("div", {
-        className: e("flex items-center", l ? "justify-between" : "justify-end", u),
-        children: [l ? /* @__PURE__ */ a("label", { children: l }) : null, o ? /* @__PURE__ */ s("span", {
+        className: e("flex items-center", n ? "justify-between" : "justify-end", m),
+        children: [n ? /* @__PURE__ */ a("label", { children: n }) : null, o ? /* @__PURE__ */ s("span", {
           className: "text-xs",
           children: [
             t[0],
@@ -37,16 +39,16 @@ var A = k(({ label: l, labelWrapperClassName: u, defaultValue: m = [0, 100], nam
         ...h,
         children: [
           /* @__PURE__ */ a(v, {
-            className: e(b({ size: n })),
+            className: e(w({ size: l })),
             children: /* @__PURE__ */ a(V, { className: e(R()) })
           }),
-          /* @__PURE__ */ a(i, { className: e(c({ size: n })) }),
-          /* @__PURE__ */ a(i, { className: e(c({ size: n })) })
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) }),
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) })
         ]
       })
     ]
   });
 });
 export {
-  A as Range
+  q as Range
 };

package/dist/components/Select/Select.js

@@ -1,7 +1,7 @@
 import { t as a } from "../../utils-Cx-WzRZF.js";
-import { t as h } from "../../Wrapper-DNEn4fef.js";
+import { t as h } from "../../Wrapper-R8fik3ah.js";
 import { SelectProvider as v } from "./contexts/select.provider.js";
-import { n as N } from "../../AdditionalOptions-Cj29eeMF.js";
+import { n as N } from "../../AdditionalOptions-D0BAS2HG.js";
 import { forwardRef as g, useMemo as j } from "react";
 import { jsx as r, jsxs as k } from "react/jsx-runtime";
 var R = g(({ error: e, errorClassName: i, helperText: l, helperTextClassName: d, highlightSearch: p, mainWrapperClassName: f, name: s, value: n, options: t, onChange: c, onBlur: m, ...o }, x) => /* @__PURE__ */ r(v, {

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../AdditionalOptions-Cj29eeMF.js";
+import { t } from "../../../../AdditionalOptions-D0BAS2HG.js";
 export {
   t as AdditionalOptions
 };

package/dist/components/Select/components/List/List.js

@@ -1,9 +1,9 @@
 import { o as K } from "../../../../rolldown-runtime-Ck3dxwZt.js";
 import { t as n } from "../../../../utils-Cx-WzRZF.js";
-import { t as Q } from "../../../../Loading-fD0Xiyeq.js";
+import { t as Q } from "../../../../Loading-DUh9PMJN.js";
 import { t as W } from "../../../../debounce-C5Ycjilj.js";
 import { useSelectContext as Y } from "../../contexts/select.hook.js";
-import { n as $, t as R } from "../../../../AdditionalOptions-Cj29eeMF.js";
+import { n as $, t as R } from "../../../../AdditionalOptions-D0BAS2HG.js";
 import { listGroupLabelVariants as ee, listVariants as te } from "./List.variants.js";
 import "../../constants/pagination.js";
 import "../../constants/list.js";

package/dist/components/Select/components/ListItem/ListItem.js

@@ -1,64 +1,64 @@
-import { t as s } from "../../../../utils-Cx-WzRZF.js";
-import { Typography as y } from "../../../Typography/Typography.js";
+import { t as l } from "../../../../utils-Cx-WzRZF.js";
+import { Typography as x } from "../../../Typography/Typography.js";
 import { useSelectContext as I } from "../../contexts/select.hook.js";
-import { listItemVariants as L } from "./ListItem.variants.js";
-import { useCallback as d, useRef as V } from "react";
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-function j(c, r) {
+import { listItemVariants as C } from "./ListItem.variants.js";
+import { useRef as L } from "react";
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+function V(c, r) {
   const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
   return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n("mark", {
     className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
     children: a
   }, t) : /* @__PURE__ */ n("span", { children: a }, t));
 }
-var K = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
-  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = I(), b = V(null), f = d((e) => {
-    x(e.value, o), g(!1);
-  }, [x, g]), N = d((e, l) => {
-    e.key === "Enter" && (e.stopPropagation(), f(l));
-  }, [f]), w = d(({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
-    if (c) return /* @__PURE__ */ n(y, {
+var D = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
+  const { searchTerm: f, highlightSearchEnabled: g, setValue: p, toggleOpen: y } = I(), k = L(null), d = (e) => {
+    p(e.value, o), y(!1);
+  }, N = (e, s) => {
+    e.key === "Enter" && (e.stopPropagation(), d(s));
+  }, b = ({ label: e, rightComponent: s, subLabel: u, rightComponentClassName: w }) => {
+    if (c) return /* @__PURE__ */ n(x, {
       variant: "body2",
       className: "text-zinc-800 dark:text-metal-50 italic",
       children: e
     });
     if (typeof e != "string") return e;
-    const k = h && m.length > 0 ? j(e, m) : [e];
-    return /* @__PURE__ */ u(y, {
+    const h = g && f.length > 0 ? V(e, f) : [e];
+    return /* @__PURE__ */ m(x, {
       variant: "body2",
       className: "text-zinc-700 dark:text-metal-50 font-medium",
-      children: [l ? /* @__PURE__ */ u("span", {
-        className: s("flex gap-2 items-center", C),
+      children: [s ? /* @__PURE__ */ m("span", {
+        className: l("flex gap-2 items-center", w),
         children: [
-          k,
+          h,
           " ",
-          l
+          s
         ]
-      }) : k, p ? /* @__PURE__ */ n("span", {
-        className: s("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
-        children: p
+      }) : h, u ? /* @__PURE__ */ n("span", {
+        className: l("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
+        children: u
       }) : null]
     });
-  }, [h, m]);
-  return /* @__PURE__ */ u("li", {
-    ref: b,
+  };
+  return /* @__PURE__ */ m("li", {
+    ref: k,
     role: "option",
     "data-action": "false",
-    className: s(L({ className: i })),
+    className: l(C({ className: i })),
     tabIndex: 0,
     onClick: (e) => {
-      r && (f(t), e.stopPropagation());
+      r && (d(t), e.stopPropagation());
     },
     onKeyDown: (e) => N(e, t),
     children: [t.leftIcon ? /* @__PURE__ */ n("span", {
-      className: s("w-4 h-4 flex justify-center", {
+      className: l("w-4 h-4 flex justify-center", {
         "items-center": !t.subLabel,
         "items-baseline -tranmetal-y-2": !!t.subLabel
       }, t.leftIconClassName),
       children: t.leftIcon
-    }) : null, w(t)]
+    }) : null, b(t)]
   });
 };
 export {
-  K as ListItem
+  D as ListItem
 };

package/dist/components/Select/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../Wrapper-DNEn4fef.js";
+import { t as p } from "../../../Wrapper-R8fik3ah.js";
 export {
   p as Wrapper
 };

package/dist/components/Select/components/index.js

@@ -1,5 +1,5 @@
-import { t as o } from "../../../Wrapper-DNEn4fef.js";
-import { t as i } from "../../../AdditionalOptions-Cj29eeMF.js";
+import { t as o } from "../../../Wrapper-R8fik3ah.js";
+import { t as i } from "../../../AdditionalOptions-D0BAS2HG.js";
 import { EmptyList as p } from "./EmptyList.js";
 import { List as a } from "./List/List.js";
 export {

package/dist/components/Select/hooks/useSelect.js

@@ -1,65 +1,54 @@
-import { useSelectContext as b } from "../contexts/select.hook.js";
-import { useCallback as w, useEffect as c, useRef as m } from "react";
-var h = ({ ulRef: f, inputRef: r, disabled: E, internalValue: u, onBlur: g }) => {
-  const t = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = b();
-  return c(() => {
-    const e = new AbortController(), s = (l) => {
-      l.key === "Escape" && n(!1);
-    }, o = (l) => {
-      t.current?.contains(l.target) || n(!1);
+import { useClickOutside as m } from "../../../hooks/useClickOutside.js";
+import { useSelectContext as E } from "../contexts/select.hook.js";
+import { useCallback as b, useEffect as l, useRef as g } from "react";
+var h = ({ inputRef: r, searchInputRef: v, internalValue: c, onBlur: i }) => {
+  const t = g(null), d = g(null), { value: o, setSearchTerm: f, setCanFilter: u, toggleOpen: n } = E();
+  return m(t, b(() => {
+    n(!1);
+  }, [n])), l(() => {
+    const e = new AbortController(), s = (a) => {
+      a.key === "Escape" && n(!1);
     };
-    return document.addEventListener("keydown", s, { signal: e.signal }), document.addEventListener("mousedown", o, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+    return document.addEventListener("keydown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
       document.hidden && n(!1);
-    }, { signal: e.signal }), a.current?.addEventListener("focusin", (l) => {
-      !E && l.target?.matches(":focus-visible") && n(!0);
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [n, t]), c(() => {
-    const e = new AbortController();
-    return a.current?.addEventListener("keydown", (s) => {
-      if (s.key === "ArrowDown") {
-        const o = f.current?.querySelector("li");
-        o && o.focus();
-      }
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [a, f]), c(() => {
+  }, [n, t]), l(() => {
     const e = new AbortController();
     return r?.current?.addEventListener("focusin", () => {
-      v(u?.value ?? ""), d(!1);
+      f(c?.value ?? ""), u(!1);
     }, { signal: e.signal }), r?.current?.addEventListener("focusout", () => {
-      d(!0);
-    }, { signal: e.signal }), a.current?.addEventListener("focus", () => {
-      d(!1);
+      u(!0);
+    }, { signal: e.signal }), d.current?.addEventListener("focus", () => {
+      u(!1);
     }, { signal: e.signal }), t.current?.addEventListener("focusout", (s) => {
       t.current?.contains(s.relatedTarget) || n(!1);
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [i]), c(() => {
-    r?.current && (r.current.value = i && u?.value || "");
-  }, [u, i]), c(() => {
+  }, [o]), l(() => {
+    r?.current && (r.current.value = o && c?.value || "");
+  }, [c, o]), l(() => {
     const e = new AbortController();
     return t.current?.addEventListener("focusout", (s) => {
-      const o = s.relatedTarget;
-      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
+      const a = s.relatedTarget;
+      (!a || !t.current?.contains(a)) && (r?.current?.value || i?.());
     }), () => {
       e.abort();
     };
   }, [
     n,
     t,
-    v,
-    g,
-    i
+    f,
+    i,
+    o
   ]), {
     wrapperRef: t,
-    wrapperInputRef: a,
-    handleOpen: w(() => {
-      n(!0), requestAnimationFrame(() => r?.current?.focus());
-    }, [r, n])
+    wrapperInputRef: d,
+    handleOpen: () => {
+      n(!0), requestAnimationFrame(() => v?.current?.focus());
+    }
   };
 };
 export {