@adyen/bento-vue2 1.85.0 → 1.86.0

package/dist/chunks/date-range-picker.types.Ckt7zxGy.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.types.Ckt7zxGy.js","sources":["../../src/components/date-range-picker/date-range-picker.types.ts"],"sourcesContent":["import type { FormField, FormFieldEmits } from '../../types/form-field';\n\nimport {\n    CalendarFirstDayOfWeek as BentoDateRangePickerFirstDayOfWeek,\n    type CalendarGranularityConfig as BentoDateRangePickerGranularityConfig,\n    type CalendarIsDateDisabled as BentoDateRangePickerIsDateDisabled,\n    type CalendarRangeDateValue as BentoDateRangePickerValue,\n    CalendarVariant as BentoDateRangePickerVariant,\n} from '@/internal/calendar/calendar.types';\nimport type { DateRangePickerCalendarRangeSelectorItems as BentoDateRangePickerQuickSelectRanges } from './components/date-range-picker-calendar/date-range-picker-calendar.types';\n\nexport {\n    BentoDateRangePickerFirstDayOfWeek,\n    type BentoDateRangePickerIsDateDisabled,\n    type BentoDateRangePickerValue,\n    type BentoDateRangePickerGranularityConfig,\n    type BentoDateRangePickerQuickSelectRanges,\n    BentoDateRangePickerVariant,\n};\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoDateRangePickerEvent {\n    INPUT = 'input',\n}\n\nexport type BentoDateRangePickerEmits = FormFieldEmits<any>;\n\nexport interface BentoDateRangePickerProps extends FormField {\n    /**\n     * Allows user to enter time values in the form\n     * @default false\n     */\n    allowTimeInput?: boolean;\n\n    /**\n     * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n     * @default 1\n     */\n    firstDayOfWeek?: BentoDateRangePickerFirstDayOfWeek | number;\n\n    /**\n     * A list of available granularities.\n     * If present, the date picker will display a segmented control to change granularity.\n     */\n    granularities?: Array<BentoDateRangePickerGranularityConfig>;\n\n    /**\n     * Indicate if a date should be disabled or not\n     */\n    isDateDisabled?: BentoDateRangePickerIsDateDisabled;\n\n    /**\n     * Upon opening date range picker, end date's month will be pre-selected.\n     * @default false\n     */\n    showEndDateOnOpen?: boolean;\n\n    /**\n     * Enables the range selector.\n     * If provided, must be an array that sets the custom range dropdown items.\n     */\n    quickSelectRanges?: BentoDateRangePickerQuickSelectRanges;\n\n    /**\n     * Set a maximum number of dates to be selectable by the range.\n     */\n    maxRange?: number;\n\n    /**\n     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable\n     */\n    min?: Date;\n\n    /**\n     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable\n     */\n    max?: Date;\n\n    /**\n     * Number of months rendered on pane\n     */\n    numberOfMonths?: number;\n\n    /**\n     * Selected date\n     */\n    modelValue?: BentoDateRangePickerValue | null;\n\n    /**\n     * Selected date\n     * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoDateRangePickerValue | null;\n\n    /**\n     * The type of calendar to display. Defaults to showing days.\n     */\n    variant?: `${BentoDateRangePickerVariant}`;\n\n    /**\n     * Enables the date picker selection to persist until it is explicitly applied.\n     * Displays a set of buttons: Apply and Cancel.\n     * @deprecated This will be the default behavior in v2.0.0.\n     * @default false\n     */\n    hasActions?: boolean;\n}\n"],"names":["BentoDateRangePickerEvent"],"mappings":"AAuBO,IAAKA,sBAAAA,OACRA,EAAA,QAAQ,SADAA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"date-range-picker.types.Ckt7zxGy.js","sources":["../../src/components/date-range-picker/date-range-picker.types.ts"],"sourcesContent":["import type { FormField, FormFieldEmits } from '../../types/form-field';\n\nimport {\n    CalendarFirstDayOfWeek as BentoDateRangePickerFirstDayOfWeek,\n    type CalendarGranularityConfig as BentoDateRangePickerGranularityConfig,\n    type CalendarIsDateDisabled as BentoDateRangePickerIsDateDisabled,\n    type CalendarRangeDateValue as BentoDateRangePickerValue,\n    CalendarVariant as BentoDateRangePickerVariant,\n} from '@/internal/calendar/calendar.types';\nimport type { DateRangePickerCalendarRangeSelectorItems as BentoDateRangePickerQuickSelectRanges } from './components/date-range-picker-calendar/date-range-picker-calendar.types';\n\nexport {\n    BentoDateRangePickerFirstDayOfWeek,\n    type BentoDateRangePickerIsDateDisabled,\n    type BentoDateRangePickerValue,\n    type BentoDateRangePickerGranularityConfig,\n    type BentoDateRangePickerQuickSelectRanges,\n    BentoDateRangePickerVariant,\n};\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoDateRangePickerEvent {\n    INPUT = 'input',\n}\n\nexport type BentoDateRangePickerEmits = FormFieldEmits<any>;\n\nexport interface BentoDateRangePickerProps extends FormField {\n    /**\n     * Allows user to enter time values in the form\n     * @default false\n     */\n    allowTimeInput?: boolean;\n\n    /**\n     * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n     * @default undefined\n     */\n    firstDayOfWeek?: BentoDateRangePickerFirstDayOfWeek | number;\n\n    /**\n     * A list of available granularities.\n     * If present, the date picker will display a segmented control to change granularity.\n     */\n    granularities?: Array<BentoDateRangePickerGranularityConfig>;\n\n    /**\n     * Indicate if a date should be disabled or not\n     */\n    isDateDisabled?: BentoDateRangePickerIsDateDisabled;\n\n    /**\n     * Upon opening date range picker, end date's month will be pre-selected.\n     * @default false\n     */\n    showEndDateOnOpen?: boolean;\n\n    /**\n     * Enables the range selector.\n     * If provided, must be an array that sets the custom range dropdown items.\n     */\n    quickSelectRanges?: BentoDateRangePickerQuickSelectRanges;\n\n    /**\n     * Set a maximum number of dates to be selectable by the range.\n     */\n    maxRange?: number;\n\n    /**\n     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable\n     */\n    min?: Date;\n\n    /**\n     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable\n     */\n    max?: Date;\n\n    /**\n     * Number of months rendered on pane\n     */\n    numberOfMonths?: number;\n\n    /**\n     * Selected date\n     */\n    modelValue?: BentoDateRangePickerValue | null;\n\n    /**\n     * Selected date\n     * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoDateRangePickerValue | null;\n\n    /**\n     * The type of calendar to display. Defaults to showing days.\n     */\n    variant?: `${BentoDateRangePickerVariant}`;\n\n    /**\n     * Enables the date picker selection to persist until it is explicitly applied.\n     * Displays a set of buttons: Apply and Cancel.\n     * @deprecated This will be the default behavior in v2.0.0.\n     * @default false\n     */\n    hasActions?: boolean;\n}\n"],"names":["BentoDateRangePickerEvent"],"mappings":"AAuBO,IAAKA,sBAAAA,OACRA,EAAA,QAAQ,SADAA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/chunks/{date.DBWzp0So.js → date.B0m0sFP6.js}

@@ -1,6 +1,6 @@
 import { defineComponent as o, computed as s } from "vue";
 import { u as t } from "./index.B6WW_F-J.js";
-import { B as c } from "./typography.Bq-EGj9y.js";
+import { B as c } from "./typography.C8lPlsbD.js";
 import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/date.css";
 var i = /* @__PURE__ */ ((_) => (_.SHORT_MONTH = "LLL", _.DAY_OF_MONTH = "d", _.LONG_WEEKDAY = "EEEE", _.SHORT_TIME_WITH_PERIOD = "h:mm aa", _.SHORT_TIME_WITHOUT_PERIOD = "H:mm", _.EXACT_TIME_WITH_PERIOD = "h:mm:ss aa", _.EXACT_TIME_WITHOUT_PERIOD = "H:mm:ss", _.LONG_DATE = "LLLL dd, yyyy", _.SHORT_DATE = "LLL dd, yyyy", _.FULL_DATE_EXACT_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm:ss aa", _.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm:ss aa O", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss O", _.FULL_DATE_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm aa", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm aa O", _.FULL_DATE_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm O", _))(i || {});
@@ -157,4 +157,4 @@ export {
   f as B,
   i as a
 };
-//# sourceMappingURL=date.DBWzp0So.js.map
+//# sourceMappingURL=date.B0m0sFP6.js.map

package/dist/chunks/{date.DBWzp0So.js.map → date.B0m0sFP6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"date.DBWzp0So.js","sources":["../../src/components/date/date.types.ts","../../src/components/date/date.vue"],"sourcesContent":["export enum BentoDateFormat {\n    // MONTH\n    SHORT_MONTH = 'LLL', // Jun\n\n    // DAY\n    DAY_OF_MONTH = 'd', // 1, 2, ..., 31,\n    LONG_WEEKDAY = 'EEEE', // Friday\n\n    // TIME\n    SHORT_TIME_WITH_PERIOD = `h:mm aa`, // 2:44 PM\n    SHORT_TIME_WITHOUT_PERIOD = 'H:mm', // 14:45\n    EXACT_TIME_WITH_PERIOD = 'h:mm:ss aa', // 2:05:11 PM\n    EXACT_TIME_WITHOUT_PERIOD = 'H:mm:ss', // 14:05:11\n\n    // DATE\n    LONG_DATE = 'LLLL dd, yyyy', // June 30, 2023\n    SHORT_DATE = 'LLL dd, yyyy', // Jun 30, 2023\n    FULL_DATE_EXACT_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm:ss aa`, // June 30, 2023, 2:54:10 PM\n    FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss`, // June 30, 2023, 14:54:42\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm:ss aa O`, // June 30, 2023, 2:56:07 PM GMT+2\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss O`, // June 30, 2023, 14:56:28 GMT+2\n    FULL_DATE_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm aa`, // Jun 30, 2023, 2:48 PM\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm aa O`, // Jun 30, 2023, 2:44 PM GMT+2\n    FULL_DATE_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm`, // Jun 30, 2023, 14:48\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm O`, // Jun 30, 2023, 14:43 GMT+2\n}\n\nexport interface BentoDateProps {\n    /**\n     * The date to format. The data can be supplied as:\n     * - a Date object.\n     * - a number of milliseconds elapsed since the epoch.\n     * - a date string e.g. '2023-07-31T10:55:22+02:00'.\n     */\n    date?: Date | number | string | null;\n    /**\n     * The string format of the date to be displayed\n     */\n    format?: BentoDateFormat | `${BentoDateFormat}`;\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography\n     */\n    disableTypography?: boolean;\n}\n","<template>\n    <div class=\"b-date\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-date__label\" el=\"span\" variant=\"body\" strong>\n            {{ formattedDate }}\n        </bento-typography>\n        <template v-else>{{ formattedDate }}</template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoDateFormat, type BentoDateProps } from './date.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoTypography } from '@/components/typography';\n\n    const props = defineProps({\n  date: { default: null },\n  format: { default: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },\n  disableTypography: { type: Boolean, default: false }\n});\n\n    const { locale } = useI18n(undefined, true);\n\n    /**\n     * This is a reverse mapping of the BentoDateFormat enum.\n     * It allows us to get the key of the enum by its value, which is then used to look up the\n     * corresponding formatting options in `BentoDateFormatPresets`.\n     */\n    const bentoDateFormatKeyValuePairs = Object.entries(BentoDateFormat).reduce<\n        Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    >(\n        (acc, [key, value]) => {\n            acc[value.toString()] = key;\n            return acc;\n        },\n        {} as Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    );\n\n    const formattedDate = computed(() => {\n        // If null, return empty string\n        if (!props.date) {\n            return '';\n        }\n        const datePropAsDateObject = typeof props.date === 'string' ? new Date(props.date) : props.date;\n\n        const formatKeyEntry = bentoDateFormatKeyValuePairs?.[props.format];\n\n        let dateFormat: Intl.DateTimeFormatOptions | undefined = undefined;\n        // Translate the key of the enum to the Intl.DateTimeFormatOptions configuration object\n        if (formatKeyEntry && BentoDateFormatPresets?.[formatKeyEntry]) {\n            dateFormat = BentoDateFormatPresets?.[formatKeyEntry];\n        }\n        return new Intl.DateTimeFormat(locale.value, dateFormat).format(datePropAsDateObject);\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The format presets to use when being supplied with a key name in BentoDateFormat.\n     * They translate to configuration options that are used in the Intl.DateTimeFormat function\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n     */\n    const BentoDateFormatPresets: { [key in keyof typeof BentoDateFormat]: Intl.DateTimeFormatOptions } = {\n        SHORT_MONTH: {\n            month: 'short',\n        },\n        DAY_OF_MONTH: {\n            day: 'numeric',\n        },\n        LONG_WEEKDAY: {\n            weekday: 'long',\n        },\n        SHORT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        SHORT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        EXACT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        EXACT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n        },\n        LONG_DATE: {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric',\n        },\n        SHORT_DATE: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n        },\n        FULL_DATE_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        FULL_DATE_EXACT_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_EXACT_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit',\n            second: '2-digit',\n            hour12: false,\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n    };\n\n    /**\n     * A Date component is used to display a formatted date value.\n     *\n     * @example\n     * import { BentoDate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDate },\n     *     template: `\n     *          <bento-date :date=\"dateObject\" :format=\"BentoDateFormat.LONG_DATE\"/>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-date',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date.scss\" />\n"],"names":["BentoDateFormat","BentoDateFormat2","BentoDateFormatPresets","__default__","locale","useI18n","bentoDateFormatKeyValuePairs","acc","key","value","formattedDate","computed","props","datePropAsDateObject","formatKeyEntry","dateFormat"],"mappings":"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"}
+{"version":3,"file":"date.B0m0sFP6.js","sources":["../../src/components/date/date.types.ts","../../src/components/date/date.vue"],"sourcesContent":["export enum BentoDateFormat {\n    // MONTH\n    SHORT_MONTH = 'LLL', // Jun\n\n    // DAY\n    DAY_OF_MONTH = 'd', // 1, 2, ..., 31,\n    LONG_WEEKDAY = 'EEEE', // Friday\n\n    // TIME\n    SHORT_TIME_WITH_PERIOD = `h:mm aa`, // 2:44 PM\n    SHORT_TIME_WITHOUT_PERIOD = 'H:mm', // 14:45\n    EXACT_TIME_WITH_PERIOD = 'h:mm:ss aa', // 2:05:11 PM\n    EXACT_TIME_WITHOUT_PERIOD = 'H:mm:ss', // 14:05:11\n\n    // DATE\n    LONG_DATE = 'LLLL dd, yyyy', // June 30, 2023\n    SHORT_DATE = 'LLL dd, yyyy', // Jun 30, 2023\n    FULL_DATE_EXACT_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm:ss aa`, // June 30, 2023, 2:54:10 PM\n    FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss`, // June 30, 2023, 14:54:42\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm:ss aa O`, // June 30, 2023, 2:56:07 PM GMT+2\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss O`, // June 30, 2023, 14:56:28 GMT+2\n    FULL_DATE_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm aa`, // Jun 30, 2023, 2:48 PM\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm aa O`, // Jun 30, 2023, 2:44 PM GMT+2\n    FULL_DATE_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm`, // Jun 30, 2023, 14:48\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm O`, // Jun 30, 2023, 14:43 GMT+2\n}\n\nexport interface BentoDateProps {\n    /**\n     * The date to format. The data can be supplied as:\n     * - a Date object.\n     * - a number of milliseconds elapsed since the epoch.\n     * - a date string e.g. '2023-07-31T10:55:22+02:00'.\n     */\n    date?: Date | number | string | null;\n    /**\n     * The string format of the date to be displayed\n     */\n    format?: BentoDateFormat | `${BentoDateFormat}`;\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography\n     */\n    disableTypography?: boolean;\n}\n","<template>\n    <div class=\"b-date\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-date__label\" el=\"span\" variant=\"body\" strong>\n            {{ formattedDate }}\n        </bento-typography>\n        <template v-else>{{ formattedDate }}</template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoDateFormat, type BentoDateProps } from './date.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoTypography } from '@/components/typography';\n\n    const props = defineProps({\n  date: { default: null },\n  format: { default: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },\n  disableTypography: { type: Boolean, default: false }\n});\n\n    const { locale } = useI18n(undefined, true);\n\n    /**\n     * This is a reverse mapping of the BentoDateFormat enum.\n     * It allows us to get the key of the enum by its value, which is then used to look up the\n     * corresponding formatting options in `BentoDateFormatPresets`.\n     */\n    const bentoDateFormatKeyValuePairs = Object.entries(BentoDateFormat).reduce<\n        Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    >(\n        (acc, [key, value]) => {\n            acc[value.toString()] = key;\n            return acc;\n        },\n        {} as Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    );\n\n    const formattedDate = computed(() => {\n        // If null, return empty string\n        if (!props.date) {\n            return '';\n        }\n        const datePropAsDateObject = typeof props.date === 'string' ? new Date(props.date) : props.date;\n\n        const formatKeyEntry = bentoDateFormatKeyValuePairs?.[props.format];\n\n        let dateFormat: Intl.DateTimeFormatOptions | undefined = undefined;\n        // Translate the key of the enum to the Intl.DateTimeFormatOptions configuration object\n        if (formatKeyEntry && BentoDateFormatPresets?.[formatKeyEntry]) {\n            dateFormat = BentoDateFormatPresets?.[formatKeyEntry];\n        }\n        return new Intl.DateTimeFormat(locale.value, dateFormat).format(datePropAsDateObject);\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The format presets to use when being supplied with a key name in BentoDateFormat.\n     * They translate to configuration options that are used in the Intl.DateTimeFormat function\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n     */\n    const BentoDateFormatPresets: { [key in keyof typeof BentoDateFormat]: Intl.DateTimeFormatOptions } = {\n        SHORT_MONTH: {\n            month: 'short',\n        },\n        DAY_OF_MONTH: {\n            day: 'numeric',\n        },\n        LONG_WEEKDAY: {\n            weekday: 'long',\n        },\n        SHORT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        SHORT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        EXACT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        EXACT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n        },\n        LONG_DATE: {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric',\n        },\n        SHORT_DATE: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n        },\n        FULL_DATE_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        FULL_DATE_EXACT_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_EXACT_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit',\n            second: '2-digit',\n            hour12: false,\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n    };\n\n    /**\n     * A Date component is used to display a formatted date value.\n     *\n     * @example\n     * import { BentoDate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDate },\n     *     template: `\n     *          <bento-date :date=\"dateObject\" :format=\"BentoDateFormat.LONG_DATE\"/>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-date',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date.scss\" />\n"],"names":["BentoDateFormat","BentoDateFormat2","BentoDateFormatPresets","__default__","locale","useI18n","bentoDateFormatKeyValuePairs","acc","key","value","formattedDate","computed","props","datePropAsDateObject","formatKeyEntry","dateFormat"],"mappings":"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"}

package/dist/chunks/dialog-page.DA6E6qma.js

@@ -0,0 +1,122 @@
+import { defineComponent as U, useSlots as H, ref as P, computed as n, inject as N, watch as h, nextTick as S, onMounted as J, onUnmounted as F } from "vue";
+import { B as K } from "./button.Ctj3rkxw.js";
+import { A as M } from "./arrow-left.CRREfabP.js";
+import { u as Y } from "./use-has-slot.C9lQZ6nz.js";
+import { u as $ } from "./index.B6WW_F-J.js";
+import { i as z } from "./typography.C8lPlsbD.js";
+import { c as q } from "./index.BkJqgYF1.js";
+import { n as Q } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/dialog-page.css";
+var E = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-dialog-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-dialog-page__animation--level-upper", l))(E || {});
+const W = /* @__PURE__ */ Symbol("dialog registerPage injection key"), X = /* @__PURE__ */ Symbol("dialog page config data injection key"), Z = {
+  "en-US": {
+    goToPreviousPage: "Go to previous page"
+  },
+  "ja-JP": {
+    goToPreviousPage: "前のページに移動"
+  },
+  "pt-BR": {
+    goToPreviousPage: "Ir para a página anterior"
+  }
+}, ee = {
+  i18n: { messages: Z }
+}, ae = /* @__PURE__ */ U({
+  ...ee,
+  __name: "dialog-page",
+  props: {
+    /**
+     * Identifier of the page, used with activePage prop to handle navigation
+     */
+    pageId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Show header and actions border
+     */
+    alwaysShowBorder: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Pass custom styling to the back button to position it correctly with the header slot
+     */
+    backButtonStyling: { type: Object, default: null },
+    /**
+     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
+     * Used when the back button should not take the user to the natural previous page
+     * Set to `null` to hide back button in the page
+     */
+    previousPage: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["animationend"],
+  setup(l, { emit: t }) {
+    const a = l, e = H(), b = Y(e), { t: O } = $(), r = P(null), d = P(!1), u = P(!1), { arrivedState: c } = q(r), g = n(() => s.value ? s.value === a.pageId : !0), L = n(() => ({
+      "b-dialog-page__header--with-border": a.alwaysShowBorder || d.value && !c.top
+    })), R = n(() => ({
+      "b-dialog-page__footer--with-border": a.alwaysShowBorder || d.value && !c.bottom
+    })), k = n(() => !(c.bottom && c.top)), G = () => {
+      r.value;
+    }, _ = async (i) => {
+      i && (await S(), u.value && (d.value = r.value && r.value.scrollHeight > r.value.clientHeight));
+    }, { activePage: s, animation: p, isAnimationActive: v, isOpen: f, pages: I, previousPages: o, updatePage: y } = N(X);
+    h(() => f.value, _, { immediate: !0 }), h(() => g.value, _, { immediate: !0 });
+    const x = n(() => a.previousPage ? !0 : a.previousPage === null ? !1 : T.value && g.value), D = () => {
+      p.value = E.TRANSITION_LEVEL_DEEPER, v && (v.value = !1), t("animationend");
+    }, j = () => {
+      v && (v.value = !0);
+    }, T = n(() => o.value.length > 1), m = n(() => o.value[o.value.length - 1]), w = n(() => I.value.some((i) => i === s.value)), V = async (i) => {
+      if (i) {
+        const B = o.value.indexOf(i);
+        B !== -1 ? o.value = o.value.slice(0, B + 1) : o.value = [i];
+      } else
+        o.value.pop();
+      p.value = E.TRANSITION_LEVEL_UPPER, await S(), u.value && y(m.value);
+    };
+    h(
+      () => s.value,
+      async () => {
+        if (await S(), !(!u.value || !f.value)) {
+          if (s.value && !w.value && z) {
+            console.error(
+              `The activePage passed "${s.value}" does not match the id of any of the pages`
+            );
+            return;
+          }
+          s.value !== m.value && o.value.push(s.value);
+        }
+      },
+      { immediate: !0 }
+    );
+    const A = N(W), { unregisterPage: C } = A(a.pageId);
+    return J(() => {
+      u.value = !0;
+    }), F(() => {
+      u.value = !1, C();
+    }), { __sfc: !0, props: a, emit: t, slots: e, hasSlot: b, t: O, contentElement: r, hasScroll: d, isMounted: u, arrivedState: c, showPage: g, headerConditionalClasses: L, footerConditionalClasses: R, isScrollable: k, onScroll: G, calculateScroll: _, activePage: s, animation: p, isAnimationActive: v, isOpen: f, pages: I, previousPages: o, updatePage: y, showBackButton: x, updateAnimation: D, startAnimation: j, hasPreviousPages: T, lastPage: m, isActivePageValid: w, goToPreviousPage: V, registerPage: A, unregisterPage: C, BentoButton: K, ArrowLeftIcon: M };
+  }
+});
+var te = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("Transition", { attrs: { name: e.animation, mode: "out-in" }, on: { "after-leave": e.updateAnimation, leave: e.startAnimation } }, [e.isOpen && e.showPage ? a("div", { staticClass: "b-dialog-page" }, [e.hasSlot("header") ? a("div", { staticClass: "b-dialog-page__header", class: e.headerConditionalClasses }, [e.showBackButton ? a("div", { staticClass: "b-dialog-page__back-button", style: t.backButtonStyling, attrs: { "data-testid": "back-button" } }, [a(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(b) {
+    return e.goToPreviousPage(t.previousPage);
+  } } }, [a(e.ArrowLeftIcon, { attrs: { "svg-title": e.t("goToPreviousPage") } })], 1)], 1) : t._e(), t._t("header")], 2) : t._e(), e.hasSlot("content") ? a("div", { ref: "contentElement", staticClass: "b-dialog-page__content", attrs: { tabindex: e.isScrollable ? 0 : null }, on: { scroll: e.onScroll } }, [t._t("content")], 2) : t._e(), e.hasSlot("footer") ? a("div", { staticClass: "b-dialog-page__footer", class: e.footerConditionalClasses }, [t._t("footer")], 2) : t._e()]) : t._e()]);
+}, oe = [], se = /* @__PURE__ */ Q(
+  ae,
+  te,
+  oe,
+  !1,
+  null,
+  "5bc2711d"
+);
+const ge = se.exports;
+export {
+  E as B,
+  X as D,
+  W as a,
+  ge as b
+};
+//# sourceMappingURL=dialog-page.DA6E6qma.js.map

package/dist/chunks/dialog-page.DA6E6qma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-page.DA6E6qma.js","sources":["../../src/components/internal/dialog-page/dialog-page.types.ts","../../src/components/internal/dialog-page/dialog-page.keys.ts","../../src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["import { type Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    isAnimationActive?: Ref<boolean>;\n    isOpen: Ref<boolean>;\n    pages: Ref<Array<string>>;\n    previousPages: Ref<Array<string>>;\n    updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n        <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n            <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n                <div\n                    v-if=\"showBackButton\"\n                    class=\"b-dialog-page__back-button\"\n                    :style=\"backButtonStyling\"\n                    data-testid=\"back-button\"\n                >\n                    <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                        <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                    </bento-button>\n                </div>\n                <slot name=\"header\"></slot>\n            </div>\n            <div\n                v-if=\"hasSlot('content')\"\n                ref=\"contentElement\"\n                class=\"b-dialog-page__content\"\n                :tabindex=\"isScrollable ? 0 : null\"\n                @scroll=\"onScroll\"\n            >\n                <slot name=\"content\" />\n            </div>\n            <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, onUnmounted, type PropType, ref, useSlots, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n    } from './dialog-page.types';\n    import type { CSSProperties } from 'vue/types/jsx.d.ts';\n\n    import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n    import messages from './messages.json';\n    import { useScroll } from '@vueuse/core';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Identifier of the page, used with activePage prop to handle navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Show header and actions border\n         */\n        alwaysShowBorder: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Pass custom styling to the back button to position it correctly with the header slot\n         */\n        backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"animationend\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isMounted = ref(false);\n\n    const { arrivedState } = useScroll(contentElement);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.top),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom),\n    }));\n\n    const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        if (!isMounted.value) {\n            return;\n        }\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n        inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Animation\n    const updateAnimation = () => {\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n        if (isAnimationActive) {\n            isAnimationActive.value = false;\n        }\n\n        emit('animationend');\n    };\n\n    const startAnimation = () => {\n        if (isAnimationActive) {\n            isAnimationActive.value = true;\n        }\n    };\n\n    // Previous page logic\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n    const goToPreviousPage = async (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n        await nextTick();\n        if (!isMounted.value) {\n            return;\n        }\n        updatePage(lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n            if (!isMounted.value || !isOpen.value) {\n                return;\n            }\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                if (isDevelopmentEnviroment) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                        `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n                    );\n                    return;\n                }\n            }\n\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage(props.pageId);\n\n    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => {\n        isMounted.value = false;\n        unregisterPage();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n     *\n     * @example\n     * import { DialogPage } from '@/internal';\n     *\n     * export default {\n     *     components: { DialogPage },\n     *     template: `\n     *          <dialog-page pageId='step1' always-show-border>\n     *              <template #header>Header</template>\n     *              <template #content>Content</template>\n     *              <template #footer>Footer</template>\n     *          </dialog-page>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isMounted","arrivedState","useScroll","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","isScrollable","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","emit","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","isDevelopmentEnviroment","registerPage","unregisterPage","onMounted","onUnmounted"],"mappings":"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"}

package/dist/chunks/{directive.Cbdox5VL.js → directive.rXUeDb8p.js}

@@ -1,4 +1,4 @@
-import { o as s } from "./on-click-outside.D9aY9g8G.js";
+import { o as s } from "./on-click-outside.BW4rkhzG.js";
 const t = (o, i) => {
   const e = !i.modifiers.bubble;
   if (typeof i.value == "function")
@@ -20,4 +20,4 @@ const t = (o, i) => {
 export {
   _ as B
 };
-//# sourceMappingURL=directive.Cbdox5VL.js.map
+//# sourceMappingURL=directive.rXUeDb8p.js.map

package/dist/chunks/{directive.Cbdox5VL.js.map → directive.rXUeDb8p.js.map}

@@ -1 +1 @@
-{"version":3,"file":"directive.Cbdox5VL.js","sources":["../../src/directives/click-outside/directive.ts"],"sourcesContent":["import { onClickOutside } from './on-click-outside';\nimport type { DirectiveHook } from 'vue';\n\ntype Element = HTMLElement & { __onClickOutside_stop?: () => void };\n\n/**\n * Attaches the click outside listener to target element to register clicks outside the element.\n * @param targetElement Element to attach listener to.\n * @param binding\n */\nconst bindDirective: DirectiveHook<Element> = (targetElement, binding) => {\n    const capture = !binding.modifiers.bubble;\n    if (typeof binding.value === 'function') {\n        // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n        targetElement.__onClickOutside_stop = onClickOutside(targetElement, binding.value, { capture });\n    } else {\n        const [handler, options] = binding.value;\n        // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n        targetElement.__onClickOutside_stop = onClickOutside(targetElement, handler, { capture, ...options });\n    }\n};\n\n/**\n * Removes click outside listener from the target element.\n * @param targetElement Element to detach listener from.\n */\nconst unbindDirective: DirectiveHook<Element> = targetElement => {\n    // eslint-disable-next-line no-underscore-dangle\n    targetElement.__onClickOutside_stop();\n};\n\nexport const BentoClickOutsideDirective = {\n    // Vue 2 Directive hooks\n    inserted: bindDirective,\n    unbind: unbindDirective,\n\n    // Vue 3 Directive hooks\n    beforeMount: bindDirective,\n    unmounted: unbindDirective,\n};\n"],"names":["bindDirective","targetElement","binding","capture","onClickOutside","handler","options","unbindDirective","BentoClickOutsideDirective"],"mappings":";AAUA,MAAMA,IAAwC,CAACC,GAAeC,MAAY;AACtE,QAAMC,IAAU,CAACD,EAAQ,UAAU;AACnC,MAAI,OAAOA,EAAQ,SAAU;AAEzB,IAAAD,EAAc,wBAAwBG,EAAeH,GAAeC,EAAQ,OAAO,EAAE,SAAAC,GAAS;AAAA,OAC3F;AACH,UAAM,CAACE,GAASC,CAAO,IAAIJ,EAAQ;AAEnC,IAAAD,EAAc,wBAAwBG,EAAeH,GAAeI,GAAS,EAAE,SAAAF,GAAS,GAAGG,GAAS;AAAA,EACxG;AACJ,GAMMC,IAA0C,CAAAN,MAAiB;AAE7D,EAAAA,EAAc,sBAAA;AAClB,GAEaO,IAA6B;AAAA;AAAA,EAEtC,UAAUR;AAAA,EACV,QAAQO;AAAA;AAAA,EAGR,aAAaP;AAAA,EACb,WAAWO;AACf;"}
+{"version":3,"file":"directive.rXUeDb8p.js","sources":["../../src/directives/click-outside/directive.ts"],"sourcesContent":["import { onClickOutside } from './on-click-outside';\nimport type { DirectiveHook } from 'vue';\n\ntype Element = HTMLElement & { __onClickOutside_stop?: () => void };\n\n/**\n * Attaches the click outside listener to target element to register clicks outside the element.\n * @param targetElement Element to attach listener to.\n * @param binding\n */\nconst bindDirective: DirectiveHook<Element> = (targetElement, binding) => {\n    const capture = !binding.modifiers.bubble;\n    if (typeof binding.value === 'function') {\n        // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n        targetElement.__onClickOutside_stop = onClickOutside(targetElement, binding.value, { capture });\n    } else {\n        const [handler, options] = binding.value;\n        // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n        targetElement.__onClickOutside_stop = onClickOutside(targetElement, handler, { capture, ...options });\n    }\n};\n\n/**\n * Removes click outside listener from the target element.\n * @param targetElement Element to detach listener from.\n */\nconst unbindDirective: DirectiveHook<Element> = targetElement => {\n    // eslint-disable-next-line no-underscore-dangle\n    targetElement.__onClickOutside_stop();\n};\n\nexport const BentoClickOutsideDirective = {\n    // Vue 2 Directive hooks\n    inserted: bindDirective,\n    unbind: unbindDirective,\n\n    // Vue 3 Directive hooks\n    beforeMount: bindDirective,\n    unmounted: unbindDirective,\n};\n"],"names":["bindDirective","targetElement","binding","capture","onClickOutside","handler","options","unbindDirective","BentoClickOutsideDirective"],"mappings":";AAUA,MAAMA,IAAwC,CAACC,GAAeC,MAAY;AACtE,QAAMC,IAAU,CAACD,EAAQ,UAAU;AACnC,MAAI,OAAOA,EAAQ,SAAU;AAEzB,IAAAD,EAAc,wBAAwBG,EAAeH,GAAeC,EAAQ,OAAO,EAAE,SAAAC,GAAS;AAAA,OAC3F;AACH,UAAM,CAACE,GAASC,CAAO,IAAIJ,EAAQ;AAEnC,IAAAD,EAAc,wBAAwBG,EAAeH,GAAeI,GAAS,EAAE,SAAAF,GAAS,GAAGG,GAAS;AAAA,EACxG;AACJ,GAMMC,IAA0C,CAAAN,MAAiB;AAE7D,EAAAA,EAAc,sBAAA;AAClB,GAEaO,IAA6B;AAAA;AAAA,EAEtC,UAAUR;AAAA,EACV,QAAQO;AAAA;AAAA,EAGR,aAAaP;AAAA,EACb,WAAWO;AACf;"}

package/dist/chunks/{dropdown-default-textbox.Cq68tN9F.js → dropdown-default-textbox.5WjhJWdh.js}

@@ -2,17 +2,16 @@ import { defineComponent as w, useAttrs as R, useSlots as E, ref as k, computed
 import { g as T } from "./generate-uid.NJ8tVoha.js";
 import { u as U } from "./index.B6WW_F-J.js";
 import { u as q } from "./use-has-slot.C9lQZ6nz.js";
-import { B as M } from "./typography.Bq-EGj9y.js";
-import { d as $ } from "./debounce.DUTu11PS.js";
-import { C as Y } from "./cross-circle-fill.DTDtgLMf.js";
-import { C as z } from "./cross-circle-fill-small.DfxDedRr.js";
+import { B as M } from "./typography.C8lPlsbD.js";
+import { C as $ } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as Y } from "./cross-circle-fill-small.DfxDedRr.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { s as v } from "./events.BQOQSSb7.js";
-import { C as K } from "./chevron-down.eYtgv5ly.js";
-import { C as j } from "./chevron-up.d8cwIlA_.js";
+import { C as z } from "./chevron-down.eYtgv5ly.js";
+import { C as K } from "./chevron-up.d8cwIlA_.js";
 import "../assets/dropdown-default-textbox.css";
 var L = /* @__PURE__ */ ((l) => (l.DEFAULT = "DropdownInputDefault", l.SMALL = "DropdownInputSmall", l))(L || {}), p = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.HAS_ITEMS = "has-items", l.OPENED = "opened", l.ERROR = "error", l))(p || {}), s = /* @__PURE__ */ ((l) => (l.OPEN = "dropdown-base-open", l.KEYDOWN = "dropdown-base-keydown", l.CLOSE = "dropdown-base-close", l.INPUT = "dropdown-base-input", l.CLEAR = "dropdown-base-clear", l))(s || {});
-const H = {
+const j = {
   "en-US": {
     clearSearch: "Clear search"
   },
@@ -22,12 +21,12 @@ const H = {
   "pt-BR": {
     clearSearch: "Limpar busca"
   }
-}, W = w({
-  i18n: { messages: H },
+}, H = w({
+  i18n: { messages: j },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), J = /* @__PURE__ */ w({
-  ...W,
+}), W = /* @__PURE__ */ w({
+  ...H,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -59,10 +58,6 @@ const H = {
      * Corresponds to the label's id that labels the textbox element.
      */
     ariaLabelledby: { type: String, default: null },
-    /**
-     * Custom debounce time for the user type event.
-     */
-    debounceTime: { type: Number, default: 300 },
     /**
      * Disables any textbox functionality
      */
@@ -116,14 +111,14 @@ const H = {
     }
   },
   emits: [],
-  setup(l, { expose: t, emit: o }) {
-    const e = l, { t: a } = U(), d = R(), c = E(), C = q(c), i = k(null), f = T("textbox"), y = r(() => ({
+  setup(l, { expose: t, emit: a }) {
+    const e = l, { t: o } = U(), d = R(), c = E(), C = q(c), i = k(null), f = T("textbox"), y = r(() => ({
       [`b-dropdown-base-textbox--${p.DISABLED}`]: e.disabled,
       [`b-dropdown-base-textbox--${p.READONLY}`]: e.readonly,
       [`b-dropdown-base-textbox--${p.HAS_ITEMS}`]: !!e.additionalItemsSelected
     })), b = r(() => d.required), _ = r(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": e.dynamicFiltering
-    })), S = r(() => e.dynamicFiltering && !!e.value && e.open), m = r(
+    })), S = r(() => e.dynamicFiltering && !!e.value && e.open), x = r(
       () => {
         var u;
         return {
@@ -135,72 +130,72 @@ const H = {
           "aria-label": e.ariaLabelledby ? null : e.ariaLabel,
           "aria-invalid": e.isInvalid,
           "aria-disabled": e.disabled ? !0 : null,
-          "aria-required": x.value ? null : b.value
+          "aria-required": m.value ? null : b.value
         };
       }
     ), n = r(
       () => e.multiple ? e.selectedValueItem : []
-    ), x = r(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), N = r(() => e.selectedValueItem && !e.multiple), A = r(
+    ), m = r(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), A = r(() => e.selectedValueItem && !e.multiple), B = r(
       () => e.multiple && e.selectedValueItem && n.value.length > 0 && e.showSlotContentInMultiple
     );
     V(
-      () => x.value,
+      () => m.value,
       () => {
-        x.value && !e.alwaysComboboxIsInput && D(() => {
+        m.value && !e.alwaysComboboxIsInput && D(() => {
           i.value.focus();
         });
       }
     );
     const I = async () => {
-      !e.disabled && !e.readonly && (o(s.OPEN), await D(), i.value.focus());
+      !e.disabled && !e.readonly && (a(s.OPEN), await D(), i.value.focus());
     }, g = () => {
-      e.open && (i.value.focus(), o(s.CLOSE));
-    }, B = (u) => e.open && u.target.tagName === "INPUT" ? null : e.open ? g() : I(), P = () => {
-      o(s.CLEAR), o(s.INPUT, ""), i.value.focus();
-    }, F = $((u) => {
-      !e.readonly && !e.disabled ? o(s.INPUT, u.target.value) : (u.preventDefault(), u.stopPropagation());
-    }, e.debounceTime), h = () => {
+      e.open && (i.value.focus(), a(s.CLOSE));
+    }, N = (u) => e.open && u.target.tagName === "INPUT" ? null : e.open ? g() : I(), P = () => {
+      a(s.CLEAR), a(s.INPUT, ""), i.value.focus();
+    }, F = (u) => {
+      !e.readonly && !e.disabled ? a(s.INPUT, u.target.value) : (u.preventDefault(), u.stopPropagation());
+    }, h = () => {
       i.value.focus();
     };
     return t({
       focus: h
-    }), { __sfc: !0, t: a, attrs: d, slots: c, hasSlot: C, props: e, emit: o, textbox: i, textboxId: f, conditionalClasses: y, isRequired: b, comboboxConditionalClasses: _, isFiltering: S, ariaAttributes: m, selectedValueItems: n, shouldShowInput: x, shouldShowSingleSelectSlot: N, shouldShowMultipleSlot: A, onOpenDropdown: I, onCloseDropdown: g, onToggleDropdown: B, onClearSearch: P, onInputEvent: F, focus: h, BentoTypography: M, DropdownBaseTextboxEvent: s, CrossCircleFillIcon: Y, CrossCircleFillSmallIcon: z, BentoDropdownSize: L };
+    }), { __sfc: !0, t: o, attrs: d, slots: c, hasSlot: C, props: e, emit: a, textbox: i, textboxId: f, conditionalClasses: y, isRequired: b, comboboxConditionalClasses: _, isFiltering: S, ariaAttributes: x, selectedValueItems: n, shouldShowInput: m, shouldShowSingleSelectSlot: A, shouldShowMultipleSlot: B, onOpenDropdown: I, onCloseDropdown: g, onToggleDropdown: N, onClearSearch: P, onInputEvent: F, focus: h, BentoTypography: M, DropdownBaseTextboxEvent: s, CrossCircleFillIcon: $, CrossCircleFillSmallIcon: Y, BentoDropdownSize: L };
   }
 });
-var G = function() {
-  var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("div", { class: t.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: e.onToggleDropdown, keydown: function(a) {
-    return !a.type.indexOf("key") && t._k(a.keyCode, "escape", void 0, a.key, void 0) ? null : e.onCloseDropdown.apply(null, arguments);
-  } } }, [o(e.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: e.conditionalClasses, attrs: { el: "div", "data-testid": "base-textbox" } }, [e.shouldShowInput ? o("input", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: e.textboxId, role: "combobox", type: "text", "aria-autocomplete": "list", size: "1", disabled: t.disabled ? !0 : null, readonly: t.readonly, required: e.isRequired }, domProps: { value: t.open ? t.value : t.displayValue }, on: { keydown: [function(a) {
-    return t.$emit(e.DropdownBaseTextboxEvent.KEYDOWN, a);
-  }, function(a) {
-    return !a.type.indexOf("key") && t._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.onToggleDropdown.apply(null, arguments);
-  }], input: e.onInputEvent } }, "input", e.ariaAttributes, !1)) : o("div", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: e.comboboxConditionalClasses, attrs: { id: e.textboxId, "aria-readonly": t.readonly ? "true" : null, role: "combobox", tabindex: t.disabled ? -1 : 0 } }, "div", e.ariaAttributes, !1), [e.shouldShowSingleSelectSlot ? [e.hasSlot("display-value") ? t._t("display-value", null, null, t.selectedValueItem) : t._t("default", function() {
+var J = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { class: t.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: e.onToggleDropdown, keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "escape", void 0, o.key, void 0) ? null : e.onCloseDropdown.apply(null, arguments);
+  } } }, [a(e.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: e.conditionalClasses, attrs: { el: "div", "data-testid": "base-textbox" } }, [e.shouldShowInput ? a("input", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: e.textboxId, role: "combobox", type: "text", "aria-autocomplete": "list", size: "1", disabled: t.disabled ? !0 : null, readonly: t.readonly, required: e.isRequired }, domProps: { value: t.open ? t.value : t.displayValue }, on: { keydown: [function(o) {
+    return t.$emit(e.DropdownBaseTextboxEvent.KEYDOWN, o);
+  }, function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : e.onToggleDropdown.apply(null, arguments);
+  }], input: e.onInputEvent } }, "input", e.ariaAttributes, !1)) : a("div", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: e.comboboxConditionalClasses, attrs: { id: e.textboxId, "aria-readonly": t.readonly ? "true" : null, role: "combobox", tabindex: t.disabled ? -1 : 0 } }, "div", e.ariaAttributes, !1), [e.shouldShowSingleSelectSlot ? [e.hasSlot("display-value") ? t._t("display-value", null, null, t.selectedValueItem) : t._t("default", function() {
     return [t._v(" " + t._s(t.displayValue) + " ")];
-  }, null, t.selectedValueItem)] : e.shouldShowMultipleSlot ? [o("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, t._l(e.selectedValueItems, function(a) {
-    return o("div", { key: a.value }, [o("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [t._t("default", function() {
+  }, null, t.selectedValueItem)] : e.shouldShowMultipleSlot ? [a("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, t._l(e.selectedValueItems, function(o) {
+    return a("div", { key: o.value }, [a("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [t._t("default", function() {
       return [t._v(" " + t._s(t.displayValue) + " ")];
-    }, null, a)], 2)]);
-  }), 0)] : [t._v(t._s(t.displayValue))]], 2), t.additionalItemsSelected ? o("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [t._v(" " + t._s(t.additionalItemsSelected) + " ")]) : t._e(), e.hasSlot("icon") && !e.isFiltering ? o("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), e.isFiltering ? o("span", { staticClass: "b-dropdown-base-textbox__clear-search", attrs: { tabindex: t.disabled ? -1 : 0, "data-testid": "clear-search-button" }, on: { click: function(a) {
-    return a.stopPropagation(), e.onClearSearch.apply(null, arguments);
-  }, keydown: function(a) {
-    return !a.type.indexOf("key") && t._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : (a.stopPropagation(), e.onClearSearch.apply(null, arguments));
-  }, keyup: function(a) {
-    return !a.type.indexOf("key") && t._k(a.keyCode, "space", 32, a.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
-  } } }, [t.size === e.BentoDropdownSize.SMALL ? o(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": e.t("clearSearch") } }) : o(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1) : t._e()])], 1);
-}, Q = [], X = /* @__PURE__ */ O(
+    }, null, o)], 2)]);
+  }), 0)] : [t._v(t._s(t.displayValue))]], 2), t.additionalItemsSelected ? a("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [t._v(" " + t._s(t.additionalItemsSelected) + " ")]) : t._e(), e.hasSlot("icon") && !e.isFiltering ? a("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), e.isFiltering ? a("span", { staticClass: "b-dropdown-base-textbox__clear-search", attrs: { tabindex: t.disabled ? -1 : 0, "data-testid": "clear-search-button" }, on: { click: function(o) {
+    return o.stopPropagation(), e.onClearSearch.apply(null, arguments);
+  }, keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : (o.stopPropagation(), e.onClearSearch.apply(null, arguments));
+  }, keyup: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "space", 32, o.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
+  } } }, [t.size === e.BentoDropdownSize.SMALL ? a(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": e.t("clearSearch") } }) : a(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1) : t._e()])], 1);
+}, G = [], Q = /* @__PURE__ */ O(
+  W,
   J,
   G,
-  Q,
   !1,
   null,
-  "37a35d30"
+  "213214b2"
 );
-const Z = X.exports, ee = w({
+const X = Q.exports, Z = w({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), te = /* @__PURE__ */ w({
-  ...ee,
+}), ee = /* @__PURE__ */ w({
+  ...Z,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -238,10 +233,6 @@ const Z = X.exports, ee = w({
      * Renders the dropdown with a condensed style.
      */
     condensed: { type: Boolean, default: !1 },
-    /**
-     * Custom debounce time. Default: 300
-     */
-    debounceTime: { type: Number, default: 300 },
     /**
      * Disables any textbox functionality
      */
@@ -291,60 +282,60 @@ const Z = X.exports, ee = w({
     multiple: { type: Boolean, default: !1 }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(l, { expose: t, emit: o }) {
-    const e = l, a = E(), d = k(null), c = r(() => ({
+  setup(l, { expose: t, emit: a }) {
+    const e = l, o = E(), d = k(null), c = r(() => ({
       [`b-dropdown-default-textbox--${p.ERROR}`]: !e.disabled && !e.readonly && e.isInvalid,
       [`b-dropdown-default-textbox--${p.DISABLED}`]: e.disabled,
       [`b-dropdown-default-textbox--${p.READONLY}`]: e.readonly,
       [`b-dropdown-default-textbox--${p.OPENED}`]: e.open,
       "b-dropdown-default-textbox--condensed": e.condensed
     })), C = r(() => e.open && !e.disabled && !e.readonly), i = (n) => {
-      o("input", n);
+      a("input", n);
     }, f = (n) => {
-      o("keydown", n);
+      a("keydown", n);
     }, y = (n) => {
-      v(n), o("open");
+      v(n), a("open");
     }, b = (n) => {
-      v(n), o("close");
+      v(n), a("close");
     }, _ = (n) => {
-      v(n), o("clear");
+      v(n), a("clear");
     }, S = {
       [s.INPUT]: i,
       [s.OPEN]: y,
       [s.CLOSE]: b,
       [s.CLEAR]: _,
       [s.KEYDOWN]: f
-    }, m = () => {
+    }, x = () => {
       d.value.focus();
     };
     return t({
-      focus: m
-    }), { __sfc: !0, emit: o, slots: a, props: e, baseTextbox: d, conditionalClasses: c, isDropdownOpen: C, onInput: i, onKeyDown: f, openDropdown: y, closeDropdown: b, clearValue: _, listeners: S, focus: m, DropdownBaseTextbox: Z, ChevronDownIcon: K, ChevronUpIcon: j };
+      focus: x
+    }), { __sfc: !0, emit: a, slots: o, props: e, baseTextbox: d, conditionalClasses: c, isDropdownOpen: C, onInput: i, onKeyDown: f, openDropdown: y, closeDropdown: b, clearValue: _, listeners: S, focus: x, DropdownBaseTextbox: X, ChevronDownIcon: z, ChevronUpIcon: K };
   }
 });
-var oe = function() {
-  var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("div", { staticClass: "b-dropdown-default-textbox", class: e.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: t.value }, scopedSlots: t._u([t._l(e.slots, function(a, d) {
+var te = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-dropdown-default-textbox", class: e.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [a(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: t.value }, scopedSlots: t._u([t._l(e.slots, function(o, d) {
     return { key: d, fn: function(c) {
       return [t._t(d, null, null, c ?? {})];
     } };
   }), { key: "icon", fn: function() {
-    return [o("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [o(e.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
+    return [a("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [a(e.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), a(e.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, ae = [], le = /* @__PURE__ */ O(
+}, ae = [], oe = /* @__PURE__ */ O(
+  ee,
   te,
-  oe,
   ae,
   !1,
   null,
-  "ec45fa90"
+  "bf2d43b0"
 );
-const xe = le.exports;
+const _e = oe.exports;
 export {
   L as B,
-  xe as D,
+  _e as D,
   p as a,
   s as b,
-  Z as c
+  X as c
 };
-//# sourceMappingURL=dropdown-default-textbox.Cq68tN9F.js.map
+//# sourceMappingURL=dropdown-default-textbox.5WjhJWdh.js.map