@adyen/bento-vue2 1.20.1 → 1.21.0

package/README.md

@@ -7,6 +7,38 @@ architecture.
 
 Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping new features faster.
 
+## Table of contents
+
+-   [Bento Vue component library](#bento-vue-component-library)
+    -   [Table of contents](#table-of-contents)
+    -   [Getting started](#getting-started)
+        -   [Installation](#installation)
+            -   [Vue 2](#vue-2)
+            -   [Vue 3](#vue-3)
+        -   [Adyen Design System Vue ecosystem](#adyen-design-system-vue-ecosystem)
+        -   [Usage](#usage)
+            -   [Load plugin and register components](#load-plugin-and-register-components)
+                -   [Vue 2](#vue-2-1)
+                -   [Vue 3](#vue-3-1)
+            -   [Import the fonts](#import-the-fonts)
+                -   [Vue 2](#vue-2-2)
+                -   [Vue 3](#vue-3-2)
+            -   [Initialize `vue-i18n`](#initialize-vue-i18n)
+                -   [Vue 2](#vue-2-3)
+                -   [Vue 3](#vue-3-3)
+            -   [Use the components](#use-the-components)
+                -   [Vue 2](#vue-2-4)
+                -   [Vue 3](#vue-3-4)
+        -   [Bundlers](#bundlers)
+            -   [Webpack](#webpack)
+            -   [Vite](#vite)
+        -   [Stylelint](#stylelint)
+    -   [Alternative themes](#alternative-themes)
+        -   [ADL theme](#adl-theme)
+            -   [Set **legacy ADL** theme as default](#set-legacy-adl-theme-as-default)
+        -   [Setting themes without the Bento Plugin](#setting-themes-without-the-bento-plugin)
+    -   [Support](#support)
+
 ## Getting started
 
 ### Installation
@@ -306,6 +338,27 @@ export default defineConfig({
 });
 ```
 
+### Stylelint
+
+You can install our stylelint plugin to help guide you to use the correct CSS variables.
+
+To do this you will need to:
+
+Install the `@adyen/bento-stylelint` NPM package.
+
+```bash
+npm install -D @adyen/bento-stylelint
+```
+
+Then add `@adyen/bento-stylelint/config` to the extends property array in your `stylelint` configuration:
+
+```javascript
+extends: [
+    // etc...
+    '@adyen/bento-stylelint/config',
+],
+```
+
 ## Alternative themes
 
 Bento components can be themed with both themes provided out-of-the-box and with custom classes applied. At the current

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

@@ -29,6 +29,7 @@ import {
     BentoDropdownCountry,
     BentoDropdownCurrency,
     BentoDropdownPaymentMethod,
+    BentoDropdownTag,
     BentoEmptyState,
     BentoFilterBar,
     BentoFormLayout,
@@ -46,6 +47,7 @@ import {
     BentoModal,
     BentoModalFullscreen,
     BentoModalFullscreenPage,
+    BentoModalPage,
     BentoPagination,
     BentoPaymentMethod,
     BentoPopover,
@@ -54,6 +56,8 @@ import {
     BentoSearchBar,
     BentoSecondaryNav,
     BentoSegmentedControl,
+    BentoSelectionCard,
+    BentoSelectionCardGroup,
     BentoSidepanel,
     BentoSidepanelPage,
     BentoStatus,
@@ -121,6 +125,7 @@ declare module 'vue' {
         BentoInfoIcon: typeof BentoInfoIcon;
         BentoDropdownCurrency: typeof BentoDropdownCurrency;
         BentoDropdownPaymentMethod: typeof BentoDropdownPaymentMethod;
+        BentoDropdownTag: typeof BentoDropdownTag;
         BentoInputField: typeof BentoInputField;
         BentoLink: typeof BentoLink;
         BentoLoadingButton: typeof BentoLoadingButton;
@@ -129,6 +134,7 @@ declare module 'vue' {
         BentoModal: typeof BentoModal;
         BentoModalFullscreen: typeof BentoModalFullscreen;
         BentoModalFullscreenPage: typeof BentoModalFullscreenPage;
+        BentoModalPage: typeof BentoModalPage;
         BentoPagination: typeof BentoPagination;
         BentoPaymentMethod: typeof BentoPaymentMethod;
         BentoPopover: typeof BentoPopover;
@@ -137,6 +143,8 @@ declare module 'vue' {
         BentoSearchBar: typeof BentoSearchBar;
         BentoSecondaryNav: typeof BentoSecondaryNav;
         BentoSegmentedControl: typeof BentoSegmentedControl;
+        BentoSelectionCard: typeof BentoSelectionCard;
+        BentoSelectionCardGroup: typeof BentoSelectionCardGroup;
         BentoSidepanel: typeof BentoSidepanel;
         BentoSidepanelPage: typeof BentoSidepanelPage;
         BentoStatus: typeof BentoStatus;

package/dist/@types/packages/core/src/components/button/button.types.d.ts

@@ -1,7 +1,8 @@
 export declare enum BentoButtonVariant {
     PRIMARY = "primary",
     SECONDARY = "secondary",
-    TERTIARY = "tertiary"
+    TERTIARY = "tertiary",
+    TERTIARY_WITH_BACKGROUND = "tertiary-with-background"
 }
 export declare enum BentoButtonPropClass {
     CONDENSED = "condensed",

package/dist/@types/packages/vue2/src/components/button/button.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     variant: {
-        type: PropType<"primary" | "secondary" | "tertiary" | BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant>;
         default: BentoButtonVariant;
         validator: (value: BentoButtonVariant) => boolean;
     };
@@ -72,14 +72,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     variant: {
-        type: PropType<"primary" | "secondary" | "tertiary" | BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant>;
         default: BentoButtonVariant;
         validator: (value: BentoButtonVariant) => boolean;
     };
 }>>, {
     link: Record<string, any>;
     type: "button" | "submit" | "reset";
-    variant: "primary" | "secondary" | "tertiary" | BentoButtonVariant;
+    variant: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant;
     condensed: boolean;
     critical: boolean;
     disabled: boolean;

package/dist/@types/packages/vue2/src/components/button/components/loading-button/loading-button.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         validator: (value: BentoLoadingButtonState) => boolean;
     };
     variant: {
-        type: PropType<"primary" | "secondary" | "tertiary" | import("../../../../../../core/src/components/button/button.types").BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../../../../core/src/components/button/button.types").BentoButtonVariant>;
         default: string;
         validator: (value: import("../../../../../../core/src/components/button/button.types").BentoButtonVariant) => boolean;
     };
@@ -52,12 +52,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         validator: (value: BentoLoadingButtonState) => boolean;
     };
     variant: {
-        type: PropType<"primary" | "secondary" | "tertiary" | import("../../../../../../core/src/components/button/button.types").BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../../../../core/src/components/button/button.types").BentoButtonVariant>;
         default: string;
         validator: (value: import("../../../../../../core/src/components/button/button.types").BentoButtonVariant) => boolean;
     };
 }>>, {
-    variant: "primary" | "secondary" | "tertiary" | import("../../../../../../core/src/components/button/button.types").BentoButtonVariant;
+    variant: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../../../../core/src/components/button/button.types").BentoButtonVariant;
     condensed: boolean;
     critical: boolean;
     disabled: boolean;

package/dist/@types/packages/vue2/src/components/button/components/toggle-button/toggle-button.vue.d.ts

@@ -1,3 +1,4 @@
+import { BentoButtonVariant } from "../../../../../../core/src/components/button/button.types";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     condensed: {
         type: BooleanConstructor;
@@ -12,9 +13,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     variant: {
-        type: import("vue").PropType<"primary" | "secondary" | "tertiary" | import("../../../../../../core/src/components/button/button.types.js").BentoButtonVariant>;
+        type: import("vue").PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant>;
         default: string;
-        validator: (value: import("../../../../../../core/src/components/button/button.types.js").BentoButtonVariant) => boolean;
+        validator: (value: BentoButtonVariant) => boolean;
     };
     toggled: {
         type: BooleanConstructor;
@@ -38,16 +39,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     variant: {
-        type: import("vue").PropType<"primary" | "secondary" | "tertiary" | import("../../../../../../core/src/components/button/button.types.js").BentoButtonVariant>;
+        type: import("vue").PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant>;
         default: string;
-        validator: (value: import("../../../../../../core/src/components/button/button.types.js").BentoButtonVariant) => boolean;
+        validator: (value: BentoButtonVariant) => boolean;
     };
     toggled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
-    variant: "primary" | "secondary" | "tertiary" | import("../../../../../../core/src/components/button/button.types.js").BentoButtonVariant;
+    variant: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant;
     condensed: boolean;
     disabled: boolean;
     inverse: boolean;

package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
                     critical?: boolean;
                     disabled?: boolean;
                     inverse?: boolean;
-                    variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                    variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                     type?: string;
                     link?: object;
                 };
@@ -108,7 +108,7 @@ declare const _default: import("vue").DefineComponent<{
                     critical?: boolean;
                     disabled?: boolean;
                     inverse?: boolean;
-                    variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                    variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                     type?: string;
                     link?: object;
                 };
@@ -164,7 +164,7 @@ declare const _default: import("vue").DefineComponent<{
                     critical?: boolean;
                     disabled?: boolean;
                     inverse?: boolean;
-                    variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                    variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                     type?: string;
                     link?: object;
                 };
@@ -221,7 +221,7 @@ declare const _default: import("vue").DefineComponent<{
                     critical?: boolean;
                     disabled?: boolean;
                     inverse?: boolean;
-                    variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                    variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                     type?: string;
                     link?: object;
                 };
@@ -277,7 +277,7 @@ declare const _default: import("vue").DefineComponent<{
                     critical?: boolean;
                     disabled?: boolean;
                     inverse?: boolean;
-                    variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                    variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                     type?: string;
                     link?: object;
                 };
@@ -333,7 +333,7 @@ declare const _default: import("vue").DefineComponent<{
                     critical?: boolean;
                     disabled?: boolean;
                     inverse?: boolean;
-                    variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                    variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                     type?: string;
                     link?: object;
                 };
@@ -789,7 +789,7 @@ declare const _default: import("vue").DefineComponent<{
                 };
             }[];
         };
-        defaultValue?: string | number | {
+        defaultValue?: string | number | import("../../../..").BentoListboxValue[] | {
             toString: () => string;
             toDateString: () => string;
             toTimeString: () => string;
@@ -982,12 +982,12 @@ declare const _default: import("vue").DefineComponent<{
                 };
             };
             granularity?: import("../../../internal").CalendarGranularityType;
-        } | import("../../../..").BentoListboxValue[] | {
+        } | {
             inputValue: string;
             dropdownValue?: string;
         };
         visible?: boolean;
-        value?: string | number | {
+        value?: string | number | import("../../../..").BentoListboxValue[] | {
             toString: () => string;
             toDateString: () => string;
             toTimeString: () => string;
@@ -1180,7 +1180,7 @@ declare const _default: import("vue").DefineComponent<{
                 };
             };
             granularity?: import("../../../internal").CalendarGranularityType;
-        } | import("../../../..").BentoListboxValue[] | {
+        } | {
             inputValue: string;
             dropdownValue?: string;
         };
@@ -1205,7 +1205,7 @@ declare const _default: import("vue").DefineComponent<{
                         critical?: boolean;
                         disabled?: boolean;
                         inverse?: boolean;
-                        variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                        variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                         type?: string;
                         link?: object;
                     };
@@ -1269,7 +1269,7 @@ declare const _default: import("vue").DefineComponent<{
                         critical?: boolean;
                         disabled?: boolean;
                         inverse?: boolean;
-                        variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                        variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                         type?: string;
                         link?: object;
                     };
@@ -1325,7 +1325,7 @@ declare const _default: import("vue").DefineComponent<{
                         critical?: boolean;
                         disabled?: boolean;
                         inverse?: boolean;
-                        variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                        variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                         type?: string;
                         link?: object;
                     };
@@ -1382,7 +1382,7 @@ declare const _default: import("vue").DefineComponent<{
                         critical?: boolean;
                         disabled?: boolean;
                         inverse?: boolean;
-                        variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                        variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                         type?: string;
                         link?: object;
                     };
@@ -1438,7 +1438,7 @@ declare const _default: import("vue").DefineComponent<{
                         critical?: boolean;
                         disabled?: boolean;
                         inverse?: boolean;
-                        variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                        variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                         type?: string;
                         link?: object;
                     };
@@ -1494,7 +1494,7 @@ declare const _default: import("vue").DefineComponent<{
                         critical?: boolean;
                         disabled?: boolean;
                         inverse?: boolean;
-                        variant?: "primary" | "secondary" | "tertiary" | import("../../../button").BentoButtonVariant;
+                        variant?: "primary" | "secondary" | "tertiary" | "tertiary-with-background" | import("../../../button").BentoButtonVariant;
                         type?: string;
                         link?: object;
                     };
@@ -2348,11 +2348,6 @@ declare const _default: import("vue").DefineComponent<{
             field: string;
         }[];
     };
-    computedCounts: import("vue").ComputedRef<{
-        label: string;
-        field: string;
-        count: number;
-    }[]>;
     searchTerm: import("vue").Ref<string>;
     onClickAllFiltersModal: () => void;
     getFilterCount: (filter: BentoFilterModel) => string | number;

package/dist/@types/packages/vue2/src/components/modal/components/base-modal/base-modal.vue.d.ts

@@ -6,6 +6,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<BentoButtonActionsList>;
         default: any;
     };
+    activePage: {
+        type: StringConstructor;
+        default: any;
+    };
     columnsSize: {
         type: PropType<BentoModalColumnLayoutVariant>;
         default: BentoModalColumnLayoutVariant;
@@ -14,6 +18,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: any;
     };
+    destructiveActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideCloseButton: {
         type: BooleanConstructor;
         required: true;
@@ -45,12 +53,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     internalModalActionClose: (event?: Event) => void;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
+    "update:active-page": (page: string) => void;
+} & {
     "close-modal": () => void;
 }, string, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: PropType<BentoButtonActionsList>;
         default: any;
     };
+    activePage: {
+        type: StringConstructor;
+        default: any;
+    };
     columnsSize: {
         type: PropType<BentoModalColumnLayoutVariant>;
         default: BentoModalColumnLayoutVariant;
@@ -59,6 +73,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: any;
     };
+    destructiveActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideCloseButton: {
         type: BooleanConstructor;
         required: true;
@@ -89,12 +107,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     size: "small" | "medium" | "large" | BentoModalSize;
+    activePage: string;
     actions: BentoButtonActionsList;
+    destructiveActions: boolean;
     columnsSize: BentoModalColumnLayoutVariant;
     customPadding: string;
+    withColumnLayout: boolean;
     initiallyOpen: boolean;
     modalRole: string;
-    withColumnLayout: boolean;
 }>, {
     default: (_: {}) => any;
     'content-col-1': (_: {}) => any;

package/dist/@types/packages/vue2/src/components/modal/components/modal-default/modal-default.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: any;
     };
+    activePage: {
+        type: StringConstructor;
+        default: any;
+    };
     customPadding: {
         type: StringConstructor;
         default: any;
@@ -47,6 +51,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    "update:active-page": (page: string) => void;
+} & {
     "close-modal": () => void;
 }, string, Readonly<import("vue").ExtractPropTypes<{
     actions: {
@@ -57,6 +63,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: any;
     };
+    activePage: {
+        type: StringConstructor;
+        default: any;
+    };
     customPadding: {
         type: StringConstructor;
         default: any;
@@ -94,14 +104,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
+    activePage: string;
     actions: BentoButtonActionsList;
+    actionsLabel: string;
+    destructiveActions: boolean;
     columnsSize: BentoModalColumnLayoutVariant;
     customPadding: string;
+    withColumnLayout: boolean;
     hideCloseButton: boolean;
     initiallyOpen: boolean;
-    withColumnLayout: boolean;
-    actionsLabel: string;
-    destructiveActions: boolean;
 }>, {
     default: (_: {}) => any;
     'content-col-1': (_: {}) => any;

package/dist/@types/packages/vue2/src/components/modal/components/modal-dialog/modal-dialog.vue.d.ts

@@ -6,6 +6,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<BentoButtonActionsList>;
         default: any;
     };
+    activePage: {
+        type: StringConstructor;
+        default: any;
+    };
     content: {
         type: StringConstructor;
         required: true;
@@ -33,6 +37,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<BentoButtonActionsList>;
         default: any;
     };
+    activePage: {
+        type: StringConstructor;
+        default: any;
+    };
     content: {
         type: StringConstructor;
         required: true;
@@ -54,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
+    activePage: string;
     actions: BentoButtonActionsList;
     initiallyOpen: boolean;
 }>, {

package/dist/@types/packages/vue2/src/components/modal/components/modal-page/modal-page.vue.d.ts

@@ -0,0 +1,91 @@
+import { PropType } from 'vue';
+import { BentoModalColumnLayoutVariant } from "../../modal.types";
+import { BentoButtonActionsList } from "../../../button";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    actions: {
+        type: PropType<BentoButtonActionsList>;
+        default: any;
+    };
+    actionsLabel: {
+        type: StringConstructor;
+        default: any;
+    };
+    columnsSize: {
+        type: PropType<BentoModalColumnLayoutVariant>;
+        default: BentoModalColumnLayoutVariant;
+    };
+    customPadding: {
+        type: StringConstructor;
+        default: any;
+    };
+    destructiveActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    withColumnLayout: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageId: {
+        type: StringConstructor;
+        default: any;
+    };
+    previousPage: {
+        type: StringConstructor;
+        default: any;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    actions: {
+        type: PropType<BentoButtonActionsList>;
+        default: any;
+    };
+    actionsLabel: {
+        type: StringConstructor;
+        default: any;
+    };
+    columnsSize: {
+        type: PropType<BentoModalColumnLayoutVariant>;
+        default: BentoModalColumnLayoutVariant;
+    };
+    customPadding: {
+        type: StringConstructor;
+        default: any;
+    };
+    destructiveActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    withColumnLayout: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageId: {
+        type: StringConstructor;
+        default: any;
+    };
+    previousPage: {
+        type: StringConstructor;
+        default: any;
+    };
+}>>, {
+    pageId: string;
+    previousPage: string;
+    actions: BentoButtonActionsList;
+    actionsLabel: string;
+    destructiveActions: boolean;
+    columnsSize: BentoModalColumnLayoutVariant;
+    customPadding: string;
+    withColumnLayout: boolean;
+}>, {
+    default: (_: {}) => any;
+    'content-col-1': (_: {}) => any;
+    'content-col-2': (_: {}) => any;
+    content: (_: {}) => any;
+    actions: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/modal/index.d.ts

@@ -1,2 +1,3 @@
+export { default as BentoModalPage } from './components/modal-page/modal-page.vue';
 export { default as BentoModal } from './modal.vue';
-export * from './modal.types';
+export { BentoModalVariant, BentoModalVariantMapping, BentoModalSize, BentoModalColumnLayoutVariant, BentoModalRole, BentoModalDialogType, BentoModalEvent, } from './modal.types';

package/dist/@types/packages/vue2/src/components/modal/modal.keys.d.ts

@@ -0,0 +1 @@
+export declare const MODAL_CONFIG_INJECTION_KEY: unique symbol;

package/dist/@types/packages/vue2/src/components/modal/modal.types.d.ts

@@ -1,3 +1,4 @@
+import { ComputedRef, Ref } from 'vue';
 export declare enum BentoModalVariant {
     DEFAULT = "default",
     DIALOG = "dialog"
@@ -29,3 +30,11 @@ export declare enum BentoModalDialogType {
 export declare enum BentoModalEvent {
     CLOSE_MODAL = "close-modal"
 }
+export interface BentoModalConfigData {
+    activePage: Ref<string>;
+    height: Ref<string>;
+    isAnimationActive: Ref<boolean>;
+    pageCustomPadding: Ref<string>;
+    showCloseButton: ComputedRef<boolean>;
+    size: Ref<BentoModalSize | `${BentoModalSize}`>;
+}