@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -12,40 +12,13 @@
           "description": "",
           "attributes": [
             {
-              "name": "simultaneouslyExpandAllTabs",
-              "description": "Indicates if all accordion items can be expanded simultaneously.\nIf this option is toggled in Storybook a refresh is required.\n - true: all accordion items can be expanded at a time\n - false: only one accordion item can be expanded at a time",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "grouped",
-              "description": "Grouped represents if the accordion is grouped inside a container or not\n- true: grouped inside a container\n- false: independent accordion item",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "caretRight",
-              "description": "Indicates the position of caret in the accordion. The default is right.\n- true:  caret is on right\n- false: caret is on left",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "variant",
-              "description": "Variant represents accordion variant",
+              "name": "titleSize",
+              "description": "Controls accordion title size.",
               "value": {
                 "kind": "expression",
-                "type": "AdlAccordionVariant"
+                "type": "BentoAccordionTitleSize"
               },
-              "default": "AdlAccordionVariant.PRIMARY"
+              "default": "'default'"
             }
           ],
           "slots": [
@@ -59,42 +32,37 @@
           }
         },
         {
-          "name": "accordion.test",
-          "description": "",
-          "source": {
-            "module": "./src/components/accordion/accordion.test.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "adl-accordion-item",
+          "name": "accordion-item",
           "description": "",
           "attributes": [
             {
-              "name": "accordion",
-              "description": "Injected tabs prop that contains all the required tab query methods.\nNOTE: This Prop defintion can be removed when the following issue is resolved:\nhttps://github.com/vuejs/vue/issues/8969",
+              "name": "title",
+              "required": true,
+              "description": "Sets the title of the accordion item.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "isExpanded",
+              "description": "Controls if the content is visible or hidden.",
               "value": {
                 "kind": "expression",
-                "type": "AdlAccordion"
+                "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:is-expanded",
+              "description": "Emits update event when content is toggled"
             }
           ],
           "slots": [
             {
               "name": "default"
-            },
-            {
-              "name": "picture"
-            },
-            {
-              "name": "title"
-            },
-            {
-              "name": "subtitle"
-            },
-            {
-              "name": "content"
             }
           ],
           "source": {
@@ -463,7 +431,7 @@
             },
             {
               "name": "size",
-              "description": "Dropdown input size",
+              "description": "Dropdown input size\n* @see BentoDropdownSize",
               "value": {
                 "kind": "expression",
                 "type": "BentoDropdownSize | `${BentoDropdownSize}`"
@@ -510,7 +478,7 @@
           "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} value.value - Country code of the option",
+              "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"
@@ -681,6 +649,15 @@
           "name": "base-modal",
           "description": "",
           "attributes": [
+            {
+              "name": "actions",
+              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\nBut you may change the color of 1-st action to red with 'critial' key\nNot more than 3 action buttons can be provided\nOr 2 action buttons and 1 Label for them\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',2\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
             {
               "name": "columnsSize",
               "description": "If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.",
@@ -758,7 +735,7 @@
               "description": "Sets the width of the modal",
               "value": {
                 "kind": "expression",
-                "type": "BentoModalSize"
+                "type": "BentoModalSize | `${BentoModalSize}`"
               },
               "default": "BentoModalSize.SMALL"
             },
@@ -1242,7 +1219,7 @@
             {
               "name": "actions",
               "required": true,
-              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n`disabled` (optional): Disables the action.\n\n`variant` (optional): Sets button's variant background color.\n\n`critical` (optional): Sets button red border adn color.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n  disabled: true,\n  variant: BentoButtonVariant.PRIMARY,\n  critical: true\n}]\n```",
+              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.",
               "value": {
                 "kind": "expression",
                 "type": "BentoButtonActionsList"
@@ -1340,6 +1317,9 @@
             }
           ],
           "slots": [
+            {
+              "name": "image"
+            },
             {
               "name": "default"
             },
@@ -1372,7 +1352,7 @@
               "default": "null"
             },
             {
-              "name": "modelValue",
+              "name": "v-model",
               "description": "When handling a single checkbox with a singular state, use a boolean.\n\nWhen handling multiple checkboxes, use an array of keys.\nThese keys exist as a set \"value\" prop for each checkbox.",
               "value": {
                 "kind": "expression",
@@ -1525,7 +1505,7 @@
               }
             },
             {
-              "name": "modelValue",
+              "name": "v-model",
               "description": "Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\nDefaults to no value selected.",
               "value": {
                 "kind": "expression",
@@ -1642,6 +1622,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "expandable",
+              "description": "Displays a button that can expand the codeblock into a modal to easily\nview large blocks of code.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "actionableText",
               "description": "Displays a button that when clicked will emit a run event\nLeaves to the parent component the logic of what to do with it",
@@ -1650,6 +1639,15 @@
                 "type": "string"
               },
               "default": "'run'"
+            },
+            {
+              "name": "loading",
+              "description": "Toggles the loading indicator within the action bar",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "slots": [
@@ -1793,6 +1791,15 @@
                 "type": "BentoDatagridData"
               }
             },
+            {
+              "name": "emptyState",
+              "description": "Empty state props that will be passed down to inner empty-state component",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridEmptyStateProps"
+              },
+              "default": "undefined"
+            },
             {
               "name": "filters",
               "description": "filter-bar value (i.e. filters) that will be passed down to inner filter-bar component",
@@ -1918,6 +1925,15 @@
                 "type": "BentoDatagridSortByColumn[]"
               },
               "default": "() => []"
+            },
+            {
+              "name": "tabTitle",
+              "description": "Title of the data grid to be rendered as tab title when a data grid is passed in a tab layout.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
             }
           ],
           "events": [
@@ -2612,7 +2628,7 @@
           "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 {BentoTagVariant} value.variant - The BentTag variant shown for the option.",
+              "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.",
               "value": {
                 "kind": "expression",
                 "type": "BentoTagListboxOptions"
@@ -2746,6 +2762,52 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-image",
+          "description": "",
+          "attributes": [
+            {
+              "name": "src",
+              "required": true,
+              "description": "Url to image, same as src attribute of `<img>` tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "alt",
+              "required": true,
+              "description": "Accessible text describing the image, same as alt attribute of `<img>` tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "aspectRatio",
+              "description": "Aspect ratio of the image, maps to css aspect-ratio",
+              "value": {
+                "kind": "expression",
+                "type": "BentoImageAspectRatio | `${BentoImageAspectRatio}`"
+              },
+              "default": "null"
+            },
+            {
+              "name": "objectFit",
+              "description": "Object fitting strategy, maps to css object-fit",
+              "value": {
+                "kind": "expression",
+                "type": "BentoImageObjectFit | `${BentoImageObjectFit}`"
+              },
+              "default": "null"
+            }
+          ],
+          "source": {
+            "module": "./src/components/image/image.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-info-icon",
           "description": "",
@@ -2775,66 +2837,67 @@
           }
         },
         {
-          "name": "bento-input-field",
+          "name": "bento-input-filter",
           "description": "",
           "attributes": [
             {
-              "name": "ariaHidden",
-              "description": "Indicates whether the element is exposed to an accessibility API.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "ariaLabel",
-              "description": "Text that labels an the input element",
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
-              "name": "disabled",
-              "description": "Disables the possibility of changing value in the input-field",
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
-              "name": "dropdown",
-              "description": "Dropdown props for the small selectable dropdown menu.",
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputDropdownProps"
-              },
-              "default": "undefined"
+                "type": "string"
+              }
             },
             {
-              "name": "dropdownPosition",
-              "description": "Position of the dropdown before or after input value",
+              "name": "value",
+              "description": "Current value of the filter",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`"
+                "type": "string"
               },
-              "default": "BentoInputFieldElementPosition.START"
+              "default": "null"
             },
             {
-              "name": "error",
-              "description": "Adds error validation class for outlining input-field.",
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/input-filter/input-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-listbox",
+          "description": "Listbox container.\nIt lists all the available options.",
+          "attributes": [
             {
-              "name": "errorMessage",
-              "description": "Renders input-field with an error state and the error message beneath the input box",
+              "name": "ariaLabel",
+              "description": "Defines a string value that labels an interactive element.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2842,8 +2905,8 @@
               "default": "null"
             },
             {
-              "name": "optional",
-              "description": "Highlights the dropdown is optional.",
+              "name": "hasMoreItems",
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2851,238 +2914,58 @@
               "default": "false"
             },
             {
-              "name": "placeholder",
-              "description": "Text displayed as the placeholder of the input-field",
+              "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"
-              },
-              "default": "''"
+              }
             },
             {
-              "name": "required",
-              "description": "Highlights the dropdown is required.",
+              "name": "isOptionDisabled",
+              "description": "Function that allows the options to be disabled",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoListboxIsOptionDisabled"
               },
-              "default": "false"
+              "default": "() => undefined"
             },
             {
-              "name": "readonly",
-              "description": "Setting this property to true will set the input field to read only state.",
+              "name": "items",
+              "required": true,
+              "description": "The option elements to populate the listbox with.\nIt must be an array of {@see BentoListboxOptionItem }\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": "boolean"
-              },
-              "default": "false"
+                "type": "BentoListboxOptions"
+              }
             },
             {
-              "name": "staticValue",
-              "description": "Static text that displayed before or after input value\nApplicable to the Static Value variant",
+              "name": "loading",
+              "description": "Indicates if new options are loading.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "''"
+              "default": "false"
             },
             {
-              "name": "staticValuePosition",
-              "description": "Position of Static Value before or after input value",
+              "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": "BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`"
+                "type": "BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`"
               },
-              "default": "BentoInputFieldElementPosition.START"
+              "default": "BentoListboxLazyLoadType.NONE"
             },
             {
-              "name": "type",
-              "description": "A string specifying the type of control to render.",
+              "name": "multiple",
+              "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldType | `${BentoInputFieldType}`"
+                "type": "boolean"
               },
-              "default": "BentoInputFieldType.TEXT"
-            },
-            {
-              "name": "value",
-              "description": "Text displayed as the value of the input-field",
-              "value": {
-                "kind": "expression",
-                "type": "BentoInputFieldValue"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "variant",
-              "description": "Describes the different variants for the input element",
-              "value": {
-                "kind": "expression",
-                "type": "BentoInputFieldVariant | `${BentoInputFieldVariant}`"
-              },
-              "default": "BentoInputFieldVariant.DEFAULT"
-            }
-          ],
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "defaultIconBefore"
-            },
-            {
-              "name": "paymentMethod"
-            },
-            {
-              "name": "staticValue"
-            },
-            {
-              "name": "iconAfter"
-            },
-            {
-              "name": "description"
-            }
-          ],
-          "source": {
-            "module": "./src/components/input-field/input-field.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-input-filter",
-          "description": "",
-          "attributes": [
-            {
-              "name": "defaultValue",
-              "description": "Default value of the filter to reset to.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "field",
-              "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": true,
-              "description": "Label text to be displayed",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Current value of the filter",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/input-filter/input-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-listbox",
-          "description": "Listbox container.\nIt lists all the available options.",
-          "attributes": [
-            {
-              "name": "ariaLabel",
-              "description": "Defines a string value that labels an interactive element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "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": "BentoListboxIsOptionDisabled"
-              },
-              "default": "() => undefined"
-            },
-            {
-              "name": "items",
-              "required": true,
-              "description": "The option elements to populate the listbox with.\nIt must be an array of {@see BentoListboxOptionItem }\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": "loading",
-              "description": "Indicates if new options are loading.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "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": "BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`"
-              },
-              "default": "BentoListboxLazyLoadType.NONE"
-            },
-            {
-              "name": "multiple",
-              "description": "If enabled, the user will be able to select multiple items.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+              "default": "false"
             },
             {
               "name": "noResultsMessage",
@@ -3466,7 +3349,7 @@
                 "kind": "expression",
                 "type": "BentoMenuButtonProps"
               },
-              "default": "() => ({\n    variant: BentoButtonVariant.SECONDARY,\n})"
+              "default": "() =>\n    ({\n        variant: 'secondary',\n    } as BentoMenuButtonProps)"
             }
           ],
           "slots": [
@@ -3688,7 +3571,7 @@
               "description": "Sets the width of the modal",
               "value": {
                 "kind": "expression",
-                "type": "BentoModalSize"
+                "type": "BentoModalSize | `${BentoModalSize}`"
               }
             },
             {
@@ -3814,7 +3697,7 @@
               "description": "Sets different action buttons styling and appearance",
               "value": {
                 "kind": "expression",
-                "type": "BentoModalDialogType"
+                "type": "BentoModalDialogType | `${BentoModalDialogType}`"
               }
             },
             {
@@ -4259,7 +4142,7 @@
         },
         {
           "name": "bento-radio-group",
-          "description": "A radio group component should be used whenever it is necessary to use a set of radio buttons\nThis component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n\nimport { BentoRadioGroup, BentoRadioGroupVariant } from '@adyen/bento-vue2/';\n\nexport default {\n    components: { BentoRadioGroup },\n    template: `\n            <bento-radio-group\n               label=\"Your group label\"\n               :items=\"[\n                   { value: 1, label: 'Your label' },\n                   { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n                ]\"\n                :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n             />\n    `\n};",
+          "description": "A radio group component should be used whenever it is necessary to use a set of radio buttons\nThis component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n\nimport { BentoRadioGroup } from '@adyen/bento-vue2/';\n\nexport default {\n    components: { BentoRadioGroup },\n    template: `\n            <bento-radio-group\n               label=\"Your group label\"\n               :items=\"[\n                   { value: 1, label: 'Your label' },\n                   { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n                ]\"\n                variant=\"horizontal\"\n             />\n    `\n};",
           "attributes": [
             {
               "name": "description",
@@ -4334,7 +4217,7 @@
               }
             },
             {
-              "name": "modelValue",
+              "name": "v-model",
               "description": "Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\nDefaults to no value selected.",
               "value": {
                 "kind": "expression",
@@ -4448,57 +4331,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-search-bar",
-          "description": "Search functionality to help users find the desired data quicker.\nWhen a user starts typing, the data is dynamically filtered to\nonly show the relevant results.\n\nClearing the search field displays the entire list again.",
-          "attributes": [
-            {
-              "name": "inputFieldAriaLabel",
-              "required": true,
-              "description": "Text that labels an the search bar input element",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "debounceTime",
-              "description": "Custom debounce time. Default: 300",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
-            },
-            {
-              "name": "placeholder",
-              "description": "Text displayed as the placeholder of the input-field",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "''"
-            },
-            {
-              "name": "value",
-              "description": "Text displayed as the value being searched",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            }
-          ],
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "source": {
-            "module": "./src/components/search-bar/search-bar.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-segmented-control",
           "description": "",
@@ -4635,7 +4467,7 @@
           "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 BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item {@see BentoCountryVariant}.",
+              "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 BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
               "value": {
                 "kind": "expression",
                 "type": "BentoSelectCountryFilterOptions"
@@ -6907,40 +6739,103 @@
           }
         },
         {
-          "name": "error-message",
+          "name": "empty-state",
           "description": "",
           "attributes": [
             {
-              "name": "errorMessage",
+              "name": "action",
               "required": true,
-              "description": "The rendered error message",
+              "description": "Defines the button at the end of the component.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoButtonActionObject"
               }
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/error-message/error-message.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "filter-bar-filter-button",
-          "description": "",
-          "attributes": [
+            },
             {
-              "name": "label",
-              "required": true,
-              "description": "Button label to be displayed",
+              "name": "description",
+              "description": "The empty state description.\nGives additional details to the issue.\nThis can be used or the default slot",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "null"
             },
             {
-              "name": "appliedFiltersCount",
-              "description": "Total count of applied filters",
+              "name": "headingEl",
+              "description": "Sets the heading HTML DOM element.",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoTypographyElement}`"
+              },
+              "default": "null"
+            },
+            {
+              "name": "image",
+              "description": "Name of the illustration for the empty state.",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoEmptyStateImage}`"
+              },
+              "default": "null"
+            },
+            {
+              "name": "title",
+              "description": "The empty state heading.\nShould clearly explain the issue.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "variant",
+              "description": "Types of different empty states",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoEmptyStateVariant}`"
+              },
+              "default": "'basic'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "title"
+            },
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/empty-state/empty-state.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "error-message",
+          "description": "",
+          "attributes": [
+            {
+              "name": "errorMessage",
+              "required": true,
+              "description": "The rendered error message",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/error-message/error-message.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "appliedFiltersCount",
+              "description": "The number of applies values within the filter.\ne.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -6948,8 +6843,8 @@
               "default": "null"
             },
             {
-              "name": "hasChevron",
-              "description": "Indicates whether the button has a chevron",
+              "name": "disabled",
+              "description": "Disables button functionality.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6958,7 +6853,7 @@
             },
             {
               "name": "isFilterOpen",
-              "description": "Indicates whether the filter popover tied to this button is showing",
+              "description": "Signifies if the filter is open or closed.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6966,8 +6861,8 @@
               "default": "false"
             },
             {
-              "name": "disabled",
-              "description": "Disables button functionality.",
+              "name": "hasChevron",
+              "description": "Toggles if a chevron icon should be displayed in the button.\nThe chevron will change depending on the open state of the filter.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6977,11 +6872,38 @@
           ],
           "events": [
             {
-              "name": "click"
+              "name": "click",
+              "description": "Emitted when the button is clicked"
+            }
+          ],
+          "slots": [
+            {
+              "name": "iconLeft"
+            },
+            {
+              "name": "default"
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/base-filter/components/filter-bar-filter-button/filter-bar-filter-button.vue",
+            "module": "./src/components/filter-bar/components/filter-bar-button/filter-bar-button.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-toast-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "value",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarModel"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-toast-stub.vue",
             "symbol": "default"
           }
         },
@@ -7196,6 +7118,223 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "input-field",
+          "description": "",
+          "attributes": [
+            {
+              "name": "ariaHidden",
+              "description": "Indicates whether the element is exposed to an accessibility API.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "ariaLabel",
+              "description": "Text that labels an the input element",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "condensed",
+              "description": "Reduces height of the input",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the possibility of changing value in the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "dropdown",
+              "description": "Dropdown props for the small selectable dropdown menu.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputDropdownProps"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "dropdownPosition",
+              "description": "Position of the dropdown before or after input value",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`"
+              },
+              "default": "BentoInputFieldElementPosition.START"
+            },
+            {
+              "name": "error",
+              "description": "Adds error validation class for outlining input-field.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "errorMessage",
+              "description": "Renders input-field with an error state and the error message beneath the input box",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "optional",
+              "description": "Highlights the dropdown is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "required",
+              "description": "Highlights the dropdown is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "description": "Setting this property to true will set the input field to read only state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "staticValue",
+              "description": "Static text that displayed before or after input value\nApplicable to the Static Value variant",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "staticValuePosition",
+              "description": "Position of Static Value before or after input value",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`"
+              },
+              "default": "BentoInputFieldElementPosition.START"
+            },
+            {
+              "name": "type",
+              "description": "A string specifying the type of control to render.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldType | `${BentoInputFieldType}`"
+              },
+              "default": "BentoInputFieldType.TEXT"
+            },
+            {
+              "name": "value",
+              "description": "Text displayed as the value of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldValue"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "variant",
+              "description": "Describes the different variants for the input element",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldVariant | `${BentoInputFieldVariant}`"
+              },
+              "default": "BentoInputFieldVariant.DEFAULT"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:dropdown",
+              "description": "Emitted when the Input Field's internal dropdown changes it's value. Contains every dropdown prop passed with the updated selected value as 'value'"
+            },
+            {
+              "name": "blur",
+              "description": "Emitted when the element has lost focus"
+            },
+            {
+              "name": "change",
+              "description": "Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value"
+            },
+            {
+              "name": "dropdown-input",
+              "description": "Emitted when the Input Field's internal dropdown changes it's value"
+            },
+            {
+              "name": "escape-pressed",
+              "description": "Emitted when the \"ESC\" key is pressed"
+            },
+            {
+              "name": "focus",
+              "description": "Emitted when the element has received focus"
+            },
+            {
+              "name": "keydown",
+              "description": "Emitted when a key is pressed"
+            },
+            {
+              "name": "input",
+              "description": "Emitted when the component's model changes"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "defaultIconBefore"
+            },
+            {
+              "name": "paymentMethod"
+            },
+            {
+              "name": "staticValue"
+            },
+            {
+              "name": "iconAfter"
+            },
+            {
+              "name": "description"
+            }
+          ],
+          "source": {
+            "module": "./src/components/input-field/input-field.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "link",
           "description": "",
@@ -7235,6 +7374,16 @@
                 "kind": "expression",
                 "type": "boolean"
               }
+            },
+            {
+              "name": "target",
+              "required": false,
+              "description": "Sets the target of the rendered link.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
             }
           ],
           "events": [
@@ -7646,15 +7795,6 @@
               },
               "default": "null"
             },
-            {
-              "name": "ariaLabel",
-              "description": "Defines a string value that provides an accessible name for the popper-container.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
             {
               "name": "targetElement",
               "required": true,
@@ -7861,6 +8001,75 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "search-bar",
+          "description": "",
+          "attributes": [
+            {
+              "name": "inputFieldAriaLabel",
+              "required": true,
+              "description": "Text that labels an the search bar input element",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "condensed",
+              "description": "Reduces height of the search bar",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "debounceTime",
+              "description": "Custom debounce time. Default: 300",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "300"
+            },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "value",
+              "description": "Text displayed as the value being searched",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property"
+            },
+            {
+              "name": "clear",
+              "description": "Emitted when the \"clear search\" button is clicked"
+            },
+            {
+              "name": "escape-pressed",
+              "description": "Emitted when the \"ESC\" key is pressed inside the Search Bar input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/search-bar/search-bar.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "sidepanel",
           "description": "",
@@ -8170,6 +8379,24 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "tab-content-provided-title-mock",
+          "description": "",
+          "attributes": [
+            {
+              "name": "title",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/tabs/__tests__/tab-content-provided-title-mock.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tabs",
           "description": "Tabs are used to navigate between different, but related content views within a page.\nThis component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/",
@@ -8194,6 +8421,33 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "tabs-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "activeTabIndex",
+              "description": "Sets the active tab by its index (0 being the first tab item).",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            }
+          ],
+          "source": {
+            "module": "./src/components/tabs/__tests__/tabs-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "timeline-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/timeline/__tests__/timeline-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "toast-item",
           "description": "",