@adyen/bento-vue3 1.40.0 → 1.41.0

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;

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

@@ -1,3 +1,21 @@
+export interface BentoCurrencyProps {
+    /**
+     * Currency code based on the ISO 4217 standard
+     */
+    currency?: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
+    /**
+     * Disable the default typography for the component. Only use this when the component is inside another typography component.
+     */
+    disableTypography?: boolean;
+    /**
+     * Accepts currency value in major units instead of minor ones
+     */
+    majorUnits?: boolean;
+    /**
+     * Currency value to be formatted
+     */
+    value?: number;
+}
 export declare enum BentoCurrencyISOCode {
     AFA = "AFA",
     ALL = "ALL",

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

@@ -1,225 +1,48 @@
-import { PropType } from "../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
-import { BentoCurrencyISOCode } from "./currency.types";
+import { BentoCurrencyISOCode, BentoCurrencyProps } from './currency.types';
 /**
  * A Currency component is used to display a formatted currency value.
  *
  * @example
- * import { BentoCurrency } from '@adyen/adl-vue-components';
- * import { BentoCurrency, BentoCurrencyCode } from '@adyen/bento-vue2';
+ * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';
  *
  * export default {
  *     components: { BentoCurrency },
  *     template: `
- *          <bento-currency :currency="CurrencyCode.USD">
- *              76.33
- *          </bento-currency>
+ *          <bento-currency
+ *              :currency="BentoCurrencyISOCode.USD"
+ *              :value="76.33"
+ *          />
  *     `
  * }
  */
-declare const _default: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-    currency: {
-        type: PropType<BentoCurrencyISOCode | `${BentoCurrencyISOCode}`>;
-        default: BentoCurrencyISOCode;
-        validator: (value: BentoCurrencyISOCode) => boolean;
-    };
-    /**
-     * Accepts currency value in major units instead of minor ones
-     */
-    majorUnits: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Disable the default typography for the component. Only use this when the component is inside another typography component.
-     */
-    disableTypography: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {
-    formattedCurrency: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComputedRef<string>;
-}, {}, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-    currency: {
-        type: PropType<BentoCurrencyISOCode | `${BentoCurrencyISOCode}`>;
-        default: BentoCurrencyISOCode;
-        validator: (value: BentoCurrencyISOCode) => boolean;
-    };
-    /**
-     * Accepts currency value in major units instead of minor ones
-     */
-    majorUnits: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Disable the default typography for the component. Only use this when the component is inside another typography component.
-     */
-    disableTypography: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
+declare const _default: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BentoCurrencyProps>, {
+    currency: BentoCurrencyISOCode;
     disableTypography: boolean;
-    currency: "TOP" | "CVE" | "DJF" | "GNF" | "IDR" | "JPY" | "KMF" | "KRW" | "PYG" | "RWF" | "UGX" | "VND" | "VUV" | "XAF" | "XOF" | "XPF" | "MRO" | "BHD" | "IQD" | "JOD" | "KWD" | "LYD" | "OMR" | "TND" | "AFA" | "ALL" | "DZD" | "AOA" | "ARS" | "AMD" | "AWG" | "AUD" | "AZN" | "BSD" | "BDT" | "BBD" | "BYR" | "BEF" | "BZD" | "BMD" | "BTN" | "BTC" | "BOB" | "BAM" | "BWP" | "BRL" | "GBP" | "BND" | "BGN" | "BIF" | "KHR" | "CAD" | "KYD" | "CLP" | "CLF" | "CNY" | "COP" | "CDF" | "CRC" | "HRK" | "CUC" | "CZK" | "DKK" | "DOP" | "XCD" | "EGP" | "ERN" | "EEK" | "ETB" | "EUR" | "FKP" | "FJD" | "GMD" | "GEL" | "DEM" | "GHS" | "GIP" | "GRD" | "GTQ" | "GYD" | "HTG" | "HNL" | "HKD" | "HUF" | "ISK" | "INR" | "IRR" | "ILS" | "ITL" | "JMD" | "KZT" | "KES" | "KGS" | "LAK" | "LVL" | "LBP" | "LSL" | "LRD" | "LTC" | "LTL" | "MOP" | "MKD" | "MGA" | "MWK" | "MYR" | "MVR" | "MUR" | "MXN" | "MDL" | "MNT" | "MAD" | "MZM" | "MMK" | "NAD" | "NPR" | "ANG" | "TWD" | "NZD" | "NIO" | "NGN" | "KPW" | "NOK" | "PKR" | "PAB" | "PGK" | "PEN" | "PHP" | "PLN" | "QAR" | "RON" | "RUB" | "SVC" | "WST" | "STD" | "SAR" | "RSD" | "SCR" | "SLL" | "SGD" | "SKK" | "SBD" | "SOS" | "ZAR" | "SSP" | "XDR" | "LKR" | "SHP" | "SDG" | "SRD" | "SZL" | "SEK" | "CHF" | "SYP" | "TJS" | "TZS" | "THB" | "TTD" | "TRY" | "TMT" | "UAH" | "AED" | "UYU" | "USD" | "UZS" | "VEF" | "YER" | "ZMK" | "ZWL" | BentoCurrencyISOCode;
     majorUnits: boolean;
-}, {}, {
-    BentoTypography: {
-        new (...args: any[]): import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-            wide: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            stronger: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            strongest: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            el: {
-                type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | import("../typography").BentoTypographyElement>;
-            } & {
-                default: import("../typography").BentoTypographyElement;
-            };
-            large: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            medium: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            variant: {
-                type: PropType<"body" | "caption" | "title" | "subtitle" | import("../typography").BentoTypographyVariant>;
-            } & {
-                default: import("../typography").BentoTypographyVariant;
-            };
-            richText: {
-                type: PropType<boolean>;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, {
-            wide: boolean;
-            stronger: boolean;
-            strongest: boolean;
-            el: import("../typography").BentoTypographyElement | `${import("../typography").BentoTypographyElement}`;
-            large: boolean;
-            medium: boolean;
-            variant: import("../typography").BentoTypographyVariant | `${import("../typography").BentoTypographyVariant}`;
-        }, true, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").GlobalComponents, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").GlobalDirectives, string, {}, any, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-            wide: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            stronger: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            strongest: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            el: {
-                type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | import("../typography").BentoTypographyElement>;
-            } & {
-                default: import("../typography").BentoTypographyElement;
-            };
-            large: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            medium: {
-                type: PropType<boolean>;
-            } & {
-                default: boolean;
-            };
-            variant: {
-                type: PropType<"body" | "caption" | "title" | "subtitle" | import("../typography").BentoTypographyVariant>;
-            } & {
-                default: import("../typography").BentoTypographyVariant;
-            };
-            richText: {
-                type: PropType<boolean>;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {
-            wide: boolean;
-            stronger: boolean;
-            strongest: boolean;
-            el: import("../typography").BentoTypographyElement | `${import("../typography").BentoTypographyElement}`;
-            large: boolean;
-            medium: boolean;
-            variant: import("../typography").BentoTypographyVariant | `${import("../typography").BentoTypographyVariant}`;
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsBase<Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-        wide: {
-            type: PropType<boolean>;
-        } & {
-            default: boolean;
-        };
-        stronger: {
-            type: PropType<boolean>;
-        } & {
-            default: boolean;
-        };
-        strongest: {
-            type: PropType<boolean>;
-        } & {
-            default: boolean;
-        };
-        el: {
-            type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | import("../typography").BentoTypographyElement>;
-        } & {
-            default: import("../typography").BentoTypographyElement;
-        };
-        large: {
-            type: PropType<boolean>;
-        } & {
-            default: boolean;
-        };
-        medium: {
-            type: PropType<boolean>;
-        } & {
-            default: boolean;
-        };
-        variant: {
-            type: PropType<"body" | "caption" | "title" | "subtitle" | import("../typography").BentoTypographyVariant>;
-        } & {
-            default: import("../typography").BentoTypographyVariant;
-        };
-        richText: {
-            type: PropType<boolean>;
-        };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, string, {
-        wide: boolean;
-        stronger: boolean;
-        strongest: boolean;
-        el: import("../typography").BentoTypographyElement | `${import("../typography").BentoTypographyElement}`;
-        large: boolean;
-        medium: boolean;
-        variant: import("../typography").BentoTypographyVariant | `${import("../typography").BentoTypographyVariant}`;
-    }, {}, string, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").GlobalComponents, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").GlobalDirectives, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions> & import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").VNodeProps & import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").AllowedComponentProps & import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentCustomProps & (new () => {
-        $slots: {
-            default: (_: {}) => any;
-        };
-    });
-}, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>;
+    value: any;
+}>>, {}, {}, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BentoCurrencyProps>, {
+    currency: BentoCurrencyISOCode;
+    disableTypography: boolean;
+    majorUnits: boolean;
+    value: any;
+}>>> & Readonly<{}>, {
+    value: number;
+    disableTypography: boolean;
+    currency: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
+    majorUnits: boolean;
+}, {}, {}, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.types.d.ts

@@ -5,7 +5,6 @@ import { BentoColumn } from '../../data-grid.types';
 export declare enum DatagridColumnsEvent {
     COLUMN_RESIZE = "column-resize",
     COLUMN_RESIZING = "column-resizing",
-    SORT = "sort",
     SELECT_ALL_ROWS = "select-all-rows",
     SELECT_ALL_ACROSS_PAGES = "select-all-across-pages",
     COLUMN_MOVE = "column-move",

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue.d.ts

@@ -320,13 +320,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../nod
         default: boolean;
     };
 }>> & Readonly<{
+    onSort?: (updatedSortBy: BentoDatagridSortByColumn[]) => any;
     "onColumn-hover"?: (columnKey: BentoColumn) => any;
     "onColumn-resize"?: (column: {
         field: string;
         width: number;
     }) => any;
     "onColumn-resizing"?: (value: BentoColumnWidthOverridesLookup) => any;
-    onSort?: (updatedSortBy: BentoDatagridSortByColumn[]) => any;
     "onSelect-all-rows"?: (areAllItemsSelected: boolean) => any;
     "onSelect-all-across-pages"?: () => any;
     "onColumn-move"?: (movingColumn: BentoColumn, offset: number) => any;

package/dist/@types/packages/vue2/src/components/data-grid/composables/index.d.ts

@@ -1,6 +1,6 @@
 export { useResizer } from './use-resizer';
 export * from './use-calculate-column-width';
-export { useSelector } from './use-selector';
+export { useSelector } from './use-selector/use-selector';
 export { useSorter } from './use-sorter';
 export { useKeyboardNavigator } from './use-keyboard-navigator/use-keyboard-navigator';
 export { useLazyLoading } from './use-lazy-loading/use-lazy-loading';

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-calculate-column-width/use-calculate-column-width.d.ts

@@ -175,4 +175,5 @@ export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, n
             getCopyData?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => string;
         }[];
     }[]>;
+    totalWidthOfAllColumns: import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComputedRef<number>;
 };

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-scroller/use-scroller.d.ts

@@ -1,4 +1,5 @@
 import { Ref, UnwrapRef } from "../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
+import type { BentoDatagridPaginationProps } from '../..';
 /**
  * Handles all scroll events & logic for the DataGrid.
  * @param body The reference to the DataGrid body element.
@@ -6,10 +7,18 @@ import { Ref, UnwrapRef } from "../../../../../../../node_modules/.pnpm/vue@3.5.
  * @param verticalScrollPosition The reference to scroll top position number.
  * @returns Update methods for updating the scroll ppsotion references & the body scroll & overflow attributes.
  */
-export declare const useScroller: (body: Ref<UnwrapRef<HTMLDivElement>>, columnsRef: Ref<UnwrapRef<HTMLDivElement>>, verticalScrollPosition: Ref<number>) => {
+export declare const useScroller: (body: Ref<UnwrapRef<HTMLDivElement>>, columnsRef: Ref<UnwrapRef<HTMLDivElement>>, verticalScrollPosition: Ref<number>, virtualHorizontalScrollbar: Ref<UnwrapRef<HTMLDivElement | undefined>>, options?: {
+    isLazyLoad?: Ref<UnwrapRef<boolean>>;
+    pagination?: Ref<UnwrapRef<BentoDatagridPaginationProps | undefined>>;
+    stickyPagination: Ref<UnwrapRef<boolean>>;
+}) => {
     scrollLeftPosition: Ref<number, number>;
     hasLeftOverflow: Ref<boolean, boolean>;
     hasRightOverflow: Ref<boolean, boolean>;
+    horizontalScrollbarConditionalClasses: import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComputedRef<{
+        'b-data-grid__horizontal-scrollbar--sticky-pagination': boolean;
+    }>;
     updateScrollPosition: (event: Event) => void;
     updateScrollPositionOnFrozenColumnsNavigation: (event: KeyboardEvent) => void;
+    syncVirtualScrollerWithBody: (event: Event) => void;
 };

package/dist/@types/packages/vue2/src/components/data-grid/composables/{use-selector.d.ts → use-selector/use-selector.d.ts}

@@ -1,5 +1,5 @@
-import { Ref } from "../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
-import { BentoDatagridData, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from '../data-grid.types';
+import { Ref } from "../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
+import { BentoDatagridData, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from '../../data-grid.types';
 /**
  * Exposed selection variables and methods for a data component to use and react to.
  * @param selection A list of unique IDs

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-sorter.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from "../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
 import { BentoColumn, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../data-grid.types';
-import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns.types';
 /**
  * Handles the sort direction logic of the columns in DataGrid.
  * Emits the `sort` event with the new direction when the field sort direction changes.
@@ -8,7 +7,7 @@ import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-
  * @param columns Array of all columns in the grid
  * @param emit The `bento-data-grid` emit function
  */
-export declare const useSorter: (sortBy: Ref<BentoDatagridSortByColumn[]>, columns: Ref<BentoColumn[]>, emit: (event: DatagridColumnsEvent, updatedSortBy: BentoDatagridSortByColumn[]) => void) => {
+export declare const useSorter: (sortBy: Ref<BentoDatagridSortByColumn[]>, columns: Ref<BentoColumn[]>, emit: (event: "sort", updatedSortBy: BentoDatagridSortByColumn[]) => void) => {
     isSorting: (field: string) => boolean;
     getSortingDirection: (field: string) => BentoDatagridSortDirection;
     sortByColumnField: (field: string) => void;

package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts

@@ -202,6 +202,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../node_modu
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sticks the horizontal scrollbar to the bottom of the screen if the data-grid is larger than the screen height.
+     */
+    stickyHorizontalScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.
      * Because styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).
@@ -440,6 +447,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../node_modu
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sticks the horizontal scrollbar to the bottom of the screen if the data-grid is larger than the screen height.
+     */
+    stickyHorizontalScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.
      * Because styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).
@@ -503,8 +517,8 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../node_modu
     onSelect?: (...args: any[]) => any;
     onNavigate?: (...args: any[]) => any;
     "onItems-page"?: (...args: any[]) => any;
-    "onColumn-resize"?: (...args: any[]) => any;
     onSort?: (...args: any[]) => any;
+    "onColumn-resize"?: (...args: any[]) => any;
     "onSelect-all-across-pages"?: (...args: any[]) => any;
     "onUpdate:columns"?: (...args: any[]) => any;
     "onRow-click"?: (...args: any[]) => any;
@@ -579,6 +593,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../node_modu
     columnPanel: boolean;
     filterSearchTerm: any;
     noSpacingTop: boolean;
+    stickyHorizontalScrollbar: boolean;
     stickyPagination: boolean;
     stickyFilters: boolean;
     selection: BentoDatagridDataItemId[];

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

@@ -1,74 +1,45 @@
-import { PropType } from "../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
-import { BentoImageAspectRatio, BentoImageObjectFit } from './image.types';
-declare const _default: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-    /**
-     * Url to image, same as src attribute of `<img>` tag
-     */
-    src: {
-        type: StringConstructor;
-        required: true;
-    };
-    /**
-     * Accessible text describing the image, same as alt attribute of `<img>` tag
-     */
-    alt: {
-        type: StringConstructor;
-        required: true;
-    };
-    /**
-     * Aspect ratio of the image, maps to css aspect-ratio
-     */
-    aspectRatio: {
-        type: PropType<BentoImageAspectRatio | `${BentoImageAspectRatio}`>;
-        default: any;
-        validator: (value: BentoImageAspectRatio) => boolean;
-    };
-    /**
-     * Object fitting strategy, maps to css object-fit
-     */
-    objectFit: {
-        type: PropType<BentoImageObjectFit | `${BentoImageObjectFit}`>;
-        default: any;
-        validator: (value: BentoImageObjectFit) => boolean;
-    };
-}>, {
-    imageStyles: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComputedRef<{
-        aspectRatio: string;
-        objectFit: "fill" | "contain" | "cover" | BentoImageObjectFit;
-    }>;
-}, {}, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
-    /**
-     * Url to image, same as src attribute of `<img>` tag
-     */
-    src: {
-        type: StringConstructor;
-        required: true;
-    };
-    /**
-     * Accessible text describing the image, same as alt attribute of `<img>` tag
-     */
-    alt: {
-        type: StringConstructor;
-        required: true;
-    };
-    /**
-     * Aspect ratio of the image, maps to css aspect-ratio
-     */
-    aspectRatio: {
-        type: PropType<BentoImageAspectRatio | `${BentoImageAspectRatio}`>;
-        default: any;
-        validator: (value: BentoImageAspectRatio) => boolean;
-    };
-    /**
-     * Object fitting strategy, maps to css object-fit
-     */
-    objectFit: {
-        type: PropType<BentoImageObjectFit | `${BentoImageObjectFit}`>;
-        default: any;
-        validator: (value: BentoImageObjectFit) => boolean;
-    };
-}>> & Readonly<{}>, {
-    aspectRatio: "square" | "landscape" | "4:3" | "3:3" | "16:9" | "2:1" | "portrait" | "3:4" | "2:3" | "9:16" | "1:2" | "1:1" | BentoImageAspectRatio;
-    objectFit: "fill" | "contain" | "cover" | BentoImageObjectFit;
+import { BentoImageAspectRatio, BentoImageProps } from '@adyen/bento-core/src/components/image/image.types';
+/**
+ * Image component used for resizing images to certain aspect ratios and fit strategies.
+ *
+ * @example
+ * import { BentoImage } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoImage },
+ *     template: `
+ *       <bento-image
+ *           :src="imageSrc"
+ *           alt="alternative text"
+ *           aspect-ratio="landscape"
+ *           object-fit="cover"
+ *
+ *       />
+ *     `
+ * }
+ */
+declare const _default: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BentoImageProps>, {
+    aspectRatio: any;
+    objectFit: any;
+}>>, {}, {}, {}, {}, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BentoImageProps>, {
+    aspectRatio: any;
+    objectFit: any;
+}>>> & Readonly<{}>, {
+    aspectRatio: BentoImageAspectRatio | `${BentoImageAspectRatio}` | null;
+    objectFit: import("@adyen/bento-core/src/components/image/image.types").BentoImageObjectFit | `${import("@adyen/bento-core/src/components/image/image.types").BentoImageObjectFit}` | null;
 }, {}, {}, {}, string, import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

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

@@ -1,2 +1,2 @@
 export { default as BentoImage } from './image.vue';
-export * from './image.types';
+export * from '@adyen/bento-core/src/components/image/image.types';

package/dist/@types/packages/vue2/src/components/layout/components/layout-row/layout-row.vue.d.ts

@@ -0,0 +1,54 @@
+import { type BentoLayoutRowProps } from '../../layout.types';
+/**
+ * Page row is subcomponent of Layout meant to be used to generate the row layout.
+ *
+ * @example
+ * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoLayout, BentoLayoutRow },
+ *     template: `
+ *          <bento-layout>
+ *              <bento-layout-row columns-layout="3-9">
+ *                  <template #col-1>Narrow 3-9</template>
+ *                  <template #col-2>Wide 3-9</template>
+ *              </bento-layout-row>
+ *              <bento-layout-row>
+ *                  <template #col-1>6-6</template>
+ *                  <template #col-2>6-6</template>
+ *              </bento-layout-row>
+ *          </bento-layout>
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BentoLayoutRowProps>, {
+    columnsLayout: string;
+}>>, {}, {}, {}, {}, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BentoLayoutRowProps>, {
+    columnsLayout: string;
+}>>> & Readonly<{}>, {
+    columnsLayout: import("../../layout.types").BentoLayoutRowColumnLayout;
+}, {}, {}, {}, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>, {
+    default: (_: {}) => any;
+    'col-1': (_: {}) => any;
+    'col-2': (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};