@yuno-payments/dashboard-design-system 1.0.0 → 1.0.3

package/dist/components/atoms/filter/filter-multi-input.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Props for FilterMultiInput component
+ */
+export interface FilterMultiInputProps {
+    /**
+     * Title displayed above the input section
+     */
+    title: string;
+    /**
+     * Current array of values
+     */
+    value: string[];
+    /**
+     * Callback fired when values change
+     */
+    onChange: (values: string[]) => void;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Helper text displayed below the title
+     */
+    description?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Whether to only allow numeric values
+     * @default false
+     */
+    numericOnly?: boolean;
+    /**
+     * Maximum number of values allowed
+     */
+    maxItems?: number;
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether to allow duplicate values
+     * @default false
+     */
+    allowDuplicates?: boolean;
+}
+/**
+ * Filter section component for entering multiple values via an input field.
+ * Values are displayed as badges/tags and can be removed individually.
+ *
+ * @example
+ * ```tsx
+ * <FilterMultiInput
+ *   title="BIN Filter"
+ *   value={selectedBins}
+ *   onChange={setSelectedBins}
+ *   placeholder="Enter BIN(s) separated by comma"
+ *   numericOnly
+ * />
+ * ```
+ */
+declare const FilterMultiInput: import('react').ForwardRefExoticComponent<FilterMultiInputProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FilterMultiInput };

package/dist/components/atoms/filter/filter-multi-input.js

@@ -0,0 +1,50 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as x } from "react";
+import { cn as j } from "../../../lib/utils.js";
+import { Separator as b } from "../../../vendor/shadcn/separator.js";
+import { MultiValuesField as h } from "../multi-values-field/multi-values-field.js";
+const v = x(
+  ({
+    title: t,
+    value: l,
+    onChange: r,
+    placeholder: s = "Type and press Enter...",
+    description: a,
+    error: i,
+    numericOnly: o = !1,
+    maxItems: m,
+    disabled: n = !1,
+    className: f,
+    allowDuplicates: d = !1
+  }, u) => {
+    const c = o ? (p) => /^\d+$/.test(p) ? !0 : "Only numeric values are allowed" : void 0;
+    return /* @__PURE__ */ e.jsxs("div", { ref: u, className: j("flex flex-col h-full", f), children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-foreground", children: t }) }),
+      /* @__PURE__ */ e.jsx(b, { className: "w-full mb-6" }),
+      /* @__PURE__ */ e.jsx(
+        h,
+        {
+          value: l,
+          onChange: r,
+          placeholder: s,
+          description: a,
+          error: i,
+          disabled: n,
+          maxItems: m,
+          allowDuplicates: d,
+          validate: c,
+          triggerKeys: ["Enter", "Tab", "Comma"],
+          deleteAll: l.length > 0 ? {
+            label: "Clear all",
+            length: 1,
+            onClick: () => r([])
+          } : void 0
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "FilterMultiInput";
+export {
+  v as FilterMultiInput
+};

package/dist/components/atoms/filter/filter.js

@@ -40,25 +40,25 @@ const X = x(
     onClearAll: n,
     maxVisibleTags: t = 4,
     className: i,
-    ...r
-  }, m) => {
-    const c = s.length > 0, N = s.slice(0, t), g = s.length - t;
+    ...c
+  }, d) => {
+    const o = s.length > 0, N = s.slice(0, t), g = s.length - t;
     return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ e.jsxs(
         f,
         {
-          ref: m,
+          ref: d,
           variant: "outline",
           size: "sm",
           className: u("h-8 gap-2 px-3 py-2", i),
-          ...r,
+          ...c,
           children: [
             /* @__PURE__ */ e.jsx(y, { name: "FunnelSimple", className: "size-4" }),
             /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: "Add filter" })
           ]
         }
       ),
-      c && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      o && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(v, { orientation: "vertical", className: "h-5" }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
           N.map((h) => /* @__PURE__ */ e.jsx(
@@ -86,7 +86,7 @@ const X = x(
           )
         ] })
       ] }),
-      !c && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      !o && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(v, { orientation: "vertical", className: "h-5" }),
         /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: "No filters applied" })
       ] })
@@ -100,38 +100,38 @@ const q = x(
       title: n,
       items: t,
       className: i,
-      searchable: r = !1,
-      searchPlaceholder: m = "Search...",
-      showActions: c = !1,
+      searchable: c = !1,
+      searchPlaceholder: d = "Search...",
+      showActions: o = !1,
       enableSelectAll: N = !0,
       enableInverse: g = !0,
       enableNone: h = !0,
       description: b
-    } = s, o = s.type || "checkbox", z = o === "radio", I = o === "checkbox" || !s.type, [j, R] = M(""), C = $(() => j ? t.filter(
+    } = s, m = s.type || "checkbox", z = m === "radio", I = m === "checkbox" || !s.type, [j, R] = M(""), C = $(() => j ? t.filter(
       (a) => a.label.toLowerCase().includes(j.toLowerCase())
     ) : t, [t, j]), T = () => {
-      if (o === "checkbox" && "selectedValues" in s) {
-        const a = t.map((d) => d.value);
+      if (m === "checkbox" && "selectedValues" in s) {
+        const a = t.map((r) => r.value);
         s.onChange(a);
       }
     }, P = () => {
-      if (o === "checkbox" && "selectedValues" in s) {
-        const a = t.filter((d) => !s.selectedValues.includes(d.value)).map((d) => d.value);
+      if (m === "checkbox" && "selectedValues" in s) {
+        const a = t.filter((r) => !s.selectedValues.includes(r.value)).map((r) => r.value);
         s.onChange(a);
       }
     }, B = () => {
-      o === "checkbox" && "selectedValues" in s ? s.onChange([]) : o === "radio" && "selectedValue" in s && s.onChange("");
-    }, G = (a) => {
-      if (o === "checkbox" && "selectedValues" in s) {
-        const O = s.selectedValues.includes(a) ? s.selectedValues.filter((A) => A !== a) : [...s.selectedValues, a];
+      m === "checkbox" && "selectedValues" in s ? s.onChange([]) : m === "radio" && "selectedValue" in s && s.onChange("");
+    }, G = (a, r) => {
+      if (m === "checkbox" && "selectedValues" in s) {
+        const O = r ? [...s.selectedValues, a] : s.selectedValues.filter((A) => A !== a);
         s.onChange(O);
       }
     };
     return /* @__PURE__ */ e.jsxs("div", { ref: l, className: u("flex flex-col h-full", i), children: [
-      r && /* @__PURE__ */ e.jsx(
+      c && /* @__PURE__ */ e.jsx(
         w,
         {
-          placeholder: m,
+          placeholder: d,
           value: j,
           onChange: (a) => R(a.target.value),
           startIcon: "MagnifyingGlass",
@@ -141,7 +141,7 @@ const q = x(
       b && /* @__PURE__ */ e.jsx("p", { className: "text-xs font-normal text-muted-foreground mb-4", children: b }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
         /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-foreground", children: n }),
-        c && o === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-4", children: [
+        o && m === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-4", children: [
           N && /* @__PURE__ */ e.jsx(
             f,
             {
@@ -198,7 +198,7 @@ const q = x(
           description: a.description,
           icon: a.icon,
           checked: s.selectedValues.includes(a.value),
-          onCheckedChange: () => G(a.value)
+          onCheckedChange: (r) => G(a.value, r)
         },
         a.value
       )) }) : null
@@ -206,16 +206,16 @@ const q = x(
   }
 );
 q.displayName = "FilterSection";
-const V = x(({ label: s, checked: l, onCheckedChange: n, description: t, className: i, icon: r }, m) => /* @__PURE__ */ e.jsxs("label", { className: u("flex items-start gap-2 cursor-pointer", i), children: [
-  /* @__PURE__ */ e.jsx(E, { ref: m, checked: l, onCheckedChange: n }),
-  r && /* @__PURE__ */ e.jsx(
+const V = x(({ label: s, checked: l, onCheckedChange: n, description: t, className: i, icon: c }, d) => /* @__PURE__ */ e.jsxs("label", { className: u("flex items-start gap-2 cursor-pointer", i), children: [
+  /* @__PURE__ */ e.jsx(E, { ref: d, checked: l, onCheckedChange: n }),
+  c && /* @__PURE__ */ e.jsx(
     "img",
     {
-      src: r,
+      src: c,
       alt: "",
       className: "size-4 object-contain shrink-0",
-      onError: (c) => {
-        c.currentTarget.style.display = "none";
+      onError: (o) => {
+        o.currentTarget.style.display = "none";
       }
     }
   ),
@@ -249,14 +249,14 @@ const D = x(
     searchPlaceholder: n = "Search...",
     searchValue: t,
     onSearchChange: i,
-    className: r
-  }, m) => /* @__PURE__ */ e.jsxs(
+    className: c
+  }, d) => /* @__PURE__ */ e.jsxs(
     "div",
     {
-      ref: m,
+      ref: d,
       className: u(
         "flex flex-col gap-6 bg-input rounded-md p-6 min-w-[448px]",
-        r
+        c
       ),
       children: [
         l && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
@@ -272,7 +272,7 @@ const D = x(
             {
               placeholder: n,
               value: t,
-              onChange: (c) => i?.(c.target.value),
+              onChange: (o) => i?.(o.target.value),
               className: "pl-9"
             }
           )

package/dist/components/atoms/filter/index.d.ts

@@ -1,2 +1,3 @@
 export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, } from './filter';
 export { FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter-date-range';
+export { FilterMultiInput, type FilterMultiInputProps, } from './filter-multi-input';

package/dist/components/atoms/filter-dropdown/filter-dropdown.js

@@ -1,25 +1,24 @@
 import { j as n } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as v, useState as E, useCallback as S, useRef as X, useEffect as Y } from "react";
+import { forwardRef as j, useState as E, useCallback as S, useRef as X, useEffect as Y } from "react";
 import { Button as b } from "../../../vendor/shadcn/button.js";
 import { Separator as k } from "../../../vendor/shadcn/separator.js";
-import { Icon as j } from "../icon/icon.js";
+import { Icon as v } from "../icon/icon.js";
 import { FilterSection as M } from "../filter/filter.js";
 import { FilterDateRange as $, FilterDateRangeValue as C } from "../filter/filter-date-range.js";
 import { cn as d } from "../../../lib/utils.js";
-const A = v(
+const A = j(
   ({ icon: r, label: h, isActive: l = !1, showChevron: m = !1, className: u, ...o }, p) => /* @__PURE__ */ n.jsxs(
     "button",
     {
       ref: p,
       className: d(
-        "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors",
-        "hover:bg-secondary",
+        "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors shrink-0 hover:bg-secondary",
         u
       ),
       ...o,
       children: [
         r && /* @__PURE__ */ n.jsx(
-          j,
+          v,
           {
             name: r,
             className: d(
@@ -39,7 +38,7 @@ const A = v(
           }
         ),
         (l || m) && /* @__PURE__ */ n.jsx(
-          j,
+          v,
           {
             name: "CaretRight",
             className: d(
@@ -53,13 +52,13 @@ const A = v(
   )
 );
 A.displayName = "FilterMenuItem";
-const V = v(
+const V = j(
   ({ items: r, activeItemId: h, onItemClick: l, className: m }, u) => /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: u,
       className: d(
-        "flex flex-col gap-2 w-64 h-full p-2 bg-surface border border-border rounded-md",
+        "flex flex-col gap-2 w-64 h-full p-2 bg-surface border border-border rounded-md overflow-y-auto",
         m
       ),
       children: r.map((o) => /* @__PURE__ */ n.jsx(
@@ -77,7 +76,7 @@ const V = v(
   )
 );
 V.displayName = "FilterMenu";
-const q = v(
+const q = j(
   ({
     filters: r,
     buttonText: h = "Add filter",
@@ -234,7 +233,7 @@ const q = v(
                 onClick: () => g(!x),
                 disabled: O,
                 children: [
-                  /* @__PURE__ */ n.jsx(j, { name: "FunnelSimple", className: "size-4" }),
+                  /* @__PURE__ */ n.jsx(v, { name: "FunnelSimple", className: "size-4" }),
                   h
                 ]
               }
@@ -261,7 +260,7 @@ const q = v(
                             },
                             className: "inline-flex items-center justify-center",
                             "aria-label": `Remove ${t.label} filter`,
-                            children: /* @__PURE__ */ n.jsx(j, { name: "X", className: "size-4" })
+                            children: /* @__PURE__ */ n.jsx(v, { name: "X", className: "size-4" })
                           }
                         )
                       ]
@@ -294,7 +293,7 @@ const q = v(
             "div",
             {
               className: d(
-                "z-50 shadow-lg",
+                "z-popover shadow-lg",
                 "absolute top-full left-0 mt-1",
                 "flex flex-row gap-2",
                 "w-[728px] h-[448px]",

package/dist/components/atoms/index.d.ts

@@ -10,7 +10,7 @@ export { CurrencyField, type CurrencyFieldProps } from './currency-field';
 export { DatePicker, type DatePickerProps } from './date-picker';
 export { DateRangePicker, type DateRangePickerProps, } from './date-range-picker';
 export { TimePicker, type TimePickerProps } from './time-picker';
-export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter';
+export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, FilterMultiInput, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterMultiInputProps, } from './filter';
 export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, } from './filter-dropdown';
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, type DropdownMenuProps, type DropdownMenuPortalProps, type DropdownMenuTriggerProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuLabelProps, type DropdownMenuItemProps, type DropdownMenuCheckboxItemProps, type DropdownMenuRadioGroupProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, type DropdownMenuShortcutProps, type DropdownMenuSubProps, type DropdownMenuSubTriggerProps, type DropdownMenuSubContentProps, } from './dropdown-menu';
 export { DotsMenu, type DotsMenuProps, type DotsMenuAction, type DotsMenuOptions, } from './dots-menu';

package/dist/components/atoms/search-field/search-field.js

@@ -150,7 +150,7 @@ const P = D("flex gap-2 w-full", {
               onMouseEnter: () => I(!0),
               onMouseLeave: () => I(!1),
               className: r(
-                "absolute z-50 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md",
+                "absolute z-popover w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md",
                 "max-h-[300px] overflow-y-auto"
               ),
               children: /* @__PURE__ */ t.jsx("div", { className: "py-1", children: C.map((e, s) => /* @__PURE__ */ t.jsx(

package/dist/components/atoms/time-picker/time-picker.js

@@ -1,22 +1,22 @@
-import { j as n } from "../../../_virtual/jsx-runtime.js";
+import { j as r } from "../../../_virtual/jsx-runtime.js";
 import * as G from "react";
 import { useId as J, useState as $, useRef as C, useEffect as E } from "react";
 import { cn as c } from "../../../lib/utils.js";
 import { Icon as K } from "../icon/icon.js";
 import { TimePicker as Q } from "../../../vendor/shadcn/time-picker.js";
 import { Field as R, FieldLabel as T, FieldDescription as O, FieldError as _ } from "../../../vendor/shadcn/field.js";
-const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length: 24 }, (e, r) => r), Z = ["AM", "PM"], H = (e) => {
+const X = Array.from({ length: 12 }, (e, n) => n + 1), Y = Array.from({ length: 24 }, (e, n) => n), Z = ["AM", "PM"], H = (e) => {
   if (e === 0)
     return Array.from({ length: 60 }, (o, i) => i);
-  const r = 60 / e;
-  return Array.from({ length: r }, (o, i) => i * e);
+  const n = 60 / e;
+  return Array.from({ length: n }, (o, i) => i * e);
 }, d = (e) => e.toString().padStart(2, "0"), ee = (e) => {
-  const r = e >= 12 ? "PM" : "AM";
-  return { hour: e === 0 ? 12 : e > 12 ? e - 12 : e, meridiem: r };
-}, te = (e, r) => e === 12 ? r === "AM" ? 0 : 12 : r === "PM" ? e + 12 : e, ne = G.forwardRef(
+  const n = e >= 12 ? "PM" : "AM";
+  return { hour: e === 0 ? 12 : e > 12 ? e - 12 : e, meridiem: n };
+}, te = (e, n) => e === 12 ? n === "AM" ? 0 : 12 : n === "PM" ? e + 12 : e, re = G.forwardRef(
   ({
     className: e,
-    label: r,
+    label: n,
     error: o,
     description: i,
     orientation: x = "vertical",
@@ -32,7 +32,7 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
   }, P) => {
     const S = J(), u = m || S, v = !!o;
     if (y === "native") {
-      const k = /* @__PURE__ */ n.jsx(
+      const k = /* @__PURE__ */ r.jsx(
         Q,
         {
           ref: P,
@@ -41,7 +41,7 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
           disabled: p,
           className: c(
             v && "border-destructive focus-visible:border-destructive",
-            !(r || o || i) && e
+            !(n || o || i) && e
           ),
           "aria-invalid": v ? !0 : void 0,
           "aria-describedby": i || o ? `${u}-description` : void 0,
@@ -51,31 +51,31 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
           }
         }
       );
-      return r || o || i ? /* @__PURE__ */ n.jsxs(
+      return n || o || i ? /* @__PURE__ */ r.jsxs(
         R,
         {
           orientation: x,
           "data-invalid": v,
           className: c("w-full", e),
           children: [
-            r && /* @__PURE__ */ n.jsx(T, { htmlFor: u, children: r }),
-            /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+            n && /* @__PURE__ */ r.jsx(T, { htmlFor: u, children: n }),
+            /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
               k,
-              i && !o && /* @__PURE__ */ n.jsx(O, { id: `${u}-description`, children: i }),
-              o && /* @__PURE__ */ n.jsx(_, { id: `${u}-description`, children: o })
+              i && !o && /* @__PURE__ */ r.jsx(O, { id: `${u}-description`, children: i }),
+              o && /* @__PURE__ */ r.jsx(_, { id: `${u}-description`, children: o })
             ] })
           ]
         }
       ) : k;
     }
-    return /* @__PURE__ */ n.jsx(
-      re,
+    return /* @__PURE__ */ r.jsx(
+      ne,
       {
         value: l || (w ? "00:00" : "12:00"),
         onChange: f,
         divisorMinutes: j,
         width: s,
-        label: r,
+        label: n,
         error: o,
         description: i,
         disabled: p,
@@ -85,10 +85,10 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
     );
   }
 );
-ne.displayName = "TimePicker";
-const re = ({
+re.displayName = "TimePicker";
+const ne = ({
   value: e,
-  onChange: r,
+  onChange: n,
   divisorMinutes: o,
   width: i,
   label: x,
@@ -109,22 +109,22 @@ const re = ({
     let t;
     s ? t = a : t = te(a, M);
     const g = `${d(t)}:${d(b)}`;
-    r?.(g);
-  }, [a, b, M, r, s]), E(() => {
+    n?.(g);
+  }, [a, b, M, n, s]), E(() => {
     const t = (g) => {
       h.current && !h.current.contains(g.target) && p(!1);
     };
     if (l)
       return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
   }, [l]);
-  const V = s ? `${d(a)}:${d(b)}` : `${d(a)}:${d(b)} ${M}`, z = s ? Y : X, I = /* @__PURE__ */ n.jsxs(
+  const V = s ? `${d(a)}:${d(b)}` : `${d(a)}:${d(b)} ${M}`, z = s ? Y : X, I = /* @__PURE__ */ r.jsxs(
     "div",
     {
       ref: h,
       className: c("relative inline-block", j),
       style: { width: typeof i == "number" ? `${i}px` : i },
       children: [
-        /* @__PURE__ */ n.jsxs(
+        /* @__PURE__ */ r.jsxs(
           "button",
           {
             type: "button",
@@ -139,8 +139,8 @@ const re = ({
               m && "border-destructive"
             ),
             children: [
-              /* @__PURE__ */ n.jsx("span", { children: V }),
-              /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r.jsx("span", { children: V }),
+              /* @__PURE__ */ r.jsx(
                 K,
                 {
                   name: l ? "CaretUp" : "CaretDown",
@@ -151,17 +151,17 @@ const re = ({
             ]
           }
         ),
-        l && /* @__PURE__ */ n.jsxs(
+        l && /* @__PURE__ */ r.jsxs(
           "div",
           {
             ref: w,
             className: c(
-              "absolute z-50 mt-1 bg-popover border border-border rounded-md shadow-lg",
+              "absolute z-popover mt-1 bg-popover border border-border rounded-md shadow-lg",
               "flex divide-x divide-border"
             ),
             style: { width: "fit-content", minWidth: s ? "140px" : "200px" },
             children: [
-              /* @__PURE__ */ n.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: z.map((t) => /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: z.map((t) => /* @__PURE__ */ r.jsx(
                 "button",
                 {
                   type: "button",
@@ -174,7 +174,7 @@ const re = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ n.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: U.map((t) => /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: U.map((t) => /* @__PURE__ */ r.jsx(
                 "button",
                 {
                   type: "button",
@@ -187,7 +187,7 @@ const re = ({
                 },
                 t
               )) }),
-              !s && /* @__PURE__ */ n.jsx("div", { className: "flex flex-col min-w-[60px]", children: Z.map((t) => /* @__PURE__ */ n.jsx(
+              !s && /* @__PURE__ */ r.jsx("div", { className: "flex flex-col min-w-[60px]", children: Z.map((t) => /* @__PURE__ */ r.jsx(
                 "button",
                 {
                   type: "button",
@@ -206,15 +206,15 @@ const re = ({
       ]
     }
   );
-  return x || m || f ? /* @__PURE__ */ n.jsxs(R, { orientation: "vertical", className: c("w-full", j), children: [
-    x && /* @__PURE__ */ n.jsx(T, { children: x }),
-    /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+  return x || m || f ? /* @__PURE__ */ r.jsxs(R, { orientation: "vertical", className: c("w-full", j), children: [
+    x && /* @__PURE__ */ r.jsx(T, { children: x }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
       I,
-      f && !m && /* @__PURE__ */ n.jsx(O, { children: f }),
-      m && /* @__PURE__ */ n.jsx(_, { children: m })
+      f && !m && /* @__PURE__ */ r.jsx(O, { children: f }),
+      m && /* @__PURE__ */ r.jsx(_, { children: m })
     ] })
   ] }) : I;
 };
 export {
-  ne as TimePicker
+  re as TimePicker
 };