@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-alpha.1

package/dist/index.js

@@ -267,6 +267,10 @@ const CAccordionPlugin = {
 const CCloseButton = vue.defineComponent({
     name: 'CCloseButton',
     props: {
+        /**
+         * Invert the default color.
+         */
+        dark: Boolean,
         /**
          * Toggle the disabled state for the component.
          */
@@ -301,6 +305,7 @@ const CCloseButton = vue.defineComponent({
             ],
             'aria-label': 'Close',
             disabled: props.disabled,
+            ...(props.dark && { 'data-coreui-theme': 'dark' }),
             onClick: handleClick,
         });
     },
@@ -715,6 +720,7 @@ const CBreadcrumbItem = vue.defineComponent({
 
 const CBreadcrumb = vue.defineComponent({
     name: 'CBreadcrumb',
+    inheritAttrs: false,
     setup(_, { slots, attrs }) {
         return () => vue.h('nav', {
             'aria-label': 'breadcrumb',
@@ -806,13 +812,14 @@ const CButton = vue.defineComponent({
         'click',
     ],
     setup(props, { emit, slots }) {
+        const component = props.href ? 'a' : props.component;
         const handleClick = (event) => {
             if (props.disabled) {
                 return;
             }
             emit('click', event);
         };
-        return () => vue.h(props.component, {
+        return () => vue.h(component, {
             class: [
                 'btn',
                 props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
@@ -823,10 +830,9 @@ const CButton = vue.defineComponent({
                 },
                 props.shape,
             ],
-            disabled: props.disabled && props.component !== 'a',
-            ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
-            ...(props.component === 'a' && props.href && { href: props.href }),
-            ...(props.component === 'button' && { type: props.type }),
+            ...(component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+            ...(component === 'a' && props.href && { href: props.href }),
+            ...(component === 'button' && { type: props.type, disabled: props.disabled }),
             onClick: handleClick,
         }, slots.default && slots.default());
     },
@@ -881,12 +887,61 @@ const CButtonGroupPlugin = {
     },
 };
 
+const convertIsoWeekToDate = (isoWeek) => {
+    const [year, week] = isoWeek.split(/w/i);
+    // Get date for 4th of January for year
+    const date = new Date(Number(year), 0, 4);
+    // Get previous Monday, add 7 days for each week after first
+    date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7);
+    return date;
+};
+const convertToDateObject = (date, selectionType) => {
+    // TODO: clean-up ?
+    // if (date === null) {
+    //   return null
+    // }
+    if (date instanceof Date) {
+        return date;
+    }
+    if (selectionType === 'week') {
+        return convertIsoWeekToDate(date);
+    }
+    return new Date(Date.parse(date));
+};
 const createGroupsInArray = (arr, numberOfGroups) => {
     const perGroup = Math.ceil(arr.length / numberOfGroups);
-    return new Array(numberOfGroups)
+    return Array.from({ length: numberOfGroups })
         .fill('')
         .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup));
 };
+const getCalendarDate = (calendarDate, order, view) => {
+    if (order !== 0 && view === 'days') {
+        return new Date(Date.UTC(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1));
+    }
+    if (order !== 0 && view === 'months') {
+        return new Date(Date.UTC(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1));
+    }
+    if (order !== 0 && view === 'years') {
+        return new Date(Date.UTC(calendarDate.getFullYear() + (12 * order), calendarDate.getMonth(), 1));
+    }
+    return calendarDate;
+};
+const getDateBySelectionType = (date, selectionType) => {
+    if (date === null) {
+        return null;
+    }
+    if (selectionType === 'week') {
+        return `${date.getFullYear()}W${getWeekNumber(date)}`;
+    }
+    if (selectionType === 'month') {
+        const monthNumber = `0${date.getMonth() + 1}`.slice(-2);
+        return `${date.getFullYear()}-${monthNumber}`;
+    }
+    if (selectionType === 'year') {
+        return `${date.getFullYear()}`;
+    }
+    return date;
+};
 const getMonthsNames = (locale) => {
     const months = [];
     const d = new Date();
@@ -946,6 +1001,11 @@ const getTrailingDays = (year, month, leadingDays, monthDays) => {
     }
     return dates;
 };
+const getWeekNumber = (date) => {
+    const week1 = new Date(date.getFullYear(), 0, 4);
+    return (1 +
+        Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7));
+};
 const getMonthDetails = (year, month, firstDayOfWeek) => {
     const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek);
     const daysThisMonth = getMonthDays(year, month);
@@ -954,9 +1014,14 @@ const getMonthDetails = (year, month, firstDayOfWeek) => {
     const weeks = [];
     days.forEach((day, index) => {
         if (index % 7 === 0 || weeks.length === 0) {
-            weeks.push([]);
+            weeks.push({
+                days: [],
+            });
         }
-        weeks[weeks.length - 1].push(day);
+        if ((index + 1) % 7 === 0) {
+            weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date);
+        }
+        weeks[weeks.length - 1].days.push(day);
     });
     return weeks;
 };
@@ -979,15 +1044,11 @@ const isDateDisabled = (date, min, max, dates) => {
     let disabled;
     if (dates) {
         dates.forEach((_date) => {
-            if (Array.isArray(_date)) {
-                if (isDateInRange(date, _date[0], _date[1])) {
-                    disabled = true;
-                }
+            if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
+                disabled = true;
             }
-            if (_date instanceof Date) {
-                if (isSameDateAs(date, _date)) {
-                    disabled = true;
-                }
+            if (_date instanceof Date && isSameDateAs(date, _date)) {
+                disabled = true;
             }
         });
     }
@@ -1005,15 +1066,6 @@ const isDateInRange = (date, start, end) => {
 const isDateSelected = (date, start, end) => {
     return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date));
 };
-const isEndDate = (date, start, end) => {
-    return start && end && isSameDateAs(end, date) && start < end;
-};
-const isLastDayOfMonth = (date) => {
-    const test = new Date(date.getTime());
-    const month = test.getMonth();
-    test.setDate(test.getDate() + 1);
-    return test.getMonth() !== month;
-};
 const isSameDateAs = (date, date2) => {
     if (date instanceof Date && date2 instanceof Date) {
         return (date.getDate() === date2.getDate() &&
@@ -1025,9 +1077,6 @@ const isSameDateAs = (date, date2) => {
     }
     return false;
 };
-const isStartDate = (date, start, end) => {
-    return start && end && isSameDateAs(start, date) && start < end;
-};
 const isToday = (date) => {
     const today = new Date();
     return (date.getDate() === today.getDate() &&
@@ -1041,9 +1090,7 @@ const CCalendar = vue.defineComponent({
         /**
          * Default date of the component
          */
-        calendarDate: {
-            type: [Date, String],
-        },
+        calendarDate: null,
         /**
          * The number of calendars that render on desktop devices.
          */
@@ -1083,9 +1130,7 @@ const CCalendar = vue.defineComponent({
         /**
          * Initial selected to date (range).
          */
-        endDate: {
-            type: [Date, String],
-        },
+        endDate: null,
         /**
          * Sets the day of start week.
          * - 0 - Sunday,
@@ -1110,15 +1155,11 @@ const CCalendar = vue.defineComponent({
         /**
          * Max selectable date.
          */
-        maxDate: {
-            type: [Date, String],
-        },
+        maxDate: null,
         /**
          * Min selectable date.
          */
-        minDate: {
-            type: [Date, String],
-        },
+        minDate: null,
         /**
          * Show arrows navigation.
          */
@@ -1146,6 +1187,16 @@ const CCalendar = vue.defineComponent({
          * @since 4.9.0
          */
         selectAdjacementDays: Boolean,
+        /**
+         * Specify the type of date selection as day, week, month, or year.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        selectionType: {
+            type: String,
+            default: 'day',
+            validator: (value) => ['day', 'week', 'month', 'year'].includes(value),
+        },
         /**
          * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
          *
@@ -1155,12 +1206,16 @@ const CCalendar = vue.defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Set whether to display week numbers in the calendar.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        showWeekNumber: Boolean,
         /**
          * Initial selected date.
          */
-        startDate: {
-            type: [Date, String],
-        },
+        startDate: null,
         /**
          * Set length or format of day name.
          *
@@ -1182,6 +1237,12 @@ const CCalendar = vue.defineComponent({
                 return false;
             },
         },
+        /**
+         * Label displayed over week numbers in the calendar.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        weekNumbersLabel: String,
     },
     emits: [
         /**
@@ -1189,7 +1250,7 @@ const CCalendar = vue.defineComponent({
          *
          * @property {Date | null} date
          */
-        'calendar-cell-hover',
+        'date-hover',
         /**
          * Callback fired when the calendar date changed.
          *
@@ -1210,53 +1271,70 @@ const CCalendar = vue.defineComponent({
         'end-date-change',
     ],
     setup(props, { slots, emit }) {
+        const calendarRef = vue.ref();
         const calendarDate = vue.ref(props.calendarDate
-            ? new Date(props.calendarDate)
+            ? convertToDateObject(props.calendarDate, props.selectionType)
             : props.startDate
-                ? new Date(props.startDate)
+                ? convertToDateObject(props.startDate, props.selectionType)
                 : new Date());
-        const startDate = vue.ref(props.startDate ? new Date(props.startDate) : null);
-        const endDate = vue.ref(props.endDate ? new Date(props.endDate) : null);
+        const startDate = vue.ref(props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null);
+        const endDate = vue.ref(props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null);
         const hoverDate = vue.ref(null);
-        const maxDate = vue.ref(props.maxDate ? new Date(props.maxDate) : null);
-        const minDate = vue.ref(props.minDate ? new Date(props.minDate) : null);
+        const maxDate = vue.ref(props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null);
+        const minDate = vue.ref(props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null);
         const selectEndDate = vue.ref(props.selectEndDate);
         const view = vue.ref('days');
+        vue.watch(() => props.selectionType, () => {
+            if (props.selectionType === 'day' || props.selectionType === 'week') {
+                view.value = 'days';
+                return;
+            }
+            if (props.selectionType === 'month') {
+                view.value = 'months';
+                return;
+            }
+            if (props.selectionType === 'year') {
+                view.value = 'years';
+                return;
+            }
+        }, { immediate: true });
         vue.watch(() => props.calendarDate, () => {
             if (props.calendarDate) {
                 calendarDate.value = new Date(props.calendarDate);
             }
         });
         vue.watch(() => props.startDate, () => {
-            const date = props.startDate ? new Date(props.startDate) : null;
+            const date = props.startDate
+                ? convertToDateObject(props.startDate, props.selectionType)
+                : null;
             if (!isSameDateAs(date, startDate.value)) {
                 startDate.value = date;
             }
         });
         vue.watch(() => props.endDate, () => {
-            const date = props.endDate ? new Date(props.endDate) : null;
+            const date = props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null;
             if (!isSameDateAs(date, endDate.value)) {
                 endDate.value = date;
             }
         });
         vue.watch(() => props.maxDate, () => {
             if (props.maxDate) {
-                maxDate.value = new Date(props.maxDate);
+                maxDate.value = convertToDateObject(props.maxDate, props.selectionType);
             }
         });
         vue.watch(() => props.minDate, () => {
             if (props.minDate) {
-                minDate.value = new Date(props.minDate);
+                minDate.value = convertToDateObject(props.minDate, props.selectionType);
             }
         });
         vue.watch(() => props.selectEndDate, () => {
             selectEndDate.value = props.selectEndDate;
         });
         vue.watch(startDate, () => {
-            emit('start-date-change', startDate.value);
+            emit('start-date-change', getDateBySelectionType(startDate.value, props.selectionType));
         });
         vue.watch(endDate, () => {
-            emit('end-date-change', endDate.value);
+            emit('end-date-change', getDateBySelectionType(endDate.value, props.selectionType));
         });
         const setCalendarPage = (years, months = 0, setMonth) => {
             const year = calendarDate.value.getFullYear();
@@ -1268,10 +1346,26 @@ const CCalendar = vue.defineComponent({
             calendarDate.value = d;
             emit('calendar-date-change', d);
         };
-        const handleCellOnClick = (date) => {
+        const handleCalendarClick = (date, index) => {
             if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
                 return;
             }
+            const _date = new Date(date);
+            if (view.value === 'days') {
+                calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date;
+            }
+            if (view.value === 'months' && props.selectionType !== 'month') {
+                calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date;
+                view.value = 'days';
+                return;
+            }
+            if (view.value === 'years' && props.selectionType !== 'year') {
+                calendarDate.value = index
+                    ? new Date(_date.setFullYear(_date.getFullYear() - index))
+                    : _date;
+                view.value = 'months';
+                return;
+            }
             if (props.range) {
                 if (selectEndDate.value) {
                     selectEndDate.value = false;
@@ -1304,40 +1398,117 @@ const CCalendar = vue.defineComponent({
             }
             startDate.value = date;
         };
-        const handleCellKeyDown = (event, date) => {
+        const handleCalendarKeyDown = (event, date, index) => {
             if (event.code === 'Space' || event.key === 'Enter') {
                 event.preventDefault();
-                handleCellOnClick && handleCellOnClick(date);
-                return;
+                handleCalendarClick(date, index);
+            }
+            if (event.key === 'ArrowRight' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'ArrowDown') {
+                event.preventDefault();
+                if (maxDate.value &&
+                    date >= convertToDateObject(maxDate.value, props.selectionType) &&
+                    (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {
+                    return;
+                }
+                if (minDate.value &&
+                    date <= convertToDateObject(minDate.value, props.selectionType) &&
+                    (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) {
+                    return;
+                }
+                let element = event.target;
+                if (props.selectionType === 'week' && element.tabIndex === -1) {
+                    element = element.closest('tr[tabindex="0"]');
+                }
+                const list = calendarRef.value
+                    ? Array.from(calendarRef.value.querySelectorAll(props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current'))
+                    : [];
+                // const list: HTMLElement[] = [].concat(
+                //   ...Element.prototype.querySelectorAll.call(
+                //     calendarRef.value,
+                //     props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current',
+                //   ),
+                // )
+                const index = list.indexOf(element);
+                const first = index === 0;
+                const last = index === list.length - 1;
+                const toBoundary = {
+                    start: index,
+                    end: list.length - (index + 1),
+                };
+                const gap = {
+                    ArrowRight: 1,
+                    ArrowLeft: -1,
+                    ArrowUp: props.selectionType === 'week' && view.value === 'days'
+                        ? -1
+                        : view.value === 'days'
+                            ? -7
+                            : -3,
+                    ArrowDown: props.selectionType === 'week' && view.value === 'days'
+                        ? 1
+                        : view.value === 'days'
+                            ? 7
+                            : 3,
+                };
+                if ((event.key === 'ArrowRight' && last) ||
+                    (event.key === 'ArrowDown' && toBoundary['end'] < gap['ArrowDown']) ||
+                    (event.key === 'ArrowLeft' && first) ||
+                    (event.key === 'ArrowUp' && toBoundary['start'] < Math.abs(gap['ArrowUp']))) {
+                    if (view.value === 'days') {
+                        setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
+                    }
+                    if (view.value === 'months') {
+                        setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
+                    }
+                    if (view.value === 'years') {
+                        setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 10 : -10);
+                    }
+                    setTimeout(() => {
+                        const _list = element.parentNode?.parentNode ? Array.from(element.parentNode.parentNode.querySelectorAll('td[tabindex="0"], tr[tabindex="0"]')) : [];
+                        if (_list.length && event.key === 'ArrowRight') {
+                            _list[0].focus();
+                        }
+                        if (_list.length && event.key === 'ArrowLeft') {
+                            _list[_list.length - 1].focus();
+                        }
+                        if (_list.length && event.key === 'ArrowDown') {
+                            _list[gap['ArrowDown'] - (list.length - index)].focus();
+                        }
+                        if (_list.length && event.key === 'ArrowUp') {
+                            _list[_list.length - (Math.abs(gap['ArrowUp']) + 1 - (index + 1))].focus();
+                        }
+                    }, 1);
+                    return;
+                }
+                if (list[index + gap[event.key]].tabIndex === 0) {
+                    list[index + gap[event.key]].focus();
+                    return;
+                }
+                for (let i = index; i < list.length; event.key === 'ArrowRight' || event.key === 'ArrowDown' ? i++ : i--) {
+                    if (list[i + gap[event.key]].tabIndex === 0) {
+                        list[i + gap[event.key]].focus();
+                        break;
+                    }
+                }
             }
         };
-        const handleCellMouseEnter = (date) => {
+        const handleCalendarMouseEnter = (date) => {
             if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
                 return;
             }
             hoverDate.value = date;
-            emit('calendar-cell-hover', date);
+            emit('date-hover', getDateBySelectionType(date, props.selectionType));
         };
-        const handleCellMouseLeave = () => {
+        const handleCalendarMouseLeave = () => {
             hoverDate.value = null;
-            emit('calendar-cell-hover', null);
-        };
-        const handleMonthKeyDown = (event, month) => {
-            if (event.code === 'Space' || event.key === 'Enter') {
-                setCalendarPage(0, month);
-                view.value = 'days';
-            }
-        };
-        const handleYearKeyDown = (event, date) => {
-            if (event.code === 'Space' || event.key === 'Enter') {
-                calendarDate.value = date;
-                view.value = 'months';
-            }
+            emit('date-hover', null);
         };
         const handleNavigationOnClick = (direction, double = false) => {
             if (direction === 'prev') {
                 if (double) {
-                    setCalendarPage(view.value === 'days' ? -1 : -10);
+                    setCalendarPage(view.value === 'years' ? -10 : -1);
                     return;
                 }
                 if (view.value !== 'days') {
@@ -1349,7 +1520,7 @@ const CCalendar = vue.defineComponent({
             }
             if (direction === 'next') {
                 if (double) {
-                    setCalendarPage(view.value === 'days' ? 1 : 10);
+                    setCalendarPage(view.value === 'years' ? 10 : 1);
                     return;
                 }
                 if (view.value !== 'days') {
@@ -1360,118 +1531,181 @@ const CCalendar = vue.defineComponent({
                 return;
             }
         };
-        const Calendar = (addMonths) => {
-            let date = calendarDate.value;
-            if (addMonths !== 0) {
-                date = new Date(calendarDate.value.getFullYear(), calendarDate.value.getMonth() + addMonths, 1);
-            }
-            const monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), props.firstDayOfWeek);
+        const Calendar = (_calendarDate) => {
+            const monthDetails = getMonthDetails(_calendarDate.getFullYear(), _calendarDate.getMonth(), props.firstDayOfWeek);
             const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4);
-            const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4);
-            const weekDays = monthDetails[0];
+            const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4);
+            const weekDays = monthDetails[0].days;
             return vue.h('table', {}, [
                 view.value === 'days' &&
-                    vue.h('thead', {}, vue.h('tr', {}, weekDays.map(({ date }) => {
-                        return vue.h('th', { class: 'calendar-cell' }, vue.h('div', {
-                            class: 'calendar-header-cell-inner',
-                        }, typeof props.weekdayFormat === 'function'
-                            ? props.weekdayFormat(date)
-                            : typeof props.weekdayFormat === 'string'
-                                ? date.toLocaleDateString(props.locale, {
-                                    weekday: props.weekdayFormat,
-                                })
-                                : date
-                                    .toLocaleDateString(props.locale, { weekday: 'long' })
-                                    .slice(0, props.weekdayFormat)));
-                    }))),
+                    vue.h('thead', {}, vue.h('tr', {}, [
+                        props.showWeekNumber &&
+                            vue.h('th', { class: 'calendar-cell' }, vue.h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel)),
+                        weekDays.map(({ date }) => {
+                            return vue.h('th', { class: 'calendar-cell' }, vue.h('div', {
+                                class: 'calendar-header-cell-inner',
+                            }, typeof props.weekdayFormat === 'function'
+                                ? props.weekdayFormat(date)
+                                : typeof props.weekdayFormat === 'string'
+                                    ? date.toLocaleDateString(props.locale, {
+                                        weekday: props.weekdayFormat,
+                                    })
+                                    : date
+                                        .toLocaleDateString(props.locale, { weekday: 'long' })
+                                        .slice(0, props.weekdayFormat)));
+                        }),
+                    ])),
                 vue.h('tbody', {}, [
                     view.value === 'days' &&
                         monthDetails.map((week) => {
-                            return vue.h('tr', {}, week.map(({ date, month }) => {
-                                return month === 'current' || props.showAdjacementDays
-                                    ? vue.h('td', {
-                                        class: [
-                                            'calendar-cell',
-                                            {
-                                                today: isToday(date),
-                                                disabled: isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates),
-                                                [month]: true,
-                                                clickable: month !== 'current' && props.selectAdjacementDays,
-                                                last: isLastDayOfMonth(date),
-                                                range: month === 'current' &&
-                                                    isDateInRange(date, startDate.value, endDate.value),
-                                                'range-hover': month === 'current' &&
-                                                    (hoverDate.value && selectEndDate.value
-                                                        ? isDateInRange(date, startDate.value, hoverDate.value)
-                                                        : isDateInRange(date, hoverDate.value, endDate.value)),
-                                                selected: isDateSelected(date, startDate.value, endDate.value),
-                                                start: isStartDate(date, startDate.value, endDate.value),
-                                                end: isEndDate(date, startDate.value, endDate.value),
-                                            },
-                                        ],
-                                        tabindex: (month === 'current' || props.selectAdjacementDays) &&
-                                            !isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)
-                                            ? 0
-                                            : -1,
-                                        title: date.toLocaleDateString(props.locale),
-                                        ...((month === 'current' || props.selectAdjacementDays) && {
-                                            onBlur: () => handleCellMouseLeave(),
-                                            onClick: () => handleCellOnClick(date),
-                                            onFocus: () => handleCellMouseEnter(date),
-                                            onKeydown: (event) => handleCellKeyDown(event, date),
-                                            onmouseenter: () => handleCellMouseEnter(date),
-                                            onmouseleave: () => handleCellMouseLeave(),
-                                        }),
-                                        ...(month !== 'current' &&
-                                            !props.selectAdjacementDays && {
-                                            onMouseEnter: () => handleCellMouseLeave(),
-                                        }),
-                                    }, vue.h('div', {
-                                        class: 'calendar-cell-inner',
-                                    }, typeof props.dayFormat === 'function'
-                                        ? props.dayFormat(date)
-                                        : date.toLocaleDateString(props.locale, {
-                                            day: props.dayFormat,
-                                        })))
-                                    : vue.h('td');
-                            }));
+                            const date = convertToDateObject(week.weekNumber === 0
+                                ? `${_calendarDate.getFullYear()}W53`
+                                : `${_calendarDate.getFullYear()}W${week.weekNumber}`, props.selectionType);
+                            const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
+                            const current = week.days.some((day) => day.month === 'current');
+                            return vue.h('tr', {
+                                class: [
+                                    'calendar-row',
+                                    {
+                                        disabled: isDisabled,
+                                        range: props.selectionType === 'week' &&
+                                            isDateInRange(date, startDate.value, endDate.value),
+                                        'range-hover': props.selectionType === 'week' && hoverDate.value && selectEndDate.value
+                                            ? isDateInRange(date, startDate.value, hoverDate.value)
+                                            : isDateInRange(date, hoverDate.value, endDate.value),
+                                        selected: isDateSelected(date, startDate.value, endDate.value),
+                                    },
+                                ],
+                                tabindex: props.selectionType === 'week' && current && !isDisabled ? 0 : -1,
+                                ...(props.selectionType === 'week' &&
+                                    !isDisabled && {
+                                    onBlur: () => handleCalendarMouseLeave(),
+                                    onClick: () => handleCalendarClick(date),
+                                    onFocus: () => handleCalendarMouseEnter(date),
+                                    onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                    onMouseEnter: () => handleCalendarMouseEnter(date),
+                                    onMouseLeave: () => handleCalendarMouseLeave(),
+                                }),
+                            }, [
+                                props.showWeekNumber &&
+                                    vue.h('th', { class: 'calendar-cell-week-number' }, week.weekNumber === 0 ? 53 : week.weekNumber),
+                                week.days.map(({ date, month }) => {
+                                    const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
+                                    return month === 'current' || props.showAdjacementDays
+                                        ? vue.h('td', {
+                                            class: [
+                                                'calendar-cell',
+                                                {
+                                                    ...(props.selectionType === 'day' && {
+                                                        clickable: month !== 'current' && props.selectAdjacementDays,
+                                                        disabled: isDisabled,
+                                                        'range-hover': month === 'current' &&
+                                                            (hoverDate.value && selectEndDate.value
+                                                                ? isDateInRange(date, startDate.value, hoverDate.value)
+                                                                : isDateInRange(date, hoverDate.value, endDate.value)),
+                                                        range: month === 'current' &&
+                                                            isDateInRange(date, startDate.value, endDate.value),
+                                                        selected: isDateSelected(date, startDate.value, endDate.value),
+                                                    }),
+                                                    [month]: true,
+                                                    today: month === 'current' && isToday(date),
+                                                },
+                                            ],
+                                            tabindex: props.selectionType === 'day' &&
+                                                (month === 'current' || props.selectAdjacementDays) &&
+                                                !isDisabled
+                                                ? 0
+                                                : -1,
+                                            title: date.toLocaleDateString(props.locale),
+                                            ...(props.selectionType === 'day' &&
+                                                (month === 'current' || props.selectAdjacementDays) && {
+                                                onBlur: () => handleCalendarMouseLeave(),
+                                                onClick: () => handleCalendarClick(date),
+                                                onFocus: () => handleCalendarMouseEnter(date),
+                                                onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                                onMouseEnter: () => handleCalendarMouseEnter(date),
+                                                onMouseLeave: () => handleCalendarMouseLeave(),
+                                            }),
+                                            ...(month !== 'current' &&
+                                                !props.selectAdjacementDays && {
+                                                onMouseEnter: () => handleCalendarMouseLeave(),
+                                            }),
+                                        }, vue.h('div', {
+                                            class: 'calendar-cell-inner',
+                                        }, typeof props.dayFormat === 'function'
+                                            ? props.dayFormat(date)
+                                            : date.toLocaleDateString(props.locale, {
+                                                day: props.dayFormat,
+                                            })))
+                                        : vue.h('td');
+                                }),
+                            ]);
                         }),
                     view.value === 'months' &&
                         listOfMonths.map((row, index) => {
                             return vue.h('tr', {}, row.map((month, idx) => {
+                                const monthNumber = index * 3 + idx;
+                                const date = new Date(Date.UTC(_calendarDate.getFullYear(), monthNumber, 1));
+                                const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
                                 return vue.h('td', {
-                                    class: 'calendar-cell month',
-                                    onClick: () => {
-                                        setCalendarPage(0, 0, index * 3 + idx - addMonths);
-                                        view.value = 'days';
-                                    },
-                                    onKeydown: (event) => handleMonthKeyDown(event, index * 3 + idx - addMonths),
-                                    tabindex: 0,
+                                    class: [
+                                        'calendar-cell',
+                                        {
+                                            disabled: isDisabled,
+                                            selected: isDateSelected(date, startDate.value, endDate.value),
+                                            'range-hover': props.selectionType === 'month' &&
+                                                (hoverDate && selectEndDate
+                                                    ? isDateInRange(date, startDate.value, hoverDate.value)
+                                                    : isDateInRange(date, hoverDate.value, endDate.value)),
+                                            range: isDateInRange(date, startDate.value, endDate.value),
+                                        },
+                                    ],
+                                    tabindex: !isDisabled ? 0 : -1,
+                                    ...(!isDisabled && {
+                                        onBlur: () => handleCalendarMouseLeave(),
+                                        onClick: () => handleCalendarClick(date),
+                                        onFocus: () => handleCalendarMouseEnter(date),
+                                        onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                        onMouseEnter: () => handleCalendarMouseEnter(date),
+                                        onMouseLeave: () => handleCalendarMouseLeave(),
+                                    }),
                                 }, vue.h('div', { class: 'calendar-cell-inner' }, month));
                             }));
                         }),
                     view.value === 'years' &&
                         listOfYears.map((row) => {
                             return vue.h('tr', {}, row.map((year) => {
+                                const date = new Date(Date.UTC(year, 0, 1));
+                                const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
                                 return vue.h('td', {
-                                    class: 'calendar-cell year',
-                                    onClick: () => {
-                                        calendarDate.value = new Date(year, date.getMonth() - addMonths, date.getDate());
-                                        view.value = 'months';
-                                    },
-                                    onKeydown: (event) => handleYearKeyDown(event, new Date(year, date.getMonth() - addMonths, date.getDate())),
-                                    tabindex: 0,
+                                    class: [
+                                        'calendar-cell year',
+                                        {
+                                            disabled: isDisabled,
+                                            selected: isDateSelected(date, startDate.value, endDate.value),
+                                            'range-hover': props.selectionType === 'year' &&
+                                                (hoverDate && selectEndDate
+                                                    ? isDateInRange(date, startDate.value, hoverDate.value)
+                                                    : isDateInRange(date, hoverDate.value, endDate.value)),
+                                            range: isDateInRange(date, startDate.value, endDate.value),
+                                        },
+                                    ],
+                                    tabindex: !isDisabled ? 0 : -1,
+                                    ...(!isDisabled && {
+                                        onBlur: () => handleCalendarMouseLeave(),
+                                        onClick: () => handleCalendarClick(date),
+                                        onFocus: () => handleCalendarMouseEnter(date),
+                                        onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                        onMouseEnter: () => handleCalendarMouseEnter(date),
+                                        onMouseLeave: () => handleCalendarMouseLeave(),
+                                    }),
                                 }, vue.h('div', { class: 'calendar-cell-inner' }, year));
                             }));
                         }),
                 ]),
             ]);
         };
-        const Navigation = (addMonths) => {
-            let date = calendarDate.value;
-            if (addMonths !== 0) {
-                date = new Date(calendarDate.value.getFullYear(), calendarDate.value.getMonth() + addMonths, 1);
-            }
+        const Navigation = (_calendarDate) => {
             return vue.h('div', { class: 'calendar-nav' }, [
                 props.navigation &&
                     vue.h('div', {
@@ -1515,7 +1749,7 @@ const CCalendar = vue.defineComponent({
                                 if (props.navigation)
                                     view.value = 'months';
                             },
-                        }, () => date.toLocaleDateString(props.locale, { month: 'long' })),
+                        }, () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' })),
                     vue.h(CButton, {
                         color: 'transparent',
                         size: 'sm',
@@ -1524,7 +1758,7 @@ const CCalendar = vue.defineComponent({
                                 view.value = 'years';
                         },
                         ...(props.navYearFirst && { style: { order: '-1' } }),
-                    }, () => date.toLocaleDateString(props.locale, { year: 'numeric' })),
+                    }, () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })),
                 ]),
                 props.navigation &&
                     vue.h('div', {
@@ -1558,8 +1792,23 @@ const CCalendar = vue.defineComponent({
                     ]),
             ]);
         };
-        return () => vue.h('div', { class: 'calendars' }, [
-            Array.from({ length: props.calendars }, (_, index) => vue.h('div', { class: ['calendar', view.value] }, [Navigation(index), Calendar(index)])),
+        return () => vue.h('div', {
+            class: [
+                'calendars',
+                {
+                    [`select-${props.selectionType}`]: props.selectionType && view.value === 'days',
+                    'show-week-numbers': props.showWeekNumber,
+                },
+            ],
+            ref: calendarRef,
+        }, [
+            Array.from({ length: props.calendars }, (_, index) => {
+                const _calendarDate = getCalendarDate(calendarDate.value, index, view.value);
+                return vue.h('div', { class: ['calendar', view.value] }, [
+                    Navigation(_calendarDate),
+                    Calendar(_calendarDate),
+                ]);
+            }),
         ]);
     },
 });
@@ -1862,7 +2111,7 @@ const isInViewport = (element) => {
 
 const isObjectInArray = (array, item, ignore = []) => array.some((_item) => {
     let result = true;
-    for (const key in item) {
+    for (const key in _item) {
         if (!ignore.includes(key) && item[key] !== _item[key]) {
             result = false;
             break;
@@ -2030,11 +2279,8 @@ const CCarousel = vue.defineComponent({
             visible.value && cycle();
         });
         return () => vue.h('div', {
-            class: [
-                'carousel slide',
-                props.transition === 'crossfade' && 'carousel-fade',
-                props.dark && 'carousel-dark',
-            ],
+            class: ['carousel slide', props.transition === 'crossfade' && 'carousel-fade'],
+            ...(props.dark && { 'data-coreui-theme': 'dark' }),
             onmouseover: () => props.pause && pause(),
             onmouseleave: () => cycle(),
             ref: carouselRef,
@@ -2147,2234 +2393,38 @@ const CCarouselItem = vue.defineComponent({
                     orderClassName.value = '';
                     activeClassName.value = 'active';
                 }
-                if (!active) {
-                    directionClassName.value = '';
-                    orderClassName.value = '';
-                    activeClassName.value = '';
-                }
-            });
-        });
-        return () => vue.h('div', {
-            class: [
-                'carousel-item',
-                activeClassName.value,
-                directionClassName.value,
-                orderClassName.value,
-            ],
-            ref: carouselItemRef,
-        }, slots.default && slots.default());
-    },
-});
-
-const CCarouselPlugin = {
-    install: (app) => {
-        app.component(CCarousel.name, CCarousel);
-        app.component(CCarouselCaption.name, CCarouselCaption);
-        app.component(CCarouselItem.name, CCarouselItem);
-    },
-};
-
-const CCollapsePlugin = {
-    install: (app) => {
-        app.component(CCollapse.name, CCollapse);
-    },
-};
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function toInteger(dirtyNumber) {
-  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
-    return NaN;
-  }
-  var number = Number(dirtyNumber);
-  if (isNaN(number)) {
-    return number;
-  }
-  return number < 0 ? Math.ceil(number) : Math.floor(number);
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      // eslint-disable-next-line no-console
-      console.warn(new Error().stack);
-    }
-    return new Date(NaN);
-  }
-}
-
-/**
- * @name addMilliseconds
- * @category Millisecond Helpers
- * @summary Add the specified number of milliseconds to the given date.
- *
- * @description
- * Add the specified number of milliseconds to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} the new date with the milliseconds added
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Add 750 milliseconds to 10 July 2014 12:45:30.000:
- * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
- * //=> Thu Jul 10 2014 12:45:30.750
- */
-function addMilliseconds(dirtyDate, dirtyAmount) {
-  requiredArgs(2, arguments);
-  var timestamp = toDate(dirtyDate).getTime();
-  var amount = toInteger(dirtyAmount);
-  return new Date(timestamp + amount);
-}
-
-var defaultOptions = {};
-function getDefaultOptions() {
-  return defaultOptions;
-}
-
-/**
- * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
- * They usually appear for dates that denote time before the timezones were introduced
- * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
- * and GMT+01:00:00 after that date)
- *
- * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
- * which would lead to incorrect calculations.
- *
- * This function returns the timezone offset in milliseconds that takes seconds in account.
- */
-function getTimezoneOffsetInMilliseconds(date) {
-  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
-  utcDate.setUTCFullYear(date.getFullYear());
-  return date.getTime() - utcDate.getTime();
-}
-
-/**
- * @name isDate
- * @category Common Helpers
- * @summary Is the given value a date?
- *
- * @description
- * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
- *
- * @param {*} value - the value to check
- * @returns {boolean} true if the given value is a date
- * @throws {TypeError} 1 arguments required
- *
- * @example
- * // For a valid date:
- * const result = isDate(new Date())
- * //=> true
- *
- * @example
- * // For an invalid date:
- * const result = isDate(new Date(NaN))
- * //=> true
- *
- * @example
- * // For some value:
- * const result = isDate('2014-02-31')
- * //=> false
- *
- * @example
- * // For an object:
- * const result = isDate({})
- * //=> false
- */
-function isDate(value) {
-  requiredArgs(1, arguments);
-  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
-}
-
-/**
- * @name isValid
- * @category Common Helpers
- * @summary Is the given date valid?
- *
- * @description
- * Returns false if argument is Invalid Date and true otherwise.
- * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
- * Invalid Date is a Date, whose time value is NaN.
- *
- * Time value of Date: http://es5.github.io/#x15.9.1.1
- *
- * @param {*} date - the date to check
- * @returns {Boolean} the date is valid
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // For the valid date:
- * const result = isValid(new Date(2014, 1, 31))
- * //=> true
- *
- * @example
- * // For the value, convertable into a date:
- * const result = isValid(1393804800000)
- * //=> true
- *
- * @example
- * // For the invalid date:
- * const result = isValid(new Date(''))
- * //=> false
- */
-function isValid(dirtyDate) {
-  requiredArgs(1, arguments);
-  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
-    return false;
-  }
-  var date = toDate(dirtyDate);
-  return !isNaN(Number(date));
-}
-
-/**
- * @name subMilliseconds
- * @category Millisecond Helpers
- * @summary Subtract the specified number of milliseconds from the given date.
- *
- * @description
- * Subtract the specified number of milliseconds from the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of milliseconds to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} the new date with the milliseconds subtracted
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Subtract 750 milliseconds from 10 July 2014 12:45:30.000:
- * const result = subMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
- * //=> Thu Jul 10 2014 12:45:29.250
- */
-function subMilliseconds(dirtyDate, dirtyAmount) {
-  requiredArgs(2, arguments);
-  var amount = toInteger(dirtyAmount);
-  return addMilliseconds(dirtyDate, -amount);
-}
-
-var MILLISECONDS_IN_DAY = 86400000;
-function getUTCDayOfYear(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var timestamp = date.getTime();
-  date.setUTCMonth(0, 1);
-  date.setUTCHours(0, 0, 0, 0);
-  var startOfYearTimestamp = date.getTime();
-  var difference = timestamp - startOfYearTimestamp;
-  return Math.floor(difference / MILLISECONDS_IN_DAY) + 1;
-}
-
-function startOfUTCISOWeek(dirtyDate) {
-  requiredArgs(1, arguments);
-  var weekStartsOn = 1;
-  var date = toDate(dirtyDate);
-  var day = date.getUTCDay();
-  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
-  date.setUTCDate(date.getUTCDate() - diff);
-  date.setUTCHours(0, 0, 0, 0);
-  return date;
-}
-
-function getUTCISOWeekYear(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var year = date.getUTCFullYear();
-  var fourthOfJanuaryOfNextYear = new Date(0);
-  fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4);
-  fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0);
-  var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear);
-  var fourthOfJanuaryOfThisYear = new Date(0);
-  fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4);
-  fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0);
-  var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear);
-  if (date.getTime() >= startOfNextYear.getTime()) {
-    return year + 1;
-  } else if (date.getTime() >= startOfThisYear.getTime()) {
-    return year;
-  } else {
-    return year - 1;
-  }
-}
-
-function startOfUTCISOWeekYear(dirtyDate) {
-  requiredArgs(1, arguments);
-  var year = getUTCISOWeekYear(dirtyDate);
-  var fourthOfJanuary = new Date(0);
-  fourthOfJanuary.setUTCFullYear(year, 0, 4);
-  fourthOfJanuary.setUTCHours(0, 0, 0, 0);
-  var date = startOfUTCISOWeek(fourthOfJanuary);
-  return date;
-}
-
-var MILLISECONDS_IN_WEEK$1 = 604800000;
-function getUTCISOWeek(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime();
-
-  // Round the number of days to the nearest integer
-  // because the number of milliseconds in a week is not constant
-  // (e.g. it's different in the week of the daylight saving time clock shift)
-  return Math.round(diff / MILLISECONDS_IN_WEEK$1) + 1;
-}
-
-function startOfUTCWeek(dirtyDate, options) {
-  var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
-  requiredArgs(1, arguments);
-  var defaultOptions = getDefaultOptions();
-  var weekStartsOn = toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0);
-
-  // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
-  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
-    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
-  }
-  var date = toDate(dirtyDate);
-  var day = date.getUTCDay();
-  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
-  date.setUTCDate(date.getUTCDate() - diff);
-  date.setUTCHours(0, 0, 0, 0);
-  return date;
-}
-
-function getUTCWeekYear(dirtyDate, options) {
-  var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var year = date.getUTCFullYear();
-  var defaultOptions = getDefaultOptions();
-  var firstWeekContainsDate = toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1);
-
-  // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
-  if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
-    throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
-  }
-  var firstWeekOfNextYear = new Date(0);
-  firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate);
-  firstWeekOfNextYear.setUTCHours(0, 0, 0, 0);
-  var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, options);
-  var firstWeekOfThisYear = new Date(0);
-  firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate);
-  firstWeekOfThisYear.setUTCHours(0, 0, 0, 0);
-  var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, options);
-  if (date.getTime() >= startOfNextYear.getTime()) {
-    return year + 1;
-  } else if (date.getTime() >= startOfThisYear.getTime()) {
-    return year;
-  } else {
-    return year - 1;
-  }
-}
-
-function startOfUTCWeekYear(dirtyDate, options) {
-  var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
-  requiredArgs(1, arguments);
-  var defaultOptions = getDefaultOptions();
-  var firstWeekContainsDate = toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1);
-  var year = getUTCWeekYear(dirtyDate, options);
-  var firstWeek = new Date(0);
-  firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate);
-  firstWeek.setUTCHours(0, 0, 0, 0);
-  var date = startOfUTCWeek(firstWeek, options);
-  return date;
-}
-
-var MILLISECONDS_IN_WEEK = 604800000;
-function getUTCWeek(dirtyDate, options) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime();
-
-  // Round the number of days to the nearest integer
-  // because the number of milliseconds in a week is not constant
-  // (e.g. it's different in the week of the daylight saving time clock shift)
-  return Math.round(diff / MILLISECONDS_IN_WEEK) + 1;
-}
-
-function addLeadingZeros(number, targetLength) {
-  var sign = number < 0 ? '-' : '';
-  var output = Math.abs(number).toString();
-  while (output.length < targetLength) {
-    output = '0' + output;
-  }
-  return sign + output;
-}
-
-/*
- * |     | Unit                           |     | Unit                           |
- * |-----|--------------------------------|-----|--------------------------------|
- * |  a  | AM, PM                         |  A* |                                |
- * |  d  | Day of month                   |  D  |                                |
- * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
- * |  m  | Minute                         |  M  | Month                          |
- * |  s  | Second                         |  S  | Fraction of second             |
- * |  y  | Year (abs)                     |  Y  |                                |
- *
- * Letters marked by * are not implemented but reserved by Unicode standard.
- */
-var formatters$2 = {
-  // Year
-  y: function y(date, token) {
-    // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens
-    // | Year     |     y | yy |   yyy |  yyyy | yyyyy |
-    // |----------|-------|----|-------|-------|-------|
-    // | AD 1     |     1 | 01 |   001 |  0001 | 00001 |
-    // | AD 12    |    12 | 12 |   012 |  0012 | 00012 |
-    // | AD 123   |   123 | 23 |   123 |  0123 | 00123 |
-    // | AD 1234  |  1234 | 34 |  1234 |  1234 | 01234 |
-    // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 |
-
-    var signedYear = date.getUTCFullYear();
-    // Returns 1 for 1 BC (which is year 0 in JavaScript)
-    var year = signedYear > 0 ? signedYear : 1 - signedYear;
-    return addLeadingZeros(token === 'yy' ? year % 100 : year, token.length);
-  },
-  // Month
-  M: function M(date, token) {
-    var month = date.getUTCMonth();
-    return token === 'M' ? String(month + 1) : addLeadingZeros(month + 1, 2);
-  },
-  // Day of the month
-  d: function d(date, token) {
-    return addLeadingZeros(date.getUTCDate(), token.length);
-  },
-  // AM or PM
-  a: function a(date, token) {
-    var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? 'pm' : 'am';
-    switch (token) {
-      case 'a':
-      case 'aa':
-        return dayPeriodEnumValue.toUpperCase();
-      case 'aaa':
-        return dayPeriodEnumValue;
-      case 'aaaaa':
-        return dayPeriodEnumValue[0];
-      case 'aaaa':
-      default:
-        return dayPeriodEnumValue === 'am' ? 'a.m.' : 'p.m.';
-    }
-  },
-  // Hour [1-12]
-  h: function h(date, token) {
-    return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length);
-  },
-  // Hour [0-23]
-  H: function H(date, token) {
-    return addLeadingZeros(date.getUTCHours(), token.length);
-  },
-  // Minute
-  m: function m(date, token) {
-    return addLeadingZeros(date.getUTCMinutes(), token.length);
-  },
-  // Second
-  s: function s(date, token) {
-    return addLeadingZeros(date.getUTCSeconds(), token.length);
-  },
-  // Fraction of second
-  S: function S(date, token) {
-    var numberOfDigits = token.length;
-    var milliseconds = date.getUTCMilliseconds();
-    var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3));
-    return addLeadingZeros(fractionalSeconds, token.length);
-  }
-};
-var formatters$3 = formatters$2;
-
-var dayPeriodEnum = {
-  am: 'am',
-  pm: 'pm',
-  midnight: 'midnight',
-  noon: 'noon',
-  morning: 'morning',
-  afternoon: 'afternoon',
-  evening: 'evening',
-  night: 'night'
-};
-/*
- * |     | Unit                           |     | Unit                           |
- * |-----|--------------------------------|-----|--------------------------------|
- * |  a  | AM, PM                         |  A* | Milliseconds in day            |
- * |  b  | AM, PM, noon, midnight         |  B  | Flexible day period            |
- * |  c  | Stand-alone local day of week  |  C* | Localized hour w/ day period   |
- * |  d  | Day of month                   |  D  | Day of year                    |
- * |  e  | Local day of week              |  E  | Day of week                    |
- * |  f  |                                |  F* | Day of week in month           |
- * |  g* | Modified Julian day            |  G  | Era                            |
- * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
- * |  i! | ISO day of week                |  I! | ISO week of year               |
- * |  j* | Localized hour w/ day period   |  J* | Localized hour w/o day period  |
- * |  k  | Hour [1-24]                    |  K  | Hour [0-11]                    |
- * |  l* | (deprecated)                   |  L  | Stand-alone month              |
- * |  m  | Minute                         |  M  | Month                          |
- * |  n  |                                |  N  |                                |
- * |  o! | Ordinal number modifier        |  O  | Timezone (GMT)                 |
- * |  p! | Long localized time            |  P! | Long localized date            |
- * |  q  | Stand-alone quarter            |  Q  | Quarter                        |
- * |  r* | Related Gregorian year         |  R! | ISO week-numbering year        |
- * |  s  | Second                         |  S  | Fraction of second             |
- * |  t! | Seconds timestamp              |  T! | Milliseconds timestamp         |
- * |  u  | Extended year                  |  U* | Cyclic year                    |
- * |  v* | Timezone (generic non-locat.)  |  V* | Timezone (location)            |
- * |  w  | Local week of year             |  W* | Week of month                  |
- * |  x  | Timezone (ISO-8601 w/o Z)      |  X  | Timezone (ISO-8601)            |
- * |  y  | Year (abs)                     |  Y  | Local week-numbering year      |
- * |  z  | Timezone (specific non-locat.) |  Z* | Timezone (aliases)             |
- *
- * Letters marked by * are not implemented but reserved by Unicode standard.
- *
- * Letters marked by ! are non-standard, but implemented by date-fns:
- * - `o` modifies the previous token to turn it into an ordinal (see `format` docs)
- * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days,
- *   i.e. 7 for Sunday, 1 for Monday, etc.
- * - `I` is ISO week of year, as opposed to `w` which is local week of year.
- * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year.
- *   `R` is supposed to be used in conjunction with `I` and `i`
- *   for universal ISO week-numbering date, whereas
- *   `Y` is supposed to be used in conjunction with `w` and `e`
- *   for week-numbering date specific to the locale.
- * - `P` is long localized date format
- * - `p` is long localized time format
- */
-
-var formatters = {
-  // Era
-  G: function G(date, token, localize) {
-    var era = date.getUTCFullYear() > 0 ? 1 : 0;
-    switch (token) {
-      // AD, BC
-      case 'G':
-      case 'GG':
-      case 'GGG':
-        return localize.era(era, {
-          width: 'abbreviated'
-        });
-      // A, B
-      case 'GGGGG':
-        return localize.era(era, {
-          width: 'narrow'
-        });
-      // Anno Domini, Before Christ
-      case 'GGGG':
-      default:
-        return localize.era(era, {
-          width: 'wide'
-        });
-    }
-  },
-  // Year
-  y: function y(date, token, localize) {
-    // Ordinal number
-    if (token === 'yo') {
-      var signedYear = date.getUTCFullYear();
-      // Returns 1 for 1 BC (which is year 0 in JavaScript)
-      var year = signedYear > 0 ? signedYear : 1 - signedYear;
-      return localize.ordinalNumber(year, {
-        unit: 'year'
-      });
-    }
-    return formatters$3.y(date, token);
-  },
-  // Local week-numbering year
-  Y: function Y(date, token, localize, options) {
-    var signedWeekYear = getUTCWeekYear(date, options);
-    // Returns 1 for 1 BC (which is year 0 in JavaScript)
-    var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
-
-    // Two digit year
-    if (token === 'YY') {
-      var twoDigitYear = weekYear % 100;
-      return addLeadingZeros(twoDigitYear, 2);
-    }
-
-    // Ordinal number
-    if (token === 'Yo') {
-      return localize.ordinalNumber(weekYear, {
-        unit: 'year'
-      });
-    }
-
-    // Padding
-    return addLeadingZeros(weekYear, token.length);
-  },
-  // ISO week-numbering year
-  R: function R(date, token) {
-    var isoWeekYear = getUTCISOWeekYear(date);
-
-    // Padding
-    return addLeadingZeros(isoWeekYear, token.length);
-  },
-  // Extended year. This is a single number designating the year of this calendar system.
-  // The main difference between `y` and `u` localizers are B.C. years:
-  // | Year | `y` | `u` |
-  // |------|-----|-----|
-  // | AC 1 |   1 |   1 |
-  // | BC 1 |   1 |   0 |
-  // | BC 2 |   2 |  -1 |
-  // Also `yy` always returns the last two digits of a year,
-  // while `uu` pads single digit years to 2 characters and returns other years unchanged.
-  u: function u(date, token) {
-    var year = date.getUTCFullYear();
-    return addLeadingZeros(year, token.length);
-  },
-  // Quarter
-  Q: function Q(date, token, localize) {
-    var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
-    switch (token) {
-      // 1, 2, 3, 4
-      case 'Q':
-        return String(quarter);
-      // 01, 02, 03, 04
-      case 'QQ':
-        return addLeadingZeros(quarter, 2);
-      // 1st, 2nd, 3rd, 4th
-      case 'Qo':
-        return localize.ordinalNumber(quarter, {
-          unit: 'quarter'
-        });
-      // Q1, Q2, Q3, Q4
-      case 'QQQ':
-        return localize.quarter(quarter, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
-      case 'QQQQQ':
-        return localize.quarter(quarter, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      // 1st quarter, 2nd quarter, ...
-      case 'QQQQ':
-      default:
-        return localize.quarter(quarter, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // Stand-alone quarter
-  q: function q(date, token, localize) {
-    var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
-    switch (token) {
-      // 1, 2, 3, 4
-      case 'q':
-        return String(quarter);
-      // 01, 02, 03, 04
-      case 'qq':
-        return addLeadingZeros(quarter, 2);
-      // 1st, 2nd, 3rd, 4th
-      case 'qo':
-        return localize.ordinalNumber(quarter, {
-          unit: 'quarter'
-        });
-      // Q1, Q2, Q3, Q4
-      case 'qqq':
-        return localize.quarter(quarter, {
-          width: 'abbreviated',
-          context: 'standalone'
-        });
-      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
-      case 'qqqqq':
-        return localize.quarter(quarter, {
-          width: 'narrow',
-          context: 'standalone'
-        });
-      // 1st quarter, 2nd quarter, ...
-      case 'qqqq':
-      default:
-        return localize.quarter(quarter, {
-          width: 'wide',
-          context: 'standalone'
-        });
-    }
-  },
-  // Month
-  M: function M(date, token, localize) {
-    var month = date.getUTCMonth();
-    switch (token) {
-      case 'M':
-      case 'MM':
-        return formatters$3.M(date, token);
-      // 1st, 2nd, ..., 12th
-      case 'Mo':
-        return localize.ordinalNumber(month + 1, {
-          unit: 'month'
-        });
-      // Jan, Feb, ..., Dec
-      case 'MMM':
-        return localize.month(month, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      // J, F, ..., D
-      case 'MMMMM':
-        return localize.month(month, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      // January, February, ..., December
-      case 'MMMM':
-      default:
-        return localize.month(month, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // Stand-alone month
-  L: function L(date, token, localize) {
-    var month = date.getUTCMonth();
-    switch (token) {
-      // 1, 2, ..., 12
-      case 'L':
-        return String(month + 1);
-      // 01, 02, ..., 12
-      case 'LL':
-        return addLeadingZeros(month + 1, 2);
-      // 1st, 2nd, ..., 12th
-      case 'Lo':
-        return localize.ordinalNumber(month + 1, {
-          unit: 'month'
-        });
-      // Jan, Feb, ..., Dec
-      case 'LLL':
-        return localize.month(month, {
-          width: 'abbreviated',
-          context: 'standalone'
-        });
-      // J, F, ..., D
-      case 'LLLLL':
-        return localize.month(month, {
-          width: 'narrow',
-          context: 'standalone'
-        });
-      // January, February, ..., December
-      case 'LLLL':
-      default:
-        return localize.month(month, {
-          width: 'wide',
-          context: 'standalone'
-        });
-    }
-  },
-  // Local week of year
-  w: function w(date, token, localize, options) {
-    var week = getUTCWeek(date, options);
-    if (token === 'wo') {
-      return localize.ordinalNumber(week, {
-        unit: 'week'
-      });
-    }
-    return addLeadingZeros(week, token.length);
-  },
-  // ISO week of year
-  I: function I(date, token, localize) {
-    var isoWeek = getUTCISOWeek(date);
-    if (token === 'Io') {
-      return localize.ordinalNumber(isoWeek, {
-        unit: 'week'
-      });
-    }
-    return addLeadingZeros(isoWeek, token.length);
-  },
-  // Day of the month
-  d: function d(date, token, localize) {
-    if (token === 'do') {
-      return localize.ordinalNumber(date.getUTCDate(), {
-        unit: 'date'
-      });
-    }
-    return formatters$3.d(date, token);
-  },
-  // Day of year
-  D: function D(date, token, localize) {
-    var dayOfYear = getUTCDayOfYear(date);
-    if (token === 'Do') {
-      return localize.ordinalNumber(dayOfYear, {
-        unit: 'dayOfYear'
-      });
-    }
-    return addLeadingZeros(dayOfYear, token.length);
-  },
-  // Day of week
-  E: function E(date, token, localize) {
-    var dayOfWeek = date.getUTCDay();
-    switch (token) {
-      // Tue
-      case 'E':
-      case 'EE':
-      case 'EEE':
-        return localize.day(dayOfWeek, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      // T
-      case 'EEEEE':
-        return localize.day(dayOfWeek, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      // Tu
-      case 'EEEEEE':
-        return localize.day(dayOfWeek, {
-          width: 'short',
-          context: 'formatting'
-        });
-      // Tuesday
-      case 'EEEE':
-      default:
-        return localize.day(dayOfWeek, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // Local day of week
-  e: function e(date, token, localize, options) {
-    var dayOfWeek = date.getUTCDay();
-    var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
-    switch (token) {
-      // Numerical value (Nth day of week with current locale or weekStartsOn)
-      case 'e':
-        return String(localDayOfWeek);
-      // Padded numerical value
-      case 'ee':
-        return addLeadingZeros(localDayOfWeek, 2);
-      // 1st, 2nd, ..., 7th
-      case 'eo':
-        return localize.ordinalNumber(localDayOfWeek, {
-          unit: 'day'
-        });
-      case 'eee':
-        return localize.day(dayOfWeek, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      // T
-      case 'eeeee':
-        return localize.day(dayOfWeek, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      // Tu
-      case 'eeeeee':
-        return localize.day(dayOfWeek, {
-          width: 'short',
-          context: 'formatting'
-        });
-      // Tuesday
-      case 'eeee':
-      default:
-        return localize.day(dayOfWeek, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // Stand-alone local day of week
-  c: function c(date, token, localize, options) {
-    var dayOfWeek = date.getUTCDay();
-    var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
-    switch (token) {
-      // Numerical value (same as in `e`)
-      case 'c':
-        return String(localDayOfWeek);
-      // Padded numerical value
-      case 'cc':
-        return addLeadingZeros(localDayOfWeek, token.length);
-      // 1st, 2nd, ..., 7th
-      case 'co':
-        return localize.ordinalNumber(localDayOfWeek, {
-          unit: 'day'
-        });
-      case 'ccc':
-        return localize.day(dayOfWeek, {
-          width: 'abbreviated',
-          context: 'standalone'
-        });
-      // T
-      case 'ccccc':
-        return localize.day(dayOfWeek, {
-          width: 'narrow',
-          context: 'standalone'
-        });
-      // Tu
-      case 'cccccc':
-        return localize.day(dayOfWeek, {
-          width: 'short',
-          context: 'standalone'
-        });
-      // Tuesday
-      case 'cccc':
-      default:
-        return localize.day(dayOfWeek, {
-          width: 'wide',
-          context: 'standalone'
-        });
-    }
-  },
-  // ISO day of week
-  i: function i(date, token, localize) {
-    var dayOfWeek = date.getUTCDay();
-    var isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
-    switch (token) {
-      // 2
-      case 'i':
-        return String(isoDayOfWeek);
-      // 02
-      case 'ii':
-        return addLeadingZeros(isoDayOfWeek, token.length);
-      // 2nd
-      case 'io':
-        return localize.ordinalNumber(isoDayOfWeek, {
-          unit: 'day'
-        });
-      // Tue
-      case 'iii':
-        return localize.day(dayOfWeek, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      // T
-      case 'iiiii':
-        return localize.day(dayOfWeek, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      // Tu
-      case 'iiiiii':
-        return localize.day(dayOfWeek, {
-          width: 'short',
-          context: 'formatting'
-        });
-      // Tuesday
-      case 'iiii':
-      default:
-        return localize.day(dayOfWeek, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // AM or PM
-  a: function a(date, token, localize) {
-    var hours = date.getUTCHours();
-    var dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
-    switch (token) {
-      case 'a':
-      case 'aa':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      case 'aaa':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'abbreviated',
-          context: 'formatting'
-        }).toLowerCase();
-      case 'aaaaa':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      case 'aaaa':
-      default:
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // AM, PM, midnight, noon
-  b: function b(date, token, localize) {
-    var hours = date.getUTCHours();
-    var dayPeriodEnumValue;
-    if (hours === 12) {
-      dayPeriodEnumValue = dayPeriodEnum.noon;
-    } else if (hours === 0) {
-      dayPeriodEnumValue = dayPeriodEnum.midnight;
-    } else {
-      dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
-    }
-    switch (token) {
-      case 'b':
-      case 'bb':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      case 'bbb':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'abbreviated',
-          context: 'formatting'
-        }).toLowerCase();
-      case 'bbbbb':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      case 'bbbb':
-      default:
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // in the morning, in the afternoon, in the evening, at night
-  B: function B(date, token, localize) {
-    var hours = date.getUTCHours();
-    var dayPeriodEnumValue;
-    if (hours >= 17) {
-      dayPeriodEnumValue = dayPeriodEnum.evening;
-    } else if (hours >= 12) {
-      dayPeriodEnumValue = dayPeriodEnum.afternoon;
-    } else if (hours >= 4) {
-      dayPeriodEnumValue = dayPeriodEnum.morning;
-    } else {
-      dayPeriodEnumValue = dayPeriodEnum.night;
-    }
-    switch (token) {
-      case 'B':
-      case 'BB':
-      case 'BBB':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'abbreviated',
-          context: 'formatting'
-        });
-      case 'BBBBB':
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'narrow',
-          context: 'formatting'
-        });
-      case 'BBBB':
-      default:
-        return localize.dayPeriod(dayPeriodEnumValue, {
-          width: 'wide',
-          context: 'formatting'
-        });
-    }
-  },
-  // Hour [1-12]
-  h: function h(date, token, localize) {
-    if (token === 'ho') {
-      var hours = date.getUTCHours() % 12;
-      if (hours === 0) hours = 12;
-      return localize.ordinalNumber(hours, {
-        unit: 'hour'
-      });
-    }
-    return formatters$3.h(date, token);
-  },
-  // Hour [0-23]
-  H: function H(date, token, localize) {
-    if (token === 'Ho') {
-      return localize.ordinalNumber(date.getUTCHours(), {
-        unit: 'hour'
-      });
-    }
-    return formatters$3.H(date, token);
-  },
-  // Hour [0-11]
-  K: function K(date, token, localize) {
-    var hours = date.getUTCHours() % 12;
-    if (token === 'Ko') {
-      return localize.ordinalNumber(hours, {
-        unit: 'hour'
-      });
-    }
-    return addLeadingZeros(hours, token.length);
-  },
-  // Hour [1-24]
-  k: function k(date, token, localize) {
-    var hours = date.getUTCHours();
-    if (hours === 0) hours = 24;
-    if (token === 'ko') {
-      return localize.ordinalNumber(hours, {
-        unit: 'hour'
-      });
-    }
-    return addLeadingZeros(hours, token.length);
-  },
-  // Minute
-  m: function m(date, token, localize) {
-    if (token === 'mo') {
-      return localize.ordinalNumber(date.getUTCMinutes(), {
-        unit: 'minute'
-      });
-    }
-    return formatters$3.m(date, token);
-  },
-  // Second
-  s: function s(date, token, localize) {
-    if (token === 'so') {
-      return localize.ordinalNumber(date.getUTCSeconds(), {
-        unit: 'second'
-      });
-    }
-    return formatters$3.s(date, token);
-  },
-  // Fraction of second
-  S: function S(date, token) {
-    return formatters$3.S(date, token);
-  },
-  // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
-  X: function X(date, token, _localize, options) {
-    var originalDate = options._originalDate || date;
-    var timezoneOffset = originalDate.getTimezoneOffset();
-    if (timezoneOffset === 0) {
-      return 'Z';
-    }
-    switch (token) {
-      // Hours and optional minutes
-      case 'X':
-        return formatTimezoneWithOptionalMinutes(timezoneOffset);
-
-      // Hours, minutes and optional seconds without `:` delimiter
-      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
-      // so this token always has the same output as `XX`
-      case 'XXXX':
-      case 'XX':
-        // Hours and minutes without `:` delimiter
-        return formatTimezone(timezoneOffset);
-
-      // Hours, minutes and optional seconds with `:` delimiter
-      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
-      // so this token always has the same output as `XXX`
-      case 'XXXXX':
-      case 'XXX': // Hours and minutes with `:` delimiter
-      default:
-        return formatTimezone(timezoneOffset, ':');
-    }
-  },
-  // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
-  x: function x(date, token, _localize, options) {
-    var originalDate = options._originalDate || date;
-    var timezoneOffset = originalDate.getTimezoneOffset();
-    switch (token) {
-      // Hours and optional minutes
-      case 'x':
-        return formatTimezoneWithOptionalMinutes(timezoneOffset);
-
-      // Hours, minutes and optional seconds without `:` delimiter
-      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
-      // so this token always has the same output as `xx`
-      case 'xxxx':
-      case 'xx':
-        // Hours and minutes without `:` delimiter
-        return formatTimezone(timezoneOffset);
-
-      // Hours, minutes and optional seconds with `:` delimiter
-      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
-      // so this token always has the same output as `xxx`
-      case 'xxxxx':
-      case 'xxx': // Hours and minutes with `:` delimiter
-      default:
-        return formatTimezone(timezoneOffset, ':');
-    }
-  },
-  // Timezone (GMT)
-  O: function O(date, token, _localize, options) {
-    var originalDate = options._originalDate || date;
-    var timezoneOffset = originalDate.getTimezoneOffset();
-    switch (token) {
-      // Short
-      case 'O':
-      case 'OO':
-      case 'OOO':
-        return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
-      // Long
-      case 'OOOO':
-      default:
-        return 'GMT' + formatTimezone(timezoneOffset, ':');
-    }
-  },
-  // Timezone (specific non-location)
-  z: function z(date, token, _localize, options) {
-    var originalDate = options._originalDate || date;
-    var timezoneOffset = originalDate.getTimezoneOffset();
-    switch (token) {
-      // Short
-      case 'z':
-      case 'zz':
-      case 'zzz':
-        return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
-      // Long
-      case 'zzzz':
-      default:
-        return 'GMT' + formatTimezone(timezoneOffset, ':');
-    }
-  },
-  // Seconds timestamp
-  t: function t(date, token, _localize, options) {
-    var originalDate = options._originalDate || date;
-    var timestamp = Math.floor(originalDate.getTime() / 1000);
-    return addLeadingZeros(timestamp, token.length);
-  },
-  // Milliseconds timestamp
-  T: function T(date, token, _localize, options) {
-    var originalDate = options._originalDate || date;
-    var timestamp = originalDate.getTime();
-    return addLeadingZeros(timestamp, token.length);
-  }
-};
-function formatTimezoneShort(offset, dirtyDelimiter) {
-  var sign = offset > 0 ? '-' : '+';
-  var absOffset = Math.abs(offset);
-  var hours = Math.floor(absOffset / 60);
-  var minutes = absOffset % 60;
-  if (minutes === 0) {
-    return sign + String(hours);
-  }
-  var delimiter = dirtyDelimiter || '';
-  return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
-}
-function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) {
-  if (offset % 60 === 0) {
-    var sign = offset > 0 ? '-' : '+';
-    return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
-  }
-  return formatTimezone(offset, dirtyDelimiter);
-}
-function formatTimezone(offset, dirtyDelimiter) {
-  var delimiter = dirtyDelimiter || '';
-  var sign = offset > 0 ? '-' : '+';
-  var absOffset = Math.abs(offset);
-  var hours = addLeadingZeros(Math.floor(absOffset / 60), 2);
-  var minutes = addLeadingZeros(absOffset % 60, 2);
-  return sign + hours + delimiter + minutes;
-}
-var formatters$1 = formatters;
-
-var dateLongFormatter = function dateLongFormatter(pattern, formatLong) {
-  switch (pattern) {
-    case 'P':
-      return formatLong.date({
-        width: 'short'
-      });
-    case 'PP':
-      return formatLong.date({
-        width: 'medium'
-      });
-    case 'PPP':
-      return formatLong.date({
-        width: 'long'
-      });
-    case 'PPPP':
-    default:
-      return formatLong.date({
-        width: 'full'
-      });
-  }
-};
-var timeLongFormatter = function timeLongFormatter(pattern, formatLong) {
-  switch (pattern) {
-    case 'p':
-      return formatLong.time({
-        width: 'short'
-      });
-    case 'pp':
-      return formatLong.time({
-        width: 'medium'
-      });
-    case 'ppp':
-      return formatLong.time({
-        width: 'long'
-      });
-    case 'pppp':
-    default:
-      return formatLong.time({
-        width: 'full'
-      });
-  }
-};
-var dateTimeLongFormatter = function dateTimeLongFormatter(pattern, formatLong) {
-  var matchResult = pattern.match(/(P+)(p+)?/) || [];
-  var datePattern = matchResult[1];
-  var timePattern = matchResult[2];
-  if (!timePattern) {
-    return dateLongFormatter(pattern, formatLong);
-  }
-  var dateTimeFormat;
-  switch (datePattern) {
-    case 'P':
-      dateTimeFormat = formatLong.dateTime({
-        width: 'short'
-      });
-      break;
-    case 'PP':
-      dateTimeFormat = formatLong.dateTime({
-        width: 'medium'
-      });
-      break;
-    case 'PPP':
-      dateTimeFormat = formatLong.dateTime({
-        width: 'long'
-      });
-      break;
-    case 'PPPP':
-    default:
-      dateTimeFormat = formatLong.dateTime({
-        width: 'full'
-      });
-      break;
-  }
-  return dateTimeFormat.replace('{{date}}', dateLongFormatter(datePattern, formatLong)).replace('{{time}}', timeLongFormatter(timePattern, formatLong));
-};
-var longFormatters = {
-  p: timeLongFormatter,
-  P: dateTimeLongFormatter
-};
-var longFormatters$1 = longFormatters;
-
-var protectedDayOfYearTokens = ['D', 'DD'];
-var protectedWeekYearTokens = ['YY', 'YYYY'];
-function isProtectedDayOfYearToken(token) {
-  return protectedDayOfYearTokens.indexOf(token) !== -1;
-}
-function isProtectedWeekYearToken(token) {
-  return protectedWeekYearTokens.indexOf(token) !== -1;
-}
-function throwProtectedError(token, format, input) {
-  if (token === 'YYYY') {
-    throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
-  } else if (token === 'YY') {
-    throw new RangeError("Use `yy` instead of `YY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
-  } else if (token === 'D') {
-    throw new RangeError("Use `d` instead of `D` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
-  } else if (token === 'DD') {
-    throw new RangeError("Use `dd` instead of `DD` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
-  }
-}
-
-var formatDistanceLocale = {
-  lessThanXSeconds: {
-    one: 'less than a second',
-    other: 'less than {{count}} seconds'
-  },
-  xSeconds: {
-    one: '1 second',
-    other: '{{count}} seconds'
-  },
-  halfAMinute: 'half a minute',
-  lessThanXMinutes: {
-    one: 'less than a minute',
-    other: 'less than {{count}} minutes'
-  },
-  xMinutes: {
-    one: '1 minute',
-    other: '{{count}} minutes'
-  },
-  aboutXHours: {
-    one: 'about 1 hour',
-    other: 'about {{count}} hours'
-  },
-  xHours: {
-    one: '1 hour',
-    other: '{{count}} hours'
-  },
-  xDays: {
-    one: '1 day',
-    other: '{{count}} days'
-  },
-  aboutXWeeks: {
-    one: 'about 1 week',
-    other: 'about {{count}} weeks'
-  },
-  xWeeks: {
-    one: '1 week',
-    other: '{{count}} weeks'
-  },
-  aboutXMonths: {
-    one: 'about 1 month',
-    other: 'about {{count}} months'
-  },
-  xMonths: {
-    one: '1 month',
-    other: '{{count}} months'
-  },
-  aboutXYears: {
-    one: 'about 1 year',
-    other: 'about {{count}} years'
-  },
-  xYears: {
-    one: '1 year',
-    other: '{{count}} years'
-  },
-  overXYears: {
-    one: 'over 1 year',
-    other: 'over {{count}} years'
-  },
-  almostXYears: {
-    one: 'almost 1 year',
-    other: 'almost {{count}} years'
-  }
-};
-var formatDistance = function formatDistance(token, count, options) {
-  var result;
-  var tokenValue = formatDistanceLocale[token];
-  if (typeof tokenValue === 'string') {
-    result = tokenValue;
-  } else if (count === 1) {
-    result = tokenValue.one;
-  } else {
-    result = tokenValue.other.replace('{{count}}', count.toString());
-  }
-  if (options !== null && options !== void 0 && options.addSuffix) {
-    if (options.comparison && options.comparison > 0) {
-      return 'in ' + result;
-    } else {
-      return result + ' ago';
-    }
-  }
-  return result;
-};
-var formatDistance$1 = formatDistance;
-
-function buildFormatLongFn(args) {
-  return function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    // TODO: Remove String()
-    var width = options.width ? String(options.width) : args.defaultWidth;
-    var format = args.formats[width] || args.formats[args.defaultWidth];
-    return format;
-  };
-}
-
-var dateFormats = {
-  full: 'EEEE, MMMM do, y',
-  long: 'MMMM do, y',
-  medium: 'MMM d, y',
-  short: 'MM/dd/yyyy'
-};
-var timeFormats = {
-  full: 'h:mm:ss a zzzz',
-  long: 'h:mm:ss a z',
-  medium: 'h:mm:ss a',
-  short: 'h:mm a'
-};
-var dateTimeFormats = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: '{{date}}, {{time}}',
-  short: '{{date}}, {{time}}'
-};
-var formatLong = {
-  date: buildFormatLongFn({
-    formats: dateFormats,
-    defaultWidth: 'full'
-  }),
-  time: buildFormatLongFn({
-    formats: timeFormats,
-    defaultWidth: 'full'
-  }),
-  dateTime: buildFormatLongFn({
-    formats: dateTimeFormats,
-    defaultWidth: 'full'
-  })
-};
-var formatLong$1 = formatLong;
-
-var formatRelativeLocale = {
-  lastWeek: "'last' eeee 'at' p",
-  yesterday: "'yesterday at' p",
-  today: "'today at' p",
-  tomorrow: "'tomorrow at' p",
-  nextWeek: "eeee 'at' p",
-  other: 'P'
-};
-var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
-  return formatRelativeLocale[token];
-};
-var formatRelative$1 = formatRelative;
-
-function buildLocalizeFn(args) {
-  return function (dirtyIndex, options) {
-    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
-    var valuesArray;
-    if (context === 'formatting' && args.formattingValues) {
-      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
-      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
-      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
-    } else {
-      var _defaultWidth = args.defaultWidth;
-      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
-      valuesArray = args.values[_width] || args.values[_defaultWidth];
-    }
-    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
-    // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
-    return valuesArray[index];
-  };
-}
-
-var eraValues = {
-  narrow: ['B', 'A'],
-  abbreviated: ['BC', 'AD'],
-  wide: ['Before Christ', 'Anno Domini']
-};
-var quarterValues = {
-  narrow: ['1', '2', '3', '4'],
-  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
-  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
-};
+                if (!active) {
+                    directionClassName.value = '';
+                    orderClassName.value = '';
+                    activeClassName.value = '';
+                }
+            });
+        });
+        return () => vue.h('div', {
+            class: [
+                'carousel-item',
+                activeClassName.value,
+                directionClassName.value,
+                orderClassName.value,
+            ],
+            ref: carouselItemRef,
+        }, slots.default && slots.default());
+    },
+});
 
-// Note: in English, the names of days of the week and months are capitalized.
-// If you are making a new locale based on this one, check if the same is true for the language you're working on.
-// Generally, formatted dates should look like they are in the middle of a sentence,
-// e.g. in Spanish language the weekdays and months should be in the lowercase.
-var monthValues = {
-  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-  abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-};
-var dayValues = {
-  narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-  short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-  abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-  wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-};
-var dayPeriodValues = {
-  narrow: {
-    am: 'a',
-    pm: 'p',
-    midnight: 'mi',
-    noon: 'n',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  },
-  abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  },
-  wide: {
-    am: 'a.m.',
-    pm: 'p.m.',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  }
-};
-var formattingDayPeriodValues = {
-  narrow: {
-    am: 'a',
-    pm: 'p',
-    midnight: 'mi',
-    noon: 'n',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  },
-  abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  },
-  wide: {
-    am: 'a.m.',
-    pm: 'p.m.',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  }
-};
-var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
-  var number = Number(dirtyNumber);
-
-  // If ordinal numbers depend on context, for example,
-  // if they are different for different grammatical genders,
-  // use `options.unit`.
-  //
-  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
-  // 'day', 'hour', 'minute', 'second'.
-
-  var rem100 = number % 100;
-  if (rem100 > 20 || rem100 < 10) {
-    switch (rem100 % 10) {
-      case 1:
-        return number + 'st';
-      case 2:
-        return number + 'nd';
-      case 3:
-        return number + 'rd';
-    }
-  }
-  return number + 'th';
-};
-var localize = {
-  ordinalNumber: ordinalNumber,
-  era: buildLocalizeFn({
-    values: eraValues,
-    defaultWidth: 'wide'
-  }),
-  quarter: buildLocalizeFn({
-    values: quarterValues,
-    defaultWidth: 'wide',
-    argumentCallback: function argumentCallback(quarter) {
-      return quarter - 1;
-    }
-  }),
-  month: buildLocalizeFn({
-    values: monthValues,
-    defaultWidth: 'wide'
-  }),
-  day: buildLocalizeFn({
-    values: dayValues,
-    defaultWidth: 'wide'
-  }),
-  dayPeriod: buildLocalizeFn({
-    values: dayPeriodValues,
-    defaultWidth: 'wide',
-    formattingValues: formattingDayPeriodValues,
-    defaultFormattingWidth: 'wide'
-  })
+const CCarouselPlugin = {
+    install: (app) => {
+        app.component(CCarousel.name, CCarousel);
+        app.component(CCarouselCaption.name, CCarouselCaption);
+        app.component(CCarouselItem.name, CCarouselItem);
+    },
 };
-var localize$1 = localize;
-
-function buildMatchFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var width = options.width;
-    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
-    var matchResult = string.match(matchPattern);
-    if (!matchResult) {
-      return null;
-    }
-    var matchedString = matchResult[0];
-    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
-    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
-      return pattern.test(matchedString);
-    }) : findKey(parsePatterns, function (pattern) {
-      return pattern.test(matchedString);
-    });
-    var value;
-    value = args.valueCallback ? args.valueCallback(key) : key;
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
-function findKey(object, predicate) {
-  for (var key in object) {
-    if (object.hasOwnProperty(key) && predicate(object[key])) {
-      return key;
-    }
-  }
-  return undefined;
-}
-function findIndex(array, predicate) {
-  for (var key = 0; key < array.length; key++) {
-    if (predicate(array[key])) {
-      return key;
-    }
-  }
-  return undefined;
-}
-
-function buildMatchPatternFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var matchResult = string.match(args.matchPattern);
-    if (!matchResult) return null;
-    var matchedString = matchResult[0];
-    var parseResult = string.match(args.parsePattern);
-    if (!parseResult) return null;
-    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
 
-var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
-var parseOrdinalNumberPattern = /\d+/i;
-var matchEraPatterns = {
-  narrow: /^(b|a)/i,
-  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
-  wide: /^(before christ|before common era|anno domini|common era)/i
-};
-var parseEraPatterns = {
-  any: [/^b/i, /^(a|c)/i]
-};
-var matchQuarterPatterns = {
-  narrow: /^[1234]/i,
-  abbreviated: /^q[1234]/i,
-  wide: /^[1234](th|st|nd|rd)? quarter/i
-};
-var parseQuarterPatterns = {
-  any: [/1/i, /2/i, /3/i, /4/i]
-};
-var matchMonthPatterns = {
-  narrow: /^[jfmasond]/i,
-  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
-  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
-};
-var parseMonthPatterns = {
-  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
-  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
-};
-var matchDayPatterns = {
-  narrow: /^[smtwf]/i,
-  short: /^(su|mo|tu|we|th|fr|sa)/i,
-  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
-  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
-};
-var parseDayPatterns = {
-  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
-  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
-};
-var matchDayPeriodPatterns = {
-  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
-  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
-};
-var parseDayPeriodPatterns = {
-  any: {
-    am: /^a/i,
-    pm: /^p/i,
-    midnight: /^mi/i,
-    noon: /^no/i,
-    morning: /morning/i,
-    afternoon: /afternoon/i,
-    evening: /evening/i,
-    night: /night/i
-  }
-};
-var match = {
-  ordinalNumber: buildMatchPatternFn({
-    matchPattern: matchOrdinalNumberPattern,
-    parsePattern: parseOrdinalNumberPattern,
-    valueCallback: function valueCallback(value) {
-      return parseInt(value, 10);
-    }
-  }),
-  era: buildMatchFn({
-    matchPatterns: matchEraPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseEraPatterns,
-    defaultParseWidth: 'any'
-  }),
-  quarter: buildMatchFn({
-    matchPatterns: matchQuarterPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseQuarterPatterns,
-    defaultParseWidth: 'any',
-    valueCallback: function valueCallback(index) {
-      return index + 1;
-    }
-  }),
-  month: buildMatchFn({
-    matchPatterns: matchMonthPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseMonthPatterns,
-    defaultParseWidth: 'any'
-  }),
-  day: buildMatchFn({
-    matchPatterns: matchDayPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseDayPatterns,
-    defaultParseWidth: 'any'
-  }),
-  dayPeriod: buildMatchFn({
-    matchPatterns: matchDayPeriodPatterns,
-    defaultMatchWidth: 'any',
-    parsePatterns: parseDayPeriodPatterns,
-    defaultParseWidth: 'any'
-  })
-};
-var match$1 = match;
-
-/**
- * @type {Locale}
- * @category Locales
- * @summary English locale (United States).
- * @language English
- * @iso-639-2 eng
- * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
- * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
- */
-var locale = {
-  code: 'en-US',
-  formatDistance: formatDistance$1,
-  formatLong: formatLong$1,
-  formatRelative: formatRelative$1,
-  localize: localize$1,
-  match: match$1,
-  options: {
-    weekStartsOn: 0 /* Sunday */,
-    firstWeekContainsDate: 1
-  }
+const CCollapsePlugin = {
+    install: (app) => {
+        app.component(CCollapse.name, CCollapse);
+    },
 };
-var defaultLocale = locale;
-
-// - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
-//   (one of the certain letters followed by `o`)
-// - (\w)\1* matches any sequences of the same letter
-// - '' matches two quote characters in a row
-// - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('),
-//   except a single quote symbol, which ends the sequence.
-//   Two quote characters do not end the sequence.
-//   If there is no matching single quote
-//   then the sequence will continue until the end of the string.
-// - . matches any single character unmatched by previous parts of the RegExps
-var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
-
-// This RegExp catches symbols escaped by quotes, and also
-// sequences of symbols P, p, and the combinations like `PPPPPPPppppp`
-var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
-var escapedStringRegExp = /^'([^]*?)'?$/;
-var doubleQuoteRegExp = /''/g;
-var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
-
-/**
- * @name format
- * @category Common Helpers
- * @summary Format the date.
- *
- * @description
- * Return the formatted date string in the given format. The result may vary by locale.
- *
- * > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries.
- * > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- *
- * The characters wrapped between two single quotes characters (') are escaped.
- * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote.
- * (see the last example)
- *
- * Format of the string is based on Unicode Technical Standard #35:
- * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
- * with a few additions (see note 7 below the table).
- *
- * Accepted patterns:
- * | Unit                            | Pattern | Result examples                   | Notes |
- * |---------------------------------|---------|-----------------------------------|-------|
- * | Era                             | G..GGG  | AD, BC                            |       |
- * |                                 | GGGG    | Anno Domini, Before Christ        | 2     |
- * |                                 | GGGGG   | A, B                              |       |
- * | Calendar year                   | y       | 44, 1, 1900, 2017                 | 5     |
- * |                                 | yo      | 44th, 1st, 0th, 17th              | 5,7   |
- * |                                 | yy      | 44, 01, 00, 17                    | 5     |
- * |                                 | yyy     | 044, 001, 1900, 2017              | 5     |
- * |                                 | yyyy    | 0044, 0001, 1900, 2017            | 5     |
- * |                                 | yyyyy   | ...                               | 3,5   |
- * | Local week-numbering year       | Y       | 44, 1, 1900, 2017                 | 5     |
- * |                                 | Yo      | 44th, 1st, 1900th, 2017th         | 5,7   |
- * |                                 | YY      | 44, 01, 00, 17                    | 5,8   |
- * |                                 | YYY     | 044, 001, 1900, 2017              | 5     |
- * |                                 | YYYY    | 0044, 0001, 1900, 2017            | 5,8   |
- * |                                 | YYYYY   | ...                               | 3,5   |
- * | ISO week-numbering year         | R       | -43, 0, 1, 1900, 2017             | 5,7   |
- * |                                 | RR      | -43, 00, 01, 1900, 2017           | 5,7   |
- * |                                 | RRR     | -043, 000, 001, 1900, 2017        | 5,7   |
- * |                                 | RRRR    | -0043, 0000, 0001, 1900, 2017     | 5,7   |
- * |                                 | RRRRR   | ...                               | 3,5,7 |
- * | Extended year                   | u       | -43, 0, 1, 1900, 2017             | 5     |
- * |                                 | uu      | -43, 01, 1900, 2017               | 5     |
- * |                                 | uuu     | -043, 001, 1900, 2017             | 5     |
- * |                                 | uuuu    | -0043, 0001, 1900, 2017           | 5     |
- * |                                 | uuuuu   | ...                               | 3,5   |
- * | Quarter (formatting)            | Q       | 1, 2, 3, 4                        |       |
- * |                                 | Qo      | 1st, 2nd, 3rd, 4th                | 7     |
- * |                                 | QQ      | 01, 02, 03, 04                    |       |
- * |                                 | QQQ     | Q1, Q2, Q3, Q4                    |       |
- * |                                 | QQQQ    | 1st quarter, 2nd quarter, ...     | 2     |
- * |                                 | QQQQQ   | 1, 2, 3, 4                        | 4     |
- * | Quarter (stand-alone)           | q       | 1, 2, 3, 4                        |       |
- * |                                 | qo      | 1st, 2nd, 3rd, 4th                | 7     |
- * |                                 | qq      | 01, 02, 03, 04                    |       |
- * |                                 | qqq     | Q1, Q2, Q3, Q4                    |       |
- * |                                 | qqqq    | 1st quarter, 2nd quarter, ...     | 2     |
- * |                                 | qqqqq   | 1, 2, 3, 4                        | 4     |
- * | Month (formatting)              | M       | 1, 2, ..., 12                     |       |
- * |                                 | Mo      | 1st, 2nd, ..., 12th               | 7     |
- * |                                 | MM      | 01, 02, ..., 12                   |       |
- * |                                 | MMM     | Jan, Feb, ..., Dec                |       |
- * |                                 | MMMM    | January, February, ..., December  | 2     |
- * |                                 | MMMMM   | J, F, ..., D                      |       |
- * | Month (stand-alone)             | L       | 1, 2, ..., 12                     |       |
- * |                                 | Lo      | 1st, 2nd, ..., 12th               | 7     |
- * |                                 | LL      | 01, 02, ..., 12                   |       |
- * |                                 | LLL     | Jan, Feb, ..., Dec                |       |
- * |                                 | LLLL    | January, February, ..., December  | 2     |
- * |                                 | LLLLL   | J, F, ..., D                      |       |
- * | Local week of year              | w       | 1, 2, ..., 53                     |       |
- * |                                 | wo      | 1st, 2nd, ..., 53th               | 7     |
- * |                                 | ww      | 01, 02, ..., 53                   |       |
- * | ISO week of year                | I       | 1, 2, ..., 53                     | 7     |
- * |                                 | Io      | 1st, 2nd, ..., 53th               | 7     |
- * |                                 | II      | 01, 02, ..., 53                   | 7     |
- * | Day of month                    | d       | 1, 2, ..., 31                     |       |
- * |                                 | do      | 1st, 2nd, ..., 31st               | 7     |
- * |                                 | dd      | 01, 02, ..., 31                   |       |
- * | Day of year                     | D       | 1, 2, ..., 365, 366               | 9     |
- * |                                 | Do      | 1st, 2nd, ..., 365th, 366th       | 7     |
- * |                                 | DD      | 01, 02, ..., 365, 366             | 9     |
- * |                                 | DDD     | 001, 002, ..., 365, 366           |       |
- * |                                 | DDDD    | ...                               | 3     |
- * | Day of week (formatting)        | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
- * |                                 | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
- * |                                 | EEEEE   | M, T, W, T, F, S, S               |       |
- * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
- * | ISO day of week (formatting)    | i       | 1, 2, 3, ..., 7                   | 7     |
- * |                                 | io      | 1st, 2nd, ..., 7th                | 7     |
- * |                                 | ii      | 01, 02, ..., 07                   | 7     |
- * |                                 | iii     | Mon, Tue, Wed, ..., Sun           | 7     |
- * |                                 | iiii    | Monday, Tuesday, ..., Sunday      | 2,7   |
- * |                                 | iiiii   | M, T, W, T, F, S, S               | 7     |
- * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 7     |
- * | Local day of week (formatting)  | e       | 2, 3, 4, ..., 1                   |       |
- * |                                 | eo      | 2nd, 3rd, ..., 1st                | 7     |
- * |                                 | ee      | 02, 03, ..., 01                   |       |
- * |                                 | eee     | Mon, Tue, Wed, ..., Sun           |       |
- * |                                 | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
- * |                                 | eeeee   | M, T, W, T, F, S, S               |       |
- * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
- * | Local day of week (stand-alone) | c       | 2, 3, 4, ..., 1                   |       |
- * |                                 | co      | 2nd, 3rd, ..., 1st                | 7     |
- * |                                 | cc      | 02, 03, ..., 01                   |       |
- * |                                 | ccc     | Mon, Tue, Wed, ..., Sun           |       |
- * |                                 | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
- * |                                 | ccccc   | M, T, W, T, F, S, S               |       |
- * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
- * | AM, PM                          | a..aa   | AM, PM                            |       |
- * |                                 | aaa     | am, pm                            |       |
- * |                                 | aaaa    | a.m., p.m.                        | 2     |
- * |                                 | aaaaa   | a, p                              |       |
- * | AM, PM, noon, midnight          | b..bb   | AM, PM, noon, midnight            |       |
- * |                                 | bbb     | am, pm, noon, midnight            |       |
- * |                                 | bbbb    | a.m., p.m., noon, midnight        | 2     |
- * |                                 | bbbbb   | a, p, n, mi                       |       |
- * | Flexible day period             | B..BBB  | at night, in the morning, ...     |       |
- * |                                 | BBBB    | at night, in the morning, ...     | 2     |
- * |                                 | BBBBB   | at night, in the morning, ...     |       |
- * | Hour [1-12]                     | h       | 1, 2, ..., 11, 12                 |       |
- * |                                 | ho      | 1st, 2nd, ..., 11th, 12th         | 7     |
- * |                                 | hh      | 01, 02, ..., 11, 12               |       |
- * | Hour [0-23]                     | H       | 0, 1, 2, ..., 23                  |       |
- * |                                 | Ho      | 0th, 1st, 2nd, ..., 23rd          | 7     |
- * |                                 | HH      | 00, 01, 02, ..., 23               |       |
- * | Hour [0-11]                     | K       | 1, 2, ..., 11, 0                  |       |
- * |                                 | Ko      | 1st, 2nd, ..., 11th, 0th          | 7     |
- * |                                 | KK      | 01, 02, ..., 11, 00               |       |
- * | Hour [1-24]                     | k       | 24, 1, 2, ..., 23                 |       |
- * |                                 | ko      | 24th, 1st, 2nd, ..., 23rd         | 7     |
- * |                                 | kk      | 24, 01, 02, ..., 23               |       |
- * | Minute                          | m       | 0, 1, ..., 59                     |       |
- * |                                 | mo      | 0th, 1st, ..., 59th               | 7     |
- * |                                 | mm      | 00, 01, ..., 59                   |       |
- * | Second                          | s       | 0, 1, ..., 59                     |       |
- * |                                 | so      | 0th, 1st, ..., 59th               | 7     |
- * |                                 | ss      | 00, 01, ..., 59                   |       |
- * | Fraction of second              | S       | 0, 1, ..., 9                      |       |
- * |                                 | SS      | 00, 01, ..., 99                   |       |
- * |                                 | SSS     | 000, 001, ..., 999                |       |
- * |                                 | SSSS    | ...                               | 3     |
- * | Timezone (ISO-8601 w/ Z)        | X       | -08, +0530, Z                     |       |
- * |                                 | XX      | -0800, +0530, Z                   |       |
- * |                                 | XXX     | -08:00, +05:30, Z                 |       |
- * |                                 | XXXX    | -0800, +0530, Z, +123456          | 2     |
- * |                                 | XXXXX   | -08:00, +05:30, Z, +12:34:56      |       |
- * | Timezone (ISO-8601 w/o Z)       | x       | -08, +0530, +00                   |       |
- * |                                 | xx      | -0800, +0530, +0000               |       |
- * |                                 | xxx     | -08:00, +05:30, +00:00            | 2     |
- * |                                 | xxxx    | -0800, +0530, +0000, +123456      |       |
- * |                                 | xxxxx   | -08:00, +05:30, +00:00, +12:34:56 |       |
- * | Timezone (GMT)                  | O...OOO | GMT-8, GMT+5:30, GMT+0            |       |
- * |                                 | OOOO    | GMT-08:00, GMT+05:30, GMT+00:00   | 2     |
- * | Timezone (specific non-locat.)  | z...zzz | GMT-8, GMT+5:30, GMT+0            | 6     |
- * |                                 | zzzz    | GMT-08:00, GMT+05:30, GMT+00:00   | 2,6   |
- * | Seconds timestamp               | t       | 512969520                         | 7     |
- * |                                 | tt      | ...                               | 3,7   |
- * | Milliseconds timestamp          | T       | 512969520900                      | 7     |
- * |                                 | TT      | ...                               | 3,7   |
- * | Long localized date             | P       | 04/29/1453                        | 7     |
- * |                                 | PP      | Apr 29, 1453                      | 7     |
- * |                                 | PPP     | April 29th, 1453                  | 7     |
- * |                                 | PPPP    | Friday, April 29th, 1453          | 2,7   |
- * | Long localized time             | p       | 12:00 AM                          | 7     |
- * |                                 | pp      | 12:00:00 AM                       | 7     |
- * |                                 | ppp     | 12:00:00 AM GMT+2                 | 7     |
- * |                                 | pppp    | 12:00:00 AM GMT+02:00             | 2,7   |
- * | Combination of date and time    | Pp      | 04/29/1453, 12:00 AM              | 7     |
- * |                                 | PPpp    | Apr 29, 1453, 12:00:00 AM         | 7     |
- * |                                 | PPPppp  | April 29th, 1453 at ...           | 7     |
- * |                                 | PPPPpppp| Friday, April 29th, 1453 at ...   | 2,7   |
- * Notes:
- * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale
- *    are the same as "stand-alone" units, but are different in some languages.
- *    "Formatting" units are declined according to the rules of the language
- *    in the context of a date. "Stand-alone" units are always nominative singular:
- *
- *    `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'`
- *
- *    `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'`
- *
- * 2. Any sequence of the identical letters is a pattern, unless it is escaped by
- *    the single quote characters (see below).
- *    If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`)
- *    the output will be the same as default pattern for this unit, usually
- *    the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units
- *    are marked with "2" in the last column of the table.
- *
- *    `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'`
- *
- *    `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'`
- *
- *    `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'`
- *
- *    `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'`
- *
- *    `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'`
- *
- * 3. Some patterns could be unlimited length (such as `yyyyyyyy`).
- *    The output will be padded with zeros to match the length of the pattern.
- *
- *    `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'`
- *
- * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales.
- *    These tokens represent the shortest form of the quarter.
- *
- * 5. The main difference between `y` and `u` patterns are B.C. years:
- *
- *    | Year | `y` | `u` |
- *    |------|-----|-----|
- *    | AC 1 |   1 |   1 |
- *    | BC 1 |   1 |   0 |
- *    | BC 2 |   2 |  -1 |
- *
- *    Also `yy` always returns the last two digits of a year,
- *    while `uu` pads single digit years to 2 characters and returns other years unchanged:
- *
- *    | Year | `yy` | `uu` |
- *    |------|------|------|
- *    | 1    |   01 |   01 |
- *    | 14   |   14 |   14 |
- *    | 376  |   76 |  376 |
- *    | 1453 |   53 | 1453 |
- *
- *    The same difference is true for local and ISO week-numbering years (`Y` and `R`),
- *    except local week-numbering years are dependent on `options.weekStartsOn`
- *    and `options.firstWeekContainsDate` (compare [getISOWeekYear]{@link https://date-fns.org/docs/getISOWeekYear}
- *    and [getWeekYear]{@link https://date-fns.org/docs/getWeekYear}).
- *
- * 6. Specific non-location timezones are currently unavailable in `date-fns`,
- *    so right now these tokens fall back to GMT timezones.
- *
- * 7. These patterns are not in the Unicode Technical Standard #35:
- *    - `i`: ISO day of week
- *    - `I`: ISO week of year
- *    - `R`: ISO week-numbering year
- *    - `t`: seconds timestamp
- *    - `T`: milliseconds timestamp
- *    - `o`: ordinal number modifier
- *    - `P`: long localized date
- *    - `p`: long localized time
- *
- * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years.
- *    You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- *
- * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month.
- *    You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- *
- * @param {Date|Number} date - the original date
- * @param {String} format - the string of tokens
- * @param {Object} [options] - an object with options.
- * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
- * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
- * @param {Number} [options.firstWeekContainsDate=1] - the day of January, which is
- * @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`;
- *   see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- * @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`;
- *   see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- * @returns {String} the formatted date string
- * @throws {TypeError} 2 arguments required
- * @throws {RangeError} `date` must not be Invalid Date
- * @throws {RangeError} `options.locale` must contain `localize` property
- * @throws {RangeError} `options.locale` must contain `formatLong` property
- * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
- * @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7
- * @throws {RangeError} use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- * @throws {RangeError} use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- * @throws {RangeError} use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- * @throws {RangeError} use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
- * @throws {RangeError} format string contains an unescaped latin alphabet character
- *
- * @example
- * // Represent 11 February 2014 in middle-endian format:
- * const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy')
- * //=> '02/11/2014'
- *
- * @example
- * // Represent 2 July 2014 in Esperanto:
- * import { eoLocale } from 'date-fns/locale/eo'
- * const result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", {
- *   locale: eoLocale
- * })
- * //=> '2-a de julio 2014'
- *
- * @example
- * // Escape string by single quote characters:
- * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'")
- * //=> "3 o'clock"
- */
-
-function format(dirtyDate, dirtyFormatStr, options) {
-  var _ref, _options$locale, _ref2, _ref3, _ref4, _options$firstWeekCon, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2, _ref5, _ref6, _ref7, _options$weekStartsOn, _options$locale3, _options$locale3$opti, _defaultOptions$local3, _defaultOptions$local4;
-  requiredArgs(2, arguments);
-  var formatStr = String(dirtyFormatStr);
-  var defaultOptions = getDefaultOptions();
-  var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale;
-  var firstWeekContainsDate = toInteger((_ref2 = (_ref3 = (_ref4 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.firstWeekContainsDate) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : 1);
-
-  // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
-  if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
-    throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
-  }
-  var weekStartsOn = toInteger((_ref5 = (_ref6 = (_ref7 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale3 = options.locale) === null || _options$locale3 === void 0 ? void 0 : (_options$locale3$opti = _options$locale3.options) === null || _options$locale3$opti === void 0 ? void 0 : _options$locale3$opti.weekStartsOn) !== null && _ref7 !== void 0 ? _ref7 : defaultOptions.weekStartsOn) !== null && _ref6 !== void 0 ? _ref6 : (_defaultOptions$local3 = defaultOptions.locale) === null || _defaultOptions$local3 === void 0 ? void 0 : (_defaultOptions$local4 = _defaultOptions$local3.options) === null || _defaultOptions$local4 === void 0 ? void 0 : _defaultOptions$local4.weekStartsOn) !== null && _ref5 !== void 0 ? _ref5 : 0);
-
-  // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
-  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
-    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
-  }
-  if (!locale.localize) {
-    throw new RangeError('locale must contain localize property');
-  }
-  if (!locale.formatLong) {
-    throw new RangeError('locale must contain formatLong property');
-  }
-  var originalDate = toDate(dirtyDate);
-  if (!isValid(originalDate)) {
-    throw new RangeError('Invalid time value');
-  }
-
-  // Convert the date in system timezone to the same date in UTC+00:00 timezone.
-  // This ensures that when UTC functions will be implemented, locales will be compatible with them.
-  // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376
-  var timezoneOffset = getTimezoneOffsetInMilliseconds(originalDate);
-  var utcDate = subMilliseconds(originalDate, timezoneOffset);
-  var formatterOptions = {
-    firstWeekContainsDate: firstWeekContainsDate,
-    weekStartsOn: weekStartsOn,
-    locale: locale,
-    _originalDate: originalDate
-  };
-  var result = formatStr.match(longFormattingTokensRegExp).map(function (substring) {
-    var firstCharacter = substring[0];
-    if (firstCharacter === 'p' || firstCharacter === 'P') {
-      var longFormatter = longFormatters$1[firstCharacter];
-      return longFormatter(substring, locale.formatLong);
-    }
-    return substring;
-  }).join('').match(formattingTokensRegExp).map(function (substring) {
-    // Replace two single quote characters with one single quote character
-    if (substring === "''") {
-      return "'";
-    }
-    var firstCharacter = substring[0];
-    if (firstCharacter === "'") {
-      return cleanEscapedString(substring);
-    }
-    var formatter = formatters$1[firstCharacter];
-    if (formatter) {
-      if (!(options !== null && options !== void 0 && options.useAdditionalWeekYearTokens) && isProtectedWeekYearToken(substring)) {
-        throwProtectedError(substring, dirtyFormatStr, String(dirtyDate));
-      }
-      if (!(options !== null && options !== void 0 && options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(substring)) {
-        throwProtectedError(substring, dirtyFormatStr, String(dirtyDate));
-      }
-      return formatter(utcDate, substring, locale.localize, formatterOptions);
-    }
-    if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
-      throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`');
-    }
-    return substring;
-  }).join('');
-  return result;
-}
-function cleanEscapedString(input) {
-  var matched = input.match(escapedStringRegExp);
-  if (!matched) {
-    return input;
-  }
-  return matched[1].replace(doubleQuoteRegExp, "'");
-}
 
 const CFormFeedback = vue.defineComponent({
     name: 'CFormFeedback',
@@ -6529,7 +4579,7 @@ const CPicker = vue.defineComponent({
                         /**
                          * @slot Location for the footer element.
                          */
-                        slots.footer && slots.footer(),
+                        props.footer && slots.footer && slots.footer(),
                     ]),
                 ]);
             }
@@ -6954,12 +5004,12 @@ const CTimePicker = vue.defineComponent({
             listOfSeconds: [],
             hour12: false,
         });
-        const isValid = vue.ref(props.valid || (props.invalid && false));
+        const isValid = vue.ref(props.valid ?? (props.invalid === true ? false : undefined));
         vue.watch(() => props.time, () => {
             date.value = convertTimeToDate(props.time);
         });
         vue.watch(() => [props.valid, props.invalid], () => {
-            isValid.value = props.valid || (props.invalid && false);
+            isValid.value = props.valid ?? (props.invalid === true ? false : undefined);
         });
         vue.watch(date, () => {
             localizedTimePartials.value = getLocalizedTimePartials(props.locale, props.ampm);
@@ -7242,14 +5292,93 @@ const getLocalDateFromString = (string, locale, time) => {
     const newDate = partials.groups &&
         (time
             ? new Date(Number(partials.groups['year']), Number(partials.groups['month']) - 1, Number(partials.groups['day']), partials.groups['ampm']
-                ? partials.groups['ampm'] === 'PM'
+                ? (partials.groups['ampm'] === 'PM'
                     ? Number(partials.groups['hour']) + 12
-                    : Number(partials.groups['hour'])
+                    : Number(partials.groups['hour']))
                 : Number(partials.groups['hour']), Number(partials.groups['minute']), Number(partials.groups['second']))
             : new Date(Number(partials.groups['year']), Number(partials.groups['month']) - 1, Number(partials.groups['day'])));
     return newDate;
 };
 
+const getStoredTheme = (localStorageItemName) => typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
+const setStoredTheme = (localStorageItemName, colorMode) => localStorage.setItem(localStorageItemName, colorMode);
+const getPreferredColorScheme = (localStorageItemName) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const storedTheme = getStoredTheme(localStorageItemName);
+    if (storedTheme) {
+        return storedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+const setTheme = (colorMode) => {
+    document.documentElement.dataset.coreuiTheme =
+        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : colorMode;
+    const event = new Event('ColorSchemeChange');
+    document.documentElement.dispatchEvent(event);
+};
+const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => {
+    const colorMode = vue.ref(getPreferredColorScheme(localStorageItemName));
+    vue.watch(colorMode, () => {
+        if (colorMode.value) {
+            setStoredTheme(localStorageItemName, colorMode.value);
+            setTheme(colorMode.value);
+        }
+    });
+    vue.onBeforeMount(() => {
+        if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) {
+            setTheme(colorMode.value);
+        }
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            const storedTheme = getStoredTheme(localStorageItemName);
+            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) {
+                setTheme(colorMode.value);
+            }
+        });
+    });
+    return {
+        colorMode,
+        isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
+        setColorMode: (mode) => {
+            colorMode.value = mode;
+        },
+    };
+};
+
+const useDebouncedCallback = (callback, delay) => {
+    const timeout = vue.ref();
+    const debouncedFn = (...args) => {
+        const handler = () => {
+            clearTimeout(timeout.value);
+            callback(...args);
+        };
+        clearTimeout(timeout.value);
+        timeout.value = setTimeout(handler, delay);
+    };
+    return debouncedFn();
+};
+
+const usePopper = () => {
+    const _popper = vue.ref();
+    const initPopper = (reference, popper, options) => {
+        _popper.value = createPopper(reference, popper, options);
+    };
+    const destroyPopper = () => {
+        if (_popper.value) {
+            _popper.value.destroy();
+        }
+        _popper.value = undefined;
+    };
+    return {
+        popper: _popper.value,
+        initPopper,
+        destroyPopper,
+    };
+};
+
 const CDateRangePicker = vue.defineComponent({
     name: 'CDateRangePicker',
     props: {
@@ -7454,6 +5583,27 @@ const CDateRangePicker = vue.defineComponent({
          * Toggle the readonly state for the component.
          */
         inputReadOnly: Boolean,
+        /**
+         * Custom function to format the selected date into a string according to a custom format.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputDateFormat: Function,
+        /**
+         * Custom function to parse the input value into a valid Date object.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputDateParse: Function,
+        /**
+         * Defines the delay (in milliseconds) for the input field's onChange event.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputOnChangeDelay: {
+            type: Number,
+            default: 750,
+        },
         /**
          * Set component validation state to invalid.
          *
@@ -7531,6 +5681,16 @@ const CDateRangePicker = vue.defineComponent({
          * @since 4.9.0
          */
         selectAdjacementDays: Boolean,
+        /**
+         * Specify the type of date selection as day, week, month, or year.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        selectionType: {
+            type: String,
+            default: 'day',
+            validator: (value) => ['day', 'week', 'month', 'year'].includes(value),
+        },
         /**
          * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
          *
@@ -7540,6 +5700,12 @@ const CDateRangePicker = vue.defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Set whether to display week numbers in the calendar.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        showWeekNumber: Boolean,
         /**
          * Default icon or character character that separates two dates.
          */
@@ -7652,6 +5818,12 @@ const CDateRangePicker = vue.defineComponent({
                 return false;
             },
         },
+        /**
+         * Label displayed over week numbers in the calendar.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        weekNumbersLabel: String,
     },
     emits: [
         /**
@@ -7695,53 +5867,45 @@ const CDateRangePicker = vue.defineComponent({
         const inputEndRef = vue.ref();
         const inputStartRef = vue.ref();
         const formRef = vue.ref();
+        const calendarDate = vue.ref(props.calendarDate ?? null);
+        const endDate = vue.ref(props.endDate ?? null);
+        const maxDate = vue.ref(props.maxDate ?? null);
+        const minDate = vue.ref(props.minDate ?? null);
+        const startDate = vue.ref(props.startDate ?? null);
         const visible = vue.ref(props.visible);
-        const calendarDate = vue.ref(props.calendarDate
-            ? new Date(props.calendarDate)
-            : props.startDate
-                ? new Date(props.startDate)
-                : props.endDate
-                    ? new Date(props.endDate)
-                    : new Date());
+        const initialStartDate = vue.ref(props.startDate ?? null);
+        const initialEndDate = vue.ref(props.endDate ?? null);
         const inputStartHoverValue = vue.ref(null);
         const inputEndHoverValue = vue.ref(null);
-        const startDate = vue.ref(props.startDate ? new Date(props.startDate) : null);
-        const endDate = vue.ref(props.endDate ? new Date(props.endDate) : null);
-        const initialStartDate = vue.ref(startDate.value ? new Date(startDate.value) : null);
-        const initialEndDate = vue.ref(endDate.value ? new Date(endDate.value) : null);
-        const maxDate = vue.ref(props.maxDate && new Date(props.maxDate));
-        const minDate = vue.ref(props.minDate && new Date(props.minDate));
-        const selectEndDate = vue.ref(false);
-        const isValid = vue.ref(props.valid || (props.invalid && false));
+        const isValid = vue.ref(props.valid ?? (props.invalid === true ? false : undefined));
         const isMobile = vue.ref(false);
+        const selectEndDate = vue.ref(false);
         vue.onMounted(() => {
             isMobile.value = window.innerWidth < 768;
         });
         vue.watch(() => [props.valid, props.invalid], () => {
-            isValid.value = props.valid || (props.invalid && false);
+            isValid.value = props.valid ?? (props.invalid === true ? false : undefined);
         });
         vue.watch(() => props.startDate, () => {
             if (props.startDate) {
-                const date = new Date(props.startDate);
-                calendarDate.value = date;
-                startDate.value = date;
+                calendarDate.value = props.startDate;
+                startDate.value = props.startDate;
             }
         });
         vue.watch(() => props.endDate, () => {
             if (props.endDate) {
-                const date = new Date(props.endDate);
-                calendarDate.value = date;
-                endDate.value = date;
+                calendarDate.value = props.endDate;
+                endDate.value = props.endDate;
             }
         });
         vue.watch(() => props.maxDate, () => {
             if (props.maxDate) {
-                maxDate.value = new Date(props.maxDate);
+                maxDate.value = props.maxDate;
             }
         });
         vue.watch(() => props.minDate, () => {
             if (props.minDate) {
-                minDate.value = new Date(props.minDate);
+                minDate.value = props.minDate;
             }
         });
         vue.watch(inputStartRef, () => {
@@ -7758,11 +5922,15 @@ const CDateRangePicker = vue.defineComponent({
             }
         });
         const formatDate = (date) => {
-            return props.format
-                ? format(date, props.format)
+            if (props.selectionType !== 'day') {
+                return date;
+            }
+            const _date = new Date(date);
+            return props.inputDateFormat
+                ? props.inputDateFormat(_date)
                 : props.timepicker
-                    ? date.toLocaleString(props.locale)
-                    : date.toLocaleDateString(props.locale);
+                    ? _date.toLocaleString(props.locale)
+                    : _date.toLocaleDateString(props.locale);
         };
         const setInputValue = (date) => {
             if (date) {
@@ -7770,20 +5938,13 @@ const CDateRangePicker = vue.defineComponent({
             }
             return '';
         };
-        const handleCalendarCellHover = (date) => {
+        const handleDateHover = (date) => {
             if (selectEndDate.value) {
                 inputEndHoverValue.value = date;
                 return;
             }
             inputStartHoverValue.value = date;
         };
-        const handleCalendarDateChange = (date, difference) => {
-            if (difference) {
-                calendarDate.value = new Date(date.getFullYear(), date.getMonth() - difference, 1);
-                return;
-            }
-            calendarDate.value = date;
-        };
         const handleFormValidation = (form) => {
             if (!form.classList.contains('was-validated')) {
                 return;
@@ -7835,6 +5996,20 @@ const CDateRangePicker = vue.defineComponent({
             emit('update:start-date', null);
             emit('update:end-date', null);
         };
+        const handleOnChange = (value, input) => {
+            const date = props.inputDateParse
+                ? props.inputDateParse(value)
+                : getLocalDateFromString(value, props.locale, props.timepicker);
+            if (date instanceof Date && date.getTime()) {
+                calendarDate.value = date;
+                if (input === 'start') {
+                    startDate.value = date;
+                }
+                else {
+                    endDate.value = date;
+                }
+            }
+        };
         const InputGroup = () => vue.h('div', {
             class: 'date-picker-input-group',
         }, [
@@ -7851,13 +6026,8 @@ const CDateRangePicker = vue.defineComponent({
                 onClick: () => {
                     selectEndDate.value = false;
                 },
-                onInput: (event) => {
-                    const date = getLocalDateFromString(event.target.value, props.locale, props.timepicker);
-                    if (date instanceof Date && date.getTime()) {
-                        calendarDate.value = date;
-                        startDate.value = date;
-                    }
-                },
+                onChange: (event) => handleOnChange(event.target.value, 'start'),
+                onInput: (event) => useDebouncedCallback(() => handleOnChange(event.target.value, 'start'), props.inputOnChangeDelay),
                 placeholder: Array.isArray(props.placeholder)
                     ? props.placeholder[0]
                     : props.placeholder,
@@ -7883,13 +6053,8 @@ const CDateRangePicker = vue.defineComponent({
                     onClick: () => {
                         selectEndDate.value = true;
                     },
-                    onInput: (event) => {
-                        const date = getLocalDateFromString(event.target.value, props.locale, props.timepicker);
-                        if (date instanceof Date && date.getTime()) {
-                            calendarDate.value = date;
-                            endDate.value = date;
-                        }
-                    },
+                    onChange: (event) => handleOnChange(event.target.value, 'end'),
+                    onInput: (event) => useDebouncedCallback(() => handleOnChange(event.target.value, 'end'), props.inputOnChangeDelay),
                     placeholder: props.placeholder[1],
                     readonly: props.inputReadOnly || typeof props.format === 'string',
                     required: props.required,
@@ -7999,26 +6164,36 @@ const CDateRangePicker = vue.defineComponent({
                             variant: 'ghost',
                         }, () => key))),
                     vue.h('div', { class: 'date-picker-calendars' }, vue.h(CCalendar, {
-                        calendarDate: new Date(calendarDate.value.getFullYear(), calendarDate.value.getMonth(), 1),
-                        calendars: props.calendars,
+                        calendarDate: calendarDate.value,
+                        calendars: isMobile.value ? 1 : props.calendars,
+                        class: 'date-picker-calendars',
                         dayFormat: props.dayFormat,
                         disabledDates: props.disabledDates,
-                        ...(endDate.value && { endDate: endDate.value }),
+                        endDate: endDate.value,
                         firstDayOfWeek: props.firstDayOfWeek,
                         locale: props.locale,
                         maxDate: maxDate.value,
                         minDate: minDate.value,
-                        navYearFirst: props.navYearFirst,
                         navigation: props.navigation,
+                        navYearFirst: props.navYearFirst,
                         range: props.range,
-                        selectEndDate: selectEndDate.value,
                         selectAdjacementDays: props.selectAdjacementDays,
+                        selectEndDate: selectEndDate.value,
+                        selectionType: props.selectionType,
                         showAdjacementDays: props.showAdjacementDays,
-                        ...(startDate.value && { startDate: startDate.value }),
-                        onCalendarCellHover: (date) => handleCalendarCellHover(date),
-                        onCalendarDateChange: (date) => handleCalendarDateChange(date),
+                        showWeekNumber: props.showWeekNumber,
+                        startDate: startDate.value,
+                        weekdayFormat: props.weekdayFormat,
+                        weekNumbersLabel: props.weekNumbersLabel,
+                        onDateHover: (date) => handleDateHover(date),
+                        onCalendarDateChange: (date) => {
+                            calendarDate.value = date;
+                        },
                         onStartDateChange: (date) => handleStartDateChange(date),
                         onEndDateChange: (date) => handleEndDateChange(date),
+                        onSelectEndChange: (value) => {
+                            selectEndDate.value = value;
+                        },
                     }, {
                         /**
                          * @slot Location for next icon.
@@ -8053,7 +6228,7 @@ const CDateRangePicker = vue.defineComponent({
                                     disabled: startDate.value === null ? true : false,
                                     locale: props.locale,
                                     onChange: (_, __, date) => handleStartDateChange(date),
-                                    time: startDate.value,
+                                    time: startDate.value && new Date(startDate.value),
                                     variant: 'select',
                                 }),
                                 vue.h(CTimePicker, {
@@ -8061,7 +6236,7 @@ const CDateRangePicker = vue.defineComponent({
                                     disabled: endDate.value === null ? true : false,
                                     locale: props.locale,
                                     onChange: (_, __, date) => handleEndDateChange(date),
-                                    time: endDate.value,
+                                    time: endDate.value && new Date(endDate.value),
                                     variant: 'select',
                                 }),
                             ]
@@ -8078,7 +6253,9 @@ const CDateRangePicker = vue.defineComponent({
                                 onChange: (_, __, date) => index === 0
                                     ? handleStartDateChange(date)
                                     : handleEndDateChange(date),
-                                time: index === 0 ? startDate.value : endDate.value,
+                                time: index === 0
+                                    ? startDate.value && new Date(startDate.value)
+                                    : endDate.value && new Date(endDate.value),
                                 variant: 'select',
                             }))),
                 ]),
@@ -8268,7 +6445,28 @@ const CDatePicker = vue.defineComponent({
         /**
          * Toggle the readonly state for the component.
          */
-        inputReadOnly: Boolean,
+        inputReadOnly: Boolean,
+        /**
+         * Custom function to format the selected date into a string according to a custom format.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputDateFormat: Function,
+        /**
+         * Custom function to parse the input value into a valid Date object.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputDateParse: Function,
+        /**
+         * Defines the delay (in milliseconds) for the input field's onChange event.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputOnChangeDelay: {
+            type: Number,
+            default: 750,
+        },
         /**
          * Sets the default locale for components. If not set, it is inherited from the navigator.language.
          */
@@ -8314,6 +6512,16 @@ const CDatePicker = vue.defineComponent({
          * @since 4.9.0
          */
         selectAdjacementDays: Boolean,
+        /**
+         * Specify the type of date selection as day, week, month, or year.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        selectionType: {
+            type: String,
+            default: 'day',
+            validator: (value) => ['day', 'week', 'month', 'year'].includes(value),
+        },
         /**
          * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
          *
@@ -8323,6 +6531,12 @@ const CDatePicker = vue.defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Set whether to display week numbers in the calendar.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        showWeekNumber: Boolean,
         /**
          * Size the component small or large.
          *
@@ -8360,6 +6574,12 @@ const CDatePicker = vue.defineComponent({
                 return false;
             },
         },
+        /**
+         * Label displayed over week numbers in the calendar.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        weekNumbersLabel: String,
     },
     emits: [
         /**
@@ -8397,72 +6617,30 @@ const CDatePickerPlugin = {
     },
 };
 
-const getStoredTheme = (localStorageItemName) => typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
-const setStoredTheme = (localStorageItemName, colorMode) => localStorage.setItem(localStorageItemName, colorMode);
-const getPreferredColorScheme = (localStorageItemName) => {
-    if (typeof window === 'undefined') {
-        return;
+const getAlignmentClassNames = (alignment) => {
+    const classNames = [];
+    if (typeof alignment === 'object') {
+        Object.keys(alignment).map((key) => {
+            classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`);
+        });
     }
-    const storedTheme = getStoredTheme(localStorageItemName);
-    if (storedTheme) {
-        return storedTheme;
+    if (typeof alignment === 'string') {
+        classNames.push(`dropdown-menu-${alignment}`);
     }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-};
-const setTheme = (colorMode) => {
-    document.documentElement.dataset.coreuiTheme =
-        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : colorMode;
-    const event = new Event('ColorSchemeChange');
-    document.documentElement.dispatchEvent(event);
-};
-const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => {
-    const colorMode = vue.ref(getPreferredColorScheme(localStorageItemName));
-    vue.watch(colorMode, () => {
-        if (colorMode.value) {
-            setStoredTheme(localStorageItemName, colorMode.value);
-            setTheme(colorMode.value);
-        }
-    });
-    vue.onBeforeMount(() => {
-        if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) {
-            setTheme(colorMode.value);
-        }
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            const storedTheme = getStoredTheme(localStorageItemName);
-            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) {
-                setTheme(colorMode.value);
-            }
-        });
-    });
-    return {
-        colorMode,
-        isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
-        setColorMode: (mode) => {
-            colorMode.value = mode;
-        },
-    };
+    return classNames;
 };
-
-const usePopper = () => {
-    const _popper = vue.ref();
-    const initPopper = (reference, popper, options) => {
-        _popper.value = createPopper(reference, popper, options);
-    };
-    const destroyPopper = () => {
-        if (_popper.value) {
-            _popper.value.destroy();
-        }
-        _popper.value = undefined;
-    };
-    return {
-        popper: _popper.value,
-        initPopper,
-        destroyPopper,
-    };
+const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
+    const listLength = list.length;
+    let index = list.indexOf(activeElement);
+    if (index === -1) {
+        return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0];
+    }
+    index += shouldGetNext ? 1 : -1;
+    if (isCycleAllowed) {
+        index = (index + listLength) % listLength;
+    }
+    return list[Math.max(0, Math.min(index, listLength - 1))];
 };
-
 const getPlacement = (placement, direction, alignment, isRTL) => {
     let _placement = placement;
     if (direction === 'dropup') {
@@ -8482,6 +6660,7 @@ const getPlacement = (placement, direction, alignment, isRTL) => {
     }
     return _placement;
 };
+
 const CDropdown = vue.defineComponent({
     name: 'CDropdown',
     props: {
@@ -8637,12 +6816,17 @@ const CDropdown = vue.defineComponent({
                 popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig);
                 window.addEventListener('mouseup', handleMouseUp);
                 window.addEventListener('keyup', handleKeyup);
+                dropdownToggleRef.value.addEventListener('keydown', handleKeydown);
+                dropdownMenuRef.value.addEventListener('keydown', handleKeydown);
                 emit('show');
                 return;
             }
             popper.value && destroyPopper();
             window.removeEventListener('mouseup', handleMouseUp);
             window.removeEventListener('keyup', handleKeyup);
+            dropdownToggleRef.value &&
+                dropdownToggleRef.value.removeEventListener('keydown', handleKeydown);
+            dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown);
             emit('hide');
         });
         vue.provide('config', {
@@ -8654,6 +6838,16 @@ const CDropdown = vue.defineComponent({
         vue.provide('visible', visible);
         vue.provide('dropdownToggleRef', dropdownToggleRef);
         vue.provide('dropdownMenuRef', dropdownMenuRef);
+        const handleKeydown = (event) => {
+            if (visible.value &&
+                dropdownMenuRef.value &&
+                (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                event.preventDefault();
+                const target = event.target;
+                const items = Array.from(dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'));
+                getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus();
+            }
+        };
         const handleKeyup = (event) => {
             if (props.autoClose === false) {
                 return;
@@ -8789,28 +6983,12 @@ const CDropdownMenu = vue.defineComponent({
         const config = vue.inject('config'); // eslint-disable-line @typescript-eslint/no-explicit-any
         const visible = vue.inject('visible');
         const { alignment, dark, popper } = config;
-        // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
-        const alignmentClassNames = (alignment) => {
-            const classNames = [];
-            if (typeof alignment === 'object') {
-                Object.keys(alignment).map((key) => {
-                    classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`);
-                });
-            }
-            if (typeof alignment === 'string') {
-                classNames.push(`dropdown-menu-${alignment}`);
-            }
-            return classNames;
-        };
         return () => vue.h(props.component, {
-            class: [
-                'dropdown-menu',
-                { 'dropdown-menu-dark': dark, show: visible.value },
-                alignmentClassNames(alignment),
-            ],
+            class: ['dropdown-menu', { show: visible.value }, getAlignmentClassNames(alignment)],
             ...((typeof alignment === 'object' || !popper) && {
                 'data-coreui-popper': 'static',
             }),
+            ...(dark && { 'data-coreui-theme': 'dark' }),
             ref: dropdownMenuRef,
         }, props.component === 'ul'
             ? slots.default && slots.default().map((vnode) => vue.h('li', {}, vnode))
@@ -8821,10 +6999,6 @@ const CDropdownMenu = vue.defineComponent({
 const CDropdownToggle = vue.defineComponent({
     name: 'CDropdownToggle',
     props: {
-        /**
-         * Toggle the active state for the component.
-         */
-        active: Boolean,
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
@@ -8853,6 +7027,15 @@ const CDropdownToggle = vue.defineComponent({
          * Toggle the disabled state for the component.
          */
         disabled: Boolean,
+        /**
+         * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+         *
+         * @since v5.0.0-alpha.1
+         */
+        navLink: {
+            type: Boolean,
+            default: true,
+        },
         /**
          * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
          */
@@ -8899,17 +7082,10 @@ const CDropdownToggle = vue.defineComponent({
         const dropdownVariant = vue.inject('variant');
         const visible = vue.inject('visible');
         const setVisible = vue.inject('setVisible');
-        const className = [
-            {
-                'dropdown-toggle': props.caret,
-                'dropdown-toggle-split': props.split,
-                active: props.active,
-                disabled: props.disabled,
-            },
-        ];
         const triggers = {
             ...((props.trigger === 'click' || props.trigger.includes('click')) && {
-                onClick: () => {
+                onClick: (event) => {
+                    event.preventDefault();
                     if (props.disabled) {
                         return;
                     }
@@ -8931,6 +7107,19 @@ const CDropdownToggle = vue.defineComponent({
                 },
             }),
         };
+        const togglerProps = vue.computed(() => {
+            return {
+                class: {
+                    'nav-link': dropdownVariant === 'nav-item' && props.navLink,
+                    'dropdown-toggle': props.caret,
+                    'dropdown-toggle-split': props.split,
+                    disabled: props.disabled,
+                    show: visible.value,
+                },
+                'aria-expanded': visible.value,
+                ...(!props.disabled && { ...triggers }),
+            };
+        });
         vue.onMounted(() => {
             if (togglerRef.value) {
                 dropdownToggleRef.value = togglerRef.value.$el;
@@ -8944,39 +7133,24 @@ const CDropdownToggle = vue.defineComponent({
                     },
                     ...triggers,
                 }))
-            : dropdownVariant === 'nav-item'
+            : dropdownVariant === 'nav-item' && props.navLink
                 ? vue.h('a', {
-                    active: props.active,
-                    class: [
-                        'nav-link',
-                        className,
-                        {
-                            show: visible.value,
-                        },
-                    ],
-                    disabled: props.disabled,
                     href: '#',
+                    ...togglerProps.value,
+                    role: 'button',
                     ref: dropdownToggleRef,
-                    ...triggers,
                 }, { default: () => slots.default && slots.default() })
                 : vue.h(CButton, {
-                    class: [
-                        className,
-                        {
-                            show: visible.value,
-                        },
-                    ],
-                    active: props.active,
+                    ...togglerProps.value,
                     color: props.color,
+                    component: props.component,
                     disabled: props.disabled,
-                    ref: (el) => {
-                        togglerRef.value = el;
-                    },
                     shape: props.shape,
                     size: props.size,
-                    ...triggers,
-                    ...(props.component === 'button' && { type: 'button' }),
                     variant: props.variant,
+                    ref: (el) => {
+                        togglerRef.value = el;
+                    },
                 }, () => props.split
                     ? vue.h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
                     : slots.default && slots.default());
@@ -9221,7 +7395,7 @@ const CFormCheck = vue.defineComponent({
         /**
          * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
          *
-         * @since 4.9.0
+         * @since 4.10.0
          */
         falseValue: String,
         /**
@@ -9294,7 +7468,7 @@ const CFormCheck = vue.defineComponent({
         /**
          * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
          *
-         * @since 4.9.0
+         * @since 4.10.0
          */
         trueValue: String,
         /**
@@ -9380,7 +7554,7 @@ const CFormCheck = vue.defineComponent({
         const formControl = () => {
             return vue.h('input', {
                 ...attrs,
-                ...(props.modelValue && props.value && { checked: isChecked.value }),
+                ...((props.modelValue || props.value) && { checked: isChecked.value }),
                 class: inputClassName,
                 id: props.id,
                 indeterminate: props.indeterminate,
@@ -10737,6 +8911,15 @@ const CModal = vue.defineComponent({
          * A string of all className you want applied to the modal content component.
          */
         contentClassName: String,
+        /**
+         * Puts the focus on the modal when shown.
+         *
+         * @since v5.0.0-alpha.1
+         */
+        focus: {
+            type: Boolean,
+            default: true,
+        },
         /**
          * Set modal to covers the entire user viewport
          *
@@ -10810,6 +8993,7 @@ const CModal = vue.defineComponent({
         'show',
     ],
     setup(props, { slots, attrs, emit }) {
+        const activeElementRef = vue.ref();
         const modalRef = vue.ref();
         const modalContentRef = vue.ref();
         const visible = vue.ref(props.visible);
@@ -10817,6 +9001,7 @@ const CModal = vue.defineComponent({
             visible.value = props.visible;
         });
         const handleEnter = (el, done) => {
+            activeElementRef.value = document.activeElement;
             executeAfterTransition(() => done(), el);
             document.body.classList.add('modal-open');
             document.body.style.overflow = 'hidden';
@@ -10828,6 +9013,7 @@ const CModal = vue.defineComponent({
             emit('show');
         };
         const handleAfterEnter = () => {
+            props.focus && modalRef.value?.focus();
             window.addEventListener('mousedown', handleMouseDown);
             window.addEventListener('keyup', handleKeyUp);
         };
@@ -10843,6 +9029,7 @@ const CModal = vue.defineComponent({
             el.classList.remove('show');
         };
         const handleAfterLeave = (el) => {
+            activeElementRef.value?.focus();
             window.removeEventListener('mousedown', handleMouseDown);
             window.removeEventListener('keyup', handleKeyUp);
             el.style.display = 'none';
@@ -10883,6 +9070,7 @@ const CModal = vue.defineComponent({
         };
         vue.provide('handleDismiss', handleDismiss);
         const modal = () => vue.h('div', {
+            ...attrs,
             class: [
                 'modal',
                 {
@@ -10890,6 +9078,7 @@ const CModal = vue.defineComponent({
                 },
                 attrs.class,
             ],
+            ...(visible.value ? { 'aria-modal': true, role: 'dialog' } : { 'aria-hidden': 'true' }),
             ref: modalRef,
         }, vue.h('div', {
             class: [
@@ -10902,7 +9091,6 @@ const CModal = vue.defineComponent({
                     [`modal-${props.size}`]: props.size,
                 },
             ],
-            role: 'dialog',
         }, vue.h('div', { class: ['modal-content', props.contentClassName], ref: modalContentRef }, slots.default && slots.default())));
         return () => [
             vue.h(vue.Transition, {
@@ -11114,8 +9302,8 @@ const CVirtualScrollerPlugin = {
     },
 };
 
-const createOption = (text, options) => {
-    const value = text.toLowerCase().replace(/\s/g, '-');
+const createOption = (label, options) => {
+    const value = label.toLowerCase().replace(/\s/g, '-');
     let uniqueValue = value;
     let i = 1;
     while (options.some((option) => String(option.value) === uniqueValue)) {
@@ -11125,7 +9313,7 @@ const createOption = (text, options) => {
     return [
         {
             value: uniqueValue,
-            text,
+            label,
             custom: true,
         },
     ];
@@ -11135,8 +9323,8 @@ const filterOptionsList = (search, _options) => {
         const optionsList = [];
         for (const option of _options) {
             const options = option.options &&
-                option.options.filter((option) => option.text && option.text.toLowerCase().includes(search.toLowerCase()));
-            if ((option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+                option.options.filter((option) => option.label && option.label.toLowerCase().includes(search.toLowerCase()));
+            if ((option.label && option.label.toLowerCase().includes(search.toLowerCase())) ||
                 (options && options.length > 0)) {
                 optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }));
             }
@@ -11280,7 +9468,7 @@ const CMultiSelectOptions = vue.defineComponent({
                     tabindex: 0,
                 }, props.scopedSlots && props.scopedSlots['options']
                     ? vue.h(props.scopedSlots['options'], { option: option })
-                    : option.text)
+                    : option.label)
                 : [
                     vue.h('div', { class: 'form-multi-select-optgroup-label' }, props.scopedSlots && props.scopedSlots['options-groups']
                         ? vue.h(props.scopedSlots['options-groups'], { option: option })
@@ -11359,7 +9547,7 @@ const CMultiSelectSelection = vue.defineComponent({
                 props.selected.map((option) => {
                     if (props.selectionType === 'tags') {
                         return vue.h('span', { class: 'form-multi-select-tag' }, [
-                            option.text,
+                            option.label,
                             !option.disabled &&
                                 vue.h('button', {
                                     class: 'form-multi-select-tag-delete',
@@ -11372,8 +9560,8 @@ const CMultiSelectSelection = vue.defineComponent({
                 }),
             props.multiple &&
                 props.selectionType === 'text' &&
-                props.selected.map((option, index) => vue.h('span', `${option.text}${index === props.selected.length - 1 ? '' : ','}\xA0`)),
-            !props.multiple && !props.search && props.selected.map((option) => option.text)[0],
+                props.selected.map((option, index) => vue.h('span', `${option.label}${index === props.selected.length - 1 ? '' : ','}\xA0`)),
+            !props.multiple && !props.search && props.selected.map((option) => option.label)[0],
             slots.default && slots.default(),
         ]);
     },
@@ -11652,7 +9840,7 @@ const CMultiSelect = vue.defineComponent({
         const flattenedOptions = vue.computed(() => flattenOptionsArray(props.options));
         const userOption = vue.computed(() => {
             if (props.allowCreateOptions &&
-                filteredOptions.value.some((option) => option.text && option.text.toLowerCase() === searchValue.value.toLowerCase())) {
+                filteredOptions.value.some((option) => option.label && option.label.toLowerCase() === searchValue.value.toLowerCase())) {
                 return false;
             }
             return searchRef.value && createOption(String(searchValue.value), flattenedOptions.value);
@@ -11744,7 +9932,7 @@ const CMultiSelect = vue.defineComponent({
                 if (!userOption.value) {
                     selected.value = [
                         ...selected.value,
-                        filteredOptions.value.find((option) => String(option.text).toLowerCase() === searchValue.value.toLowerCase()),
+                        filteredOptions.value.find((option) => String(option.label).toLowerCase() === searchValue.value.toLowerCase()),
                     ];
                 }
                 if (userOption.value) {
@@ -11769,7 +9957,7 @@ const CMultiSelect = vue.defineComponent({
         };
         const handleOptionClick = (option) => {
             if (!props.multiple) {
-                selected.value = [{ value: option.value, text: option.text }];
+                selected.value = [option];
                 visible.value = false;
                 if (searchRef.value) {
                     searchRef.value.value = '';
@@ -11790,10 +9978,7 @@ const CMultiSelect = vue.defineComponent({
                 selected.value = selected.value.filter((_option) => _option.value !== option.value);
             }
             else {
-                selected.value = [
-                    ...selected.value,
-                    { value: option.value, text: option.text },
-                ];
+                selected.value = [...selected.value, option];
             }
         };
         const handleSelectAll = () => {
@@ -11878,7 +10063,7 @@ const CMultiSelect = vue.defineComponent({
                                             }),
                                             ...(selected.value.length > 0 &&
                                                 !props.multiple && {
-                                                placeholder: selected.value.map((option) => option.text)[0],
+                                                placeholder: selected.value.map((option) => option.label)[0],
                                             }),
                                             ...(props.multiple &&
                                                 selected.value.length > 0 &&
@@ -12261,13 +10446,13 @@ const CNavbar = vue.defineComponent({
                 'navbar',
                 {
                     [`bg-${props.color}`]: props.color,
-                    [`navbar-${props.colorScheme}`]: props.colorScheme,
                     [typeof props.expand === 'boolean'
                         ? 'navbar-expand'
                         : `navbar-expand-${props.expand}`]: props.expand,
                 },
                 props.placement,
             ],
+            ...(props.colorScheme && { 'data-coreui-theme': props.colorScheme }),
         }, props.container
             ? vue.h('div', { class: [`container${props.container === true ? '' : '-' + props.container}`] }, slots.default && slots.default())
             : slots.default && slots.default());
@@ -12364,6 +10549,10 @@ const COffcanvas = vue.defineComponent({
                 return false;
             },
         },
+        /**
+         * Sets a darker color scheme.
+         */
+        dark: Boolean,
         /**
          * Closes the offcanvas when escape key is pressed.
          */
@@ -12479,6 +10668,7 @@ const COffcanvas = vue.defineComponent({
         };
         return () => [
             vue.h(vue.Transition, {
+                appear: visible.value,
                 css: false,
                 onEnter: (el, done) => handleEnter(el, done),
                 onAfterEnter: () => handleAfterEnter(),
@@ -12495,6 +10685,7 @@ const COffcanvas = vue.defineComponent({
                 ref: offcanvasRef,
                 role: 'dialog',
                 tabindex: -1,
+                ...(props.dark && { 'data-coreui-theme': 'dark' }),
             }, slots.default && slots.default()), [[vVisible, props.visible]])),
             props.backdrop &&
                 vue.h(CBackdrop, {
@@ -12771,6 +10962,7 @@ const CProgressBar = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
+        const stacked = vue.inject('stacked', false);
         return () => vue.h('div', {
             class: [
                 'progress-bar',
@@ -12780,11 +10972,7 @@ const CProgressBar = vue.defineComponent({
                     ['progress-bar-animated']: props.animated,
                 },
             ],
-            role: 'progressbar',
-            style: `width: ${props.value}%`,
-            'aria-valuenow': props.value,
-            'aria-valuemin': '0',
-            'aria-valuemax': '100',
+            ...(!stacked && { style: { width: `${props.value}%` } }),
         }, slots.default && slots.default());
     },
 });
@@ -12792,21 +10980,55 @@ const CProgressBar = vue.defineComponent({
 const CProgress = vue.defineComponent({
     name: 'CProgress',
     props: {
+        /**
+         * Use to animate the stripes right to left via CSS3 animations.
+         */
+        animated: Boolean,
+        /**
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        color: Color$1,
         /**
          * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
          */
         height: Number,
+        /**
+         * A string of all className you want applied to the <CProgressBar/> component.
+         *
+         * @since 5.0.0-alpha.1
+         */
+        progressBarClassName: String,
         /**
          * Makes progress bar thinner.
          */
         thin: Boolean,
+        /**
+         * The percent to progress the ProgressBar.
+         */
+        value: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * Set the progress bar variant to optional striped.
+         *
+         * @values 'striped'
+         */
+        variant: {
+            type: String,
+            validator: (value) => {
+                return value === 'striped';
+            },
+        },
         /**
          * Change the default color to white.
          */
         white: Boolean,
-        ...CProgressBar.props,
     },
     setup(props, { slots }) {
+        const stacked = vue.inject('stacked', false);
         return () => vue.h('div', {
             class: [
                 'progress',
@@ -12815,15 +11037,49 @@ const CProgress = vue.defineComponent({
                     'progress-white': props.white,
                 },
             ],
-            ...(props.height, { style: `height: ${props.height}px` }),
-        }, props.value
-            ? vue.h(CProgressBar, {
-                value: props.value,
+            style: {
+                ...(props.height ? { height: `${props.height}px` } : {}),
+                ...(stacked ? { width: `${props.value}%` } : {}),
+            },
+            ...(props.value !== undefined && {
+                role: 'progressbar',
+                'aria-valuenow': props.value,
+                'aria-valuemin': 0,
+                'aria-valuemax': 100,
+            }),
+        }, 
+        // @ts-expect-error name is defined in component
+        slots.default && slots.default().some((vnode) => vnode.type.name === 'CProgressBar')
+            ? slots.default().map((vnode) => {
+                // @ts-expect-error name is defined in component
+                if (vnode.type.name === 'CProgressBar') {
+                    return vue.h(vnode, {
+                        ...(props.animated && { animated: props.animated }),
+                        ...(props.color && { color: props.color }),
+                        ...(props.value && { value: props.value }),
+                        ...(props.variant && { variant: props.variant }),
+                    });
+                }
+                return vnode;
+            })
+            : vue.h(CProgressBar, {
+                ...(props.progressBarClassName && { class: props.progressBarClassName }),
                 animated: props.animated,
                 color: props.color,
+                value: props.value,
                 variant: props.variant,
-            }, slots.default && slots.default())
-            : slots.default && slots.default());
+            }, () => slots.default && slots.default()));
+    },
+});
+
+const CProgressStacked = vue.defineComponent({
+    name: 'CProgressStacked',
+    props: {},
+    setup(_, { slots }) {
+        vue.provide('stacked', true);
+        return () => vue.h('div', {
+            class: 'progress-stacked',
+        }, slots.default && slots.default());
     },
 });
 
@@ -12831,6 +11087,7 @@ const CProgressPlugin = {
     install: (app) => {
         app.component(CProgress.name, CProgress);
         app.component(CProgressBar.name, CProgressBar);
+        app.component(CProgressStacked.name, CProgressStacked);
     },
 };
 
@@ -13198,7 +11455,7 @@ const CSidebar = vue.defineComponent({
             }, slots.default && slots.default()),
             mobile.value &&
                 vue.h(CBackdrop, {
-                    class: 'sidebar-backdrop d-none',
+                    class: 'sidebar-backdrop',
                     visible: props.visible,
                     onClick: () => handleHide(),
                 }),
@@ -13412,9 +11669,13 @@ const CSmartPagination = vue.defineComponent({
         const activePage = vue.ref(props.activePage);
         const limit = vue.ref(props.limit);
         const pages = vue.ref(props.pages);
-        vue.watch(props, () => {
+        vue.watch(() => props.activePage, () => {
             activePage.value = props.activePage;
+        });
+        vue.watch(() => props.limit, () => {
             limit.value = props.limit;
+        });
+        vue.watch(() => props.pages, () => {
             pages.value = props.pages;
         });
         const showDots = vue.computed(() => {
@@ -14178,11 +12439,11 @@ const filterTable = (items, tableFilter, tableFilterState, itemsDataColumns) =>
     });
     return items;
 };
-const getClickedColumnName = (target, columnNames) => {
+const getClickedColumnName = (target, columnNames, selectable) => {
     const closest = target.closest('tr');
     const children = closest ? Array.from(closest.children) : [];
     const clickedCell = children.filter((child) => child.contains(target))[0];
-    return columnNames[children.indexOf(clickedCell)];
+    return selectable ? columnNames[children.indexOf(clickedCell) - 1] : columnNames[children.indexOf(clickedCell)];
 };
 const getColumnKey = (column) => typeof column === 'object' ? column.key : column;
 const getColumnLabel = (column) => typeof column === 'object'
@@ -14190,6 +12451,12 @@ const getColumnLabel = (column) => typeof column === 'object'
         ? column.label
         : pretifyName(column.key)
     : pretifyName(column);
+const getColumnName = (column) => {
+    if (typeof column === 'object') {
+        return column.key;
+    }
+    return column;
+};
 const getColumnNames = (columns, items) => {
     if (columns) {
         const _columns = [];
@@ -14295,13 +12562,32 @@ const getColumnSorterState = (key, sorterState) => {
 const getColumnValues = (items, key) => {
     return items.map((item) => item[key]);
 };
-const getTableDataCellProps = (item, colName) => {
-    const props = item._cellProps && {
-        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-    };
+const getTableDataCellProps = (column, item, colName) => {
+    const props = {};
+    if (typeof column === 'object' && column._colProps) {
+        Object.assign(props, column._colProps);
+    }
+    if (item._cellProps && item._cellProps['all']) {
+        Object.assign(props, item._cellProps['all']);
+    }
+    if (item._cellProps && item._cellProps[colName]) {
+        Object.assign(props, item._cellProps[colName]);
+    }
     return props;
 };
+const getTableDataCellStyles = (column, item, colName) => {
+    const styles = {};
+    if (typeof column === 'object' && column._colStyle) {
+        Object.assign(styles, column._colStyle);
+    }
+    if (item._cellStyle && item._cellStyle['all']) {
+        Object.assign(styles, item._cellStyle['all']);
+    }
+    if (item._cellStyle && item._cellStyle[colName]) {
+        Object.assign(styles, item._cellStyle[colName]);
+    }
+    return styles;
+};
 const getTableHeaderCellProps = (column) => {
     if (typeof column === 'object' && column._props) {
         return column._props;
@@ -14367,6 +12653,11 @@ const CSmartTableBody = vue.defineComponent({
             default: () => [],
             require: true,
         },
+        columns: {
+            type: Array,
+            default: () => [],
+            require: true,
+        },
         currentItems: {
             type: Array,
             default: () => [],
@@ -14383,9 +12674,7 @@ const CSmartTableBody = vue.defineComponent({
     },
     emits: ['rowChecked', 'rowClick'],
     setup(props, { emit }) {
-        const colspan = props.selectable
-            ? props.columnNames.length + 1
-            : props.columnNames.length;
+        const colspan = props.selectable ? props.columns.length + 1 : props.columns.length;
         return () => vue.h(CTableBody, {
             ...(props.clickableRows && { style: 'cursor:pointer;' }),
         }, {
@@ -14395,7 +12684,7 @@ const CSmartTableBody = vue.defineComponent({
                         ...(item._props && { ...item._props }),
                         ...(props.clickableRows && { tabindex: 0 }),
                         onClick: (event) => {
-                            emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, getClickedColumnName(event.target, props.columnNames), event);
+                            emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, getClickedColumnName(event.target, props.columnNames, props.selectable), event);
                         },
                     }, {
                         default: () => [
@@ -14411,16 +12700,20 @@ const CSmartTableBody = vue.defineComponent({
                                         emit('rowChecked', item, event.target.checked);
                                     },
                                 })),
-                            props.columnNames.map((colName) => props.scopedSlots &&
-                                props.scopedSlots[colName] &&
-                                typeof props.scopedSlots[colName] === 'function'
-                                ? vue.h(props.scopedSlots[colName], { item: item })
-                                : typeof item[colName] !== 'undefined' &&
-                                    vue.h(CTableDataCell, {
-                                        ...getTableDataCellProps(item, colName),
-                                    }, {
-                                        default: () => String(item[colName]),
-                                    })),
+                            props.columns.map((column) => {
+                                const colName = getColumnName(column);
+                                return props.scopedSlots &&
+                                    props.scopedSlots[colName] &&
+                                    typeof props.scopedSlots[colName] === 'function'
+                                    ? vue.h(props.scopedSlots[colName], { item: item })
+                                    : typeof item[colName] !== 'undefined' &&
+                                        vue.h(CTableDataCell, {
+                                            ...getTableDataCellProps(column, item, colName),
+                                            style: getTableDataCellStyles(column, item, colName),
+                                        }, {
+                                            default: () => String(item[colName]),
+                                        });
+                            }),
                         ],
                     }),
                     props.scopedSlots &&
@@ -14436,9 +12729,6 @@ const CSmartTableBody = vue.defineComponent({
                         vue.h(CTableRow, {
                             class: 'p-0',
                             key: `details${trIndex}`,
-                            onClick: (event) => {
-                                emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, getClickedColumnName(event.target, props.columnNames), true);
-                            },
                         }, {
                             default: () => vue.h(CTableDataCell, {
                                 colspan: props.selectable
@@ -14532,60 +12822,84 @@ const CSmartTableHead = vue.defineComponent({
                                     emit('selectAllChecked');
                                 },
                             })),
-                        columns.value.map((column, index) => vue.h(CTableHeaderCell, {
-                            ...getTableHeaderCellProps(column),
-                            onClick: () => {
-                                emit('sortClick', getColumnKey(column), index);
-                            },
-                            style: getTableHeaderCellStyles(column, props.columnSorter),
-                        }, {
-                            default: () => [
-                                vue.h('div', {
-                                    class: 'd-inline',
-                                }, getColumnLabel(column)),
-                                props.columnSorter &&
-                                    (typeof column === 'object'
-                                        ? typeof column.sorter === 'undefined'
-                                            ? true
-                                            : column.sorter
-                                        : true) &&
-                                    columnSorterIcon(column),
-                            ],
-                        })),
+                        columns.value.map((column, index) => {
+                            const isSortable = props.columnSorter &&
+                                (typeof column === 'object'
+                                    ? column.sorter === undefined
+                                        ? true
+                                        : column.sorter
+                                    : true);
+                            return vue.h(CTableHeaderCell, {
+                                ...getTableHeaderCellProps(column),
+                                style: getTableHeaderCellStyles(column, props.columnSorter),
+                                ...isSortable && {
+                                    tabindex: 0,
+                                    onClick: () => emit('sortClick', getColumnKey(column), index),
+                                    onKeydown: (event) => {
+                                        if (event.key === 'Enter') {
+                                            emit('sortClick', getColumnKey(column), index);
+                                        }
+                                        if (event.key === 'ArrowUp') {
+                                            event.preventDefault();
+                                            emit('sortClick', getColumnKey(column), index, 'asc');
+                                        }
+                                        if (event.key === 'ArrowDown') {
+                                            event.preventDefault();
+                                            emit('sortClick', getColumnKey(column), index, 'desc');
+                                        }
+                                    },
+                                }
+                            }, {
+                                default: () => [
+                                    vue.h('div', {
+                                        class: 'd-inline',
+                                    }, getColumnLabel(column)),
+                                    props.columnSorter &&
+                                        (typeof column === 'object'
+                                            ? typeof column.sorter === 'undefined'
+                                                ? true
+                                                : column.sorter
+                                            : true) &&
+                                        columnSorterIcon(column),
+                                ],
+                            });
+                        }),
                     ],
                 }),
                 props.columnFilter &&
                     vue.h(CTableRow, {}, {
                         default: () => [
                             props.selectable && vue.h(CTableHeaderCell),
-                            columns.value.map((column) => vue.h(CTableHeaderCell, {
-                                ...getTableHeaderCellProps(column),
-                            }, {
-                                default: () => (typeof column === 'object'
-                                    ? column.filter === undefined
-                                        ? true
-                                        : column.filter
-                                    : true)
-                                    ? typeof column !== 'string' && typeof column.filter === 'function'
-                                        ? column.filter(getColumnValues(props.items, getColumnKey(column)), (value) => {
-                                            emit('customFilterChange', getColumnKey(column), value);
-                                        })
-                                        : vue.h(CFormInput, {
-                                            size: 'sm',
-                                            onInput: (event) => {
-                                                emit('filterInput', getColumnKey(column), event.target.value);
-                                            },
-                                            onChange: (event) => {
-                                                emit('filterChange', event.target.value);
-                                            },
-                                            'aria-label': `column name: '${getColumnLabel(column)}' filter input`,
-                                            ...(props.columnFilterValue &&
-                                                props.columnFilterValue[getColumnKey(column)] && {
-                                                value: props.columnFilterValue[getColumnKey(column)],
-                                            }),
-                                        })
-                                    : '',
-                            })),
+                            columns.value.map((column) => {
+                                return vue.h(CTableHeaderCell, {
+                                    ...getTableHeaderCellProps(column),
+                                }, {
+                                    default: () => (typeof column === 'object'
+                                        ? column.filter === undefined
+                                            ? true
+                                            : column.filter
+                                        : true)
+                                        ? typeof column !== 'string' && typeof column.filter === 'function'
+                                            ? column.filter(getColumnValues(props.items, getColumnKey(column)), (value) => {
+                                                emit('customFilterChange', getColumnKey(column), value);
+                                            })
+                                            : vue.h(CFormInput, {
+                                                size: 'sm',
+                                                onInput: (event) => {
+                                                    emit('filterInput', getColumnKey(column), event.target.value);
+                                                },
+                                                onChange: (event) => {
+                                                    emit('filterChange', getColumnKey(column), event.target.value);
+                                                },
+                                                'aria-label': `column name: '${getColumnLabel(column)}' filter input`,
+                                                ...(props.columnFilterValue &&
+                                                    props.columnFilterValue[getColumnKey(column)] && {
+                                                    value: props.columnFilterValue[getColumnKey(column)],
+                                                }),
+                                            })
+                                        : '',
+                                });
+                            }),
                         ],
                     }),
             ],
@@ -14714,8 +13028,6 @@ const CSmartTable = vue.defineComponent({
         },
         /**
          * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
-         * - label (String) - replaces default label text
-         * - values (Array) - custom array of pagination values
          * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
          */
         itemsPerPageSelect: {
@@ -14886,7 +13198,6 @@ const CSmartTable = vue.defineComponent({
             return { ...item, _id: index };
         }));
         const itemsNumber = vue.ref(props.itemsNumber);
-        // eslint-disable-next-line unicorn/explicit-length-check
         const itemsPerPage = vue.ref(props.itemsPerPage || items.value.length);
         const selected = vue.ref([]);
         const selectedAll = vue.ref();
@@ -14915,8 +13226,9 @@ const CSmartTable = vue.defineComponent({
                 }
             });
             if (Array.isArray(props.items)) {
-                items.value = props.items;
-                // eslint-disable-next-line unicorn/explicit-length-check
+                items.value = props.items.map((item, index) => {
+                    return { ...item, _id: index };
+                });
                 itemsNumber.value = props.itemsNumber || props.items.length;
             }
         }, {
@@ -14966,14 +13278,20 @@ const CSmartTable = vue.defineComponent({
                 activePage.value = 1;
             }
         });
-        const handleSorterChange = (column, index) => {
+        const handleSorterChange = (column, index, order) => {
             if (!isSortable(index, props.columns, props.columnSorter, itemsDataColumns.value, columnNames.value)) {
                 return;
             }
             //if column changed or sort was descending change asc to true
             const state = sorterState.value;
+            if (order) {
+                state.state = order;
+            }
             if (state.column === column) {
-                if (state.state === 0) {
+                if (order) {
+                    state.state = order;
+                }
+                else if (state.state === 0) {
                     state.state = 'asc';
                 }
                 else if (state.state === 'asc') {
@@ -14990,7 +13308,7 @@ const CSmartTable = vue.defineComponent({
             }
             else {
                 state.column = column;
-                state.state = 'asc';
+                state.state = order || 'asc';
             }
             sorterState.value.column = state.column;
             sorterState.value.state = state.state;
@@ -15060,6 +13378,9 @@ const CSmartTable = vue.defineComponent({
         const filteredColumns = vue.computed(() => filterColumns(items.value, props.columnFilter, columnFilterState.value, itemsDataColumns.value));
         const filteredTable = vue.computed(() => filterTable(filteredColumns.value, props.tableFilter, tableFilterState.value, itemsDataColumns.value));
         const sortedItems = vue.computed(() => sortItems(props.columnSorter, filteredTable.value, itemsDataColumns.value, sorterState.value));
+        vue.watch(sortedItems, () => {
+            emit('filteredItemsChange', sortedItems.value);
+        });
         const numberOfPages = vue.computed(() => itemsPerPage.value ? Math.ceil(sortedItems.value.length / itemsPerPage.value) : 1);
         const firstItemOnActivePageIndex = vue.computed(() => activePage.value ? (activePage.value - 1) * itemsPerPage.value : 0);
         const currentItems = vue.computed(() => activePage.value
@@ -15140,7 +13461,7 @@ const CSmartTable = vue.defineComponent({
                                     onFilterInput: (key, value) => handleColumnFilterChange(key, value, 'input'),
                                     onFilterChange: (key, value) => handleColumnFilterChange(key, value, 'change'),
                                     onSelectAllChecked: () => handleSelectAllChecked(),
-                                    onSortClick: (key, index) => handleSorterChange(key, index),
+                                    onSortClick: (key, index, order) => handleSorterChange(key, index, order),
                                 }, {
                                     // @slot Sorter icon when items are unsorted.
                                     sortingIcon: () => slots.sortingIcon
@@ -15160,7 +13481,7 @@ const CSmartTable = vue.defineComponent({
                                             class: 'icon',
                                             viewBox: '0 0 512 512',
                                             role: 'img',
-                                            innerHTML: cilArrowBottom[1],
+                                            innerHTML: cilArrowTop[1],
                                         }),
                                     // @slot  Sorter icon when items are sorted descending.
                                     sortingIconDescending: () => slots.sortingIconDescending
@@ -15170,12 +13491,13 @@ const CSmartTable = vue.defineComponent({
                                             class: 'icon',
                                             viewBox: '0 0 512 512',
                                             role: 'img',
-                                            innerHTML: cilArrowTop[1],
+                                            innerHTML: cilArrowBottom[1],
                                         }),
                                 }),
                             vue.h(CSmartTableBody, {
                                 clickableRows: props.clickableRows,
                                 columnNames: columnNames.value,
+                                columns: props.columns ?? columnNames.value,
                                 currentItems: currentItems.value,
                                 firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                                 noItemsLabel: props.noItemsLabel,
@@ -15803,9 +14125,7 @@ const CWidgetStatsA = vue.defineComponent({
      */
     setup(props, { slots }) {
         return () => vue.h(CCard, {
-            class: [
-                { [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
-            ],
+            class: [{ [`bg-${props.color}`]: props.color, 'text-white': props.color }],
         }, () => [
             vue.h(CCardBody, {
                 class: 'pb-0 d-flex justify-content-between align-items-start',
@@ -15917,7 +14237,7 @@ const CWidgetStatsB = vue.defineComponent({
         return () => vue.h(CCard, {
             class: [
                 {
-                    'text-high-emphasis-inverse': props.inverse,
+                    'text-white': props.inverse,
                 },
             ],
             color: props.color,
@@ -15943,9 +14263,7 @@ const CWidgetStatsB = vue.defineComponent({
             }),
             (props.text || slots.text) &&
                 vue.h('small', {
-                    class: [
-                        props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
-                    ],
+                    class: [props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary'],
                 }, {
                     default: () => (slots.text && slots.text()) || props.text,
                 }),
@@ -16013,7 +14331,7 @@ const CWidgetStatsC = vue.defineComponent({
                 vue.h('div', {
                     class: [
                         'text-end mb-4',
-                        props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                        props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                 }, slots.icon && slots.icon()),
             (props.value || slots.value) &&
@@ -16026,7 +14344,7 @@ const CWidgetStatsC = vue.defineComponent({
                 vue.h('div', {
                     class: [
                         'text-uppercase fw-semibold small',
-                        props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                        props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                 }, {
                     default: () => (slots.title && slots.title()) || props.title,
@@ -16089,7 +14407,7 @@ const CWidgetStatsD = vue.defineComponent({
                             vue.h(CCol, {}, {
                                 default: () => [
                                     vue.h(CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
-                                    vue.h(CCol, { class: 'text-uppercase text-medium-emphasis small' }, () => value.title),
+                                    vue.h(CCol, { class: 'text-uppercase text-body-secondary small' }, () => value.title),
                                 ],
                             }),
                         ]),
@@ -16125,7 +14443,7 @@ const CWidgetStatsE = vue.defineComponent({
         }, () => [
             (props.title || slots.title) &&
                 vue.h('div', {
-                    class: 'text-muted small text-uppercase font-weight-bold',
+                    class: 'text-body-secondary small text-uppercase font-weight-bold',
                 }, {
                     default: () => (slots.title && slots.title()) || props.title,
                 }),
@@ -16201,7 +14519,7 @@ const CWidgetStatsF = vue.defineComponent({
                             }),
                         (props.title || slots.title) &&
                             vue.h('div', {
-                                class: 'text-medium-emphasis text-uppercase fw-semibold small',
+                                class: 'text-body-secondary text-uppercase fw-semibold small',
                             }, {
                                 default: () => (slots.title && slots.title()) || props.title,
                             }),
@@ -16360,6 +14678,7 @@ var Components = /*#__PURE__*/Object.freeze({
     CProgress: CProgress,
     CProgressBar: CProgressBar,
     CProgressPlugin: CProgressPlugin,
+    CProgressStacked: CProgressStacked,
     CRow: CRow,
     CSidebar: CSidebar,
     CSidebarBrand: CSidebarBrand,
@@ -16752,6 +15071,7 @@ exports.CPopoverPlugin = CPopoverPlugin;
 exports.CProgress = CProgress;
 exports.CProgressBar = CProgressBar;
 exports.CProgressPlugin = CProgressPlugin;
+exports.CProgressStacked = CProgressStacked;
 exports.CRow = CRow;
 exports.CSidebar = CSidebar;
 exports.CSidebarBrand = CSidebarBrand;
@@ -16799,6 +15119,7 @@ exports.CWidgetStatsF = CWidgetStatsF;
 exports.CWidgetsStatsPlugin = CWidgetsStatsPlugin;
 exports.default = CoreuiVue;
 exports.useColorModes = useColorModes;
+exports.useDebouncedCallback = useDebouncedCallback;
 exports.usePopper = usePopper;
 exports.vcplaceholder = vCPlaceholder;
 exports.vcpopover = vCPopover;