@adyen/bento-vue2 1.68.2 → 1.70.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.68.2",
+  "version": "1.70.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...",
@@ -2276,14 +2094,14 @@
         },
         {
           "name": "bento-select-country-filter",
-          "description": "The Select Country filter displays a listbox of country items\npassed in the \"options.listboxItems\" property.",
+          "description": "The Select Tag filter displays a listbox of tag items\npassed in the \"options.listboxItems\" property.",
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "description": "List of options that are needed to setup the tag filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "BentoSelectTagFilterOptions"
               },
               "default": "undefined"
             }
@@ -2294,20 +2112,20 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue",
             "symbol": "default"
           }
         },
         {
           "name": "bento-select-country-filter",
-          "description": "The Select Tag filter displays a listbox of tag items\npassed in the \"options.listboxItems\" property.",
+          "description": "The Select Country filter displays a listbox of country items\npassed in the \"options.listboxItems\" property.",
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the tag filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectTagFilterOptions"
+                "type": "BentoSelectCurrencyFilterOptions"
               },
               "default": "undefined"
             }
@@ -2318,7 +2136,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
             "symbol": "default"
           }
         },
@@ -2395,7 +2213,7 @@
         },
         {
           "name": "bento-timeline-item",
-          "description": "TimelineItem renders each event in the Timeline component",
+          "description": "BentoTimelineItem renders each event in the Timeline component",
           "attributes": [
             {
               "name": "additionalTimestamp",
@@ -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": "",
@@ -3935,6 +3769,9 @@
             }
           ],
           "slots": [
+            {
+              "name": "description"
+            },
             {
               "name": "default"
             }
@@ -4505,6 +4342,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 +4450,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 +4628,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",
@@ -5030,7 +4894,15 @@
           }
         },
         {
-          "name": "data-grid-fit-content-in-card-example",
+          "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": "",
           "source": {
             "module": "./src/components/data-grid/__tests__/data-grid-fit-content-in-card-example.vue",
@@ -5233,6 +5105,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.",
@@ -5495,6 +5376,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-with-slots-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-with-slots-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid.test",
           "description": "",
@@ -5543,6 +5432,197 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "date-range-picker",
+          "description": "",
+          "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": "date-range-picker-calendar",
           "description": "Calendar for range dates. Contains the logic to handle the range forms.",
@@ -6091,255 +6171,1452 @@
           "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": "tooltipText",
+              "required": false,
+              "description": "Adds a info icon next to the label to display the passed tooltip message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "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"
+              },
+              "default": "null"
+            },
+            {
+              "name": "ariaLabelledby",
+              "description": "Corresponds to the label's id that labels the textbox element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "debounceTime",
+              "description": "Custom debounce time for the user type event.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "300"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables any textbox functionality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "displayValue",
+              "description": "Selected option's label",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "dynamicFiltering",
+              "description": "Sets the possibility to type into the textbox.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "isInvalid",
+              "description": "Marks the textbox as invalid, rendering an error state",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "open",
+              "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "description": "Sets the dropdown to readonly state",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "description": "The input value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "selectedValueItem",
+              "description": "The selected value's list box item.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxOptionItem | BentoListboxOptionItem[]"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "showSlotContentInMultiple",
+              "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": "size",
+              "description": "Dropdown size",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownSize | `${BentoDropdownSize}`"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "icon"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-click-outside-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "items",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.items"
+              }
+            },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.multiple"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/__tests__/dropdown-click-outside-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-country",
+          "description": "",
+          "attributes": [
+            {
+              "name": "items",
+              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCountryListboxOptions }\n * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n * @property {BentoCountryCode | string} value.value - Country code of the option",
+              "value": {
+                "kind": "expression",
+                "type": "BentoCountryListboxOptions"
+              },
+              "default": "() => []"
+            },
+            {
+              "name": "variant",
+              "description": "Which label variant to display.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoCountryVariant | `${BentoCountryVariant}`"
+              },
+              "default": "BentoCountryVariant.CUSTOM"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Emitted when an item is selected"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-currency",
+          "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": "BentoDropdownVirtulisationOptions"
+              }
+            },
+            {
+              "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": "BentoListboxSelectedValue"
+              }
+            },
+            {
+              "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": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "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 currency dropdown with.\nIt must be an array of {@see BentoCurrencyListboxOptions }",
+              "value": {
+                "kind": "expression",
+                "type": "BentoCurrencyListboxOptions"
+              },
+              "default": "() => []"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Emitted when an item is selected"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-default-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": "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"
+              },
+              "default": "null"
+            },
+            {
+              "name": "ariaLabelledby",
+              "description": "Corresponds to the label's id that labels the textbox element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "condensed",
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "debounceTime",
+              "description": "Custom debounce time. Default: 300",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "300"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables any textbox functionality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "displayValue",
+              "description": "Selected option's label",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "dynamicFiltering",
+              "description": "Sets the possibility to type into the textbox",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "isInvalid",
+              "description": "Marks the textbox as invalid, rendering an error state",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "open",
+              "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "description": "Sets the dropdown to readonly state",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "selectedValueItem",
+              "description": "The selected value's list box item.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxOptionItem | BentoListboxOptionItem[]"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "showSlotContentInMultiple",
+              "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": "value",
+              "description": "The input value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "clear",
+              "description": "Emitted on clearing the input."
+            },
+            {
+              "name": "close",
+              "description": "Emitted on click, space and enter user events. It will open the dropdown."
+            },
+            {
+              "name": "input",
+              "description": "Emitted on input event."
+            },
+            {
+              "name": "keydown",
+              "description": "Emitted on keydown event."
+            },
+            {
+              "name": "open",
+              "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-lazy-load-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/dropdown/__tests__/dropdown-lazy-load-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-options-container",
+          "description": "",
+          "attributes": [
+            {
+              "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": "ariaControls",
+              "name": "hasMoreItems",
+              "description": "Indicates whether there are more items to load",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "id",
               "required": true,
-              "description": "Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.",
+              "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": "BentoDropdownVirtulisationOptions"
+              }
+            },
+            {
+              "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": "BentoListboxSelectedValue"
+              }
+            },
+            {
+              "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": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "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": "string"
+                "type": "BentoDropdownSearchOptions"
               }
             },
             {
-              "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": "required",
+              "required": false,
+              "description": "Highlights the dropdown is required.",
               "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": "readonly",
+              "required": false,
+              "description": "Sets the dropdown to readonly state",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
+                "type": "boolean"
+              }
             },
             {
-              "name": "ariaLabelledby",
-              "description": "Corresponds to the label's id that labels the textbox element.",
+              "name": "placeholder",
+              "required": false,
+              "description": "Text that appears in the form control when it has no value set",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "null"
+              }
             },
             {
-              "name": "debounceTime",
-              "description": "Custom debounce time for the user type event.",
+              "name": "optional",
+              "required": false,
+              "description": "Highlights the dropdown is optional.",
               "value": {
                 "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
+                "type": "boolean"
+              }
             },
             {
-              "name": "disabled",
-              "description": "Disables any textbox functionality",
+              "name": "multiple",
+              "required": false,
+              "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "displayValue",
-              "description": "Selected option's label",
+              "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": "string"
-              },
-              "default": "null"
+                "type": "union"
+              }
             },
             {
-              "name": "dynamicFiltering",
-              "description": "Sets the possibility to type into the textbox.",
+              "name": "componentLoading",
+              "required": false,
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "isInvalid",
-              "description": "Marks the textbox as invalid, rendering an error state",
+              "name": "loading",
+              "required": false,
+              "description": "Indicates if new options are lazy loading.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "multiple",
+              "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": "open",
-              "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
+              "name": "isOptionDisabled",
+              "required": false,
+              "description": "Function that dertermines which options are disabled from interaction.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "BentoListboxIsOptionDisabled"
+              }
             },
             {
-              "name": "readonly",
-              "description": "Sets the dropdown to readonly state",
+              "name": "hasMoreItems",
+              "required": false,
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "value",
-              "description": "The input value",
+              "name": "description",
+              "required": false,
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "''"
+              }
             },
             {
-              "name": "selectedValueItem",
-              "description": "The selected value's list box item.",
+              "name": "errorMessage",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state with an error message.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxOptionItem | BentoListboxOptionItem[]"
-              },
-              "default": "undefined"
+                "type": "string"
+              }
             },
             {
-              "name": "showSlotContentInMultiple",
-              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
+              "name": "error",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "size",
-              "description": "Dropdown size",
+              "name": "dynamicFiltering",
+              "required": false,
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownSize | `${BentoDropdownSize}`"
-              },
-              "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
+                "type": "boolean"
+              }
             },
             {
-              "name": "icon"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-click-outside-stub",
-          "description": "",
-          "attributes": [
+              "name": "disabled",
+              "required": false,
+              "description": "Disables dropdown functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
             {
-              "name": "items",
+              "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": "BentoDropdown.props.items"
+                "type": "BentoDropdownEmptyStateProps"
               }
             },
             {
-              "name": "multiple",
+              "name": "condensed",
+              "required": false,
+              "description": "Renders the dropdown with a condensed style.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdown.props.multiple"
+                "type": "boolean"
               }
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/__tests__/dropdown-click-outside-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-country",
-          "description": "",
-          "attributes": [
+            },
             {
-              "name": "items",
-              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCountryListboxOptions }\n * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n * @property {BentoCountryCode | string} value.value - Country code of the option",
+              "name": "ariaLabel",
+              "required": false,
               "value": {
                 "kind": "expression",
-                "type": "BentoCountryListboxOptions"
-              },
-              "default": "() => []"
+                "type": "string"
+              }
             },
             {
-              "name": "variant",
-              "description": "Which label variant to display.",
+              "name": "items",
+              "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": "BentoCountryVariant | `${BentoCountryVariant}`"
+                "type": "BentoPaymentMethodListboxOptions"
               },
-              "default": "BentoCountryVariant.CUSTOM"
+              "default": "() => []"
             }
           ],
           "events": [
@@ -6349,37 +7626,50 @@
             }
           ],
           "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue",
+            "module": "./src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "dropdown-currency",
+          "name": "dropdown-scoped-slots-stub",
           "description": "",
           "attributes": [
+            {
+              "name": "dynamicFiltering",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.dynamicFiltering"
+              }
+            },
             {
               "name": "items",
-              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCurrencyListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option",
               "value": {
                 "kind": "expression",
-                "type": "BentoCurrencyListboxOptions"
-              },
-              "default": "() => []"
-            }
-          ],
-          "events": [
+                "type": "BentoDropdown.props.items"
+              }
+            },
             {
-              "name": "input",
-              "description": "Emitted when an item is selected"
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.multiple"
+              }
+            },
+            {
+              "name": "placeholder",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.placeholder"
+              }
             }
           ],
           "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue",
+            "module": "./src/components/dropdown/__tests__/dropdown-scoped-slots-stub.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "dropdown-default-textbox",
+          "name": "dropdown-small-textbox",
           "description": "",
           "attributes": [
             {
@@ -6425,16 +7715,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "null"
-            },
-            {
-              "name": "condensed",
-              "description": "Renders the dropdown with a condensed style.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+              "default": "null"
             },
             {
               "name": "debounceTime",
@@ -6499,24 +7780,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "selectedValueItem",
-              "description": "The selected value's list box item.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxOptionItem | BentoListboxOptionItem[]"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "showSlotContentInMultiple",
-              "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": "value",
               "description": "The input value",
@@ -6525,14 +7788,6 @@
                 "type": "string"
               },
               "default": "''"
-            },
-            {
-              "name": "multiple",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
             }
           ],
           "events": [
@@ -6557,467 +7812,260 @@
               "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
             }
           ],
-          "slots": [
-            {
-              "name": "innerSlot"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-lazy-load-stub",
-          "description": "",
           "source": {
-            "module": "./src/components/dropdown/__tests__/dropdown-lazy-load-stub.vue",
+            "module": "./src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "dropdown-options-container",
+          "name": "dropdown-tag",
           "description": "",
           "attributes": [
             {
-              "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",
+              "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"
-              },
-              "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",
+              "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": "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",
+              "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": "BentoDropdownOptionsContainer.props.componentLoading"
+                "type": "BentoListboxSelectedValue"
               }
             },
             {
-              "name": "selectedValue",
+              "name": "tooltipText",
+              "required": false,
+              "description": "Adds a info icon next to the label to display the passed tooltip message.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.selectedValue"
+                "type": "string"
               }
             },
             {
-              "name": "items",
+              "name": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.items"
+                "type": "boolean"
               }
             },
             {
-              "name": "multiple",
+              "name": "size",
+              "required": false,
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownOptionsContainer.props.multiple"
+                "type": "union"
               }
             },
             {
-              "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": "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}",
+              "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": "BentoPaymentMethodListboxOptions"
-              },
-              "default": "() => []"
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
-              "description": "Emitted when an item is selected"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-scoped-slots-stub",
-          "description": "",
-          "attributes": [
+                "type": "boolean"
+              }
+            },
             {
-              "name": "dynamicFiltering",
+              "name": "search",
+              "required": false,
+              "description": "Dropdown search options and events.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdown.props.dynamicFiltering"
+                "type": "BentoDropdownSearchOptions"
               }
             },
             {
-              "name": "items",
+              "name": "required",
+              "required": false,
+              "description": "Highlights the dropdown is required.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdown.props.items"
+                "type": "boolean"
               }
             },
             {
-              "name": "multiple",
+              "name": "readonly",
+              "required": false,
+              "description": "Sets the dropdown to readonly state",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdown.props.multiple"
+                "type": "boolean"
               }
             },
             {
               "name": "placeholder",
+              "required": false,
+              "description": "Text that appears in the form control when it has no value set",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdown.props.placeholder"
+                "type": "string"
               }
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/__tests__/dropdown-scoped-slots-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-small-textbox",
-          "description": "",
-          "attributes": [
+            },
             {
-              "name": "additionalItemsSelected",
-              "description": "The number of additional items that have been selected in the dropdown.",
+              "name": "optional",
+              "required": false,
+              "description": "Highlights the dropdown is optional.",
               "value": {
                 "kind": "expression",
-                "type": "number | string"
-              },
-              "default": "0"
+                "type": "boolean"
+              }
             },
             {
-              "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": "multiple",
+              "required": false,
+              "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               }
             },
             {
-              "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": "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": "Booleanish"
+                "type": "union"
               }
             },
             {
-              "name": "ariaLabel",
-              "description": "If no label element is used then the aria-label is be set should be set.",
+              "name": "componentLoading",
+              "required": false,
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
+                "type": "boolean"
+              }
             },
             {
-              "name": "ariaLabelledby",
-              "description": "Corresponds to the label's id that labels the textbox element.",
+              "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"
-              },
-              "default": "null"
+              }
             },
             {
-              "name": "debounceTime",
-              "description": "Custom debounce time. Default: 300",
+              "name": "isOptionDisabled",
+              "required": false,
+              "description": "Function that dertermines which options are disabled from interaction.",
               "value": {
                 "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
+                "type": "BentoListboxIsOptionDisabled"
+              }
             },
             {
-              "name": "disabled",
-              "description": "Disables any textbox functionality",
+              "name": "hasMoreItems",
+              "required": false,
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "displayValue",
-              "description": "Selected option's label",
+              "name": "description",
+              "required": false,
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "null"
+              }
             },
             {
-              "name": "dynamicFiltering",
-              "description": "Sets the possibility to type into the textbox",
+              "name": "errorMessage",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state with an error message.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
-              "name": "isInvalid",
-              "description": "Marks the textbox as invalid, rendering an error state",
+              "name": "error",
+              "required": false,
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "open",
-              "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
+              "name": "dynamicFiltering",
+              "required": false,
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "readonly",
-              "description": "Sets the dropdown to readonly state",
+              "name": "disabled",
+              "required": false,
+              "description": "Disables dropdown functionality.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "value",
-              "description": "The input value",
+              "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": "string"
-              },
-              "default": "''"
-            }
-          ],
-          "events": [
-            {
-              "name": "clear",
-              "description": "Emitted on clearing the input."
-            },
-            {
-              "name": "close",
-              "description": "Emitted on click, space and enter user events. It will open the dropdown."
+                "type": "BentoDropdownEmptyStateProps"
+              }
             },
             {
-              "name": "input",
-              "description": "Emitted on input event."
+              "name": "condensed",
+              "required": false,
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
             },
             {
-              "name": "keydown",
-              "description": "Emitted on keydown event."
+              "name": "ariaLabel",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
             },
-            {
-              "name": "open",
-              "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-tag",
-          "description": "",
-          "attributes": [
             {
               "name": "items",
-              "description": "The option elements to populate the tag dropdown with.\nIt must be an array of {@see BentoTagListboxOptions }\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.variant - The BentTag variant shown for the option.",
+              "required": false,
+              "description": "The option elements to populate the tag dropdown with.\nIt must be an array of {@see BentoTagListboxOptions }",
               "value": {
                 "kind": "expression",
                 "type": "BentoTagListboxOptions"
@@ -8209,7 +9257,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 +9277,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 +9481,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 +9499,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 +10349,7 @@
                 "kind": "expression",
                 "type": "Array"
               },
-              "default": "() => getSupportedCountries()"
+              "default": "() => BentoInputFieldPhoneNumberCountries"
             },
             {
               "name": "dropdown",
@@ -9359,6 +10407,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 +11215,7 @@
                 "kind": "expression",
                 "type": "union"
               },
-              "default": "BentoPopoverPositions.BOTTOM_START"
+              "default": "'bottom-start'"
             },
             {
               "name": "menuFixedPositioning",
@@ -12241,6 +13297,9 @@
           "slots": [
             {
               "name": "content"
+            },
+            {
+              "name": "description"
             }
           ],
           "source": {
@@ -12248,6 +13307,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "radio-group-slots-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/radio-group/__tests__/radio-group-slots-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "radio-input",
           "description": "",
@@ -12621,6 +13688,16 @@
               },
               "default": "300"
             },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the text input.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "hint",
               "required": false,
@@ -15050,6 +16127,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "timeline-dynamic-add-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/timeline/__tests__/timeline-dynamic-add-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "timeline-stub",
           "description": "",