@konstructio/ui 0.1.2-alpha.108 → 0.1.2-alpha.109

package/dist/Wrapper-Bbaaa7YA.js

@@ -0,0 +1,218 @@
+import { t as r } from "./utils-B-6R7kNE.js";
+import { LoaderIcon as xe } from "./assets/icons/components/Loader.js";
+import { t as he } from "./createLucideIcon-MbzNWCaI.js";
+import { t as ve } from "./chevron-up-Bjpvg6ui.js";
+import { Typography as ge } from "./components/Typography/Typography.js";
+import { i as we, n as ye, r as Ne, t as Ce } from "./dist-ByCJijZd.js";
+import { useSelectContext as ke } from "./components/Select/contexts/select.hook.js";
+import { List as be } from "./components/Select/components/List/List.js";
+import { inputVariants as Ie, labelVariants as Oe, selectVariants as je } from "./components/Select/Select.variants.js";
+import { useSelect as ze } from "./components/Select/hooks/useSelect.js";
+import { forwardRef as De, useEffect as Le, useImperativeHandle as Re, useMemo as Ve, useRef as w } from "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var Te = [["path", {
+  d: "m21 21-4.34-4.34",
+  key: "14j7rj"
+}], ["circle", {
+  cx: "11",
+  cy: "11",
+  r: "8",
+  key: "4ej97u"
+}]], Fe = he("search", Te), Ge = De(({ additionalOptions: E, className: $, defaultValue: y, describedBy: b, fieldId: N, disabled: n = !1, error: c, groupedOptions: B, iconClassName: K, inputClassName: M, isInfiniteScrollEnabled: W = !1, isLoading: I, isPortal: f = !1, isRequired: x, loadingText: _, label: l, labelAction: q, labelClassName: H, labelWrapperClassName: U, listClassName: G, listItemClassName: J, listItemSecondRowClassName: P, name: O, noOptionsText: Q, placeholder: h, portalClassName: X, searchable: j = !1, showSearchIcon: C, theme: Y, visibleItems: Z, wrapperClassName: ee, onFetchMoreOptions: te, onBlur: ae, onSearchChange: re, ...z }, ne) => {
+  const v = `${N}-label`, D = `${N}-control`, L = `${N}-listbox`, d = w(null), R = w(null), k = w(null), oe = w(0), { isOpen: o, options: i, searchTerm: le, value: u, setCanFilter: ie, setSearchTerm: se, setValue: m, toggleOpen: V } = ke(), t = Ve(() => i.find(({ value: e }) => e === u), [i, u]), { isInside: ce, wrapperRef: ue, wrapperInputRef: T, handleOpen: g } = ze({
+    inputRef: d,
+    searchInputRef: R,
+    internalValue: t,
+    listRef: k,
+    onBlur: ae
+  }), de = (e) => {
+    ce(e.relatedTarget) || V(!1);
+  }, F = () => {
+    if (!n) {
+      if (o) {
+        V(!1);
+        return;
+      }
+      g();
+    }
+  }, me = (e) => {
+    if (!n) {
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !o) {
+          g();
+          return;
+        }
+        k.current?.querySelector('li:not([data-action="true"])')?.focus();
+        return;
+      }
+      e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
+    }
+  };
+  Re(ne, () => d.current, [d]), Le(() => {
+    if (y && !u) {
+      const e = i && i.find((p) => p.value === y);
+      e && m(e.value);
+    }
+  }, [
+    y,
+    i,
+    m,
+    u
+  ]);
+  const pe = (e) => {
+    const p = e.target.value;
+    ie(!0), m(""), se(p ?? ""), re?.(p);
+    const S = i.find((fe) => fe.value.toLocaleLowerCase() === p.toLocaleLowerCase());
+    m(S ? S.value : t?.value ?? "");
+  }, A = /* @__PURE__ */ a(be, {
+    ref: k,
+    id: L,
+    labelledBy: l ? v : void 0,
+    additionalOptions: E,
+    className: r(f && "static top-auto mt-0", G),
+    groupedOptions: B,
+    itemClassName: J,
+    name: O,
+    wrapperInputRef: T,
+    inputRef: d,
+    options: i,
+    isLoading: !!I,
+    searchable: j,
+    listItemSecondRowClassName: P,
+    isInfiniteScrollEnabled: W,
+    onFetchMoreOptions: te,
+    noOptionsText: Q,
+    loadingText: _,
+    visibleItems: Z
+  });
+  return /* @__PURE__ */ s("div", {
+    ref: ue,
+    className: r("flex flex-col gap-2 w-full relative", ee),
+    "data-theme": Y,
+    children: [l ? /* @__PURE__ */ s("div", {
+      className: r("flex items-center justify-between", U),
+      children: [/* @__PURE__ */ s("label", {
+        id: v,
+        className: r(Oe({ className: H })),
+        htmlFor: D,
+        onClick: () => !n && g(),
+        children: [l, x && /* @__PURE__ */ a("span", {
+          "aria-hidden": "true",
+          className: "text-red-600 dark:text-red-500 ml-1",
+          children: "*"
+        })]
+      }), q]
+    }) : null, /* @__PURE__ */ s(we, {
+      open: f && o,
+      children: [
+        /* @__PURE__ */ a(Ce, {
+          asChild: !0,
+          children: /* @__PURE__ */ s("div", {
+            ref: T,
+            id: D,
+            className: r(je({
+              className: $,
+              hasError: !!c,
+              disabled: n
+            })),
+            role: "combobox",
+            onClick: F,
+            onKeyDown: me,
+            "aria-expanded": o,
+            tabIndex: oe.current,
+            "aria-labelledby": l ? v : void 0,
+            "aria-label": l ? void 0 : h,
+            "aria-haspopup": "listbox",
+            "aria-controls": o ? L : void 0,
+            "aria-invalid": !!c || void 0,
+            "aria-describedby": b,
+            "aria-required": x || void 0,
+            "aria-disabled": n || void 0,
+            children: [/* @__PURE__ */ s("div", {
+              className: "flex gap-2.5 items-center flex-1",
+              children: [
+                t?.leftIcon && !C && /* @__PURE__ */ a("span", {
+                  className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
+                  children: t.leftIcon
+                }),
+                C && /* @__PURE__ */ a(Fe, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
+                j ? /* @__PURE__ */ a("input", {
+                  ref: R,
+                  type: "text",
+                  value: o ? le : t?.label ?? u ?? "",
+                  onChange: pe,
+                  placeholder: h,
+                  className: r(Ie({ className: M }), { "text-red-700 placeholder:text-red-700": !!c }),
+                  onClick: (e) => {
+                    e.stopPropagation(), n || g();
+                  },
+                  "aria-labelledby": l ? v : void 0,
+                  "aria-label": l ? void 0 : h,
+                  "aria-invalid": !!c || void 0,
+                  "aria-describedby": b,
+                  required: x,
+                  autoComplete: "off",
+                  autoCapitalize: "words",
+                  disabled: n,
+                  tabIndex: -1,
+                  ...z
+                }) : /* @__PURE__ */ s(ge, {
+                  variant: "body2",
+                  className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
+                    "text-red-700": !!c,
+                    "select-none": !t,
+                    "text-metal-800 dark:text-metal-50": t,
+                    "text-metal-400/50 dark:text-metal-50/50": n
+                  }, t?.wrapperClassNameOnSelectedValue),
+                  children: [
+                    t?.label || h,
+                    " ",
+                    t?.showRightComponentOnselectedValue ? t?.rightComponent : null
+                  ]
+                })
+              ]
+            }), I ? /* @__PURE__ */ a(xe, {
+              size: 16,
+              className: "text-metal-400 animate-spin select-none"
+            }) : !C && /* @__PURE__ */ a(ve, {
+              "data-state": o ? "open" : "closed",
+              className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", K, {
+                "text-red-700": !!c,
+                "text-metal-400/50 dark:group-focus-within:text-zinc-500": n
+              })
+            })]
+          })
+        }),
+        /* @__PURE__ */ a("input", {
+          ref: d,
+          type: "text",
+          name: O,
+          className: "hidden",
+          "aria-hidden": "true",
+          required: x,
+          inert: !0,
+          defaultValue: t?.value ?? u ?? void 0,
+          ...z
+        }),
+        o && !f && A,
+        f && /* @__PURE__ */ a(Ne, { children: /* @__PURE__ */ a(ye, {
+          role: "presentation",
+          align: "start",
+          sideOffset: 4,
+          className: r("z-50 w-(--radix-popover-trigger-width)", X),
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          onBlur: de,
+          children: A
+        }) })
+      ]
+    })]
+  });
+});
+export {
+  Ge as t
+};

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,17 +1,17 @@
 import { t as a } from "../../utils-B-6R7kNE.js";
 import { Typography as i } from "../Typography/Typography.js";
-import { DateRangePickerProvider as _ } from "./contexts/date-range-picker/date-range-picker.provider.js";
-import { PresetPanel as $ } from "./components/PresetPanel/PresetPanel.js";
-import { DateTimeInputs as ee } from "./components/DateTimeInputs/DateTimeInputs.js";
-import { CalendarPanel as re } from "./components/CalendarPanel/CalendarPanel.js";
-import { RightPanel as ae } from "./components/RightPanel/RightPanel.js";
-import { dateRangePickerVariants as te, rightPanelVariants as ne } from "./DateRangePicker.variants.js";
+import { DateRangePickerProvider as $ } from "./contexts/date-range-picker/date-range-picker.provider.js";
+import { PresetPanel as ee } from "./components/PresetPanel/PresetPanel.js";
+import { DateTimeInputs as re } from "./components/DateTimeInputs/DateTimeInputs.js";
+import { CalendarPanel as ae } from "./components/CalendarPanel/CalendarPanel.js";
+import { RightPanel as te } from "./components/RightPanel/RightPanel.js";
+import { dateRangePickerVariants as ne, rightPanelVariants as ie } from "./DateRangePicker.variants.js";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var ie = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom", defaultRange: s, defaultTime: c, disabled: p = !1, isRequired: d, label: n, labelWrapperClassName: f, name: g, showTime: P = !0, theme: h, timeFormat: x = "24", blockedDays: u, blockedMonths: k, minDate: v, maxDate: N, hideDisabledNavigation: D, showOutsideDays: R, navigationMode: y = "independent", numberOfMonths: T = 2, dateDisplayFormat: j = "long", ariaLabelCalendar: I, ariaLabelPrevMonth: V, ariaLabelNextMonth: b, ariaLabelPrevMonthStart: C, ariaLabelNextMonthStart: K, ariaLabelPrevMonthEnd: L, ariaLabelNextMonthEnd: q, labelStartDate: w, labelEndDate: z, labelTime: A, requiredDates: B, ariaLabelStartDate: E, ariaLabelEndDate: F, errorInvalidDate: G, errorDateNotAvailable: H, showPresets: J = !0, presets: M, footer: O, revealCalendarOnCustom: Q = !1, labelTimePeriod: S, ariaLabelTimePeriod: U, presetLabels: W, classNames: r, onRangeChange: X, onDateChange: Y, onPresetChange: Z }) => /* @__PURE__ */ e(_, {
+var oe = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom", defaultRange: s, defaultTime: c, disabled: p = !1, isRequired: d, label: n, labelWrapperClassName: f, name: g, showTime: P = !0, theme: h, timeFormat: x = "24", blockedDays: u, blockedMonths: k, minDate: v, maxDate: N, hideDisabledNavigation: D, showOutsideDays: R, navigationMode: y = "independent", numberOfMonths: T = 2, dateDisplayFormat: j = "long", ariaLabelCalendar: I, ariaLabelPrevMonth: V, ariaLabelNextMonth: b, ariaLabelPrevMonthStart: C, ariaLabelNextMonthStart: K, ariaLabelPrevMonthEnd: L, ariaLabelNextMonthEnd: q, autoComplete: w, labelStartDate: z, labelEndDate: A, labelTime: B, requiredDates: E, ariaLabelStartDate: F, ariaLabelEndDate: G, errorInvalidDate: H, errorDateNotAvailable: J, showPresets: M = !0, presets: O, footer: Q, revealCalendarOnCustom: S = !1, labelTimePeriod: U, ariaLabelTimePeriod: W, presetLabels: X, classNames: r, onRangeChange: Y, onDateChange: Z, onPresetChange: _ }) => /* @__PURE__ */ e($, {
   defaultRange: s,
   defaultTime: c,
   defaultPreset: m,
-  presets: M,
+  presets: O,
   timeFormat: x,
   showTime: P,
   name: g,
@@ -26,10 +26,10 @@ var ie = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom
   navigationMode: y,
   numberOfMonths: T,
   dateDisplayFormat: j,
-  revealCalendarOnCustom: Q,
-  onRangeChange: X,
-  onDateChange: Y,
-  onPresetChange: Z,
+  revealCalendarOnCustom: S,
+  onRangeChange: Y,
+  onDateChange: Z,
+  onPresetChange: _,
   children: /* @__PURE__ */ t("div", {
     className: "flex flex-col gap-2",
     "data-theme": h,
@@ -46,29 +46,30 @@ var ie = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom
         })]
       })
     }) : null, /* @__PURE__ */ t("div", {
-      className: a(te({ className: l }), r?.container),
+      className: a(ne({ className: l }), r?.container),
       role: "group",
       "aria-label": n || "Date range picker",
-      children: [J && /* @__PURE__ */ e($, {
-        labelTimePeriod: S,
-        ariaLabelTimePeriod: U,
-        presetLabels: W,
+      children: [M && /* @__PURE__ */ e(ee, {
+        labelTimePeriod: U,
+        ariaLabelTimePeriod: W,
+        presetLabels: X,
         classNames: r?.presetPanel
-      }), /* @__PURE__ */ t(ae, {
-        className: a(ne(), r?.rightPanel),
+      }), /* @__PURE__ */ t(te, {
+        className: a(ie(), r?.rightPanel),
         children: [
-          /* @__PURE__ */ e(ee, {
-            labelStartDate: w,
-            labelEndDate: z,
-            labelTime: A,
-            requiredDates: B,
-            ariaLabelStartDate: E,
-            ariaLabelEndDate: F,
-            errorInvalidDate: G,
-            errorDateNotAvailable: H,
+          /* @__PURE__ */ e(re, {
+            autoComplete: w,
+            labelStartDate: z,
+            labelEndDate: A,
+            labelTime: B,
+            requiredDates: E,
+            ariaLabelStartDate: F,
+            ariaLabelEndDate: G,
+            errorInvalidDate: H,
+            errorDateNotAvailable: J,
             classNames: r?.dateTimeInputs
           }),
-          /* @__PURE__ */ e(re, {
+          /* @__PURE__ */ e(ae, {
             ariaLabelCalendar: I,
             ariaLabelPrevMonth: V,
             ariaLabelNextMonth: b,
@@ -78,13 +79,13 @@ var ie = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom
             ariaLabelNextMonthEnd: q,
             classNames: r?.calendarPanel
           }),
-          O
+          Q
         ]
       })]
     })]
   })
 });
-ie.displayName = "KonstructDateRangePicker";
+oe.displayName = "KonstructDateRangePicker";
 export {
-  ie as DateRangePicker
+  oe as DateRangePicker
 };

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.js

@@ -1,68 +1,70 @@
-import { t as j } from "../../../../utils-B-6R7kNE.js";
-import { useDateRangePicker as w } from "../../contexts/date-range-picker/date-range-picker.hook.js";
-import { dateTimeInputsVariants as H } from "./DateTimeInputs.variants.js";
-import { EndInputFields as P } from "./components/EndInputFields/EndInputFields.js";
-import { StartInputFields as R } from "./components/StartInputFields/StartInputFields.js";
-import { useDateTimeInputs as $ } from "./hooks/useDateTimeInputs.js";
-import { Fragment as q, jsx as e, jsxs as m } from "react/jsx-runtime";
-var M = ({ className: u, labelStartDate: s = "Start date", labelEndDate: D = "End date", labelTime: r = "Time", requiredDates: d = !1, ariaLabelStartDate: h = "Start date", ariaLabelEndDate: p = "End date", errorInvalidDate: c = "Invalid date", errorDateNotAvailable: g = "Date is not available", classNames: a }) => {
-  const { numberOfMonths: T } = w(), { timeFormat: i, showTime: t, name: n, disabled: o, time: l, startDateValue: f, startDateError: E, handleStartDateFocus: V, handleStartDateChange: C, handleStartDateBlur: F, handleStartTimeChange: I, endDateValue: S, endDateError: b, handleEndDateFocus: v, handleEndDateChange: y, handleEndDateBlur: B, handleEndTimeChange: L, startHiddenValue: k, endHiddenValue: x } = $({
-    errorInvalidDate: c,
-    errorDateNotAvailable: g
+import { t as w } from "../../../../utils-B-6R7kNE.js";
+import { useDateRangePicker as H } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { dateTimeInputsVariants as P } from "./DateTimeInputs.variants.js";
+import { EndInputFields as R } from "./components/EndInputFields/EndInputFields.js";
+import { StartInputFields as $ } from "./components/StartInputFields/StartInputFields.js";
+import { useDateTimeInputs as q } from "./hooks/useDateTimeInputs.js";
+import { Fragment as M, jsx as e, jsxs as u } from "react/jsx-runtime";
+var O = ({ autoComplete: r, className: s, labelStartDate: D = "Start date", labelEndDate: h = "End date", labelTime: d = "Time", requiredDates: i = !1, ariaLabelStartDate: p = "Start date", ariaLabelEndDate: c = "End date", errorInvalidDate: g = "Invalid date", errorDateNotAvailable: T = "Date is not available", classNames: a }) => {
+  const { numberOfMonths: f } = H(), { timeFormat: o, showTime: t, name: n, disabled: l, time: m, startDateValue: E, startDateError: V, handleStartDateFocus: F, handleStartDateChange: C, handleStartDateBlur: I, handleStartTimeChange: S, endDateValue: b, endDateError: v, handleEndDateFocus: y, handleEndDateChange: B, handleEndDateBlur: L, handleEndTimeChange: k, startHiddenValue: x, endHiddenValue: j } = q({
+    errorInvalidDate: g,
+    errorDateNotAvailable: T
   });
-  return /* @__PURE__ */ m("div", {
-    className: j(H({
-      layout: T === 2 ? "row" : t ? "stacked" : "compact",
-      className: u
+  return /* @__PURE__ */ u("div", {
+    className: w(P({
+      layout: f === 2 ? "row" : t ? "stacked" : "compact",
+      className: s
     }), a?.root),
     children: [
-      /* @__PURE__ */ e(R, {
-        dateValue: f,
-        timeValue: l.startTime,
-        error: E,
-        disabled: o,
+      /* @__PURE__ */ e($, {
+        autoComplete: r,
+        dateValue: E,
+        timeValue: m.startTime,
+        error: V,
+        disabled: l,
         showTime: t,
-        timeFormat: i,
-        labelDate: s,
-        labelTime: r,
-        required: d,
-        ariaLabelDate: h,
+        timeFormat: o,
+        labelDate: D,
+        labelTime: d,
+        required: i,
+        ariaLabelDate: p,
         onDateChange: C,
-        onDateFocus: V,
-        onDateBlur: F,
-        onTimeChange: I,
+        onDateFocus: F,
+        onDateBlur: I,
+        onTimeChange: S,
         classNames: a
       }),
-      /* @__PURE__ */ e(P, {
-        dateValue: S,
-        timeValue: l.endTime,
-        error: b,
-        disabled: o,
+      /* @__PURE__ */ e(R, {
+        autoComplete: r,
+        dateValue: b,
+        timeValue: m.endTime,
+        error: v,
+        disabled: l,
         showTime: t,
-        timeFormat: i,
-        labelDate: D,
-        labelTime: r,
-        required: d,
-        ariaLabelDate: p,
-        onDateChange: y,
-        onDateFocus: v,
-        onDateBlur: B,
-        onTimeChange: L,
+        timeFormat: o,
+        labelDate: h,
+        labelTime: d,
+        required: i,
+        ariaLabelDate: c,
+        onDateChange: B,
+        onDateFocus: y,
+        onDateBlur: L,
+        onTimeChange: k,
         classNames: a
       }),
-      n && /* @__PURE__ */ m(q, { children: [/* @__PURE__ */ e("input", {
+      n && /* @__PURE__ */ u(M, { children: [/* @__PURE__ */ e("input", {
         type: "hidden",
         name: `${n}-start`,
-        value: k
+        value: x
       }), /* @__PURE__ */ e("input", {
         type: "hidden",
         name: `${n}-end`,
-        value: x
+        value: j
       })] })
     ]
   });
 };
-M.displayName = "DateRangePickerDateTimeInputs";
+O.displayName = "DateRangePickerDateTimeInputs";
 export {
-  M as DateTimeInputs
+  O as DateTimeInputs
 };

package/dist/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.js

@@ -1,56 +1,57 @@
-import { t as g } from "../../../../../../Input-is8n7emP.js";
+import { t as F } from "../../../../../../Input-is8n7emP.js";
 import { t as e } from "../../../../../../utils-B-6R7kNE.js";
 import { Typography as p } from "../../../../../Typography/Typography.js";
-import { TimePicker as F } from "../../../../../TimePicker/TimePicker.js";
-import { dateInputWrapperVariants as W, dateTimeGroupVariants as y, inputLabelVariants as l, inputRequiredMarkVariants as C, timeInputWrapperVariants as L } from "../../DateTimeInputs.variants.js";
-import { useId as N } from "react";
+import { TimePicker as W } from "../../../../../TimePicker/TimePicker.js";
+import { dateInputWrapperVariants as y, dateTimeGroupVariants as C, inputLabelVariants as l, inputRequiredMarkVariants as L, timeInputWrapperVariants as N } from "../../DateTimeInputs.variants.js";
+import { useId as j } from "react";
 import { jsx as a, jsxs as t } from "react/jsx-runtime";
-var j = ({ dateValue: m, timeValue: d, error: u, disabled: n, showTime: i, timeFormat: s = "24", labelDate: c = "End date", labelTime: f = "Time", required: h = !1, ariaLabelDate: I = "End date", ariaLabelTime: b = "End time", onDateChange: v, onDateFocus: x, onDateBlur: E, onTimeChange: V, classNames: r }) => {
-  const o = `${N()}-time`;
+var k = ({ autoComplete: m = "off", dateValue: d, timeValue: u, error: s, disabled: n, showTime: i, timeFormat: c = "24", labelDate: f = "End date", labelTime: h = "Time", required: I = !1, ariaLabelDate: b = "End date", ariaLabelTime: v = "End time", onDateChange: x, onDateFocus: E, onDateBlur: V, onTimeChange: g, classNames: r }) => {
+  const o = `${j()}-time`;
   return /* @__PURE__ */ t("div", {
-    className: e(y(), !i && "w-auto flex-1", r?.group),
+    className: e(C(), !i && "w-auto flex-1", r?.group),
     children: [/* @__PURE__ */ t("div", {
-      className: e(W(), !i && "w-full flex-1", r?.dateWrapper),
+      className: e(y(), !i && "w-full flex-1", r?.dateWrapper),
       children: [/* @__PURE__ */ t(p, {
         component: "label",
         className: e(l(), r?.label),
-        children: [c, h && /* @__PURE__ */ a("span", {
+        children: [f, I && /* @__PURE__ */ a("span", {
           "aria-hidden": !0,
-          className: e(C()),
+          className: e(L()),
           children: "*"
         })]
-      }), /* @__PURE__ */ a(g, {
-        value: m,
-        onChange: v,
-        onFocus: x,
-        onBlur: E,
-        error: u,
+      }), /* @__PURE__ */ a(F, {
+        value: d,
+        onChange: x,
+        onFocus: E,
+        onBlur: V,
+        error: s,
         disabled: n,
         className: e(r?.input),
-        "aria-label": I
+        "aria-label": b,
+        autoComplete: m
       })]
     }), i && /* @__PURE__ */ t("div", {
-      className: e(L(), r?.timeWrapper),
+      className: e(N(), r?.timeWrapper),
       children: [/* @__PURE__ */ a(p, {
         component: "label",
         htmlFor: o,
         className: e(l(), r?.label),
-        children: f
-      }), /* @__PURE__ */ a(F, {
+        children: h
+      }), /* @__PURE__ */ a(W, {
         mode: "input",
         showList: !0,
-        format: s,
-        time: d,
-        onChange: V,
+        format: c,
+        time: u,
+        onChange: g,
         disabled: n,
-        ariaLabel: b,
+        ariaLabel: v,
         id: o,
         name: "end time"
       })]
     })]
   });
 };
-j.displayName = "EndInputFields";
+k.displayName = "EndInputFields";
 export {
-  j as EndInputFields
+  k as EndInputFields
 };

package/dist/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.js

@@ -1,56 +1,57 @@
-import { t as g } from "../../../../../../Input-is8n7emP.js";
+import { t as F } from "../../../../../../Input-is8n7emP.js";
 import { t } from "../../../../../../utils-B-6R7kNE.js";
 import { Typography as p } from "../../../../../Typography/Typography.js";
-import { TimePicker as F } from "../../../../../TimePicker/TimePicker.js";
-import { dateInputWrapperVariants as W, dateTimeGroupVariants as y, inputLabelVariants as l, inputRequiredMarkVariants as C, timeInputWrapperVariants as L } from "../../DateTimeInputs.variants.js";
-import { useId as N } from "react";
+import { TimePicker as W } from "../../../../../TimePicker/TimePicker.js";
+import { dateInputWrapperVariants as y, dateTimeGroupVariants as C, inputLabelVariants as l, inputRequiredMarkVariants as L, timeInputWrapperVariants as N } from "../../DateTimeInputs.variants.js";
+import { useId as j } from "react";
 import { jsx as a, jsxs as e } from "react/jsx-runtime";
-var j = ({ dateValue: m, timeValue: d, error: u, disabled: n, showTime: i, timeFormat: s = "24", labelDate: c = "Start date", labelTime: f = "Time", required: h = !1, ariaLabelDate: I = "Start date", ariaLabelTime: b = "Start time", onDateChange: v, onDateFocus: x, onDateBlur: S, onTimeChange: V, classNames: r }) => {
-  const o = `${N()}-time`;
+var k = ({ autoComplete: m = "off", dateValue: d, timeValue: u, error: s, disabled: n, showTime: i, timeFormat: c = "24", labelDate: f = "Start date", labelTime: h = "Time", required: I = !1, ariaLabelDate: b = "Start date", ariaLabelTime: v = "Start time", onDateChange: x, onDateFocus: S, onDateBlur: V, onTimeChange: g, classNames: r }) => {
+  const o = `${j()}-time`;
   return /* @__PURE__ */ e("div", {
-    className: t(y(), !i && "w-auto flex-1", r?.group),
+    className: t(C(), !i && "w-auto flex-1", r?.group),
     children: [/* @__PURE__ */ e("div", {
-      className: t(W(), !i && "w-full flex-1", r?.dateWrapper),
+      className: t(y(), !i && "w-full flex-1", r?.dateWrapper),
       children: [/* @__PURE__ */ e(p, {
         component: "label",
         className: t(l(), r?.label),
-        children: [c, h && /* @__PURE__ */ a("span", {
+        children: [f, I && /* @__PURE__ */ a("span", {
           "aria-hidden": !0,
-          className: t(C()),
+          className: t(L()),
           children: "*"
         })]
-      }), /* @__PURE__ */ a(g, {
-        value: m,
-        onChange: v,
-        onFocus: x,
-        onBlur: S,
-        error: u,
+      }), /* @__PURE__ */ a(F, {
+        value: d,
+        onChange: x,
+        onFocus: S,
+        onBlur: V,
+        error: s,
         disabled: n,
         className: t(r?.input),
-        "aria-label": I
+        "aria-label": b,
+        autoComplete: m
       })]
     }), i && /* @__PURE__ */ e("div", {
-      className: t(L(), r?.timeWrapper),
+      className: t(N(), r?.timeWrapper),
       children: [/* @__PURE__ */ a(p, {
         component: "label",
         htmlFor: o,
         className: t(l(), r?.label),
-        children: f
-      }), /* @__PURE__ */ a(F, {
+        children: h
+      }), /* @__PURE__ */ a(W, {
         mode: "input",
         showList: !0,
-        format: s,
-        time: d,
-        onChange: V,
+        format: c,
+        time: u,
+        onChange: g,
         disabled: n,
-        ariaLabel: b,
+        ariaLabel: v,
         id: o,
         name: "start time"
       })]
     })]
   });
 };
-j.displayName = "StartInputFields";
+k.displayName = "StartInputFields";
 export {
-  j as StartInputFields
+  k as StartInputFields
 };

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

@@ -1,16 +1,16 @@
 import { t as l } from "../../../../utils-B-6R7kNE.js";
 import { useFilterContext as f } from "../../contexts/filter.hook.js";
-import { i as p, n as c, r as h, t as g } from "../../../../dist-BnCbAI-c.js";
+import { a as p, i as c, n as h, r as g } from "../../../../dist-ByCJijZd.js";
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
 var j = ({ isOpen: t, trigger: r, triggerClassName: o, position: a = "left", contentClassName: n, children: s, onOpenChange: i }) => {
   const { theme: m } = f();
-  return /* @__PURE__ */ u(h, {
+  return /* @__PURE__ */ u(c, {
     open: t,
     onOpenChange: i,
     children: [/* @__PURE__ */ e(p, {
       className: o,
       children: r
-    }), /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(g, {
+    }), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(h, {
       "data-theme": m,
       side: "bottom",
       sideOffset: 4,