@adyen/bento-vue3 1.25.0 → 1.26.0

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

@@ -197,9 +197,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
 }, {
     condensed: boolean;
     draggingColumns: any;
+    isMeasuringColumnWidths: boolean;
     getDataItemId: BentoDatagridGetDataItemIdFn;
     isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
-    isMeasuringColumnWidths: boolean;
 }>, Record<string, (_: {
     item: BentoDatagridDataItem;
 }) => any>>;

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

@@ -3,12 +3,20 @@ import type { BentoMenuItem } from "../../../menu/components";
 import type { BentoDatagridDataItem } from "../..";
 import { OmitStrict } from "../../../../types";
 export type BentoColumnCellActionVariant = 'copy' | 'edit' | 'open' | 'more';
+export type BentoColumnCellActionEvent = (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+export type BentoColumnCellActionMenuItem = {
+    /**
+     * @deprecated This property will be removed in version 2.0, please use `event` instead.
+     */
+    handler?: BentoMenuItem['handler'];
+    event?: BentoColumnCellActionEvent;
+} & OmitStrict<BentoMenuItem, 'handler'>;
 export type BentoColumnCellAction = OmitStrict<BentoButtonActionObject, 'variant' | 'event' | 'title' | 'icon' | 'state'> & {
     title?: string;
-    event?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+    event?: BentoColumnCellActionEvent;
     isShort?: true;
     variant?: BentoColumnCellActionVariant;
-    menuData?: BentoMenuItem[];
+    menuData?: BentoColumnCellActionMenuItem[];
     getCopyData?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => string;
 };
 export type BentoColumnCellActions = BentoColumnCellAction[];

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

@@ -18,6 +18,9 @@ export declare enum DatagridColumnsEvent {
     COLUMN_DRAG_END = "column-dragend",
     COLUMN_DROP = "column-drop"
 }
+export interface DatagridColumnsHeaderReferences {
+    [key: string]: HTMLDivElement | null;
+}
 /**
  * The Datagrid column dragging state.
  * @interface BentoDatagridDraggingColumnState

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

@@ -1,7 +1,7 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn } from '../../data-grid.types';
-import { BentoDatagridDraggingColumnState } from './data-grid-columns.types';
-import { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
+import { BentoDatagridDraggingColumnState, DatagridColumnsHeaderReferences } from './data-grid-columns.types';
+import type { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
 /**
  * A component to display the BentoDataGrid columns
  *
@@ -103,7 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
-    isMeasuringColunWidths: {
+    isMeasuringColumnWidths: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -157,7 +157,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+}, {
+    columnHeaderRefs: import("../../../../../../vue3/node_modules/vue").Ref<DatagridColumnsHeaderReferences>;
+}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     "column-resize": (column: {
         field: string;
         width: number;
@@ -248,7 +250,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
-    isMeasuringColunWidths: {
+    isMeasuringColumnWidths: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -328,7 +330,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     hasColumnPanel: boolean;
     hasFirstColumnPanelRightAligned: boolean;
     hasLeftOverflow: boolean;
-    isMeasuringColunWidths: boolean;
+    isMeasuringColumnWidths: boolean;
     isOnlyOneVisibleColumn: boolean;
     showFrozenColumnsSeparator: boolean;
     allItemsSelectedState: BentoDatagridAllItemsSelectedState;

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

@@ -1,12 +1,15 @@
-import { Ref } from "../../../../../../vue3/node_modules/vue";
-import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridData } from '../../data-grid.types';
-import { CalculateColumnWidthOptions } from './use-calculate-column-width.types';
-import { MaybeRef } from "../../../../types";
+import { type Ref } from "../../../../../../vue3/node_modules/vue";
+import type { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridData } from '../../data-grid.types';
+import type { CalculateColumnWidthOptions } from './use-calculate-column-width.types';
+import type { MaybeRef } from "../../../../types";
+import type { DatagridColumnsHeaderReferences } from '../../components/data-grid-columns/data-grid-columns.types';
 export declare const DEFAULT_COLUMN_WIDTH = 100;
 export declare const DEFAULT_COLUMN_MIN_WIDTH = 50;
 export declare const DATAGRID_SELECT_FIELD_NAME = "b-select";
 export declare const DATAGRID_SELECT_WIDTH = 32;
 export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
+export declare const DATAGRID_CELL_OFFSET_INITIAL = 4;
+export declare const DATAGRID_CELL_OFFSET_PADDING = 16;
 /**
  * Calculates the width of the columns using width, minWidth and/or a fluid number.
  *
@@ -16,7 +19,7 @@ export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
  * @param gridCellRefs An array of Ref for each one of the cells available by Column
  * @param options Optional options for the calculator to be aware of.
  */
-export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, newData: MaybeRef<BentoDatagridData>, bodyRef: MaybeRef<HTMLDivElement | undefined>, gridCellRefs: MaybeRef<{
+export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, newData: MaybeRef<BentoDatagridData>, bodyRef: MaybeRef<HTMLDivElement | undefined>, gridColumnsComponentRefs: MaybeRef<DatagridColumnsHeaderReferences>, gridCellRefs: MaybeRef<{
     [key: string]: HTMLDivElement[];
 }>, options?: CalculateColumnWidthOptions) => {
     columnDefs: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
@@ -73,18 +76,30 @@ export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, n
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -6,6 +6,7 @@ export type FlexColumnLookup = Record<BentoColumn['field'], {
     frozen: boolean;
 }>;
 export interface CalculateColumnWidthOptions {
+    hasColumnPanel?: Ref<boolean>;
     hasSelectableColumn?: Ref<boolean>;
     hasSelectableAcrossPages?: Ref<boolean>;
 }

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

@@ -30,18 +30,30 @@ export declare const useColumnHovering: (columnSets: Ref<DatagridConfigSettingsC
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../..").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -38,18 +38,30 @@ export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, h
                 iconLeft?: object | Element | (object | Element)[];
                 iconRight?: object | Element | (object | Element)[];
                 title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 isShort?: true;
                 variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
                 menuData?: {
+                    handler?: () => void;
+                    event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                     text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
+                    critical?: boolean;
                     disabled?: boolean;
-                    chevron?: boolean;
                     icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
+                    items?: {
+                        text: string;
+                        handler: () => void;
+                        secondaryText?: string;
+                        items?: any[];
+                        disabled?: boolean;
+                        chevron?: boolean;
+                        icon?: object | Element | (object | Element)[];
+                        critical?: boolean;
+                        indent?: boolean;
+                        addDivider?: boolean;
+                    }[];
+                    secondaryText?: string;
+                    chevron?: boolean;
                     indent?: boolean;
                     addDivider?: boolean;
                 }[];
@@ -85,18 +97,30 @@ export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, h
                 iconLeft?: object | Element | (object | Element)[];
                 iconRight?: object | Element | (object | Element)[];
                 title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 isShort?: true;
                 variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
                 menuData?: {
+                    handler?: () => void;
+                    event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                     text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
+                    critical?: boolean;
                     disabled?: boolean;
-                    chevron?: boolean;
                     icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
+                    items?: {
+                        text: string;
+                        handler: () => void;
+                        secondaryText?: string;
+                        items?: any[];
+                        disabled?: boolean;
+                        chevron?: boolean;
+                        icon?: object | Element | (object | Element)[];
+                        critical?: boolean;
+                        indent?: boolean;
+                        addDivider?: boolean;
+                    }[];
+                    secondaryText?: string;
+                    chevron?: boolean;
                     indent?: boolean;
                     addDivider?: boolean;
                 }[];

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

@@ -44,18 +44,30 @@ export declare const useConfigSettings: (columnsRef: MaybeRef<BentoColumn[]>, em
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -47,18 +47,30 @@ export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: Dat
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -102,8 +102,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            };
+            }; /**
+             * If resize is enabled
+             */
             headingEl: {
+                /**
+                 * A customisable method to determine if a row is not selectable.
+                 * The default is that every row is selectable.
+                 */
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
                 validator: (value: import("../typography").BentoTypographyElement) => boolean;
@@ -222,29 +228,6 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             };
             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: {
@@ -422,8 +405,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            };
+            }; /**
+             * If resize is enabled
+             */
             headingEl: {
+                /**
+                 * A customisable method to determine if a row is not selectable.
+                 * The default is that every row is selectable.
+                 */
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
                 validator: (value: import("../typography").BentoTypographyElement) => boolean;
@@ -542,29 +531,6 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             };
             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: {

package/dist/@types/packages/vue2/src/components/tutorial/components/tutorial-popover/tutorial-popover.vue.d.ts

@@ -2,6 +2,7 @@ import { PropType, type default as Vue } from "../../../../../../vue3/node_modul
 import { BentoPopoverPositions } from "../../../popover";
 import { type BentoButtonActionObject } from "../../../button";
 import type { VueNodeElement } from "../../../../types";
+import type { BentoTutorialScrollOptions } from '../../tutorial.types';
 declare const _default: __VLS_WithTemplateSlots<Vue.DefineComponent<{
     /**
      * Optional configuration for the secondary action.
@@ -61,6 +62,15 @@ declare const _default: __VLS_WithTemplateSlots<Vue.DefineComponent<{
         default: import("../../../popper-container").PopperContainerPositionExtended;
         validator: (value: BentoPopoverPositions) => boolean;
     };
+    /**
+     * Options to control the scroll into view behavior.
+     * Takes the same options as the `scrollIntoView` function
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+     */
+    scrollOptions: {
+        type: PropType<BentoTutorialScrollOptions>;
+        default: any;
+    };
     /**
      * Indicates whether this popover is a single tutorial or a tour.
      */
@@ -166,6 +176,15 @@ declare const _default: __VLS_WithTemplateSlots<Vue.DefineComponent<{
         default: import("../../../popper-container").PopperContainerPositionExtended;
         validator: (value: BentoPopoverPositions) => boolean;
     };
+    /**
+     * Options to control the scroll into view behavior.
+     * Takes the same options as the `scrollIntoView` function
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+     */
+    scrollOptions: {
+        type: PropType<BentoTutorialScrollOptions>;
+        default: any;
+    };
     /**
      * Indicates whether this popover is a single tutorial or a tour.
      */
@@ -240,6 +259,7 @@ declare const _default: __VLS_WithTemplateSlots<Vue.DefineComponent<{
     active: boolean;
     action: BentoButtonActionObject;
     totalSteps: number;
+    scrollOptions: any;
 }>, {
     default: (_: {}) => any;
 }>;

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

@@ -11,3 +11,4 @@ export interface BentoTutorialStep {
     action?: BentoButtonActionObject;
     position?: `${BentoPopoverPositions}`;
 }
+export type BentoTutorialScrollOptions = boolean | ScrollIntoViewOptions;

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

@@ -1,5 +1,5 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
-import type { BentoTutorialStep } from './tutorial.types';
+import type { BentoTutorialScrollOptions, BentoTutorialStep } from './tutorial.types';
 /**
  * The Tutorial is a temporary popover that should be used to educate users about
  * new or unfamiliar features or experiences.
@@ -44,6 +44,15 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         required: true;
         validator: (value: BentoTutorialStep[]) => boolean;
     };
+    /**
+     * Options to control the scroll into view behavior.
+     * Takes the same options as the `scrollIntoView` function
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+     */
+    scrollOptions: {
+        type: PropType<BentoTutorialScrollOptions>;
+        default: any;
+    };
 }, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
     /**
      * The steps configuration for the tutorial.
@@ -54,5 +63,16 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         required: true;
         validator: (value: BentoTutorialStep[]) => boolean;
     };
-}>>, {}>;
+    /**
+     * Options to control the scroll into view behavior.
+     * Takes the same options as the `scrollIntoView` function
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+     */
+    scrollOptions: {
+        type: PropType<BentoTutorialScrollOptions>;
+        default: any;
+    };
+}>>, {
+    scrollOptions: any;
+}>;
 export default _default;

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

@@ -1,2 +1,2 @@
 export { default as BentoTypography } from './typography.vue';
-export * from './typography.types';
+export * from "../../../../core/src/components/typography/typography.types";

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

@@ -1,4 +1,4 @@
-import { BentoTypographyElement, BentoTypographyVariant } from './typography.types';
+import { BentoTypographyElement, BentoTypographyVariant } from "../../../../core/src/components/typography/typography.types";
 /**
  * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles
  * easily to text. The variants and properties match with those found in Figma.

package/dist/accordion.js

@@ -1,11 +1,11 @@
 import { defineComponent as C, provide as k, toRef as B, openBlock as a, createElementBlock as r, renderSlot as E, ref as b, inject as O, computed as $, watch as s, createVNode as y, unref as e, withCtx as g, createElementVNode as h, createBlock as I, createTextVNode as z, toDisplayString as A, Transition as D, normalizeStyle as H, createCommentVNode as V } from "vue";
 import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as w } from "./chunks/index.11b6dd35.js";
-import { C as R, a as j } from "./chunks/chevron-up.638a9f34.js";
+import { B as w } from "./chunks/index.a3d60e4f.js";
+import { C as R, a as j } from "./chunks/chevron-up.05ca20db.js";
 import { g as x } from "./chunks/unique-id.a2a2b458.js";
 import { o as M } from "./chunks/resize.a041304d.js";
 import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index3.css";
+import "./assets/index10.css";
 const S = Symbol("accordion title size injection key"), q = { class: "b-accordion" }, J = {}, K = /* @__PURE__ */ C({
   ...J,
   __name: "accordion",

package/dist/action-bar.js

@@ -1,13 +1,13 @@
 import { onMounted as k, nextTick as B, getCurrentScope as z, onScopeDispose as H, unref as o, getCurrentInstance as x, ref as _, watch as A, watchEffect as U, computed as y, defineComponent as Y, toRefs as K, provide as Q, openBlock as S, createBlock as I, Transition as $, withCtx as w, createElementVNode as V, normalizeClass as q, createElementBlock as J, createVNode as N, createCommentVNode as Z, createTextVNode as X, toDisplayString as W } from "vue";
-import { a as ee } from "./chunks/button.de5589fa.js";
-import { B as te } from "./chunks/index.11b6dd35.js";
-import { B as ne } from "./chunks/button-actions-with-menu.a007b034.js";
-import { C as ae } from "./chunks/cross.26509efc.js";
+import { a as ee } from "./chunks/button.60dad578.js";
+import { B as te } from "./chunks/index.a3d60e4f.js";
+import { B as ne } from "./chunks/button-actions-with-menu.7fce47a2.js";
+import { C as ae } from "./chunks/cross.a60533f6.js";
 import { u as oe } from "./chunks/i18n.f7e6533e.js";
-import { P as ie } from "./chunks/index.bab8811d.js";
-import { B as se } from "./chunks/button-actions.adc0a2fe.js";
+import { P as ie } from "./chunks/index.5bdebf9d.js";
+import { B as se } from "./chunks/button-actions.642b37de.js";
 import { _ as ce } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index5.css";
+import "./assets/index17.css";
 function P(e) {
   return z() ? (H(e), !0) : !1;
 }

package/dist/alert.js

@@ -1,13 +1,13 @@
 import { openBlock as s, createElementBlock as l, mergeProps as v, toDisplayString as b, createCommentVNode as a, createElementVNode as o, defineComponent as N, useSlots as A, computed as r, onMounted as M, unref as e, normalizeClass as R, createBlock as C, resolveDynamicComponent as D, withCtx as g, renderSlot as m, createVNode as P } from "vue";
-import { c as Z, a as y, B as I } from "./chunks/index.11b6dd35.js";
-import { a as F } from "./chunks/button.de5589fa.js";
-import { C as U } from "./chunks/cross-small.b85406fe.js";
+import { c as Z, a as y, B as I } from "./chunks/index.a3d60e4f.js";
+import { a as F } from "./chunks/button.60dad578.js";
+import { C as U } from "./chunks/cross-small.9bc6a02f.js";
 import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { C as W } from "./chunks/cross-circle-fill.1abec1a2.js";
-import { C as q } from "./chunks/checkmark-circle-fill.c45a999d.js";
+import { C as W } from "./chunks/cross-circle-fill.81925c7f.js";
+import { C as q } from "./chunks/checkmark-circle-fill.f3a69c6a.js";
 import { u as z } from "./chunks/use-has-slot.4d98bf29.js";
 import { u as O } from "./chunks/i18n.f7e6533e.js";
-import "./assets/index6.css";
+import "./assets/index11.css";
 var p = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(p || {}), n = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(n || {}), S = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))(S || {});
 let H = 0;
 const Y = {