@adyen/bento-vue2 1.22.0 → 1.24.0

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

@@ -2,6 +2,7 @@ import { ComponentOptionsMixin } from 'vue/types/v3-component-options';
 import { ComponentOptionsMixin as ComponentOptionsMixin_2 } from 'vue/types/v3-component-options.js';
 import type { ComponentPublicInstance } from 'vue';
 import { ComputedRef } from 'vue';
+import { DeepReadonly } from 'vue';
 import { default as default_2 } from 'vue-i18n';
 import { DefaultKeys } from 'vue/types/v3-component-props';
 import { DefineComponent } from 'vue';
@@ -25,6 +26,8 @@ declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -47,6 +50,17 @@ declare type __VLS_TypePropsToRuntimeProps_2<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_3<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_3<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -55,6 +69,14 @@ declare type __VLS_WithDefaults<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_2<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -193,6 +215,12 @@ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_30<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -1266,9 +1294,9 @@ export declare const BentoCard: DefineComponent<
                     wide: boolean;
                     stronger: boolean;
                     strongest: boolean;
-                    variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-                    medium: boolean;
                     large: boolean;
+                    medium: boolean;
+                    variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
                 }> &
                     Omit<
                         Readonly<
@@ -1286,34 +1314,39 @@ export declare const BentoCard: DefineComponent<
                                         | 'span'
                                         | BentoTypographyElement
                                     >;
+                                } & {
                                     default: BentoTypographyElement;
-                                    validator: (value: BentoTypographyElement) => boolean;
                                 };
-                                stronger: {
-                                    type: BooleanConstructor;
+                                wide: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
-                                strongest: {
-                                    type: BooleanConstructor;
+                                stronger: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
-                                variant: {
-                                    type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                    default: BentoTypographyVariant;
-                                    validator: (value: BentoTypographyVariant) => boolean;
-                                };
-                                medium: {
-                                    type: BooleanConstructor;
+                                strongest: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
                                 large: {
-                                    type: BooleanConstructor;
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
-                                wide: {
-                                    type: BooleanConstructor;
+                                medium: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
+                                variant: {
+                                    type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
+                                } & {
+                                    default: BentoTypographyVariant;
+                                };
                             }>
                         >,
                         DefaultKeys<{
@@ -1330,34 +1363,39 @@ export declare const BentoCard: DefineComponent<
                                     | 'span'
                                     | BentoTypographyElement
                                 >;
+                            } & {
                                 default: BentoTypographyElement;
-                                validator: (value: BentoTypographyElement) => boolean;
                             };
-                            stronger: {
-                                type: BooleanConstructor;
+                            wide: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
-                            strongest: {
-                                type: BooleanConstructor;
+                            stronger: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
-                            variant: {
-                                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                default: BentoTypographyVariant;
-                                validator: (value: BentoTypographyVariant) => boolean;
-                            };
-                            medium: {
-                                type: BooleanConstructor;
+                            strongest: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
                             large: {
-                                type: BooleanConstructor;
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
-                            wide: {
-                                type: BooleanConstructor;
+                            medium: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
+                            variant: {
+                                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
+                            } & {
+                                default: BentoTypographyVariant;
+                            };
                         }>
                     >
             >
@@ -4511,11 +4549,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         description: {
                                             type: StringConstructor;
                                             default: any;
-                                        }
-                                        /**
-                                         * A customisable method to determine if a row is not selectable.
-                                         * The default is that every row is selectable.
-                                         */;
+                                        };
                                         headingEl: {
                                             type: PropType<
                                                 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
@@ -4564,11 +4598,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                     description: {
                                         type: StringConstructor;
                                         default: any;
-                                    }
-                                    /**
-                                     * A customisable method to determine if a row is not selectable.
-                                     * The default is that every row is selectable.
-                                     */;
+                                    };
                                     headingEl: {
                                         type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'>;
                                         default: any;
@@ -4712,6 +4742,29 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         };
                                         hasNext: {
                                             type: BooleanConstructor;
+                                            /**
+                                             * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
+                                             *
+                                             * @example
+                                             * import { BentoDataGrid } from '@adyen/bento-vue2';
+                                             *
+                                             * export default {
+                                             *     components: { BentoDataGrid },
+                                             *     template: `
+                                             *          <bento-data-grid
+                                             *               :data="[
+                                             *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
+                                             *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
+                                             *               ]"
+                                             *               :columns="[
+                                             *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
+                                             *                  { field: 'company', label: 'Reference' },
+                                             *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
+                                             *                ]"
+                                             *          />
+                                             *     `
+                                             * }
+                                             */
                                             default: any;
                                         };
                                         hidePageSize: {
@@ -4745,6 +4798,29 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                     };
                                     hasNext: {
                                         type: BooleanConstructor;
+                                        /**
+                                         * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
+                                         *
+                                         * @example
+                                         * import { BentoDataGrid } from '@adyen/bento-vue2';
+                                         *
+                                         * export default {
+                                         *     components: { BentoDataGrid },
+                                         *     template: `
+                                         *          <bento-data-grid
+                                         *               :data="[
+                                         *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
+                                         *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
+                                         *               ]"
+                                         *               :columns="[
+                                         *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
+                                         *                  { field: 'company', label: 'Reference' },
+                                         *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
+                                         *                ]"
+                                         *          />
+                                         *     `
+                                         * }
+                                         */
                                         default: any;
                                     };
                                     hidePageSize: {
@@ -4950,11 +5026,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                             description: {
                                                 type: StringConstructor;
                                                 default: any;
-                                            }
-                                            /**
-                                             * A customisable method to determine if a row is not selectable.
-                                             * The default is that every row is selectable.
-                                             */;
+                                            };
                                             headingEl: {
                                                 type: PropType<
                                                     'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
@@ -5003,11 +5075,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         description: {
                                             type: StringConstructor;
                                             default: any;
-                                        }
-                                        /**
-                                         * A customisable method to determine if a row is not selectable.
-                                         * The default is that every row is selectable.
-                                         */;
+                                        };
                                         headingEl: {
                                             type: PropType<
                                                 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
@@ -5153,6 +5221,29 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                             };
                                             hasNext: {
                                                 type: BooleanConstructor;
+                                                /**
+                                                 * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
+                                                 *
+                                                 * @example
+                                                 * import { BentoDataGrid } from '@adyen/bento-vue2';
+                                                 *
+                                                 * export default {
+                                                 *     components: { BentoDataGrid },
+                                                 *     template: `
+                                                 *          <bento-data-grid
+                                                 *               :data="[
+                                                 *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
+                                                 *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
+                                                 *               ]"
+                                                 *               :columns="[
+                                                 *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
+                                                 *                  { field: 'company', label: 'Reference' },
+                                                 *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
+                                                 *                ]"
+                                                 *          />
+                                                 *     `
+                                                 * }
+                                                 */
                                                 default: any;
                                             };
                                             hidePageSize: {
@@ -5186,6 +5277,29 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         };
                                         hasNext: {
                                             type: BooleanConstructor;
+                                            /**
+                                             * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
+                                             *
+                                             * @example
+                                             * import { BentoDataGrid } from '@adyen/bento-vue2';
+                                             *
+                                             * export default {
+                                             *     components: { BentoDataGrid },
+                                             *     template: `
+                                             *          <bento-data-grid
+                                             *               :data="[
+                                             *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
+                                             *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
+                                             *               ]"
+                                             *               :columns="[
+                                             *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
+                                             *                  { field: 'company', label: 'Reference' },
+                                             *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
+                                             *                ]"
+                                             *          />
+                                             *     `
+                                             * }
+                                             */
                                             default: any;
                                         };
                                         hidePageSize: {
@@ -5413,7 +5527,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_29<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_30<
     DefineComponent<
         {
             /**
@@ -9991,7 +10105,11 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
             };
             /**
              * Dropdown props for the small selectable dropdown menu.
-             * @see BentoDropdown
+             * Properties supported:
+             *
+             *  - `value`: Selected value of the dropdown
+             *  - `items`: List of available items
+             *
              */
             dropdown: {
                 type: PropType<BentoInputDropdownProps>;
@@ -10157,7 +10275,11 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
                 };
                 /**
                  * Dropdown props for the small selectable dropdown menu.
-                 * @see BentoDropdown
+                 * Properties supported:
+                 *
+                 *  - `value`: Selected value of the dropdown
+                 *  - `items`: List of available items
+                 *
                  */
                 dropdown: {
                     type: PropType<BentoInputDropdownProps>;
@@ -10843,6 +10965,7 @@ export declare const BentoMenu: DefineComponent<
         };
     },
     {
+        popoverRef: Ref<HTMLElement>;
         menuButtonRef: any;
         menuId: string;
         popoverId: string;
@@ -10972,7 +11095,7 @@ export declare enum BentoMenuEvent {
     OPEN = 'open',
 }
 
-declare interface BentoMenuItem {
+export declare interface BentoMenuItem {
     text: string;
     handler: () => void;
     secondaryText?: string;
@@ -11121,7 +11244,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
              * Sets the width of the modal
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoModalSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoModalSize>;
                 default: BentoModalSize;
                 validator: (value: BentoModalSize) => boolean;
             };
@@ -11270,7 +11393,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
                  * Sets the width of the modal
                  */
                 size: {
-                    type: PropType<'small' | 'medium' | 'large' | BentoModalSize>;
+                    type: PropType<'small' | 'large' | 'medium' | BentoModalSize>;
                     default: BentoModalSize;
                     validator: (value: BentoModalSize) => boolean;
                 };
@@ -11297,7 +11420,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
             variant: 'default' | 'dialog' | 'BentoModalDefault' | 'BentoModalDialog' | BentoModalVariant;
             isOpen: boolean;
             content: string;
-            size: 'small' | 'medium' | 'large' | BentoModalSize;
+            size: 'small' | 'large' | 'medium' | BentoModalSize;
             activePage: string;
             actions: BentoButtonActionsList;
             actionsLabel: string;
@@ -14714,11 +14837,21 @@ export declare interface BentoSelectFilterOptions {
      */
     messages?: {
         [key: string]: {
-            persistentButtonLabelPartiallySelected: string;
-            persistentButtonLabelAllSelected: string;
+            persistentButtonLabelPartiallySelected?: string;
+            persistentButtonLabelAllSelected?: string;
             [key: string]: string;
         };
     };
+    /**
+     * The unique key to use in the messages translation object to use for the persistent button label
+     * when the select filter has partially selected items.
+     */
+    messagesPersistentButtonLabelPartiallySelectedKey?: string;
+    /**
+     * The unique key to use in the messages translation object to use for the persistent button label
+     * when the select filter has all items selected.
+     */
+    messagesPersistentButtonLabelAllSelectedKey?: string;
     lazy?: {
         /**
          * Indicates whether there are more items to load
@@ -15791,6 +15924,7 @@ export declare type BentoStepperState = Ref<{
     isParentStep?: boolean;
     navigateToStep: (index: number) => void;
     registerStep: (stepState: BentoStepperStepExposeState) => void;
+    removeStep: (stepState: BentoStepperStepExposeState) => void;
 }>;
 
 export declare interface BentoStepperStepExposeState {
@@ -16205,7 +16339,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16303,7 +16437,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16311,7 +16445,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -16514,7 +16648,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16605,7 +16739,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16613,7 +16747,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -16722,7 +16856,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16813,7 +16947,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16821,7 +16955,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -17989,39 +18123,9 @@ export declare interface BentoTimelineTimestamp {
     value?: string;
 }
 
-/**
- * @example
- * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';
- *
- * export default {
- *     components: { BentoToast },
- *     template: `
- *          // in your project root
- *          <bento-toast />
- *      setup() {
- *          bentoToastController = useBentoToastController();
- *          onTrigger = () => {
- *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });
- *      }
- *     `
- * }
- */
 export declare const BentoToast: DefineComponent<
     {},
-    {
-        computedPositioning: ComputedRef<
-            {
-                top: string;
-                width: string;
-            }[]
-        >;
-        computedHeight: ComputedRef<{
-            bottom: string;
-            height: string;
-        }>;
-        toastsToShow: ComputedRef<BentoToastItem[]>;
-        toast: any;
-    },
+    {},
     {},
     {},
     {},
@@ -18033,17 +18137,23 @@ export declare const BentoToast: DefineComponent<
     {}
 >;
 
-declare interface BentoToastItem {
-    action?: BentoToastItemAction;
-    text: string;
-    dismiss?: () => void;
+export declare interface BentoToastItem extends BentoToastItemParams {
+    id: string;
+    dismiss: () => void;
 }
 
-declare interface BentoToastItemAction {
+export declare interface BentoToastItemAction {
     handler: () => void;
     text: string;
 }
 
+export declare interface BentoToastItemParams {
+    action?: BentoToastItemAction;
+    text: string;
+}
+
+export declare type BentoToastItemsList = Array<BentoToastItem>;
+
 /**
  * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle
  *
@@ -18472,149 +18582,128 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: DefineComponent<
-    {
-        /**
-         * Sets the HTML DOM element.
-         * @values h1, h2, h3, h4, h5, h6, div, p, span
-         */
-        el: {
-            type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement>;
-            default: BentoTypographyElement;
-            validator: (value: BentoTypographyElement) => boolean;
-        };
-        /**
-         * Adds the stronger class modifier.
-         * Applicable to Caption, Body and Subtitle variants.
-         */
-        stronger: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the strongest class modifier.
-         * Applicable to Caption, Body and Subtitle variants.
-         */
-        strongest: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Sets the type of typography variant.
-         * @values caption, body, title.
-         */
-        variant: {
-            type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-            default: BentoTypographyVariant;
-            validator: (value: BentoTypographyVariant) => boolean;
-        };
-        /**
-         * Adds the medium class modifier.
-         * Applicable to the Title variant.
-         */
-        medium: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the large class modifier.
-         * Applicable to the Title variant.
-         */
-        large: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the medium class modifier.
-         * Applicable to tje Body variant.
-         */
-        wide: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    },
-    {
-        conditionalClasses: ComputedRef<{
-            [x: string]: boolean;
-        }>;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    {},
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            /**
-             * Sets the HTML DOM element.
-             * @values h1, h2, h3, h4, h5, h6, div, p, span
-             */
-            el: {
-                type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement>;
-                default: BentoTypographyElement;
-                validator: (value: BentoTypographyElement) => boolean;
-            };
-            /**
-             * Adds the stronger class modifier.
-             * Applicable to Caption, Body and Subtitle variants.
-             */
-            stronger: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the strongest class modifier.
-             * Applicable to Caption, Body and Subtitle variants.
-             */
-            strongest: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Sets the type of typography variant.
-             * @values caption, body, title.
-             */
-            variant: {
-                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                default: BentoTypographyVariant;
-                validator: (value: BentoTypographyVariant) => boolean;
-            };
-            /**
-             * Adds the medium class modifier.
-             * Applicable to the Title variant.
-             */
-            medium: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the large class modifier.
-             * Applicable to the Title variant.
-             */
-            large: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the medium class modifier.
-             * Applicable to tje Body variant.
-             */
-            wide: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>
+export declare const BentoTypography: __VLS_WithTemplateSlots_29<
+    DefineComponent<
+        __VLS_WithDefaults_2<
+            __VLS_TypePropsToRuntimeProps_3<{
+                /**
+                 * Sets the HTML DOM element.
+                 * @values h1, h2, h3, h4, h5, h6, div, p, span
+                 */
+                el?: BentoTypographyElement | `${BentoTypographyElement}`;
+                /**
+                 * Adds the large class modifier.
+                 * Applicable to the Title variant.
+                 */
+                large?: boolean;
+                /**
+                 * Adds the medium class modifier.
+                 * Applicable to the Title variant.
+                 */
+                medium?: boolean;
+                /**
+                 * Adds the stronger class modifier.
+                 * Applicable to Caption, Body and Subtitle variants.
+                 */
+                stronger?: boolean;
+                /**
+                 * Adds the strongest class modifier.
+                 * Applicable to Caption, Body and Subtitle variants.
+                 */
+                strongest?: boolean;
+                /**
+                 * Sets the type of typography variant.
+                 * @values caption, body, title.
+                 */
+                variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
+                /**
+                 * Adds the medium class modifier.
+                 * Applicable to tje Body variant.
+                 */
+                wide?: boolean;
+            }>,
+            {
+                el: BentoTypographyElement;
+                large: boolean;
+                medium: boolean;
+                stronger: boolean;
+                strongest: boolean;
+                variant: BentoTypographyVariant;
+                wide: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_2<
+                    __VLS_TypePropsToRuntimeProps_3<{
+                        /**
+                         * Sets the HTML DOM element.
+                         * @values h1, h2, h3, h4, h5, h6, div, p, span
+                         */
+                        el?: BentoTypographyElement | `${BentoTypographyElement}`;
+                        /**
+                         * Adds the large class modifier.
+                         * Applicable to the Title variant.
+                         */
+                        large?: boolean;
+                        /**
+                         * Adds the medium class modifier.
+                         * Applicable to the Title variant.
+                         */
+                        medium?: boolean;
+                        /**
+                         * Adds the stronger class modifier.
+                         * Applicable to Caption, Body and Subtitle variants.
+                         */
+                        stronger?: boolean;
+                        /**
+                         * Adds the strongest class modifier.
+                         * Applicable to Caption, Body and Subtitle variants.
+                         */
+                        strongest?: boolean;
+                        /**
+                         * Sets the type of typography variant.
+                         * @values caption, body, title.
+                         */
+                        variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
+                        /**
+                         * Adds the medium class modifier.
+                         * Applicable to tje Body variant.
+                         */
+                        wide?: boolean;
+                    }>,
+                    {
+                        el: BentoTypographyElement;
+                        large: boolean;
+                        medium: boolean;
+                        stronger: boolean;
+                        strongest: boolean;
+                        variant: BentoTypographyVariant;
+                        wide: boolean;
+                    }
+                >
+            >
+        >,
+        {
+            el: BentoTypographyElement | `${BentoTypographyElement}`;
+            wide: boolean;
+            stronger: boolean;
+            strongest: boolean;
+            large: boolean;
+            medium: boolean;
+            variant: BentoTypographyVariant | `${BentoTypographyVariant}`;
+        }
     >,
     {
-        el: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement;
-        wide: boolean;
-        stronger: boolean;
-        strongest: boolean;
-        variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-        medium: boolean;
-        large: boolean;
+        default: (_: {}) => any;
     }
 >;
 
@@ -18969,16 +19058,13 @@ declare enum PopperContainerPositionExtended {
     LEFT_END = 'left-end',
 }
 
-declare class ToastController {
-    get state(): {
-        queue: Array<BentoToastItem>;
-    };
-    private _state;
-    constructor();
-    private dismissToast;
-    addToast(params: BentoToastItem): {
-        dismiss: () => void;
-    };
+declare interface Toast {
+    dismiss: () => void;
+}
+
+export declare interface ToastStack {
+    stack: DeepReadonly<Ref<BentoToastItemsList>>;
+    addToast: (params: BentoToastItemParams) => Toast;
 }
 
 /**
@@ -18992,7 +19078,9 @@ declare class ToastController {
  */
 export declare function toTypedSchema<T extends ZodSchema>(formSchema: T): T;
 
-export declare function useBentoToastController(): ToastController;
+export declare type UseBentoToastController = ToastStack;
+
+export declare function useBentoToastController(): UseBentoToastController;
 
 /**
  * Maps an ISO code to the country's translated capital city.