@adyen/bento-vue2 1.73.0 → 1.74.0

package/dist/@types/index.d.ts

@@ -8,7 +8,6 @@ import { ComputedRef } from 'vue';
 import { CountryCode } from 'libphonenumber-js/types';
 import { CountryCode as CountryCode_2 } from 'libphonenumber-js';
 import { DeepReadonly } from 'vue';
-import { default as default_2 } from 'vue-i18n';
 import { DefaultKeys } from 'vue/types/v3-component-props';
 import { DefineComponent } from 'vue';
 import { DirectiveBinding } from 'vue';
@@ -132,8 +131,22 @@ declare type __VLS_NonUndefinedable_54<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_55<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_56<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_57<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_58<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_59<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_6<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_60<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_61<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_62<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_7<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_8<T> = T extends undefined ? never : T;
@@ -599,6 +612,42 @@ declare type __VLS_TypePropsToRuntimeProps_55<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_56<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_56<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_57<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_57<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_58<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_58<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_59<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_59<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_6<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable_6<T[K]>>;
@@ -608,6 +657,33 @@ declare type __VLS_TypePropsToRuntimeProps_6<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_60<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_60<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_61<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_61<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_62<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_62<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_7<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable_7<T[K]>>;
@@ -923,6 +999,48 @@ declare type __VLS_WithDefaults_52<P, D> = {
     } : P[K];
 };
 
+declare type __VLS_WithDefaults_53<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
+declare type __VLS_WithDefaults_54<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
+declare type __VLS_WithDefaults_55<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
+declare type __VLS_WithDefaults_56<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
+declare type __VLS_WithDefaults_57<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
+declare type __VLS_WithDefaults_58<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
+declare type __VLS_WithDefaults_59<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+
 declare type __VLS_WithDefaults_6<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
@@ -1247,6 +1365,18 @@ declare type __VLS_WithTemplateSlots_54<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_55<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_56<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_6<T, S> = T & {
     new (): {
         $slots: S;
@@ -1280,7 +1410,19 @@ export declare type allKeys<T> = T extends any ? keyof T : never;
 /**
  * Any function
  */
-export declare type AnyFn<T> = (...args: T[]) => T;
+export declare type AnyFn<T> = (...args: Array<T>) => T;
+
+/**
+ * Private
+ */
+declare enum BaseFilterEvent {
+    APPLY = "apply",
+    CLEAR = "clear",
+    OPEN = "open",
+    CLOSE = "close",
+    RESET = "reset",
+    CANCEL = "cancel"
+}
 
 declare interface BaseSummaryGridItemProps {
     /**
@@ -1606,7 +1748,7 @@ declare interface BentoActionButton extends BentoButtonActionBase, BentoButtonPr
 /**
  * Type for the Menus passed as objects to Button Actions
  */
-declare type BentoActionMenu = BentoButtonActionBase & OmitStrict_2<BentoMenuProps, 'button' | 'data'> & Partial<Pick<BentoMenuProps, 'data'>>;
+declare type BentoActionMenu = BentoButtonActionBase & OmitStrict<BentoMenuProps, 'button' | 'data'> & Partial<Pick<BentoMenuProps, 'data'>>;
 
 /**
  * AI Button component is used for cases where pressing a button starts an AI-related action.
@@ -1822,64 +1964,344 @@ export declare type BentoAvatarListboxOptionItem = Omit<BentoListboxOptionItem,
     src?: string;
 };
 
-export declare type BentoAvatarListboxOptions = BentoAvatarListboxOptionItem[];
+export declare type BentoAvatarListboxOptions = Array<BentoAvatarListboxOptionItem>;
 
-export declare type BentoBooleanFilterOption = {
-    label: string;
-    value: string | boolean;
-};
+export declare const BentoBaseFilter: __VLS_WithTemplateSlots_14<DefineComponent<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_25<BentoBaseFilterProps_2<BentoFilterBarValue, string>>, {
+appliedFiltersCount: any;
+buttonLabel: any;
+buttonSecondaryLabel: any;
+disabled: boolean;
+defaultValue: any;
+onlySlot: boolean;
+controlled: boolean;
+disableApplyButton: boolean;
+disableSecondaryButton: boolean;
+fitContent: any;
+tooltipText: any;
+tooltipPosition: any;
+value: any;
+}>, {
+closePopover: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BaseFilterEvent[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_25<BentoBaseFilterProps_2<BentoFilterBarValue, string>>, {
+appliedFiltersCount: any;
+buttonLabel: any;
+buttonSecondaryLabel: any;
+disabled: boolean;
+defaultValue: any;
+onlySlot: boolean;
+controlled: boolean;
+disableApplyButton: boolean;
+disableSecondaryButton: boolean;
+fitContent: any;
+tooltipText: any;
+tooltipPosition: any;
+value: any;
+}>>>, {
+value: BentoFilterBarValue;
+disabled: boolean;
+fitContent: boolean;
+tooltipPosition: `${BentoTooltipPosition}`;
+tooltipText: string;
+appliedFiltersCount: string | number;
+buttonLabel: string;
+buttonSecondaryLabel: string;
+defaultValue: BentoFilterBarValue;
+onlySlot: boolean;
+controlled: boolean;
+disableApplyButton: boolean;
+disableSecondaryButton: boolean;
+}>, {
+    default: (_: {}) => any;
+}>;
 
-export declare type BentoBooleanFilterOptions = {
-    positiveOption?: BentoBooleanFilterOption;
-    negativeOption?: BentoBooleanFilterOption;
-    tooltipText?: string;
-    tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;
-};
+/**
+ * Defines the mandatory emits that need to be defined by the implementation of any filter
+ *
+ * @template CustomValue Defines the type of the value being passed to the emit. Same as the type set in `BentoBaseFilterProps`
+ *
+ * @example
+ * Using the interface
+ *
+ * ```typescript
+ * import { type BentoBaseFilterEvents } from '..'
+ *
+ * defineEmits<BentoBaseFilterEvents<string>>()
+ * ```
+ *
+ * @example
+ * Using the object
+ *
+ * ```typescript
+ * import { BentoBaseFilterEvents } from '..'
+ *
+ * defineEmits(BentoBaseFilterEvents)
+ * ```
+ */
+export declare interface BentoBaseFilterEvents<CustomValue> {
+    /**
+     * Used in the All filters modal
+     */
+    (e: 'input', newFilterValue: CustomValue): void;
+    /**
+     * Used in the Filter Bar
+     */
+    (e: 'update', newFilterValue: CustomValue): void;
+}
 
-export declare type BentoBooleanFilterValue = string | null;
+export declare const BentoBaseFilterEvents: string[];
 
 /**
- * Button component for all the various types of bento buttons.
+ * Defines the props used by `bento-base-filter` that must be implemented
+ * on every filter as `defineProps`.
  *
- * @example
- * import { BentoButton } from '../..';
- * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';
+ * The interface can be extended if new values are required.
+ * The object can be extended if new values are required.
  *
- * export default {
- *     components: { BentoButton },
- *     template: `
- *         <bento-button
- *             disabled
- *             variant="secondary"
- *         >
- *              <template #iconLeft>
- *                  <check-mark svg-title="checked" />
- *              </template>
+ * @template CustomValue Defines the type of the `value` and `defaultValue` props.
+ * @template CustomOptions Defines the type of the options used by the filter (default: `undefined`).
  *
- *              Button text
+ * @example
+ * Using the interface
  *
- *              <template #iconRight>
- *                  <check-mark svg-title="checked" />
- *              </template>
- *         </bento-button>
- *     `,
+ * ```typescript
+ * import { type BentoBaseFilterProps } from '..'
+ *
+ * interface CustomOptions {
+ *      option: string;
  * }
+ *
+ * withDefaults(defineProps<BentoBaseFilterProps<string, CustomOptions>>(), {
+ *    defaultValue: undefined,
+ * })
+ * ```
+ *
+ * @example
+ * Using the object
+ *
+ * ```typescript
+ * import { BentoBaseFilterProps } from '..'
+ *
+ * defineProps({
+ *   ...BentoBaseFilterProps,
+ *   options: {
+ *      type: Object,
+ *      default: () => ({
+ *          option: null
+ *      })
+ *   }
+ * })
+ * ```
  */
-export declare const BentoButton: __VLS_WithTemplateSlots_4<DefineComponent<    {
-/**
-* Reduces sizing of button
-*/
-condensed: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays button as critical
-*/
-critical: {
-type: BooleanConstructor;
-default: boolean;
-};
+export declare interface BentoBaseFilterProps<CustomValue, CustomOptions = undefined> {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue?: CustomValue;
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: string;
+    /**
+     * Label text to be displayed
+     */
+    label: string;
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot?: boolean;
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     *   - isDateDisabled: Indicate if a date should be disabled or not
+     *   - tooltipPosition: The position of the tooltip attached to the filter button
+     *   - tooltipText: The content of the tooltip attached to the filter button
+     */
+    options?: CustomOptions;
+    /**
+     * Current value of the filter
+     */
+    value: CustomValue;
+}
+
+export declare const BentoBaseFilterProps: Readonly<{
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: {
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
+        default: any;
+    };
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /**
+     * Label text to be displayed
+     */
+    label: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The current value of the filter, used for v-model.
+     */
+    value: {
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
+        default: any;
+    };
+}>;
+
+/**
+ * Public
+ */
+declare interface BentoBaseFilterProps_2<Value, Field> {
+    /**
+     * Total count of applied filters
+     */
+    appliedFiltersCount?: string | number;
+    /**
+     * Overrides the label of the popover visibility toggle button text.
+     */
+    buttonLabel?: string;
+    /**
+     * Sets the secondary label text of the popover visibility toggle button text.
+     */
+    buttonSecondaryLabel?: string;
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue?: Value;
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot?: boolean;
+    /**
+     * Allows to handle the controls (apply/clear) from outside
+     * of the component
+     */
+    controlled?: boolean;
+    /**
+     * Disable the "apply" button
+     */
+    disableApplyButton?: boolean;
+    /**
+     * Disable the secondary button action.
+     */
+    disableSecondaryButton?: boolean;
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: Field;
+    /**
+     * Label text to be displayed
+     */
+    label: string;
+    /**
+     * Sets the size of the container to fit its content
+     */
+    fitContent?: boolean;
+    /**
+     * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.
+     */
+    tooltipText?: string;
+    /**
+     * Position the tooltip should take if space is available.
+     */
+    tooltipPosition?: `${BentoTooltipPosition}`;
+    /**
+     * The current value of the filter, used for v-model.
+     */
+    value?: Value;
+}
+
+export declare type BentoBooleanFilterOption = {
+    label: string;
+    value: string | boolean;
+};
+
+export declare type BentoBooleanFilterOptions = {
+    positiveOption?: BentoBooleanFilterOption;
+    negativeOption?: BentoBooleanFilterOption;
+    tooltipText?: string;
+    tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;
+};
+
+export declare type BentoBooleanFilterValue = string | null;
+
+/**
+ * Button component for all the various types of bento buttons.
+ *
+ * @example
+ * import { BentoButton } from '../..';
+ * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';
+ *
+ * export default {
+ *     components: { BentoButton },
+ *     template: `
+ *         <bento-button
+ *             disabled
+ *             variant="secondary"
+ *         >
+ *              <template #iconLeft>
+ *                  <check-mark svg-title="checked" />
+ *              </template>
+ *
+ *              Button text
+ *
+ *              <template #iconRight>
+ *                  <check-mark svg-title="checked" />
+ *              </template>
+ *         </bento-button>
+ *     `,
+ * }
+ */
+export declare const BentoButton: __VLS_WithTemplateSlots_4<DefineComponent<    {
+/**
+* Reduces sizing of button
+*/
+condensed: {
+type: BooleanConstructor;
+default: boolean;
+};
+/**
+* Displays button as critical
+*/
+critical: {
+type: BooleanConstructor;
+default: boolean;
+};
 /**
 * Disables button functionality
 */
@@ -2172,7 +2594,7 @@ export declare enum BentoButtonVariant {
  *     `
  * };
  */
-export declare const BentoCard: __VLS_WithTemplateSlots_12<DefineComponent<__VLS_WithDefaults_10<__VLS_TypePropsToRuntimeProps_10<{
+export declare const BentoCard: __VLS_WithTemplateSlots_10<DefineComponent<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_8<{
 /**
 * List of actions that will be used to render the buttons.
 * First element in the list will be rendered as "primary".
@@ -2247,7 +2669,7 @@ titleSize: BentoCardTitleSize;
 click: () => void;
 } & {
 expanded: (isExpanded: boolean) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_10<__VLS_TypePropsToRuntimeProps_10<{
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_8<{
 /**
 * List of actions that will be used to render the buttons.
 * First element in the list will be rendered as "primary".
@@ -2324,9 +2746,9 @@ disabled: boolean;
 background: BentoCardBackground | `${BentoCardBackground}`;
 actions: BentoButtonActionsList;
 actionsLayout: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;
+clickable: boolean;
 closed: boolean;
 expandable: boolean;
-clickable: boolean;
 }>, {
     image: (_: {}) => any;
     default: (_: {}) => any;
@@ -2483,7 +2905,7 @@ style: HTMLAttributes["style"];
 hasSlot: (name: string) => boolean;
 onChange: (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => void;
 getAriaHidden: (attributes: HTMLAttributes) => boolean | "true" | "false";
-t: (key: "required" | "optional" | "checkbox", values?: default_2.Values) => string;
+t: (key: "required" | "optional" | "checkbox", ...args: Array<any>) => string;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoCheckboxEvent[], string, Readonly<ExtractPropTypes<    {
 /**
 * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -2584,10 +3006,10 @@ tag: any;
 optional: boolean;
 readonly: boolean;
 ariaLabel: string;
-errorMessage: string;
 indeterminate: boolean;
 hasError: boolean;
 modelValue: BentoCheckboxType | BentoCheckboxGroupItems;
+errorMessage: string;
 }>;
 
 export declare enum BentoCheckboxEvent {
@@ -2869,11 +3291,11 @@ required: boolean;
 disabled: boolean;
 optional: boolean;
 readonly: boolean;
-tooltipText: string;
-hideLabel: boolean;
-errorMessage: string;
 hasError: boolean;
 modelValue: (string | number)[];
+errorMessage: string;
+tooltipText: string;
+hideLabel: boolean;
 formId: string;
 }>;
 
@@ -2930,7 +3352,7 @@ export declare type BentoCheckboxType = boolean | BentoMultiCheckboxType;
  *     `
  * }
  */
-export declare const BentoChip: DefineComponent<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_15<BentoChipProps>, {
+export declare const BentoChip: DefineComponent<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_16<BentoChipProps>, {
 disabled: boolean;
 readonly: boolean;
 error: boolean;
@@ -2938,7 +3360,7 @@ condensed: boolean;
 characterLimit: any;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: () => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_15<BentoChipProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_16<BentoChipProps>, {
 disabled: boolean;
 readonly: boolean;
 error: boolean;
@@ -3020,7 +3442,7 @@ export declare const BentoClickOutsideDirective: {
  *     `
  * }
  */
-export declare const BentoCodeSnippet: __VLS_WithTemplateSlots_13<DefineComponent<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_16<BentoCodeSnippetProps>, {
+export declare const BentoCodeSnippet: __VLS_WithTemplateSlots_12<DefineComponent<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_17<BentoCodeSnippetProps>, {
 actionable: boolean;
 actionableText: any;
 content: string;
@@ -3030,7 +3452,7 @@ lang: BentoCodeSnippetSupportedLanguage;
 langLabel: any;
 loading: boolean;
 variant: BentoCodeSnippetVariant;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoCodeSnippetEvent[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_16<BentoCodeSnippetProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoCodeSnippetEvent[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_17<BentoCodeSnippetProps>, {
 actionable: boolean;
 actionableText: any;
 content: string;
@@ -3148,7 +3570,7 @@ declare type BentoColumnCellAction = OmitStrict<BentoButtonActionObject, 'varian
     event?: BentoColumnCellActionEvent;
     isShort?: true;
     variant?: BentoColumnCellActionVariant;
-    menuData?: BentoColumnCellActionMenuItem[];
+    menuData?: Array<BentoColumnCellActionMenuItem>;
     getCopyData?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => string;
 };
 
@@ -3162,7 +3584,7 @@ declare type BentoColumnCellActionMenuItem = {
     event?: BentoColumnCellActionEvent;
 } & OmitStrict<BentoMenuItem, 'handler'>;
 
-declare type BentoColumnCellActions = BentoColumnCellAction[];
+declare type BentoColumnCellActions = Array<BentoColumnCellAction>;
 
 declare type BentoColumnCellActionsByCellDataFn = (rowDataItem: BentoDatagridDataItem, columnKey: string) => BentoColumnCellActions;
 
@@ -3185,7 +3607,7 @@ export declare interface BentoColumnWidthOverridesLookup {
  * A component to display a country's label.
  * The label comes in four variates: iso code, country name, phone number code or capital city.
  *
- * @example
+ * @usage
  * import { BentoCountry, BentoCountryCode } from '../..';
  *
  * export default {
@@ -3195,64 +3617,18 @@ export declare interface BentoColumnWidthOverridesLookup {
  *     `
  * }
  */
-export declare const BentoCountry: DefineComponent<    {
-/**
-* Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
-*/
-code: {
-type: PropType<BentoCountryCode | `${BentoCountryCode}`>;
-default: BentoCountryCode;
-validator: (value: BentoCountryCode) => boolean;
-};
-/**
-* Custom label text.
-*/
-label: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Which label variant to display.
-* @values iso, name, phone_code, capital
-*/
-variant: {
-type: PropType<BentoCountryVariant | `${BentoCountryVariant}`>;
-default: BentoCountryVariant;
-validator: (value: BentoCountryVariant) => boolean;
-};
-}, {
-countryName: ComputedRef<string>;
-countryLabel: Ref<string>;
-isSummaryGridLayout: boolean;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<    {
-/**
-* Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
-*/
-code: {
-type: PropType<BentoCountryCode | `${BentoCountryCode}`>;
-default: BentoCountryCode;
-validator: (value: BentoCountryCode) => boolean;
-};
-/**
-* Custom label text.
-*/
-label: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Which label variant to display.
-* @values iso, name, phone_code, capital
-*/
-variant: {
-type: PropType<BentoCountryVariant | `${BentoCountryVariant}`>;
-default: BentoCountryVariant;
-validator: (value: BentoCountryVariant) => boolean;
-};
-}>>, {
-code: "MM" | "BD" | "BE" | "BF" | "BG" | "BA" | "BB" | "WF" | "BL" | "BM" | "BN" | "BO" | "BH" | "BI" | "BJ" | "BT" | "JM" | "BV" | "BW" | "WS" | "BQ" | "BR" | "BS" | "JE" | "BY" | "BZ" | "RU" | "RW" | "RS" | "TL" | "RE" | "TM" | "TJ" | "RO" | "TK" | "GW" | "GU" | "GT" | "GS" | "GR" | "GQ" | "GP" | "JP" | "GY" | "GG" | "GF" | "GE" | "GD" | "GB" | "GA" | "SV" | "GN" | "GM" | "GL" | "GI" | "GH" | "OM" | "TN" | "JO" | "HR" | "HT" | "HU" | "HK" | "HN" | "HM" | "VE" | "PR" | "PS" | "PW" | "PT" | "SJ" | "PY" | "IQ" | "PA" | "PF" | "PG" | "PE" | "PK" | "PH" | "PN" | "PL" | "PM" | "ZM" | "EH" | "EE" | "EG" | "ZA" | "EC" | "IT" | "VN" | "SB" | "ET" | "SO" | "ZW" | "SA" | "ES" | "ER" | "ME" | "MD" | "MG" | "MF" | "MA" | "MC" | "UZ" | "ML" | "MO" | "MN" | "MH" | "MK" | "MU" | "MT" | "MW" | "MV" | "MQ" | "MP" | "MS" | "MR" | "IM" | "UG" | "TZ" | "MY" | "MX" | "IL" | "FR" | "IO" | "SH" | "FI" | "FJ" | "FK" | "FM" | "FO" | "NI" | "NL" | "NO" | "NA" | "VU" | "NC" | "NE" | "NF" | "NG" | "NZ" | "NP" | "NR" | "NU" | "CK" | "XK" | "CI" | "CH" | "CO" | "CN" | "CM" | "CL" | "CC" | "CA" | "CG" | "CF" | "CD" | "CZ" | "CY" | "CX" | "CR" | "CW" | "CV" | "CU" | "SZ" | "SY" | "SX" | "KG" | "KE" | "SS" | "SR" | "KI" | "KH" | "KN" | "KM" | "ST" | "SK" | "KR" | "SI" | "KP" | "KW" | "SN" | "SM" | "SL" | "SC" | "KZ" | "KY" | "SG" | "SE" | "SD" | "DO" | "DM" | "DJ" | "DK" | "VG" | "DE" | "YE" | "DZ" | "US" | "UY" | "YT" | "UM" | "LB" | "LC" | "LA" | "TV" | "TW" | "TT" | "TR" | "LK" | "LI" | "LV" | "TO" | "LT" | "LU" | "LR" | "LS" | "TH" | "TF" | "TG" | "TD" | "TC" | "LY" | "VA" | "VC" | "AE" | "AD" | "AG" | "AF" | "AI" | "VI" | "IS" | "IR" | "AM" | "AL" | "AO" | "AQ" | "AS" | "AR" | "AU" | "AT" | "AW" | "IN" | "AX" | "AZ" | "IE" | "ID" | "UA" | "QA" | "MZ" | "ZZ" | BentoCountryCode;
+export declare const BentoCountry: DefineComponent<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_18<BentoCountryProps>, {
+code: BentoCountryCode;
+label: any;
+variant: BentoCountryVariant;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_18<BentoCountryProps>, {
+code: BentoCountryCode;
+label: any;
+variant: BentoCountryVariant;
+}>>>, {
+code: BentoCountryCode | `${BentoCountryCode}`;
 label: string;
-variant: "name" | "iso" | "phone_code" | "capital" | "custom" | BentoCountryVariant;
+variant: BentoCountryVariant | `${BentoCountryVariant}`;
 }>;
 
 export declare enum BentoCountryCode {
@@ -3515,7 +3891,23 @@ export declare type BentoCountryListboxOptionItem = OmitStrict<BentoListboxOptio
     label?: string;
 };
 
-export declare type BentoCountryListboxOptions = BentoCountryListboxOptionItem[];
+export declare type BentoCountryListboxOptions = Array<BentoCountryListboxOptionItem>;
+
+export declare interface BentoCountryProps {
+    /**
+     * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
+     */
+    code?: BentoCountryCode | `${BentoCountryCode}`;
+    /**
+     * Custom label text.
+     */
+    label?: string;
+    /**
+     * Which label variant to display.
+     * @values iso, name, phone_code, capital
+     */
+    variant?: BentoCountryVariant | `${BentoCountryVariant}`;
+}
 
 /**
  * @deprecated for usage with properties since version 2.0. Use the string literal instead.
@@ -3545,13 +3937,13 @@ export declare enum BentoCountryVariant {
  *     `
  * }
  */
-export declare const BentoCurrency: DefineComponent<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_17<BentoCurrencyProps>, {
+export declare const BentoCurrency: DefineComponent<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_19<BentoCurrencyProps>, {
 currency: BentoCurrencyISOCode;
 disableTypography: boolean;
 majorUnits: boolean;
 value: any;
 currencySign: string;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_17<BentoCurrencyProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_19<BentoCurrencyProps>, {
 currency: BentoCurrencyISOCode;
 disableTypography: boolean;
 majorUnits: boolean;
@@ -3560,8 +3952,8 @@ currencySign: string;
 }>>>, {
 value: number;
 disableTypography: boolean;
-currency: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
 currencySign: Intl.NumberFormatOptions["currencySign"];
+currency: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
 majorUnits: boolean;
 }>;
 
@@ -3741,7 +4133,7 @@ export declare type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOpti
     value: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
 };
 
-export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem[];
+export declare type BentoCurrencyListboxOptions = Array<BentoCurrencyListboxOptionItem>;
 
 export declare interface BentoCurrencyProps {
     /**
@@ -3798,7 +4190,7 @@ export declare interface BentoCurrencyProps {
  *     `
  * }
  */
-export declare const BentoDashboardSection: __VLS_WithTemplateSlots_53<DefineComponent<__VLS_WithDefaults_52<__VLS_TypePropsToRuntimeProps_55<{
+export declare const BentoDashboardSection: __VLS_WithTemplateSlots_55<DefineComponent<__VLS_WithDefaults_59<__VLS_TypePropsToRuntimeProps_62<{
 /**
 * The header of the section
 */
@@ -3809,7 +4201,7 @@ header: BentoDashboardTemplateHeader;
 halfWidth?: boolean;
 }>, {
 halfWidth: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_52<__VLS_TypePropsToRuntimeProps_55<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_59<__VLS_TypePropsToRuntimeProps_62<{
 /**
 * The header of the section
 */
@@ -3857,7 +4249,7 @@ halfWidth: boolean;
  *     `
  * }
  */
-export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_52<DefineComponent<__VLS_WithDefaults_51<__VLS_TypePropsToRuntimeProps_54<{
+export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_54<DefineComponent<__VLS_WithDefaults_58<__VLS_TypePropsToRuntimeProps_61<{
 /**
 * The header that goes to the top of the template
 */
@@ -3880,7 +4272,7 @@ stickyFilters?: boolean;
 tabs: any;
 stickyTabs: boolean;
 stickyFilters: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_51<__VLS_TypePropsToRuntimeProps_54<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_58<__VLS_TypePropsToRuntimeProps_61<{
 /**
 * The header that goes to the top of the template
 */
@@ -3919,7 +4311,7 @@ export declare type BentoDashboardTemplateTab = InstanceType<typeof BentoTab>['$
 
 export declare type BentoDashboardTemplateTabs = {
     activeTabIndex?: number;
-    tabs: BentoDashboardTemplateTab[];
+    tabs: Array<BentoDashboardTemplateTab>;
 };
 
 /**
@@ -4068,7 +4460,7 @@ default: boolean;
 * Column definitions using 'key' to relate to data object.
 */
 columns: {
-type: PropType<BentoColumn[]>;
+type: PropType<Array<BentoColumn>>;
 required: true;
 };
 /**
@@ -4201,7 +4593,7 @@ default: boolean;
 * Highlighted items
 */
 highlightedRows: {
-type: PropType<BentoDatagridDataItemId[]>;
+type: PropType<Array<BentoDatagridDataItemId>>;
 default: () => any[];
 };
 /**
@@ -4300,7 +4692,7 @@ default: boolean;
 * Selected items
 */
 selection: {
-type: PropType<BentoDatagridDataItemId[]>;
+type: PropType<Array<BentoDatagridDataItemId>>;
 default: () => any[];
 };
 /**
@@ -4322,7 +4714,7 @@ default: (_item: BentoDatagridDataItem) => true;
 * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
 */
 sortBy: {
-type: PropType<BentoDatagridSortByColumn[]>;
+type: PropType<Array<BentoDatagridSortByColumn>>;
 default: () => any[];
 };
 /**
@@ -4388,7 +4780,7 @@ default: boolean;
 * Column definitions using 'key' to relate to data object.
 */
 columns: {
-type: PropType<BentoColumn[]>;
+type: PropType<Array<BentoColumn>>;
 required: true;
 };
 /**
@@ -4521,7 +4913,7 @@ default: boolean;
 * Highlighted items
 */
 highlightedRows: {
-type: PropType<BentoDatagridDataItemId[]>;
+type: PropType<Array<BentoDatagridDataItemId>>;
 default: () => any[];
 };
 /**
@@ -4620,7 +5012,7 @@ default: boolean;
 * Selected items
 */
 selection: {
-type: PropType<BentoDatagridDataItemId[]>;
+type: PropType<Array<BentoDatagridDataItemId>>;
 default: () => any[];
 };
 /**
@@ -4642,7 +5034,7 @@ default: (_item: BentoDatagridDataItem) => true;
 * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
 */
 sortBy: {
-type: PropType<BentoDatagridSortByColumn[]>;
+type: PropType<Array<BentoDatagridSortByColumn>>;
 default: () => any[];
 };
 /**
@@ -4722,17 +5114,17 @@ export declare enum BentoDatagridAriaSortValue {
     NONE = "none"
 }
 
-export declare type BentoDatagridData = BentoDatagridDataItem[];
+export declare type BentoDatagridData = Array<BentoDatagridDataItem>;
 
 export declare interface BentoDatagridDataItem {
     id?: BentoDatagridDataItemId;
-    children?: BentoDatagridDataItem[];
+    children?: Array<BentoDatagridDataItem>;
     [fieldName: string]: unknown;
 }
 
 export declare type BentoDatagridDataItemId = string | number;
 
-export declare type BentoDatagridEmptyStateProps = InstanceType<typeof BentoEmptyState>['$props'];
+export declare type BentoDatagridEmptyStateProps = BentoEmptyStateProps;
 
 export declare enum BentoDatagridEvent {
     COLUMNS = "columns",
@@ -4769,7 +5161,7 @@ declare type BentoDataGridRowActionsFn = (rowDataItem: BentoDatagridDataItem) =>
 
 declare type BentoDataGridRowActionsProp = BentoColumnCellActions | BentoDataGridRowActionsFn;
 
-export declare type BentoDatagridSelection = BentoDatagridDataItemId[];
+export declare type BentoDatagridSelection = Array<BentoDatagridDataItemId>;
 
 export declare type BentoDatagridShouldShowNestedContentFn = (item: BentoDatagridDataItem) => boolean;
 
@@ -4798,7 +5190,7 @@ export declare enum BentoDatagridSortDirection {
  *     `
  * }
  */
-export declare const BentoDataGridStaticIcon: DefineComponent<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_8<{
+export declare const BentoDataGridStaticIcon: DefineComponent<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_6<{
 /**
 * Renderes the icon with color.
 */
@@ -4814,7 +5206,7 @@ variant?: BentoDataGridStaticIconVariant;
 }>, {
 variant: string;
 colored: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_8<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_6<{
 /**
 * Renderes the icon with color.
 */
@@ -4864,11 +5256,11 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridSummaryCell: DefineComponent<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_9<BentoDataGridSummaryCellProps>, {
+export declare const BentoDataGridSummaryCell: DefineComponent<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_7<BentoDataGridSummaryCellProps>, {
 dashedUnderline: () => {};
 searchTerm: string;
 tooltipText: any;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_9<BentoDataGridSummaryCellProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_7<BentoDataGridSummaryCellProps>, {
 dashedUnderline: () => {};
 searchTerm: string;
 tooltipText: any;
@@ -4888,7 +5280,7 @@ declare interface BentoDataGridSummaryCellProps {
      * An array of strings to display. If there is only one item, it will be displayed as plain text.
      * If there are multiple items, they will be displayed in a popover.
      */
-    items: string[];
+    items: Array<string>;
     /**
      * Props to pass to the underlying `BentoDashedUnderline` component, allowing for customization of the popover.
      */
@@ -4926,7 +5318,7 @@ declare interface BentoDataGridSummaryCellProps {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_54<DefineComponent<    {
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_56<DefineComponent<    {
 /**
 * The header that goes to the top of the template
 */
@@ -5129,7 +5521,7 @@ export declare type BentoDataGridTemplateTab = InstanceType<typeof BentoTab>['$p
 
 export declare type BentoDataGridTemplateTabs = {
     activeTabIndex?: number;
-    tabs: BentoDataGridTemplateTab[];
+    tabs: Array<BentoDataGridTemplateTab>;
 };
 
 /**
@@ -5145,11 +5537,11 @@ export declare type BentoDataGridTemplateTabs = {
  *     `
  * }
  */
-export declare const BentoDate: DefineComponent<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_18<BentoDateProps>, {
+export declare const BentoDate: DefineComponent<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_20<BentoDateProps>, {
 date: any;
 format: BentoDateFormat;
 disableTypography: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_18<BentoDateProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_20<BentoDateProps>, {
 date: any;
 format: BentoDateFormat;
 disableTypography: boolean;
@@ -5216,271 +5608,100 @@ export declare enum BentoDateFormat {
  *      }
  * }
  */
-export declare const BentoDatePicker: DefineComponent<    {
-/**
-* Descriptive supporting text visbile underneath the dropdown.
-*/
-description: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Disables dropdown functionality.
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays component in an error state with an error message
-*/
-errorMessage: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
-*/
-firstDayOfWeek: {
-type: PropType<CalendarMonthFirstDayOfWeek>;
-default: CalendarMonthFirstDayOfWeek;
-validator: (value: CalendarMonthFirstDayOfWeek) => boolean;
-};
-/**
-* Indicate if a date should be disabled or not
-*/
-isDateDisabled: {
-type: PropType<CalendarMonthIsDateDisabled>;
-default: any;
-};
-/**
-* Sets a minimum limit for selectable dates - dates before `min` will not be selectable
-*/
-min: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Sets a maximum limit for selectable dates - dates after `max` will not be selectable
-*/
-max: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Text that is displayed as a label above the element.
-*/
-label: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Highlights the dropdown is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Highlights the dropdown is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds a info icon next to the label to display the passed tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Selected date
-*/
-value: {
-type: PropType<BentoDatePickerValue>;
-default: any;
-};
-/**
-* The type of calendar to display. Defaults to showing days.
-*/
-variant: {
-type: PropType<`${CalendarVariant}`>;
-default: any;
-};
-/**
-* Default start date for the calendar pane
-*/
-defaultDisplayMonth: {
-type: StringConstructor;
-default: any;
-validator: (value: string) => boolean;
-};
-}, {
-inputContainerRef: any;
-calendarContainerRef: any;
-dateDisplayValue: ComputedRef<string>;
-datePickerContainerId: string;
-descriptionConditionalClasses: ComputedRef<    {
-'b-date-picker__description--error': string;
-}>;
-isDateIncorrect: Ref<boolean>;
-isDatePickerOpen: Ref<boolean>;
-isReadOnly: ComputedRef<boolean>;
-dateErrorText: ComputedRef<string>;
-labelId: string;
-descriptionId: string;
-errorId: string;
-dateErrorId: string;
-popoverAriaLabel: ComputedRef<string>;
-ariaDescribedBy: ComputedRef<string>;
-textInputValue: Ref<string>;
-initialFocusOnDatePickerOpen: any;
-closeDatePicker: () => void;
-clearDatePickerValue: () => Promise<void>;
-onDateSelected: (selectedDate: Date) => void;
-openDatePicker: () => void;
-onDateKeyDown: (event: KeyboardEvent) => void;
-onDateInputChange: (stringDate: string) => void;
-onSpaceBarOrEnter: (event: KeyboardEvent) => Promise<void>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoDatePickerEvent[], string, Readonly<ExtractPropTypes<    {
-/**
-* Descriptive supporting text visbile underneath the dropdown.
-*/
-description: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Disables dropdown functionality.
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays component in an error state with an error message
-*/
-errorMessage: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
-*/
-firstDayOfWeek: {
-type: PropType<CalendarMonthFirstDayOfWeek>;
-default: CalendarMonthFirstDayOfWeek;
-validator: (value: CalendarMonthFirstDayOfWeek) => boolean;
-};
-/**
-* Indicate if a date should be disabled or not
-*/
-isDateDisabled: {
-type: PropType<CalendarMonthIsDateDisabled>;
-default: any;
-};
-/**
-* Sets a minimum limit for selectable dates - dates before `min` will not be selectable
-*/
-min: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Sets a maximum limit for selectable dates - dates after `max` will not be selectable
-*/
-max: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Text that is displayed as a label above the element.
-*/
-label: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Highlights the dropdown is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Highlights the dropdown is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds a info icon next to the label to display the passed tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Selected date
-*/
-value: {
-type: PropType<BentoDatePickerValue>;
-default: any;
-};
-/**
-* The type of calendar to display. Defaults to showing days.
-*/
-variant: {
-type: PropType<`${CalendarVariant}`>;
-default: any;
-};
-/**
-* Default start date for the calendar pane
-*/
-defaultDisplayMonth: {
-type: StringConstructor;
-default: any;
-validator: (value: string) => boolean;
-};
-}>>, {
-value: Date;
+export declare const BentoDatePicker: DefineComponent<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_9<BentoDatePickerProps>, {
+defaultDisplayMonth: any;
+description: any;
+disabled: boolean;
+errorMessage: any;
+firstDayOfWeek: number;
+isDateDisabled: any;
+label: any;
+max: any;
+min: any;
+optional: boolean;
+placeholder: any;
+readonly: boolean;
+required: boolean;
+tooltipText: any;
+value: any;
+variant: any;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoDatePickerEvent[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_9<BentoDatePickerProps>, {
+defaultDisplayMonth: any;
+description: any;
+disabled: boolean;
+errorMessage: any;
+firstDayOfWeek: number;
+isDateDisabled: any;
+label: any;
+max: any;
+min: any;
+optional: boolean;
+placeholder: any;
+readonly: boolean;
+required: boolean;
+tooltipText: any;
+value: any;
+variant: any;
+}>>>, {
+value: BentoDatePickerValue | null;
 description: string;
 label: string;
-variant: "day" | "month";
+variant: `${CalendarVariant}`;
 required: boolean;
 disabled: boolean;
 optional: boolean;
 readonly: boolean;
+errorMessage: string;
+tooltipText: string;
 isDateDisabled: CalendarMonthIsDateDisabled;
 firstDayOfWeek: CalendarMonthFirstDayOfWeek;
-min: Date;
-max: Date;
-defaultDisplayMonth: string;
-tooltipText: string;
-errorMessage: string;
+min: Date | null;
+max: Date | null;
+defaultDisplayMonth: string | null;
+placeholder: string;
 }>;
 
 export declare enum BentoDatePickerEvent {
     INPUT = "input"
 }
 
+export declare interface BentoDatePickerProps extends FormField {
+    /**
+     * Default start date for the calendar pane.
+     * Expected format: YYYY-MM-DD
+     * @default null
+     */
+    defaultDisplayMonth?: string | null;
+    /**
+     * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     * @default 1
+     */
+    firstDayOfWeek?: CalendarMonthFirstDayOfWeek;
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled?: CalendarMonthIsDateDisabled;
+    /**
+     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
+     * @default null
+     */
+    min?: Date | null;
+    /**
+     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
+     * @default null
+     */
+    max?: Date | null;
+    /**
+     * Selected date
+     * @default null
+     */
+    value?: BentoDatePickerValue | null;
+    /**
+     * The type of calendar to display. Defaults to showing days.
+     */
+    variant?: `${CalendarVariant}`;
+}
+
 export declare type BentoDatePickerValue = Date;
 
 export declare interface BentoDateProps {
@@ -5516,374 +5737,97 @@ export declare interface BentoDateRangeFilterOptions {
     tooltipText?: string;
     tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;
 }
-
-export declare type BentoDateRangeFilterValue = BentoDateRangePickerValue | null;
-
-/**
- * Date range picker selector.
- *
- * @example
- * import { BentoDateRangePicker } from '../..';
- *
- * export default {
- *     components: { BentoDateRangePicker },
- *     template: `
- *          <bento-date-range-picker
- *              label="Label"
- *              description="Supporting text"
- *              required
- *              optional
- *              disabled
- *              @input="onDateChanged"
- *              v-model="selectedDate"
- *          />
- *     `,
- *      setup() {
- *          const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })
- *          return {
- *              selectedDate,
- *          }
- *      }
- * }
- */
-export declare const BentoDateRangePicker: DefineComponent<    {
-/**
-* Allows user to enter time values in the form
-*/
-allowTimeInput: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Descriptive supporting text visbile underneath the dropdown.
-*/
-description: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Disables dropdown functionality.
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays component in an error state with an error message
-*/
-errorMessage: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
-*/
-firstDayOfWeek: {
-type: PropType<CalendarMonthFirstDayOfWeek>;
-default: CalendarMonthFirstDayOfWeek;
-validator: (value: CalendarMonthFirstDayOfWeek) => boolean;
-};
-/**
-* A list of available granularities.
-* If present, the date picker will display a segmented control to change granularity.
-*/
-granularities: {
-type: PropType<Array<BentoDateRangePickerGranularityConfig>>;
-default: any;
-};
-/**
-* Indicate if a date should be disabled or not
-*/
-isDateDisabled: {
-type: PropType<CalendarMonthIsDateDisabled>;
-default: any;
-};
-/**
-* Text that is displayed as a label above the element.
-*/
-label: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Upon opening date range picker, end date's month will be pre-selected.
-*/
-showEndDateOnOpen: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Highlights the dropdown is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Highlights the dropdown is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds a info icon next to the label to display the passed tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Enables the range selector.
-* If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
-* `label` - label of custom range item.
-* `value` - a unique key of the custom range item.
-* `data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.
-*/
-quickSelectRanges: {
-type: PropType<DateRangePickerCalendarRangeSelectorItems>;
-default: any;
-};
-/**
-* Set a maximum number of dates to be selectable by the range.
-*/
-maxRange: {
-type: NumberConstructor;
-default: any;
-validator: (value: number) => boolean;
-};
-/**
-* Sets a minimum limit for selectable dates - dates before `min` will not be selectable
-*/
-min: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Sets a maximum limit for selectable dates - dates after `max` will not be selectable
-*/
-max: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Number of months rendered on pane
-*/
-numberOfMonths: {
-type: NumberConstructor;
-default: number;
-validator: (n: number) => boolean;
-};
-/**
-* Selected date
-*/
-value: {
-type: PropType<BentoDateRangePickerValue>;
-default: any;
-};
-/**
-* The type of calendar to display. Defaults to showing days.
-*/
-variant: {
-type: PropType<`${CalendarVariant}`>;
-default: any;
-};
-/**
-* Enables the date picker selection to persist until it is explicitly applied.
-* Displays a set of buttons: Apply and Cancel.
-*
-* @deprecated This will be the default behaviour in v2.0.0.
-*/
-hasActions: {
-type: BooleanConstructor;
-default: boolean;
-};
-}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoDateRangePickerEvent[], string, Readonly<ExtractPropTypes<    {
-/**
-* Allows user to enter time values in the form
-*/
-allowTimeInput: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Descriptive supporting text visbile underneath the dropdown.
-*/
-description: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Disables dropdown functionality.
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays component in an error state with an error message
-*/
-errorMessage: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
-*/
-firstDayOfWeek: {
-type: PropType<CalendarMonthFirstDayOfWeek>;
-default: CalendarMonthFirstDayOfWeek;
-validator: (value: CalendarMonthFirstDayOfWeek) => boolean;
-};
-/**
-* A list of available granularities.
-* If present, the date picker will display a segmented control to change granularity.
-*/
-granularities: {
-type: PropType<Array<BentoDateRangePickerGranularityConfig>>;
-default: any;
-};
-/**
-* Indicate if a date should be disabled or not
-*/
-isDateDisabled: {
-type: PropType<CalendarMonthIsDateDisabled>;
-default: any;
-};
-/**
-* Text that is displayed as a label above the element.
-*/
-label: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Upon opening date range picker, end date's month will be pre-selected.
-*/
-showEndDateOnOpen: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Highlights the dropdown is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Highlights the dropdown is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds a info icon next to the label to display the passed tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Enables the range selector.
-* If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
-* `label` - label of custom range item.
-* `value` - a unique key of the custom range item.
-* `data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.
-*/
-quickSelectRanges: {
-type: PropType<DateRangePickerCalendarRangeSelectorItems>;
-default: any;
-};
-/**
-* Set a maximum number of dates to be selectable by the range.
-*/
-maxRange: {
-type: NumberConstructor;
-default: any;
-validator: (value: number) => boolean;
-};
-/**
-* Sets a minimum limit for selectable dates - dates before `min` will not be selectable
-*/
-min: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Sets a maximum limit for selectable dates - dates after `max` will not be selectable
-*/
-max: {
-type: DateConstructor;
-default: any;
-};
-/**
-* Number of months rendered on pane
-*/
-numberOfMonths: {
-type: NumberConstructor;
-default: number;
-validator: (n: number) => boolean;
-};
-/**
-* Selected date
-*/
-value: {
-type: PropType<BentoDateRangePickerValue>;
-default: any;
-};
-/**
-* The type of calendar to display. Defaults to showing days.
-*/
-variant: {
-type: PropType<`${CalendarVariant}`>;
-default: any;
-};
+
+export declare type BentoDateRangeFilterValue = BentoDateRangePickerValue | null;
+
 /**
-* Enables the date picker selection to persist until it is explicitly applied.
-* Displays a set of buttons: Apply and Cancel.
-*
-* @deprecated This will be the default behaviour in v2.0.0.
-*/
-hasActions: {
-type: BooleanConstructor;
-default: boolean;
-};
-}>>, {
-value: BentoDateRangePickerValue;
+ * Date range picker selector.
+ *
+ * @example
+ * import { BentoDateRangePicker } from '../..';
+ *
+ * export default {
+ *     components: { BentoDateRangePicker },
+ *     template: `
+ *          <bento-date-range-picker
+ *              label="Label"
+ *              description="Supporting text"
+ *              required
+ *              optional
+ *              disabled
+ *              @input="onDateChanged"
+ *              v-model="selectedDate"
+ *          />
+ *     `,
+ *      setup() {
+ *          const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })
+ *          return {
+ *              selectedDate,
+ *          }
+ *      }
+ * }
+ */
+export declare const BentoDateRangePicker: DefineComponent<__VLS_WithDefaults_10<__VLS_TypePropsToRuntimeProps_10<BentoDateRangePickerProps>, {
+description: any;
+disabled: boolean;
+errorMessage: any;
+firstDayOfWeek: number;
+hasActions: boolean;
+isDateDisabled: any;
+label: any;
+max: any;
+maxRange: any;
+min: any;
+numberOfMonths: any;
+optional: boolean;
+placeholder: any;
+quickSelectRanges: any;
+readonly: boolean;
+required: boolean;
+showEndDateOnOpen: boolean;
+tooltipText: any;
+value: any;
+variant: any;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoDateRangePickerEvent[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_10<__VLS_TypePropsToRuntimeProps_10<BentoDateRangePickerProps>, {
+description: any;
+disabled: boolean;
+errorMessage: any;
+firstDayOfWeek: number;
+hasActions: boolean;
+isDateDisabled: any;
+label: any;
+max: any;
+maxRange: any;
+min: any;
+numberOfMonths: any;
+optional: boolean;
+placeholder: any;
+quickSelectRanges: any;
+readonly: boolean;
+required: boolean;
+showEndDateOnOpen: boolean;
+tooltipText: any;
+value: any;
+variant: any;
+}>>>, {
+value: BentoDateRangePickerValue | null;
 description: string;
 label: string;
-variant: "day" | "month";
+variant: `${CalendarVariant}`;
 required: boolean;
 disabled: boolean;
 optional: boolean;
 readonly: boolean;
+errorMessage: string;
+tooltipText: string;
 isDateDisabled: CalendarMonthIsDateDisabled;
-firstDayOfWeek: CalendarMonthFirstDayOfWeek;
+firstDayOfWeek: CalendarMonthFirstDayOfWeek | number;
 min: Date;
 max: Date;
 maxRange: number;
 numberOfMonths: number;
 showEndDateOnOpen: boolean;
-tooltipText: string;
-errorMessage: string;
-allowTimeInput: boolean;
-granularities: BentoDateRangePickerGranularityConfig<CalendarGranularityType>[];
+placeholder: string;
 quickSelectRanges: DateRangePickerCalendarRangeSelectorItems;
 hasActions: boolean;
 }>;
@@ -5899,6 +5843,69 @@ export declare interface BentoDateRangePickerGranularityConfig<T extends Calenda
     disabled?: boolean;
 }
 
+export declare interface BentoDateRangePickerProps extends FormField {
+    /**
+     * Allows user to enter time values in the form
+     * @default false
+     */
+    allowTimeInput?: boolean;
+    /**
+     * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     * @default 1
+     */
+    firstDayOfWeek?: CalendarMonthFirstDayOfWeek | number;
+    /**
+     * A list of available granularities.
+     * If present, the date picker will display a segmented control to change granularity.
+     */
+    granularities?: Array<BentoDateRangePickerGranularityConfig>;
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled?: CalendarMonthIsDateDisabled;
+    /**
+     * Upon opening date range picker, end date's month will be pre-selected.
+     * @default false
+     */
+    showEndDateOnOpen?: boolean;
+    /**
+     * Enables the range selector.
+     * If provided, must be an array that sets the custom range dropdown items.
+     */
+    quickSelectRanges?: DateRangePickerCalendarRangeSelectorItems;
+    /**
+     * Set a maximum number of dates to be selectable by the range.
+     */
+    maxRange?: number;
+    /**
+     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
+     */
+    min?: Date;
+    /**
+     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
+     */
+    max?: Date;
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths?: number;
+    /**
+     * Selected date
+     */
+    value?: BentoDateRangePickerValue | null;
+    /**
+     * The type of calendar to display. Defaults to showing days.
+     */
+    variant?: `${CalendarVariant}`;
+    /**
+     * Enables the date picker selection to persist until it is explicitly applied.
+     * Displays a set of buttons: Apply and Cancel.
+     * @deprecated This will be the default behaviour in v2.0.0.
+     * @default false
+     */
+    hasActions?: boolean;
+}
+
 export declare interface BentoDateRangePickerValue {
     startDate: Date;
     endDate: Date;
@@ -5917,9 +5924,9 @@ export declare interface BentoDateRangePickerValue {
  *     template: `<bento-divider />`
  * }
  */
-export declare const BentoDivider: DefineComponent<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_19<BentoDividerProps>, {
+export declare const BentoDivider: DefineComponent<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_21<BentoDividerProps>, {
 variant: BentoDividerVariant;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_19<BentoDividerProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_21<BentoDividerProps>, {
 variant: BentoDividerVariant;
 }>>>, {
 variant: `${BentoDividerVariant}`;
@@ -5973,7 +5980,7 @@ declare enum BentoDividerVariant {
  *     }
  * }
  */
-export declare const BentoDropdown: __VLS_WithTemplateSlots_11<DefineComponent<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_7<BentoDropdownProps>, {
+export declare const BentoDropdown: __VLS_WithTemplateSlots_11<DefineComponent<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_11<BentoDropdownProps>, {
 ariaLabel: any;
 condensed: boolean;
 emptyState: any;
@@ -6008,7 +6015,9 @@ focus: () => void;
 input: (selectedValue: any) => void;
 } & {
 "show-more": () => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_7<BentoDropdownProps>, {
+} & {
+open: () => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_11<BentoDropdownProps>, {
 ariaLabel: any;
 condensed: boolean;
 emptyState: any;
@@ -6052,9 +6061,9 @@ readonly: boolean;
 size: BentoDropdownSize | `${BentoDropdownSize}`;
 multiple: boolean;
 ariaLabel: string;
-tooltipText: string;
-errorMessage: string;
 items: BentoListboxOptions;
+errorMessage: string;
+tooltipText: string;
 isOptionDisabled: BentoListboxIsOptionDisabled;
 staticCategories: boolean;
 hasMoreItems: boolean;
@@ -6064,8 +6073,8 @@ componentLoading: boolean;
 virtualScroll: BentoListboxVirtulisationOptions;
 dynamicFiltering: boolean;
 showSlotContentInMultiple: boolean;
-placeholder: string;
 enableValueLabelPair: boolean;
+placeholder: string;
 }>, Record<string, (_: any) => any> & Record<string, (_: any) => any> & {
     description: (_: {}) => any;
 }>;
@@ -6098,11 +6107,15 @@ enableValueLabelPair: boolean;
  *     }
  * }
  */
-export declare const BentoDropdownAvatar: DefineComponent<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_11<BentoDropdownAvatarProps>, {
+export declare const BentoDropdownAvatar: DefineComponent<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_12<BentoDropdownAvatarProps>, {
 items: () => any[];
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (selectedValue: BentoListboxSelectedValue) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_11<BentoDropdownAvatarProps>, {
+} & {
+"show-more": () => void;
+} & {
+open: () => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_12<BentoDropdownAvatarProps>, {
 items: () => any[];
 }>>>, {
 items: BentoAvatarListboxOptions;
@@ -6237,12 +6250,12 @@ type: PropType<string>;
 } & {
 default: any;
 };
-tooltipText: {
+errorMessage: {
 type: PropType<string>;
 } & {
 default: any;
 };
-errorMessage: {
+tooltipText: {
 type: PropType<string>;
 } & {
 default: any;
@@ -6292,18 +6305,22 @@ type: PropType<boolean>;
 } & {
 default: boolean;
 };
-placeholder: {
-type: PropType<string>;
-} & {
-default: any;
-};
 enableValueLabelPair: {
 type: PropType<boolean>;
 } & {
 default: boolean;
 };
+placeholder: {
+type: PropType<string>;
+} & {
+default: any;
+};
 }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (selectedValue: BentoListboxSelectedValue) => void;
+} & {
+"show-more": () => void;
+} & {
+open: () => void;
 }, string, Readonly<ExtractPropTypes<    {
 /**
 * The option elements to populate the country dropdown with.
@@ -6394,12 +6411,12 @@ type: PropType<string>;
 } & {
 default: any;
 };
-tooltipText: {
+errorMessage: {
 type: PropType<string>;
 } & {
 default: any;
 };
-errorMessage: {
+tooltipText: {
 type: PropType<string>;
 } & {
 default: any;
@@ -6449,16 +6466,16 @@ type: PropType<boolean>;
 } & {
 default: boolean;
 };
-placeholder: {
-type: PropType<string>;
-} & {
-default: any;
-};
 enableValueLabelPair: {
 type: PropType<boolean>;
 } & {
 default: boolean;
 };
+placeholder: {
+type: PropType<string>;
+} & {
+default: any;
+};
 }>>, {
 search: BentoListboxSearchOptions;
 value: BentoListboxSelectedValue;
@@ -6475,9 +6492,9 @@ readonly: boolean;
 size: BentoDropdownSize | `${BentoDropdownSize}`;
 multiple: boolean;
 ariaLabel: string;
-tooltipText: string;
-errorMessage: string;
 items: BentoCountryListboxOptions;
+errorMessage: string;
+tooltipText: string;
 isOptionDisabled: BentoListboxIsOptionDisabled;
 staticCategories: boolean;
 hasMoreItems: boolean;
@@ -6487,8 +6504,8 @@ componentLoading: boolean;
 virtualScroll: BentoListboxVirtulisationOptions;
 dynamicFiltering: boolean;
 showSlotContentInMultiple: boolean;
-placeholder: string;
 enableValueLabelPair: boolean;
+placeholder: string;
 }>;
 
 /**
@@ -6519,11 +6536,15 @@ enableValueLabelPair: boolean;
  *     }
  * }
  */
-export declare const BentoDropdownCurrency: DefineComponent<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_12<BentoDropdownCurrencyProps>, {
+export declare const BentoDropdownCurrency: DefineComponent<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_13<BentoDropdownCurrencyProps>, {
 items: () => any[];
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (selectedValue: BentoListboxSelectedValue) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_12<BentoDropdownCurrencyProps>, {
+} & {
+"show-more": () => void;
+} & {
+open: () => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_13<BentoDropdownCurrencyProps>, {
 items: () => any[];
 }>>>, {
 items: BentoCurrencyListboxOptions;
@@ -6567,11 +6588,15 @@ export declare interface BentoDropdownCurrencyProps extends BentoDropdownProps {
  *     }
  * }
  */
-export declare const BentoDropdownPaymentMethod: DefineComponent<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_13<BentoDropdownPaymentMethodProps>, {
+export declare const BentoDropdownPaymentMethod: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_14<BentoDropdownPaymentMethodProps>, {
 items: () => any[];
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (selectedValue: BentoListboxSelectedValue) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_13<BentoDropdownPaymentMethodProps>, {
+} & {
+"show-more": () => void;
+} & {
+open: () => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_14<BentoDropdownPaymentMethodProps>, {
 items: () => any[];
 }>>>, {
 items: BentoPaymentMethodListboxOptions;
@@ -6587,7 +6612,7 @@ export declare interface BentoDropdownPaymentMethodProps extends BentoDropdownPr
     items?: BentoPaymentMethodListboxOptions;
 }
 
-export declare interface BentoDropdownProps {
+export declare interface BentoDropdownProps extends FormField {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
      * Defines a string value that labels an interactive element.
@@ -6601,10 +6626,6 @@ export declare interface BentoDropdownProps {
      * Empty state props used with the inner empty state component which is displayed when no search results are found.
      */
     emptyState?: BentoListboxEmptyStateProps;
-    /**
-     * Disables dropdown functionality.
-     */
-    disabled?: boolean;
     /**
      * Sets the possibility to type into the textbox.
      */
@@ -6614,14 +6635,6 @@ export declare interface BentoDropdownProps {
      * @deprecated Use "errorMessage" prop instead
      */
     error?: boolean;
-    /**
-     * Highlights the dropdown in an erroneous state with an error message.
-     */
-    errorMessage?: string;
-    /**
-     * Descriptive supporting text visbile underneath the dropdown.
-     */
-    description?: string;
     /**
      * Indicates whether there are more items to load
      */
@@ -6642,10 +6655,6 @@ export declare interface BentoDropdownProps {
      *  @property value.value - Value of the option
      */
     items?: BentoListboxOptions;
-    /**
-     * Text that is displayed as a label above the element.
-     */
-    label?: string;
     /**
      * Indicates if new options are lazy loading.
      */
@@ -6664,22 +6673,6 @@ export declare interface BentoDropdownProps {
      * If enabled, the user will be able to select multiple items.
      */
     multiple?: boolean;
-    /**
-     * Highlights the dropdown is optional.
-     */
-    optional?: boolean;
-    /**
-     * Text that appears in the form control when it has no value set
-     */
-    placeholder?: string;
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly?: boolean;
-    /**
-     * Highlights the dropdown is required.
-     */
-    required?: boolean;
     /**
      * Dropdown search options and events.
      * @see BentoDropdownSearchOptions
@@ -6697,10 +6690,6 @@ export declare interface BentoDropdownProps {
      * If enabled, dropdown will display non-selectable, static categories
      */
     staticCategories?: boolean;
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText?: string;
     /**
      * The `input` value.
      * Providing an empty string will select no options.
@@ -6762,11 +6751,15 @@ export declare enum BentoDropdownSize {
  *     }
  * }
  */
-export declare const BentoDropdownTag: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_14<BentoDropdownTagProps>, {
+export declare const BentoDropdownTag: DefineComponent<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_15<BentoDropdownTagProps>, {
 items: () => any[];
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (selectedValue: BentoListboxSelectedValue) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_14<BentoDropdownTagProps>, {
+} & {
+"show-more": () => void;
+} & {
+open: () => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_15<BentoDropdownTagProps>, {
 items: () => any[];
 }>>>, {
 items: BentoTagListboxOptions;
@@ -6807,14 +6800,14 @@ export declare interface BentoDropdownTagProps extends BentoDropdownProps {
  *     `
  * }
  */
-export declare const BentoEmptyState: __VLS_WithTemplateSlots_10<DefineComponent<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_6<BentoEmptyStateProps>, {
+export declare const BentoEmptyState: __VLS_WithTemplateSlots_13<DefineComponent<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_22<BentoEmptyStateProps>, {
 action: any;
 description: any;
 headingEl: any;
 image: any;
 title: string;
 variant: string;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_6<BentoEmptyStateProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_22<BentoEmptyStateProps>, {
 action: any;
 description: any;
 headingEl: any;
@@ -6927,7 +6920,7 @@ export declare enum BentoEmptyStateVariant {
  *      }
  * }
  */
-export declare const BentoFileUploader: DefineComponent<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_20<BentoFileUploaderProps>, {
+export declare const BentoFileUploader: DefineComponent<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_23<BentoFileUploaderProps>, {
 accept: any;
 description: any;
 errorMessage: any;
@@ -6944,7 +6937,7 @@ input: (value?: FileList) => void;
 "update:modelValue": (value?: FileList) => void;
 } & {
 "error:upload": (value: boolean) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_20<BentoFileUploaderProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_23<BentoFileUploaderProps>, {
 accept: any;
 description: any;
 errorMessage: any;
@@ -6955,9 +6948,9 @@ modelValue: any;
 tooltipText: any;
 }>>>, {
 description: string;
-tooltipText: string;
-errorMessage: string;
 modelValue: BentoFileUploaderValue;
+errorMessage: string;
+tooltipText: string;
 accept: HTMLInputElement["accept"];
 maxCount: number;
 maxDimensions: any;
@@ -7049,7 +7042,7 @@ export declare type BentoFileUploaderValue = string | Array<string> | File | Arr
  *   `
  * }
  */
-export declare const BentoFilterBar: DefineComponent<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_21<BentoFilterBarProps>, {
+export declare const BentoFilterBar: DefineComponent<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_24<BentoFilterBarProps<any, undefined>>, {
 config: () => any[];
 filterValues: () => any[];
 containerSizeLayout: () => {
@@ -7066,7 +7059,7 @@ isClearAllVisible: ComputedRef<boolean>;
 clearAllFilters: () => void;
 isResetAllVisible: ComputedRef<boolean>;
 resetAllFilters: () => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, (BentoFilterBarEvent | BentoSearchBarEvent)[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_21<BentoFilterBarProps>, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, (BentoFilterBarEvent | BentoSearchBarEvent)[], string, Readonly<ExtractPropTypes<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_24<BentoFilterBarProps<any, undefined>>, {
 config: () => any[];
 filterValues: () => any[];
 containerSizeLayout: () => {
@@ -7081,7 +7074,7 @@ filterValuesObject: any;
 }>>>, {
 search: BentoFilterBarSearchBarProps;
 value: BentoFilterBarModel;
-config: BentoFilterBarModel;
+config: BentoFilterBarModel<undefined>;
 searchTerm: BentoFilterBarSearchTerm;
 filterValues: BentoFilterValues;
 containerSizeLayout: {
@@ -7089,7 +7082,7 @@ medium: string;
 small: string;
 };
 showAppliedHiddenFilters: boolean;
-filterValuesObject: BentoFilterValueObject;
+filterValuesObject: any;
 }>;
 
 export declare interface BentoFilterBarContainerSizeLayout {
@@ -7109,9 +7102,9 @@ export declare enum BentoFilterBarEvent {
     UPDATE_FILTER_VALUES_ARRAY = "update:filter-values"
 }
 
-export declare type BentoFilterBarModel = Array<BentoFilterModel>;
+export declare type BentoFilterBarModel<CustomOptions = undefined> = Array<BentoFilterModel<CustomOptions>>;
 
-export declare interface BentoFilterBarProps {
+export declare interface BentoFilterBarProps<CustomValue = BentoFilterBarValue | any, CustomOptions = undefined> {
     /**
      * Array of filters based on @see {@link BentoFilterBarModel}.
      * Each one of the elements in the array correspond to a filter that will
@@ -7128,7 +7121,7 @@ export declare interface BentoFilterBarProps {
      *   type: FilterType.TEXT,
      * }]
      */
-    config?: BentoFilterBarModel;
+    config?: BentoFilterBarModel<CustomOptions>;
     /**
      * An array of the values for each filter in the filter bar.
      * @see {@link BentoFilterValues}
@@ -7204,7 +7197,7 @@ export declare interface BentoFilterBarProps {
      *   'name': 'some text'
      * },
      */
-    filterValuesObject?: BentoFilterValueObject;
+    filterValuesObject?: BentoFilterValueObject<string, CustomValue>;
 }
 
 export declare type BentoFilterBarScreenOptionsLayout = 'one-line' | 'multi-line';
@@ -7235,14 +7228,20 @@ export declare enum BentoFilterItemType {
     DATE_RANGE = "BentoDateRangeFilter"
 }
 
-export declare interface BentoFilterModel extends BentoFilterValue {
+export declare interface BentoFilterModel<CustomOptions = undefined> extends BentoFilterValue {
     label: string;
     description?: string;
-    type: BentoFilterItemType;
-    options?: BentoFilterOptions;
+    options?: BentoFilterOptions | CustomOptions;
     disabled?: boolean;
     defaultValue?: BentoFilterBarValue;
     visible?: boolean;
+    /**
+     * Defines the filter to be used.
+     *
+     * Can be one filter defined in the {@link BentoFilterItemType} enum or a
+     * custom filter component defined as a {@link VueNodeElement}
+     */
+    type: BentoFilterItemType | VueNodeElement;
     /**
      * @deprecated This property will be removed in version 2.0, please use `config` & `filter-values` properties.
      */
@@ -7256,7 +7255,7 @@ export declare interface BentoFilterValue {
     value?: BentoFilterBarValue;
 }
 
-export declare type BentoFilterValueObject<T extends PropertyKey = string> = Record<T, BentoFilterBarValue>;
+export declare type BentoFilterValueObject<T extends PropertyKey = string, CustomValue = BentoFilterBarValue> = Record<T, CustomValue>;
 
 export declare type BentoFilterValues = Array<BentoFilterValue>;
 
@@ -7295,7 +7294,7 @@ export declare type BentoFilterValues = Array<BentoFilterValue>;
  *     `
  * }
  */
-export declare const BentoFormLayout: __VLS_WithTemplateSlots_14<DefineComponent<    {
+export declare const BentoFormLayout: __VLS_WithTemplateSlots_15<DefineComponent<    {
 /**
 * Renders the form layout as an HTML `form`
 */
@@ -7361,7 +7360,7 @@ loading: boolean;
  *          </bento-form-layout-field-tip>
  *     `
  */
-export declare const BentoFormLayoutFieldTip: __VLS_WithTemplateSlots_15<DefineComponent<    {
+export declare const BentoFormLayoutFieldTip: __VLS_WithTemplateSlots_16<DefineComponent<    {
 /**
 * Type of a alert; set a distinctive icon and color. Defaults to highlight.
 * @values highlight, success, critical, warning
@@ -7425,7 +7424,7 @@ declare type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;
  *     `
  * }
  */
-export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_17<DefineComponent<    {
+export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_18<DefineComponent<    {
 /**
 * The layout of the pair group of components.
 * This will render the components within the width of the proportions.
@@ -7511,7 +7510,7 @@ layout: BentoLayoutGroupProportions;
  *     `
  * }
  */
-export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_16<DefineComponent<    {
+export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_17<DefineComponent<    {
 /**
 * Defines if the Form Layout title is
 * a "section" or a "subsection".
@@ -7747,7 +7746,7 @@ declare enum BentoHeaderVariant {
  *   `
  * };
  */
-export declare const BentoHeaderWithViews: __VLS_WithTemplateSlots_18<DefineComponent<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_22<BentoHeaderWithViewsProps>, {
+export declare const BentoHeaderWithViews: __VLS_WithTemplateSlots_19<DefineComponent<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_26<BentoHeaderWithViewsProps>, {
 actions: () => any[];
 additionalViewSetting: any;
 title: any;
@@ -7773,7 +7772,7 @@ views: () => any[];
 "update:view": (value: BentoHeaderWithViewsItemUpdate) => void;
 } & {
 "update:skip-unsaved-changes": (value: boolean) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_22<BentoHeaderWithViewsProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_26<BentoHeaderWithViewsProps>, {
 actions: () => any[];
 additionalViewSetting: any;
 title: any;
@@ -7791,7 +7790,7 @@ lastUpdated: Date | number;
 reloadButton: HeaderMetaProps["reloadButton"];
 infoIconTooltipText: string;
 additionalViewSetting: BentoHeaderWithViewsItemAdditionalConfig;
-views: BentoHeaderWithViewsItem[];
+views: Array<BentoHeaderWithViewsItem>;
 disableCustomization: boolean;
 }>, {
     infoIconTooltipContent: (_: {}) => any;
@@ -7886,8 +7885,8 @@ declare enum BentoHeaderWithViewsItemIconEnum {
 }
 
 export declare interface BentoHeaderWithViewsItemUpdate {
-    newViews: BentoHeaderWithViewsItem[];
-    oldViews: BentoHeaderWithViewsItem[];
+    newViews: Array<BentoHeaderWithViewsItem>;
+    oldViews: Array<BentoHeaderWithViewsItem>;
     targetViewLabel: BentoHeaderWithViewsItem['label'];
 }
 
@@ -7914,7 +7913,7 @@ export declare interface BentoHeaderWithViewsProps {
      * - `additionalViewSetting` (BentoHeaderWithViewsItemAdditionalConfig, optional): Optional configuration for an additional view setting.
      * - `isFixed` (boolean, optional): Indicates if this view can be edited or deleted.     * @see {@link BentoHeaderWithViewsItem}
      */
-    views?: BentoHeaderWithViewsItem[];
+    views?: Array<BentoHeaderWithViewsItem>;
     /**
      * Optional configuration for an additional view setting, such as a filter or option.
      * Defined by the `BentoHeaderWithViewsItemAdditionalConfig` interface.
@@ -7974,10 +7973,10 @@ export declare interface BentoHeaderWithViewsProps {
  *     `
  * }
  */
-export declare const BentoImage: DefineComponent<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_23<BentoImageProps>, {
+export declare const BentoImage: DefineComponent<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_27<BentoImageProps>, {
 aspectRatio: any;
 objectFit: any;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_23<BentoImageProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_27<BentoImageProps>, {
 aspectRatio: any;
 objectFit: any;
 }>>>, {
@@ -8027,11 +8026,11 @@ export declare interface BentoImageProps {
  * import { BentoInfoIcon } from '../..';
  * </scrip>
  */
-export declare const BentoInfoIcon: DefineComponent<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_24<BentoInfoIconProps>, {
+export declare const BentoInfoIcon: DefineComponent<__VLS_WithDefaults_28<__VLS_TypePropsToRuntimeProps_28<BentoInfoIconProps>, {
 tooltipPosition: PopperContainerPositionExtended;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 mouseenter: (event: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_24<BentoInfoIconProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_28<__VLS_TypePropsToRuntimeProps_28<BentoInfoIconProps>, {
 tooltipPosition: PopperContainerPositionExtended;
 }>>>, {
 tooltipPosition: PopperContainerPosition | `${PopperContainerPosition}`;
@@ -8089,7 +8088,7 @@ export declare type BentoInputDropdownProps = {
  *          >
  * }
  */
-export declare const BentoInputField: __VLS_WithTemplateSlots_19<DefineComponent<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_25<BentoInputFieldProps>, {
+export declare const BentoInputField: __VLS_WithTemplateSlots_20<DefineComponent<__VLS_WithDefaults_29<__VLS_TypePropsToRuntimeProps_29<BentoInputFieldProps>, {
 ariaHidden: boolean;
 ariaLabel: any;
 condensed: boolean;
@@ -8130,7 +8129,7 @@ keydown: (event: KeyboardEvent) => void;
 keyup: (event: KeyboardEvent) => void;
 } & {
 input: (inputValue: string) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_25<BentoInputFieldProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_29<__VLS_TypePropsToRuntimeProps_29<BentoInputFieldProps>, {
 ariaHidden: boolean;
 ariaLabel: any;
 condensed: boolean;
@@ -8161,8 +8160,8 @@ error: boolean;
 optional: boolean;
 readonly: boolean;
 ariaLabel: string;
-tooltipText: string;
 errorMessage: string;
+tooltipText: string;
 placeholder: string;
 slashedZero: boolean;
 dropdown: BentoInputDropdownProps;
@@ -8231,7 +8230,7 @@ export declare enum BentoInputFieldEvent {
  *     `
  * }
  */
-export declare const BentoInputFieldPassword: DefineComponent<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_26<BentoInputFieldPasswordProps>, {
+export declare const BentoInputFieldPassword: DefineComponent<__VLS_WithDefaults_30<__VLS_TypePropsToRuntimeProps_30<BentoInputFieldPasswordProps>, {
 condensed: boolean;
 debounceTime: number;
 disabled: boolean;
@@ -8253,7 +8252,7 @@ focus: () => void;
 "input:error": (errors: BentoInputFieldPasswordErrorsList) => void;
 } & {
 input: (value: BentoInputFieldValue) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_26<BentoInputFieldPasswordProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_30<__VLS_TypePropsToRuntimeProps_30<BentoInputFieldPasswordProps>, {
 condensed: boolean;
 debounceTime: number;
 disabled: boolean;
@@ -8354,7 +8353,7 @@ export declare interface BentoInputFieldPasswordValidation {
     title?: string;
     suggestion?: string;
     extendDefaultValidation?: boolean;
-    list: BentoInputFieldPasswordValidationListItem[];
+    list: Array<BentoInputFieldPasswordValidationListItem>;
 }
 
 /**
@@ -8363,8 +8362,8 @@ export declare interface BentoInputFieldPasswordValidation {
 export declare interface BentoInputFieldPasswordValidationListItem {
     label?: string;
     key?: BentoInputFieldPasswordDefaultRuleKeys | string;
-    validate?: (value: BentoInputFieldValue, ...args: any[]) => boolean;
-    additionalArgs?: any[];
+    validate?: (value: BentoInputFieldValue, ...args: Array<any>) => boolean;
+    additionalArgs?: Array<any>;
     disabled?: boolean;
 }
 
@@ -8386,7 +8385,7 @@ export declare interface BentoInputFieldPasswordValidationListItem {
  *     `
  * }
  */
-export declare const BentoInputFieldPhoneNumber: __VLS_WithTemplateSlots_20<DefineComponent<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_27<BentoInputFieldPhoneNumberProps>, {
+export declare const BentoInputFieldPhoneNumber: __VLS_WithTemplateSlots_21<DefineComponent<__VLS_WithDefaults_31<__VLS_TypePropsToRuntimeProps_31<BentoInputFieldPhoneNumberProps>, {
 countries: () => CountryCode_2[];
 description: any;
 dynamicFiltering: boolean;
@@ -8398,14 +8397,14 @@ input: (value: string) => void;
 "update:selected-country": (country: CountryCode_2) => void;
 } & {
 "input:valid": (value: boolean) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_27<BentoInputFieldPhoneNumberProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_31<__VLS_TypePropsToRuntimeProps_31<BentoInputFieldPhoneNumberProps>, {
 countries: () => CountryCode_2[];
 description: any;
 dynamicFiltering: boolean;
 }>>>, {
 description: string;
 dynamicFiltering: boolean;
-countries: CountryCode[];
+countries: Array<CountryCode>;
 }>, {
     default: (_: {}) => any;
     description: (_: {}) => any;
@@ -8422,7 +8421,7 @@ export declare interface BentoInputFieldPhoneNumberProps extends FormField {
     /**
      * Array of country codes to show on the dropdown
      */
-    countries?: CountryCode[];
+    countries?: Array<CountryCode>;
     /**
      * Dropdown props for the small selectable dropdown menu.
      * Properties supported:
@@ -8443,6 +8442,10 @@ export declare interface BentoInputFieldPhoneNumberProps extends FormField {
      * Selected country code
      */
     selectedCountry?: CountryCode;
+    /**
+     * The current value of the field.
+     */
+    value?: string | number;
 }
 
 export declare interface BentoInputFieldProps {
@@ -8682,7 +8685,7 @@ export declare type BentoInpuWithDropdowntFilterValue = {
  *     `
  * }
  */
-export declare const BentoInspector: __VLS_WithTemplateSlots_21<DefineComponent<__VLS_WithDefaults_28<__VLS_TypePropsToRuntimeProps_28<BentoInspectorProps>, {
+export declare const BentoInspector: __VLS_WithTemplateSlots_22<DefineComponent<__VLS_WithDefaults_32<__VLS_TypePropsToRuntimeProps_32<BentoInspectorProps>, {
 activePage: string;
 expandable: boolean;
 isOpen: boolean;
@@ -8696,7 +8699,7 @@ pageFocusAnchor: any;
 "update:active-page": (value: string) => void;
 } & {
 expand: () => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_28<__VLS_TypePropsToRuntimeProps_28<BentoInspectorProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_32<__VLS_TypePropsToRuntimeProps_32<BentoInspectorProps>, {
 activePage: string;
 expandable: boolean;
 isOpen: boolean;
@@ -8708,8 +8711,8 @@ pageFocusAnchor: any;
 isOpen: boolean;
 loading: boolean;
 size: BentoInspectorSize;
-activePage: string;
 expandable: boolean;
+activePage: string;
 relativeLayout: BentoInspectorRelativeLayout;
 pageFocusAnchor: HTMLElement;
 }>, {
@@ -8812,10 +8815,10 @@ export declare enum BentoKeyboardNavigationKeyDownEvent {
  *     `
  * }
  */
-export declare const BentoLayout: __VLS_WithTemplateSlots_22<DefineComponent<__VLS_WithDefaults_29<__VLS_TypePropsToRuntimeProps_29<BentoLayoutProps>, {
+export declare const BentoLayout: __VLS_WithTemplateSlots_23<DefineComponent<__VLS_WithDefaults_33<__VLS_TypePropsToRuntimeProps_33<BentoLayoutProps>, {
 size: string;
 variant: string;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_29<__VLS_TypePropsToRuntimeProps_29<BentoLayoutProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_33<__VLS_TypePropsToRuntimeProps_33<BentoLayoutProps>, {
 size: string;
 variant: string;
 }>>>, {
@@ -8858,9 +8861,9 @@ export declare interface BentoLayoutProps {
  *     `
  * }
  */
-export declare const BentoLayoutRow: __VLS_WithTemplateSlots_23<DefineComponent<__VLS_WithDefaults_30<__VLS_TypePropsToRuntimeProps_30<BentoLayoutRowProps>, {
+export declare const BentoLayoutRow: __VLS_WithTemplateSlots_24<DefineComponent<__VLS_WithDefaults_34<__VLS_TypePropsToRuntimeProps_34<BentoLayoutRowProps>, {
 columnsLayout: string;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_30<__VLS_TypePropsToRuntimeProps_30<BentoLayoutRowProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_34<__VLS_TypePropsToRuntimeProps_34<BentoLayoutRowProps>, {
 columnsLayout: string;
 }>>>, {
 columnsLayout: BentoLayoutRowColumnLayout;
@@ -8907,12 +8910,12 @@ export declare type BentoLazyLoadType = 'automatic' | 'button' | 'none';
  *     `
  * }
  */
-export declare const BentoLink: __VLS_WithTemplateSlots_24<DefineComponent<__VLS_WithDefaults_31<__VLS_TypePropsToRuntimeProps_31<BentoLinkProps>, {
+export declare const BentoLink: __VLS_WithTemplateSlots_25<DefineComponent<__VLS_WithDefaults_36<__VLS_TypePropsToRuntimeProps_36<BentoLinkProps>, {
 target: any;
 variant: BentoLinkVariant;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: (clickEvent: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_31<__VLS_TypePropsToRuntimeProps_31<BentoLinkProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_36<__VLS_TypePropsToRuntimeProps_36<BentoLinkProps>, {
 target: any;
 variant: BentoLinkVariant;
 }>>>, {
@@ -8966,7 +8969,7 @@ declare type BentoListboxEmptyStateProps = {
     action: {
         icon?: any;
     } & BentoButtonActionObject;
-} & OmitStrict_2<BentoEmptyStateProps, 'variant' | 'image' | 'description'>;
+} & OmitStrict<BentoEmptyStateProps, 'variant' | 'image' | 'description'>;
 export { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps }
 export { BentoListboxEmptyStateProps }
 
@@ -8998,7 +9001,7 @@ declare enum BentoListboxLazyLoadType {
 export { BentoListboxLazyLoadType as BentoDropdownLazyLoadType }
 export { BentoListboxLazyLoadType }
 
-export declare type BentoListboxMultiSelectValue = BentoListboxValue[];
+export declare type BentoListboxMultiSelectValue = Array<BentoListboxValue>;
 
 export declare interface BentoListboxOptionItem extends BentoSearchBarItem {
     data?: unknown;
@@ -9170,57 +9173,32 @@ export declare enum BentoLoadingButtonState {
     FAIL = "fail"
 }
 
-export declare const BentoLoadingIndicator: DefineComponent<    {
-/**
-* Displays the loading indicator in a small size
-*/
-small: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays the loading indicator in a large size
-*/
-large: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays the loading indicator in a white variant
-*/
-inverse: {
-type: BooleanConstructor;
-default: boolean;
-};
-}, {
-conditionalClasses: ComputedRef<    {
-'b-loading-indicator--inverse': boolean;
-'b-loading-indicator--small': boolean;
-'b-loading-indicator--large': boolean;
-}>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, BentoLoadingIndicatorEvent[], string, Readonly<ExtractPropTypes<    {
-/**
-* Displays the loading indicator in a small size
-*/
-small: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Displays the loading indicator in a large size
-*/
-large: {
-type: BooleanConstructor;
-default: boolean;
-};
 /**
-* Displays the loading indicator in a white variant
-*/
-inverse: {
-type: BooleanConstructor;
-default: boolean;
-};
-}>>, {
+ * A loading indicator component that displays a spinning animation.
+ *
+ * @usage
+ * import { BentoLoadingIndicator } from '../..';
+ *
+ * export default {
+ *     components: { BentoLoadingIndicator },
+ *     template: `
+ *         <bento-loading-indicator :small="true" />
+ *     `
+ * };
+ */
+export declare const BentoLoadingIndicator: DefineComponent<__VLS_WithDefaults_35<__VLS_TypePropsToRuntimeProps_35<BentoLoadingIndicatorProps>, {
+small: boolean;
+large: boolean;
+inverse: boolean;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"loading-start": () => void;
+} & {
+"loading-end": () => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_35<__VLS_TypePropsToRuntimeProps_35<BentoLoadingIndicatorProps>, {
+small: boolean;
+large: boolean;
+inverse: boolean;
+}>>>, {
 small: boolean;
 large: boolean;
 inverse: boolean;
@@ -9231,6 +9209,21 @@ export declare enum BentoLoadingIndicatorEvent {
     END = "loading-end"
 }
 
+export declare interface BentoLoadingIndicatorProps {
+    /**
+     * Displays the loading indicator in a small size
+     */
+    small?: boolean;
+    /**
+     * Displays the loading indicator in a large size
+     */
+    large?: boolean;
+    /**
+     * Displays the loading indicator in a white variant
+     */
+    inverse?: boolean;
+}
+
 /**
  * Menu component to render a series of buttons. Csan render nested submenus.
  *
@@ -9248,7 +9241,7 @@ export declare enum BentoLoadingIndicatorEvent {
  *           />
  * }
  */
-export declare const BentoMenu: __VLS_WithTemplateSlots_25<DefineComponent<__VLS_WithDefaults_32<__VLS_TypePropsToRuntimeProps_32<BentoMenuProps>, {
+export declare const BentoMenu: __VLS_WithTemplateSlots_26<DefineComponent<__VLS_WithDefaults_37<__VLS_TypePropsToRuntimeProps_37<BentoMenuProps>, {
 button: () => BentoMenuButtonProps;
 closeMenuOnItemSelect: boolean;
 disableArrowDownOpeningMenu: boolean;
@@ -9271,7 +9264,7 @@ open: () => void;
 "menu-item-click": () => void;
 } & {
 "click-outside": () => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_32<__VLS_TypePropsToRuntimeProps_32<BentoMenuProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_37<__VLS_TypePropsToRuntimeProps_37<BentoMenuProps>, {
 button: () => BentoMenuButtonProps;
 closeMenuOnItemSelect: boolean;
 disableArrowDownOpeningMenu: boolean;
@@ -9359,7 +9352,7 @@ export declare interface BentoMenuProps {
     /**
      * The data to be displayed in the list
      */
-    data: BentoMenuItem[];
+    data: Array<BentoMenuItem>;
     /**
      * Disables opening the menu when the down arrow key is pressed.
      */
@@ -9417,7 +9410,7 @@ export declare interface BentoMenuProps {
  *     `
  * };
  */
-export declare const BentoModal: __VLS_WithTemplateSlots_26<DefineComponent<    {
+export declare const BentoModal: __VLS_WithTemplateSlots_27<DefineComponent<    {
 /**
 * List of actions that will be used to render the buttons.
 * First element in the list will be rendered as "primary".
@@ -9755,7 +9748,7 @@ export declare enum BentoModalEvent {
  *     `
  * }
  */
-export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_28<DefineComponent<    {
+export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_29<DefineComponent<    {
 /**
 * List of actions that will be used to render the buttons.
 * First element in the list will be rendered as "primary".
@@ -9897,7 +9890,7 @@ contextualLabel: string;
  *     `
  * }
  */
-export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_29<DefineComponent<    {
+export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_30<DefineComponent<    {
 /**
 * List of actions that will be used to render the buttons.
 * First element in the list will be rendered as "primary".
@@ -10039,7 +10032,7 @@ contextualLabel: string;
  *     `
  * }
  */
-export declare const BentoModalPage: __VLS_WithTemplateSlots_27<DefineComponent<__VLS_WithDefaults_33<__VLS_TypePropsToRuntimeProps_33<BentoModalPageProps>, {
+export declare const BentoModalPage: __VLS_WithTemplateSlots_28<DefineComponent<__VLS_WithDefaults_38<__VLS_TypePropsToRuntimeProps_38<BentoModalPageProps>, {
 actions: any;
 actionsLabel: any;
 columnsSize: BentoModalColumnLayoutVariant;
@@ -10048,7 +10041,7 @@ destructiveActions: boolean;
 withColumnLayout: boolean;
 pageId: any;
 previousPage: any;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_33<__VLS_TypePropsToRuntimeProps_33<BentoModalPageProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_38<__VLS_TypePropsToRuntimeProps_38<BentoModalPageProps>, {
 actions: any;
 actionsLabel: any;
 columnsSize: BentoModalColumnLayoutVariant;
@@ -10196,7 +10189,7 @@ export declare type BentoMultiCheckboxType = Array<string | number>;
  *     `,
  * }
  */
-export declare const BentoPagination: __VLS_WithTemplateSlots_30<DefineComponent<__VLS_WithDefaults_34<__VLS_TypePropsToRuntimeProps_34<BentoPaginationProps>, {
+export declare const BentoPagination: __VLS_WithTemplateSlots_31<DefineComponent<__VLS_WithDefaults_39<__VLS_TypePropsToRuntimeProps_39<BentoPaginationProps>, {
 ariaLabel: any;
 hasNext: any;
 hidePageSize: boolean;
@@ -10212,7 +10205,7 @@ navigate: (page: number, items?: number) => void;
 "update:page": (page: number) => void;
 } & {
 "update:size": (size: number) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_34<__VLS_TypePropsToRuntimeProps_34<BentoPaginationProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_39<__VLS_TypePropsToRuntimeProps_39<BentoPaginationProps>, {
 ariaLabel: any;
 hasNext: any;
 hidePageSize: boolean;
@@ -10278,10 +10271,10 @@ export declare interface BentoPaginationProps {
  *     `
  * }
  */
-export declare const BentoPaymentMethod: DefineComponent<__VLS_WithDefaults_35<__VLS_TypePropsToRuntimeProps_35<BentoPaymentMethodProps>, {
+export declare const BentoPaymentMethod: DefineComponent<__VLS_WithDefaults_40<__VLS_TypePropsToRuntimeProps_40<BentoPaymentMethodProps>, {
 type: string;
 small: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_35<__VLS_TypePropsToRuntimeProps_35<BentoPaymentMethodProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_40<__VLS_TypePropsToRuntimeProps_40<BentoPaymentMethodProps>, {
 type: string;
 small: boolean;
 }>>>, {
@@ -10293,7 +10286,7 @@ export declare type BentoPaymentMethodListboxOptionItem = OmitStrict<BentoListbo
     value: string;
 };
 
-export declare type BentoPaymentMethodListboxOptions = BentoPaymentMethodListboxOptionItem[];
+export declare type BentoPaymentMethodListboxOptions = Array<BentoPaymentMethodListboxOptionItem>;
 
 export declare interface BentoPaymentMethodProps {
     /**
@@ -11473,7 +11466,7 @@ export declare enum BentoPaymentMethodType {
  *     `
  * }
  */
-export declare const BentoPopover: __VLS_WithTemplateSlots_31<DefineComponent<__VLS_WithDefaults_36<__VLS_TypePropsToRuntimeProps_36<BentoPopoverProps>, {
+export declare const BentoPopover: __VLS_WithTemplateSlots_32<DefineComponent<__VLS_WithDefaults_41<__VLS_TypePropsToRuntimeProps_41<BentoPopoverProps>, {
 actions: any;
 actionsLayout: string;
 ariaLabel: any;
@@ -11497,7 +11490,7 @@ overflowVisible: boolean;
 dismiss: () => void;
 } & {
 placement: (placement: Placement) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_36<__VLS_TypePropsToRuntimeProps_36<BentoPopoverProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_41<__VLS_TypePropsToRuntimeProps_41<BentoPopoverProps>, {
 actions: any;
 actionsLayout: string;
 ariaLabel: any;
@@ -11525,7 +11518,7 @@ open: boolean;
 position: BentoPopoverPositions | `${BentoPopoverPositions}`;
 trapAll: boolean;
 trapAllOptions: any;
-fallbackPosition: Placement[];
+fallbackPosition: Array<Placement>;
 fixedPositioning: boolean;
 ariaLabel: string;
 actions: BentoButtonActionsList;
@@ -11534,7 +11527,7 @@ divider: boolean;
 disableFocusTrap: boolean;
 dismissible: boolean;
 fitContent: boolean;
-modifiers: unknown[];
+modifiers: Array<unknown>;
 withoutSpace: boolean;
 overflowVisible: boolean;
 }>, {
@@ -11625,7 +11618,7 @@ export declare interface BentoPopoverProps {
      * Useful when not using auto as starting placement.
      * https://floating-ui.com/docs/flip#fallbackplacements
      */
-    fallbackPosition?: Placement[];
+    fallbackPosition?: Array<Placement>;
     /**
      * Sets the size of the container to fit its content
      */
@@ -11648,7 +11641,7 @@ export declare interface BentoPopoverProps {
      * @deprecated
      * NOTE: This property no longer functions since moving to the floating-ui framework.
      */
-    modifiers?: unknown[];
+    modifiers?: Array<unknown>;
     /**
      * Popover's position relative to the target element.
      * Possible values are:
@@ -11709,7 +11702,7 @@ export declare interface BentoPopoverProps {
  *     `
  * };
  */
-export declare const BentoPromoBanner: __VLS_WithTemplateSlots_32<DefineComponent<__VLS_WithDefaults_37<__VLS_TypePropsToRuntimeProps_37<BentoPromoBannerProps>, {
+export declare const BentoPromoBanner: __VLS_WithTemplateSlots_33<DefineComponent<__VLS_WithDefaults_42<__VLS_TypePropsToRuntimeProps_42<BentoPromoBannerProps>, {
 actions: any;
 color: BentoPromoBannerColor;
 isDismissible: boolean;
@@ -11717,7 +11710,7 @@ dismissButtonText: any;
 layout: BentoPromoBannerLayout;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 dismiss: () => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_37<__VLS_TypePropsToRuntimeProps_37<BentoPromoBannerProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_42<__VLS_TypePropsToRuntimeProps_42<BentoPromoBannerProps>, {
 actions: any;
 color: BentoPromoBannerColor;
 isDismissible: boolean;
@@ -11726,7 +11719,7 @@ layout: BentoPromoBannerLayout;
 }>>>, {
 color: `${BentoPromoBannerColor}`;
 layout: `${BentoPromoBannerLayout}`;
-actions: BentoPromoBannerAction[];
+actions: Array<BentoPromoBannerAction>;
 isDismissible: boolean;
 dismissButtonText: string;
 }>, {
@@ -11783,7 +11776,7 @@ export declare interface BentoPromoBannerProps {
      * }]
      * ```
      */
-    actions?: BentoPromoBannerAction[];
+    actions?: Array<BentoPromoBannerAction>;
     /**
      * Defines the color of banner's background
      */
@@ -11856,66 +11849,7 @@ export declare interface BentoPromoBannerProps {
  *     }
  * }
  */
-export declare const BentoRadioButton: __VLS_WithTemplateSlots_34<DefineComponent<    {
-/**
-* Disable the radio button (optional)
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Shows bento-radio-button in error state (optional)
-*/
-hasError: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* This property should not be used directly.
-* It will be used by v-model directive on radio component.
-*/
-modelValue: {
-type: PropType<BentoRadioButtonValue>;
-default: any;
-};
-/**
-* Sets the radio button to readonly (optional)
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Sets the properties of the BentoTag component that is placed next to the label.
-* {@see BentoTag}
-*/
-tag: {
-type: PropType<BentoRadioButtonTag>;
-default: any;
-};
-/**
-* Indicates the value of the input that will be returned when it's checked
-*/
-value: {
-type: PropType<BentoRadioButtonValue>;
-required: true;
-};
-/**
-* Sets the name of the radio input.
-* Used for differentiating radio groups or accessing input via form submission.
-*/
-name: {
-type: StringConstructor;
-default: any;
-};
-}, {
-focus: () => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-input: (value: BentoRadioButtonValue) => void;
-} & {
-"update:model-value": (value: BentoRadioButtonValue) => void;
-}, string, Readonly<ExtractPropTypes<    {
+export declare const BentoRadioButton: __VLS_WithTemplateSlots_35<DefineComponent<    {
 /**
 * Disable the radio button (optional)
 */
@@ -11968,274 +11902,153 @@ name: {
 type: StringConstructor;
 default: any;
 };
-}>>, {
-name: string;
-disabled: boolean;
-tag: any;
-readonly: boolean;
-hasError: boolean;
-modelValue: BentoRadioButtonValue;
-}>, {
-    default: (_: {}) => any;
-    description: (_: {}) => any;
-    content: (_: {}) => any;
-}>;
-
-export declare enum BentoRadioButtonStateClass {
-    DISABLED = "disabled",
-    READONLY = "readonly",
-    ERROR = "error"
-}
-
-export declare type BentoRadioButtonTag = InstanceType<typeof BentoTag>['$props'];
-
-export declare type BentoRadioButtonValue = string | number;
-
-/**
- * A radio group component should be used whenever it is necessary to use a set of radio buttons
- * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/
- *
- * import { BentoRadioGroup } from '../..';
- *
- * export default {
- *     components: { BentoRadioGroup },
- *     template: `
- *             <bento-radio-group
- *                label="Your group label"
- *                :items="[
- *                    { value: 1, label: 'Your label' },
- *                    { value: 2, label: 'Another label', description: 'Your descriptive sub label' },
- *                 ]"
- *                 variant="horizontal"
- *              />
- *     `
- * };
- */
-export declare const BentoRadioGroup: __VLS_WithTemplateSlots_33<DefineComponent<    {
-/**
-* Descriptive supporting text visbile underneath the label.
-*/
-description: {
-type: StringConstructor;
-default: any;
-};
-/**
-* If set to true, renders all bento-radio-buttons in the group in a disabled state.
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* If passed as a prop, all bento-radio-buttons in an error state and renders the string beneath the buttons.
-*/
-errorMessage: {
-type: StringConstructor;
-default: any;
-};
-/**
-* The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.
-*/
-formId: {
-type: StringConstructor;
-default: any;
-};
-/**
-* If set to true, renders all bento-radio-buttons in the group in an error state.
-*
-* @deprecated Use "errorMessage" prop instead
-*/
-hasError: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Shows/hides the group label.
-*/
-hideLabel: {
-type: BooleanConstructor;
-default: any;
-};
-/**
-* The radio group's items.
-*/
-items: {
-type: PropType<BentoRadioGroupItems>;
-required: true;
-};
-/**
-* The name associated with the group. Required for accessibility purposes.
-*/
-label: {
-type: StringConstructor;
-required: true;
-};
-/**
-* Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.
-* Defaults to no value selected.
-*/
-modelValue: {
-type: PropType<BentoRadioGroupValue>;
-default: any;
-};
-/**
-* Indicates the field is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* If set to true, renders all bento-radio-button in the group in a readonly state.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Indicates the field is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* The radio group's layout. It can be vertical or horizontal. Defaults to vertical.
-*/
-variant: {
-type: PropType<BentoRadioGroupVariant | `${BentoRadioGroupVariant}`>;
-default: BentoRadioGroupVariant;
-validator: (value: BentoRadioGroupVariant) => boolean;
-};
 }, {
 focus: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (value: BentoRadioButtonValue) => void;
-} & {
-"update:model-value": (value: BentoRadioButtonValue) => void;
-}, string, Readonly<ExtractPropTypes<    {
-/**
-* Descriptive supporting text visbile underneath the label.
-*/
-description: {
-type: StringConstructor;
-default: any;
-};
-/**
-* If set to true, renders all bento-radio-buttons in the group in a disabled state.
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* If passed as a prop, all bento-radio-buttons in an error state and renders the string beneath the buttons.
-*/
-errorMessage: {
-type: StringConstructor;
-default: any;
-};
-/**
-* The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.
-*/
-formId: {
-type: StringConstructor;
-default: any;
-};
-/**
-* If set to true, renders all bento-radio-buttons in the group in an error state.
-*
-* @deprecated Use "errorMessage" prop instead
-*/
-hasError: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Shows/hides the group label.
-*/
-hideLabel: {
-type: BooleanConstructor;
-default: any;
-};
+} & {
+"update:model-value": (value: BentoRadioButtonValue) => void;
+}, string, Readonly<ExtractPropTypes<    {
 /**
-* The radio group's items.
+* Disable the radio button (optional)
 */
-items: {
-type: PropType<BentoRadioGroupItems>;
-required: true;
+disabled: {
+type: BooleanConstructor;
+default: boolean;
 };
 /**
-* The name associated with the group. Required for accessibility purposes.
+* Shows bento-radio-button in error state (optional)
 */
-label: {
-type: StringConstructor;
-required: true;
+hasError: {
+type: BooleanConstructor;
+default: boolean;
 };
 /**
-* Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.
-* Defaults to no value selected.
+* This property should not be used directly.
+* It will be used by v-model directive on radio component.
 */
 modelValue: {
-type: PropType<BentoRadioGroupValue>;
+type: PropType<BentoRadioButtonValue>;
 default: any;
 };
 /**
-* Indicates the field is optional.
+* Sets the radio button to readonly (optional)
 */
-optional: {
+readonly: {
 type: BooleanConstructor;
 default: boolean;
 };
 /**
-* If set to true, renders all bento-radio-button in the group in a readonly state.
+* Sets the properties of the BentoTag component that is placed next to the label.
+* {@see BentoTag}
 */
-readonly: {
-type: BooleanConstructor;
-default: boolean;
+tag: {
+type: PropType<BentoRadioButtonTag>;
+default: any;
 };
 /**
-* Indicates the field is required.
+* Indicates the value of the input that will be returned when it's checked
 */
-required: {
-type: BooleanConstructor;
-default: boolean;
+value: {
+type: PropType<BentoRadioButtonValue>;
+required: true;
 };
 /**
-* Tooltip message.
+* Sets the name of the radio input.
+* Used for differentiating radio groups or accessing input via form submission.
 */
-tooltipText: {
+name: {
 type: StringConstructor;
 default: any;
 };
-/**
-* The radio group's layout. It can be vertical or horizontal. Defaults to vertical.
-*/
-variant: {
-type: PropType<BentoRadioGroupVariant | `${BentoRadioGroupVariant}`>;
-default: BentoRadioGroupVariant;
-validator: (value: BentoRadioGroupVariant) => boolean;
-};
 }>>, {
+name: string;
+disabled: boolean;
+tag: any;
+readonly: boolean;
+hasError: boolean;
+modelValue: BentoRadioButtonValue;
+}>, {
+    default: (_: {}) => any;
+    description: (_: {}) => any;
+    content: (_: {}) => any;
+}>;
+
+export declare enum BentoRadioButtonStateClass {
+    DISABLED = "disabled",
+    READONLY = "readonly",
+    ERROR = "error"
+}
+
+export declare type BentoRadioButtonTag = InstanceType<typeof BentoTag>['$props'];
+
+export declare type BentoRadioButtonValue = string | number;
+
+/**
+ * A radio group component should be used whenever it is necessary to use a set of radio buttons
+ * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/
+ *
+ * import { BentoRadioGroup } from '../..';
+ *
+ * export default {
+ *     components: { BentoRadioGroup },
+ *     template: `
+ *             <bento-radio-group
+ *                label="Your group label"
+ *                :items="[
+ *                    { value: 1, label: 'Your label' },
+ *                    { value: 2, label: 'Another label', description: 'Your descriptive sub label' },
+ *                 ]"
+ *                 variant="horizontal"
+ *              />
+ *     `
+ * };
+ */
+export declare const BentoRadioGroup: __VLS_WithTemplateSlots_34<DefineComponent<__VLS_WithDefaults_43<__VLS_TypePropsToRuntimeProps_43<BentoRadioGroupProps>, {
+description: any;
+disabled: boolean;
+errorMessage: any;
+formId: any;
+hasError: boolean;
+hideLabel: any;
+modelValue: any;
+optional: boolean;
+readonly: boolean;
+required: boolean;
+tooltipText: any;
+variant: BentoRadioGroupVariant;
+}>, {
+focus: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+input: (value: BentoRadioButtonValue) => void;
+} & {
+"update:model-value": (value: BentoRadioButtonValue) => void;
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_43<__VLS_TypePropsToRuntimeProps_43<BentoRadioGroupProps>, {
+description: any;
+disabled: boolean;
+errorMessage: any;
+formId: any;
+hasError: boolean;
+hideLabel: any;
+modelValue: any;
+optional: boolean;
+readonly: boolean;
+required: boolean;
+tooltipText: any;
+variant: BentoRadioGroupVariant;
+}>>>, {
 description: string;
-variant: "horizontal" | "vertical" | BentoRadioGroupVariant;
+variant: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`;
 required: boolean;
 disabled: boolean;
 optional: boolean;
 readonly: boolean;
-tooltipText: string;
-hideLabel: boolean;
-errorMessage: string;
 hasError: boolean;
-modelValue: BentoRadioButtonValue;
-formId: string;
+modelValue: BentoRadioGroupValue | null;
+errorMessage: string;
+tooltipText: string;
+hideLabel: boolean | null;
+formId: string | null;
 }>, {
     content: (_: {}) => any;
     description: (_: {}) => any;
@@ -12253,6 +12066,46 @@ export declare interface BentoRadioGroupItem {
 
 export declare type BentoRadioGroupItems = Array<BentoRadioGroupItem>;
 
+export declare interface BentoRadioGroupProps extends FormField {
+    /**
+     * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.
+     * @default null
+     */
+    formId?: string | null;
+    /**
+     * If set to true, renders all bento-radio-buttons in the group in an error state.
+     * @deprecated Use "errorMessage" prop instead
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Shows/hides the group label.
+     * @default null
+     */
+    hideLabel?: boolean | null;
+    /**
+     * The radio group's items.
+     * Required.
+     */
+    items: BentoRadioGroupItems;
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     * Required.
+     */
+    label: string;
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.
+     * Defaults to no value selected.
+     * @default null
+     */
+    modelValue?: BentoRadioGroupValue | null;
+    /**
+     * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.
+     * @default BentoRadioGroupVariant.VERTICAL
+     */
+    variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`;
+}
+
 export declare type BentoRadioGroupValue = BentoRadioButtonValue;
 
 /**
@@ -12287,7 +12140,7 @@ export declare type BentoRangeFilterOptions = {
  *     `
  * }
  */
-export declare const BentoRichTextEditor: DefineComponent<__VLS_WithDefaults_39<__VLS_TypePropsToRuntimeProps_39<BentoRichTextEditorProps>, {
+export declare const BentoRichTextEditor: DefineComponent<__VLS_WithDefaults_45<__VLS_TypePropsToRuntimeProps_45<BentoRichTextEditorProps>, {
 description: any;
 disabled: boolean;
 errorMessage: any;
@@ -12299,7 +12152,7 @@ tooltipText: any;
 value: any;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (value: string) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_39<__VLS_TypePropsToRuntimeProps_39<BentoRichTextEditorProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_45<__VLS_TypePropsToRuntimeProps_45<BentoRichTextEditorProps>, {
 description: any;
 disabled: boolean;
 errorMessage: any;
@@ -12315,9 +12168,9 @@ description: string;
 label: string;
 required: boolean;
 disabled: boolean;
+errorMessage: string;
 tooltipText: string;
 hideLabel: boolean;
-errorMessage: string;
 mode: BentoRichTextEditorMode;
 }>;
 
@@ -12411,7 +12264,7 @@ export declare interface BentoRichTextEditorProps {
  *     }
  * }
  */
-export declare const BentoSearchBar: DefineComponent<__VLS_WithDefaults_40<__VLS_TypePropsToRuntimeProps_40<BentoSearchBarProps>, {
+export declare const BentoSearchBar: DefineComponent<__VLS_WithDefaults_46<__VLS_TypePropsToRuntimeProps_46<BentoSearchBarProps>, {
 condensed: boolean;
 debounceTime: number;
 disabled: boolean;
@@ -12433,7 +12286,7 @@ clear: () => void;
 blur: () => void;
 } & {
 focus: () => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_40<__VLS_TypePropsToRuntimeProps_40<BentoSearchBarProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_46<__VLS_TypePropsToRuntimeProps_46<BentoSearchBarProps>, {
 condensed: boolean;
 debounceTime: number;
 disabled: boolean;
@@ -12522,7 +12375,7 @@ export declare interface BentoSearchBarProps {
  *     }
  * }
  */
-export declare const BentoSecondaryNav: DefineComponent<__VLS_TypePropsToRuntimeProps_41<{
+export declare const BentoSecondaryNav: DefineComponent<__VLS_TypePropsToRuntimeProps_47<{
 /**
 * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },
 * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.
@@ -12535,7 +12388,7 @@ items: BentoSecondaryNavItems;
 value?: string;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 change: (category: string) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_41<{
+}, string, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_47<{
 /**
 * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },
 * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.
@@ -12552,7 +12405,7 @@ export declare type BentoSecondaryNavItems = Array<BentoSecondaryNavItemsItem |
 
 export declare interface BentoSecondaryNavItemsCategory {
     label: string;
-    items: BentoSecondaryNavItemsItem[];
+    items: Array<BentoSecondaryNavItemsItem>;
 }
 
 export declare interface BentoSecondaryNavItemsItem {
@@ -12580,7 +12433,7 @@ export declare interface BentoSecondaryNavState {
  *     `
  * }
  */
-export declare const BentoSegmentedControl: DefineComponent<__VLS_WithDefaults_41<__VLS_TypePropsToRuntimeProps_42<BentoSegmentedControlProps>, {
+export declare const BentoSegmentedControl: DefineComponent<__VLS_WithDefaults_47<__VLS_TypePropsToRuntimeProps_48<BentoSegmentedControlProps>, {
 ariaLabel: any;
 fullWidth: boolean;
 wrap: boolean;
@@ -12589,7 +12442,7 @@ modelValue: any;
 "update:model-value": (value: any) => void;
 } & {
 input: (value: BentoSegmentedControlValue) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_41<__VLS_TypePropsToRuntimeProps_42<BentoSegmentedControlProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_47<__VLS_TypePropsToRuntimeProps_48<BentoSegmentedControlProps>, {
 ariaLabel: any;
 fullWidth: boolean;
 wrap: boolean;
@@ -12627,7 +12480,7 @@ export declare interface BentoSegmentedControlProps {
     /**
      * Items that will populate the segmented control.
      */
-    items: BentoSegmentedControlItem[];
+    items: Array<BentoSegmentedControlItem>;
     /**
      * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
      */
@@ -12689,6 +12542,10 @@ export declare interface BentoSelectFilterOptions {
      * when the select filter has all items selected.
      */
     messagesPersistentButtonLabelAllSelectedKey?: string;
+    /**
+     * The event fire when the filter is opened.
+     */
+    onOpen?: () => void;
     lazy?: {
         /**
          * Indicates whether there are more items to load
@@ -12753,6 +12610,11 @@ export declare interface BentoSelectFilterOptions {
      * @default false
      */
     enableValueLabelPair?: boolean;
+    /**
+     * Enables a search bar that dynamically filters values
+     * @default true
+     */
+    dynamicFiltering?: boolean;
 }
 
 export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
@@ -12775,7 +12637,7 @@ export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
  *     `
  * }
  */
-export declare const BentoSelectionCard: __VLS_WithTemplateSlots_35<DefineComponent<    {
+export declare const BentoSelectionCard: __VLS_WithTemplateSlots_36<DefineComponent<    {
 /**
 * The description of the selection card
 */
@@ -12968,7 +12830,7 @@ fullyClickable: boolean;
  *     `,
  * }
  */
-export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_36<DefineComponent<    {
+export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_37<DefineComponent<    {
 /**
 * Descriptive supporting text visbile underneath the label.
 */
@@ -13023,7 +12885,7 @@ default: string;
 * The selection card group's items.
 */
 items: {
-type: PropType<BentoSelectionCardItem[]>;
+type: PropType<Array<BentoSelectionCardItem>>;
 required: true;
 };
 /**
@@ -13136,7 +12998,7 @@ default: string;
 * The selection card group's items.
 */
 items: {
-type: PropType<BentoSelectionCardItem[]>;
+type: PropType<Array<BentoSelectionCardItem>>;
 required: true;
 };
 /**
@@ -13198,10 +13060,10 @@ disabled: boolean;
 optional: boolean;
 readonly: boolean;
 layout: BentoSelectionCardGroupLayout;
+modelValue: BentoSelectionCardModelValue;
+errorMessage: string;
 tooltipText: string;
 hideLabel: boolean;
-errorMessage: string;
-modelValue: BentoSelectionCardModelValue;
 formId: string;
 itemsPerRow: GridLayoutColumnWidth;
 }>, {
@@ -13284,7 +13146,7 @@ export declare type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOp
  *     `
  * }
  */
-export declare const BentoSidepanel: __VLS_WithTemplateSlots_38<DefineComponent<    {
+export declare const BentoSidepanel: __VLS_WithTemplateSlots_39<DefineComponent<    {
 /**
 * The id of the current active page
 * Should be the same id as the BentoSidepanelPage to be displayed
@@ -13412,7 +13274,7 @@ export declare enum BentoSidepanelEvent {
  *     `
  * }
  */
-export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_37<DefineComponent<    {
+export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_38<DefineComponent<    {
 /**
 * List of actions that will be used to render the buttons.
 * First element in the list will be rendered as "primary".
@@ -13555,7 +13417,7 @@ destructiveActions: boolean;
  *     `
  * }
  */
-export declare const BentoStatus: __VLS_WithTemplateSlots_39<DefineComponent<__VLS_TypePropsToRuntimeProps_43<BentoStatusProps>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_43<BentoStatusProps>>>, {}>, {
+export declare const BentoStatus: __VLS_WithTemplateSlots_40<DefineComponent<__VLS_TypePropsToRuntimeProps_49<BentoStatusProps>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_49<BentoStatusProps>>>, {}>, {
     default: (_: {}) => any;
 }>;
 
@@ -13600,7 +13462,7 @@ export declare enum BentoStatusVariant {
  *     `
  * }
  */
-export declare const BentoStep: __VLS_WithTemplateSlots_41<DefineComponent<    {
+export declare const BentoStep: __VLS_WithTemplateSlots_42<DefineComponent<    {
 /**
 * Completed status. Used on non-linear steppers to indicate if the step is completed.
 */
@@ -13657,7 +13519,7 @@ substepIndex: number;
  *     `
  * }
  */
-export declare const BentoStepper: __VLS_WithTemplateSlots_40<DefineComponent<    {
+export declare const BentoStepper: __VLS_WithTemplateSlots_41<DefineComponent<    {
 /**
 * Type of stepper; defines how the stepper should behave. Default: linear
 * @values linear, non-linear
@@ -13720,7 +13582,7 @@ export declare type BentoStepperState = Ref<{
     latestActiveStep: number;
     type: `${BentoStepperTypeOption}`;
     variant: `${BentoStepperVariantOption}`;
-    steps: HTMLElement[];
+    steps: Array<HTMLElement>;
     isParentStep?: boolean;
     navigateToStep: (index: number) => void;
     registerStep: (stepState: BentoStepperStepExposeState) => void;
@@ -13729,7 +13591,7 @@ export declare type BentoStepperState = Ref<{
 
 export declare interface BentoStepperStepExposeState {
     buttonElement: HTMLButtonElement | Ref<UnwrapRef<HTMLButtonElement>>;
-    substeps: BentoStepperStepExposeState[] | Ref<BentoStepperStepExposeState[]>;
+    substeps: Array<BentoStepperStepExposeState> | Ref<Array<BentoStepperStepExposeState>>;
     stepContent: string | ComputedRef<string>;
 }
 
@@ -13771,7 +13633,7 @@ declare interface BentoStickyTabsOptions {
  *     `
  * }
  */
-export declare const BentoStructuredList: __VLS_WithTemplateSlots_42<DefineComponent<__VLS_WithDefaults_42<__VLS_TypePropsToRuntimeProps_44<{
+export declare const BentoStructuredList: __VLS_WithTemplateSlots_43<DefineComponent<__VLS_WithDefaults_48<__VLS_TypePropsToRuntimeProps_50<{
 /**
 * Width of the labels container, in pixels. Overrides layout prop.
 */
@@ -13795,7 +13657,7 @@ layout?: BentoStructuredListLayoutOptions;
 }>, {
 labelsWidth: any;
 layout: string;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_42<__VLS_TypePropsToRuntimeProps_44<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_48<__VLS_TypePropsToRuntimeProps_50<{
 /**
 * Width of the labels container, in pixels. Overrides layout prop.
 */
@@ -13849,7 +13711,7 @@ labelsWidth: number;
  *     `
  * }
  */
-export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_43<DefineComponent<__VLS_TypePropsToRuntimeProps_45<{
+export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_44<DefineComponent<__VLS_TypePropsToRuntimeProps_51<{
 /**
 * Label to display for the value
 */
@@ -13876,7 +13738,7 @@ searchTooltip?: string;
 truncate?: boolean;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 copy: (value: string) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_45<{
+}, string, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_51<{
 /**
 * Label to display for the value
 */
@@ -13931,10 +13793,10 @@ declare const BentoStructuredListLayoutOptions: string[];
  *     `
  * }
  */
-export declare const BentoSummaryGrid: __VLS_WithTemplateSlots_44<DefineComponent<__VLS_WithDefaults_43<__VLS_TypePropsToRuntimeProps_46<BentoSummaryGridProps>, {
+export declare const BentoSummaryGrid: __VLS_WithTemplateSlots_45<DefineComponent<__VLS_WithDefaults_49<__VLS_TypePropsToRuntimeProps_52<BentoSummaryGridProps>, {
 columnWidth: any;
 slashedZero: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_43<__VLS_TypePropsToRuntimeProps_46<BentoSummaryGridProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_49<__VLS_TypePropsToRuntimeProps_52<BentoSummaryGridProps>, {
 columnWidth: any;
 slashedZero: boolean;
 }>>>, {
@@ -13969,7 +13831,7 @@ export declare interface BentoSummaryGridColumnWidth {
  *     `
  * }
  */
-export declare const BentoSummaryGridItemAmount: __VLS_WithTemplateSlots_45<DefineComponent<__VLS_WithDefaults_44<__VLS_TypePropsToRuntimeProps_47<BentoSummaryGridItemAmountProps>, {
+export declare const BentoSummaryGridItemAmount: __VLS_WithTemplateSlots_46<DefineComponent<__VLS_WithDefaults_50<__VLS_TypePropsToRuntimeProps_53<BentoSummaryGridItemAmountProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -13986,7 +13848,7 @@ underlineTooltipText: any;
 "copy-click": (event: MouseEvent) => void;
 } & {
 "info-icon-mouseenter": (event: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_44<__VLS_TypePropsToRuntimeProps_47<BentoSummaryGridItemAmountProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_50<__VLS_TypePropsToRuntimeProps_53<BentoSummaryGridItemAmountProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14046,7 +13908,7 @@ export declare interface BentoSummaryGridItemAmountProps extends BaseSummaryGrid
  *     `
  * }
  */
-export declare const BentoSummaryGridItemCustom: __VLS_WithTemplateSlots_49<DefineComponent<__VLS_WithDefaults_48<__VLS_TypePropsToRuntimeProps_51<BentoSummaryGridItemCustomProps>, {
+export declare const BentoSummaryGridItemCustom: __VLS_WithTemplateSlots_50<DefineComponent<__VLS_WithDefaults_54<__VLS_TypePropsToRuntimeProps_57<BentoSummaryGridItemCustomProps>, {
 copy: any;
 infoIconTooltipText: any;
 fitContent: boolean;
@@ -14056,7 +13918,7 @@ underlineTooltipText: any;
 "copy-click": (event: MouseEvent) => void;
 } & {
 "info-icon-mouseenter": (event: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_48<__VLS_TypePropsToRuntimeProps_51<BentoSummaryGridItemCustomProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_54<__VLS_TypePropsToRuntimeProps_57<BentoSummaryGridItemCustomProps>, {
 copy: any;
 infoIconTooltipText: any;
 fitContent: boolean;
@@ -14120,7 +13982,7 @@ export declare interface BentoSummaryGridItemCustomProps {
  *     `
  * }
  */
-export declare const BentoSummaryGridItemNumeric: __VLS_WithTemplateSlots_46<DefineComponent<__VLS_WithDefaults_45<__VLS_TypePropsToRuntimeProps_48<BentoSummaryGridItemNumericProps>, {
+export declare const BentoSummaryGridItemNumeric: __VLS_WithTemplateSlots_47<DefineComponent<__VLS_WithDefaults_51<__VLS_TypePropsToRuntimeProps_54<BentoSummaryGridItemNumericProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14136,7 +13998,7 @@ underlineTooltipText: any;
 "copy-click": (event: MouseEvent) => void;
 } & {
 "info-icon-mouseenter": (event: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_45<__VLS_TypePropsToRuntimeProps_48<BentoSummaryGridItemNumericProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_51<__VLS_TypePropsToRuntimeProps_54<BentoSummaryGridItemNumericProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14195,7 +14057,7 @@ export declare interface BentoSummaryGridItemNumericProps extends BaseSummaryGri
  *     `
  * }
  */
-export declare const BentoSummaryGridItemPercentage: __VLS_WithTemplateSlots_47<DefineComponent<__VLS_WithDefaults_46<__VLS_TypePropsToRuntimeProps_49<BentoSummaryGridItemPercentageProps>, {
+export declare const BentoSummaryGridItemPercentage: __VLS_WithTemplateSlots_48<DefineComponent<__VLS_WithDefaults_52<__VLS_TypePropsToRuntimeProps_55<BentoSummaryGridItemPercentageProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14211,7 +14073,7 @@ underlineTooltipText: any;
 "copy-click": (event: MouseEvent) => void;
 } & {
 "info-icon-mouseenter": (event: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_46<__VLS_TypePropsToRuntimeProps_49<BentoSummaryGridItemPercentageProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_52<__VLS_TypePropsToRuntimeProps_55<BentoSummaryGridItemPercentageProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14276,7 +14138,7 @@ export declare enum BentoSummaryGridItemSize {
  *     `
  * }
  */
-export declare const BentoSummaryGridItemText: __VLS_WithTemplateSlots_48<DefineComponent<__VLS_WithDefaults_47<__VLS_TypePropsToRuntimeProps_50<BentoSummaryGridItemTextProps>, {
+export declare const BentoSummaryGridItemText: __VLS_WithTemplateSlots_49<DefineComponent<__VLS_WithDefaults_53<__VLS_TypePropsToRuntimeProps_56<BentoSummaryGridItemTextProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14286,7 +14148,7 @@ underlineTooltipText: any;
 "copy-click": (event: MouseEvent) => void;
 } & {
 "info-icon-mouseenter": (event: MouseEvent) => void;
-}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_47<__VLS_TypePropsToRuntimeProps_50<BentoSummaryGridItemTextProps>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_53<__VLS_TypePropsToRuntimeProps_56<BentoSummaryGridItemTextProps>, {
 copy: any;
 fitContent: boolean;
 infoIconTooltipText: any;
@@ -14378,12 +14240,12 @@ export declare interface BentoSummaryGridProps {
  *    </bento-tabs>
  * </template>
  */
-export declare const BentoTab: __VLS_WithTemplateSlots_50<DefineComponent<__VLS_WithDefaults_49<__VLS_TypePropsToRuntimeProps_52<BentoTabProps>, {
+export declare const BentoTab: __VLS_WithTemplateSlots_51<DefineComponent<__VLS_WithDefaults_55<__VLS_TypePropsToRuntimeProps_58<BentoTabProps>, {
 counter: any;
 disabled: boolean;
 hidden: boolean;
 withNotificationIndicator: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_49<__VLS_TypePropsToRuntimeProps_52<BentoTabProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_55<__VLS_TypePropsToRuntimeProps_58<BentoTabProps>, {
 counter: any;
 disabled: boolean;
 hidden: boolean;
@@ -14405,7 +14267,7 @@ declare interface BentoTab_2 {
     disabled: Ref<boolean>;
     hidden: Ref<boolean>;
     id: string;
-    title: MaybeRef<string>;
+    title: MaybeRef_2<string>;
     withNotificationIndicator: Ref<boolean>;
 }
 
@@ -14532,11 +14394,11 @@ declare enum BentoTabsEvent {
     ACTIVE_TAB_INDEX = "update:active-tab-index"
 }
 
-export declare const BentoTag: DefineComponent<__VLS_WithDefaults_38<__VLS_TypePropsToRuntimeProps_38<BentoTagProps>, {
+export declare const BentoTag: DefineComponent<__VLS_WithDefaults_44<__VLS_TypePropsToRuntimeProps_44<BentoTagProps>, {
 label: any;
 truncate: any;
 variant: BentoTagVariant;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_38<__VLS_TypePropsToRuntimeProps_38<BentoTagProps>, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_44<__VLS_TypePropsToRuntimeProps_44<BentoTagProps>, {
 label: any;
 truncate: any;
 variant: BentoTagVariant;
@@ -14550,7 +14412,7 @@ export declare type BentoTagListboxOptionItem = OmitStrict<BentoListboxOptionIte
     variant: BentoTagVariant | `${BentoTagVariant}`;
 };
 
-export declare type BentoTagListboxOptions = BentoTagListboxOptionItem[];
+export declare type BentoTagListboxOptions = Array<BentoTagListboxOptionItem>;
 
 export declare interface BentoTagProps {
     /**
@@ -14593,114 +14455,23 @@ declare interface BentoTeleportProps {
     to?: string;
 }
 
-export declare const BentoTextarea: DefineComponent<    {
-/**
-* Text that labels an the input element
-*/
-ariaLabel: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Text that shows number of characters in textarea
-*/
-characterLimit: {
-type: NumberConstructor;
-default: any;
-};
-/**
-* Text displayed as the help text of the textarea
-*/
-description: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Disables the possibility of changing value in the textarea
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* If set to true, shows a button to clear all the text
-*/
-clearable: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds error text
-*/
-errorMessage: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Sets the height of the textarea, e.g 200px OR 20vh
-*/
-height: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Text displayed as the label of the textarea
-*/
-label: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Highlights the textarea is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Text displayed as the placeholder of the textarea
-*/
-placeholder: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Set the textarea to read only state.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Indicates the possibility of resize the textarea
-*/
-resizable: {
-type: PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>;
-default: BentoTextareaResizeOption;
-validator: (value: BentoTextareaResizeOption) => boolean;
-};
-/**
-* Highlights the textarea is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds a info icon next to the label to display the passed tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Text displayed as the value of the textarea
-*/
-value: {
-type: StringConstructor;
-default: string;
-};
-}, {
+export declare const BentoTextarea: DefineComponent<__VLS_WithDefaults_56<__VLS_TypePropsToRuntimeProps_59<BentoTextareaProps>, {
+ariaLabel: any;
+characterLimit: any;
+description: string;
+disabled: boolean;
+clearable: boolean;
+errorMessage: string;
+height: any;
+label: string;
+optional: boolean;
+placeholder: string;
+readonly: boolean;
+resizable: string;
+required: boolean;
+tooltipText: any;
+value: string;
+}>, {
 focus: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 blur: () => void;
@@ -14718,114 +14489,23 @@ input: (value: string) => void;
 keydown: (event: KeyboardEvent) => void;
 } & {
 keyup: (event: KeyboardEvent) => void;
-}, string, Readonly<ExtractPropTypes<    {
-/**
-* Text that labels an the input element
-*/
-ariaLabel: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Text that shows number of characters in textarea
-*/
-characterLimit: {
-type: NumberConstructor;
-default: any;
-};
-/**
-* Text displayed as the help text of the textarea
-*/
-description: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Disables the possibility of changing value in the textarea
-*/
-disabled: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* If set to true, shows a button to clear all the text
-*/
-clearable: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds error text
-*/
-errorMessage: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Sets the height of the textarea, e.g 200px OR 20vh
-*/
-height: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Text displayed as the label of the textarea
-*/
-label: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Highlights the textarea is optional.
-*/
-optional: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Text displayed as the placeholder of the textarea
-*/
-placeholder: {
-type: StringConstructor;
-default: string;
-};
-/**
-* Set the textarea to read only state.
-*/
-readonly: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Indicates the possibility of resize the textarea
-*/
-resizable: {
-type: PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>;
-default: BentoTextareaResizeOption;
-validator: (value: BentoTextareaResizeOption) => boolean;
-};
-/**
-* Highlights the textarea is required.
-*/
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
-* Adds a info icon next to the label to display the passed tooltip message.
-*/
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-/**
-* Text displayed as the value of the textarea
-*/
-value: {
-type: StringConstructor;
-default: string;
-};
-}>>, {
+}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_56<__VLS_TypePropsToRuntimeProps_59<BentoTextareaProps>, {
+ariaLabel: any;
+characterLimit: any;
+description: string;
+disabled: boolean;
+clearable: boolean;
+errorMessage: string;
+height: any;
+label: string;
+optional: boolean;
+placeholder: string;
+readonly: boolean;
+resizable: string;
+required: boolean;
+tooltipText: any;
+value: string;
+}>>>, {
 value: string;
 description: string;
 label: string;
@@ -14833,16 +14513,49 @@ required: boolean;
 disabled: boolean;
 optional: boolean;
 readonly: boolean;
-height: string;
+height: string | null;
 ariaLabel: string;
-tooltipText: string;
 errorMessage: string;
+tooltipText: string;
 characterLimit: number;
 placeholder: string;
 clearable: boolean;
-resizable: "none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption;
+resizable: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;
 }>;
 
+declare interface BentoTextareaProps extends FormField {
+    /**
+     * Text that labels the input element
+     * @default undefined
+     */
+    ariaLabel?: string;
+    /**
+     * Text that shows number of characters in textarea
+     * @default undefined
+     */
+    characterLimit?: number;
+    /**
+     * If set to true, shows a button to clear all the text
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Sets the height of the textarea, e.g 200px OR 20vh
+     * @default null
+     */
+    height?: string | null;
+    /**
+     * Indicates the possibility of resize the textarea.
+     * Accepts the Enum or the string literal version.
+     * @default BentoTextareaResizeOption.BOTH
+     */
+    resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;
+    /**
+     * Text displayed as the value of the textarea
+     */
+    value?: string;
+}
+
 /**
  * @deprecated for usage with properties since version 2.0. Use the string literal instead.
  */
@@ -14935,127 +14648,155 @@ updateNoteContent: (newTimelineNoteContent: string) => void;
 addNoteToTimeline: () => void;
 showAddNoteTextArea: Ref<boolean>;
 addNoteTextareaRef: Ref<Vue3Instance<    {}, Readonly<ExtractPropTypes<    {
-ariaLabel: {
-type: StringConstructor;
-default: any;
-};
-characterLimit: {
-type: NumberConstructor;
-default: any;
+value: {
+type: PropType<string>;
+} & {
+default: string;
 };
 description: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
+default: string;
+};
+label: {
+type: PropType<string>;
+} & {
 default: string;
 };
+required: {
+type: PropType<boolean>;
+} & {
+default: boolean;
+};
 disabled: {
-type: BooleanConstructor;
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-clearable: {
-type: BooleanConstructor;
+optional: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-errorMessage: {
-type: StringConstructor;
-default: string;
+readonly: {
+type: PropType<boolean>;
+} & {
+default: boolean;
 };
 height: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: any;
 };
-label: {
-type: StringConstructor;
+ariaLabel: {
+type: PropType<string>;
+} & {
+default: any;
+};
+errorMessage: {
+type: PropType<string>;
+} & {
 default: string;
 };
-optional: {
-type: BooleanConstructor;
-default: boolean;
+tooltipText: {
+type: PropType<string>;
+} & {
+default: any;
+};
+characterLimit: {
+type: PropType<number>;
+} & {
+default: any;
 };
 placeholder: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: string;
 };
-readonly: {
-type: BooleanConstructor;
+clearable: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
 resizable: {
-type: PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>;
-default: BentoTextareaResizeOption;
-validator: (value: BentoTextareaResizeOption) => boolean;
-};
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-value: {
-type: StringConstructor;
+type: PropType<"none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption>;
+} & {
 default: string;
 };
 }>>, Readonly<ExtractPropTypes<    {
-ariaLabel: {
-type: StringConstructor;
-default: any;
-};
-characterLimit: {
-type: NumberConstructor;
-default: any;
+value: {
+type: PropType<string>;
+} & {
+default: string;
 };
 description: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
+default: string;
+};
+label: {
+type: PropType<string>;
+} & {
 default: string;
 };
+required: {
+type: PropType<boolean>;
+} & {
+default: boolean;
+};
 disabled: {
-type: BooleanConstructor;
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-clearable: {
-type: BooleanConstructor;
+optional: {
+type: PropType<boolean>;
+} & {
+default: boolean;
+};
+readonly: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
+height: {
+type: PropType<string>;
+} & {
+default: any;
+};
+ariaLabel: {
+type: PropType<string>;
+} & {
+default: any;
+};
 errorMessage: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: string;
 };
-height: {
-type: StringConstructor;
+tooltipText: {
+type: PropType<string>;
+} & {
 default: any;
 };
-label: {
-type: StringConstructor;
-default: string;
-};
-optional: {
-type: BooleanConstructor;
-default: boolean;
+characterLimit: {
+type: PropType<number>;
+} & {
+default: any;
 };
 placeholder: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: string;
 };
-readonly: {
-type: BooleanConstructor;
+clearable: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
 resizable: {
-type: PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>;
-default: BentoTextareaResizeOption;
-validator: (value: BentoTextareaResizeOption) => boolean;
-};
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-value: {
-type: StringConstructor;
+type: PropType<"none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption>;
+} & {
 default: string;
 };
 }>>, {
@@ -15082,138 +14823,166 @@ required: boolean;
 disabled: boolean;
 optional: boolean;
 readonly: boolean;
-height: string;
+height: string | null;
 ariaLabel: string;
-tooltipText: string;
 errorMessage: string;
+tooltipText: string;
 characterLimit: number;
 placeholder: string;
 clearable: boolean;
-resizable: "none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption;
+resizable: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;
 }, true, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<ExtractPropTypes<    {
-ariaLabel: {
-type: StringConstructor;
-default: any;
-};
-characterLimit: {
-type: NumberConstructor;
-default: any;
+value: {
+type: PropType<string>;
+} & {
+default: string;
 };
 description: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
+default: string;
+};
+label: {
+type: PropType<string>;
+} & {
 default: string;
 };
+required: {
+type: PropType<boolean>;
+} & {
+default: boolean;
+};
 disabled: {
-type: BooleanConstructor;
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-clearable: {
-type: BooleanConstructor;
+optional: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-errorMessage: {
-type: StringConstructor;
-default: string;
+readonly: {
+type: PropType<boolean>;
+} & {
+default: boolean;
 };
 height: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: any;
 };
-label: {
-type: StringConstructor;
+ariaLabel: {
+type: PropType<string>;
+} & {
+default: any;
+};
+errorMessage: {
+type: PropType<string>;
+} & {
 default: string;
 };
-optional: {
-type: BooleanConstructor;
-default: boolean;
+tooltipText: {
+type: PropType<string>;
+} & {
+default: any;
+};
+characterLimit: {
+type: PropType<number>;
+} & {
+default: any;
 };
 placeholder: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: string;
 };
-readonly: {
-type: BooleanConstructor;
+clearable: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
 resizable: {
-type: PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>;
-default: BentoTextareaResizeOption;
-validator: (value: BentoTextareaResizeOption) => boolean;
-};
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-value: {
-type: StringConstructor;
+type: PropType<"none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption>;
+} & {
 default: string;
 };
 }>>> & ShallowUnwrapRef<    {
 focus: () => void;
 }> & ExtractComputedReturns<    {}> & ComponentCustomProperties & Readonly<ExtractPropTypes<    {
-ariaLabel: {
-type: StringConstructor;
-default: any;
-};
-characterLimit: {
-type: NumberConstructor;
-default: any;
+value: {
+type: PropType<string>;
+} & {
+default: string;
 };
 description: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
+default: string;
+};
+label: {
+type: PropType<string>;
+} & {
 default: string;
 };
+required: {
+type: PropType<boolean>;
+} & {
+default: boolean;
+};
 disabled: {
-type: BooleanConstructor;
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-clearable: {
-type: BooleanConstructor;
+optional: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
-errorMessage: {
-type: StringConstructor;
-default: string;
+readonly: {
+type: PropType<boolean>;
+} & {
+default: boolean;
 };
 height: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: any;
 };
-label: {
-type: StringConstructor;
+ariaLabel: {
+type: PropType<string>;
+} & {
+default: any;
+};
+errorMessage: {
+type: PropType<string>;
+} & {
 default: string;
 };
-optional: {
-type: BooleanConstructor;
-default: boolean;
+tooltipText: {
+type: PropType<string>;
+} & {
+default: any;
+};
+characterLimit: {
+type: PropType<number>;
+} & {
+default: any;
 };
 placeholder: {
-type: StringConstructor;
+type: PropType<string>;
+} & {
 default: string;
 };
-readonly: {
-type: BooleanConstructor;
+clearable: {
+type: PropType<boolean>;
+} & {
 default: boolean;
 };
 resizable: {
-type: PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>;
-default: BentoTextareaResizeOption;
-validator: (value: BentoTextareaResizeOption) => boolean;
-};
-required: {
-type: BooleanConstructor;
-default: boolean;
-};
-tooltipText: {
-type: StringConstructor;
-default: any;
-};
-value: {
-type: StringConstructor;
+type: PropType<"none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption>;
+} & {
 default: string;
 };
 }>>>;
@@ -15395,9 +15164,9 @@ export declare interface BentoTimelineConfigData {
     showAll: Ref<boolean>;
     showMoreIndex: Ref<number>;
     hiddenItems: Ref<number>;
-    visibleIndexes: Ref<number[]>;
+    visibleIndexes: Ref<Array<number>>;
     timegapLimit: Ref<BentoTimelineGapObject>;
-    timelineEntries: Ref<BentoTimelineEntry[]>;
+    timelineEntries: Ref<Array<BentoTimelineEntry>>;
 }
 
 export declare type BentoTimelineDataList = Array<BentoTimelineDataListObject>;
@@ -15541,7 +15310,7 @@ timegapAriaLabel: ComputedRef<string>;
 isLastItem: ComputedRef<boolean>;
 generateUid: (value: string) => string;
 hasSlot: (name: string) => boolean;
-t: (key: "showMore" | "showLess" | "timegap", values?: default_2.Values) => string;
+t: (key: "showMore" | "showLess" | "timegap", ...args: Array<any>) => string;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<    {
 /**
 * Additional timestamp of the event
@@ -15717,7 +15486,7 @@ export declare type BentoToastItemsList = Array<BentoToastItem>;
  *     `,
  * }
  */
-export declare const BentoToggle: DefineComponent<    {
+export declare const BentoToggle: __VLS_WithTemplateSlots_52<DefineComponent<    {
 /**
 * @deprecated from version 2.0.0. Use the aria-label attribute instead.
 */
@@ -15758,20 +15527,9 @@ value: {
 type: BooleanConstructor;
 default: boolean;
 };
-}, {
-toggleInput: Ref<boolean>;
-computedAriaLabel: ComputedRef<string>;
-computedDescription: ComputedRef<string>;
-defaultSlotValue: string;
-descriptionSlotValue: string;
-conditionalClasses: ComputedRef<    {
-[key: string]: boolean;
-}>;
-descriptionId: string;
-hasSlot: (name: string) => boolean;
-onChange: (event: Event) => void;
-onClick: (event: Event) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "input"[], string, Readonly<ExtractPropTypes<    {
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+input: (value: boolean) => void;
+}, string, Readonly<ExtractPropTypes<    {
 /**
 * @deprecated from version 2.0.0. Use the aria-label attribute instead.
 */
@@ -15818,6 +15576,9 @@ disabled: boolean;
 readonly: boolean;
 ariaLabel: string;
 labelPosition: "after" | "before" | BentoToggleLabelPosition;
+}>, {
+    default: (_: {}) => any;
+    description: (_: {}) => any;
 }>;
 
 /**
@@ -16045,9 +15806,9 @@ default: any;
 *
 */
 steps: {
-type: PropType<BentoTutorialStep[]>;
+type: PropType<Array<BentoTutorialStep>>;
 required: true;
-validator: (value: BentoTutorialStep[]) => boolean;
+validator: (value: Array<BentoTutorialStep>) => boolean;
 };
 /**
 * Options to control the scroll into view behavior.
@@ -16073,9 +15834,9 @@ default: any;
 *
 */
 steps: {
-type: PropType<BentoTutorialStep[]>;
+type: PropType<Array<BentoTutorialStep>>;
 required: true;
-validator: (value: BentoTutorialStep[]) => boolean;
+validator: (value: Array<BentoTutorialStep>) => boolean;
 };
 /**
 * Options to control the scroll into view behavior.
@@ -16120,7 +15881,7 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: __VLS_WithTemplateSlots_51<DefineComponent<__VLS_WithDefaults_50<__VLS_TypePropsToRuntimeProps_53<{
+export declare const BentoTypography: __VLS_WithTemplateSlots_53<DefineComponent<__VLS_WithDefaults_57<__VLS_TypePropsToRuntimeProps_60<{
 /**
 * Sets the HTML DOM element.
 * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -16168,7 +15929,7 @@ stronger: boolean;
 strongest: boolean;
 variant: BentoTypographyVariant;
 wide: boolean;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_50<__VLS_TypePropsToRuntimeProps_53<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes<__VLS_WithDefaults_57<__VLS_TypePropsToRuntimeProps_60<{
 /**
 * Sets the HTML DOM element.
 * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -16335,7 +16096,7 @@ declare interface DateRangePickerCalendarRangeSelectorItem {
 
 declare type DateRangePickerCalendarRangeSelectorItems = Array<DateRangePickerCalendarRangeSelectorItem>;
 
-declare type DropdownProps = InstanceType<typeof BentoDropdown>['$props'];
+declare type DropdownProps = BentoDropdownProps;
 
 declare type Element_2 = HTMLElement & {
     __onClickOutside_stop?: () => void;
@@ -16360,56 +16121,43 @@ export declare type Expand<T> = T extends infer O ? {
  */
 export declare type Fn = () => void;
 
-declare interface FormField {
+export declare interface FormField {
     /**
      * If set, displays a description text for the input.
      */
     description?: string;
-
     /**
      * If true, disables user interaction with the field.
      */
     disabled?: boolean;
-
     /**
      * If set, displays an error message and applies error styling to the field.
      */
     errorMessage?: string;
-
     /**
      * The text label displayed for the field.
      */
     label?: string;
-
     /**
      * If true, indicates that the field is optional.
      */
     optional?: boolean;
-
     /**
      * The placeholder text displayed when the field is empty.
      */
     placeholder?: string;
-
     /**
      * If true, makes the field's value readonly, preventing user modification.
      */
     readonly?: boolean;
-
     /**
      * If true, indicates that the field is required.
      */
     required?: boolean;
-
     /**
      * If set, displays an info icon with this tooltip message next to the label.
      */
     tooltipText?: string;
-
-    /**
-     * The current value of the field.
-     */
-    value?: string | number;
 }
 
 declare interface GridLayoutColumnWidth {
@@ -16501,6 +16249,13 @@ export declare type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
  */
 export declare type MaybeRef<T> = T | Ref<T> | Ref<UnwrapRef<T>>;
 
+/**
+ * As recommmended by the vue community to use this type when you are not sure
+ * if the argument is a ref.
+ * Source: https://github.com/vueuse/vueuse/blob/main/packages/shared/utils/types.ts#L28
+ */
+declare type MaybeRef_2<T> = T | Ref<T>;
+
 /**
  * Validates if the length of the provided value is greater than or equal to the specified length.
  *
@@ -16512,15 +16267,13 @@ export declare function minLength(value: BentoInputFieldValue, length?: number):
 
 export declare type OmitStrict<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
-declare type OmitStrict_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
 declare type OnClickOutsideHandler = (evt: PointerEvent | FocusEvent) => void;
 
 declare interface OnClickOutsideOptions {
     /**
      * List of elements that should not trigger the event.
      */
-    ignore?: (MaybeElementRef | string)[];
+    ignore?: Array<MaybeElementRef | string>;
     /**
      * Use capturing phase for internal event listener.
      * @default true
@@ -16635,6 +16388,63 @@ export declare interface ToastStack {
  */
 export declare function toTypedSchema<T extends ZodSchema>(formSchema: T): T;
 
+/**
+ * A composable to wire the `bento-base-filter` component for the mandatory fields and events.
+ *
+ * @usage
+ * ```vue
+ * <template>
+ *    <bento-base-filter
+ *       :disable-apply-button="isApplyButtonDisabled"
+ *       :disable-secondary-button="isSecondaryButtonDisabled"
+ *       @ apply="updateFilter"
+ *       @ clear="clearFilter(updateFilter)"
+ *       @ open="openFilter"
+ *       @ reset="resetFilter(updateFilter)"
+ *     >
+ *          <!-- CONTENT HERE -->
+ *     </bento-base-filter>
+ * </template>
+ * <script>
+ *    import { ref } from 'vue'
+ *    import { useBentoBaseFilter, BentoBaseFilter, BentoBaseFilterProps } from '../..'
+ *
+ *    type CustomFilterValue = boolean
+ *    const props = defineProps<BentoBaseFilterProps<CustomFilterValue>>();
+ *
+ *    const {
+ *       // Values
+ *       internalFilterValue,
+ *       isSecondaryButtonDisabled,
+ *       isApplyButtonDisabled,
+ *
+ *        // Methods
+ *        clearFilter,
+ *        resetFilter,
+ *        openFilter,
+ *    } = useBentoBaseFilter<CustomFilterValue>(toRef(props, 'value'), toRef(props, 'defaultValue'));
+ * </script>
+ * ```
+ *
+ * @param appliedFilter The currently applied filter value.
+ * @param defaultFilter The default filter value (if available).
+ * @returns An object containing refs and functions:
+ * - `internalFilterValue`: The temporary state of the filter before it's applied.
+ * - `isSecondaryButtonDisabled`: `true` if the secondary (clear/reset) button should be disabled.
+ * - `isApplyButtonDisabled`: `true` if the apply button should be disabled.
+ * - `clearFilter`: Clears the filter to its initial or default state.
+ * - `resetFilter`: Resets the filter to its default state.
+ * - `openFilter`: Syncs the internal state with the applied filter.
+ */
+export declare function useBentoBaseFilter<T>(appliedFilter: Ref<T>, defaultFilter: Ref<T>): {
+    internalFilterValue: Ref<T>;
+    isSecondaryButtonDisabled: ComputedRef<boolean>;
+    isApplyButtonDisabled: ComputedRef<boolean>;
+    clearFilter: (callback?: (newValue: T) => void) => void;
+    resetFilter: (callback?: (newValue: T) => void) => void;
+    openFilter: (callback?: (newValue: T) => void) => void;
+};
+
 export declare interface UseBentoTheme {
     getTheme: () => string;
     setTheme: (theme: BentoTheme | `${BentoTheme}`) => void;
@@ -16680,14 +16490,14 @@ export declare const useClickOutside: <T extends OnClickOutsideOptions>(target:
  *
  * @returns a translated country name
  */
-export declare const useCountryCapital: (code: MaybeRef<string>, locale: MaybeRef<string>, useFallback?: boolean) => ComputedRef<string>;
+export declare const useCountryCapital: (code: MaybeRef_2<string>, locale: MaybeRef_2<string>, useFallback?: boolean) => ComputedRef<string>;
 
 /**
  * Maps an ISO code to it's translated country name.
  *
  * @returns a translated country name
  */
-export declare const useCountryName: (code: MaybeRef<string>, locale: MaybeRef<string>, useFallback?: boolean) => ComputedRef<string>;
+export declare const useCountryName: (code: MaybeRef_2<string>, locale: MaybeRef_2<string>, useFallback?: boolean) => ComputedRef<string>;
 
 /**
  * Retrieves a country's phone number code.
@@ -16695,7 +16505,7 @@ export declare const useCountryName: (code: MaybeRef<string>, locale: MaybeRef<s
  * @param countryCode 2 character code in ISO 3166-1 alpha-2 format
  * @returns Country's phone code
  */
-export declare const useCountryPhoneCode: (countryCode: MaybeRef<string>) => ComputedRef<string>;
+export declare const useCountryPhoneCode: (countryCode: MaybeRef_2<string>) => ComputedRef<string>;
 
 /**
  * useForm composable configuration object
@@ -16750,7 +16560,7 @@ export declare interface UseForm<T> {
  */
 export declare function useForm<T extends ZodSchema>({ validationSchema, }: UseForm<T>): {
     errorBag: Ref<{
-        [P in allKeys<(typeof validationSchema)['_type']>]?: string[];
+        [P in allKeys<(typeof validationSchema)['_type']>]?: Array<string>;
     }>;
     errors: Ref<{
         [P in allKeys<(typeof validationSchema)['_type']>]?: string;
@@ -16769,7 +16579,7 @@ export declare function useForm<T extends ZodSchema>({ validationSchema, }: UseF
  * @returns {Ref<BentoSearchBarData>} New instance of the array filtered by the {@param searchTerm} text
  * @param {Ref<Boolean>} ignoreGroups - Boolean that determines if search returns items with subitems
  */
-export declare function useSearchBarFilter<T extends BentoSearchBarItem>(searchTerm: Ref<string>, data: Ref<T[]>, searchEvent?: (searchValue: string) => void, ignoreGroups?: Ref<boolean>): ComputedRef<any>;
+export declare function useSearchBarFilter<T extends BentoSearchBarItem>(searchTerm: Ref<string>, data: Ref<Array<T>>, searchEvent?: (searchValue: string) => void, ignoreGroups?: Ref<boolean>): ComputedRef<any>;
 
 declare type UseVirtualListItemHeight = number | ((index: number) => number);
 
@@ -16782,6 +16592,6 @@ export declare type VueInstance = ComponentPublicInstance;
  * type Vue | Element | (Vue | Element)[] | undefined
  * ```
  */
-export declare type VueNodeElement = Component | Element | (Component | Element)[] | undefined;
+export declare type VueNodeElement = Component | Element | Array<Component | Element> | undefined;
 
 export { }