se-design 1.0.79 → 1.0.81-dev1

package/dist/index51.js

@@ -1,19 +1,19 @@
-import r, { useState as T } from "react";
+import r, { useState as S } from "react";
 import { Button as z } from "./index4.js";
 import { Icon as _ } from "./index6.js";
 import { Dropdown as te } from "./index25.js";
-import { useDatePickerA11y as He, formatDateId as Le, getCellAriaLabel as Pe } from "./index237.js";
+import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index241.js";
 /* empty css         */
-function O() {
-  return O = Object.assign ? Object.assign.bind() : function(h) {
+function T() {
+  return T = Object.assign ? Object.assign.bind() : function(p) {
     for (var m = 1; m < arguments.length; m++) {
       var v = arguments[m];
-      for (var w in v) ({}).hasOwnProperty.call(v, w) && (h[w] = v[w]);
+      for (var w in v) ({}).hasOwnProperty.call(v, w) && (p[w] = v[w]);
     }
-    return h;
-  }, O.apply(null, arguments);
+    return p;
+  }, T.apply(null, arguments);
 }
-const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], Oe = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], q = [{
+const Oe = ["S", "M", "T", "W", "T", "F", "S"], Se = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], Te = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], q = [{
   value: "january",
   label: "January"
 }, {
@@ -49,30 +49,30 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
 }, {
   value: "december",
   label: "December"
-}], Se = (h, m) => new Date(h, m + 1, 0).getDate(), Re = (h, m) => new Date(h, m, 1).getDay(), ze = ({
-  title: h = "Select modified date",
+}], Re = (p, m) => new Date(p, m + 1, 0).getDate(), je = (p, m) => new Date(p, m, 1).getDay(), ze = ({
+  title: p = "Select modified date",
   // isOpen = true,
   showHeader: m = !0,
   initialStartDate: v,
   initialEndDate: w,
-  onApply: S = () => {
+  onApply: R = () => {
   },
-  onClose: R,
+  onClose: j,
   shouldAllowFutureDateSelection: F = !1,
-  maxDays: d,
-  disablePastDates: j = !1,
-  singleDateSelection: H = !1,
-  minYearOption: ne,
-  showQuickActions: re = !1,
-  showSingleMonth: p = !1,
-  className: oe = "",
+  maxDays: g,
+  disablePastDates: A = !1,
+  singleDateSelection: P = !1,
+  minYearOption: ae,
+  showQuickActions: ne = !1,
+  showSingleMonth: h = !1,
+  className: re = "",
   automationId: y = "datepicker",
   labels: J = {
     clear: "Clear",
     apply: "Apply"
   }
 }) => {
-  const se = () => {
+  const oe = () => {
     if (v && w)
       return {
         startDate: v,
@@ -85,49 +85,49 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       startDate: e,
       endDate: t
     };
-  }, le = () => {
+  }, se = () => {
     const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    return t.setDate(1), e.setDate(1), p || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
-  }, [c, x] = T(se), [Q] = T(le), [k, W] = T(() => Q[0]), [L, G] = T(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], N = (t, e) => {
-    if (p) {
+    return t.setDate(1), e.setDate(1), h || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
+  }, [l, M] = S(oe), [Q] = S(se), [x, W] = S(() => Q[0]), [C, G] = S(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], N = (t, e) => {
+    if (h) {
       W(t);
       return;
     }
     if (e) {
-      const [a, n] = V(t, L);
-      W(a), n !== L && G(n);
+      const [a, n] = V(t, C);
+      W(a), n !== C && G(n);
     } else {
-      const [a, n] = V(k, t);
-      a !== k && W(a), G(n);
+      const [a, n] = V(x, t);
+      a !== x && W(a), G(n);
     }
   }, {
-    getGridCellProps: ce,
-    getLeftContainerProps: ie,
-    getRightContainerProps: ue
-  } = He({
-    leftMonth: k,
-    rightMonth: L,
-    showSingleMonth: p,
-    selectedRange: c,
+    getGridCellProps: le,
+    getLeftContainerProps: ce,
+    getRightContainerProps: ie
+  } = Fe({
+    leftMonth: x,
+    rightMonth: C,
+    showSingleMonth: h,
+    selectedRange: l,
     onMonthChange: N
-  }), de = (t, e) => {
-    const a = Se(t, e), n = Re(t, e), g = [];
-    for (let s = 0; s < n; s++)
-      g.push(null);
-    for (let s = 1; s <= a; s++) {
-      const u = new Date(t, e, s);
-      u.setHours(0, 0, 0, 0), g.push(u);
+  }), ue = (t, e) => {
+    const a = Re(t, e), n = je(t, e), d = [];
+    for (let c = 0; c < n; c++)
+      d.push(null);
+    for (let c = 1; c <= a; c++) {
+      const u = new Date(t, e, c);
+      u.setHours(0, 0, 0, 0), d.push(u);
     }
-    return g;
-  }, P = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), ge = (t) => {
-    if (!c.startDate || !c.endDate) return !1;
+    return d;
+  }, O = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), de = (t) => {
+    if (!l.startDate || !l.endDate) return !1;
     const e = new Date(t);
     e.setHours(12, 0, 0, 0);
-    const a = new Date(c.startDate);
+    const a = new Date(l.startDate);
     a.setHours(0, 0, 0, 0);
-    const n = new Date(c.endDate);
+    const n = new Date(l.endDate);
     return n.setHours(23, 59, 59, 999), e >= a && e <= n;
-  }, De = (t) => {
+  }, ge = (t) => {
     const e = /* @__PURE__ */ new Date();
     return t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear();
   }, I = (t) => {
@@ -135,129 +135,129 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     const e = /* @__PURE__ */ new Date();
     e.setHours(0, 0, 0, 0);
     const a = new Date(t);
-    if (a.setHours(0, 0, 0, 0), j && a < e)
+    if (a.setHours(0, 0, 0, 0), A && a < e)
       return !0;
-    if (d != null) {
+    if (g != null) {
       const n = new Date(e);
-      return n.setDate(n.getDate() + d), n.setHours(0, 0, 0, 0), a > n;
+      return n.setDate(n.getDate() + g), n.setHours(0, 0, 0, 0), a > n;
     }
     return F ? !1 : a > e;
-  }, me = (t) => {
+  }, De = (t) => {
     if (I(t)) return;
     const e = new Date(t);
-    if (e.setHours(12, 0, 0, 0), H) {
-      x({
+    if (e.setHours(12, 0, 0, 0), P) {
+      M({
         startDate: e,
         endDate: e
-      }), S({
+      }), R({
         startDate: e,
         endDate: e
-      }), R?.();
+      }), j?.();
       return;
     }
-    if (!c.startDate || c.endDate)
-      x({
+    if (!l.startDate || l.endDate)
+      M({
         startDate: e,
         endDate: null
       });
     else {
-      const a = new Date(c.startDate);
+      const a = new Date(l.startDate);
       a.setHours(12, 0, 0, 0);
-      const n = e > a ? e : a, g = e > a ? a : e;
-      x({
-        startDate: g,
+      const n = e > a ? e : a, d = e > a ? a : e;
+      M({
+        startDate: d,
         endDate: n
       });
     }
   }, K = (t, e) => {
     const a = new Date(t);
     return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
-  }, fe = (t) => c?.startDate ? P(t, c.startDate) : !1, he = (t) => c?.endDate ? P(t, c?.endDate) : !1, pe = (t) => !c.startDate || !c.endDate ? !1 : P(c.startDate, c.endDate) && P(t, c.startDate), be = (t, e) => {
-    const a = ne || t - 10;
+  }, me = (t) => l?.startDate ? O(t, l.startDate) : !1, fe = (t) => l?.endDate ? O(t, l?.endDate) : !1, pe = (t) => !l.startDate || !l.endDate ? !1 : O(l.startDate, l.endDate) && O(t, l.startDate), he = (t, e) => {
+    const a = ae || t - 10;
     let n = F ? t + 10 : t;
-    if (d) {
-      const s = /* @__PURE__ */ new Date(), u = new Date(s);
-      u.setDate(u.getDate() + d);
+    if (g) {
+      const c = /* @__PURE__ */ new Date(), u = new Date(c);
+      u.setDate(u.getDate() + g);
       const b = u.getFullYear();
       n = Math.min(n, b);
     }
     n = Math.max(n, e);
-    const g = n - a + 1;
+    const d = n - a + 1;
     return Array.from({
-      length: g
-    }, (s, u) => ({
+      length: d
+    }, (c, u) => ({
       value: a + u,
       label: (a + u).toString()
-    })).filter((s) => {
-      if (s.value === e)
+    })).filter((c) => {
+      if (c.value === e)
         return !0;
-      if (!F && s.value > t)
+      if (!F && c.value > t)
         return !1;
-      if (d) {
+      if (g) {
         const u = /* @__PURE__ */ new Date(), b = new Date(u);
-        return b.setDate(b.getDate() + d), s.value <= b.getFullYear();
+        return b.setDate(b.getDate() + g), c.value <= b.getFullYear();
       }
       return !0;
     });
-  }, ve = () => {
+  }, be = () => {
     const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), x({
+    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), M({
       startDate: e,
       endDate: t
     });
-  }, M = (t) => {
+  }, k = (t) => {
     const e = new Date(t);
     return e.setHours(0, 0, 0, 0), e;
   }, E = (t) => {
     const e = new Date(t);
     return e.setHours(23, 59, 59, 999), e;
-  }, we = (t) => {
+  }, ve = (t) => {
     const e = /* @__PURE__ */ new Date();
     let a = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
     switch (t) {
       case "Today":
-        a = M(e), n = E(e);
+        a = k(e), n = E(e);
         break;
       case "Yesterday":
-        a = M(new Date(e.setDate(e.getDate() - 1))), n = E(new Date(e));
+        a = k(new Date(e.setDate(e.getDate() - 1))), n = E(new Date(e));
         break;
       case "This Week":
-        const g = new Date(e.setDate(e.getDate() - e.getDay()));
-        a = M(g), n = E(/* @__PURE__ */ new Date());
+        const d = new Date(e.setDate(e.getDate() - e.getDay()));
+        a = k(d), n = E(/* @__PURE__ */ new Date());
         break;
       case "Last Week":
-        const s = new Date(e.setDate(e.getDate() - e.getDay() - 7)), u = new Date(e.setDate(s.getDate() + 6));
-        a = M(s), n = E(u);
+        const c = new Date(e.setDate(e.getDate() - e.getDay() - 7)), u = new Date(e.setDate(c.getDate() + 6));
+        a = k(c), n = E(u);
         break;
       case "This Month":
-        a = M(new Date(e.getFullYear(), e.getMonth(), 1)), n = E(/* @__PURE__ */ new Date());
+        a = k(new Date(e.getFullYear(), e.getMonth(), 1)), n = E(/* @__PURE__ */ new Date());
         break;
       case "Last Month":
-        a = M(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
+        a = k(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
         break;
     }
-    x({
+    M({
       startDate: a,
       endDate: n
     });
-  }, ye = () => /* @__PURE__ */ r.createElement("div", {
+  }, we = () => /* @__PURE__ */ r.createElement("div", {
     className: "w-[147px] p-4 border-r border-[var(--color-gray-200)]"
   }, /* @__PURE__ */ r.createElement("div", {
     role: "group",
     "aria-label": "Quick date selections",
     className: "flex flex-col gap-3"
-  }, Oe.map((t) => /* @__PURE__ */ r.createElement(z, {
+  }, Te.map((t) => /* @__PURE__ */ r.createElement(z, {
     key: t,
     label: t,
     type: "link",
-    onClick: () => we(t)
-  })))), ke = () => {
+    onClick: () => ve(t)
+  })))), ye = () => {
     const {
       startDate: t = null,
       endDate: e = null
-    } = c;
+    } = l;
     if (t && e) {
-      S({
+      R({
         startDate: t,
         endDate: e
       });
@@ -265,28 +265,28 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     }
     if (t || e) {
       const a = t || e;
-      S({
+      R({
         startDate: a,
         endDate: a
       });
     }
-  }, A = (t) => {
-    const e = t.getFullYear(), a = t.getMonth(), n = de(e, a), g = (/* @__PURE__ */ new Date()).getFullYear(), s = t.getTime() === k.getTime(), u = be(g, e), b = new Date(e, a, 1).toLocaleString("en-US", {
+  }, U = (t, e) => {
+    const a = t.getFullYear(), n = t.getMonth(), d = ue(a, n), c = (/* @__PURE__ */ new Date()).getFullYear(), u = he(c, a), b = new Date(a, n, 1).toLocaleString("en-US", {
       month: "long",
       year: "numeric"
-    }), Me = s ? ie : ue, X = `calendar-instructions-${s ? "left" : "right"}`, Ee = H ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", xe = ce({
-      isLeftCalendar: s,
+    }), ke = e ? ce : ie, X = `calendar-instructions-${e ? "left" : "right"}`, Ee = P ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", Me = le({
+      isLeftCalendar: e,
       isDateDisabled: I,
-      handleDateClick: me
+      handleDateClick: De
     }), Z = [];
-    for (let o = 0; o < n.length; o += 7) {
-      const l = n.slice(o, o + 7);
-      for (; l.length < 7; ) l.push(null);
-      Z.push(l);
+    for (let o = 0; o < d.length; o += 7) {
+      const s = d.slice(o, o + 7);
+      for (; s.length < 7; ) s.push(null);
+      Z.push(s);
     }
-    const C = /* @__PURE__ */ new Date(), Ne = j && t.getMonth() === C.getMonth() && t.getFullYear() === C.getFullYear(), Ce = !F && a === C.getMonth() && e === C.getFullYear() || d !== void 0 && (() => {
-      const o = new Date(C);
-      return o.setDate(o.getDate() + d), t.getMonth() === o.getMonth() && t.getFullYear() === o.getFullYear();
+    const $ = /* @__PURE__ */ new Date(), xe = A && t.getMonth() === $.getMonth() && t.getFullYear() === $.getFullYear(), Ne = !F && n === $.getMonth() && a === $.getFullYear() || g !== void 0 && (() => {
+      const o = new Date($);
+      return o.setDate(o.getDate() + g), t.getMonth() === o.getMonth() && t.getFullYear() === o.getFullYear();
     })();
     return /* @__PURE__ */ r.createElement("div", {
       className: "se-design-calendar-container w-fit p-4"
@@ -296,67 +296,69 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
       name: "chevron",
       rotation: "90",
       size: 16,
-      disabled: Ne,
+      disabled: xe,
       onClick: () => {
         const o = K(t, !1);
-        if (j) {
-          const l = /* @__PURE__ */ new Date();
-          if (l.setHours(0, 0, 0, 0), o < l && o.getMonth() !== l.getMonth())
+        if (A) {
+          const s = /* @__PURE__ */ new Date();
+          if (s.setHours(0, 0, 0, 0), o < s && o.getMonth() !== s.getMonth())
             return;
         }
-        N(o, s);
+        N(o, e);
       },
       automationId: `${y}-previous-month`,
-      ariaLabel: p ? "Previous month" : s ? "Previous month of starting date" : "Previous month of end date"
+      ariaLabel: h ? "Previous month" : e ? "Previous month of starting date" : "Previous month of end date"
     }), /* @__PURE__ */ r.createElement("div", {
       className: "flex gap-2",
       onClick: (o) => o.stopPropagation()
     }, /* @__PURE__ */ r.createElement(te, {
       type: "select",
       dropDownOptions: q,
-      defaultSelectedValue: q[a],
+      defaultSelectedValue: q[n],
       selectBy: "label",
       optionsUniqueBy: "value",
       displaySelected: !0,
-      ariaLabel: p ? "Month" : s ? "Month of starting date" : "Month of end date",
+      label: h ? "Month" : e ? "Start month" : "End month",
+      firstOptionAsHeading: !0,
       onOptionClick: (o) => {
-        const l = new Date(t);
-        l.setMonth(q.findIndex((i) => i.value === o.value)), N(l, s);
+        const s = new Date(t);
+        s.setMonth(q.findIndex((i) => i.value === o.value)), N(s, e);
       },
       className: "w-[124px] dropdown-option-container"
     }), /* @__PURE__ */ r.createElement(te, {
       type: "select",
       dropDownOptions: u,
-      defaultSelectedValue: u.find((o) => o.value === e),
+      defaultSelectedValue: u.find((o) => o.value === a),
       selectBy: "label",
       optionsUniqueBy: "value",
       displaySelected: !0,
-      ariaLabel: p ? "Year" : s ? "Year of starting date" : "Year of end date",
+      label: h ? "Year" : e ? "Start year" : "End year",
+      firstOptionAsHeading: !0,
       onOptionClick: (o) => {
-        const l = new Date(t);
-        l.setFullYear(o.value), N(l, s);
+        const s = new Date(t);
+        s.setFullYear(o.value), N(s, e);
       },
       className: "w-[104px] dropdown-option-container"
     })), /* @__PURE__ */ r.createElement(_, {
       name: "chevron",
       rotation: "270",
       size: 16,
-      disabled: Ce,
+      disabled: Ne,
       onClick: () => {
         const o = K(t, !0);
-        if (d !== void 0) {
-          const l = /* @__PURE__ */ new Date(), i = new Date(l);
-          if (i.setDate(i.getDate() + d), o > i)
+        if (g !== void 0) {
+          const s = /* @__PURE__ */ new Date(), i = new Date(s);
+          if (i.setDate(i.getDate() + g), o > i)
             return;
         }
-        N(o, s);
+        N(o, e);
       },
       automationId: `${y}-next-month`,
-      ariaLabel: p ? "Next month" : s ? "Next month of starting date" : "Next month of end date"
+      ariaLabel: h ? "Next month" : e ? "Next month of starting date" : "Next month of end date"
     })), /* @__PURE__ */ r.createElement("span", {
       id: X,
       className: "sr-only"
-    }, Ee), /* @__PURE__ */ r.createElement("div", O({}, Me({
+    }, Ee), /* @__PURE__ */ r.createElement("div", T({}, ke({
       ariaLabel: b,
       ariaDescribedBy: X
     }), {
@@ -364,89 +366,95 @@ const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesd
     }), /* @__PURE__ */ r.createElement("div", {
       role: "row",
       className: "grid grid-cols-7 gap-2"
-    }, Te.map((o, l) => /* @__PURE__ */ r.createElement("abbr", {
-      key: `${o}-${l}`,
+    }, Oe.map((o, s) => /* @__PURE__ */ r.createElement("abbr", {
+      key: `${o}-${s}`,
       role: "columnheader",
-      "aria-label": ae[l],
-      title: ae[l],
+      title: Se[s],
       className: "datepicker-weekdays"
-    }, o))), Z.map((o, l) => /* @__PURE__ */ r.createElement("div", {
-      key: l,
+    }, o))), Z.map((o, s) => /* @__PURE__ */ r.createElement("div", {
+      key: s,
       role: "row",
       className: "grid grid-cols-7 gap-2"
-    }, o.map((i, Ye) => {
+    }, o.map((i, $e) => {
       if (!i)
         return /* @__PURE__ */ r.createElement("div", {
-          key: `empty-${l}-${Ye}`,
+          key: `empty-${s}-${$e}`,
           role: "gridcell",
           "aria-hidden": "true",
           className: "h-10 w-10"
         });
-      const ee = Le(i), D = fe(i), f = he(i), Y = pe(i), U = !D && !f && ge(i), B = De(i), $ = I(i), {
-        ref: $e,
-        ...Fe
-      } = xe({
+      const ee = Pe(i), D = me(i), f = fe(i), H = pe(i), B = !D && !f && de(i), L = ge(i), Y = I(i), {
+        ref: He,
+        ...Ye
+      } = Me({
         cellId: ee,
         cellDate: i,
-        disabled: $,
-        ariaLabel: Pe(i, D, f, Y, H),
-        ariaSelected: D || f || U,
-        ariaCurrent: B ? "date" : void 0,
-        ariaDisabled: $ || void 0
+        disabled: Y,
+        ariaLabel: Ce(i, D, f, H, P, B),
+        ariaCurrent: L ? "date" : void 0,
+        ariaDisabled: Y || void 0
       });
-      return /* @__PURE__ */ r.createElement("div", O({
-        key: ee
-      }, Fe, {
-        ref: $e,
+      return /* @__PURE__ */ r.createElement("div", {
+        key: ee,
+        role: "gridcell",
+        "aria-selected": D || f || void 0,
+        className: "relative h-10 w-10"
+      }, /* @__PURE__ */ r.createElement("button", T({
+        type: "button"
+      }, Ye, {
+        ref: He,
         className: `
-                      relative h-10 w-10 flex items-center justify-center transition-colors rounded-md focus-outline
-                      ${$ ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
-                      ${Y ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                      ${!Y && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                      ${!Y && f ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                      ${!D && !f && U ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
-                      ${!D && !f && !U && !$ ? "hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]" : ""}
-                      ${B && !D && !f ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
-                      ${!$ && !D && !f && !B ? "text-[var(--color-blue-500)]" : ""}
-                    `,
+                        datepicker-cell-button
+                        h-full w-full flex items-center justify-center
+                        rounded-md focus-outline transition-colors
+                        ${Y ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
+                        ${H ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                        ${!H && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                        ${!H && f ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                        ${!D && !f && B ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
+                        ${!D && !f && !B && !Y ? "hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]" : ""}
+                        ${L && !D && !f ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
+                        ${!Y && !D && !f && !L ? "text-[var(--color-blue-500)]" : ""}
+                      `,
         "data-automation-id": `${y}-date-${i.getDate()}`
-      }), i.getDate(), !Y && (D || f) && /* @__PURE__ */ r.createElement("div", {
+      }), i.getDate()), !H && (D || f) && /* @__PURE__ */ r.createElement("div", {
+        "aria-hidden": "true",
         className: `absolute top-0 bottom-0 ${D ? "right-[-8px]" : "left-[-8px]"} w-[8px]
                         bg-[var(--color-blue-100)] -z-10`
       }));
     })))));
   };
   return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max max-w-full ${oe}`
+    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max max-w-full ${re}`
   }, m && /* @__PURE__ */ r.createElement("div", {
     className: "se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
   }, /* @__PURE__ */ r.createElement("h2", {
     className: "datepicker-title"
-  }, h), R && /* @__PURE__ */ r.createElement(_, {
+  }, p), j && /* @__PURE__ */ r.createElement(_, {
     name: "close",
     size: 16,
-    onClick: R,
+    onClick: j,
     className: "cursor-pointer",
     automationId: `${y}-close`,
     ariaLabel: "Close date picker"
   })), /* @__PURE__ */ r.createElement("div", {
     className: "se-design-datepicker-content flex"
-  }, re && ye(), /* @__PURE__ */ r.createElement("div", {
+  }, ne && we(), /* @__PURE__ */ r.createElement("div", {
     className: "flex"
-  }, p ? A(k) : /* @__PURE__ */ r.createElement(r.Fragment, null, A(k), /* @__PURE__ */ r.createElement("div", {
+  }, h ? U(x, !0) : /* @__PURE__ */ r.createElement(r.Fragment, null, U(x, !0), /* @__PURE__ */ r.createElement("div", {
     className: "h-full w-[1px] border-r border-[var(--color-gray-200)]",
     "aria-hidden": "true"
-  }), A(L)))), !H && /* @__PURE__ */ r.createElement("div", {
+  }), U(C, !1)))), !P && /* @__PURE__ */ r.createElement("div", {
     className: "se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
   }, /* @__PURE__ */ r.createElement(z, {
     label: J?.clear || "Clear",
     type: "ghost",
-    onClick: ve,
+    onClick: be,
     "data-automation-id": `${y}-clear-button`
   }), /* @__PURE__ */ r.createElement(z, {
     label: J?.apply || "Apply",
     type: "primary",
-    onClick: ke,
+    onClick: ye,
     "data-automation-id": `${y}-apply-button`
   })));
 };