@adyen/bento-vue3 1.2.0 → 1.3.0

package/dist/chunks/{index.b46a5047.js → index.c9225c3b.js}

@@ -1,50 +1,51 @@
-import { defineComponent as be, reactive as ee, ref as C, computed as K, onMounted as Me, resolveComponent as P, openBlock as g, createElementBlock as J, createElementVNode as M, createBlock as O, createCommentVNode as I, renderSlot as me, createVNode as F, withCtx as k, createTextVNode as _, normalizeClass as ae, watch as Ce, toRef as Fe, resolveDirective as Ne, withDirectives as Ae, toDisplayString as j, withKeys as Ue } from "vue";
-import { B as $e } from "./directive.0408e565.js";
-import { c as Be } from "./dropdown-default-textbox.dd77bb42.js";
-import { BentoPopover as Ke, BentoPopoverPositions as Ye } from "../popover.js";
-import { g as L } from "./unique-id.a2a2b458.js";
+import { defineComponent as ye, reactive as ee, ref as C, computed as K, onMounted as Ce, resolveComponent as P, openBlock as f, createElementBlock as J, createElementVNode as M, createBlock as O, createCommentVNode as I, renderSlot as fe, createVNode as F, withCtx as k, createTextVNode as S, normalizeClass as ae, toRef as ge, watch as Fe, resolveDirective as Ne, withDirectives as Ae, toDisplayString as j, withKeys as Ue } from "vue";
+import { B as Be } from "./directive.0408e565.js";
+import { BentoPopover as $e, BentoPopoverPositions as Ke } from "../popover.js";
+import { g as W } from "./unique-id.a2a2b458.js";
 import { u as te } from "./i18n.6c402773.js";
-import { B as Re, a as ye, b as qe } from "./index.ebf5f6cf.js";
-import { f as fe, v as Ve, D as h } from "./date-input.9186a0bf.js";
-import { t as ne, f as Y } from "./index.7dd953ea.js";
+import { B as ke, a as Ee, b as Ye } from "./index.222d29b0.js";
+import { f as ve, v as qe, D as h } from "./date-input.9186a0bf.js";
+import { t as ne, f as Y } from "./index.d27367cd.js";
 import { r as re, t as oe, e as w, d as se, f as ie } from "./index.f55fdc32.js";
-import { BentoInputField as He } from "../input-field.js";
-import { B as Le } from "./dropdown.f9997464.js";
+import { u as Ve } from "./use-form-layout-loading.d03e5d48.js";
+import { BentoInputField as Le } from "../input-field.js";
+import { B as He } from "./dropdown.8b415aac.js";
 import { d as z } from "./debounce.f8d92e44.js";
 import { u as We } from "./use-has-slot.068222e6.js";
 import { e as Z } from "./index.fdf12170.js";
-import { C as W } from "./calendar.08885a56.js";
-import { _ as ke } from "./_plugin-vue_export-helper.dad06003.js";
-import { E as Ge } from "./error-message.b88bb75a.js";
-import "../assets/index9.css";
-function je(e, t) {
-  re(2, arguments);
-  var s = oe(e), u = ne(t);
-  return s.setHours(u), s;
-}
+import { C as G } from "./calendar.09b683b3.js";
+import { _ as Se } from "./_plugin-vue_export-helper.dad06003.js";
+import { c as Ge } from "./dropdown-default-textbox.203e747f.js";
+import { E as je } from "./error-message.ddfe8ea5.js";
+import "../assets/index28.css";
 function ze(e, t) {
   re(2, arguments);
-  var s = oe(e), u = ne(t);
-  return s.setMinutes(u), s;
+  var s = oe(e), d = ne(t);
+  return s.setHours(d), s;
 }
 function Je(e, t) {
   re(2, arguments);
-  var s = oe(e), u = ne(t);
-  return s.setSeconds(u), s;
+  var s = oe(e), d = ne(t);
+  return s.setMinutes(d), s;
 }
-var d = /* @__PURE__ */ ((e) => (e.CUSTOM_RANGE = "custom-range", e.INPUT = "input", e.ERROR = "error", e.FORM_DATE = "form-date", e))(d || {});
-const Qe = /[\d]/, Xe = /^\d{2}$/, Ze = /^\d{2}:\d{2}$/, xe = (e) => {
-  const { selectionStart: t } = e.target, s = Qe.test(e.key) || e.key === "Backspace", u = [1, 2, 4, 5].includes(t) && e.key === ":";
-  !s && !u && e.preventDefault();
-}, ge = (e) => {
+function Qe(e, t) {
+  re(2, arguments);
+  var s = oe(e), d = ne(t);
+  return s.setSeconds(d), s;
+}
+var l = /* @__PURE__ */ ((e) => (e.CUSTOM_RANGE = "custom-range", e.INPUT = "input", e.ERROR = "error", e.FORM_DATE = "form-date", e))(l || {});
+const Xe = /[\d]/, Ze = /^\d{2}$/, xe = /^\d{2}:\d{2}$/, ea = (e) => {
+  const { selectionStart: t } = e.target, s = Xe.test(e.key) || e.key === "Backspace", d = [1, 2, 4, 5].includes(t) && e.key === ":";
+  !s && !d && e.preventDefault();
+}, Te = (e) => {
   if (!e)
     return e;
   let t = e;
   if (t.length === 1 && parseInt(e, 10) > 2)
     return `0${t}:`;
-  const [s, u] = t.slice(-2);
-  return [2, 5].includes(t.length) && u === ":" && (t = `${t.slice(0, t.length - 2)}0${s}`), (Xe.test(t) || Ze.test(t)) && (t += ":"), t;
-}, ve = {
+  const [s, d] = t.slice(-2);
+  return [2, 5].includes(t.length) && d === ":" && (t = `${t.slice(0, t.length - 2)}0${s}`), (Ze.test(t) || xe.test(t)) && (t += ":"), t;
+}, Ie = {
   "en-US": {
     customRange: "Custom range",
     dateFrom: "Date from",
@@ -55,14 +56,14 @@ const Qe = /[\d]/, Xe = /^\d{2}$/, Ze = /^\d{2}:\d{2}$/, xe = (e) => {
     timeFrom: "Time from",
     timeTo: "Time to"
   }
-}, Te = 300, x = "customRange", ea = be({
-  i18n: { messages: ve },
+}, Re = 300, x = "customRange", aa = ye({
+  i18n: { messages: Ie },
   name: "date-range-picker-calendar",
   components: {
-    BentoDropdown: Le,
-    BentoInputField: He,
-    BentoTypography: Re,
-    Calendar: W
+    BentoDropdown: He,
+    BentoInputField: Le,
+    BentoTypography: ke,
+    Calendar: G
   },
   props: {
     /**
@@ -79,19 +80,19 @@ const Qe = /[\d]/, Xe = /^\d{2}$/, Ze = /^\d{2}:\d{2}$/, xe = (e) => {
     /**
      * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
      */
-    firstDayOfWeek: W.props.firstDayOfWeek,
+    firstDayOfWeek: G.props.firstDayOfWeek,
     /**
      * Indicate if a date should be disabled or not
      */
-    isDateDisabled: W.props.isDateDisabled,
+    isDateDisabled: G.props.isDateDisabled,
     /**
      * Set a maximum number of dates to be selectable by the range.
      */
-    maxRange: W.props.maxRange,
+    maxRange: G.props.maxRange,
     /**
      * Number of months rendered on pane
      */
-    numberOfMonths: W.props.numberOfMonths,
+    numberOfMonths: G.props.numberOfMonths,
     /**
      * Enables the custom range selector.
      * If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
@@ -109,193 +110,193 @@ const Qe = /[\d]/, Xe = /^\d{2}$/, Ze = /^\d{2}:\d{2}$/, xe = (e) => {
     value: { type: Object, default: void 0 }
   },
   emits: [
-    d.CUSTOM_RANGE,
-    d.INPUT,
-    d.ERROR,
-    d.FORM_DATE
+    l.CUSTOM_RANGE,
+    l.INPUT,
+    l.ERROR,
+    l.FORM_DATE
   ],
   setup(e, { emit: t, slots: s }) {
-    var De, pe;
-    const { locale: u, t: E } = te({ messages: ve }), v = { de: se, enUS: w, fr: ie }, o = ee({
-      startDate: (De = e.value) == null ? void 0 : De.startDate,
-      endDate: (pe = e.value) == null ? void 0 : pe.endDate
-    }), D = C(x), f = K(() => ({
+    var pe, me;
+    const { locale: d, t: E } = te({ messages: Ie }), g = { de: se, enUS: w, fr: ie }, o = ee({
+      startDate: (pe = e.value) == null ? void 0 : pe.startDate,
+      endDate: (me = e.value) == null ? void 0 : me.endDate
+    }), c = C(x), m = K(() => ({
       "b-date-range-picker-calendar__form-input-wrapper": e.allowTimeInput
-    })), S = K(() => e.quickSelectRanges ? [
+    })), _ = K(() => e.quickSelectRanges ? [
       { label: E("customRange"), value: x },
       ...e.quickSelectRanges
-    ] : []), T = () => {
-      e != null && e.quickSelectRanges && (D.value = x);
+    ] : []), v = () => {
+      e != null && e.quickSelectRanges && (c.value = x);
     }, i = (a) => a ? Y(a, h.NUMERIC_DATE_YEAR_FIRST, {
-      locale: v[u.value.substring(0, 2)] || w
-    }) : "", b = (a) => a ? Y(a, h.HOUR_MINUTE_SECONDS, {
-      locale: v[u.value.substring(0, 2)] || w
-    }) : "", p = C(!1), R = C(!1), m = C(!1), l = C(!1), r = ee({
+      locale: g[d.value.substring(0, 2)] || w
+    }) : "", R = (a) => a ? Y(a, h.HOUR_MINUTE_SECONDS, {
+      locale: g[d.value.substring(0, 2)] || w
+    }) : "", D = C(!1), b = C(!1), p = C(!1), T = C(!1), n = ee({
       startDate: e.dateFormData.startDate,
       endDate: e.dateFormData.endDate,
       startTime: e.dateFormData.startTime,
       endTime: e.dateFormData.endTime
     }), Q = (a) => {
-      t(d.INPUT, a);
-    }, G = (a) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(a), q = (a, n) => {
-      if (!n || !G(n))
+      t(l.INPUT, a);
+    }, q = (a) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(a), V = (a, r) => {
+      if (!r || !q(r))
         return a;
       let y = new Date(a);
-      const [U, X, we] = n.split(":");
-      return y = je(y, parseInt(U, 10)), y = ze(y, parseInt(X, 10)), y = Je(y, parseInt(we, 10)), y;
+      const [U, X, Me] = r.split(":");
+      return y = ze(y, parseInt(U, 10)), y = Je(y, parseInt(X, 10)), y = Qe(y, parseInt(Me, 10)), y;
     }, A = (a) => {
-      const n = (U) => e.isDateDisabled ? !e.isDateDisabled(U) : !0;
-      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && n(new Date(a));
+      const r = (U) => e.isDateDisabled ? !e.isDateDisabled(U) : !0;
+      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && r(new Date(a));
     };
-    Me(() => {
-      e.dateFormData.startDate && !A(e.dateFormData.startDate) ? p.value = !0 : (p.value = !1, m.value = !1), e.dateFormData.endDate && !A(e.dateFormData.endDate) ? R.value = !0 : (R.value = !1, l.value = !1);
+    Ce(() => {
+      e.dateFormData.startDate && !A(e.dateFormData.startDate) ? D.value = !0 : (D.value = !1, p.value = !1), e.dateFormData.endDate && !A(e.dateFormData.endDate) ? b.value = !0 : (b.value = !1, T.value = !1);
     });
     const le = (a) => {
-      var n;
-      T(), r.startDate = i(a), r.startTime ? m.value && (r.startTime = (n = e.dateFormData) == null ? void 0 : n.startTime) : r.startTime = b(a), p.value = !1, m.value = !1;
+      var r;
+      v(), n.startDate = i(a), n.startTime ? p.value && (n.startTime = (r = e.dateFormData) == null ? void 0 : r.startTime) : n.startTime = R(a), D.value = !1, p.value = !1;
     }, de = (a) => {
-      var n;
-      r.endDate = i(a), r.endTime ? l.value && (r.endTime = (n = e.dateFormData) == null ? void 0 : n.endTime) : r.endTime = b(Z(a)), R.value = !1, l.value = !1;
-    }, V = (a) => {
-      const n = e.value[a];
-      if (n)
-        return n;
+      var r;
+      n.endDate = i(a), n.endTime ? T.value && (n.endTime = (r = e.dateFormData) == null ? void 0 : r.endTime) : n.endTime = R(Z(a)), b.value = !1, T.value = !1;
+    }, L = (a) => {
+      const r = e.value[a];
+      if (r)
+        return r;
       if (e.dateFormData[a] && A(e.dateFormData[a]))
         return new Date(e.dateFormData[a]);
     }, ue = z((a) => {
       if (A(a)) {
-        p.value = !1, o.startDate = q(new Date(a), r.startTime);
-        const n = V("endDate");
-        t(d.FORM_DATE, {
+        D.value = !1, o.startDate = V(new Date(a), n.startTime);
+        const r = L("endDate");
+        t(l.FORM_DATE, {
           startDate: new Date(a),
-          endDate: n
-        }), t(d.INPUT, {
+          endDate: r
+        }), t(l.INPUT, {
           startDate: new Date(a),
-          endDate: n
+          endDate: r
         });
       } else
-        p.value = !0, t(d.ERROR, { ...r });
-    }, Te), ce = (a) => {
-      T(), r.startDate = fe(a), ue(r.startDate);
-    }, c = z((a) => {
+        D.value = !0, t(l.ERROR, { ...n });
+    }, Re), ce = (a) => {
+      v(), n.startDate = ve(a), ue(n.startDate);
+    }, De = z((a) => {
       if (A(a)) {
-        R.value = !1, o.endDate = q(new Date(a), r.endTime);
-        const n = V("startDate");
-        t(d.FORM_DATE, {
-          startDate: n,
+        b.value = !1, o.endDate = V(new Date(a), n.endTime);
+        const r = L("startDate");
+        t(l.FORM_DATE, {
+          startDate: r,
           endDate: new Date(o.endDate),
           startTime: e.dateFormData.endTime,
           endTime: a
-        }), t(d.INPUT, {
-          startDate: n,
+        }), t(l.INPUT, {
+          startDate: r,
           endDate: new Date(o.endDate)
         });
       } else
-        R.value = !0, t(d.ERROR, { ...r });
-    }, Te), N = (a) => {
-      T(), r.endDate = fe(a), c(r.endDate);
-    }, H = (a) => {
-      Ve(a);
-    }, Ee = z((a) => {
-      if (G(a)) {
-        m.value = !1, o.startDate = q(o.startDate, a);
-        const n = V("endDate");
-        t(d.FORM_DATE, {
+        b.value = !0, t(l.ERROR, { ...n });
+    }, Re), u = (a) => {
+      v(), n.endDate = ve(a), De(n.endDate);
+    }, N = (a) => {
+      qe(a);
+    }, H = z((a) => {
+      if (q(a)) {
+        p.value = !1, o.startDate = V(o.startDate, a);
+        const r = L("endDate");
+        t(l.FORM_DATE, {
           startDate: new Date(o.startDate),
-          endDate: n,
+          endDate: r,
           startTime: a,
           endTime: e.dateFormData.endTime
-        }), t(d.INPUT, {
+        }), t(l.INPUT, {
           startDate: new Date(o.startDate),
-          endDate: n
+          endDate: r
         });
       } else
-        m.value = !0, t(d.ERROR, { ...r });
+        p.value = !0, t(l.ERROR, { ...n });
     }), _e = z((a) => {
-      if (G(a)) {
-        l.value = !1, o.endDate = q(o.endDate, a);
-        const n = V("startDate");
-        t(d.FORM_DATE, {
-          startDate: n,
+      if (q(a)) {
+        T.value = !1, o.endDate = V(o.endDate, a);
+        const r = L("startDate");
+        t(l.FORM_DATE, {
+          startDate: r,
           endDate: new Date(o.endDate),
           startTime: e.dateFormData.startTime,
           endTime: a
-        }), t(d.INPUT, {
-          startDate: n,
+        }), t(l.INPUT, {
+          startDate: r,
           endDate: new Date(o.endDate)
         });
       } else
-        l.value = !0, t(d.ERROR, { ...r });
-    }), Se = (a) => {
-      T(), r.startTime = ge(a), Ee(r.startTime);
-    }, Oe = (a) => {
-      T(), r.endTime = ge(a), _e(r.endTime);
+        T.value = !0, t(l.ERROR, { ...n });
+    }), Oe = (a) => {
+      v(), n.startTime = Te(a), H(n.startTime);
     }, Pe = (a) => {
-      xe(a);
+      v(), n.endTime = Te(a), _e(n.endTime);
     }, he = (a) => {
+      ea(a);
+    }, we = (a) => {
       var y, U;
-      D.value = a;
-      const n = (U = (y = e.quickSelectRanges) == null ? void 0 : y.find(({ value: X }) => X === a)) == null ? void 0 : U.data;
-      n && (r.startDate = i(n.startDate), r.endDate = i(n.endDate), r.startTime || (r.startTime = b(Z(n.startDate))), r.endTime || (r.endTime = b(Z(n.endDate))), t(d.CUSTOM_RANGE, n));
+      c.value = a;
+      const r = (U = (y = e.quickSelectRanges) == null ? void 0 : y.find(({ value: X }) => X === a)) == null ? void 0 : U.data;
+      r && (n.startDate = i(r.startDate), n.endDate = i(r.endDate), n.startTime || (n.startTime = R(Z(r.startDate))), n.endTime || (n.endTime = R(Z(r.endDate))), t(l.CUSTOM_RANGE, r));
     };
     return {
       // Values
-      dateTextInput: r,
-      endDateError: R,
-      endTimeError: l,
-      selectedRangeSelectorValue: D,
-      startDateError: p,
-      startTimeError: m,
-      quickSelectRangeDefaultItems: S,
-      formInputWrapperConditionalClasses: f,
+      dateTextInput: n,
+      endDateError: b,
+      endTimeError: T,
+      selectedRangeSelectorValue: c,
+      startDateError: D,
+      startTimeError: p,
+      quickSelectRangeDefaultItems: _,
+      formInputWrapperConditionalClasses: m,
       // Enums
-      BentoTypographyElement: ye,
+      BentoTypographyElement: Ee,
       // Methods
       hasSlot: We(s),
       t: E,
       // Events
-      onRangeSelectorInput: he,
+      onRangeSelectorInput: we,
       onDateInput: Q,
-      onDateInputKeyDown: H,
-      onEndDateInput: N,
+      onDateInputKeyDown: N,
+      onEndDateInput: u,
       onEndDateSelected: de,
-      onEndTimeInput: Oe,
+      onEndTimeInput: Pe,
       onStartDateSelected: le,
       onStartDateInput: ce,
-      onStartTimeInput: Se,
-      onTimeInputKeyDown: Pe
+      onStartTimeInput: Oe,
+      onTimeInputKeyDown: he
     };
   }
 });
-const aa = { class: "b-date-range-picker-calendar" }, ta = { class: "b-date-range-picker-calendar__form-container" }, na = { class: "b-date-range-picker-calendar__form" }, ra = { key: 0 }, oa = { class: "b-date-range-picker-calendar__calendars-container" };
-function sa(e, t, s, u, E, v) {
-  const o = P("bento-dropdown"), D = P("bento-typography"), f = P("bento-input-field"), S = P("calendar");
-  return g(), J("div", aa, [
-    M("div", ta, [
-      M("div", na, [
-        e.quickSelectRanges ? (g(), O(o, {
+const ta = { class: "b-date-range-picker-calendar" }, na = { class: "b-date-range-picker-calendar__form-container" }, ra = { class: "b-date-range-picker-calendar__form" }, oa = { key: 0 }, sa = { class: "b-date-range-picker-calendar__calendars-container" };
+function ia(e, t, s, d, E, g) {
+  const o = P("bento-dropdown"), c = P("bento-typography"), m = P("bento-input-field"), _ = P("calendar");
+  return f(), J("div", ta, [
+    M("div", na, [
+      M("div", ra, [
+        e.quickSelectRanges ? (f(), O(o, {
           key: 0,
           "aria-label": e.t("customRange"),
           items: e.quickSelectRangeDefaultItems,
           value: e.selectedRangeSelectorValue,
           onInput: e.onRangeSelectorInput
         }, null, 8, ["aria-label", "items", "value", "onInput"])) : I("", !0),
-        e.hasSlot("title") ? me(e.$slots, "title", { key: 1 }, void 0, !0) : I("", !0),
+        e.hasSlot("title") ? fe(e.$slots, "title", { key: 1 }, void 0, !0) : I("", !0),
         M("div", null, [
-          F(D, {
+          F(c, {
             stronger: "",
             el: e.BentoTypographyElement.SPAN,
             class: "b-date-range-picker-calendar__label"
           }, {
             default: k(() => [
-              _(" From ")
+              S(" From ")
             ]),
             _: 1
           }, 8, ["el"]),
           M("div", {
             class: ae(e.formInputWrapperConditionalClasses)
           }, [
-            F(f, {
+            F(m, {
               "aria-label": e.$t("dateFrom"),
               value: e.dateTextInput.startDate,
               error: e.startDateError,
@@ -304,11 +305,11 @@ function sa(e, t, s, u, E, v) {
               onKeydown: e.onDateInputKeyDown
             }, {
               description: k(() => [
-                _("YYYY-MM-DD")
+                S("YYYY-MM-DD")
               ]),
               _: 1
             }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
-            e.allowTimeInput ? (g(), O(f, {
+            e.allowTimeInput ? (f(), O(m, {
               key: 0,
               "aria-label": e.t("timeFrom"),
               value: e.dateTextInput.startTime,
@@ -318,27 +319,27 @@ function sa(e, t, s, u, E, v) {
               onKeydown: e.onTimeInputKeyDown
             }, {
               description: k(() => [
-                _("HH:MM:SS")
+                S("HH:MM:SS")
               ]),
               _: 1
             }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : I("", !0)
           ], 2)
         ]),
         M("div", null, [
-          F(D, {
+          F(c, {
             stronger: "",
             el: e.BentoTypographyElement.SPAN,
             class: "b-date-range-picker-calendar__label"
           }, {
             default: k(() => [
-              _(" To ")
+              S(" To ")
             ]),
             _: 1
           }, 8, ["el"]),
           M("div", {
             class: ae(e.formInputWrapperConditionalClasses)
           }, [
-            F(f, {
+            F(m, {
               class: "b-date-range-picker-calendar__form-input",
               "aria-label": e.$t("dateTo"),
               value: e.dateTextInput.endDate,
@@ -347,11 +348,11 @@ function sa(e, t, s, u, E, v) {
               onKeydown: e.onDateInputKeyDown
             }, {
               description: k(() => [
-                _("YYYY-MM-DD")
+                S("YYYY-MM-DD")
               ]),
               _: 1
             }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
-            e.allowTimeInput ? (g(), O(f, {
+            e.allowTimeInput ? (f(), O(m, {
               key: 0,
               "aria-label": e.t("timeTo"),
               value: e.dateTextInput.endTime,
@@ -361,19 +362,19 @@ function sa(e, t, s, u, E, v) {
               onKeydown: e.onTimeInputKeyDown
             }, {
               description: k(() => [
-                _("HH:MM:SS")
+                S("HH:MM:SS")
               ]),
               _: 1
             }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : I("", !0)
           ], 2)
         ])
       ]),
-      e.hasSlot("actions") ? (g(), J("div", ra, [
-        me(e.$slots, "actions", {}, void 0, !0)
+      e.hasSlot("actions") ? (f(), J("div", oa, [
+        fe(e.$slots, "actions", {}, void 0, !0)
       ])) : I("", !0)
     ]),
-    M("div", oa, [
-      F(S, {
+    M("div", sa, [
+      F(_, {
         value: e.value,
         "first-day-of-week": e.firstDayOfWeek,
         "is-date-disabled": e.isDateDisabled,
@@ -387,42 +388,42 @@ function sa(e, t, s, u, E, v) {
     ])
   ]);
 }
-const $ = /* @__PURE__ */ ke(ea, [["render", sa], ["__scopeId", "data-v-308a0f80"]]);
-var B = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(B || {});
-const ia = ({
+const B = /* @__PURE__ */ Se(aa, [["render", ia], ["__scopeId", "data-v-308a0f80"]]);
+var $ = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))($ || {});
+const la = ({
   datePickerValue: e,
   isDateIncorrect: t
 }) => {
-  var T, i, b, p, R;
-  const { locale: s, t: u } = te(), E = { de: se, enUS: w, fr: ie }, v = (m, l) => Y(m, l, {
+  var v, i, R, D, b;
+  const { locale: s, t: d } = te(), E = { de: se, enUS: w, fr: ie }, g = (p, T) => Y(p, T, {
     locale: E[s.value.substring(0, 2)] || w
-  }), o = (m) => Y(m, h.HOUR_MINUTE_SECONDS, {
+  }), o = (p) => Y(p, h.HOUR_MINUTE_SECONDS, {
     locale: E[s.value.substring(0, 2)] || w
-  }), D = ee({
-    startDate: (T = e.value) != null && T.startDate ? v(e.value.startDate, h.NUMERIC_DATE_YEAR_FIRST) : void 0,
-    endDate: (i = e.value) != null && i.endDate ? v(e.value.endDate, h.NUMERIC_DATE_YEAR_FIRST) : void 0,
+  }), c = ee({
+    startDate: (v = e.value) != null && v.startDate ? g(e.value.startDate, h.NUMERIC_DATE_YEAR_FIRST) : void 0,
+    endDate: (i = e.value) != null && i.endDate ? g(e.value.endDate, h.NUMERIC_DATE_YEAR_FIRST) : void 0,
     // Set time if the startDate/endDate are set
-    startTime: (b = e.value) != null && b.startDate ? o((p = e.value) == null ? void 0 : p.startDate) : void 0,
-    endTime: (R = e.value) != null && R.endDate ? o(e.value.endDate) : void 0
+    startTime: (R = e.value) != null && R.startDate ? o((D = e.value) == null ? void 0 : D.startDate) : void 0,
+    endTime: (b = e.value) != null && b.endDate ? o(e.value.endDate) : void 0
   });
   return {
     // Values
     dateDisplayValue: K(() => {
       if (t.value)
-        return `${D.startDate || ""} - ${D.endDate || ""}`;
+        return `${c.startDate || ""} - ${c.endDate || ""}`;
       if (!e.value || !e.value.startDate && !e.value.endDate)
-        return u("selectDateRange");
-      const { startDate: m, endDate: l } = D;
-      return `${v(new Date(m), h.FULL_DATE_MONTH_FIRST)} - ${v(
-        new Date(l),
+        return d("selectDateRange");
+      const { startDate: p, endDate: T } = c;
+      return `${g(new Date(p), h.FULL_DATE_MONTH_FIRST)} - ${g(
+        new Date(T),
         h.FULL_DATE_MONTH_FIRST
       )}`;
     }),
-    textInputDisplayValue: D,
+    textInputDisplayValue: c,
     // Methods
     formatTextInputDisplayValue: () => ""
   };
-}, Ie = {
+}, be = {
   "en-US": {
     dateRangePicker: "Date range picker {name}",
     optional: "optional",
@@ -432,17 +433,17 @@ const ia = ({
     selectDateRange: "Select a date range",
     selectedDateIsNotAvailable: "Selected date is not available"
   }
-}, la = be({
-  i18n: { messages: Ie },
+}, da = ye({
+  i18n: { messages: be },
   name: "bento-date-range-picker",
   components: {
-    BentoTypography: Re,
-    BentoPopover: Ke,
-    DateRangePickerCalendar: $,
-    DropdownInputDefault: Be,
-    ErrorMessage: Ge
+    BentoTypography: ke,
+    BentoPopover: $e,
+    DateRangePickerCalendar: B,
+    DropdownInputDefault: Ge,
+    ErrorMessage: je
   },
-  directives: { BentoClickOutsideDirective: $e },
+  directives: { BentoClickOutsideDirective: Be },
   props: {
     /**
      * Allows user to enter time values in the form
@@ -463,11 +464,11 @@ const ia = ({
     /**
      * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
      */
-    firstDayOfWeek: $.props.firstDayOfWeek,
+    firstDayOfWeek: B.props.firstDayOfWeek,
     /**
      * Indicate if a date should be disabled or not
      */
-    isDateDisabled: $.props.isDateDisabled,
+    isDateDisabled: B.props.isDateDisabled,
     /**
      * Text that is displayed as a label above the element.
      */
@@ -476,6 +477,10 @@ const ia = ({
      * Highlights the dropdown is optional.
      */
     optional: { type: Boolean, default: !1 },
+    /**
+     * The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.
+     */
+    readonly: { type: Boolean, default: !1 },
     /**
      * Highlights the dropdown is required.
      */
@@ -494,97 +499,98 @@ const ia = ({
     /**
      * Set a maximum number of dates to be selectable by the range.
      */
-    maxRange: $.props.maxRange,
+    maxRange: B.props.maxRange,
     /**
      * Number of months rendered on pane
      */
-    numberOfMonths: $.props.numberOfMonths,
+    numberOfMonths: B.props.numberOfMonths,
     /**
      * Selected date
      */
-    value: $.props.value
+    value: B.props.value
   },
-  emits: [B.INPUT],
+  emits: [$.INPUT],
   setup(e, { emit: t }) {
-    const { locale: s, t: u } = te({ messages: Ie }), E = { de: se, enUS: w, fr: ie }, v = L("bento-date-range-picker-container"), o = L("bento-date-range-picker-label"), D = L("bento-date-range-picker-description"), f = L("bento-date-range-picker-error"), S = L("bento-date-range-picker-date-error"), T = K(
-      () => e.label || u("dateRangePicker", { name: v })
-    ), i = C(!1), b = C(null), p = C(!1);
-    Ce(
+    const { locale: s, t: d } = te({ messages: be }), E = { de: se, enUS: w, fr: ie }, g = W("bento-date-range-picker-container"), o = W("bento-date-range-picker-label"), c = W("bento-date-range-picker-description"), m = W("bento-date-range-picker-error"), _ = W("bento-date-range-picker-date-error"), v = K(
+      () => e.label || d("dateRangePicker", { name: g })
+    ), i = C(!1), R = C(null), D = C(!1), { isReadOnly: b } = Ve(ge(e, "readonly"));
+    Fe(
       () => e.disabled,
       () => {
-        e.disabled && p.value && (p.value = !1);
+        e.disabled && D.value && (D.value = !1);
       }
     );
-    const R = K(() => ({
+    const p = K(() => ({
       "b-date-range-picker__description--error": !!e.errorMessage || i.value
-    })), { dateDisplayValue: m, textInputDisplayValue: l, formatTextInputDisplayValue: r } = ia({
-      datePickerValue: Fe(e, "value"),
+    })), { dateDisplayValue: T, textInputDisplayValue: n, formatTextInputDisplayValue: Q } = la({
+      datePickerValue: ge(e, "value"),
       isDateIncorrect: i
-    }), Q = K(
-      () => `${e.description ? D : ""} ${e.errorMessage ? f : ""} ${i.value ? S : ""}`.trim() || null
+    }), q = K(
+      () => `${e.description ? c : ""} ${e.errorMessage ? m : ""} ${i.value ? _ : ""}`.trim() || null
     );
     return {
       // Refs
-      inputContainerRef: b,
+      inputContainerRef: R,
       // Values,
-      dateDisplayValue: m,
-      datePickerContainerId: v,
-      descriptionConditionalClasses: R,
+      dateDisplayValue: T,
+      datePickerContainerId: g,
+      descriptionConditionalClasses: p,
       isDateIncorrect: i,
-      isDateRangePickerOpen: p,
+      isDateRangePickerOpen: D,
+      isReadOnly: b,
       labelId: o,
-      descriptionId: D,
-      dateErrorId: S,
-      errorId: f,
-      popoverAriaLabel: T,
-      ariaDescribedBy: Q,
-      textInputDisplayValue: l,
+      descriptionId: c,
+      dateErrorId: _,
+      errorId: m,
+      popoverAriaLabel: v,
+      ariaDescribedBy: q,
+      textInputDisplayValue: n,
       // Enums
-      BentoTypographyElement: ye,
-      BentoTypographyVariant: qe,
-      BentoPopoverPositions: Ye,
+      BentoTypographyElement: Ee,
+      BentoTypographyVariant: Ye,
+      BentoPopoverPositions: Ke,
       // Events
       closeDateRangePicker: () => {
-        p.value = !1;
+        D.value = !1;
       },
       clearDateRangePickerValue: async () => {
-        i.value && (i.value = !1), t(B.INPUT, null);
+        i.value && (i.value = !1), t($.INPUT, null);
       },
       openDateRangePicker: () => {
-        p.value = !0, r();
+        D.value = !0, Q();
       },
-      onRangeSelectorInput: (c) => {
-        if (c) {
+      onRangeSelectorInput: (u) => {
+        if (u) {
           const N = (H) => Y(H, h.NUMERIC_DATE_YEAR_FIRST, {
             locale: E[s.value.substring(0, 2)] || w
           });
-          l.startDate = N(c.startDate), l.endDate = N(c.endDate), t(B.INPUT, c);
+          n.startDate = N(u.startDate), n.endDate = N(u.endDate), t($.INPUT, u);
         }
       },
       onEnterPressedOverInput: () => {
-        i.value || (p.value = !1);
+        i.value || (D.value = !1);
       },
-      onDateRangePickerInput: (c) => {
+      onDateRangePickerInput: (u) => {
         i.value = !1;
         const N = (H) => Y(H, h.NUMERIC_DATE_YEAR_FIRST, {
           locale: E[s.value.substring(0, 2)] || w
         });
-        l.startDate = N(c.startDate), l.endDate = N(c.endDate), t(B.INPUT, c);
+        n.startDate = N(u.startDate), n.endDate = N(u.endDate), t($.INPUT, u);
       },
-      onDateRangePickerError: (c) => {
-        i.value = !0, l.startDate = c.startDate, l.endDate = c.endDate, t(B.INPUT, { startDate: null, endDate: null });
+      onDateRangePickerError: (u) => {
+        i.value = !0, n.startDate = u.startDate, n.endDate = u.endDate, t($.INPUT, { startDate: null, endDate: null });
       },
-      onDateRangePickerFormDateInputUpdate: (c) => {
-        i.value = !1, c.startTime && (l.startTime = c.startTime), c.endTime && (l.endTime = c.endTime);
+      onDateRangePickerFormDateInputUpdate: (u) => {
+        i.value = !1, u.startTime && (n.startTime = u.startTime), u.endTime && (n.endTime = u.endTime);
       }
     };
   }
 });
-const da = { class: "b-date-range-picker" }, ua = ["id"];
-function ca(e, t, s, u, E, v) {
-  const o = P("bento-typography"), D = P("dropdown-input-default"), f = P("error-message"), S = P("date-range-picker-calendar"), T = P("bento-popover"), i = Ne("bento-click-outside-directive");
-  return Ae((g(), J("div", da, [
-    e.label ? (g(), J("div", {
+const ua = { class: "b-date-range-picker" }, ca = ["id"];
+function Da(e, t, s, d, E, g) {
+  const o = P("bento-typography"), c = P("dropdown-input-default"), m = P("error-message"), _ = P("date-range-picker-calendar"), v = P("bento-popover"), i = Ne("bento-click-outside-directive");
+  return Ae((f(), J("div", ua, [
+    e.label ? (f(), J("div", {
       key: 0,
       id: e.labelId,
       class: "b-date-range-picker__label"
@@ -594,35 +600,35 @@ function ca(e, t, s, u, E, v) {
         stronger: ""
       }, {
         default: k(() => [
-          _(j(e.label), 1)
+          S(j(e.label), 1)
         ]),
         _: 1
       }, 8, ["el"]),
-      e.optional ? (g(), O(o, {
+      e.optional ? (f(), O(o, {
         key: 0,
         class: "b-date-range-picker__label-requirement",
         el: e.BentoTypographyElement.SPAN
       }, {
         default: k(() => [
-          _(" (" + j(e.$t("optional")) + ") ", 1)
+          S(" (" + j(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
       }, 8, ["el"])) : I("", !0),
-      e.required ? (g(), O(o, {
+      e.required ? (f(), O(o, {
         key: 1,
         class: "b-date-range-picker__label-requirement",
         el: e.BentoTypographyElement.SPAN
       }, {
         default: k(() => [
-          _(" (" + j(e.$t("required")) + ") ", 1)
+          S(" (" + j(e.$t("required")) + ") ", 1)
         ]),
         _: 1
       }, 8, ["el"])) : I("", !0)
-    ], 8, ua)) : I("", !0),
+    ], 8, ca)) : I("", !0),
     M("div", {
-      onKeydown: t[0] || (t[0] = Ue((...b) => e.onEnterPressedOverInput && e.onEnterPressedOverInput(...b), ["enter"]))
+      onKeydown: t[0] || (t[0] = Ue((...R) => e.onEnterPressedOverInput && e.onEnterPressedOverInput(...R), ["enter"]))
     }, [
-      F(D, {
+      F(c, {
         ref: "inputContainerRef",
         ariaControls: e.datePickerContainerId,
         ariaExpanded: e.isDateRangePickerOpen,
@@ -632,35 +638,36 @@ function ca(e, t, s, u, E, v) {
         "is-invalid": !!e.errorMessage || e.isDateIncorrect,
         open: e.isDateRangePickerOpen,
         "display-value": e.dateDisplayValue,
+        readonly: e.isReadOnly,
         onOpen: e.openDateRangePicker,
         onClear: e.clearDateRangePickerValue,
         onClose: e.closeDateRangePicker
-      }, null, 8, ["ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "disabled", "is-invalid", "open", "display-value", "onOpen", "onClear", "onClose"])
+      }, null, 8, ["ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "disabled", "is-invalid", "open", "display-value", "readonly", "onOpen", "onClear", "onClose"])
     ], 32),
-    e.isDateIncorrect ? (g(), O(f, {
+    e.isDateIncorrect ? (f(), O(m, {
       key: 1,
       id: e.dateErrorId,
       "error-message": e.$t("provideDateInAFormat").toString(),
       class: "b-date-range-picker__error-message"
     }, null, 8, ["id", "error-message"])) : I("", !0),
-    e.errorMessage ? (g(), O(f, {
+    e.errorMessage ? (f(), O(m, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-date-range-picker__error-message"
     }, null, 8, ["id", "error-message"])) : I("", !0),
-    e.description ? (g(), O(o, {
+    e.description ? (f(), O(o, {
       key: 3,
       id: e.descriptionId,
       class: ae(["b-date-range-picker__description", e.descriptionConditionalClasses]),
       el: e.BentoTypographyElement.SPAN
     }, {
       default: k(() => [
-        _(j(e.description), 1)
+        S(j(e.description), 1)
       ]),
       _: 1
     }, 8, ["id", "class", "el"])) : I("", !0),
-    e.inputContainerRef ? (g(), O(T, {
+    e.inputContainerRef ? (f(), O(v, {
       key: 4,
       id: e.datePickerContainerId,
       class: "b-date-range-picker__container",
@@ -673,7 +680,7 @@ function ca(e, t, s, u, E, v) {
       "fit-content": ""
     }, {
       default: k(() => [
-        F(S, {
+        F(_, {
           "allow-time-input": e.allowTimeInput,
           "quick-select-ranges": e.quickSelectRanges,
           value: e.value,
@@ -694,10 +701,10 @@ function ca(e, t, s, u, E, v) {
     [i, e.closeDateRangePicker]
   ]);
 }
-const wa = /* @__PURE__ */ ke(la, [["render", ca], ["__scopeId", "data-v-218210c1"]]);
+const Ca = /* @__PURE__ */ Se(da, [["render", Da], ["__scopeId", "data-v-13cd4796"]]);
 export {
-  wa as B,
-  $ as D,
-  B as a
+  Ca as B,
+  B as D,
+  $ as a
 };
-//# sourceMappingURL=index.b46a5047.js.map
+//# sourceMappingURL=index.c9225c3b.js.map