@adyen/bento-vue2 1.39.0 → 1.41.0

package/README.md

@@ -468,22 +468,26 @@ The Bento plugin defaults to `BentoTheme.BENTO_LIGHT` if unset.
 
 Starting from version v1.37.0, variables for the dark theme have been introduced, along with the `useBentoTheme`
 composable. This must be used together with the `BentoVue` plugin for theme toggling and configuration to function
-properly.
+properly. Additionally, ensure that [the CSS variables are imported](#import-css-variables) to enable correct styling.
 
 #### Setting a default theme
 
 To set a default theme at the application level, ensure that the BentoVue plugin is properly integrated.
 
 ```typescript
+// import the stylesheets
+import '@adyen/bento-vue2/styles/bento-light';
+import '@adyen/bento-vue2/styles/bento-dark';
+
 // set default to light theme
-Vue.use(BentoVue, { theme: BentoTheme.BENTO_LIGHT });
+Vue.use(BentoVue, { theme: BentoTheme.BENTO_LIGHT, withDesignTokensCSSInjection: false });
 
 // set default to dark theme
-Vue.use(BentoVue, { theme: BentoTheme.BENTO_DARK });
+Vue.use(BentoVue, { theme: BentoTheme.BENTO_DARK, withDesignTokensCSSInjection: false });
 
 // set default to follow user preference
 // this is implemented using window.matchMedia(), so the behavior may vary across different browsers and systems
-Vue.use(BentoVue, { theme: BentoTheme.BENTO_SYSTEM });
+Vue.use(BentoVue, { theme: BentoTheme.BENTO_SYSTEM, withDesignTokensCSSInjection: false });
 ```
 
 #### Toggling a theme

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

@@ -45,6 +45,8 @@ import {
     BentoInfoIcon,
     BentoInputField,
     BentoInspector,
+    BentoLayout,
+    BentoLayoutRow,
     BentoLink,
     BentoLoadingButton,
     BentoLoadingIndicator,
@@ -56,6 +58,7 @@ import {
     BentoPagination,
     BentoPaymentMethod,
     BentoPopover,
+    BentoPromoBanner,
     BentoRadioButton,
     BentoRadioGroup,
     BentoSearchBar,
@@ -133,6 +136,8 @@ declare module 'vue' {
         BentoImage: typeof BentoImage;
         BentoInfoIcon: typeof BentoInfoIcon;
         BentoInspector: typeof BentoInspector;
+        BentoLayout: typeof BentoLayout;
+        BentoLayoutRow: typeof BentoLayoutRow;
         BentoDropdownCurrency: typeof BentoDropdownCurrency;
         BentoDropdownPaymentMethod: typeof BentoDropdownPaymentMethod;
         BentoDropdownTag: typeof BentoDropdownTag;
@@ -148,6 +153,7 @@ declare module 'vue' {
         BentoPagination: typeof BentoPagination;
         BentoPaymentMethod: typeof BentoPaymentMethod;
         BentoPopover: typeof BentoPopover;
+        BentoPromoBanner: typeof BentoPromoBanner;
         BentoRadioButton: typeof BentoRadioButton;
         BentoRadioGroup: typeof BentoRadioGroup;
         BentoSearchBar: typeof BentoSearchBar;