@adyen/bento-vue2 1.1.1 → 1.3.0-1

package/README.md

@@ -1,34 +1,45 @@
-# Bento Vue2 component library
+# Bento Vue component library
 
-Welcome to the Bento Vue2 component library!
+Welcome to the Bento Vue component library!
 
 The aim of this library is to centralize all general reusable components you will find across the Adyen Front-end
 architecture.
 
-Bento Vue contains foundational Vue 2.x UI components for shipping new features faster.
+Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping new features faster.
 
 ## Getting started
 
 ### Installation
 
+#### Vue 2
+
 Bento Vue2 is available as an npm package
 
 ```bash
 npm install @adyen/bento-vue2
 ```
 
+#### Vue 3
+
+Bento Vue3 is available as an npm package
+
+```bash
+npm install @adyen/bento-vue3
+```
+
 ### Adyen Design System Vue ecosystem
 
 | Project                      | Optional | Description                                                                    |
 | ---------------------------- | -------- | ------------------------------------------------------------------------------ |
 | `@adyen/bento-vue2`          | ❌       | A collection of Vue 2.x UI components                                          |
+| `@adyen/bento-vue3`          | ❌       | A collection of Vue 3.x UI components                                          |
 | `@adyen/bento-design-tokens` | ✅       | List of Design Tokens used to define styles of the components and their themes |
 
 ### Usage
 
 In order to use the compoents via the `BentoVue` plugin, the following steps must be reproduced:
 
-1. Load the plugin globally in **Vue**
+1. Load the plugin globally in **Vue** (and optional enable certain features).
 2. Import the `font.css` file.
 3. Initialize `vue-i18n`.
 4. Add changes to your [bundler](#Bundlers) configuration e.g. [webpack](#webpack) or [vite](#vite).
@@ -37,7 +48,12 @@ In order to use the compoents via the `BentoVue` plugin, the following steps mus
 #### Load plugin and register components
 
 To start using the Bento components, import the `BentoVue` plugin to inject the theme by default to Vue in order to
-allow the components to use the Design Token CSS variables:
+allow the components to use the Design Token CSS variables.
+
+You can enable the following feature by passing them the second argument to in the `.use` function.
+
+-   `withToast`: Will enable all toast functionality required by the `BentoToast` component.
+-   `withUtilityClasses`: Will inject the utility classes into the page.
 
 ##### Vue 2
 
@@ -46,7 +62,10 @@ import BentoVue from '@adyen/bento-vue2';
 
 Vue.use(BentoVue);
 // or, if you want to make use of the toast component we provide
-Vue.use(BentoVue, { withToast: true }); // this line installs Bento and includes the toast component
+Vue.use(BentoVue, {
+    withToast: true, // this line installs Bento and includes the toast component
+    withUtilityClasses: true, // this line injects the utility classes into the page
+});
 ```
 
 ##### Vue 3
@@ -55,7 +74,10 @@ Vue.use(BentoVue, { withToast: true }); // this line installs Bento and includes
 import BentoVue from '@adyen/bento-vue3';
 
 const app = createApp()
-    .use(BentoVue, { withToast: true }) // this line installs Bento and includes the toast component
+    .use(BentoVue, {
+        withToast: true, // this line installs Bento and includes the toast component
+        withUtilityClasses: true, // this line injects the utility classes into the page
+    })
     .mount('#app');
 ```
 
@@ -85,42 +107,42 @@ initialization the following lines of code must be included:
 
 ##### Vue 2
 
-```diff
+```typescript
 import Vue from 'vue';
-+ import VueI18n from 'vue-i18n';
-+
-+ Vue.use(VueI18n);
-+
-+ const i18n = new VueI18n({
-+     locale: 'en-US',
-+     fallbackLocale: 'en-US',
-+     fallbackRoot: false,
-+ });
+import VueI18n from 'vue-i18n';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+    locale: 'en-US',
+    fallbackLocale: 'en-US',
+    fallbackRoot: false,
+});
 
 const app = new Vue({
     el: '#app',
     router,
     template: '<router-view />',
-+    i18n,
+    i18n,
 });
 ```
 
 ##### Vue 3
 
-```diff
+```typescript
 import BentoVue from '@adyen/bento-vue3';
-+ import VueI18n from 'vue-i18n';
+import VueI18n from 'vue-i18n';
 
-+ const i18n = createI18n({
-+    locale: 'en-US',
-+    fallbackLocale: 'en-US',
-+    fallbackRoot: false,
-+    allowComposition: true,
-+ });
+const i18n = createI18n({
+    locale: 'en-US',
+    fallbackLocale: 'en-US',
+    fallbackRoot: false,
+    allowComposition: true,
+});
 
 const app = createApp()
     .use(BentoVue, { withToast: true }) // this line installs Bento
-+   .use(i18n) // this line vue-i18n
+    .use(i18n) // this line vue-i18n
     .mount('#app');
 ```
 
@@ -316,8 +338,17 @@ are:
 -   Default: _no class needed_
 -   ADL: `.b-legacy-theme`.
 
-To use an alternative theme in your application, set the respective theme class in the main container inside the
-`App.vue` component.
+To use an alternative theme in your application, you will need to:
+
+1.  Import the the css file into your app.
+
+e.g. add the ADL theme.
+
+```typescript
+import '@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css';
+```
+
+2.  set the respective theme class in the main container inside the `App.vue` component.
 
 ```html
 <template>

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

@@ -28,6 +28,10 @@ import {
     BentoDropdownCurrency,
     BentoDropdownPaymentMethod,
     BentoFilterBar,
+    BentoFormLayout,
+    BentoFormLayoutFieldTip,
+    BentoFormLayoutGroup,
+    BentoFormLayoutTitle,
     BentoHeader,
     BentoInfoIcon,
     BentoInputField,
@@ -42,6 +46,8 @@ import {
     BentoRadioGroup,
     BentoSearchBar,
     BentoSegmentedControl,
+    BentoSidepanel,
+    BentoSidepanelPage,
     BentoStatus,
     BentoStructuredList,
     BentoStructuredListItem,
@@ -91,6 +97,10 @@ declare module 'vue' {
         BentoDropdownAvatar: typeof BentoDropdownAvatar;
         BentoDropdownCountry: typeof BentoDropdownCountry;
         BentoFilterBar: typeof BentoFilterBar;
+        BentoFormLayout: typeof BentoFormLayout;
+        BentoFormLayoutFieldTip: typeof BentoFormLayoutFieldTip;
+        BentoFormLayoutGroup: typeof BentoFormLayoutGroup;
+        BentoFormLayoutTitle: typeof BentoFormLayoutTitle;
         BentoHeader: typeof BentoHeader;
         BentoInfoIcon: typeof BentoInfoIcon;
         BentoDropdownCurrency: typeof BentoDropdownCurrency;
@@ -107,6 +117,8 @@ declare module 'vue' {
         BentoRadioGroup: typeof BentoRadioGroup;
         BentoSearchBar: typeof BentoSearchBar;
         BentoSegmentedControl: typeof BentoSegmentedControl;
+        BentoSidepanel: typeof BentoSidepanel;
+        BentoSidepanelPage: typeof BentoSidepanelPage;
         BentoStatus: typeof BentoStatus;
         BentoStructuredList: typeof BentoStructuredList;
         BentoStructuredListItem: typeof BentoStructuredListItem;

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

@@ -1,23 +1,25 @@
 import { PropType } from 'vue';
-import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';
-import { BentoButtonVariant } from '@/core/components/button/button.types';
-import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from "./alert.types";
+import { BentoButtonVariant } from "../../../../core/src/components/button/button.types";
+import { BentoTypographyElement, BentoTypographyVariant } from "../typography";
 declare const _default: import("vue").DefineComponent<{
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
     type: {
-        type: PropType<BentoAlertTypeOption>;
+        type: PropType<"warning" | "critical" | "highlight" | "success" | BentoAlertTypeOption>;
         default: BentoAlertTypeOption;
+        validator: (value: BentoAlertTypeOption) => boolean;
     };
     variant: {
-        type: PropType<BentoAlertVariant>;
+        type: PropType<"default" | "tip" | BentoAlertVariant>;
         default: BentoAlertVariant;
+        validator: (value: BentoAlertVariant) => boolean;
     };
 }, {
     alertConditionalClasses: import("vue").ComputedRef<{
-        [x: string]: boolean | BentoAlertTypeOption;
+        [x: string]: boolean | "warning" | "critical" | "highlight" | "success" | BentoAlertTypeOption;
     }>;
     computedRole: import("vue").ComputedRef<"alert" | "status">;
     descriptionTypography: import("vue").ComputedRef<{
@@ -30,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
     isTipVariant: import("vue").ComputedRef<boolean>;
     onCloseButtonClick: () => void;
     hasSlot: (name: string) => boolean;
-    t: import("vue-i18n-bridge").ComposerTranslation<import("@/utils/ts/i18n").i18nMessages, string, import("@intlify/core-base").RemoveIndexSignature<{
+    t: import("vue-i18n-bridge").ComposerTranslation<import("../../utils/ts/i18n").i18nMessages, string, import("@intlify/core-base").RemoveIndexSignature<{
         [x: string]: import("vue-i18n-bridge").LocaleMessageValue<import("vue-i18n-bridge").VueMessageType>;
     }>, never, import("@intlify/core-base")._ResourcePath<{
         [key: string]: string;
@@ -47,16 +49,18 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<BentoAlertTypeOption>;
+        type: PropType<"warning" | "critical" | "highlight" | "success" | BentoAlertTypeOption>;
         default: BentoAlertTypeOption;
+        validator: (value: BentoAlertTypeOption) => boolean;
     };
     variant: {
-        type: PropType<BentoAlertVariant>;
+        type: PropType<"default" | "tip" | BentoAlertVariant>;
         default: BentoAlertVariant;
+        validator: (value: BentoAlertVariant) => boolean;
     };
 }>>, {
-    type: BentoAlertTypeOption;
-    variant: BentoAlertVariant;
+    type: "warning" | "critical" | "highlight" | "success" | BentoAlertTypeOption;
+    variant: "default" | "tip" | BentoAlertVariant;
     closeButton: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/avatar-image/avatar-image.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';
-import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { BentoTypographyElement, BentoTypographyVariant } from "../typography";
 declare const _default: import("vue").DefineComponent<{
     src: {
         type: StringConstructor;

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

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
-import { BentoButtonVariant } from '@/core/components/button/button.types';
-import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
-import { Booleanish } from '@/types';
+import { BentoButtonVariant } from "../../../../core/src/components/button/button.types";
+import { BentoTypographyElement, BentoTypographyVariant } from "../typography";
+import { Booleanish } from "../../types";
 import type { RouterLinkProps } from 'vue-router/types/router';
 import type { AnchorHTMLAttributes } from 'vue/types/jsx';
 import { BentoLinkVariant } from '../link';
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     variant: {
-        type: PropType<BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | BentoButtonVariant>;
         default: BentoButtonVariant;
         validator: (value: BentoButtonVariant) => boolean;
     };
@@ -310,7 +310,7 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<string>;
         };
         variant: {
-            type: PropType<BentoLinkVariant>;
+            type: PropType<"default" | BentoLinkVariant | "quiet">;
         } & {
             default: BentoLinkVariant;
         };
@@ -898,7 +898,7 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<string>;
         };
         variant: {
-            type: PropType<BentoLinkVariant>;
+            type: PropType<"default" | BentoLinkVariant | "quiet">;
         } & {
             default: BentoLinkVariant;
         };
@@ -1226,7 +1226,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>, {
         click: (clickEvent: MouseEvent) => void;
     }, {
-        variant: BentoLinkVariant;
+        variant: "default" | BentoLinkVariant | "quiet";
     }, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{
         replace: {
             type: PropType<boolean>;
@@ -1490,7 +1490,7 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<string>;
         };
         variant: {
-            type: PropType<BentoLinkVariant>;
+            type: PropType<"default" | BentoLinkVariant | "quiet">;
         } & {
             default: BentoLinkVariant;
         };
@@ -2078,7 +2078,7 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<string>;
         };
         variant: {
-            type: PropType<BentoLinkVariant>;
+            type: PropType<"default" | BentoLinkVariant | "quiet">;
         } & {
             default: BentoLinkVariant;
         };
@@ -2666,7 +2666,7 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<string>;
         };
         variant: {
-            type: PropType<BentoLinkVariant>;
+            type: PropType<"default" | BentoLinkVariant | "quiet">;
         } & {
             default: BentoLinkVariant;
         };
@@ -2994,7 +2994,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
         click: (clickEvent: MouseEvent) => void;
     }, string, {
-        variant: BentoLinkVariant;
+        variant: "default" | BentoLinkVariant | "quiet";
     }> & {
         props: {
             replace: {
@@ -3259,7 +3259,7 @@ declare const _default: import("vue").DefineComponent<{
                 type: PropType<string>;
             };
             variant: {
-                type: PropType<BentoLinkVariant>;
+                type: PropType<"default" | BentoLinkVariant | "quiet">;
             } & {
                 default: BentoLinkVariant;
             };
@@ -3619,7 +3619,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     variant: {
-        type: PropType<BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | BentoButtonVariant>;
         default: BentoButtonVariant;
         validator: (value: BentoButtonVariant) => boolean;
     };
@@ -3633,6 +3633,6 @@ declare const _default: import("vue").DefineComponent<{
     critical: boolean;
     condensed: boolean;
     disabled: boolean;
-    variant: BentoButtonVariant;
+    variant: "primary" | "secondary" | "tertiary" | BentoButtonVariant;
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
-import type { VueNodeElement } from '@/types';
-import type { BentoButtonVariant } from '@/components/button';
+import type { VueNodeElement } from "../../../../types";
+import type { BentoButtonVariant } from "../..";
 export interface BentoButtonActionObject {
     title: string;
     event: (event: Event) => void;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoButtonVariant } from '@/core/components/button/button.types';
+import { BentoButtonVariant } from "../../../../../../core/src/components/button/button.types";
 import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';
 declare const _default: import("vue").DefineComponent<{
     actions: {
@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     layout: {
-        type: PropType<BentoButtonActionsLayout>;
+        type: PropType<BentoButtonActionsLayout | "buttons-end" | "fill-container" | "space-between" | "vertical-stack" | "buttons-start">;
         default: import("./button-actions.types").BentoButtonActionsLayoutBasic;
         validator: (layout: BentoButtonActionsLayout) => boolean;
     };
@@ -23,11 +23,11 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     layout: {
-        type: PropType<BentoButtonActionsLayout>;
+        type: PropType<BentoButtonActionsLayout | "buttons-end" | "fill-container" | "space-between" | "vertical-stack" | "buttons-start">;
         default: import("./button-actions.types").BentoButtonActionsLayoutBasic;
         validator: (layout: BentoButtonActionsLayout) => boolean;
     };
 }>>, {
-    layout: BentoButtonActionsLayout;
+    layout: BentoButtonActionsLayout | "buttons-end" | "fill-container" | "space-between" | "vertical-stack" | "buttons-start";
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoButtonVariant } from '@/core/components/button/button.types';
+import { BentoButtonVariant } from "../../../../../../core/src/components/button/button.types";
 import { BentoLoadingButtonState } from './loading-button.types';
 declare const _default: import("vue").DefineComponent<{
     condensed: {
@@ -11,12 +11,12 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     state: {
-        type: PropType<BentoLoadingButtonState>;
+        type: PropType<"start" | "success" | "loading" | BentoLoadingButtonState | "fail">;
         default: BentoLoadingButtonState;
         validator: (value: BentoLoadingButtonState) => boolean;
     };
     variant: {
-        type: PropType<BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | BentoButtonVariant>;
         default: BentoButtonVariant;
         validator: (value: BentoButtonVariant) => boolean;
     };
@@ -37,19 +37,19 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     state: {
-        type: PropType<BentoLoadingButtonState>;
+        type: PropType<"start" | "success" | "loading" | BentoLoadingButtonState | "fail">;
         default: BentoLoadingButtonState;
         validator: (value: BentoLoadingButtonState) => boolean;
     };
     variant: {
-        type: PropType<BentoButtonVariant>;
+        type: PropType<"primary" | "secondary" | "tertiary" | BentoButtonVariant>;
         default: BentoButtonVariant;
         validator: (value: BentoButtonVariant) => boolean;
     };
 }>>, {
     condensed: boolean;
     disabled: boolean;
-    variant: BentoButtonVariant;
-    state: BentoLoadingButtonState;
+    variant: "primary" | "secondary" | "tertiary" | BentoButtonVariant;
+    state: "start" | "success" | "loading" | BentoLoadingButtonState | "fail";
 }>;
 export default _default;

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

@@ -1,4 +1,4 @@
 export { default as BentoButton } from './button.vue';
-export * from '@/core/components/button/button.types';
+export * from "../../../../core/src/components/button/button.types";
 export * from './components/button-actions';
 export * from './components/loading-button';

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

@@ -1,15 +1,17 @@
 import { PropType } from 'vue';
-import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
-import { BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';
-import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';
+import { BentoTypographyElement, BentoTypographyVariant } from "../typography";
+import { BentoButtonActionsLayout, BentoButtonActionsList } from "../button";
+import { BentoCardBackground, BentoCardTitleSize } from "./card.types";
 declare const _default: import("vue").DefineComponent<{
     background: {
-        type: PropType<BentoCardBackground>;
+        type: PropType<"primary" | "secondary" | BentoCardBackground>;
         default: BentoCardBackground;
+        validator: (value: BentoCardBackground) => boolean;
     };
     titleSize: {
-        type: PropType<BentoCardTitleSize>;
+        type: PropType<"small" | "default" | BentoCardTitleSize>;
         default: BentoCardTitleSize;
+        validator: (value: BentoCardTitleSize) => boolean;
     };
     expandable: {
         type: BooleanConstructor;
@@ -28,14 +30,14 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
     actionsLayout: {
-        type: PropType<BentoButtonActionsLayout>;
-        default: import("@/components/button").BentoButtonActionsLayoutBasic;
+        type: PropType<BentoButtonActionsLayout | "buttons-end" | "fill-container" | "space-between" | "vertical-stack" | "buttons-start">;
+        default: import("../button").BentoButtonActionsLayoutBasic;
         validator: (value: BentoButtonActionsLayout) => boolean;
     };
 }, {
     cardId: string;
     cardConditionalClasses: import("vue").ComputedRef<{
-        [x: string]: boolean | BentoCardBackground;
+        [x: string]: boolean | "primary" | "secondary" | BentoCardBackground;
         'b-card--expandable': boolean;
         'b-card--disabled': boolean;
     }>;
@@ -74,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     hasSlot: (name: string) => boolean;
     onClick: () => void;
-    t: import("vue-i18n-bridge").ComposerTranslation<import("@/utils/ts/i18n").i18nMessages, string, import("@intlify/core-base").RemoveIndexSignature<{
+    t: import("vue-i18n-bridge").ComposerTranslation<import("../../utils/ts/i18n").i18nMessages, string, import("@intlify/core-base").RemoveIndexSignature<{
         [x: string]: import("vue-i18n-bridge").LocaleMessageValue<import("vue-i18n-bridge").VueMessageType>;
     }>, never, import("@intlify/core-base")._ResourcePath<{
         [key: string]: string;
@@ -86,12 +88,14 @@ declare const _default: import("vue").DefineComponent<{
     BentoTypographyElement: typeof BentoTypographyElement;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("click" | "expanded")[], string, Readonly<import("vue").ExtractPropTypes<{
     background: {
-        type: PropType<BentoCardBackground>;
+        type: PropType<"primary" | "secondary" | BentoCardBackground>;
         default: BentoCardBackground;
+        validator: (value: BentoCardBackground) => boolean;
     };
     titleSize: {
-        type: PropType<BentoCardTitleSize>;
+        type: PropType<"small" | "default" | BentoCardTitleSize>;
         default: BentoCardTitleSize;
+        validator: (value: BentoCardTitleSize) => boolean;
     };
     expandable: {
         type: BooleanConstructor;
@@ -110,17 +114,17 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
     actionsLayout: {
-        type: PropType<BentoButtonActionsLayout>;
-        default: import("@/components/button").BentoButtonActionsLayoutBasic;
+        type: PropType<BentoButtonActionsLayout | "buttons-end" | "fill-container" | "space-between" | "vertical-stack" | "buttons-start">;
+        default: import("../button").BentoButtonActionsLayoutBasic;
         validator: (value: BentoButtonActionsLayout) => boolean;
     };
 }>>, {
     disabled: boolean;
-    background: BentoCardBackground;
+    background: "primary" | "secondary" | BentoCardBackground;
     actions: BentoButtonActionsList;
-    actionsLayout: BentoButtonActionsLayout;
+    actionsLayout: BentoButtonActionsLayout | "buttons-end" | "fill-container" | "space-between" | "vertical-stack" | "buttons-start";
     closed: boolean;
-    titleSize: BentoCardTitleSize;
+    titleSize: "small" | "default" | BentoCardTitleSize;
     expandable: boolean;
 }>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { BentoCheckboxEvent, BentoCheckboxType } from './checkbox.types';
-import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { BentoTypographyElement, BentoTypographyVariant } from "../typography";
 import { BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';
 declare const _default: import("vue").DefineComponent<{
     value: {