@adyen/bento-mcp 0.5.3 → 0.5.4

package/dist/assets/components/list/list.stories.ts

@@ -1 +1 @@
-import { BentoButton } from '@/components/button'; import { BentoToggle } from '@/components/toggle'; import BentoList from './list.vue'; import BentoListItem from './components/list-item/list-item.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import ListDefault from './__tests__/list-default.vue?raw'; import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'List', component: BentoList, argTypes: { type: { options: ['unordered', 'ordered'], control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoList>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoList, BentoListItem, BentoButton, BentoToggle }, props: Object.keys(argTypes), template: ` <bento-list v-bind="args"> <bento-list-item label="Payment details" description="Updated 2 hours ago" :tag="{ label: 'Live', variant: 'green' }" show-bottom-divider > <template #start> <bento-toggle aria-label="Payment details" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> <bento-list-item label="Payout settings" description="Updated yesterday" :tag="{ label: 'Review', variant: 'orange' }" show-bottom-divider > <template #start> <bento-toggle aria-label="Payout settings" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> <bento-list-item label="Risk configuration" description="Updated 3 days ago" :tag="{ label: 'Draft', variant: 'grey' }" > <template #start> <bento-toggle aria-label="Risk configuration" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> </bento-list> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { type: 'unordered', }, parameters: storybookDocsParameter(ListDefault), }; 
+import { ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { BentoButton } from '@/components/button'; import { BentoToggle } from '@/components/toggle'; import BentoList from './list.vue'; import BentoListItem from './components/list-item/list-item.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import ListDefault from './__tests__/list-default.vue?raw'; import ListEverythingBagel from './__tests__/list-everything-bagel.vue?raw'; import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'List', component: BentoList, argTypes: { type: { options: ['unordered', 'ordered'], control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoList>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoList, BentoListItem, BentoButton, BentoToggle }, props: Object.keys(argTypes), template: ` <bento-list v-bind="args"> <bento-list-item label="Payment details" description="Updated 2 hours ago" :tag="{ label: 'Live', variant: 'green' }" show-bottom-divider > <template #start> <bento-toggle aria-label="Payment details" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> <bento-list-item label="Payout settings" description="Updated yesterday" :tag="{ label: 'Review', variant: 'orange' }" show-bottom-divider > <template #start> <bento-toggle aria-label="Payout settings" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> <bento-list-item label="Risk configuration" description="Updated 3 days ago" :tag="{ label: 'Draft', variant: 'grey' }" > <template #start> <bento-toggle aria-label="Risk configuration" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> </bento-list> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { type: 'unordered', }, parameters: storybookDocsParameter(ListDefault), }; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoList, BentoListItem, BentoButton, BentoToggle }, props: Object.keys(argTypes), template: ` <bento-list v-bind="args" @reorder="onReorder"> <bento-list-item v-for="item in items" :key="item.id" :label="item.label" :description="item.description" :tag="item.tag" :show-status="item.showStatus" :status-color="item.statusColor" :draggable-options="item.draggableOptions" show-bottom-divider > <template v-if="item.showToggle" #start> <bento-toggle :aria-label="item.label" /> </template> <template v-if="item.showEdit" #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> </bento-list> `, setup(props) { const items = ref([ { id: 'payment', label: 'Payment details', description: 'Updated 2 hours ago', tag: { label: 'Live', variant: 'green' }, showStatus: true, statusColor: 'green', showToggle: true, showEdit: true, }, { id: 'payout', label: 'Payout settings', description: 'Updated yesterday', tag: { label: 'Review', variant: 'orange' }, showStatus: true, statusColor: 'orange', showToggle: true, showEdit: true, }, { id: 'risk', label: 'Risk configuration', description: 'Updated 3 days ago', tag: { label: 'Draft', variant: 'grey' }, showStatus: true, }, { id: 'compliance', label: 'Compliance check', description: 'Locked by admin', draggableOptions: { disabled: true }, }, ]); const reorderAction = action('reorder'); const onReorder = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => { const updated = [...items.value]; const [moved] = updated.splice(oldIndex, 1); updated.splice(newIndex, 0, moved); items.value = updated; reorderAction({ oldIndex, newIndex, order: updated.map(i => i.label) }); }; return { args: isVue2 ? props : _args, items, onReorder, }; }, }), args: { type: 'unordered', draggable: true, draggableOptions: { animation: 150 }, }, parameters: storybookDocsParameter(ListEverythingBagel), }; 

package/dist/assets/components/list/list.types.ts

@@ -1 +1 @@
-export type BentoListType = 'unordered' | 'ordered'; export interface BentoListProps { /** * Defines if the list should render as unordered (`ul`) or ordered (`ol`). * @values unordered, ordered */ type?: BentoListType; } 
+import type { BentoDraggableOptions } from '@/components/draggable/draggable.types'; export type BentoListType = 'unordered' | 'ordered'; export interface BentoListProps { /** * Defines if the list should render as unordered (`ul`) or ordered (`ol`). * @values unordered, ordered */ type?: BentoListType; /** * Enables drag-and-drop reordering for list items. * Requires rendering `BentoDraggableHandle` inside each item. */ draggable?: boolean; /** * Drag options forwarded to draggable behavior. */ draggableOptions?: BentoDraggableOptions & { dragAnnouncement?: string | 'disabled' }; } 

package/dist/assets/components/list/list.vue

@@ -1 +1 @@
-<template> <component :is="listElement" class="b-list"> <slot /> </component> </template> <script setup lang="ts"> import { computed } from 'vue'; import type { BentoListProps } from './list.types'; const props = withDefaults(defineProps<BentoListProps>(), { type: 'unordered', }); const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul')); </script> <script lang="ts"> /** * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows. * * @example * import { BentoList, BentoListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoList, BentoListItem }, * template: ` * <bento-list> * <bento-list-item * label="Payment details" * description="Updated 2 hours ago" * :tag="{ label: 'Live', variant: 'green' }" * show-bottom-divider * /> * <bento-list-item * label="Risk configuration" * description="Updated yesterday" * :tag="{ label: 'Review', variant: 'orange' }" * /> * </bento-list> * ` * } */ export default { name: 'bento-list', }; </script> <style lang="scss" scoped src="./list.scss" /> 
+<template> <div class="b-list"> <component :is="listElement" ref="listRef" v-bind="$attrs" class="b-list__list"> <slot /> </component> <div v-if="isDraggable" class="b-list__announcement" role="status" aria-live="polite"> {{ announcementMessage }} </div> </div> </template> <script setup lang="ts"> import { useMutationObserver } from '@vueuse/core'; import { computed, provide, ref, watch } from 'vue'; import { useBentoDraggable } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable'; import { useDraggableAnnouncement } from '@/components/draggable/composables/use-draggable-announcement/use-draggable-announcement'; import type { BentoDraggableOptions, BentoDraggableSortableEvent } from '@/components/draggable/draggable.types'; import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from './list.keys'; import type { BentoListDraggableContext } from './list.keys'; import type { BentoListProps } from './list.types'; // used for announcement composable import draggableMessages from '@/components/draggable/composables/use-draggable-announcement/messages.json'; const ITEM_SELECTOR = '.b-list-item'; const props = withDefaults(defineProps<BentoListProps>(), { type: 'unordered', draggable: false, draggableOptions: () => ({}), }); const emit = defineEmits<{ /** * Emitted after items are reordered, with the old and new indices. */ (e: 'reorder', value: { oldIndex: number; newIndex: number }): void; }>(); const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul')); const listRef = ref<HTMLElement | null>(null); const listItems = ref<Array<HTMLElement>>([]); const isDraggable = computed(() => props.draggable); const getListItems = (): Array<HTMLElement> => listRef.value ? (Array.from(listRef.value.children).filter(child => child.matches(ITEM_SELECTOR)) as Array<HTMLElement>) : []; const syncListItems = () => { listItems.value = getListItems(); }; watch( listRef, newElement => { if (!newElement) { listItems.value = []; return; } syncListItems(); }, { immediate: true } ); useMutationObserver(listRef, syncListItems, { childList: true }); const getItemIndex = (el: HTMLElement | null) => (el ? listItems.value.indexOf(el) : -1); const getItemLabel = (el: HTMLElement | null, fallbackIndex: number) => el?.querySelector('[data-list-item-label]')?.textContent?.trim() || `List item ${fallbackIndex + 1}`; const announceMoveAt = (fromIndex: number, toIndex: number) => { if (!isDraggable.value) { return; } const items = getListItems(); announceMove({ itemLabel: getItemLabel(items[toIndex] ?? null, toIndex), fromIndex, toIndex, total: items.length, announcement: props.draggableOptions?.dragAnnouncement, }); }; const moveItemDOM = (fromIndex: number, toIndex: number) => { const items = getListItems(); const itemToMove = items[fromIndex]; const targetItem = items[toIndex]; if (fromIndex < toIndex) { listRef.value!.insertBefore(itemToMove, targetItem.nextSibling); } else { listRef.value!.insertBefore(itemToMove, targetItem); } syncListItems(); announceMoveAt(fromIndex, toIndex); emit('reorder', { oldIndex: fromIndex, newIndex: toIndex }); }; const computedDraggableOptions = computed<BentoDraggableOptions>(() => ({ ...props.draggableOptions, onSort: (event: BentoDraggableSortableEvent) => { syncListItems(); if (event.oldIndex !== undefined && event.newIndex !== undefined) { announceMoveAt(event.oldIndex, event.newIndex); emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex }); } props.draggableOptions?.onSort?.(event); }, })); const { announcementMessage, announceMove } = useDraggableAnnouncement(); const { moveItemUp, moveItemDown, moveItemTop, moveItemBottom, getDisabledMenus } = useBentoDraggable( listRef, computedDraggableOptions, { getItemCount: () => listItems.value.length, getItemIndex, onMoveItem: moveItemDOM, } ); provide<BentoListDraggableContext>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, { isDraggable, moveItemUp, moveItemDown, moveItemTop, moveItemBottom, getDisabledMenus, }); </script> <script lang="ts"> /** * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows. * * @example * import { BentoList, BentoListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoList, BentoListItem }, * template: ` * <bento-list> * <bento-list-item * label="Payment details" * description="Updated 2 hours ago" * :tag="{ label: 'Live', variant: 'green' }" * show-bottom-divider * /> * <bento-list-item * label="Risk configuration" * description="Updated yesterday" * :tag="{ label: 'Review', variant: 'orange' }" * /> * </bento-list> * ` * } */ export default { name: 'bento-list', inheritAttrs: false, i18n: { messages: draggableMessages }, }; </script> <style lang="scss" scoped src="./list.scss" /> 

package/dist/assets/components/popover/popover.docs.mdx

@@ -71,13 +71,17 @@ Bind the handlers on the trigger via `v-on="hoverEvents"`:
 When the popover is **NOT** a descendant of the trigger element (for example, rendered as a sibling or teleported
 elsewhere in the DOM), also bind `hoverEvents` on the popover so that hovering or focusing its content keeps it open:
 
+For hover-triggered popovers, pass `disable-focus-trap`. A focus trap can move focus back into the popover while the
+delayed hover handlers are trying to close it, which can cause unexpected open/close behavior when multiple
+hover-triggered popovers are present.
+
 <Source
     format={'html'}
     dark
     code={`
 <span ref="triggerRef" v-on="hoverEvents">Hover me</span>
 
-<bento-popover v-on="hoverEvents" :open="isOpen" :target-element="triggerRef">
+<bento-popover v-on="hoverEvents" :open="isOpen" :target-element="triggerRef" disable-focus-trap>
     Popover content
 </bento-popover>
     `}

package/dist/assets/components/summary-grid/summary-grid.vue

@@ -1 +1 @@
-<template> <div class="b-summary-grid"> <grid-layout v-for="index in numberOfRows" :key="`summary-grid-row-${index}`" :data-testid="`summary-grid-row-${index}`" :column-width="columnWidth?.[`row${index}`]" > <template v-if="hasSlot(`cell-${index}-1`)" #col-1> <slot :name="`cell-${index}-1`" /> </template> <template v-if="hasSlot(`cell-${index}-2`)" #col-2> <slot :name="`cell-${index}-2`" /> </template> <template v-if="hasSlot(`cell-${index}-3`)" #col-3> <slot :name="`cell-${index}-3`" /> </template> <template v-if="hasSlot(`cell-${index}-4`)" #col-4> <slot :name="`cell-${index}-4`" /> </template> <template v-if="hasSlot(`cell-${index}-5`)" #col-5> <slot :name="`cell-${index}-5`" /> </template> <template v-if="hasSlot(`cell-${index}-6`)" #col-6> <slot :name="`cell-${index}-6`" /> </template> </grid-layout> </div> </template> <script setup lang="ts"> import { onMounted, provide, toRef, useSlots } from 'vue'; import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types'; import { GridLayout } from '@/components/internal'; import { useHasSlot } from '@/composables'; import { SUMMARY_GRID_LAYOUT_INJECTION_KEY, SUMMARY_GRID_SLASHED_ZERO, } from '@/components/summary-grid/summary-grid.keys'; const props = withDefaults(defineProps<BentoSummaryGridProps>(), { columnWidth: null, slashedZero: false, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); let numberOfRows = 1; if (slots) { const slotRows = Object.keys(slots) ?.filter(slotName => slotName.includes('cell-')) ?.map(slotName => parseInt(slotName.split('-')?.[1], 10)); numberOfRows = Math.max(...slotRows); } onMounted(() => { if (numberOfRows > 3) { throw new Error( 'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.' ); } }); const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => { const isSummaryGridLayout = true; return { isSummaryGridLayout }; }; provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid); provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero')); </script> <script lang="ts"> /** * A summary grid component that displays a collection items. * * @example * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGrid, BentoSummaryGridItemAmount }, * template: ` * <bento-summary-grid> * <template #cell-2-2> * <bento-summary-grid-item-amount * title="Text Item" * label="14" * info-icon-tooltip-text="text for icon" * copy="copy this to clipboard" * /> * </template> * </bento-summary-grid> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./summary-grid.scss" /> 
+<template> <div class="b-summary-grid"> <grid-layout v-for="index in numberOfRows" :key="`summary-grid-row-${index}`" :data-testid="`summary-grid-row-${index}`" :column-width="columnWidth?.[`row${index}`]" > <template v-if="hasSlot(`cell-${index}-1`)" #col-1> <slot :name="`cell-${index}-1`" /> </template> <template v-if="hasSlot(`cell-${index}-2`)" #col-2> <slot :name="`cell-${index}-2`" /> </template> <template v-if="hasSlot(`cell-${index}-3`)" #col-3> <slot :name="`cell-${index}-3`" /> </template> <template v-if="hasSlot(`cell-${index}-4`)" #col-4> <slot :name="`cell-${index}-4`" /> </template> <template v-if="hasSlot(`cell-${index}-5`)" #col-5> <slot :name="`cell-${index}-5`" /> </template> <template v-if="hasSlot(`cell-${index}-6`)" #col-6> <slot :name="`cell-${index}-6`" /> </template> </grid-layout> </div> </template> <script setup lang="ts"> import { onMounted, provide, toRef, useSlots } from 'vue'; import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types'; import { GridLayout } from '@/components/internal/grid-layout'; import { useHasSlot } from '@/composables'; import { SUMMARY_GRID_LAYOUT_INJECTION_KEY, SUMMARY_GRID_SLASHED_ZERO, } from '@/components/summary-grid/summary-grid.keys'; const props = withDefaults(defineProps<BentoSummaryGridProps>(), { columnWidth: null, slashedZero: false, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); let numberOfRows = 1; if (slots) { const slotRows = Object.keys(slots) ?.filter(slotName => slotName.includes('cell-')) ?.map(slotName => parseInt(slotName.split('-')?.[1], 10)); numberOfRows = Math.max(...slotRows); } onMounted(() => { if (numberOfRows > 3) { throw new Error( 'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.' ); } }); const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => { const isSummaryGridLayout = true; return { isSummaryGridLayout }; }; provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid); provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero')); </script> <script lang="ts"> /** * A summary grid component that displays a collection items. * * @example * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGrid, BentoSummaryGridItemAmount }, * template: ` * <bento-summary-grid> * <template #cell-2-2> * <bento-summary-grid-item-amount * title="Text Item" * label="14" * info-icon-tooltip-text="text for icon" * copy="copy this to clipboard" * /> * </template> * </bento-summary-grid> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./summary-grid.scss" /> 

package/dist/assets/components/tabs/tabs.docs.mdx

@@ -23,12 +23,17 @@ page. Selecting another tab replaces content with the new tab’s content.
 
 ## Variations
 
+<Canvas of={TabsStories.EverythingBagel} />
+
 ### Notification indicators
 
 If there’s something requiring user attention, the tab gets a blue notification dot. To set/unset this notification dot,
 set the `withNotificationIndicator` prop to `true` or `false` for the designated `bento-tab`.
 
-<Canvas of={TabsStories.WithNotificationIndicator} />
+### Error counter
+
+To display an error count alongside a tab title, use the `error-counter` prop on `bento-tab`. This renders a red tag
+with an error icon and the given count. It is useful for signalling validation errors or issues within a tab's content.
 
 ## Modifiers
 

package/dist/assets/composables/use-bento-delayed-hover/use-bento-delayed-hover.docs.mdx

@@ -31,6 +31,10 @@ Bind `hoverEvents` on the trigger element:
 When the content is **not** a descendant of the trigger (e.g. rendered as a sibling or teleported elsewhere in the DOM),
 also bind `hoverEvents` on a wrapper around the content so that hovering or focusing it cancels the pending close:
 
+When the content is a `bento-popover`, always pass `disable-focus-trap`. A focus trap can move focus back into the
+popover while the delayed hover handlers are trying to close it, which can make multiple hover-triggered popovers appear
+to reopen or close each other unexpectedly.
+
 <Source
     format={'html'}
     dark
@@ -38,7 +42,7 @@ also bind `hoverEvents` on a wrapper around the content so that hovering or focu
 <span ref="triggerRef" v-on="hoverEvents">Hover me</span>
 
 <span v-on="hoverEvents">
-    <bento-popover :open="isOpen" :target-element="triggerRef">
+    <bento-popover :open="isOpen" :target-element="triggerRef" disable-focus-trap>
         Popover content
     </bento-popover>
 </span>

package/dist/assets/deprecations.md

@@ -45,19 +45,35 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/textarea/textarea.vue-                BentoTextarea value property
-- ../vue2/src/components/textarea/textarea.vue-                `The use of value prop in BentoTextarea is no longer supported.
-- ../vue2/src/components/textarea/textarea.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/textarea/textarea.vue-                2.0.0
-- ../vue2/src/components/textarea/textarea.vue-            );
+- ../vue2/src/install.ts-                Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
+- //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
+- ../vue2/src/install.ts-                2.0.0
+- ../vue2/src/install.ts-            );
+- ../vue2/src/install.ts-            // Make sure to put all awaited CSS imports below this point and not above!
+### Deprecation Found
+
+- deprecate(Using `BentoTheme.BENTO`, Please use `BentoTheme.BENTO_LIGHT` instead, 2.0.0);
+- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
+- ../vue2/src/install.ts-        } else {
+- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
+- ../vue2/src/install.ts-        }
+- ../vue2/src/install.ts-    }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                BentoCheckboxGroup hasError property
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            <bento-checkbox-group errorMessage=Error message text />`
-- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                2.0.0
+- ../vue2/src/components/modal/modal.vue-            BentoModal overflow-visible property
+- ../vue2/src/components/modal/modal.vue-            `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
+- ../vue2/src/components/modal/modal.vue-                    Remove the overflow-visible prop from BentoModal to remove this error.`
+- ../vue2/src/components/modal/modal.vue-            2.0.0
+- ../vue2/src/components/modal/modal.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    Boolean filter BentoFilterItemType.BOOLEAN
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    2.0.0
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                );
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-            });
 ### Deprecation Found
 
 - deprecate(
@@ -85,27 +101,35 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    Boolean filter BentoFilterItemType.BOOLEAN
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    2.0.0
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                );
-- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-            });
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            BentoInputFieldPhoneNumber value property
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            2.0.0
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            BentoTimelineItem variant property
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                        <bento-timeline-item status=red />`
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            2.0.0
-- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-        );
+- ../vue2/src/components/input-field-password/input-field-password.vue-            BentoInputFieldPassword value property
+- ../vue2/src/components/input-field-password/input-field-password.vue-            `The use of value prop in BentoInputFieldPassword is no longer supported.
+- ../vue2/src/components/input-field-password/input-field-password.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field-password/input-field-password.vue-            2.0.0
+- ../vue2/src/components/input-field-password/input-field-password.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/modal/modal.vue-            BentoModal overflow-visible property
-- ../vue2/src/components/modal/modal.vue-            `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
-- ../vue2/src/components/modal/modal.vue-                    Remove the overflow-visible prop from BentoModal to remove this error.`
-- ../vue2/src/components/modal/modal.vue-            2.0.0
-- ../vue2/src/components/modal/modal.vue-        );
+- ../vue2/src/components/card/card.vue-                    BentoCard @click property
+- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
+- ../vue2/src/components/card/card.vue-                    2.0.0
+- ../vue2/src/components/card/card.vue-                );
+- ../vue2/src/components/card/card.vue-            }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/date-picker/date-picker.vue-                    BentoDatePicker value property
+- ../vue2/src/components/date-picker/date-picker.vue-                    `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
+- ../vue2/src/components/date-picker/date-picker.vue-                    2.0.0
+- ../vue2/src/components/date-picker/date-picker.vue-                );
+- ../vue2/src/components/date-picker/date-picker.vue-            }
 ### Deprecation Found
 
 - deprecate(
@@ -117,67 +141,89 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-picker/date-picker.vue-                    BentoDatePicker value property
-- ../vue2/src/components/date-picker/date-picker.vue-                    `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
-- ../vue2/src/components/date-picker/date-picker.vue-                    2.0.0
-- ../vue2/src/components/date-picker/date-picker.vue-                );
-- ../vue2/src/components/date-picker/date-picker.vue-            }
+- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown error property
+- ../vue2/src/components/dropdown/dropdown.vue-            `Use the BentoDropdown errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/dropdown/dropdown.vue-                            Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/dropdown/dropdown.vue-                            <bento-dropdown errorMessage=Error message text />`
+- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
+### Deprecation Found
+
+- deprecate(BentoDropdown size property, `Do not use. Only default size should be used.`, 2.0.0);
+- ../vue2/src/components/dropdown/dropdown.vue-    }
+- ../vue2/src/components/dropdown/dropdown.vue-
+- ../vue2/src/components/dropdown/dropdown.vue-    if (props.value) {
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/country/country.vue-            BentoCountry custom variant and label prop
-- ../vue2/src/components/country/country.vue-            Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
-- ../vue2/src/components/country/country.vue-            2.0.0
-- ../vue2/src/components/country/country.vue-        );
-- ../vue2/src/components/country/country.vue-    }
+- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown value property
+- ../vue2/src/components/dropdown/dropdown.vue-            `The use of value prop in BentoDropdown is no longer supported.
+- ../vue2/src/components/dropdown/dropdown.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
+- ../vue2/src/components/dropdown/dropdown.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker hasActions property
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                        This will be the default behavior in the v2 and hasActions will be removed.`
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            BentoDropdownPaymentMethod value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker value property
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
-- ../vue2/src/components/date-range-picker/date-range-picker.vue-        }
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            BentoDropdownAvatar value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            `The use of value prop in BentoDropdownAvatar is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/card/card.vue-                    BentoCard @click property
-- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
-- ../vue2/src/components/card/card.vue-                    2.0.0
-- ../vue2/src/components/card/card.vue-                );
-- ../vue2/src/components/card/card.vue-            }
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            BentoDropdownTag value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            `The use of value prop in BentoDropdownTag is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            BentoInputFieldPhoneNumber value property
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            2.0.0
-- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-        );
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry custom variant and items prop label key
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-    }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/currency/currency.vue-                BentoCurrency default slot
-- ../vue2/src/components/currency/currency.vue-                `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
-- ../vue2/src/components/currency/currency.vue-                Use the value property instead.
-- value=12345.67 currency=USD major-units=false />`
-- ../vue2/src/components/currency/currency.vue-                2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            `The use of value prop in BentoDropdownCountry is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
 ### Deprecation Found
 
 - deprecate(
-- The property \`label\` will always be rendered by default.`
-- ../vue2/src/components/internal/controls-group/controls-group.vue-            `After version 2.0.0, the label will be shown by default.
-- hide-label=true\`.  Up until version 2.0.0, to display the label set \`hide-label=false\`.
-- ../vue2/src/components/internal/controls-group/controls-group.vue-            \`label\` will always be rendered when \`description\` is passed alongside with \`label\``
-- ../vue2/src/components/internal/controls-group/controls-group.vue-            `2.0.0`
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            BentoDropdownCurrency value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            `The use of value prop in BentoDropdownCurrency is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-        );
+### Deprecation Found
+
+- deprecate(
+- string | Array<string> | File | Array<File>
+- ../vue2/src/components/file-uploader/file-uploader.vue-                Use FileList instead.
+- ../vue2/src/components/file-uploader/file-uploader.vue-                2.0.0
+- ../vue2/src/components/file-uploader/file-uploader.vue-            );
+- ../vue2/src/components/file-uploader/file-uploader.vue-        }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            BentoTimelineItem variant property
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                        <bento-timeline-item status=red />`
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            2.0.0
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-        );
 ### Deprecation Found
 
 - deprecate(
@@ -204,30 +250,6 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/input-field/input-field.vue-        );
 ### Deprecation Found
 
-- deprecate(
-- ../vue2/src/components/radio-group/radio-group.vue-            BentoRadioGroup hasError property
-- ../vue2/src/components/radio-group/radio-group.vue-            `Use the BentoRadioGroup errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/radio-group/radio-group.vue-                    Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/radio-group/radio-group.vue-                    <bento-radio-group errorMessage=Error message text />`
-- ../vue2/src/components/radio-group/radio-group.vue-            2.0.0
-### Deprecation Found
-
-- deprecate(
-- string | Array<string> | File | Array<File>
-- ../vue2/src/components/file-uploader/file-uploader.vue-                Use FileList instead.
-- ../vue2/src/components/file-uploader/file-uploader.vue-                2.0.0
-- ../vue2/src/components/file-uploader/file-uploader.vue-            );
-- ../vue2/src/components/file-uploader/file-uploader.vue-        }
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
-- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
-- ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
-- ../vue2/src/components/sidepanel/sidepanel.vue-        );
-- ../vue2/src/components/sidepanel/sidepanel.vue-    }
-### Deprecation Found
-
 - deprecate(
 - ../vue2/src/components/inspector/inspector.vue-            BentoInspector active-page as optional
 - active-page.
@@ -237,94 +259,72 @@ This file contains a list of all deprecated components, properties, and features
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            BentoDropdownAvatar value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            `The use of value prop in BentoDropdownAvatar is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-        );
-### Deprecation Found
-
-- deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            BentoDropdownTag value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            `The use of value prop in BentoDropdownTag is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-        );
+- ../vue2/src/components/textarea/textarea.vue-                BentoTextarea value property
+- ../vue2/src/components/textarea/textarea.vue-                `The use of value prop in BentoTextarea is no longer supported.
+- ../vue2/src/components/textarea/textarea.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/textarea/textarea.vue-                2.0.0
+- ../vue2/src/components/textarea/textarea.vue-            );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry custom variant and items prop label key
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-    }
+- ../vue2/src/components/country/country.vue-            BentoCountry custom variant and label prop
+- ../vue2/src/components/country/country.vue-            Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
+- ../vue2/src/components/country/country.vue-            2.0.0
+- ../vue2/src/components/country/country.vue-        );
+- ../vue2/src/components/country/country.vue-    }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            `The use of value prop in BentoDropdownCountry is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
+- ../vue2/src/components/radio-group/radio-group.vue-            BentoRadioGroup hasError property
+- ../vue2/src/components/radio-group/radio-group.vue-            `Use the BentoRadioGroup errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/radio-group/radio-group.vue-                    Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/radio-group/radio-group.vue-                    <bento-radio-group errorMessage=Error message text />`
+- ../vue2/src/components/radio-group/radio-group.vue-            2.0.0
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            BentoDropdownPaymentMethod value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-        );
+- ../vue2/src/components/currency/currency.vue-                BentoCurrency default slot
+- ../vue2/src/components/currency/currency.vue-                `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
+- ../vue2/src/components/currency/currency.vue-                Use the value property instead.
+- value=12345.67 currency=USD major-units=false />`
+- ../vue2/src/components/currency/currency.vue-                2.0.0
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            BentoDropdownCurrency value property
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            `The use of value prop in BentoDropdownCurrency is no longer supported.
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            2.0.0
-- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-        );
+- The property \`label\` will always be rendered by default.`
+- ../vue2/src/components/internal/controls-group/controls-group.vue-            `After version 2.0.0, the label will be shown by default.
+- hide-label=true\`.  Up until version 2.0.0, to display the label set \`hide-label=false\`.
+- ../vue2/src/components/internal/controls-group/controls-group.vue-            \`label\` will always be rendered when \`description\` is passed alongside with \`label\``
+- ../vue2/src/components/internal/controls-group/controls-group.vue-            `2.0.0`
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown error property
-- ../vue2/src/components/dropdown/dropdown.vue-            `Use the BentoDropdown errorMessage property instead to indicate that there is a modifier error.
-- ../vue2/src/components/dropdown/dropdown.vue-                            Having the field as undefined will hide/remove the error.
-- ../vue2/src/components/dropdown/dropdown.vue-                            <bento-dropdown errorMessage=Error message text />`
-- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
-### Deprecation Found
-
-- deprecate(BentoDropdown size property, `Do not use. Only default size should be used.`, 2.0.0);
-- ../vue2/src/components/dropdown/dropdown.vue-    }
-- ../vue2/src/components/dropdown/dropdown.vue-
-- ../vue2/src/components/dropdown/dropdown.vue-    if (props.value) {
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker hasActions property
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                        This will be the default behavior in the v2 and hasActions will be removed.`
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown value property
-- ../vue2/src/components/dropdown/dropdown.vue-            `The use of value prop in BentoDropdown is no longer supported.
-- ../vue2/src/components/dropdown/dropdown.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
-- ../vue2/src/components/dropdown/dropdown.vue-        );
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker value property
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-        }
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/components/input-field-password/input-field-password.vue-            BentoInputFieldPassword value property
-- ../vue2/src/components/input-field-password/input-field-password.vue-            `The use of value prop in BentoInputFieldPassword is no longer supported.
-- ../vue2/src/components/input-field-password/input-field-password.vue-                Use the v-model or model-value property instead.`
-- ../vue2/src/components/input-field-password/input-field-password.vue-            2.0.0
-- ../vue2/src/components/input-field-password/input-field-password.vue-        );
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                BentoCheckboxGroup hasError property
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            <bento-checkbox-group errorMessage=Error message text />`
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                2.0.0
 ### Deprecation Found
 
 - deprecate(
-- ../vue2/src/install.ts-                Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
-- //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
-- ../vue2/src/install.ts-                2.0.0
-- ../vue2/src/install.ts-            );
-- ../vue2/src/install.ts-            // Make sure to put all awaited CSS imports below this point and not above!
-### Deprecation Found
-
-- deprecate(Using `BentoTheme.BENTO`, Please use `BentoTheme.BENTO_LIGHT` instead, 2.0.0);
-- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
-- ../vue2/src/install.ts-        } else {
-- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
-- ../vue2/src/install.ts-        }
-- ../vue2/src/install.ts-    }
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
+- ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
+- ../vue2/src/components/sidepanel/sidepanel.vue-        );
+- ../vue2/src/components/sidepanel/sidepanel.vue-    }