@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/date-picker.js

@@ -1,32 +1,32 @@
-import { ref as I, computed as g, defineComponent as J, watch as Q, toRef as X, nextTick as A, resolveComponent as b, resolveDirective as Z, withDirectives as x, openBlock as l, createElementBlock as R, withKeys as U, createVNode as S, withCtx as y, createTextVNode as C, toDisplayString as T, createBlock as c, createCommentVNode as u, createElementVNode as ee, normalizeClass as ae } from "vue";
-import { c as te } from "./chunks/dropdown-default-textbox.ae46144f.js";
+import { ref as g, computed as I, defineComponent as J, watch as Q, toRef as X, nextTick as R, resolveComponent as v, resolveDirective as Z, withDirectives as x, openBlock as l, createElementBlock as A, withKeys as U, createVNode as O, withCtx as y, createTextVNode as C, toDisplayString as B, createBlock as c, createCommentVNode as u, createElementVNode as ee, normalizeClass as ae } from "vue";
+import { B as te } from "./chunks/directive.0408e565.js";
 import { BentoPopover as re, BentoPopoverPositions as ne } from "./popover.js";
 import { g as k } from "./chunks/unique-id.a2a2b458.js";
-import { B as oe, c as le, a as ie } from "./chunks/index.1d501e31.js";
-import { u as K } from "./chunks/i18n.3619d46c.js";
-import { f as M } from "./chunks/index.af260515.js";
-import { e as O, d as se, f as de } from "./chunks/index.f55fdc32.js";
-import { D as $, v as ue, f as pe } from "./chunks/date-input.9186a0bf.js";
+import { B as oe, a as le, b as ie } from "./chunks/index.92f7d550.js";
+import { u as K } from "./chunks/i18n.6c402773.js";
+import { D as M, v as se, f as de } from "./chunks/date-input.9186a0bf.js";
+import { f as $ } from "./chunks/index.c25bbcc8.js";
+import { e as w, d as ue, f as pe } from "./chunks/index.f55fdc32.js";
 import { d as ce } from "./chunks/debounce.f8d92e44.js";
-import { C as N } from "./chunks/calendar.24ede03d.js";
-import { b as Le } from "./chunks/calendar.24ede03d.js";
-import { E as fe } from "./chunks/error-message.f9c2a4be.js";
-import { B as De } from "./chunks/directive.0408e565.js";
-import { _ as ve } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index3.css";
+import { C as N } from "./chunks/calendar.1fb0d5b2.js";
+import { b as Ye } from "./chunks/calendar.1fb0d5b2.js";
+import { c as fe } from "./chunks/dropdown-default-textbox.2ac50ee2.js";
+import { E as De } from "./chunks/error-message.a65a9abf.js";
+import { _ as me } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import "./assets/index17.css";
 var p = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(p || {});
-const me = ({ datePickerValue: e, isDateIncorrect: t }) => {
-  const { locale: i, t: f } = K(), D = { de: se, enUS: O, fr: de }, s = I(null);
+const be = ({ datePickerValue: e, isDateIncorrect: t }) => {
+  const { locale: i, t: f } = K(), D = { de: ue, enUS: w, fr: pe }, s = g(null);
   return {
     // Values
-    dateDisplayValue: g(() => t.value ? s.value : e.value ? M(e.value, $.FULL_DATE, {
-      locale: D[i.value.substring(0, 2)] || O
+    dateDisplayValue: I(() => t.value ? s.value : e.value ? $(e.value, M.FULL_DATE, {
+      locale: D[i.value.substring(0, 2)] || w
     }) : f("selectDate")),
     textInputValue: s,
     // Methods
     formatTextInputDisplayValue: (d = e.value) => {
-      t.value || (s.value = d ? M(d, $.NUMERIC_DATE_YEAR_FIRST, {
-        locale: D[i.value.substring(0, 2)] || O
+      t.value || (s.value = d ? $(d, M.NUMERIC_DATE_YEAR_FIRST, {
+        locale: D[i.value.substring(0, 2)] || w
       }) : null);
     }
   };
@@ -40,18 +40,17 @@ const me = ({ datePickerValue: e, isDateIncorrect: t }) => {
     selectedDateIsNotAvailable: "Selected date is not available",
     datePicker: "Date picker"
   }
-}, be = 1e3, ye = J({
+}, ve = 1e3, ye = J({
   i18n: { messages: q },
   name: "bento-date-picker",
   components: {
     BentoTypography: oe,
     BentoPopover: re,
     Calendar: N,
-    ErrorMessage: fe,
-    DropdownInputDefault: te
+    ErrorMessage: De,
+    DropdownInputDefault: fe
   },
-  directives: { BentoClickOutsideDirective: De },
-  inheritAttrs: !1,
+  directives: { BentoClickOutsideDirective: te },
   props: {
     /**
      * Descriptive supporting text visbile underneath the dropdown.
@@ -92,20 +91,20 @@ const me = ({ datePickerValue: e, isDateIncorrect: t }) => {
   },
   emits: [p.INPUT],
   setup(e, { emit: t }) {
-    const { t: i } = K({ messages: q }), f = k("bento-date-picker-container"), D = k("bento-date-picker-label"), s = k("bento-date-picker-description"), o = k("bento-date-picker-error"), v = k("bento-date-picker-date-error"), d = g(() => e.label || i("datePicker", { name: f })), P = I(null), B = I(null), r = I(!1), n = I(!1);
+    const { t: i } = K({ messages: q }), f = k("bento-date-picker-container"), D = k("bento-date-picker-label"), s = k("bento-date-picker-description"), o = k("bento-date-picker-error"), m = k("bento-date-picker-date-error"), d = I(() => e.label || i("datePicker", { name: f })), P = g(null), E = g(null), r = g(!1), n = g(!1);
     Q(
       () => e.disabled,
       (a) => {
         a && n.value && (n.value = !1);
       }
     );
-    const { dateDisplayValue: F, textInputValue: m, formatTextInputDisplayValue: V } = me({
+    const { dateDisplayValue: F, textInputValue: b, formatTextInputDisplayValue: V } = be({
       datePickerValue: X(e, "value"),
       isDateIncorrect: r
-    }), E = g(() => e.isDateDisabled && e.isDateDisabled(new Date(m.value)) ? i("selectedDateIsNotAvailable") : r.value ? i("provideDateInAFormat") : null), Y = g(() => ({
-      "b-date-picker__description--error": e.errorMessage || E.value
-    })), L = g(
-      () => `${e.description ? s : ""} ${e.errorMessage ? o : ""} ${E.value ? v : ""}`.trim() || null
+    }), T = I(() => e.isDateDisabled && e.isDateDisabled(new Date(b.value)) ? i("selectedDateIsNotAvailable") : r.value ? i("provideDateInAFormat") : null), Y = I(() => ({
+      "b-date-picker__description--error": e.errorMessage || T.value
+    })), L = I(
+      () => `${e.description ? s : ""} ${e.errorMessage ? o : ""} ${T.value ? m : ""}`.trim() || null
     ), W = (a) => e.isDateDisabled ? !e.isDateDisabled(a) : !0, h = () => {
       n.value = !1;
     }, _ = () => {
@@ -113,17 +112,17 @@ const me = ({ datePickerValue: e, isDateIncorrect: t }) => {
     }, j = (a) => {
       r.value = !1, h(), t(p.INPUT, a);
     }, z = async () => {
-      r.value && (r.value = !1, m.value = null), t(p.INPUT, null);
+      r.value && (r.value = !1, b.value = null), t(p.INPUT, null);
     }, G = (a) => {
-      ue(a);
+      se(a);
     }, H = ce((a) => {
       if (a.length < 10)
         return;
       /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && W(new Date(a)) ? (r.value = !1, t(p.INPUT, new Date(a))) : a && (r.value = !0, t(p.INPUT, null));
-    }, be);
+    }, ve);
     return {
       // Refs
-      inputContainerRef: B,
+      inputContainerRef: E,
       calendarContainerRef: P,
       // Values,
       dateDisplayValue: F,
@@ -131,14 +130,14 @@ const me = ({ datePickerValue: e, isDateIncorrect: t }) => {
       descriptionConditionalClasses: Y,
       isDateIncorrect: r,
       isDatePickerOpen: n,
-      dateErrorText: E,
+      dateErrorText: T,
       labelId: D,
       descriptionId: s,
       errorId: o,
-      dateErrorId: v,
+      dateErrorId: m,
       popoverAriaLabel: d,
       ariaDescribedBy: L,
-      textInputValue: m,
+      textInputValue: b,
       // Enums
       BentoTypographyElement: le,
       BentoTypographyVariant: ie,
@@ -150,37 +149,37 @@ const me = ({ datePickerValue: e, isDateIncorrect: t }) => {
       openDatePicker: _,
       onDateKeyDown: G,
       onDateInputChange: (a) => {
-        m.value = pe(a), H(m.value);
-      },
-      onEnterPressedOverInput: () => {
-        r.value || (n.value = !1);
+        b.value = de(a), H(b.value);
       },
       // Keyboard navigation
-      onSpaceBar: async (a) => {
-        var w;
-        a.preventDefault(), !n.value && (_(), await A(), e.value || (V(/* @__PURE__ */ new Date()), t(p.INPUT, /* @__PURE__ */ new Date()), await A()), (w = P.value) == null || w.$refs.calendarRef[0].focusOnDate(e.value));
+      onSpaceBarOrEnter: async (a) => {
+        var S;
+        n.value || (a.preventDefault(), _(), await R(), e.value || (V(/* @__PURE__ */ new Date()), t(p.INPUT, /* @__PURE__ */ new Date()), await R()), (S = P.value) == null || S.$refs.calendarRef[0].focusOnDate(e.value));
       }
     };
   }
 });
 const ke = ["id"];
-function Ie(e, t, i, f, D, s) {
-  const o = b("bento-typography"), v = b("dropdown-input-default"), d = b("error-message"), P = b("calendar"), B = b("bento-popover"), r = Z("bento-click-outside-directive");
-  return x((l(), R("div", {
+function ge(e, t, i, f, D, s) {
+  const o = v("bento-typography"), m = v("dropdown-input-default"), d = v("error-message"), P = v("calendar"), E = v("bento-popover"), r = Z("bento-click-outside-directive");
+  return x((l(), A("div", {
     class: "b-date-picker",
-    onKeydownCapture: t[1] || (t[1] = U((...n) => e.onSpaceBar && e.onSpaceBar(...n), ["space"]))
+    onKeydownCapture: [
+      t[0] || (t[0] = U((...n) => e.onSpaceBarOrEnter && e.onSpaceBarOrEnter(...n), ["space"])),
+      t[1] || (t[1] = U((...n) => e.onSpaceBarOrEnter && e.onSpaceBarOrEnter(...n), ["enter"]))
+    ]
   }, [
-    e.label ? (l(), R("div", {
+    e.label ? (l(), A("div", {
       key: 0,
       id: e.labelId,
       class: "b-date-picker__label"
     }, [
-      S(o, {
+      O(o, {
         el: e.BentoTypographyElement.SPAN,
         stronger: ""
       }, {
         default: y(() => [
-          C(T(e.label), 1)
+          C(B(e.label), 1)
         ]),
         _: 1
       }, 8, ["el"]),
@@ -190,7 +189,7 @@ function Ie(e, t, i, f, D, s) {
         el: e.BentoTypographyElement.SPAN
       }, {
         default: y(() => [
-          C(" (" + T(e.$t("optional")) + ") ", 1)
+          C(" (" + B(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
       }, 8, ["el"])) : u("", !0),
@@ -200,15 +199,13 @@ function Ie(e, t, i, f, D, s) {
         el: e.BentoTypographyElement.SPAN
       }, {
         default: y(() => [
-          C(" (" + T(e.$t("required")) + ") ", 1)
+          C(" (" + B(e.$t("required")) + ") ", 1)
         ]),
         _: 1
       }, 8, ["el"])) : u("", !0)
     ], 8, ke)) : u("", !0),
-    ee("div", {
-      onKeydown: t[0] || (t[0] = U((...n) => e.onEnterPressedOverInput && e.onEnterPressedOverInput(...n), ["enter"]))
-    }, [
-      S(v, {
+    ee("div", null, [
+      O(m, {
         ref: "inputContainerRef",
         ariaControls: e.datePickerContainerId,
         ariaExpanded: e.isDatePickerOpen,
@@ -227,7 +224,7 @@ function Ie(e, t, i, f, D, s) {
         onClear: e.clearDatePickerValue,
         onClose: e.closeDatePicker
       }, null, 8, ["ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "disabled", "is-invalid", "open", "value", "display-value", "onInput", "onOpen", "onKeydown", "onClear", "onClose"])
-    ], 32),
+    ]),
     e.dateErrorText ? (l(), c(d, {
       key: 1,
       id: e.dateErrorId,
@@ -246,11 +243,11 @@ function Ie(e, t, i, f, D, s) {
       el: e.BentoTypographyElement.SPAN
     }, {
       default: y(() => [
-        C(T(e.description), 1)
+        C(B(e.description), 1)
       ]),
       _: 1
     }, 8, ["class", "el"])) : u("", !0),
-    e.inputContainerRef ? (l(), c(B, {
+    e.inputContainerRef ? (l(), c(E, {
       key: 4,
       id: e.datePickerContainerId,
       class: "b-date-picker__container",
@@ -264,7 +261,7 @@ function Ie(e, t, i, f, D, s) {
       "fit-content": ""
     }, {
       default: y(() => [
-        S(P, {
+        O(P, {
           ref: "calendarContainerRef",
           "first-day-of-week": e.firstDayOfWeek,
           "is-date-disabled": e.isDateDisabled,
@@ -279,10 +276,10 @@ function Ie(e, t, i, f, D, s) {
     [r, e.closeDatePicker]
   ]);
 }
-const qe = /* @__PURE__ */ ve(ye, [["render", Ie], ["__scopeId", "data-v-e8974e28"]]);
+const $e = /* @__PURE__ */ me(ye, [["render", ge], ["__scopeId", "data-v-6d23530a"]]);
 export {
-  qe as BentoDatePicker,
+  $e as BentoDatePicker,
   p as BentoDatePickerEvent,
-  Le as BentoDatePickerFirstDayOfWeek
+  Ye as BentoDatePickerFirstDayOfWeek
 };
 //# sourceMappingURL=date-picker.js.map

package/dist/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../vue2/src/components/date-picker/date-picker.types.ts","../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../vue2/src/components/date-picker/date-picker.vue"],"sourcesContent":["export { CalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek } from '@/internal';\nexport type {\n    CalendarIsDateDisabled as BentoDatePickerIsDateDisabled,\n    CalendarSingleDateValue as BentoDatePickerValue,\n} from '@/internal';\n\nexport enum BentoDatePickerEvent {\n    INPUT = 'input',\n}\n","import { computed, ref } from 'vue';\nimport { de, enUS, fr } from 'date-fns/locale';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { DateFormat } from '@/types';\nimport format from 'date-fns/format';\n\n/**\n * Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param {Ref<Date>} option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param {Ref<boolean>} option.isDateIncorrect Indicates if the date is correct or not\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({ datePickerValue, isDateIncorrect }) => {\n    const { locale, t } = useI18n();\n    const locales = { de, enUS, fr };\n\n    const textInputValue = ref(null);\n\n    const dateDisplayValue = computed(() => {\n        // Display incorrect date when there's an error with the input\n        if (isDateIncorrect.value) {\n            return textInputValue.value;\n        }\n\n        // Display \"Select a date\" when there's no date selected or input\n        if (!datePickerValue.value) {\n            return t('selectDate') as string;\n        }\n\n        // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" if there's a valid date selected\n        return format(datePickerValue.value as Date, DateFormat.FULL_DATE, {\n            locale: locales[locale.value.substring(0, 2)] || enUS,\n        });\n    });\n\n    /**\n     * Formats the \"dateToFormat\" date value with the yyyy-MM-dd format and sets it as \"formatTextInputDisplayValue\" value\n     * @param {DATE} dateToFormat - Date to be assigned and formatted\n     */\n    const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n        // If date is incorrect, leave the textInputValue intact\n        if (isDateIncorrect.value) {\n            return;\n        }\n\n        textInputValue.value = dateToFormat\n            ? format(dateToFormat, DateFormat.NUMERIC_DATE_YEAR_FIRST, {\n                  locale: locales[locale.value.substring(0, 2)] || enUS,\n              })\n            : null;\n    };\n\n    return {\n        // Values\n        dateDisplayValue,\n        textInputValue,\n\n        // Methods\n        formatTextInputDisplayValue,\n    };\n};\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n    <div v-bento-click-outside-directive=\"closeDatePicker\" class=\"b-date-picker\" @keydown.space.capture=\"onSpaceBar\">\n        <!-- Label -->\n        <div v-if=\"label\" :id=\"labelId\" class=\"b-date-picker__label\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" stronger>{{ label }}</bento-typography>\n            <bento-typography\n                v-if=\"optional\"\n                class=\"b-date-picker__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ $t('optional') }})\n            </bento-typography>\n            <bento-typography\n                v-if=\"required\"\n                class=\"b-date-picker__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ $t('required') }})\n            </bento-typography>\n        </div>\n\n        <!-- Input -->\n        <div @keydown.enter=\"onEnterPressedOverInput\">\n            <dropdown-input-default\n                ref=\"inputContainerRef\"\n                :ariaControls=\"datePickerContainerId\"\n                :ariaExpanded=\"isDatePickerOpen\"\n                :aria-labelledby=\"label ? labelId : null\"\n                :aria-describedby=\"ariaDescribedBy\"\n                :disabled=\"disabled\"\n                dynamic-filtering\n                :is-invalid=\"!!errorMessage || !!dateErrorText\"\n                :open=\"isDatePickerOpen\"\n                :value=\"textInputValue\"\n                :display-value=\"dateDisplayValue\"\n                :debounce-time=\"0\"\n                @input=\"onDateInputChange\"\n                @open=\"openDatePicker\"\n                @keydown=\"onDateKeyDown\"\n                @clear=\"clearDatePickerValue\"\n                @close=\"closeDatePicker\"\n            />\n        </div>\n\n        <!-- Error Messages -->\n        <error-message\n            v-if=\"dateErrorText\"\n            :id=\"dateErrorId\"\n            :error-message=\"dateErrorText\"\n            class=\"b-date-picker__error-message\"\n        />\n        <error-message\n            v-if=\"errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-date-picker__error-message\"\n        />\n\n        <!-- Description -->\n        <bento-typography\n            v-if=\"description\"\n            class=\"b-date-picker__description\"\n            :class=\"descriptionConditionalClasses\"\n            :el=\"BentoTypographyElement.SPAN\"\n        >\n            {{ description }}\n        </bento-typography>\n\n        <!-- Calendar container -->\n        <bento-popover\n            v-if=\"inputContainerRef\"\n            :id=\"datePickerContainerId\"\n            class=\"b-date-picker__container\"\n            role=\"dialog\"\n            :open=\"isDatePickerOpen\"\n            :target-element=\"inputContainerRef\"\n            :disable-focus-trap=\"true\"\n            :aria-label=\"popoverAriaLabel\"\n            :aria-modal=\"true\"\n            :position=\"BentoPopoverPositions.BOTTOM_START\"\n            fit-content\n        >\n            <calendar\n                ref=\"calendarContainerRef\"\n                :first-day-of-week=\"firstDayOfWeek\"\n                :is-date-disabled=\"isDateDisabled\"\n                :number-of-months=\"1\"\n                :value=\"value\"\n                @input=\"onDateSelected\"\n            />\n        </bento-popover>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, PropType, Ref, ref, toRef, watch } from 'vue';\n    import { BentoClickOutsideDirective } from '@/directives';\n    import { BentoDatePickerEvent, BentoDatePickerValue } from './date-picker.types';\n    import { Calendar, ErrorMessage } from '@/internal';\n    import { DropdownInputDefault } from '@/components/dropdown/components';\n    import { BentoPopover, BentoPopoverPositions } from '@/components/popover';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '../typography';\n    import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n    import { formatDateInputValue, validateDateInput } from '@/utils/ts/date-input';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { debounce } from '@/utils/ts/debounce';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const DEBOUNCE_TIME = 1000;\n\n    /**\n     * Date picker selector.\n     *\n     * @example\n     * import { BentoDatePicker } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDatePicker },\n     *     template: `\n     *          <bento-date-picker\n     *              label=\"Label\"\n     *              description=\"Supporting text\"\n     *              required\n     *              optional\n     *              disabled\n     *              @input=\"onDateChanged\"\n     *              v-model=\"selectedDate\"\n     *          />\n     *     `,\n     *      setup() {\n     *          const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n     *          return {\n     *              selectedDate,\n     *          }\n     *      }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-date-picker',\n        components: {\n            BentoTypography,\n            BentoPopover,\n            Calendar,\n            ErrorMessage,\n            DropdownInputDefault,\n        },\n        directives: { BentoClickOutsideDirective },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Descriptive supporting text visbile underneath the dropdown.\n             */\n            description: { type: String, default: undefined },\n\n            /**\n             * Disables dropdown functionality.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Displays component in an error state with an error message\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n             */\n            firstDayOfWeek: Calendar.props.firstDayOfWeek,\n\n            /**\n             * Indicate if a date should be disabled or not\n             */\n            isDateDisabled: Calendar.props.isDateDisabled,\n\n            /**\n             * Text that is displayed as a label above the element.\n             */\n            label: { type: String, default: undefined },\n\n            /**\n             * Highlights the dropdown is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Highlights the dropdown is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Selected date\n             */\n            value: { type: [Date, Object] as PropType<BentoDatePickerValue>, default: null },\n        },\n        emits: [BentoDatePickerEvent.INPUT],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const datePickerContainerId = generateUid('bento-date-picker-container');\n            const labelId = generateUid('bento-date-picker-label');\n            const descriptionId = generateUid('bento-date-picker-description');\n            const errorId = generateUid('bento-date-picker-error');\n            const dateErrorId = generateUid('bento-date-picker-date-error');\n            const popoverAriaLabel = computed(() => props.label || t('datePicker', { name: datePickerContainerId }));\n\n            // Refs\n            const calendarContainerRef = ref(null);\n            const inputContainerRef = ref(null);\n\n            // Values\n            const isDateIncorrect = ref(false);\n            const isDatePickerOpen = ref(false);\n\n            watch(\n                () => props.disabled,\n                disabled => {\n                    // Close date picker popover if it's opened when it's disabled\n                    if (disabled && isDatePickerOpen.value) {\n                        isDatePickerOpen.value = false;\n                    }\n                }\n            );\n\n            const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n                datePickerValue: toRef(props, 'value') as Ref<Date>,\n                isDateIncorrect,\n            });\n\n            const dateErrorText = computed(() => {\n                if (props.isDateDisabled && props.isDateDisabled(new Date(textInputValue.value))) {\n                    return t('selectedDateIsNotAvailable');\n                }\n\n                return isDateIncorrect.value ? t('provideDateInAFormat') : null;\n            });\n\n            const descriptionConditionalClasses = computed(() => ({\n                'b-date-picker__description--error': props.errorMessage || dateErrorText.value,\n            }));\n\n            const ariaDescribedBy = computed(\n                () =>\n                    `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n                        dateErrorText.value ? dateErrorId : ''\n                    }`.trim() || null\n            );\n\n            const isDateEnabled = (date: Date) => {\n                // Check if function is set, otherwise all dates are enabled\n                if (props.isDateDisabled) {\n                    return !props.isDateDisabled(date);\n                }\n\n                return true;\n            };\n\n            const closeDatePicker = () => {\n                isDatePickerOpen.value = false;\n            };\n\n            const openDatePicker = () => {\n                isDatePickerOpen.value = true;\n\n                formatTextInputDisplayValue();\n            };\n\n            const onDateSelected = (selectedDate: Date) => {\n                // Reset the error state when a valid date is selected\n                isDateIncorrect.value = false;\n\n                closeDatePicker();\n                emit(BentoDatePickerEvent.INPUT, selectedDate);\n            };\n\n            const clearDatePickerValue = async () => {\n                if (isDateIncorrect.value) {\n                    isDateIncorrect.value = false;\n                    textInputValue.value = null;\n                }\n                emit(BentoDatePickerEvent.INPUT, null);\n            };\n\n            const onDateKeyDown = (event: KeyboardEvent) => {\n                validateDateInput(event);\n            };\n\n            const validateDate = debounce((stringDate: string) => {\n                // Validate only if the date is complete\n                if (stringDate.length < 10) {\n                    return;\n                }\n\n                // Checks for YYYY-MM-DD format\n                const dateRegex = /^\\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/;\n                const isValidDate = dateRegex.test(stringDate) && isDateEnabled(new Date(stringDate));\n                if (isValidDate) {\n                    isDateIncorrect.value = false;\n                    emit(BentoDatePickerEvent.INPUT, new Date(stringDate));\n                } else if (stringDate) {\n                    // Only set to true if the value exists (not null/undefined)\n                    isDateIncorrect.value = true;\n                    emit(BentoDatePickerEvent.INPUT, null);\n                }\n            }, DEBOUNCE_TIME);\n\n            const onDateInputChange = (stringDate: string) => {\n                textInputValue.value = formatDateInputValue(stringDate);\n                validateDate(textInputValue.value);\n            };\n\n            const onEnterPressedOverInput = () => {\n                // Close the date picker if the date is correct\n                if (!isDateIncorrect.value) {\n                    isDatePickerOpen.value = false;\n                }\n            };\n\n            /**\n             * Key navigation\n             */\n\n            /**\n             * Space bar keyDown event handler.\n             *\n             * * Opens the date picker dialog on the first keydown.\n             * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n             * @param {KeyboardEvent} event Event being triggered\n             */\n            const onSpaceBar = async (event: KeyboardEvent) => {\n                event.preventDefault();\n\n                if (isDatePickerOpen.value) {\n                    return;\n                }\n\n                openDatePicker();\n\n                // Wait for the date picker dialog to open\n                await nextTick();\n\n                // Set current date (today) if no date is selected\n                if (!props.value) {\n                    // Format the opened date picker date to YYYY-MM-DD\n                    formatTextInputDisplayValue(new Date());\n                    emit(BentoDatePickerEvent.INPUT, new Date());\n\n                    // Wait for new value to be set with the emit\n                    await nextTick();\n                }\n\n                // Focus on date\n                calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(props.value);\n            };\n\n            return {\n                // Refs\n                inputContainerRef,\n                calendarContainerRef,\n\n                // Values,\n                dateDisplayValue,\n                datePickerContainerId,\n                descriptionConditionalClasses,\n                isDateIncorrect,\n                isDatePickerOpen,\n                dateErrorText,\n                labelId,\n                descriptionId,\n                errorId,\n                dateErrorId,\n                popoverAriaLabel,\n                ariaDescribedBy,\n                textInputValue,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                BentoPopoverPositions,\n\n                // Events\n                closeDatePicker,\n                clearDatePickerValue,\n                onDateSelected,\n                openDatePicker,\n                onDateKeyDown,\n                onDateInputChange,\n                onEnterPressedOverInput,\n\n                // Keyboard navigation\n                onSpaceBar,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["BentoDatePickerEvent","BentoDatePickerEvent2","useDatePickerSingleCalendarText","datePickerValue","isDateIncorrect","locale","t","useI18n","locales","de","enUS","fr","textInputValue","ref","computed","format","DateFormat","dateToFormat","DEBOUNCE_TIME","_sfc_main","defineComponent","messages","BentoTypography","BentoPopover","Calendar","ErrorMessage","DropdownInputDefault","BentoClickOutsideDirective","props","emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","watch","disabled","dateDisplayValue","formatTextInputDisplayValue","toRef","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","date","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","debounce","stringDate","BentoTypographyElement","BentoTypographyVariant","BentoPopoverPositions","formatDateInputValue","nextTick","_a","_cache","withKeys","args","_ctx","createCommentVNode","openBlock","createBlock","_component_bento_typography","_hoisted_1","createElementVNode","_component_error_message","normalizeClass","_component_bento_popover","withCtx","createVNode","_component_calendar"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","sources":["../../vue2/src/components/date-picker/date-picker.types.ts","../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../vue2/src/components/date-picker/date-picker.vue"],"sourcesContent":["export { CalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek } from '@/internal';\nexport type {\n    CalendarIsDateDisabled as BentoDatePickerIsDateDisabled,\n    CalendarSingleDateValue as BentoDatePickerValue,\n} from '@/internal';\n\nexport enum BentoDatePickerEvent {\n    INPUT = 'input',\n}\n","import { computed, ref } from 'vue';\nimport { de, enUS, fr } from 'date-fns/locale';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { DateFormat } from '@/types';\nimport format from 'date-fns/format';\n\n/**\n * Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param {Ref<Date>} option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param {Ref<boolean>} option.isDateIncorrect Indicates if the date is correct or not\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({ datePickerValue, isDateIncorrect }) => {\n    const { locale, t } = useI18n();\n    const locales = { de, enUS, fr };\n\n    const textInputValue = ref(null);\n\n    const dateDisplayValue = computed(() => {\n        // Display incorrect date when there's an error with the input\n        if (isDateIncorrect.value) {\n            return textInputValue.value;\n        }\n\n        // Display \"Select a date\" when there's no date selected or input\n        if (!datePickerValue.value) {\n            return t('selectDate') as string;\n        }\n\n        // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" if there's a valid date selected\n        return format(datePickerValue.value as Date, DateFormat.FULL_DATE, {\n            locale: locales[locale.value.substring(0, 2)] || enUS,\n        });\n    });\n\n    /**\n     * Formats the \"dateToFormat\" date value with the yyyy-MM-dd format and sets it as \"formatTextInputDisplayValue\" value\n     * @param {DATE} dateToFormat - Date to be assigned and formatted\n     */\n    const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n        // If date is incorrect, leave the textInputValue intact\n        if (isDateIncorrect.value) {\n            return;\n        }\n\n        textInputValue.value = dateToFormat\n            ? format(dateToFormat, DateFormat.NUMERIC_DATE_YEAR_FIRST, {\n                  locale: locales[locale.value.substring(0, 2)] || enUS,\n              })\n            : null;\n    };\n\n    return {\n        // Values\n        dateDisplayValue,\n        textInputValue,\n\n        // Methods\n        formatTextInputDisplayValue,\n    };\n};\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n    <div\n        v-bento-click-outside-directive=\"closeDatePicker\"\n        class=\"b-date-picker\"\n        @keydown.space.capture=\"onSpaceBarOrEnter\"\n        @keydown.enter.capture=\"onSpaceBarOrEnter\"\n    >\n        <!-- Label -->\n        <div v-if=\"label\" :id=\"labelId\" class=\"b-date-picker__label\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" stronger>{{ label }}</bento-typography>\n            <bento-typography\n                v-if=\"optional\"\n                class=\"b-date-picker__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ $t('optional') }})\n            </bento-typography>\n            <bento-typography\n                v-if=\"required\"\n                class=\"b-date-picker__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ $t('required') }})\n            </bento-typography>\n        </div>\n\n        <!-- Input -->\n        <div>\n            <dropdown-input-default\n                ref=\"inputContainerRef\"\n                :ariaControls=\"datePickerContainerId\"\n                :ariaExpanded=\"isDatePickerOpen\"\n                :aria-labelledby=\"label ? labelId : null\"\n                :aria-describedby=\"ariaDescribedBy\"\n                :disabled=\"disabled\"\n                dynamic-filtering\n                :is-invalid=\"!!errorMessage || !!dateErrorText\"\n                :open=\"isDatePickerOpen\"\n                :value=\"textInputValue\"\n                :display-value=\"dateDisplayValue\"\n                :debounce-time=\"0\"\n                @input=\"onDateInputChange\"\n                @open=\"openDatePicker\"\n                @keydown=\"onDateKeyDown\"\n                @clear=\"clearDatePickerValue\"\n                @close=\"closeDatePicker\"\n            />\n        </div>\n\n        <!-- Error Messages -->\n        <error-message\n            v-if=\"dateErrorText\"\n            :id=\"dateErrorId\"\n            :error-message=\"dateErrorText\"\n            class=\"b-date-picker__error-message\"\n        />\n        <error-message\n            v-if=\"errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-date-picker__error-message\"\n        />\n\n        <!-- Description -->\n        <bento-typography\n            v-if=\"description\"\n            class=\"b-date-picker__description\"\n            :class=\"descriptionConditionalClasses\"\n            :el=\"BentoTypographyElement.SPAN\"\n        >\n            {{ description }}\n        </bento-typography>\n\n        <!-- Calendar container -->\n        <bento-popover\n            v-if=\"inputContainerRef\"\n            :id=\"datePickerContainerId\"\n            class=\"b-date-picker__container\"\n            role=\"dialog\"\n            :open=\"isDatePickerOpen\"\n            :target-element=\"inputContainerRef\"\n            :disable-focus-trap=\"true\"\n            :aria-label=\"popoverAriaLabel\"\n            :aria-modal=\"true\"\n            :position=\"BentoPopoverPositions.BOTTOM_START\"\n            fit-content\n        >\n            <calendar\n                ref=\"calendarContainerRef\"\n                :first-day-of-week=\"firstDayOfWeek\"\n                :is-date-disabled=\"isDateDisabled\"\n                :number-of-months=\"1\"\n                :value=\"value\"\n                @input=\"onDateSelected\"\n            />\n        </bento-popover>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, PropType, Ref, ref, toRef, watch } from 'vue';\n    import { BentoClickOutsideDirective } from '@/directives';\n    import { BentoDatePickerEvent, BentoDatePickerValue } from './date-picker.types';\n    import { Calendar, ErrorMessage } from '@/internal';\n    import { DropdownInputDefault } from '@/components/dropdown/components';\n    import { BentoPopover, BentoPopoverPositions } from '@/components/popover';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '../typography';\n    import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n    import { formatDateInputValue, validateDateInput } from '@/utils/ts/date-input';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { debounce } from '@/utils/ts/debounce';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const DEBOUNCE_TIME = 1000;\n\n    /**\n     * Date picker selector.\n     *\n     * @example\n     * import { BentoDatePicker } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDatePicker },\n     *     template: `\n     *          <bento-date-picker\n     *              label=\"Label\"\n     *              description=\"Supporting text\"\n     *              required\n     *              optional\n     *              disabled\n     *              @input=\"onDateChanged\"\n     *              v-model=\"selectedDate\"\n     *          />\n     *     `,\n     *      setup() {\n     *          const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n     *          return {\n     *              selectedDate,\n     *          }\n     *      }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-date-picker',\n        components: {\n            BentoTypography,\n            BentoPopover,\n            Calendar,\n            ErrorMessage,\n            DropdownInputDefault,\n        },\n        directives: { BentoClickOutsideDirective },\n        props: {\n            /**\n             * Descriptive supporting text visbile underneath the dropdown.\n             */\n            description: { type: String, default: undefined },\n\n            /**\n             * Disables dropdown functionality.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Displays component in an error state with an error message\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n             */\n            firstDayOfWeek: Calendar.props.firstDayOfWeek,\n\n            /**\n             * Indicate if a date should be disabled or not\n             */\n            isDateDisabled: Calendar.props.isDateDisabled,\n\n            /**\n             * Text that is displayed as a label above the element.\n             */\n            label: { type: String, default: undefined },\n\n            /**\n             * Highlights the dropdown is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Highlights the dropdown is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Selected date\n             */\n            value: { type: [Date, Object] as PropType<BentoDatePickerValue>, default: null },\n        },\n        emits: [BentoDatePickerEvent.INPUT],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const datePickerContainerId = generateUid('bento-date-picker-container');\n            const labelId = generateUid('bento-date-picker-label');\n            const descriptionId = generateUid('bento-date-picker-description');\n            const errorId = generateUid('bento-date-picker-error');\n            const dateErrorId = generateUid('bento-date-picker-date-error');\n            const popoverAriaLabel = computed(() => props.label || t('datePicker', { name: datePickerContainerId }));\n\n            // Refs\n            const calendarContainerRef = ref(null);\n            const inputContainerRef = ref(null);\n\n            // Values\n            const isDateIncorrect = ref(false);\n            const isDatePickerOpen = ref(false);\n\n            watch(\n                () => props.disabled,\n                disabled => {\n                    // Close date picker popover if it's opened when it's disabled\n                    if (disabled && isDatePickerOpen.value) {\n                        isDatePickerOpen.value = false;\n                    }\n                }\n            );\n\n            const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n                datePickerValue: toRef(props, 'value') as Ref<Date>,\n                isDateIncorrect,\n            });\n\n            const dateErrorText = computed(() => {\n                if (props.isDateDisabled && props.isDateDisabled(new Date(textInputValue.value))) {\n                    return t('selectedDateIsNotAvailable');\n                }\n\n                return isDateIncorrect.value ? t('provideDateInAFormat') : null;\n            });\n\n            const descriptionConditionalClasses = computed(() => ({\n                'b-date-picker__description--error': props.errorMessage || dateErrorText.value,\n            }));\n\n            const ariaDescribedBy = computed(\n                () =>\n                    `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n                        dateErrorText.value ? dateErrorId : ''\n                    }`.trim() || null\n            );\n\n            const isDateEnabled = (date: Date) => {\n                // Check if function is set, otherwise all dates are enabled\n                if (props.isDateDisabled) {\n                    return !props.isDateDisabled(date);\n                }\n\n                return true;\n            };\n\n            const closeDatePicker = () => {\n                isDatePickerOpen.value = false;\n            };\n\n            const openDatePicker = () => {\n                isDatePickerOpen.value = true;\n\n                formatTextInputDisplayValue();\n            };\n\n            const onDateSelected = (selectedDate: Date) => {\n                // Reset the error state when a valid date is selected\n                isDateIncorrect.value = false;\n\n                closeDatePicker();\n                emit(BentoDatePickerEvent.INPUT, selectedDate);\n            };\n\n            const clearDatePickerValue = async () => {\n                if (isDateIncorrect.value) {\n                    isDateIncorrect.value = false;\n                    textInputValue.value = null;\n                }\n                emit(BentoDatePickerEvent.INPUT, null);\n            };\n\n            const onDateKeyDown = (event: KeyboardEvent) => {\n                validateDateInput(event);\n            };\n\n            const validateDate = debounce((stringDate: string) => {\n                // Validate only if the date is complete\n                if (stringDate.length < 10) {\n                    return;\n                }\n\n                // Checks for YYYY-MM-DD format\n                const dateRegex = /^\\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/;\n                const isValidDate = dateRegex.test(stringDate) && isDateEnabled(new Date(stringDate));\n                if (isValidDate) {\n                    isDateIncorrect.value = false;\n                    emit(BentoDatePickerEvent.INPUT, new Date(stringDate));\n                } else if (stringDate) {\n                    // Only set to true if the value exists (not null/undefined)\n                    isDateIncorrect.value = true;\n                    emit(BentoDatePickerEvent.INPUT, null);\n                }\n            }, DEBOUNCE_TIME);\n\n            const onDateInputChange = (stringDate: string) => {\n                textInputValue.value = formatDateInputValue(stringDate);\n                validateDate(textInputValue.value);\n            };\n\n            /**\n             * Space bar and Enter keyDown event handler.\n             *\n             * * Opens the date picker dialog on the first keydown.\n             * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n             * @param {KeyboardEvent} event Event being triggered\n             */\n            const onSpaceBarOrEnter = async (event: KeyboardEvent) => {\n                if (isDatePickerOpen.value) {\n                    return;\n                }\n                event.preventDefault();\n\n                openDatePicker();\n\n                // Wait for the date picker dialog to open\n                await nextTick();\n\n                // Set current date (today) if no date is selected\n                if (!props.value) {\n                    // Format the opened date picker date to YYYY-MM-DD\n                    formatTextInputDisplayValue(new Date());\n                    emit(BentoDatePickerEvent.INPUT, new Date());\n\n                    // Wait for new value to be set with the emit\n                    await nextTick();\n                }\n\n                // Focus on date\n                calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(props.value);\n            };\n\n            return {\n                // Refs\n                inputContainerRef,\n                calendarContainerRef,\n\n                // Values,\n                dateDisplayValue,\n                datePickerContainerId,\n                descriptionConditionalClasses,\n                isDateIncorrect,\n                isDatePickerOpen,\n                dateErrorText,\n                labelId,\n                descriptionId,\n                errorId,\n                dateErrorId,\n                popoverAriaLabel,\n                ariaDescribedBy,\n                textInputValue,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                BentoPopoverPositions,\n\n                // Events\n                closeDatePicker,\n                clearDatePickerValue,\n                onDateSelected,\n                openDatePicker,\n                onDateKeyDown,\n                onDateInputChange,\n\n                // Keyboard navigation\n                onSpaceBarOrEnter,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["BentoDatePickerEvent","BentoDatePickerEvent2","useDatePickerSingleCalendarText","datePickerValue","isDateIncorrect","locale","t","useI18n","locales","de","enUS","fr","textInputValue","ref","computed","format","DateFormat","dateToFormat","DEBOUNCE_TIME","_sfc_main","defineComponent","messages","BentoTypography","BentoPopover","Calendar","ErrorMessage","DropdownInputDefault","BentoClickOutsideDirective","props","emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","watch","disabled","dateDisplayValue","formatTextInputDisplayValue","toRef","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","date","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","debounce","stringDate","BentoTypographyElement","BentoTypographyVariant","BentoPopoverPositions","formatDateInputValue","nextTick","_a","_ctx","createCommentVNode","openBlock","createBlock","_component_bento_typography","_hoisted_1","createElementVNode","createVNode","_component_dropdown_input_default","_component_error_message","normalizeClass","_component_bento_popover","withCtx","_component_calendar"],"mappings":"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"}

package/dist/date-range-picker.js

@@ -1,5 +1,5 @@
-import { B as t, a as r } from "./chunks/index.67588e3d.js";
-import { b as o } from "./chunks/calendar.24ede03d.js";
+import { B as t, a as r } from "./chunks/index.b2d970f6.js";
+import { b as o } from "./chunks/calendar.1fb0d5b2.js";
 export {
   t as BentoDateRangePicker,
   r as BentoDateRangePickerEvent,

package/dist/date.js

@@ -1,4 +1,4 @@
-import { B as e, a as o } from "./chunks/index.af260515.js";
+import { B as e, a as o } from "./chunks/index.c25bbcc8.js";
 export {
   e as BentoDate,
   o as BentoDateFormat

package/dist/divider.js

@@ -1,6 +1,6 @@
 import { defineComponent as i, computed as o, openBlock as s, createElementBlock as n } from "vue";
 import { _ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index17.css";
+import "./assets/index19.css";
 const d = i({
   name: "bento-divider",
   setup(t, { attrs: r }) {

package/dist/dropdown.js

@@ -1,18 +1,17 @@
-import { B as a } from "./chunks/dropdown.751d23b5.js";
-import { defineComponent as _, computed as b, resolveComponent as d, openBlock as l, createElementBlock as $, createVNode as i, mergeProps as f, withCtx as y, toRefs as g, createBlock as v } from "vue";
-import { B, L as h } from "./chunks/listbox-option-tag.cca50ff3.js";
+import { B as a } from "./chunks/dropdown.374481a8.js";
+import { defineComponent as _, computed as b, resolveComponent as d, openBlock as l, createElementBlock as $, createVNode as m, mergeProps as f, withCtx as y, toRefs as B, createBlock as v } from "vue";
+import { B as h, L as g } from "./chunks/listbox-option-tag.caa1ceba.js";
 import { _ as w } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { BentoCountry as A, BentoCountryVariant as I } from "./country.js";
-import { u as C } from "./chunks/useCountryItems.4a11b512.js";
+import { BentoCountry as C, BentoCountryVariant as I } from "./country.js";
+import { u as A } from "./chunks/useCountryItems.e83ef8f0.js";
 import { BentoPaymentMethod as D } from "./payment-method.js";
-import "./assets/index32.css";
+import "./assets/index20.css";
 const T = _({
   name: "bento-dropdown-avatar",
   components: {
     BentoDropdown: a,
-    BentoAvatar: B
+    BentoAvatar: h
   },
-  inheritAttrs: !1,
   props: {
     ...a.props,
     /**
@@ -29,28 +28,28 @@ const T = _({
   },
   emits: ["input"],
   setup(o, { emit: e }) {
-    const p = (t) => e("input", t);
+    const p = (n) => e("input", n);
     return {
       // Values
       dropdownItems: b(
-        () => o.items.map(({ value: t, label: u, src: n }) => ({ value: t, label: u, data: n }))
+        () => o.items.map(({ value: n, label: u, src: t }) => ({ value: n, label: u, data: t }))
       ),
       // Methods
       onInput: p
     };
   }
 });
-function M(o, e, p, r, t, u) {
-  const n = d("bento-avatar"), s = d("bento-dropdown");
+function M(o, e, p, r, n, u) {
+  const t = d("bento-avatar"), s = d("bento-dropdown");
   return l(), $("div", null, [
-    i(s, f(o.$props, {
+    m(s, f(o.$props, {
       items: o.dropdownItems,
       onInput: o.onInput
     }), {
-      default: y(({ label: c, data: m }) => [
-        i(n, {
+      default: y(({ label: c, data: i }) => [
+        m(t, {
           username: c,
-          src: m
+          src: i
         }, null, 8, ["username", "src"])
       ]),
       _: 1
@@ -61,9 +60,8 @@ const G = /* @__PURE__ */ w(T, [["render", M]]), O = _({
   name: "b-dropdown-country",
   components: {
     BentoDropdown: a,
-    BentoCountry: A
+    BentoCountry: C
   },
-  inheritAttrs: !1,
   props: {
     ...a.props,
     /**
@@ -88,28 +86,28 @@ const G = /* @__PURE__ */ w(T, [["render", M]]), O = _({
   },
   emits: ["input"],
   setup(o, { emit: e }) {
-    const { variant: p, items: r } = g(o), t = (n) => e("input", n);
+    const { variant: p, items: r } = B(o), n = (t) => e("input", t);
     return {
       // Values
-      countryItems: C(p, r),
+      countryItems: A(p, r),
       // Methods
-      onInput: t,
+      onInput: n,
       // Enums
       BentoCountryVariant: I
     };
   }
 });
-function P(o, e, p, r, t, u) {
-  const n = d("bento-country"), s = d("bento-dropdown");
+function P(o, e, p, r, n, u) {
+  const t = d("bento-country"), s = d("bento-dropdown");
   return l(), $("div", null, [
-    i(s, f(o.$props, {
+    m(s, f(o.$props, {
       items: o.countryItems,
       onInput: o.onInput
     }), {
-      default: y(({ value: c, label: m }) => [
-        i(n, {
+      default: y(({ value: c, label: i }) => [
+        m(t, {
           code: c,
-          label: m,
+          label: i,
           variant: o.BentoCountryVariant.CUSTOM
         }, null, 8, ["code", "label", "variant"])
       ]),
@@ -121,9 +119,8 @@ const H = /* @__PURE__ */ w(O, [["render", P]]), k = _({
   name: "b-dropdown-currency",
   components: {
     BentoDropdown: a,
-    ListboxOptionTag: h
+    ListboxOptionTag: g
   },
-  inheritAttrs: !1,
   props: {
     ...a.props,
     /**
@@ -145,11 +142,11 @@ const H = /* @__PURE__ */ w(O, [["render", P]]), k = _({
     };
   }
 });
-function S(o, e, p, r, t, u) {
-  const n = d("listbox-option-tag"), s = d("bento-dropdown");
+function S(o, e, p, r, n, u) {
+  const t = d("listbox-option-tag"), s = d("bento-dropdown");
   return l(), v(s, f(o.$props, { onInput: o.onInput }), {
     default: y((c) => [
-      i(n, { option: c }, null, 8, ["option"])
+      m(t, { option: c }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["onInput"]);
@@ -160,7 +157,6 @@ const J = /* @__PURE__ */ w(k, [["render", S]]), V = _({
     BentoDropdown: a,
     BentoPaymentMethod: D
   },
-  inheritAttrs: !1,
   props: {
     ...a.props,
     /**
@@ -182,14 +178,14 @@ const J = /* @__PURE__ */ w(k, [["render", S]]), V = _({
     };
   }
 });
-function L(o, e, p, r, t, u) {
-  const n = d("bento-payment-method"), s = d("bento-dropdown");
+function L(o, e, p, r, n, u) {
+  const t = d("bento-payment-method"), s = d("bento-dropdown");
   return l(), $("div", null, [
-    i(s, f(o.$props, { onInput: o.onInput }), {
-      default: y(({ value: c, label: m }) => [
-        i(n, {
+    m(s, f(o.$props, { onInput: o.onInput }), {
+      default: y(({ value: c, label: i }) => [
+        m(t, {
           type: c,
-          label: m
+          label: i
         }, null, 8, ["type", "label"])
       ]),
       _: 1
@@ -200,9 +196,8 @@ const K = /* @__PURE__ */ w(V, [["render", L]]), U = _({
   name: "bento-dropdown-tag",
   components: {
     BentoDropdown: a,
-    ListboxOptionTag: h
+    ListboxOptionTag: g
   },
-  inheritAttrs: !1,
   props: {
     ...a.props,
     /**
@@ -219,13 +214,13 @@ const K = /* @__PURE__ */ w(V, [["render", L]]), U = _({
   },
   emits: ["input"],
   setup(o, { emit: e }) {
-    const p = (t) => e("input", t);
+    const p = (n) => e("input", n);
     return {
       // Values
       tagItems: b(
         () => {
-          var t;
-          return (t = o.items) == null ? void 0 : t.map(({ label: u, value: n, variant: s }) => ({ label: u, value: n, data: s }));
+          var n;
+          return (n = o.items) == null ? void 0 : n.map(({ label: u, value: t, variant: s }) => ({ label: u, value: t, data: s }));
         }
       ),
       // Methods
@@ -233,23 +228,23 @@ const K = /* @__PURE__ */ w(V, [["render", L]]), U = _({
     };
   }
 });
-function j(o, e, p, r, t, u) {
-  const n = d("listbox-option-tag"), s = d("bento-dropdown");
+function j(o, e, p, r, n, u) {
+  const t = d("listbox-option-tag"), s = d("bento-dropdown");
   return l(), v(s, f(o.$props, {
     class: "b-dropdown-tag",
     items: o.tagItems,
     "show-slot-content-in-multiple": "",
     onInput: o.onInput
   }), {
-    default: y(({ label: c, data: m }) => [
-      i(n, {
-        option: { value: c, data: m, label: "" }
+    default: y(({ label: c, data: i }) => [
+      m(t, {
+        option: { value: c, data: i, label: "" }
       }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["items", "onInput"]);
 }
-const Q = /* @__PURE__ */ w(U, [["render", j], ["__scopeId", "data-v-5369221c"]]);
+const Q = /* @__PURE__ */ w(U, [["render", j], ["__scopeId", "data-v-9d48599c"]]);
 export {
   a as BentoDropdown,
   G as BentoDropdownAvatar,