@ck-ui/component-library 2.0.3 → 2.0.4

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,61 +1,65 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import * as _ from "react";
-import { useMemo as R, useState as L, useRef as oe, useEffect as K, useCallback as X, useLayoutEffect as Se } from "react";
-import { CKButton as A } from "../CKButton/index.js";
+import { jsxs as C, jsx as l } from "react/jsx-runtime";
+import * as k from "react";
+import { useMemo as R, useState as y, useRef as oe, useEffect as q, useCallback as X, useLayoutEffect as Se } from "react";
+import { CKButton as $ } from "../CKButton/index.js";
 import { CKTag as le } from "../CKTag/index.js";
 import { Tooltip as Re } from "../Tooltip/index.js";
-import { S as je, C as Le } from "../../CalendarGrid-DzsGX04L.js";
-import { normalizeDefinedRanges as z, isSameDay as D, detectMatchingPreset as pe, getDefaultDefinedRanges as me, normalizeDateForMUI as W, getPresetStartDate as x, detectMatchingDefinedRange as ye, clampDefinedRange as ee, getEffectiveEnd as te, formatWithPattern as Pe, formatToMonthDayYear as Ne } from "./_utils/util.js";
-import { useDropdownDirection as xe } from "../MultiSelect/_utils/useDropdownDirection.js";
-import '../../assets/DateRangePicker-BJW-EAys.css';const Be = (f) => /* @__PURE__ */ _.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ _.createElement("path", { d: "M10.6668 1.3335V4.00016M5.3335 1.3335V4.00016", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M8.66667 2.6665H7.33333C4.81917 2.6665 3.5621 2.6665 2.78105 3.44755C2 4.2286 2 5.48568 2 7.99984V9.33317C2 11.8473 2 13.1044 2.78105 13.8854C3.5621 14.6665 4.81917 14.6665 7.33333 14.6665H8.66667C11.1808 14.6665 12.4379 14.6665 13.2189 13.8854C14 13.1044 14 11.8473 14 9.33317V7.99984C14 5.48568 14 4.2286 13.2189 3.44755C12.4379 2.6665 11.1808 2.6665 8.66667 2.6665Z", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M2 6.6665H14", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M7.99716 9.3335H8.00316M7.99716 12.0002H8.00316M10.6608 9.3335H10.6668M5.3335 9.3335H5.33948M5.3335 12.0002H5.33948", stroke: "#2B2B2B", strokeWidth: 0.666667, strokeLinecap: "round", strokeLinejoin: "round" })), ze = (f) => /* @__PURE__ */ _.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ _.createElement("g", { clipPath: "url(#clip0_7800_479)" }, /* @__PURE__ */ _.createElement("path", { d: "M11 6C11 8.76 8.76 11 6 11C3.24 11 1.555 8.22 1.555 8.22M1.555 10.72V8.22H3.815M1 6C1 3.24 3.22 1 6 1C9.335 1 11 3.78 11 3.78M8.78 3.78H11V1.28", stroke: "#737373", strokeWidth: 0.57, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ _.createElement("defs", null, /* @__PURE__ */ _.createElement("clipPath", { id: "clip0_7800_479" }, /* @__PURE__ */ _.createElement("rect", { width: 12, height: 12, fill: "white" })))), Ae = (f) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...f }, /* @__PURE__ */ _.createElement("path", { d: "M9.61984 3.95312L13.6665 7.9998L9.61984 12.0465", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M2.33324 8H13.5532", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" })), c = {
-  "ckds-date-range-picker": "_ckds-date-range-picker_1jemp_2",
-  "ckds-date-range-picker--open": "_ckds-date-range-picker--open_1jemp_27",
-  "ckds-date-range-picker__body": "_ckds-date-range-picker__body_1jemp_40",
-  "ckds-date-range-picker__sidebar": "_ckds-date-range-picker__sidebar_1jemp_48",
-  "ckds-date-range-picker__sidebar-item": "_ckds-date-range-picker__sidebar-item_1jemp_59",
-  "ckds-date-range-picker__sidebar-item--active": "_ckds-date-range-picker__sidebar-item--active_1jemp_100",
-  "ckds-date-range-picker__calendar": "_ckds-date-range-picker__calendar_1jemp_114",
-  "ckds-date-range-picker__calendar--align-left": "_ckds-date-range-picker__calendar--align-left_1jemp_128",
-  "ckds-date-range-picker__calendar--align-right": "_ckds-date-range-picker__calendar--align-right_1jemp_131",
-  "ckds-date-range-picker__calendar--enter": "_ckds-date-range-picker__calendar--enter_1jemp_134",
-  "ckds-date-range-picker__main": "_ckds-date-range-picker__main_1jemp_139",
-  "ckds-date-range-picker__footer": "_ckds-date-range-picker__footer_1jemp_147",
-  "ckds-date-range-picker__date-inputs": "_ckds-date-range-picker__date-inputs_1jemp_156",
-  "ckds-date-range-picker__date-field": "_ckds-date-range-picker__date-field_1jemp_162",
-  "ckds-date-range-picker__date-label": "_ckds-date-range-picker__date-label_1jemp_168",
-  "ckds-date-range-picker__required-asterisk": "_ckds-date-range-picker__required-asterisk_1jemp_176",
-  "ckds-date-range-picker__date-tag": "_ckds-date-range-picker__date-tag_1jemp_187",
-  "ckds-date-range-picker__date-arrow": "_ckds-date-range-picker__date-arrow_1jemp_200",
-  "ckds-date-range-picker__reset-btn": "_ckds-date-range-picker__reset-btn_1jemp_207",
-  "ckds-date-range-picker__actions": "_ckds-date-range-picker__actions_1jemp_218"
+import { S as Le, C as ye } from "../../CalendarGrid-Cu-E76sM.js";
+import { normalizeDefinedRanges as Y, isSameDay as _, detectMatchingPreset as ge, getDefaultDefinedRanges as pe, normalizeDateForMUI as F, getPresetStartDate as A, detectMatchingDefinedRange as Ne, clampDefinedRange as ee, getEffectiveEnd as te, formatWithPattern as Pe, formatToMonthDayYear as Be } from "./_utils/util.js";
+import { useDropdownDirection as Ae } from "../MultiSelect/_utils/useDropdownDirection.js";
+import '../../assets/DateRangePicker-FyjycaFJ.css';const ze = (f) => /* @__PURE__ */ k.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ k.createElement("path", { d: "M10.6668 1.3335V4.00016M5.3335 1.3335V4.00016", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M8.66667 2.6665H7.33333C4.81917 2.6665 3.5621 2.6665 2.78105 3.44755C2 4.2286 2 5.48568 2 7.99984V9.33317C2 11.8473 2 13.1044 2.78105 13.8854C3.5621 14.6665 4.81917 14.6665 7.33333 14.6665H8.66667C11.1808 14.6665 12.4379 14.6665 13.2189 13.8854C14 13.1044 14 11.8473 14 9.33317V7.99984C14 5.48568 14 4.2286 13.2189 3.44755C12.4379 2.6665 11.1808 2.6665 8.66667 2.6665Z", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M2 6.6665H14", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M7.99716 9.3335H8.00316M7.99716 12.0002H8.00316M10.6608 9.3335H10.6668M5.3335 9.3335H5.33948M5.3335 12.0002H5.33948", stroke: "#2B2B2B", strokeWidth: 0.666667, strokeLinecap: "round", strokeLinejoin: "round" })), Ye = (f) => /* @__PURE__ */ k.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ k.createElement("g", { clipPath: "url(#clip0_7800_479)" }, /* @__PURE__ */ k.createElement("path", { d: "M11 6C11 8.76 8.76 11 6 11C3.24 11 1.555 8.22 1.555 8.22M1.555 10.72V8.22H3.815M1 6C1 3.24 3.22 1 6 1C9.335 1 11 3.78 11 3.78M8.78 3.78H11V1.28", stroke: "#737373", strokeWidth: 0.57, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ k.createElement("defs", null, /* @__PURE__ */ k.createElement("clipPath", { id: "clip0_7800_479" }, /* @__PURE__ */ k.createElement("rect", { width: 12, height: 12, fill: "white" })))), $e = (f) => /* @__PURE__ */ k.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...f }, /* @__PURE__ */ k.createElement("path", { d: "M9.61984 3.95312L13.6665 7.9998L9.61984 12.0465", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M2.33324 8H13.5532", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" })), c = {
+  "ckds-date-range-picker": "_ckds-date-range-picker_c7vpb_2",
+  "ckds-date-range-picker--open": "_ckds-date-range-picker--open_c7vpb_27",
+  "ckds-date-range-picker__body": "_ckds-date-range-picker__body_c7vpb_40",
+  "ckds-date-range-picker__sidebar": "_ckds-date-range-picker__sidebar_c7vpb_48",
+  "ckds-date-range-picker__sidebar-item": "_ckds-date-range-picker__sidebar-item_c7vpb_59",
+  "ckds-date-range-picker__sidebar-item--active": "_ckds-date-range-picker__sidebar-item--active_c7vpb_100",
+  "ckds-date-range-picker__calendar": "_ckds-date-range-picker__calendar_c7vpb_114",
+  "ckds-date-range-picker__calendar--align-left": "_ckds-date-range-picker__calendar--align-left_c7vpb_128",
+  "ckds-date-range-picker__calendar--align-right": "_ckds-date-range-picker__calendar--align-right_c7vpb_131",
+  "ckds-date-range-picker__calendar--enter": "_ckds-date-range-picker__calendar--enter_c7vpb_134",
+  "ckds-date-range-picker__main": "_ckds-date-range-picker__main_c7vpb_139",
+  "ckds-date-range-picker__footer": "_ckds-date-range-picker__footer_c7vpb_147",
+  "ckds-date-range-picker__date-inputs": "_ckds-date-range-picker__date-inputs_c7vpb_156",
+  "ckds-date-range-picker__date-field": "_ckds-date-range-picker__date-field_c7vpb_162",
+  "ckds-date-range-picker__date-label": "_ckds-date-range-picker__date-label_c7vpb_168",
+  "ckds-date-range-picker__required-asterisk": "_ckds-date-range-picker__required-asterisk_c7vpb_176",
+  "ckds-date-range-picker__date-tag": "_ckds-date-range-picker__date-tag_c7vpb_187",
+  "ckds-date-range-picker__date-arrow": "_ckds-date-range-picker__date-arrow_c7vpb_200",
+  "ckds-date-range-picker__reset-btn": "_ckds-date-range-picker__reset-btn_c7vpb_207",
+  "ckds-date-range-picker__actions": "_ckds-date-range-picker__actions_c7vpb_218"
 };
-function Ye(f) {
-  return Ne(f);
+function xe(f) {
+  return Be(f);
 }
-const $e = ({ ranges: f, activeLabel: q, onSelect: i }) => /* @__PURE__ */ l("div", { className: c["ckds-date-range-picker__sidebar"], children: f.map((v) => /* @__PURE__ */ l(
-  A,
+const He = ({
+  ranges: f,
+  activeLabel: W,
+  onSelect: i
+}) => /* @__PURE__ */ l("div", { className: c["ckds-date-range-picker__sidebar"], children: f.map((M) => /* @__PURE__ */ l(
+  $,
   {
     type: "button",
-    className: `${c["ckds-date-range-picker__sidebar-item"]} ${q === v.label ? c["ckds-date-range-picker__sidebar-item--active"] : ""}`,
-    onClick: () => i(v),
-    label: v.label,
-    "aria-label": v.label
+    className: `${c["ckds-date-range-picker__sidebar-item"]} ${W === M.label ? c["ckds-date-range-picker__sidebar-item--active"] : ""}`,
+    onClick: () => i(M),
+    label: M.label,
+    "aria-label": M.label
   },
-  v.label
+  M.label
 )) }), Ge = ({
   onChange: f,
-  onClear: q,
+  onClear: W,
   value: i,
-  label: v = "Select date range",
-  minDate: Y,
-  maxDate: $,
+  label: M = "Select date range",
+  minDate: x,
+  maxDate: H,
   startDate: ae,
   endDate: ne,
-  className: ge = "",
+  className: De = "",
   disabled: re = !1,
-  error: De = !1,
+  error: _e = !1,
   definedRanges: T,
-  size: _e = "medium",
+  size: ke = "medium",
   dateFormat: G,
   resetDisabled: se,
   defaultRange: O
@@ -73,185 +77,239 @@ const $e = ({ ranges: f, activeLabel: q, onSelect: i }) => /* @__PURE__ */ l("di
     "month to date": "Month to Date",
     ytd: "Year to Date",
     "year to date": "Year to Date"
-  }, g = R(() => {
+  }, D = R(() => {
     if (!O) return null;
-    const e = O.toLowerCase(), t = z(T);
+    const e = O.toLowerCase(), t = Y(T);
     if (t && t.length > 0) {
       const n = t.find((a) => a.label.toLowerCase() === e);
       if (n) return n.label;
     }
     return ie[e] ? ie[e] : null;
   }, [O, T]), de = (() => {
-    const e = z(T), t = !!(e && e.length > 0);
+    const e = Y(T), t = !!(e && e.length > 0);
     if (i?.startDate && i?.endDate) {
       const n = i.startDate instanceof Date ? i.startDate : new Date(i.startDate), a = i.endDate instanceof Date ? i.endDate : new Date(i.endDate);
       if (t) {
         const d = e.find(
-          (o) => o.label !== "Custom" && o.startDate && o.endDate && D(n, o.startDate) && D(a, o.endDate)
+          (o) => o.label !== "Custom" && o.startDate && o.endDate && _(n, o.startDate) && _(a, o.endDate)
         );
         if (d) return d.label;
       } else {
-        const d = Y ? new Date(Y) : void 0, o = $ ? new Date($) : void 0, C = pe({ startDate: n, endDate: a }, d, o);
-        if (C) return C;
+        const d = x ? new Date(x) : void 0, o = H ? new Date(H) : void 0, v = ge(
+          { startDate: n, endDate: a },
+          d,
+          o
+        );
+        if (v) return v;
       }
       return "Custom";
     }
-    return g || "Custom";
-  })(), [w, B] = L(!1), [y, E] = L(de), [ke, P] = L(0), [k, Z] = L(i), [fe, S] = L(!1), [H, he] = L(de), F = oe(null), J = oe(null), { horizontal: ue } = xe(F, w, 400, 820), j = R(
-    () => {
-      const e = z(T);
-      if (e && e.length > 0) {
-        if (e.some((n) => n.label === "Custom")) return e;
-        const t = /* @__PURE__ */ new Date();
-        return [
-          { label: "Custom", startDate: t, endDate: t },
-          ...e
-        ];
-      }
-      return me();
-    },
-    [T]
-  ), N = R(() => {
-    const e = z(T);
+    return D || "Custom";
+  })(), [w, z] = y(!1), [N, E] = y(
+    de
+  ), [me, P] = y(0), [m, Z] = y(i), [fe, S] = y(!1), [j, he] = y(
+    de
+  ), U = oe(null), J = oe(null), { horizontal: ue } = Ae(
+    U,
+    w,
+    400,
+    820
+  ), L = R(() => {
+    const e = Y(T);
+    if (e && e.length > 0) {
+      if (e.some((n) => n.label === "Custom")) return e;
+      const t = /* @__PURE__ */ new Date();
+      return [
+        { label: "Custom", startDate: t, endDate: t },
+        ...e
+      ];
+    }
+    return pe();
+  }, [T]), B = R(() => {
+    const e = Y(T);
     return !!(e && e.length > 0);
-  }, [T]), r = R(() => W(Y), [Y]), s = R(() => W($), [$]), h = R(() => W(ae), [ae]), u = R(() => W(ne), [ne]), m = R(() => {
+  }, [T]), r = R(
+    () => F(x),
+    [x]
+  ), s = R(
+    () => F(H),
+    [H]
+  ), h = R(
+    () => F(ae),
+    [ae]
+  ), u = R(
+    () => F(ne),
+    [ne]
+  ), p = R(() => {
     if (h && u) {
       let e = h.getTime() <= u.getTime() ? new Date(h) : new Date(u), t = h.getTime() <= u.getTime() ? new Date(u) : new Date(h);
       return r && e.getTime() < r.getTime() && (e = new Date(r)), s && t.getTime() > s.getTime() && (t = new Date(s)), { startDate: e, endDate: t };
     }
     if (i?.startDate || i?.endDate) return i;
     if (r || s) {
-      const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date(), t = g ?? "6 Months";
-      let n = x(t, e);
+      const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date(), t = D ?? "6 Months";
+      let n = A(t, e);
       if (!n) {
-        const d = z(T), C = (d && d.length > 0 ? d : me()).find((Ee) => Ee.label === t);
-        C?.startDate && (n = new Date(C.startDate));
+        const d = Y(T), v = (d && d.length > 0 ? d : pe()).find((Ee) => Ee.label === t);
+        v?.startDate && (n = new Date(v.startDate));
       }
-      let a = n ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
+      let a = n ?? new Date(
+        e.getFullYear(),
+        e.getMonth() - 6,
+        e.getDate()
+      );
       return r && a.getTime() < r.getTime() && (a = new Date(r)), { startDate: a, endDate: e };
     }
-  }, [i, h, u, r, s, g]), [p, b] = L(m), ce = m ? `${m.startDate?.getTime()}_${m.endDate?.getTime()}` : "";
-  K(() => {
-    m?.startDate && m?.endDate && (b({
-      startDate: new Date(m.startDate),
-      endDate: new Date(m.endDate)
+  }, [
+    i,
+    h,
+    u,
+    r,
+    s,
+    D
+  ]), [g, b] = y(
+    p
+  ), ce = p ? `${p.startDate?.getTime()}_${p.endDate?.getTime()}` : "";
+  q(() => {
+    p?.startDate && p?.endDate && (b({
+      startDate: new Date(p.startDate),
+      endDate: new Date(p.endDate)
     }), P((e) => e + 1));
-  }, [ce]), K(() => {
-    if (!g || m?.startDate) return;
-    const e = j.find((t) => t.label === g);
+  }, [ce]), q(() => {
+    if (!D || p?.startDate) return;
+    const e = L.find(
+      (t) => t.label === D
+    );
     if (e && e.label !== "Custom") {
-      const t = U(e);
+      const t = I(e);
       b(t), Z(t), P((n) => n + 1);
     }
   }, []), Se(() => {
     if (!w) return;
-    const e = g ? j.find((a) => a.label === g) : void 0, t = m ?? (e ? U(e) : void 0);
+    const e = D ? L.find((a) => a.label === D) : void 0, t = p ?? (e ? I(e) : void 0);
     b(t);
-    const n = H !== "Custom" ? H : t?.startDate ? I(t) ?? "Custom" : "Custom";
+    const n = j !== "Custom" ? j : t?.startDate ? V(t) ?? "Custom" : "Custom";
     E(n), P((a) => a + 1);
-  }, [w, ce]), K(() => {
+  }, [w, ce]), q(() => {
     i?.startDate && i?.endDate && Z(i);
-  }, [i]), K(() => {
+  }, [i]), q(() => {
     if (!w) return;
     const e = (t) => {
-      J.current && !J.current.contains(t.target) && F.current && !F.current.contains(t.target) && B(!1);
+      J.current && !J.current.contains(t.target) && U.current && !U.current.contains(t.target) && z(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, [w]);
   const we = () => {
-    re || (w || S(!1), B((e) => !e));
+    re || (w || S(!1), z((e) => !e));
   }, be = () => {
-    if (p && y && y !== "Custom") {
-      const e = j.find((t) => t.label === y);
+    if (g && N && N !== "Custom") {
+      const e = L.find(
+        (t) => t.label === N
+      );
       if (e && e.label !== "Custom") {
         let t = !0;
-        if (N) {
+        if (B) {
           const n = new Date(e.startDate), a = new Date(e.endDate), { startDate: d, endDate: o } = ee(
             e,
             r,
             s
           );
-          t = D(n, d) && D(a, o);
+          t = _(n, d) && _(a, o);
         } else {
-          const n = te(s), a = x(e.label, n);
+          const n = te(s), a = A(
+            e.label,
+            n
+          );
           a && r && a.getTime() < r.getTime() && (t = !1), s && n.getTime() > s.getTime() && (t = !1);
         }
         if (!t) {
-          const n = H ?? g ?? "Custom";
-          b(k ?? m), E(n), S(!1), P((d) => d + 1), B(!1);
+          const n = j ?? D ?? "Custom";
+          b(m ?? p), E(n), S(!1), P((d) => d + 1), z(!1);
           return;
         }
       }
     }
-    if (p) {
-      const e = y ?? I(p) ?? "Custom";
-      Z(p), he(e), E(e), f(p, e);
+    if (g) {
+      const e = N ?? V(g) ?? "Custom";
+      Z(g), he(e), E(e), f(g, e);
     }
-    B(!1);
-  }, Ce = () => {
-    b(k ?? i), B(!1);
-  }, I = X(
-    (e) => N ? ye(
+    z(!1);
+  }, ve = () => {
+    b(m ?? i), z(!1);
+  }, V = X(
+    (e) => B ? Ne(
       e,
-      j,
+      L,
       r,
       s
-    ) : pe(e, r, s),
-    [N, j, s, r]
-  ), U = X((e) => {
-    let t, n;
-    if (N)
-      ({ startDate: t, endDate: n } = ee(e, r, s));
-    else {
-      const a = te(s);
-      n = a, t = x(e.label, a) ?? new Date(e.startDate), r && t.getTime() < r.getTime() && (t = new Date(r));
-    }
-    return { startDate: t, endDate: n };
-  }, [N, r, s]), Me = (e) => {
+    ) : ge(e, r, s),
+    [B, L, s, r]
+  ), I = X(
+    (e) => {
+      let t, n;
+      if (B)
+        ({ startDate: t, endDate: n } = ee(
+          e,
+          r,
+          s
+        ));
+      else {
+        const a = te(s);
+        n = a, t = A(e.label, a) ?? new Date(e.startDate), r && t.getTime() < r.getTime() && (t = new Date(r));
+      }
+      return { startDate: t, endDate: n };
+    },
+    [B, r, s]
+  ), Ce = (e) => {
     if (E(e.label), e.label === "Custom") return;
-    const t = U(e);
+    const t = I(e);
     b(t);
     let n = !1;
     if (e.label !== "Custom")
-      if (N) {
-        const a = new Date(e.startDate), d = new Date(e.endDate), { startDate: o, endDate: C } = ee(
-          e,
-          r,
-          s
-        );
-        n = !D(a, o) || !D(d, C);
+      if (B) {
+        const a = new Date(e.startDate), d = new Date(e.endDate), { startDate: o, endDate: v } = ee(e, r, s);
+        n = !_(a, o) || !_(d, v);
       } else {
-        const a = te(s), d = x(e.label, a);
+        const a = te(s), d = A(e.label, a);
         d && r && d.getTime() < r.getTime() && (n = !0);
       }
     if (n)
       S(!0);
     else {
-      const a = k?.startDate && k?.endDate ? k : m, d = a?.startDate && a?.endDate && t.startDate && t.endDate && D(t.startDate, a.startDate) && D(t.endDate, a.endDate);
+      const a = m?.startDate && m?.endDate ? m : p, d = a?.startDate && a?.endDate && t.startDate && t.endDate && _(t.startDate, a.startDate) && _(t.endDate, a.endDate);
       S(!d);
     }
     P((a) => a + 1);
-  }, ve = () => {
+  }, Me = () => {
     const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date();
     let t;
-    if (g) {
-      const o = j.find((C) => C.label === g);
-      t = o ? U(o) : { startDate: e, endDate: e };
+    if (D) {
+      const o = L.find(
+        (v) => v.label === D
+      );
+      t = o ? I(o) : { startDate: e, endDate: e };
     } else if (h && u)
-      t = m ?? { startDate: new Date(h), endDate: new Date(u) };
+      t = p ?? {
+        startDate: new Date(h),
+        endDate: new Date(u)
+      };
     else {
-      const o = x("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
+      const o = A("6 Months", e) ?? new Date(
+        e.getFullYear(),
+        e.getMonth() - 6,
+        e.getDate()
+      );
       t = { startDate: r && o.getTime() < r.getTime() ? new Date(r) : o, endDate: e };
     }
     b(t);
-    const n = I(t) ?? (g || "Custom");
+    const n = V(t) ?? (D || "Custom");
     E(n);
-    const a = k?.startDate && k?.endDate ? k : m, d = a?.startDate && a?.endDate && t.startDate && t.endDate && D(t.startDate, a.startDate) && D(t.endDate, a.endDate);
-    S(!d), P((o) => o + 1), q?.();
+    const a = m?.startDate && m?.endDate ? m : p, d = a?.startDate && a?.endDate && t.startDate && t.endDate && _(t.startDate, a.startDate) && _(t.endDate, a.endDate);
+    S(!d), P((o) => o + 1), W?.();
   }, Te = (() => {
     if (se !== void 0) return se;
-    if (g)
-      return (w ? y : H) === g;
+    if (D)
+      return (w ? N : j) === D;
     const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date();
     let t, n = e;
     if (h && u)
@@ -260,73 +318,80 @@ const $e = ({ ranges: f, activeLabel: q, onSelect: i }) => /* @__PURE__ */ l("di
       if (!r && !s)
         return !1;
       {
-        const d = x("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
+        const d = A("6 Months", e) ?? new Date(
+          e.getFullYear(),
+          e.getMonth() - 6,
+          e.getDate()
+        );
         t = r && d.getTime() < r.getTime() ? new Date(r) : d;
       }
     }
-    const a = w ? p?.startDate && p?.endDate ? p : void 0 : i?.startDate && i?.endDate ? i : m;
-    return !a?.startDate || !a?.endDate ? !0 : D(a.startDate, t) && D(a.endDate, n);
-  })(), V = X(
-    (e) => e ? G ? Pe(e, G) : Ye(e) : "",
+    const a = w ? g?.startDate && g?.endDate ? g : void 0 : i?.startDate && i?.endDate ? i : p;
+    return !a?.startDate || !a?.endDate ? !0 : _(a.startDate, t) && _(a.endDate, n);
+  })(), K = X(
+    (e) => e ? G ? Pe(e, G) : xe(e) : "",
     [G]
-  ), Q = i?.startDate && i?.endDate ? `${V(i.startDate)} – ${V(i.endDate)}` : v;
-  return /* @__PURE__ */ M(
+  ), Q = i?.startDate && i?.endDate ? `${K(i.startDate)} – ${K(i.endDate)}` : M;
+  return /* @__PURE__ */ C(
     "div",
     {
       "data-testid": "date-range-picker",
-      className: `${c["ckds-date-range-picker"]} ${w ? c["ckds-date-range-picker--open"] : ""} ${ge}`,
-      ref: F,
+      className: `${c["ckds-date-range-picker"]} ${w ? c["ckds-date-range-picker--open"] : ""} ${De}`,
+      ref: U,
       children: [
         /* @__PURE__ */ l(
-          A,
+          $,
           {
             variant: "secondary",
-            error: De,
+            error: _e,
             disabled: re,
             onClick: we,
-            "aria-label": Q === v ? v : `Date range: ${Q}`,
-            size: _e,
+            "aria-label": Q === M ? M : `Date range: ${Q}`,
+            size: ke,
             label: Q,
             icons: {
-              left: /* @__PURE__ */ l(Be, { width: 16, height: 16 }),
-              right: /* @__PURE__ */ l(je, { width: 16, height: 16 })
+              left: /* @__PURE__ */ l(ze, { width: 16, height: 16 }),
+              right: /* @__PURE__ */ l(Le, { width: 16, height: 16 })
             },
             style: { background: "white" }
           }
         ),
-        w && /* @__PURE__ */ M(
+        w && /* @__PURE__ */ C(
           "div",
           {
             ref: J,
             className: `${c["ckds-date-range-picker__calendar"]} ${c["ckds-date-range-picker__calendar--enter"]} ${ue === "right" ? c["ckds-date-range-picker__calendar--align-right"] : c["ckds-date-range-picker__calendar--align-left"]}`,
             children: [
-              /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__body"], children: [
+              /* @__PURE__ */ C("div", { className: c["ckds-date-range-picker__body"], children: [
                 /* @__PURE__ */ l(
-                  $e,
+                  He,
                   {
-                    ranges: j,
-                    activeLabel: y,
-                    onSelect: Me
+                    ranges: L,
+                    activeLabel: N,
+                    onSelect: Ce
                   }
                 ),
                 /* @__PURE__ */ l("div", { className: c["ckds-date-range-picker__main"], children: /* @__PURE__ */ l(
-                  Le,
+                  ye,
                   {
-                    startDate: p?.startDate,
-                    endDate: p?.endDate,
+                    startDate: g?.startDate,
+                    endDate: g?.endDate,
                     onDateClick: (e) => {
-                      if (!p?.startDate || p.startDate && p.endDate)
+                      if (!g?.startDate || g.startDate && g.endDate)
                         b({ startDate: e, endDate: void 0 }), E("Custom"), S(!1);
                       else {
-                        const t = p.startDate;
+                        const t = g.startDate;
                         if (e.getTime() < t.getTime())
                           b({ startDate: e, endDate: void 0 }), E("Custom"), S(!1);
                         else {
-                          const n = { startDate: t, endDate: e };
+                          const n = {
+                            startDate: t,
+                            endDate: e
+                          };
                           b(n);
-                          const a = I(n);
+                          const a = V(n);
                           E(a ?? "Custom");
-                          const d = k?.startDate && k?.endDate && D(t, k.startDate) && D(e, k.endDate);
+                          const d = m?.startDate && m?.endDate && _(t, m.startDate) && _(e, m.endDate);
                           S(!d);
                         }
                       }
@@ -334,71 +399,98 @@ const $e = ({ ranges: f, activeLabel: q, onSelect: i }) => /* @__PURE__ */ l("di
                     minDate: r,
                     maxDate: s
                   },
-                  ke
+                  me
                 ) })
               ] }),
-              /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__footer"], children: [
-                /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__date-inputs"], children: [
-                  /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__date-field"], children: [
-                    /* @__PURE__ */ M("span", { className: c["ckds-date-range-picker__date-label"], children: [
+              /* @__PURE__ */ C("div", { className: c["ckds-date-range-picker__footer"], children: [
+                /* @__PURE__ */ C("div", { className: c["ckds-date-range-picker__date-inputs"], children: [
+                  /* @__PURE__ */ C("div", { className: c["ckds-date-range-picker__date-field"], children: [
+                    /* @__PURE__ */ C("span", { className: c["ckds-date-range-picker__date-label"], children: [
                       "Start Date",
-                      /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__required-asterisk"], children: "*" })
+                      /* @__PURE__ */ l(
+                        "span",
+                        {
+                          className: c["ckds-date-range-picker__required-asterisk"],
+                          children: "*"
+                        }
+                      )
                     ] }),
-                    /* @__PURE__ */ l(le, { size: "small", variation: "NEUTRAL", shape: "pill", fill: "outline", className: c["ckds-date-range-picker__date-tag"], children: V(p?.startDate) || "MM-DD-YYYY" })
+                    /* @__PURE__ */ l(
+                      le,
+                      {
+                        size: "small",
+                        variation: "NEUTRAL",
+                        shape: "pill",
+                        fill: "outline",
+                        className: c["ckds-date-range-picker__date-tag"],
+                        children: K(g?.startDate) || "MM-DD-YYYY"
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__date-arrow"], children: /* @__PURE__ */ l(Ae, {}) }),
-                  /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__date-field"], children: [
-                    /* @__PURE__ */ M("span", { className: c["ckds-date-range-picker__date-label"], children: [
+                  /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__date-arrow"], children: /* @__PURE__ */ l($e, {}) }),
+                  /* @__PURE__ */ C("div", { className: c["ckds-date-range-picker__date-field"], children: [
+                    /* @__PURE__ */ C("span", { className: c["ckds-date-range-picker__date-label"], children: [
                       "End Date",
-                      /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__required-asterisk"], children: "*" })
+                      /* @__PURE__ */ l(
+                        "span",
+                        {
+                          className: c["ckds-date-range-picker__required-asterisk"],
+                          children: "*"
+                        }
+                      )
                     ] }),
-                    /* @__PURE__ */ l(le, { size: "small", variation: "NEUTRAL", shape: "pill", fill: "outline", className: c["ckds-date-range-picker__date-tag"], children: V(p?.endDate) || "MM-DD-YYYY" })
+                    /* @__PURE__ */ l(
+                      le,
+                      {
+                        size: "small",
+                        variation: "NEUTRAL",
+                        shape: "pill",
+                        fill: "outline",
+                        className: c["ckds-date-range-picker__date-tag"],
+                        children: K(g?.endDate) || "MM-DD-YYYY"
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ l(
                     Re,
                     {
                       title: "Reset selection and navigation to default",
                       placement: "top",
-                      slotProps: {
-                        popper: {
-                          sx: {
-                            zIndex: 1e4
-                          }
-                        },
-                        tooltip: {
-                          sx: {
-                            maxWidth: "217px",
-                            whiteSpace: "normal",
-                            backgroundColor: "var(--ckcl-black-350, #676666)",
-                            color: "var(--ckcl-white, #FFFFFF)",
-                            fontSize: "var(--ckcl-fs-3xs, 10px)",
-                            padding: "var(--ckcl-spacing-sm, 8px) var(--ckcl-spacing-ms, 12px)",
-                            borderRadius: "8px",
-                            lineHeight: "var(--ckcl-leading-sm, 16px)",
-                            borderColor: "var(--ckcl-black-350, #676666)",
-                            fontFamily: "Inter",
-                            fontWeight: "400"
-                          }
-                        }
-                      },
                       children: /* @__PURE__ */ l(
-                        A,
+                        $,
                         {
                           variant: "secondary",
                           size: "medium",
-                          onClick: ve,
+                          onClick: Me,
                           disabled: Te,
                           "aria-label": "Reset selection and navigation to default",
                           className: c["ckds-date-range-picker__reset-btn"],
-                          icons: { left: /* @__PURE__ */ l(ze, {}) }
+                          icons: { left: /* @__PURE__ */ l(Ye, {}) }
                         }
                       )
                     }
                   )
                 ] }),
-                /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__actions"], children: [
-                  /* @__PURE__ */ l(A, { variant: "secondary", label: "Cancel", size: "medium", onClick: Ce }),
-                  /* @__PURE__ */ l(A, { variant: "primary", label: "Apply", size: "medium", onClick: be, disabled: !fe || !p?.startDate || !p?.endDate })
+                /* @__PURE__ */ C("div", { className: c["ckds-date-range-picker__actions"], children: [
+                  /* @__PURE__ */ l(
+                    $,
+                    {
+                      variant: "secondary",
+                      label: "Cancel",
+                      size: "medium",
+                      onClick: ve
+                    }
+                  ),
+                  /* @__PURE__ */ l(
+                    $,
+                    {
+                      variant: "primary",
+                      label: "Apply",
+                      size: "medium",
+                      onClick: be,
+                      disabled: !fe || !g?.startDate || !g?.endDate
+                    }
+                  )
                 ] })
               ] })
             ]