@7pmlabs/design-system 0.5.11 → 0.6.0

package/dist/design-system26.mjs

@@ -1,144 +1,562 @@
-import { defineComponent as x, ref as n, computed as w, onMounted as z, nextTick as N, onUnmounted as V, openBlock as d, createElementBlock as u, createElementVNode as o, normalizeClass as g, Fragment as y, renderList as D, renderSlot as f, toDisplayString as R, createVNode as B, withDirectives as $, vShow as C, createBlock as I, Teleport as T, createCommentVNode as F } from "vue";
-import E from "./design-system111.mjs";
-import P from "./design-system103.mjs";
-const U = ["href", "title"], j = {
-  "aria-hidden": "true",
-  class: "ds-pl-2"
-}, q = ["id"], A = ["href", "title"], G = {
-  key: 0,
-  "aria-hidden": "true",
-  class: "ds-pl-2"
-}, Q = /* @__PURE__ */ x({
-  __name: "BBreadcrumb",
+import { defineComponent as ua, ref as i, computed as M, watch as V, nextTick as Ve, onMounted as ra, onBeforeUnmount as da, openBlock as C, createElementBlock as K, createElementVNode as R, createVNode as S, normalizeClass as ue, withKeys as ia, withDirectives as ca, withCtx as re, createTextVNode as de, toDisplayString as ie, unref as T, createBlock as E, createCommentVNode as U, Fragment as va, vShow as fa } from "vue";
+import Se from "./design-system11.mjs";
+import ma from "./design-system16.mjs";
+import { useValidationField as ha } from "./design-system3.mjs";
+import ga from "./design-system15.mjs";
+import { useI18n as pa } from "./design-system50.mjs";
+import { lockScrollBody as ka, ensureVisiblePosition as Da, unlockScrollBody as Pe, resetPosition as xe } from "./design-system6.mjs";
+import N from "./design-system106.mjs";
+import q from "./design-system99.mjs";
+import { DateDelimiter as Fe } from "./design-system4.mjs";
+import { checkIfISOFormat as ya } from "./design-system49.mjs";
+import ba from "./design-system108.mjs";
+import wa from "./design-system109.mjs";
+import Ma from "./design-system110.mjs";
+import Ca from "./design-system111.mjs";
+import Ya from "./design-system112.mjs";
+import _a from "./design-system113.mjs";
+import { useDate as Va } from "./design-system2.mjs";
+import Sa from "./design-system114.mjs";
+import Pa from "./design-system115.mjs";
+import { useBreakpoints as xa, breakpointsTailwind as Fa } from "./design-system116.mjs";
+import { BDatePickerView as p } from "./design-system5.mjs";
+import Ra from "./design-system101.mjs";
+import B from "./design-system105.mjs";
+import b from "./design-system117.mjs";
+const Ta = { class: "b-date-picker" }, Ba = { class: "ds-relative" }, Ia = ["id", "disabled", "placeholder", "value"], Oa = ["id", "disabled", "placeholder"], $a = { class: "ds-mt-1 ds-grid ds-w-80 ds-gap-5 ds-rounded-lg ds-bg-white ds-p-3 ds-shadow-2xl" }, Ea = { class: "ds-flex ds-w-full ds-items-center ds-justify-between" }, Na = { class: "ds-grid ds-w-full ds-grid-cols-2 ds-gap-2" }, ft = /* @__PURE__ */ ua({
+  __name: "BDatePicker",
   props: {
-    items: { default: () => [] }
+    inputId: { default: "" },
+    modelValue: { default: void 0 },
+    label: { default: "" },
+    validationRules: { default: void 0 },
+    placeholder: { default: "" },
+    required: { type: Boolean, default: !1 },
+    requiredErrorMessage: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    inputCssClass: { default: "" },
+    minDate: { default: void 0 },
+    maxDate: { default: void 0 },
+    range: { type: Boolean, default: !1 },
+    hideDetails: { type: Boolean, default: !1 },
+    view: { default: p.Dates }
   },
-  setup(M) {
-    const O = M, i = n(!1), c = n(null), h = n(null), v = n(null), m = n(null), l = n([]), k = new ResizeObserver(() => {
-      if (l.value.length <= 1)
+  emits: ["update:modelValue"],
+  setup(Re, { emit: Te }) {
+    const t = Re, Be = Te;
+    let w;
+    const L = `DD${Fe}MM${Fe}YYYY`, k = new Date(
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      (/* @__PURE__ */ new Date()).getMonth(),
+      (/* @__PURE__ */ new Date()).getDate()
+    ), ce = xa(Fa).greaterOrEqual("sm"), { t: W } = pa(), { formatMonthYear: Ie } = Va(), u = i({}), n = i([]), P = i({
+      year: k.getFullYear(),
+      month: k.getMonth()
+    }), s = i({
+      year: k.getFullYear(),
+      month: k.getMonth()
+    }), D = i(!1), h = i(t.view), I = i(null), x = i(null), ve = i(null), G = i(null), F = i([]), J = i([]), O = i([]), j = i(""), fe = i(!1), me = i(!1), c = M(() => d(t.minDate)), v = M(() => d(t.maxDate)), Oe = {
+      validateRule: (e) => !!e,
+      errorMessage: () => t.requiredErrorMessage || W("ds.global.field_required")
+    }, H = M(() => t.inputId || `id-${Ra()}`), r = M({
+      get() {
+        return t.modelValue;
+      },
+      set(e) {
+        Be("update:modelValue", e);
+      }
+    }), $e = M(
+      () => {
+        var e;
+        return (e = t.modelValue) == null ? void 0 : e.map((a) => oe(a)).join(" - ");
+      }
+    ), Ee = M(() => {
+      let e = [];
+      return t.required && e.push(Oe), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
+    }), { validate: Ne, validationResult: Q } = ha(
+      H.value,
+      r,
+      Ee.value
+    ), he = M(() => [
+      "ds-border ds-rounded-lg ds-block ds-w-full ds-text-sm ds-px-3 ds-h-[40px] ds-transition-all ds-ease-in-out",
+      {
+        "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]": t.disabled,
+        "ds-text-black/[0.85]": !t.disabled,
+        "ds-border-error focus:ds-ring-1 focus:ds-ring-error": !Q.value.valid,
+        "ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus": Q.value.valid,
+        "!ds-border-focus ds-ring-1 ds-ring-focus": D.value
+      },
+      t.inputCssClass
+    ]), qe = M(() => {
+      const e = {
+        mask: N.MaskedDate,
+        pattern: L,
+        lazy: !0,
+        format: (a) => q(a).format(L),
+        parse: (a) => q(a, L),
+        blocks: {
+          YYYY: {
+            mask: N.MaskedRange,
+            from: 1,
+            to: 9999
+          },
+          MM: {
+            mask: N.MaskedRange,
+            from: 1,
+            to: 12
+          },
+          DD: {
+            mask: N.MaskedRange,
+            from: 1,
+            to: 31
+          }
+        }
+      };
+      return c.value && (e.min = c.value), v.value && (e.max = v.value), e;
+    }), A = M(() => ({
+      [p.Years]: {
+        handleClickPreview: Ge,
+        handleClickNext: Je
+      },
+      [p.Months]: {
+        handleClickPreview: Qe,
+        handleClickNext: Xe,
+        handleClickHeading: je
+      },
+      [p.Dates]: {
+        handleClickPreview: Ze,
+        handleClickNext: ea,
+        handleClickHeading: Le
+      }
+    }));
+    V(
+      () => t.minDate,
+      () => {
+        if (t.range) {
+          const e = r.value;
+          e.length > 0 && ge(e[0]);
+        } else {
+          const e = r.value;
+          ge(e);
+        }
+        y();
+      }
+    ), V(
+      () => t.maxDate,
+      () => {
+        if (t.range) {
+          const e = r.value;
+          e.length > 1 && X(e[1]), e.length > 0 && X(e[0]);
+        } else {
+          const e = r.value;
+          X(e);
+        }
+        y();
+      }
+    ), V(
+      () => t.range,
+      (e) => {
+        e || Ve(() => {
+          Ye();
+        }), u.value = {}, n.value = [];
+      }
+    ), V(
+      () => t.view,
+      (e) => {
+        h.value = e;
+      }
+    ), V(ce, () => {
+      D.value = !1;
+    }), V(D, (e) => {
+      e ? (ka(), t.range ? n.value = r.value ? pe(r.value) : [] : u.value = r.value ? g(r.value) : {}, s.value = _(P.value), Ve(() => {
+        ce.value ? Da(I.value, x.value) : document.body.append(x.value);
+      })) : (Pe(), xe(I.value, x.value));
+    }), V(
+      () => t.modelValue,
+      (e) => {
+        if (Z(e))
+          if (t.range) {
+            const a = e;
+            n.value = e ? pe(a) : [], P.value = e ? g(a[1], !0) : {}, s.value = e ? g(a[1], !0) : {};
+          } else {
+            const a = e;
+            u.value = e ? g(a) : {}, P.value = e ? g(a, !0) : {}, s.value = e ? g(a, !0) : {};
+          }
+        !t.range && Z(ne()) && (w.value = oe(
+          d(e) || ""
+        ));
+      }
+    );
+    const ge = (e) => {
+      const a = d(e);
+      c.value && a && c.value > a && (r.value = void 0);
+    }, X = (e) => {
+      const a = d(e);
+      v.value && a && v.value < a && (r.value = void 0);
+    }, d = (e) => {
+      switch (typeof e) {
+        case "object":
+          return e;
+        case "number":
+          return new Date(e);
+        case "string":
+          return ya(e) ? new Date(e) : void 0;
+      }
+      return e;
+    }, Le = () => {
+      $(), h.value = p.Months;
+    }, je = () => {
+      z(), h.value = p.Years;
+    }, Z = (e) => {
+      var l, f;
+      return (t.range ? [
+        !B(t.modelValue) && B(e),
+        !B(e) && B(t.modelValue),
+        !B(t.modelValue) && !B(e) && t.modelValue.some(
+          (m, o) => {
+            var Y, _e;
+            return ((Y = d(m)) == null ? void 0 : Y.getTime()) !== ((_e = d(
+              e[o]
+            )) == null ? void 0 : _e.getTime());
+          }
+        )
+      ] : [
+        !t.modelValue && e,
+        !e && t.modelValue,
+        t.modelValue && e && ((l = d(
+          t.modelValue
+        )) == null ? void 0 : l.getTime()) !== ((f = d(e)) == null ? void 0 : f.getTime())
+      ]).some((m) => m);
+    }, He = () => {
+      D.value = !1;
+    }, Ae = () => {
+      D.value = !1, t.range ? n.value.length === 2 ? r.value = [
+        new Date(
+          n.value[0].year,
+          n.value[0].month,
+          n.value[0].date
+        ),
+        new Date(
+          n.value[1].year,
+          n.value[1].month,
+          n.value[1].date
+        )
+      ] : r.value = void 0 : !b(u.value.year) && !b(u.value.month) && !b(u.value.date) ? r.value = new Date(
+        u.value.year,
+        u.value.month,
+        u.value.date
+      ) : r.value = void 0, P.value = _(s.value);
+    }, _ = (e, a) => ({
+      year: e.year,
+      month: e.month,
+      date: a ? void 0 : e.date
+    }), g = (e, a) => ({
+      year: d(e).getFullYear(),
+      month: d(e).getMonth(),
+      date: a ? void 0 : d(e).getDate()
+    }), pe = (e, a) => [
+      {
+        year: d(e[0]).getFullYear(),
+        month: d(e[0]).getMonth(),
+        date: a ? void 0 : d(e[0]).getDate()
+      },
+      {
+        year: d(e[1]).getFullYear(),
+        month: d(e[1]).getMonth(),
+        date: a ? void 0 : d(e[1]).getDate()
+      }
+    ], ze = (e) => {
+      s.value = _(e), $(), h.value = p.Months;
+    }, Ke = (e) => {
+      s.value = _(e), y(), h.value = p.Dates;
+    }, Ue = (e) => {
+      e.year === u.value.year && e.month === u.value.month && e.date === u.value.date ? u.value = _({}) : (u.value = _(e), s.value = _(e, !0), y());
+    }, We = ({ year: e, month: a, date: l }) => {
+      const f = n.value.length;
+      if (f === 0)
+        n.value.push({ year: e, month: a, date: l });
+      else if (f === 1) {
+        const m = n.value.findIndex(
+          (o) => o.year === e && o.month === a && o.date === l
+        );
+        m !== -1 ? n.value.splice(m, 1) : new Date(e, a, l) > new Date(
+          n.value[0].year,
+          n.value[0].month,
+          n.value[0].date
+        ) ? n.value.push({ year: e, month: a, date: l }) : n.value.unshift({ year: e, month: a, date: l });
+      } else if (f === 2) {
+        const m = n.value.findIndex(
+          (o) => o.year === e && o.month === a && o.date === l
+        );
+        m !== -1 ? n.value.splice(m, 1) : (n.value = [], n.value.push({ year: e, month: a, date: l }));
+      }
+      s.value = {
+        year: e,
+        month: a
+      }, y();
+    }, Ge = () => {
+      ke(-1), z();
+    }, Je = () => {
+      ke(1), z();
+    }, ke = (e) => {
+      b(s.value.year) || (s.value.year += e * 10);
+    }, Qe = () => {
+      De(-1), $();
+    }, Xe = () => {
+      De(1), $();
+    }, De = (e) => {
+      b(s.value.year) || (s.value.year += e);
+    }, Ze = () => {
+      ye(-1), y();
+    }, ea = () => {
+      ye(1), y();
+    }, ye = (e) => {
+      b(s.value.month) || (s.value.month += e);
+    }, aa = () => {
+      D.value = !0;
+    }, be = () => {
+      t.disabled || (D.value = !D.value);
+    }, ee = (e) => (c.value ? c.value.getFullYear() > e : !1) || (v.value ? e > v.value.getFullYear() : !1), ta = (e, a) => (c.value ? c.value.getFullYear() === e && c.value.getMonth() > a || c.value.getFullYear() > e : !1) || (v.value ? v.value.getFullYear() === e && v.value.getMonth() < a || v.value.getFullYear() < e : !1), ae = (e) => (c.value ? c.value > e : !1) || (v.value ? e > v.value : !1), te = (e, a) => new Date(e, a, 1), le = (e, a) => new Date(e, a + 1, 0), z = () => {
+      if (O.value = [], b(s.value.year))
         return;
-      const s = c.value.clientWidth, a = v.value[0].clientWidth;
-      for (let e = 1; e < l.value.length && l.value.reduce(
-        (t, r) => r.hidden ? t : t + r.width,
-        0
-      ) + a > s; e++)
-        l.value[e].hidden = !0;
-      for (let e = l.value.length - 1; e >= 1; e--)
-        if (l.value[e].hidden)
-          if (l.value.reduce(
-            (t, r) => r.hidden ? t : t + r.width,
-            0
-          ) + l.value[e].width + a <= s)
-            l.value[e].hidden = !1;
-          else
-            break;
-    }), p = w(() => l.value.some((s) => s.hidden)), b = w(() => `menu-id-${P()}`), L = () => {
-      i.value = !i.value;
-    }, W = () => {
-      document.addEventListener("click", _);
-    }, S = () => {
-      document.removeEventListener("click", _);
-    }, _ = (s) => {
-      [v.value[0], m.value[0]].some((t) => s.composedPath().includes(t)) || (i.value = !1);
-    };
-    return z(() => {
-      W(), k.observe(c.value), l.value = O.items.map(
-        (s) => ({
-          ...s,
-          hidden: !1,
-          width: 0
-        })
-      ), N(() => {
-        l.value.forEach((s, a) => {
-          s.width = h.value[a].clientWidth;
+      const e = s.value.year.toString().slice(0, -1), a = +`${e}0`, l = +`${e}9`;
+      O.value.push({
+        year: a - 1,
+        secondary: !0,
+        disabled: ee(a - 1)
+      });
+      for (let o = a; o <= l; o++)
+        O.value.push({
+          year: o,
+          disabled: ee(o)
         });
+      O.value.push({
+        year: l + 1,
+        secondary: !0,
+        disabled: ee(l + 1)
+      }), j.value = `${e}0 - ${e}9`;
+      const f = te(a, 0), m = le(l, 11);
+      se(f, m);
+    }, $ = () => {
+      if (J.value = [], b(s.value.year))
+        return;
+      for (let l = 0; l < 12; l++)
+        J.value.push({
+          year: s.value.year,
+          month: l,
+          disabled: ta(s.value.year, l)
+        });
+      j.value = s.value.year.toString();
+      const e = te(s.value.year, 0), a = le(s.value.year, 11);
+      se(e, a);
+    }, y = () => {
+      if (F.value = [], b(s.value.year) || b(s.value.month))
+        return;
+      const e = te(
+        s.value.year,
+        s.value.month
+      ), a = le(
+        s.value.year,
+        s.value.month
+      ), l = structuredClone(e);
+      let f = l.getDay() === 0 ? 6 : l.getDay() - 1;
+      for (; f > 0; ) {
+        const o = structuredClone(l);
+        o.setDate(-(f - 1)), F.value.push({
+          date: o.getDate(),
+          month: o.getMonth(),
+          year: o.getFullYear(),
+          secondary: !0,
+          disabled: ae(o)
+        }), f--;
+      }
+      for (; l <= a; )
+        F.value.push({
+          date: l.getDate(),
+          month: l.getMonth(),
+          year: l.getFullYear(),
+          disabled: ae(l)
+        }), l.setDate(l.getDate() + 1);
+      const m = l.getDay() === 0 ? 1 : 7 - l.getDay() + 1;
+      if (m < 6) {
+        let o = 1;
+        const Y = structuredClone(l);
+        for (; o <= m; )
+          Y.setDate(o), F.value.push({
+            date: Y.getDate(),
+            month: Y.getMonth(),
+            year: Y.getFullYear(),
+            secondary: !0,
+            disabled: ae(Y)
+          }), o++;
+      }
+      j.value = Ie(
+        new Date(s.value.year, s.value.month, 1)
+      ).toString(), se(e, a);
+    }, se = (e, a) => {
+      fe.value = c.value ? c.value >= e : !1, me.value = v.value ? v.value <= a : !1;
+    }, ne = () => {
+      const e = w.value.split("/"), a = `${e[2]}-${e[1]}-${e[0]}`;
+      if (q(a, q.ISO_8601, !0).isValid())
+        return new Date(a);
+    }, la = () => {
+      w.unmaskedValue || (r.value = void 0, u.value = {
+        year: k.getFullYear(),
+        month: k.getMonth()
       });
-    }), V(() => {
-      S(), k.unobserve(c.value);
-    }), (s, a) => (d(), u("nav", null, [
-      o("ol", {
-        ref_key: "ulRef",
-        ref: c,
-        class: g([{ collapsed: p.value }, "ds-relative ds-flex"])
+    }, sa = () => {
+      const e = ne();
+      e ? (r.value = e, u.value = g(e), P.value = g(e, !0), s.value = g(e, !0), y()) : (r.value = void 0, u.value = {
+        year: k.getFullYear(),
+        month: k.getMonth()
+      });
+    }, na = () => {
+      const e = ne();
+      Ne(), Z(e) && (e ? (r.value = e, P.value = g(e, !0), u.value = g(e), s.value = g(e, !0), y()) : (r.value = void 0, u.value = {
+        year: k.getFullYear(),
+        month: k.getMonth()
+      }));
+    }, oe = (e) => q(e).format(L), we = (e) => {
+      [I.value, x.value].some((f) => e.composedPath().includes(f)) || Ce();
+    }, Me = (e) => {
+      e.key === "Escape" && Ce();
+    }, Ce = () => {
+      var e, a;
+      D.value = !1, (e = ve.value) == null || e.blur(), (a = G.value) == null || a.blur();
+    }, Ye = () => {
+      w = N(G.value, qe.value), w.value = oe(
+        d(t.modelValue) || ""
+      ), w.on("accept", la), w.on("complete", sa);
+    }, oa = () => {
+      w && w.destroy();
+    };
+    return (() => {
+      z(), $(), y();
+    })(), ra(() => {
+      t.range || Ye(), document.addEventListener("click", we), document.addEventListener("keydown", Me);
+    }), da(() => {
+      oa(), Pe(), xe(I.value, x.value), document.removeEventListener("keydown", Me), document.removeEventListener("click", we);
+    }), (e, a) => (C(), K("div", Ta, [
+      R("div", {
+        ref_key: "datePickerRef",
+        ref: I
       }, [
-        (d(!0), u(y, null, D(l.value, (e, t) => {
-          var r;
-          return d(), u(y, {
-            key: `item${e.text}`
-          }, [
-            t === 0 ? (d(), u("li", {
-              key: 0,
-              ref_for: !0,
-              ref_key: "liRefs",
-              ref: h,
-              class: "ds-whitespace-nowrap ds-text-black/[0.85]"
-            }, [
-              f(s.$slots, `item-${t}`, { item: e }, () => [
-                o("a", {
-                  href: e.href,
-                  title: e.href,
-                  class: "ds-transition-colors hover:ds-text-primary-t"
-                }, R(e.text), 9, U)
-              ]),
-              o("span", j, [
-                f(s.$slots, `separator-${t}`, { item: e }, () => [
-                  B(E)
-                ])
-              ]),
-              o("div", {
-                ref_for: !0,
-                ref_key: "ellipsisRefs",
-                ref: v,
-                class: "ds-inline-block"
-              }, [
-                $(o("button", {
-                  class: g([{ "ds-bg-slate-50": i.value }, "ds-ml-2 ds-rounded-lg ds-bg-slate-100 ds-px-2 ds-text-primary-t ds-transition-colors hover:ds-bg-slate-50"]),
-                  onClick: L
-                }, " ... ", 2), [
-                  [C, p.value]
+        S(ma, {
+          id: H.value,
+          label: e.label,
+          required: e.required
+        }, null, 8, ["id", "label", "required"]),
+        R("div", Ba, [
+          t.range ? (C(), K("input", {
+            key: 0,
+            id: H.value,
+            ref_key: "datePickerInputRef",
+            ref: ve,
+            class: ue([he.value, "ds-drop-shadow-light"]),
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            value: $e.value,
+            readonly: "",
+            onFocus: aa
+          }, null, 42, Ia)) : (C(), K("input", {
+            key: 1,
+            id: H.value,
+            ref_key: "datePickerInputMaskRef",
+            ref: G,
+            class: ue([he.value, "ds-drop-shadow-light"]),
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            onBlur: na
+          }, null, 42, Oa)),
+          S(_a, {
+            disabled: t.disabled,
+            onClick: be,
+            onKeyup: ia(be, ["enter"])
+          }, null, 8, ["disabled"])
+        ]),
+        ca(R("div", {
+          ref_key: "datePickerMenuRef",
+          ref: x,
+          class: "b-date-picker__menu sm:ds-items-[unset] sm:ds-justify-[unset] ds-fixed ds-left-0 ds-top-0 ds-z-100 ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-bg-black/65 ds-backdrop-blur-sm sm:ds-absolute sm:ds-left-[unset] sm:ds-top-[unset] sm:ds-z-50 sm:ds-block sm:ds-h-auto sm:ds-w-auto sm:ds-bg-transparent sm:ds-backdrop-blur-none"
+        }, [
+          R("div", $a, [
+            R("div", Ea, [
+              S(Ma, {
+                disabled: fe.value,
+                onClick: a[0] || (a[0] = (l) => A.value[h.value].handleClickPreview())
+              }, null, 8, ["disabled"]),
+              S(Ya, {
+                class: ue({
+                  "ds-cursor-pointer hover:ds-bg-gray-150": A.value[h.value].handleClickHeading
+                }),
+                onClick: A.value[h.value].handleClickHeading
+              }, {
+                default: re(() => [
+                  de(ie(j.value), 1)
                 ]),
-                $(o("ol", {
-                  id: b.value,
-                  ref_for: !0,
-                  ref_key: "ellipsisMenuRefs",
-                  ref: m,
-                  class: "ds-absolute ds-mt-1 ds-space-y-2 ds-rounded-lg ds-bg-white ds-p-4 ds-shadow"
-                }, null, 8, q), [
-                  [C, p.value && i.value]
-                ])
-              ], 512)
-            ], 512)) : (d(), I(T, {
+                _: 1
+              }, 8, ["class", "onClick"]),
+              S(Ca, {
+                disabled: me.value,
+                onClick: a[1] || (a[1] = (l) => A.value[h.value].handleClickNext())
+              }, null, 8, ["disabled"])
+            ]),
+            h.value === T(p).Years ? (C(), E(Sa, {
+              key: 0,
+              year: u.value,
+              years: O.value,
+              "onSelect:year": ze
+            }, null, 8, ["year", "years"])) : U("", !0),
+            h.value === T(p).Months ? (C(), E(wa, {
               key: 1,
-              disabled: !e.hidden,
-              to: `#${b.value}`
-            }, [
-              o("li", {
-                ref_for: !0,
-                ref_key: "liRefs",
-                ref: h,
-                class: "ds-whitespace-nowrap ds-pl-2 ds-text-black/[0.85]"
-              }, [
-                f(s.$slots, `item-${t}`, { item: e }, () => [
-                  o("a", {
-                    href: e.href,
-                    title: e.href,
-                    class: "ds-transition-colors hover:ds-text-primary-t"
-                  }, R(e.text), 9, A)
+              month: u.value,
+              months: J.value,
+              "onSelect:month": Ke
+            }, null, 8, ["month", "months"])) : U("", !0),
+            h.value === T(p).Dates ? (C(), K(va, { key: 2 }, [
+              t.range ? (C(), E(Pa, {
+                key: 0,
+                "date-range": n.value,
+                dates: F.value,
+                "onSelect:date": We
+              }, null, 8, ["date-range", "dates"])) : (C(), E(ba, {
+                key: 1,
+                date: u.value,
+                dates: F.value,
+                "onSelect:date": Ue
+              }, null, 8, ["date", "dates"]))
+            ], 64)) : U("", !0),
+            R("div", Na, [
+              S(Se, { onClick: He }, {
+                default: re(() => [
+                  de(ie(T(W)("ds.components.base.date_picker.buttons.cancel")), 1)
+                ]),
+                _: 1
+              }),
+              S(Se, {
+                type: "primary",
+                onClick: Ae
+              }, {
+                default: re(() => [
+                  de(ie(T(W)("ds.components.base.date_picker.buttons.confirm")), 1)
                 ]),
-                t < ((r = s.items) == null ? void 0 : r.length) - 1 ? (d(), u("span", G, [
-                  f(s.$slots, `separator-${t}`, { item: e }, () => [
-                    B(E)
-                  ])
-                ])) : F("", !0)
-              ], 512)
-            ], 8, ["disabled", "to"]))
-          ], 64);
-        }), 128))
-      ], 2)
+                _: 1
+              })
+            ])
+          ])
+        ], 512), [
+          [fa, D.value]
+        ])
+      ], 512),
+      e.hideDetails ? U("", !0) : (C(), E(ga, {
+        key: 0,
+        "error-message": T(Q).errorMessage(),
+        class: "ds-mt-1"
+      }, null, 8, ["error-message"]))
     ]));
   }
 });
 export {
-  Q as default
+  ft as default
 };
 //# sourceMappingURL=design-system26.mjs.map