@konstructio/ui 0.1.6 → 0.1.8

package/dist/components/Sheet/components/SheetStep/SheetStep.js

@@ -1,15 +1,15 @@
 "use client";
-import { t as C } from "../../../../utils-DnIJruo0.js";
-import { useEffect as O, useLayoutEffect as L, useRef as c } from "react";
-import { jsx as j } from "react/jsx-runtime";
-import { animate as y, motion as G, useMotionValue as M } from "motion/react";
-var h = "100%", u = {
+import { t as L } from "../../../../utils-DnIJruo0.js";
+import { forwardRef as j, useCallback as G, useEffect as M, useLayoutEffect as V, useRef as u } from "react";
+import { jsx as W } from "react/jsx-runtime";
+import { animate as h, motion as D, useMotionValue as K } from "motion/react";
+var E = "100%", l = {
   type: "spring",
   stiffness: 380,
   damping: 38
-}, E = { duration: 0 }, V = 0.05, l = (t) => typeof t == "number" ? t : t.direction, P = "-30%", W = {
-  enter: (t) => l(t) > 0 ? {
-    x: h,
+}, R = { duration: 0 }, X = 0.05, d = (t) => typeof t == "number" ? t : t.direction, P = "-30%", q = {
+  enter: (t) => d(t) > 0 ? {
+    x: E,
     opacity: 1,
     zIndex: 1
   } : {
@@ -20,75 +20,77 @@ var h = "100%", u = {
   center: (t) => ({
     x: 0,
     opacity: 1,
-    zIndex: l(t) > 0 ? 1 : 0
+    zIndex: d(t) > 0 ? 1 : 0
   }),
   exit: (t) => typeof t == "object" && t.instant ? {
     opacity: 0,
-    transition: E
-  } : l(t) > 0 ? {
+    transition: R
+  } : d(t) > 0 ? {
     x: P,
     opacity: 1,
     zIndex: 0
   } : {
-    x: h,
+    x: E,
     opacity: 1,
     zIndex: 1
   }
-}, D = ({ step: t, direction: R, animated: s, canSwipeBack: r, onMount: I, commitSignal: f, isArmed: S, onBackStart: m, onBackMove: A, onBackEnd: T, onBackCommit: g, onBackCancel: N, children: _ }) => {
-  const n = M(0), a = c(null), o = c(!1), d = c(f);
-  L(() => {
-    I(a.current?.getBoundingClientRect().height ?? 0);
+}, w = j(({ step: t, direction: m, animated: a, canSwipeBack: o, onMount: I, commitSignal: f, isArmed: S, onBackStart: A, onBackMove: T, onBackEnd: g, onBackCommit: N, onBackCancel: _, children: b }, s) => {
+  const r = K(0), c = u(null), i = u(!1), p = u(f), z = G((e) => {
+    c.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
+  }, [s]);
+  V(() => {
+    I(c.current?.getBoundingClientRect().height ?? 0);
   }, []);
   const x = () => {
-    const i = n.get();
-    if (typeof i == "string") {
-      const e = a.current?.offsetWidth ?? 0;
-      n.set(parseFloat(i) / 100 * e || 0);
+    const e = r.get();
+    if (typeof e == "string") {
+      const n = c.current?.offsetWidth ?? 0;
+      r.set(parseFloat(e) / 100 * n || 0);
     }
-  }, p = () => {
-    n.stop(), x(), y(n, a.current?.offsetWidth ?? 0, {
-      ...u,
-      onComplete: g
+  }, v = () => {
+    r.stop(), x(), h(r, c.current?.offsetWidth ?? 0, {
+      ...l,
+      onComplete: N
     });
   };
-  O(() => {
-    d.current !== f && (d.current = f, p());
+  M(() => {
+    p.current !== f && (p.current = f, v());
   }, [f]);
-  const b = (i, e) => {
-    o.current = r && S(e), o.current && (n.stop(), x(), m());
-  }, z = (i, e) => {
-    if (!o.current) return;
-    const v = e.offset.x >= 0 ? e.offset.x : e.offset.x * V;
-    n.set(v), A(Math.max(v, 0));
-  }, F = (i, e) => {
-    if (o.current) {
-      if (o.current = !1, T(e) === "back") {
-        p();
+  const C = (e, n) => {
+    i.current = o && S(n), i.current && (r.stop(), x(), A());
+  }, F = (e, n) => {
+    if (!i.current) return;
+    const y = n.offset.x >= 0 ? n.offset.x : n.offset.x * X;
+    r.set(y), T(Math.max(y, 0));
+  }, O = (e, n) => {
+    if (i.current) {
+      if (i.current = !1, g(n) === "back") {
+        v();
         return;
       }
-      y(n, 0, {
-        ...u,
-        onComplete: N
+      h(r, 0, {
+        ...l,
+        onComplete: _
       });
     }
   };
-  return /* @__PURE__ */ j(G.div, {
-    ref: a,
-    custom: R,
-    className: C("relative flex w-full flex-col bg-white dark:bg-metal-800", r && "touch-pan-y"),
-    style: { x: n },
-    variants: s ? W : void 0,
-    initial: s ? "enter" : !1,
+  return /* @__PURE__ */ W(D.div, {
+    ref: z,
+    custom: m,
+    className: L("relative flex w-full flex-col bg-white dark:bg-metal-800", o && "touch-pan-y"),
+    style: { x: r },
+    variants: a ? q : void 0,
+    initial: a ? "enter" : !1,
     animate: "center",
-    exit: s ? "exit" : void 0,
-    transition: s ? u : E,
-    onPanStart: r ? b : void 0,
-    onPan: r ? z : void 0,
-    onPanEnd: r ? F : void 0,
-    children: _
+    exit: a ? "exit" : void 0,
+    transition: a ? l : R,
+    onPanStart: o ? C : void 0,
+    onPan: o ? F : void 0,
+    onPanEnd: o ? O : void 0,
+    children: b
   }, t);
-};
-D.displayName = "KonstructSheetStep";
+});
+w.displayName = "KonstructSheetStep";
 export {
-  D as SheetStep
+  w as SheetStep
 };

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js

@@ -51,7 +51,7 @@ var et = (o) => {
     }), /* @__PURE__ */ t(M, { children: /* @__PURE__ */ s(U, {
       side: "right",
       sideOffset: 12,
-      className: T("z-60 flex w-fit items-center gap-2 rounded px-3 py-2 text-sm shadow-lg whitespace-nowrap", "animate-in fade-in-0", w, y, E),
+      className: T("z-60 flex w-fit items-center gap-2 rounded px-3 py-2 text-sm shadow-lg whitespace-nowrap", "animate-tooltip-pop origin-(--radix-tooltip-content-transform-origin) motion-reduce:animate-none", w, y, E),
       children: [g, /* @__PURE__ */ t(z, { className: O })]
     }) })] })
   }) : n;

package/dist/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.js

@@ -1,21 +1,21 @@
-import { t } from "../../../../utils-DnIJruo0.js";
+import { t as i } from "../../../../utils-DnIJruo0.js";
 import { useStepItemLogic as w } from "../../hooks/useStepItemLogic.js";
 import { stepContentVariants as v, stepDescriptionVariants as C, stepIndicatorVariants as k, stepLabelVariants as g, stepVariants as I } from "../../Stepper.variants.js";
 import { getStepAriaLabel as x } from "../../utils/index.js";
 import { StepConnector as y } from "../StepConnector/StepConnector.js";
-import { t as S } from "../../../../StepIndicatorContent-C6MILk4c.js";
+import { StepIndicatorContent as S } from "../StepIndicatorContent/StepIndicatorContent.js";
 import { memo as K } from "react";
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-var L = ({ classNames: r, clickable: D, icons: m, index: c, isLast: p, showConnector: b, size: n, step: i, variant: o, onClick: V }) => {
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+var L = ({ classNames: r, clickable: D, icons: m, index: c, isLast: p, showConnector: b, size: a, step: t, variant: o, onClick: V }) => {
   const { isClickable: l, isDisabled: h, LabelComponent: s, status: e, handleClick: u, handleKeyDown: f } = w({
     clickable: D,
-    step: i,
+    step: t,
     onClick: V
   });
   return o === "horizontal" ? /* @__PURE__ */ d("div", {
     className: "flex items-center",
     children: [/* @__PURE__ */ d("div", {
-      className: t(I({
+      className: i(I({
         orientation: "horizontal",
         variant: o,
         clickable: l
@@ -26,47 +26,47 @@ var L = ({ classNames: r, clickable: D, icons: m, index: c, isLast: p, showConne
       onKeyDown: f,
       "aria-current": e === "active" ? "step" : void 0,
       ...h && { "aria-disabled": !0 },
-      "aria-label": x(c, i.label, e),
-      children: [/* @__PURE__ */ a("div", {
-        className: t(k({
+      "aria-label": x(c, t.label, e),
+      children: [/* @__PURE__ */ n("div", {
+        className: i(k({
           status: e,
-          size: n
+          size: a
         }), r?.indicator),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ a(S, {
+        children: /* @__PURE__ */ n(S, {
           status: e,
           index: c,
-          size: n,
+          size: a,
           icons: m,
           className: r?.indicatorContent
         })
       }), /* @__PURE__ */ d("div", {
-        className: t(v({ variant: o }), r?.content),
-        children: [i.label && /* @__PURE__ */ a(s, {
-          className: t(g({
+        className: i(v({ variant: o }), r?.content),
+        children: [t.label && /* @__PURE__ */ n(s, {
+          className: i(g({
             status: e,
-            size: n,
+            size: a,
             variant: o
           }), r?.label),
-          children: i.label
-        }), i.description && /* @__PURE__ */ a("span", {
-          className: t(C({
+          children: t.label
+        }), t.description && /* @__PURE__ */ n("span", {
+          className: i(C({
             status: e,
-            size: n,
+            size: a,
             variant: o
           }), r?.description),
-          children: i.description
+          children: t.description
         })]
       })]
-    }), !p && b && /* @__PURE__ */ a("div", {
-      className: t("h-0.5 w-7.5 mx-2 transition-colors duration-200", e === "completed" || e === "active" ? "bg-aurora-500" : e === "error" ? "bg-red-700 dark:bg-red-600" : "bg-slate-300 dark:bg-metal-400", r?.connector),
+    }), !p && b && /* @__PURE__ */ n("div", {
+      className: i("h-0.5 w-7.5 mx-2 transition-colors duration-200", e === "completed" || e === "active" ? "bg-aurora-500" : e === "error" ? "bg-red-700 dark:bg-red-600" : "bg-slate-300 dark:bg-metal-400", r?.connector),
       role: "presentation",
       "aria-hidden": "true"
     })]
   }) : /* @__PURE__ */ d("div", {
     className: "flex flex-1 items-start",
     children: [/* @__PURE__ */ d("div", {
-      className: t(I({
+      className: i(I({
         orientation: "horizontal",
         variant: o,
         clickable: l
@@ -77,44 +77,44 @@ var L = ({ classNames: r, clickable: D, icons: m, index: c, isLast: p, showConne
       onKeyDown: f,
       "aria-current": e === "active" ? "step" : void 0,
       ...h && { "aria-disabled": !0 },
-      "aria-label": x(c, i.label, e),
-      children: [/* @__PURE__ */ a("div", {
-        className: t(k({
+      "aria-label": x(c, t.label, e),
+      children: [/* @__PURE__ */ n("div", {
+        className: i(k({
           status: e,
-          size: n
+          size: a
         }), r?.indicator),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ a(S, {
+        children: /* @__PURE__ */ n(S, {
           status: e,
           index: c,
-          size: n,
+          size: a,
           icons: m,
           className: r?.indicatorContent
         })
       }), /* @__PURE__ */ d("div", {
-        className: t(v({ variant: o }), r?.content),
-        children: [i.label && /* @__PURE__ */ a(s, {
-          className: t(g({
+        className: i(v({ variant: o }), r?.content),
+        children: [t.label && /* @__PURE__ */ n(s, {
+          className: i(g({
             status: e,
-            size: n,
+            size: a,
             variant: o
           }), r?.label),
-          children: i.label
-        }), i.description && /* @__PURE__ */ a("span", {
-          className: t(C({
+          children: t.label
+        }), t.description && /* @__PURE__ */ n("span", {
+          className: i(C({
             status: e,
-            size: n,
+            size: a,
             variant: o
           }), r?.description),
-          children: i.description
+          children: t.description
         })]
       })]
-    }), !p && b && /* @__PURE__ */ a(y, {
+    }), !p && b && /* @__PURE__ */ n(y, {
       orientation: "horizontal",
       status: e,
-      size: n,
+      size: a,
       variant: o,
-      className: t("mt-6.5", r?.connector)
+      className: i("mt-6.5", r?.connector)
     })]
   });
 }, F = K(L);

package/dist/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.js

@@ -1,4 +1,27 @@
-import { t as o } from "../../../../StepIndicatorContent-C6MILk4c.js";
+import { t as m } from "../../../../check-Bekes_eB.js";
+import { ExclamationIcon as p } from "../../../../assets/icons/components/Exclamation.js";
+import { t as d } from "../../../../utils-DnIJruo0.js";
+import { CHECK_ICON_SIZE_MAP as f, ICON_SIZE_MAP as a } from "../../constants/index.js";
+import { memo as h } from "react";
+import { jsx as t } from "react/jsx-runtime";
+var C = ({ className: r, icons: e, index: i, size: o, status: n }) => n === "completed" ? e?.completed ? /* @__PURE__ */ t("span", {
+  className: r,
+  children: e.completed
+}) : /* @__PURE__ */ t(m, {
+  className: d(f[o], r),
+  strokeWidth: 2.5,
+  "aria-hidden": "true"
+}) : n === "error" ? e?.error ? /* @__PURE__ */ t("span", {
+  className: r,
+  children: e.error
+}) : /* @__PURE__ */ t(p, {
+  size: a[o],
+  className: r
+}) : /* @__PURE__ */ t("span", {
+  className: r,
+  "aria-hidden": "true",
+  children: i + 1
+}), S = h(C);
 export {
-  o as StepIndicatorContent
+  S as StepIndicatorContent
 };

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.js

@@ -3,7 +3,7 @@ import { useStepItemLogic as x } from "../../hooks/useStepItemLogic.js";
 import { stepContentVariants as V, stepDescriptionVariants as I, stepIndicatorVariants as S, stepLabelVariants as k, stepVariants as D } from "../../Stepper.variants.js";
 import { getStepAriaLabel as L } from "../../utils/index.js";
 import { StepConnector as g } from "../StepConnector/StepConnector.js";
-import { t as j } from "../../../../StepIndicatorContent-C6MILk4c.js";
+import { StepIndicatorContent as j } from "../StepIndicatorContent/StepIndicatorContent.js";
 import { memo as w } from "react";
 import { jsx as n, jsxs as c } from "react/jsx-runtime";
 var y = ({ classNames: e, clickable: m, icons: p, index: d, isLast: s, showConnector: b, size: o, step: r, variant: i, onClick: f }) => {

package/dist/components/Tabs/Tabs.variants.js

@@ -1,11 +1,11 @@
 import { t } from "../../dist-B9GE4SXf.js";
-var e = t([""], {
+var r = t([""], {
   variants: { variant: {
     horizontal: "",
     vertical: "flex gap-6"
   } },
   defaultVariants: { variant: "horizontal" }
-}), r = t([""], {
+}), e = t([""], {
   variants: { variant: { default: "" } },
   defaultVariants: { variant: "default" }
 }), i = t(["flex"], {
@@ -17,9 +17,6 @@ var e = t([""], {
   defaultVariants: { variant: "default" }
 }), f = t([
   "cursor-pointer",
-  "relative",
-  "tap-target",
-  "touch-hit-area",
   "h-[27px]",
   "w-fit",
   "block",
@@ -66,8 +63,8 @@ var e = t([""], {
   defaultVariants: { variant: "default" }
 });
 export {
-  r as contentVariants,
+  e as contentVariants,
   i as listVariants,
-  e as rootVariants,
+  r as rootVariants,
   f as triggerVariants
 };

package/dist/components/Tabs/components/Trigger.js

@@ -1,19 +1,19 @@
-import { i as t } from "../../../dist-DeWnSzlM.js";
+import { i as o } from "../../../dist-DeWnSzlM.js";
 import { Typography as s } from "../../Typography/Typography.js";
 import { t as n } from "../../../utils-DnIJruo0.js";
 import { triggerVariants as u } from "../Tabs.variants.js";
 import { jsx as i } from "react/jsx-runtime";
-var l = (r) => r === void 0 ? "auto" : r ? "active" : "inactive", m = ({ tab: r, label: o, isActive: a, className: e }) => /* @__PURE__ */ i(t, {
+var l = (r) => r === void 0 ? "auto" : r ? "active" : "inactive", m = ({ tab: r, label: a, isActive: t, className: e }) => /* @__PURE__ */ i(o, {
   value: r,
-  className: "group/tab rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aurora-500 kubefirst:focus-visible:outline-kubefirst-primary",
+  className: "group/tab relative tap-target touch-hit-area rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aurora-500 kubefirst:focus-visible:outline-kubefirst-primary",
   children: /* @__PURE__ */ i(s, {
     variant: "body2",
     component: "span",
     className: n(u({
-      variant: l(a),
+      variant: l(t),
       className: e
     })),
-    children: o
+    children: a
   })
 });
 m.displayName = "KonstructTabsTrigger";

package/dist/components/Tooltip/Tooltip.js

@@ -1,32 +1,32 @@
 import { a as w, i as C, n as b, o as j, r as O, t as P } from "../../dist-DsOk4psA.js";
-import { t } from "../../utils-DnIJruo0.js";
+import { t as e } from "../../utils-DnIJruo0.js";
 import { useState as y } from "react";
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-var k = ({ content: o, children: i, asOverlay: r = !1, disabled: a = !1, overlayClassName: n, overlayLabel: p, wrapperClassName: m, side: d = "top", sideOffset: c = 4, bgClassName: f = "bg-slate-700", arrowClassName: h = "fill-slate-700", textClassName: g = "text-white", className: T, delayDuration: u = 0 }) => {
-  const [x, v] = y(!1), N = r ? /* @__PURE__ */ e("span", {
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+var k = ({ content: t, children: r, asOverlay: s = !1, disabled: a = !1, overlayClassName: n, overlayLabel: p, wrapperClassName: m, side: d = "top", sideOffset: c = 4, bgClassName: f = "bg-slate-700", arrowClassName: h = "fill-slate-700", textClassName: g = "text-white", className: u, delayDuration: x = 0 }) => {
+  const [T, v] = y(!1), N = s ? /* @__PURE__ */ o("span", {
     role: "img",
-    "aria-label": p ?? (typeof o == "string" ? o : void 0),
+    "aria-label": p ?? (typeof t == "string" ? t : void 0),
     hidden: a,
-    className: t("absolute cursor-help", n ?? "inset-0")
-  }) : /* @__PURE__ */ e("span", { children: i }), l = /* @__PURE__ */ e(w, {
-    delayDuration: u,
-    children: /* @__PURE__ */ s(P, {
-      open: !a && x,
+    className: e("absolute cursor-help", n ?? "inset-0")
+  }) : /* @__PURE__ */ o("span", { children: r }), l = /* @__PURE__ */ o(w, {
+    delayDuration: x,
+    children: /* @__PURE__ */ i(P, {
+      open: !a && T,
       onOpenChange: v,
-      children: [/* @__PURE__ */ e(j, {
+      children: [/* @__PURE__ */ o(j, {
         asChild: !0,
         children: N
-      }), /* @__PURE__ */ e(C, { children: /* @__PURE__ */ s(O, {
+      }), /* @__PURE__ */ o(C, { children: /* @__PURE__ */ i(O, {
         side: d,
         sideOffset: c,
-        className: t("rounded px-2 py-1 text-xs shadow-md", "animate-in fade-in-0", f, g, T),
-        children: [o, /* @__PURE__ */ e(b, { className: h })]
+        className: e("rounded px-2 py-1 text-xs shadow-md", "animate-tooltip-pop origin-(--radix-tooltip-content-transform-origin) motion-reduce:animate-none", f, g, u),
+        children: [t, /* @__PURE__ */ o(b, { className: h })]
       }) })]
     })
   });
-  return r ? /* @__PURE__ */ s("div", {
-    className: t("relative", m),
-    children: [i, l]
+  return s ? /* @__PURE__ */ i("div", {
+    className: e("relative", m),
+    children: [r, l]
   }) : l;
 };
 export {

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,43 +1,44 @@
-import { o as U } from "../../../../rolldown-runtime-B28h4lGi.js";
+import { o as K } from "../../../../rolldown-runtime-B28h4lGi.js";
 import { t as X } from "../../../../debounce-DhCY9mXz.js";
-import { Button as x } from "../../../Button/Button.js";
+import { Button as R } from "../../../Button/Button.js";
 import { Filter as n } from "../../../Filter/Filter.js";
-import { resetEvent as Y } from "../../../Filter/events/index.js";
-import { t as Z } from "../../../../Input-CE6J6HIW.js";
+import { resetEvent as Z } from "../../../Filter/events/index.js";
+import { t as C } from "../../../../Input-CE6J6HIW.js";
+import { useMediaQuery as ee } from "../../../../hooks/useMediaQuery.js";
 import { t as d } from "../../../../utils-DnIJruo0.js";
-import { HIDE_BELOW_CLASS as C, SHOW_BELOW_CLASS as ee } from "../../constants/responsive.js";
-import { useTableContext as te } from "../../contexts/table.hook.js";
-import { useIsFlexWrapped as ae } from "../../hooks/useIsFlexWrapped/useIsFlexWrapped.js";
-import { t as re } from "../../../../events.types-BG1Uh8i6.js";
-import { getTableId as oe } from "../../utils/get-table-id.js";
-import { useEffect as se, useMemo as ne, useRef as D } from "react";
+import { HIDE_BELOW_CLASS as te, SHOW_BELOW_CLASS as ae } from "../../constants/responsive.js";
+import { useTableContext as re } from "../../contexts/table.hook.js";
+import { useIsFlexWrapped as oe } from "../../hooks/useIsFlexWrapped/useIsFlexWrapped.js";
+import { t as se } from "../../../../events.types-BG1Uh8i6.js";
+import { getTableId as ne } from "../../utils/get-table-id.js";
+import { useEffect as le, useMemo as ce, useRef as D } from "react";
 import { jsx as o, jsxs as y } from "react/jsx-runtime";
-var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multiSelectFilter: k, placeholder: A, showFilterInput: b = !0, showResetButton: E = !0, resetButtonClassName: B, closeOnApply: I = !0 }) => {
-  const l = D(null), v = D(null), M = ae(v), m = oe(T), { termOfSearch: j, multiselectSelected: N, dateFilters: f, dateRangeFilters: g, timeFilters: L, onChangeTermOfSearch: c, onSelectMultiselect: P, onSelectDateFilter: W, onSelectDateRangeFilter: S, onSelectTimeFilter: z } = te(), w = [...O ?? k?.map((e) => ({
+var me = /* @__PURE__ */ K(X(), 1), Oe = ({ id: _, actions: T, filters: E, multiSelectFilter: O, placeholder: k, showFilterInput: b = !0, showResetButton: A = !0, resetButtonClassName: I, closeOnApply: M = !0 }) => {
+  const l = D(null), v = D(null), B = oe(v), f = ee("(max-width: 767.98px)") && B ? "left" : "right", m = ne(_), { termOfSearch: j, multiselectSelected: L, dateFilters: N, dateRangeFilters: P, timeFilters: g, onChangeTermOfSearch: c, onSelectMultiselect: W, onSelectDateFilter: z, onSelectDateRangeFilter: w, onSelectTimeFilter: H } = re(), S = [...E ?? O?.map((e) => ({
     ...e,
     type: "badgeMultiSelect"
-  })) ?? [], ..._ ?? []], H = w.filter((e) => e.type === "action" && !!e.iconOnlyBelow), F = (e, t) => {
-    P(e, t.map((r) => r.id));
+  })) ?? [], ...T ?? []], Q = S.filter((e) => e.type === "action" && !!e.iconOnlyBelow), F = (e, t) => {
+    W(e, t.map((r) => r.id));
   }, q = () => {
     c(""), l.current && (l.current.value = "");
   };
-  se(() => {
+  le(() => {
     const e = new AbortController();
-    return document.addEventListener(re.RESET_FILTERS, (t) => {
+    return document.addEventListener(se.RESET_FILTERS, (t) => {
       const { detail: r } = t;
-      r.tableId === m && (c(""), l.current && (l.current.value = ""), Y(m));
+      r.tableId === m && (c(""), l.current && (l.current.value = ""), Z(m));
     }, { signal: e.signal }), () => e.abort();
   }, [m, c]);
-  const V = ne(() => (0, le.default)((e) => {
+  const U = ce(() => (0, me.default)((e) => {
     c(e.target.value);
-  }, 500), [c]), $ = !!j || Object.values(N ?? {}).flat().length > 0 || Object.values(f ?? {}).some(Boolean) || Object.values(g ?? {}).some(Boolean) || Object.values(L ?? {}).some(Boolean), G = (e) => {
+  }, 500), [c]), V = !!j || Object.values(L ?? {}).flat().length > 0 || Object.values(N ?? {}).some(Boolean) || Object.values(P ?? {}).some(Boolean) || Object.values(g ?? {}).some(Boolean), Y = (e) => {
     if (e.type === "action") {
-      const { label: a, appearance: p = "compact", variant: i = "secondary", leftIcon: u, rightIcon: h, iconOnlyBelow: R, className: K, type: ce, ...Q } = e;
-      return /* @__PURE__ */ y(x, {
+      const { label: a, appearance: p = "compact", variant: i = "secondary", leftIcon: u, rightIcon: h, iconOnlyBelow: x, className: G, type: pe, ...J } = e;
+      return /* @__PURE__ */ y(R, {
         appearance: p,
         variant: i,
-        className: d(R && C[R], K),
-        ...Q,
+        className: d(x && te[x], G),
+        ...J,
         children: [
           u,
           a,
@@ -45,7 +46,7 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
         ]
       }, a);
     }
-    const { key: t, label: r, position: s = M ? "left" : "right" } = e;
+    const { key: t, label: r, position: s = f } = e;
     if (e.type === "textMultiSelect") return /* @__PURE__ */ o(n.TextMultiSelect, {
       label: r,
       position: s,
@@ -59,7 +60,7 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
       position: s,
       countryCode: e.countryCode,
       onApply: (a) => {
-        W(t, a);
+        z(t, a);
       }
     }, t);
     if (e.type === "dateRange") return /* @__PURE__ */ o(n.DateRangeFilterDropdown, {
@@ -73,7 +74,7 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
       maxDate: e.maxDate,
       countryCode: e.countryCode,
       onApply: (a) => {
-        S(t, a);
+        w(t, a);
       },
       onRangeChange: e.onRangeChange
     }, t);
@@ -83,7 +84,7 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
         ...i,
         position: s,
         onApply: (u) => {
-          S(t, u);
+          w(t, u);
         }
       }, t);
     }
@@ -94,7 +95,7 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
       presets: e.presets,
       showTimePicker: e.showTimePicker,
       onApply: (a) => {
-        z(t, a);
+        H(t, a);
       }
     }, t) : /* @__PURE__ */ o(n.BadgeMultiSelect, {
       label: r,
@@ -104,10 +105,10 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
         F(t, a);
       }
     }, t);
-  }, J = ({ label: e, variant: t = "secondary", leftIcon: r, rightIcon: s, iconOnlyBelow: a, className: p, appearance: i, type: u, ...h }) => /* @__PURE__ */ o(x, {
+  }, $ = ({ label: e, variant: t = "secondary", leftIcon: r, rightIcon: s, iconOnlyBelow: a, className: p, appearance: i, type: u, ...h }) => /* @__PURE__ */ o(R, {
     variant: t,
     "aria-label": e,
-    className: d("relative size-10 shrink-0 p-0 pointer-coarse:min-h-10 touch-hit-area [&>svg]:size-5", a && ee[a], p),
+    className: d("relative size-10 shrink-0 p-0 pointer-coarse:min-h-10 touch-hit-area [&>svg]:size-5", a && ae[a], p),
     ...h,
     children: r ?? s
   }, e);
@@ -117,24 +118,24 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
     children: [
       b && /* @__PURE__ */ o("div", {
         className: "kvt-search-wrapper w-60 min-w-0 max-sm:grow max-sm:basis-0",
-        children: /* @__PURE__ */ o(Z, {
+        children: /* @__PURE__ */ o(C, {
           ref: l,
-          placeholder: A,
+          placeholder: k,
           isSearch: !0,
           autoComplete: "false",
           className: "kvt-search w-full",
           inputMode: "search",
-          onChange: V
+          onChange: U
         })
       }),
-      H.map(J),
+      Q.map($),
       /* @__PURE__ */ y(n, {
         className: "kvt-filter-actions flex-wrap gap-4 max-sm:basis-full",
-        closeOnApply: I,
+        closeOnApply: M,
         resetScope: m,
-        children: [w.map(G), E && /* @__PURE__ */ o(n.ResetButton, {
-          className: d("select-none max-md:ml-auto", B),
-          disabled: !$,
+        children: [S.map(Y), A && /* @__PURE__ */ o(n.ResetButton, {
+          className: d("select-none max-md:h-auto max-md:min-h-0! max-md:py-0", I),
+          disabled: !V,
           onClick: q
         })]
       })
@@ -142,5 +143,5 @@ var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multi
   });
 };
 export {
-  De as Filter
+  Oe as Filter
 };