@adyen/bento-vue2 1.68.2 → 1.69.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.68.2",
+  "version": "1.69.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1073,6 +1073,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "zebraRows",
+              "description": "Sets a different background color for even rows.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -1411,197 +1420,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-date-range-picker",
-          "description": "Date range picker selector.",
-          "attributes": [
-            {
-              "name": "allowTimeInput",
-              "description": "Allows user to enter time values in the form",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "disabled",
-              "description": "Disables dropdown functionality.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "errorMessage",
-              "description": "Displays component in an error state with an error message",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "firstDayOfWeek",
-              "description": "Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.firstDayOfWeek"
-              }
-            },
-            {
-              "name": "granularities",
-              "description": "A list of available granularities.\nIf present, the date picker will display a segmented control to change granularity.",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.granularities"
-              }
-            },
-            {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.isDateDisabled"
-              }
-            },
-            {
-              "name": "label",
-              "description": "Text that is displayed as a label above the element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "showEndDateOnOpen",
-              "description": "Upon opening date range picker, end date's month will be pre-selected.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "optional",
-              "description": "Highlights the dropdown is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "readonly",
-              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "required",
-              "description": "Highlights the dropdown is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "tooltipText",
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "quickSelectRanges",
-              "description": "Enables the range selector.\nIf provided, must be an array that sets the custom range dropdown items. Items are of the structure:\n`label` - label of custom range item.\n`value` - a unique key of the custom range item.\n`data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendarRangeSelectorItems"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "maxRange",
-              "description": "Set a maximum number of dates to be selectable by the range.",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.maxRange"
-              }
-            },
-            {
-              "name": "min",
-              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.min"
-              }
-            },
-            {
-              "name": "max",
-              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.max"
-              }
-            },
-            {
-              "name": "numberOfMonths",
-              "description": "Number of months rendered on pane",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.numberOfMonths"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Selected date",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.value"
-              }
-            },
-            {
-              "name": "variant",
-              "description": "The type of calendar to display. Defaults to showing days.",
-              "value": {
-                "kind": "expression",
-                "type": "`${BentoDateRangePickerVariant}`"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "hasActions",
-              "description": "Enables the date picker selection to persist until it is explicitly applied.\nDisplays a set of buttons: Apply and Cancel.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/date-range-picker/date-range-picker.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-focus-trap",
           "description": "Locks the focus inside an element for a11y navigation.\nUseful for things like modals, popovers, etc...",
@@ -2688,9 +2506,9 @@
               "description": "Defines the layout in which the button actions is presented.\nIt can be one of:",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "string"
               },
-              "default": "BentoButtonActionsLayout.BUTTONS_END"
+              "default": "'buttons-end'"
             }
           ],
           "source": {
@@ -2732,10 +2550,10 @@
             {
               "name": "actionsLayout",
               "required": false,
-              "description": "Defines the layout in which the button actions is presented.",
+              "description": "Defines the layout in which the button actions is presented.\n    *",
               "value": {
                 "kind": "expression",
-                "type": "TSLiteralType"
+                "type": "string"
               },
               "default": "'buttons-end'"
             },
@@ -2795,6 +2613,22 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "button-actions-with-menu",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/components/button-actions/__tests__/button-actions-with-menu.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "button-actions-with-menu-default",
+          "description": "",
+          "source": {
+            "module": "./src/components/internal/button-actions-with-menu/__tests__/button-actions-with-menu-default.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "button-stub",
           "description": "",
@@ -4505,6 +4339,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "zebraRows",
+              "description": "Toggles the alternating background color of rows.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
@@ -4604,6 +4447,15 @@
               },
               "default": "(item: BentoDatagridDataItem) => item.id"
             },
+            {
+              "name": "hasZebraBackground",
+              "description": "Set to true if the cell has a darker background when zebra rows is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "hoveredOverColumnState",
               "required": true,
@@ -4773,6 +4625,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "hasZebraBackground",
+              "description": "Set to true if the row has a darker background when zebra rows is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "teleportMenu",
               "description": "Set if set to true will teleport the action menu component",
@@ -5029,6 +4890,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-everything-bagel",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-everything-bagel.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid-fit-content-in-card-example",
           "description": "",
@@ -5233,6 +5102,15 @@
               },
               "default": "() => false"
             },
+            {
+              "name": "isRowEven",
+              "description": "If the row is of an even number.\nRows are 0th based index e.g. index 0 is an odd-numbered row.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "isRowLastChild",
               "description": "If the row is the last child in it's parent container.",
@@ -5544,8 +5422,8 @@
           }
         },
         {
-          "name": "date-range-picker-calendar",
-          "description": "Calendar for range dates. Contains the logic to handle the range forms.",
+          "name": "date-range-picker",
+          "description": "",
           "attributes": [
             {
               "name": "allowTimeInput",
@@ -5557,8 +5435,199 @@
               "default": "false"
             },
             {
-              "name": "dateFormData",
-              "description": "Ranges form persistance data",
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "errorMessage",
+              "description": "Displays component in an error state with an error message",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "firstDayOfWeek",
+              "description": "Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.firstDayOfWeek"
+              }
+            },
+            {
+              "name": "granularities",
+              "description": "A list of available granularities.\nIf present, the date picker will display a segmented control to change granularity.",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.granularities"
+              }
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.isDateDisabled"
+              }
+            },
+            {
+              "name": "label",
+              "description": "Text that is displayed as a label above the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "showEndDateOnOpen",
+              "description": "Upon opening date range picker, end date's month will be pre-selected.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "optional",
+              "description": "Highlights the dropdown is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "required",
+              "description": "Highlights the dropdown is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "tooltipText",
+              "description": "Adds a info icon next to the label to display the passed tooltip message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "quickSelectRanges",
+              "description": "Enables the range selector.\nIf provided, must be an array that sets the custom range dropdown items. Items are of the structure:\n`label` - label of custom range item.\n`value` - a unique key of the custom range item.\n`data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendarRangeSelectorItems"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "maxRange",
+              "description": "Set a maximum number of dates to be selectable by the range.",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.maxRange"
+              }
+            },
+            {
+              "name": "min",
+              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.min"
+              }
+            },
+            {
+              "name": "max",
+              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.max"
+              }
+            },
+            {
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.numberOfMonths"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "DateRangePickerCalendar.props.value"
+              }
+            },
+            {
+              "name": "variant",
+              "description": "The type of calendar to display. Defaults to showing days.",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoDateRangePickerVariant}`"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "hasActions",
+              "description": "Enables the date picker selection to persist until it is explicitly applied.\nDisplays a set of buttons: Apply and Cancel.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-range-picker/date-range-picker.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-range-picker-calendar",
+          "description": "Calendar for range dates. Contains the logic to handle the range forms.",
+          "attributes": [
+            {
+              "name": "allowTimeInput",
+              "description": "Allows user to enter time values in the form",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "dateFormData",
+              "description": "Ranges form persistance data",
               "value": {
                 "kind": "expression",
                 "type": "DateRangePickerCalendarFormData"
@@ -6091,69 +6160,311 @@
           "description": "",
           "attributes": [
             {
-              "name": "items",
-              "description": "The option elements to populate the avatar dropdown with.\nIt must be an array of {@see BentoAvatarListboxOptions }\n * @property {string} value.label - Text to be displayed in the option.\n * @property {string,number} value.value - Value of the option.\n * @property {string} value.src - Image source of the avatar image.",
+              "name": "enableValueLabelPair",
+              "required": false,
+              "description": "Enables value/label value handling. When `true`, the component expects and emits value/label\npair objects instead of primitive values.\n\nThis affects both the `value` prop and the `input` event payload.\n\n- **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n- **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n\nThis is particularly useful when a selected item's label is not available in the `items` prop,\nallowing the component to display the correct label for values loaded from external sources.",
               "value": {
                 "kind": "expression",
-                "type": "BentoAvatarListboxOptions"
-              },
-              "default": "() => []"
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
-              "description": "Emitted when an item is selected"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-base-textbox",
-          "description": "",
-          "attributes": [
+                "type": "boolean"
+              }
+            },
             {
-              "name": "additionalItemsSelected",
-              "description": "The number of additional items that have been selected in the dropdown.",
+              "name": "virtualScroll",
+              "required": false,
+              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
               "value": {
                 "kind": "expression",
-                "type": "number | string"
-              },
-              "default": "0"
+                "type": "BentoDropdownVirtulisationOptions"
+              }
             },
             {
-              "name": "alwaysComboboxIsInput",
-              "description": "If the combobox DOM element should be an `input` element.",
+              "name": "value",
+              "required": false,
+              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "BentoListboxSelectedValue"
+              }
             },
             {
-              "name": "ariaControls",
-              "required": true,
-              "description": "Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.",
+              "name": "tooltipText",
+              "required": false,
+              "description": "Adds a info icon next to the label to display the passed tooltip message.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "ariaExpanded",
-              "required": true,
-              "description": "Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.",
+              "name": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
               "value": {
                 "kind": "expression",
-                "type": "Booleanish"
+                "type": "boolean"
               }
             },
             {
-              "name": "ariaLabel",
-              "description": "If no label element is used then the aria-label is be set should be set.",
+              "name": "size",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "showSlotContentInMultiple",
+              "required": false,
+              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "search",
+              "required": false,
+              "description": "Dropdown search options and events.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownSearchOptions"
+              }
+            },
+            {
+              "name": "required",
+              "required": false,
+              "description": "Highlights the dropdown is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "readonly",
+              "required": false,
+              "description": "Sets the dropdown to readonly state",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "placeholder",
+              "required": false,
+              "description": "Text that appears in the form control when it has no value set",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "optional",
+              "required": false,
+              "description": "Highlights the dropdown is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "multiple",
+              "required": false,
+              "description": "If enabled, the user will be able to select multiple items.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "lazyLoadType",
+              "required": false,
+              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "componentLoading",
+              "required": false,
+              "description": "Indicates that dropdown items are loading",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "loading",
+              "required": false,
+              "description": "Indicates if new options are lazy loading.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "label",
+              "required": false,
+              "description": "Text that is displayed as a label above the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "isOptionDisabled",
+              "required": false,
+              "description": "Function that dertermines which options are disabled from interaction.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxIsOptionDisabled"
+              }
+            },
+            {
+              "name": "hasMoreItems",
+              "required": false,
+              "description": "Indicates whether there are more items to load",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "description",
+              "required": false,
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "errorMessage",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state with an error message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "error",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "dynamicFiltering",
+              "required": false,
+              "description": "Sets the possibility to type into the textbox.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables dropdown functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "emptyState",
+              "required": false,
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownEmptyStateProps"
+              }
+            },
+            {
+              "name": "condensed",
+              "required": false,
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "ariaLabel",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "items",
+              "required": false,
+              "description": "The option elements to populate the avatar dropdown with.\nIt must be an array of {@see BentoAvatarListboxOptions }",
+              "value": {
+                "kind": "expression",
+                "type": "BentoAvatarListboxOptions"
+              },
+              "default": "() => []"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Emitted when an item is selected"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-base-textbox",
+          "description": "",
+          "attributes": [
+            {
+              "name": "additionalItemsSelected",
+              "description": "The number of additional items that have been selected in the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "number | string"
+              },
+              "default": "0"
+            },
+            {
+              "name": "alwaysComboboxIsInput",
+              "description": "If the combobox DOM element should be an `input` element.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "ariaControls",
+              "required": true,
+              "description": "Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "ariaExpanded",
+              "required": true,
+              "description": "Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.",
+              "value": {
+                "kind": "expression",
+                "type": "Booleanish"
+              }
+            },
+            {
+              "name": "ariaLabel",
+              "description": "If no label element is used then the aria-label is be set should be set.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -6580,232 +6891,474 @@
           "description": "",
           "attributes": [
             {
-              "name": "ariaLabel",
-              "description": "Defines a string value that labels an interactive element.",
+              "name": "ariaLabel",
+              "description": "Defines a string value that labels an interactive element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "componentLoading",
+              "description": "Indicates that dropdown items are loading",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "emptyState",
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownEmptyStateProps"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasMoreItems",
+              "description": "Indicates whether there are more items to load",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "id",
+              "required": true,
+              "description": "Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "isOptionDisabled",
+              "description": "Function that allows the options to be disabled",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownIsOptionDisabled"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "The option elements to populate the dropdown with.\nIt must be an array of {@see BentoDropdownOptionItem }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string,number} value.value - Value of the option",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxOptions"
+              }
+            },
+            {
+              "name": "lazyLoadType",
+              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`"
+              },
+              "default": "BentoDropdownLazyLoadType.AUTOMATIC"
+            },
+            {
+              "name": "loading",
+              "description": "Indicates if new options are lazy loading.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "multiple",
+              "description": "If enabled, the user will be able to select multiple items.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "open",
+              "required": true,
+              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "selectedValue",
+              "description": "The `input` value.\nProviding an empty string or empty array will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected for single select",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxOptions"
+              },
+              "default": "null"
+            },
+            {
+              "name": "searching",
+              "description": "Flag that indicates that an external search it's being made\nto filter out the items inside the the multi-select listbox\n\nIf enabled, hides the \"Select all\" checkbox in \"multiple\" mode.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListbox.props.searching"
+              }
+            },
+            {
+              "name": "staticCategories",
+              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "targetElement",
+              "required": true,
+              "description": "Reference to the DOM element or Vue component for positioning\nthe Dropdown container.",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainer.props.targetElement.type"
+              }
+            },
+            {
+              "name": "virtualScroll",
+              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownVirtulisationOptions"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-options-container-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "open",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownOptionsContainer.props.open"
+              }
+            },
+            {
+              "name": "componentLoading",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownOptionsContainer.props.componentLoading"
+              }
+            },
+            {
+              "name": "selectedValue",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownOptionsContainer.props.selectedValue"
+              }
+            },
+            {
+              "name": "items",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownOptionsContainer.props.items"
+              }
+            },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownOptionsContainer.props.multiple"
+              }
+            },
+            {
+              "name": "searching",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownOptionsContainer.props.searching"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-options-container/__tests__/dropdown-options-container-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-payment-method",
+          "description": "",
+          "attributes": [
+            {
+              "name": "enableValueLabelPair",
+              "required": false,
+              "description": "Enables value/label value handling. When `true`, the component expects and emits value/label\npair objects instead of primitive values.\n\nThis affects both the `value` prop and the `input` event payload.\n\n- **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n- **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n\nThis is particularly useful when a selected item's label is not available in the `items` prop,\nallowing the component to display the correct label for values loaded from external sources.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "virtualScroll",
+              "required": false,
+              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
+                "type": "BentoDropdownVirtulisationOptions"
+              }
             },
             {
-              "name": "componentLoading",
-              "description": "Indicates that dropdown items are loading",
+              "name": "value",
+              "required": false,
+              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "BentoListboxSelectedValue"
+              }
             },
             {
-              "name": "emptyState",
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "name": "tooltipText",
+              "required": false,
+              "description": "Adds a info icon next to the label to display the passed tooltip message.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
-              },
-              "default": "undefined"
+                "type": "string"
+              }
             },
             {
-              "name": "disabled",
-              "description": "Disables dropdown functionality",
+              "name": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "hasMoreItems",
-              "description": "Indicates whether there are more items to load",
+              "name": "size",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "showSlotContentInMultiple",
+              "required": false,
+              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "id",
-              "required": true,
-              "description": "Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.",
+              "name": "search",
+              "required": false,
+              "description": "Dropdown search options and events.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDropdownSearchOptions"
               }
             },
             {
-              "name": "isOptionDisabled",
-              "description": "Function that allows the options to be disabled",
+              "name": "required",
+              "required": false,
+              "description": "Highlights the dropdown is required.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownIsOptionDisabled"
-              },
-              "default": "undefined"
+                "type": "boolean"
+              }
             },
             {
-              "name": "items",
-              "required": true,
-              "description": "The option elements to populate the dropdown with.\nIt must be an array of {@see BentoDropdownOptionItem }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string,number} value.value - Value of the option",
+              "name": "readonly",
+              "required": false,
+              "description": "Sets the dropdown to readonly state",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxOptions"
+                "type": "boolean"
               }
             },
             {
-              "name": "lazyLoadType",
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "name": "placeholder",
+              "required": false,
+              "description": "Text that appears in the form control when it has no value set",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`"
-              },
-              "default": "BentoDropdownLazyLoadType.AUTOMATIC"
+                "type": "string"
+              }
             },
             {
-              "name": "loading",
-              "description": "Indicates if new options are lazy loading.",
+              "name": "optional",
+              "required": false,
+              "description": "Highlights the dropdown is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
               "name": "multiple",
+              "required": false,
               "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "open",
-              "required": true,
-              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "name": "lazyLoadType",
+              "required": false,
+              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "union"
               }
             },
             {
-              "name": "selectedValue",
-              "description": "The `input` value.\nProviding an empty string or empty array will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected for single select",
+              "name": "componentLoading",
+              "required": false,
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxOptions"
-              },
-              "default": "null"
+                "type": "boolean"
+              }
             },
             {
-              "name": "searching",
-              "description": "Flag that indicates that an external search it's being made\nto filter out the items inside the the multi-select listbox\n\nIf enabled, hides the \"Select all\" checkbox in \"multiple\" mode.",
+              "name": "loading",
+              "required": false,
+              "description": "Indicates if new options are lazy loading.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListbox.props.searching"
+                "type": "boolean"
               }
             },
             {
-              "name": "staticCategories",
-              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "name": "label",
+              "required": false,
+              "description": "Text that is displayed as a label above the element.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
-              "name": "targetElement",
-              "required": true,
-              "description": "Reference to the DOM element or Vue component for positioning\nthe Dropdown container.",
+              "name": "isOptionDisabled",
+              "required": false,
+              "description": "Function that dertermines which options are disabled from interaction.",
               "value": {
                 "kind": "expression",
-                "type": "PopperContainer.props.targetElement.type"
+                "type": "BentoListboxIsOptionDisabled"
               }
             },
             {
-              "name": "virtualScroll",
-              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
+              "name": "hasMoreItems",
+              "required": false,
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownVirtulisationOptions"
-              },
-              "default": "false"
-            }
-          ],
-          "slots": [
+                "type": "boolean"
+              }
+            },
             {
-              "name": "innerSlot"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-options-container-stub",
-          "description": "",
-          "attributes": [
+              "name": "description",
+              "required": false,
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
-              "name": "open",
+              "name": "errorMessage",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state with an error message.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.open"
+                "type": "string"
               }
             },
             {
-              "name": "componentLoading",
+              "name": "error",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.componentLoading"
+                "type": "boolean"
               }
             },
             {
-              "name": "selectedValue",
+              "name": "dynamicFiltering",
+              "required": false,
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.selectedValue"
+                "type": "boolean"
               }
             },
             {
-              "name": "items",
+              "name": "disabled",
+              "required": false,
+              "description": "Disables dropdown functionality.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.items"
+                "type": "boolean"
               }
             },
             {
-              "name": "multiple",
+              "name": "emptyState",
+              "required": false,
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.multiple"
+                "type": "BentoDropdownEmptyStateProps"
               }
             },
             {
-              "name": "searching",
+              "name": "condensed",
+              "required": false,
+              "description": "Renders the dropdown with a condensed style.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.searching"
+                "type": "boolean"
               }
-            }
-          ],
-          "slots": [
+            },
             {
-              "name": "innerSlot"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-options-container/__tests__/dropdown-options-container-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-payment-method",
-          "description": "",
-          "attributes": [
+              "name": "ariaLabel",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "items",
-              "description": "The option elements to populate the payment method dropdown with.\nIt must be an array of {@see BentoPaymentMethodListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}",
+              "required": false,
+              "description": "The option elements to populate the payment method dropdown with.\nIt must be an array of {@see BentoPaymentMethodListboxOptions }",
               "value": {
                 "kind": "expression",
                 "type": "BentoPaymentMethodListboxOptions"
@@ -8209,7 +8762,7 @@
             {
               "name": "actions",
               "required": false,
-              "description": "Optional list of actions (buttons) to display in the header.\nThe structure of each action is defined by the `BentoButtonActionsList` type.",
+              "description": "Optional list of actions (buttons) to display in the header.\nThe structure of each action is defined by the `BentoButtonActionsList` type.\n\n{@link [BentoButtonActionsList](https://adyen-bento.netlify.app/?path=/docs/components-button-button-actions--docs#variations)}",
               "value": {
                 "kind": "expression",
                 "type": "BentoButtonActionsList"
@@ -8229,7 +8782,7 @@
             {
               "name": "views",
               "required": false,
-              "description": "Optional array of view items to display as selectable views or tabs.\nEach item's structure is defined by the `BentoHeaderWithViewsItem` interface.",
+              "description": "Optional array of view items to display as selectable views or tabs.\n\nEach view should have the following property:\n- `icon` (BentoHeaderWithViewsItemIcon, optional): Optional icon to display.\n- `iconColor` (BentoHeaderWithViewsItemIconColor, optional): Optional color of the icon.\n- `label` (string): Text label for the view item.\n- `isDefault` (boolean, optional): Indicates if this view item is the default or currently active view.\n- `additionalViewSetting` (BentoHeaderWithViewsItemAdditionalConfig, optional): Optional configuration for an additional view setting.\n- `isFixed` (boolean, optional): Indicates if this view can be edited or deleted.     * @see {@link BentoHeaderWithViewsItem}",
               "value": {
                 "kind": "expression",
                 "type": "Array"
@@ -8433,7 +8986,7 @@
             {
               "name": "actions",
               "required": false,
-              "description": "Optional list of actions (buttons) to display in the header.\nThe structure of each action is defined by the `BentoButtonActionsList` type.",
+              "description": "Optional list of actions (buttons) to display in the header.\nThe structure of each action is defined by the `BentoButtonActionsList` type.\n\n{@link [BentoButtonActionsList](https://adyen-bento.netlify.app/?path=/docs/components-button-button-actions--docs#variations)}",
               "value": {
                 "kind": "expression",
                 "type": "BentoButtonActionsList"
@@ -8451,7 +9004,7 @@
             {
               "name": "views",
               "required": false,
-              "description": "Optional array of view items to display as selectable views or tabs.\nEach item's structure is defined by the `BentoHeaderWithViewsItem` interface.",
+              "description": "Optional array of view items to display as selectable views or tabs.\n\nEach view should have the following property:\n- `icon` (BentoHeaderWithViewsItemIcon, optional): Optional icon to display.\n- `iconColor` (BentoHeaderWithViewsItemIconColor, optional): Optional color of the icon.\n- `label` (string): Text label for the view item.\n- `isDefault` (boolean, optional): Indicates if this view item is the default or currently active view.\n- `additionalViewSetting` (BentoHeaderWithViewsItemAdditionalConfig, optional): Optional configuration for an additional view setting.\n- `isFixed` (boolean, optional): Indicates if this view can be edited or deleted.     * @see {@link BentoHeaderWithViewsItem}",
               "value": {
                 "kind": "expression",
                 "type": "Array"
@@ -9301,7 +9854,7 @@
                 "kind": "expression",
                 "type": "Array"
               },
-              "default": "() => getSupportedCountries()"
+              "default": "() => BentoInputFieldPhoneNumberCountries"
             },
             {
               "name": "dropdown",
@@ -9359,6 +9912,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "input-field-phone-number-supported-countries-filtered-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/input-field-phone-number/__tests__/input-field-phone-number-supported-countries-filtered-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "input-filter",
           "description": "",
@@ -10159,7 +10720,7 @@
                 "kind": "expression",
                 "type": "union"
               },
-              "default": "BentoPopoverPositions.BOTTOM_START"
+              "default": "'bottom-start'"
             },
             {
               "name": "menuFixedPositioning",
@@ -12621,6 +13182,16 @@
               },
               "default": "300"
             },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the text input.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "hint",
               "required": false,