@adyen/bento-vue2 0.0.1

package/dist/web-types.json

@@ -0,0 +1,2703 @@
+{
+  "framework": "vue",
+  "name": "@adyen/bento-vue2",
+  "version": "0.0.1",
+  "contributions": {
+    "html": {
+      "description-markup": "markdown",
+      "types-syntax": "typescript",
+      "tags": [
+        {
+          "name": "accordion",
+          "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",
+              "value": {
+                "kind": "expression",
+                "type": "AdlAccordionVariant"
+              },
+              "default": "AdlAccordionVariant.PRIMARY"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/accordion/accordion.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "accordion.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/accordion/accordion.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-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",
+              "value": {
+                "kind": "expression",
+                "type": "AdlAccordion"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "picture"
+            },
+            {
+              "name": "title"
+            },
+            {
+              "name": "subtitle"
+            },
+            {
+              "name": "content"
+            }
+          ],
+          "source": {
+            "module": "./src/components/accordion/components/accordion-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-badge",
+          "description": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Types of flavour of Badge",
+              "value": {
+                "kind": "expression",
+                "type": "AdlBadgeVariant"
+              },
+              "default": "AdlBadgeVariant.DEFAULT"
+            },
+            {
+              "name": "testId",
+              "description": "For testing purposes you can decide which testId your adl-badge instance will have",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'adl-badge'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon"
+            },
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/badge/badge.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-card",
+          "description": "A card is a flexible and composable container.\nUse cards to represent a single object or to visually group certain content, like legal information within company settings.",
+          "attributes": [
+            {
+              "name": "title",
+              "required": true,
+              "description": "Indicates the title you want to use for the card",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "subTitle",
+              "description": "Indicates the sub-title you want to use for the card.\nDisplayed underneath the title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "imagePosition",
+              "description": "Displays the image at either at the top (default) or to the left of the card.",
+              "value": {
+                "kind": "expression",
+                "type": "AdlCardImagePosition"
+              },
+              "default": "AdlCardImagePosition.TOP"
+            }
+          ],
+          "events": [
+            {
+              "name": "click"
+            }
+          ],
+          "slots": [
+            {
+              "name": "image"
+            },
+            {
+              "name": "headerActions"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "footer"
+            }
+          ],
+          "source": {
+            "module": "./src/components/card/card.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-card-image",
+          "description": "",
+          "attributes": [
+            {
+              "name": "src",
+              "required": true,
+              "description": "URL to image.\nFor more details, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "alt",
+              "required": true,
+              "description": "Explanatory text for the image",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/card/components/card-image/card-image.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-dropdown",
+          "description": "A Dropdown shows a selected option's.\nUse a dropdown when you want users to select options\nfrom a list of pre-defined options.",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "description": "Defines a string value that labels an interactive element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "placeholder",
+              "description": "Specifies a short hint that describes the expected value of the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "value",
+              "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": "AdlDropdownSelectedValue"
+              },
+              "default": "null"
+            },
+            {
+              "name": "items",
+              "description": "The option elements to populate the dropdown with.\nIt must be an array of {@see AdlDropdownOptionItem }\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": "AdlDropdownOptions"
+              },
+              "default": "() => []"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/dropdown.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-page-header",
+          "description": "",
+          "attributes": [
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used in as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon"
+            },
+            {
+              "name": "actions"
+            }
+          ],
+          "source": {
+            "module": "./src/components/page-header/page-header.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-pagination-controls",
+          "description": "",
+          "attributes": [
+            {
+              "name": "hasNext",
+              "description": "Use to determine if the pager has a \"next page\".",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "page",
+              "required": true,
+              "description": "The current page number of the pager.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "totalPages",
+              "description": "The current page number of the pager.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "navigate"
+            }
+          ],
+          "source": {
+            "module": "./src/components/pagination/components/pagination-controls/pagination-controls.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-profile-picture",
+          "description": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "Image src to load the profile picture.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "username",
+              "description": "Name of the user that will be used to extract initials to display default value.\nJohn => J\nJohn Smith => JS\nJohn Smith Doe => JD\nJohn Smith Doe Holly => JH",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "variant",
+              "description": "Variants supported for round and square.\nDefault - round",
+              "value": {
+                "kind": "expression",
+                "type": "AdlProfilePictureVariant"
+              },
+              "default": "AdlProfilePictureVariant.ROUND"
+            }
+          ],
+          "source": {
+            "module": "./src/components/profile-picture/profile-picture.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-segmented-control",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Determines whether the entire control is disabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "description": "The currently selected value.",
+              "value": {
+                "kind": "expression",
+                "type": "null"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "name",
+              "required": true,
+              "description": "The name to be used on the radio button input elements internally.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/segmented-control/segmented-control.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-segmented-option",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Determines whether this option is disabled or not.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "The value for this option. This will determine whether this option is currently selected\nbased on if it matches with `value` of SegmentedControl (injected here as `adlSegmentedControlApi.state.selectedValue`).",
+              "value": {
+                "kind": "expression",
+                "type": "null"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The label text. Note if this is provided, the icon shall not be rendered.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "segmentedControl",
+              "description": "Injected prop that contains the required segmentedControl interface.\nNOTE: This Prop definition can be removed when the following issue is resolved:\nhttps://github.com/vuejs/vue/issues/8969",
+              "value": {
+                "kind": "expression",
+                "type": "AdlSegmentedControlApi"
+              },
+              "default": "null"
+            },
+            {
+              "name": "testId",
+              "description": "For testing purposes you can decide which testId your adl-segmented-option instance will have",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'adl-segmented-option'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon"
+            }
+          ],
+          "source": {
+            "module": "./src/components/segmented-control/components/segmented-option.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-textarea",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Text displayed as the label of the textarea",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "description",
+              "description": "Text displayed as the help text of the textarea",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the textarea",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "value",
+              "description": "Text displayed as the value of the textarea",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/textarea/textarea.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl-title-item",
+          "description": "",
+          "attributes": [
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon"
+            }
+          ],
+          "source": {
+            "module": "./src/components/page-header/components/title-item/title-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "adl2-alert",
+          "description": "",
+          "attributes": [
+            {
+              "name": "severity",
+              "description": "severity levels set a distinctive icon and color",
+              "value": {
+                "kind": "expression",
+                "type": "AdlAlertSeverityOption"
+              },
+              "default": "AdlAlertSeverityOption.INFO"
+            },
+            {
+              "name": "closeButton",
+              "description": "adds a cross icon on the right side of the alert",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "close-alert"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "description"
+            },
+            {
+              "name": "actions"
+            },
+            {
+              "name": "rightLink"
+            }
+          ],
+          "source": {
+            "module": "./src/components/alert/alert.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "alert.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/alert/alert.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "badge.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/badge/badge.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-base-filter",
+          "description": "",
+          "attributes": [
+            {
+              "name": "alwaysShowNameInLabel",
+              "description": "Display the \"label\" prop alongside value when the filter is active\n\nE.g.\nlabel: \"Company\"\nvalue: \"Adyen\"\n\n\"Company: Adyen\"",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disableApplyButton",
+              "description": "Disable the apply button",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "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": "isOpen",
+              "required": true,
+              "description": "Shows/hides the filter's popover content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "apply"
+            },
+            {
+              "name": "clear"
+            },
+            {
+              "name": "open"
+            },
+            {
+              "name": "close"
+            },
+            {
+              "name": "dismiss"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/base-filter/base-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-button",
+          "description": "Button component for all the various types of bento buttons.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables button functonality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "critical",
+              "description": "Displays button as critical",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "type",
+              "description": "The default behavior of the button.\nPossible values are: 'button', 'reset', 'submit'",
+              "value": {
+                "kind": "expression",
+                "type": "ButtonHTMLAttributes['type']"
+              },
+              "default": "'type'"
+            },
+            {
+              "name": "condensed",
+              "description": "Reduces sizing of button",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "description": "Types of flavour of Button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonVariant"
+              },
+              "default": "BentoButtonVariant.PRIMARY"
+            }
+          ],
+          "events": [
+            {
+              "name": "click"
+            }
+          ],
+          "slots": [
+            {
+              "name": "iconLeft"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "iconRight"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/button.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-button-actions",
+          "description": "",
+          "attributes": [
+            {
+              "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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              }
+            },
+            {
+              "name": "layout",
+              "description": "Defines the layout in which the button actions is presented.\nIt can be one of:",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsLayout"
+              },
+              "default": "BentoButtonActionsLayout.BUTTONS_END"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/components/button-actions/button-actions.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-checkbox",
+          "description": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The value of the component. The DOM API casts this to a string.\nThe browser uses \"on\" as the default value.\n\nIn the case of multiple checkboxes this value is used as a unique key.",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "default": "null"
+            },
+            {
+              "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",
+                "type": "BentoCheckboxType"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Setting this property to true will disable the checkbox in your form.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "indeterminate",
+              "description": "The :indeterminate CSS pseudo-class represents any form element\nwhose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\nset to true, radio buttons which are members of a group in which all radio buttons are unchecked,\nand indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\nThis property lets you control the input.indeterminate native property.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "description"
+            }
+          ],
+          "source": {
+            "module": "./src/components/checkbox/checkbox.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-data-grid",
+          "description": "",
+          "attributes": [
+            {
+              "name": "condensed",
+              "description": "Sets the row cells to the condensed padding state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "columns",
+              "required": true,
+              "description": "Column definitions using 'key' to relate to data object.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoColumn[]"
+              }
+            },
+            {
+              "name": "data",
+              "required": true,
+              "description": "An array of data objects to display.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridData"
+              }
+            },
+            {
+              "name": "filters",
+              "description": "filter-bar value (i.e. filters) that will be passed down to inner filter-bar component",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBar.props.value.type"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "getDataItemId",
+              "description": "A customisable method to retrieve a unique identifier for a data item in the array of data supplied.\nThis is used selecting and performance reasons and must exist in each data item.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridGetDataItemIdFn"
+              },
+              "default": "(item: BentoDatagridDataItem) => item.id"
+            },
+            {
+              "name": "hasResizableColumns",
+              "description": "If resize is enabled",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "isDataItemDisabled",
+              "description": "A customisable method to determine if a row is not selectable.\nThe default is that every row is selectable.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridIsDataItemDisabledFn"
+              },
+              "default": "() => false"
+            },
+            {
+              "name": "outline",
+              "description": "Enables / Disables the table's surrounding border.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "pagination",
+              "description": "pagination props that will passed down to inner pagination component",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridPaginationProps"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "selectable",
+              "description": "Enables / Disables rows to be selected via a checkbox. On select the \"select\" event will be emitted.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "selection",
+              "description": "Selected items",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridDataItemId[]"
+              },
+              "default": "() => []"
+            },
+            {
+              "name": "sortBy",
+              "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridSortByColumn[]"
+              },
+              "default": "() => []"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:filters"
+            },
+            {
+              "name": "column-resize"
+            },
+            {
+              "name": "sort"
+            },
+            {
+              "name": "select"
+            },
+            {
+              "name": "navigate"
+            },
+            {
+              "name": "items-page"
+            }
+          ],
+          "slots": [
+            {
+              "name": "header"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "footer"
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/data-grid.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-filter-bar",
+          "description": "The filter bar filters item lists and tables according to various filter criteria.",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Array of filters based on {@see FilterBarModel}.\nEach one of the elements in the array correspond to a filter that will\nbe created and rendered in the FilterBar.\n\nCan be used with v-model or independently with the @input event.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarModel"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/filter-bar.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-input-field",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables the possibility of changing value in the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "error",
+              "description": "Adds error validation class for outlining input-field",
+              "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": "BentoInputFieldStaticValuePosition"
+              },
+              "default": "BentoInputFieldStaticValuePosition.START"
+            },
+            {
+              "name": "value",
+              "description": "Text displayed as the value of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "variant",
+              "description": "Describes the different variants for the input element",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldVariant"
+              },
+              "default": "BentoInputFieldVariant.DEFAULT"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "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-radio",
+          "description": "Radio buttons are used when two or more options are mutually exclusive,\nthe user can only select a single option from a list of pre-defined options.\nThe label tag area is also clickable.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disable the input radio (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "Indicates the value of the input that will be returned when it's checked",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              }
+            },
+            {
+              "name": "v-model",
+              "description": "This property should not be used directly.\nIt will be used by v-model directive on radio component.",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "subLabel"
+            }
+          ],
+          "source": {
+            "module": "./src/components/input-radio/input-radio.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-loading-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "condensed",
+              "description": "Reduces sizing of button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButton.props.condensed.type"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables button functonality",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButton.props.disabled.type"
+              },
+              "default": "false"
+            },
+            {
+              "name": "state",
+              "description": "State of the button.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoLoadingButtonState"
+              },
+              "default": "BentoLoadingButtonState.START"
+            },
+            {
+              "name": "variant",
+              "description": "Types of flavour of Button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButton.props.variant.type"
+              },
+              "default": "BentoButtonVariant.PRIMARY"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/components/loading-button/loading-button.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-loading-indicator",
+          "description": "",
+          "attributes": [
+            {
+              "name": "small",
+              "description": "Displays the loading indicator in a small size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "large",
+              "description": "Displays the loading indicator in a large size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "inverse",
+              "description": "Displays the loading indicator in a small size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/loading-indicator/loading-indicator.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-pagination",
+          "description": "Paginiation component to help users page through data sets.\n\nThere are two ways of doing navigation in this component:\n     1. (Basic) You tell the component if there is a next page (hasNext)\n     2. (Enhanced) You tell the component:\n         - How many total items exist (totalCount)\n         - The max number of items that you show/fetch per page (size)\n         - In this case you should not set the hasNext props\n\nIf you have the data available and opt to use the Enhanced way you get extra controls:\n     - Page dropdown selector\n     - Last page button\n     - \"Showing 10 of 200 items\" text",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "description": "A brief description of the purpose of the navigation (for a11y).\nOmit the term \"navigation\", as the screen reader will read both the role and the contents of the label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "hasNext",
+              "description": "Use to determine if the pager has a \"next page\".",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "page",
+              "description": "The current page number of the pager.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "1"
+            },
+            {
+              "name": "size",
+              "description": "The size of the items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "50"
+            },
+            {
+              "name": "totalCount",
+              "description": "The total number of items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "navigate"
+            },
+            {
+              "name": "items-page"
+            },
+            {
+              "name": "update:page"
+            },
+            {
+              "name": "update:size"
+            }
+          ],
+          "source": {
+            "module": "./src/components/pagination/pagination.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-pagination-context",
+          "description": "",
+          "attributes": [
+            {
+              "name": "page",
+              "description": "The current page number of the pager.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "1"
+            },
+            {
+              "name": "totalPages",
+              "description": "The total number of items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "page-selected"
+            }
+          ],
+          "source": {
+            "module": "./src/components/pagination/components/pagination-context/pagination-context.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-pagination-context-results-per-page",
+          "description": "",
+          "attributes": [
+            {
+              "name": "itemsPerPage",
+              "description": "The amount of items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "DEFAULT_NUMBER_OF_RESULTS"
+            },
+            {
+              "name": "totalCount",
+              "description": "The total number of items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "select"
+            }
+          ],
+          "source": {
+            "module": "./src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-popover",
+          "description": "Example description of the component...",
+          "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\".\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',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "actionsLayout",
+              "description": "Defines the layout in which the button actions is presented.\nIt can be one of:",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsLayout"
+              },
+              "default": "BentoButtonActionsLayout.BUTTONS_END"
+            },
+            {
+              "name": "ariaLabel",
+              "description": "Defines a string value that provides an accessible name for the popover.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disableFocusTrap",
+              "description": "Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "dismissible",
+              "description": "Adds a \"dismiss\" icon that triggers the \"dismiss\" event.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "fixedPositioning",
+              "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "large",
+              "description": "Displays the popover in a large size.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "modifiers",
+              "description": "Custom set of modifiers. Useful for low-level control over Popper behavior in some really complex use cases.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "null"
+            },
+            {
+              "name": "position",
+              "description": "Popover's position relative to the target element.\nPossible values are:\n'auto',    'auto-start',    'auto-end',\n'top',     'top-start',     'top-end'\n'right',   'right-start',   'right-end'\n'bottom',  'bottom-start',  'bottom-end'\n'left',    'left-start',    'left-end'",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopoverPositions"
+              },
+              "default": "BentoPopoverPositions.TOP"
+            },
+            {
+              "name": "small",
+              "description": "Displays the popover in a small size.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "title",
+              "description": "Indicates the title you want to give the popover.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "targetElement",
+              "required": true,
+              "description": "Popover's target element.\nThe popover will position itself relatively to target element, in specified position.",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainer.props?.targetElement.type"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "dismiss"
+            }
+          ],
+          "slots": [
+            {
+              "name": "image"
+            },
+            {
+              "name": "headerIcon"
+            },
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/popover/popover.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-popover-dismiss-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "onImage",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "click"
+            }
+          ],
+          "source": {
+            "module": "./src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-popover-image",
+          "description": "",
+          "attributes": [
+            {
+              "name": "src",
+              "required": true,
+              "description": "URL to image.\nFor more details, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "alt",
+              "required": true,
+              "description": "Explanatory text for the image",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/popover/components/popover-image/popover-image.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-status",
+          "description": "A Status component is used to indicate a\npassage of time or a particular step of a process.",
+          "attributes": [
+            {
+              "name": "variant",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "BentoStatusVariant"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/status/status.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-tag",
+          "description": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The variant variant of tag",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTagVariant"
+              },
+              "default": "BentoTagVariant.DEFAULT"
+            },
+            {
+              "name": "truncate",
+              "description": "The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            }
+          ],
+          "source": {
+            "module": "./src/components/tag/tag.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-text-filter",
+          "description": "",
+          "attributes": [
+            {
+              "name": "alwaysShowNameInLabel",
+              "description": "Display the \"label\" prop alongside its \"value\" when the filter is active\n\nE.g.\nlabel: \"Company\"\nvalue: \"Adyen\"\n\n\"Company: Adyen\"",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "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"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            },
+            {
+              "name": "dismiss"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/text-filter/text-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-toggle",
+          "description": "A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disable the toggle (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "labelPosition",
+              "description": "Position of the label relative to the toggle (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "AdlLabelPosition"
+              },
+              "default": "AdlLabelPosition.BEFORE"
+            },
+            {
+              "name": "value",
+              "description": "Indicates if the switch is \"on\" or \"off\"",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "ariaLabel",
+              "description": "Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "subLabel"
+            }
+          ],
+          "source": {
+            "module": "./src/components/toggle/toggle.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-tooltip",
+          "description": "If tooltip needs to be rendered as a component instead of a directive (directives/tooltip).\nWhen used as a component the position of the tooltip will be according to where it is placed\non the page.",
+          "attributes": [
+            {
+              "name": "targetElement",
+              "required": true,
+              "description": "Tooltip's target reference to the DOM element or Vue component.\nThe tooltip will position itself relatively to target element, in specified position.",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainer.props?.targetElement.type"
+              }
+            },
+            {
+              "name": "position",
+              "description": "Tooltip's position relative to the target element.\nPossible values are: 'top', 'bottom', 'left' and 'right'.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTooltipPosition"
+              },
+              "default": "BentoTooltipPosition.TOP"
+            },
+            {
+              "name": "offset",
+              "description": "Tooltip's offset.\nIf specified, the tooltip will have an offset in pixels between it and the target element\nin specified position.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            },
+            {
+              "name": "content",
+              "required": true,
+              "description": "Tooltip's text content.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "isShown",
+              "description": "Shows / Hides the Tooltip component",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/tooltip/tooltip.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-typography",
+          "description": "The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\neasily to text. The variants and properties match with those found in Figma.\n\nFor example, seeing text with the typography styling of",
+          "attributes": [
+            {
+              "name": "el",
+              "description": "Sets the HTML DOM element.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTypographyElement"
+              },
+              "default": "BentoTypographyElement.PARAGRAPH"
+            },
+            {
+              "name": "stronger",
+              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "strongest",
+              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "description": "Sets the type of typography variant.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTypographyVariant"
+              },
+              "default": "BentoTypographyVariant.BODY"
+            },
+            {
+              "name": "medium",
+              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "large",
+              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "wide",
+              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/typography/typography.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "button-actions.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/components/button-actions/button-actions.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "button-group",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/components/button-group.vue"
+          }
+        },
+        {
+          "name": "button.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/button.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "card.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/card/card.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "checkbox.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/checkbox/checkbox.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "data-grid.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/data-grid.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-input-container",
+          "description": "Dropdown input field container.\nIt renders the Placeholder or the value that was selected.\n\nWhen it gets clicked it emits the \"click\" event.",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "description": "Defines a string value that provides an accessible name for the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "comboboxId",
+              "required": true,
+              "description": "Identifies the listbox whose contents are controlled by the the combobox on which this attribute is set.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "displayValue",
+              "description": "Selected option's label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "placeholder",
+              "description": "Specifies a short hint that describes the expected value of the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "open",
+              "description": "Indicates if the dropdown is open so that\nthe chevron can be turned around respectively.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-input-container/dropdown-input-container.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-option",
+          "description": "Dropdown option element.",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "Text to be displayed in the option",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "Value of the option",
+              "value": {
+                "kind": "expression",
+                "type": "AdlDropdownValue"
+              }
+            },
+            {
+              "name": "selected",
+              "description": "Indicates if the value is selected. Only one element can be selected at a time.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "select"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-options-container/components/dropdown-option/dropdown-option.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-options-container",
+          "description": "Dropdown options 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": "disabled",
+              "description": "Disables dropdown functionality",
+              "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": "open",
+              "required": true,
+              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "The option elements to populate the dropdown with.\nIt must be an array of {@see AdlDropdownOptionItem }\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": "AdlDropdownOptions"
+              }
+            },
+            {
+              "name": "selectedValue",
+              "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": "AdlDropdownValue"
+              },
+              "default": "null"
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "select"
+            }
+          ],
+          "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": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "selectedValue",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "items",
+              "value": {
+                "kind": "expression",
+                "type": "AdlDropdownOptions"
+              },
+              "default": "() => []"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-options-container/__tests__/dropdown-options-container-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/dropdown/dropdown.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/filter-bar/filter-bar.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "focus-trap",
+          "description": "Locks the focus inside an element for a11y navigation.\nUseful for things like modals, popovers, etc...",
+          "attributes": [
+            {
+              "name": "arrowNavigation",
+              "description": "Enables / Disables arrow navigation as well can determine the type of arrow navigation.\nThe types of arrow navigation are horizontal and vertical.",
+              "value": {
+                "kind": "expression",
+                "type": "AdlFocusTrapArrowNavigationDirection"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "description": "Enables / disables the focus trap.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/focus-trap/focus-trap.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "focus-trap-mock",
+          "description": "",
+          "source": {
+            "module": "./src/components/focus-trap/__tests__/focus-trap-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "input-field.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/input-field/input-field.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "input-radio.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/input-radio/input-radio.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "link",
+          "description": "",
+          "attributes": [
+            {
+              "name": "args",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "{ props: RouterLinkProps }"
+              }
+            },
+            {
+              "name": "external",
+              "required": false,
+              "description": "Set the rendered link to a regular external anchor link.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/link/link.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "link.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/link/link.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "loading-button.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/components/loading-button/loading-button.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "loading-indicator.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/loading-indicator/loading-indicator.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "page-header.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/page-header/page-header.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "pagination.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/pagination/pagination.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "popover-stub",
+          "description": "",
+          "events": [
+            {
+              "name": "dismiss"
+            }
+          ],
+          "slots": [
+            {
+              "name": "image"
+            },
+            {
+              "name": "headerIcon"
+            },
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/popover/__tests__/popover-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "popover.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/popover/popover.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "popper-container",
+          "description": "A wrapper for the 'popper/core' package that overlays a small piece of content near a target element.\n\nNOTE: This component should not be used by itself but more implemented by other exported components\ne.g. Tooltip\nMore info here on the package: https://popper.js.org/docs/v2/\n\n* @usage\nimport { PopperContainer } from '@adyen/bento-vue2';\n\nexport default {\n    components: { PopperContainer },\n    computed: {\n        targetElement() {\n            return this.$refs.tooltipTarget;\n        },\n    },\n    template: `\n         <popper-container\n              :target-element=\"targetElement\"\n              :position=\"position\"\n          >\n              {{ content }}\n         </popper-container>`,\n}",
+          "attributes": [
+            {
+              "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,
+              "description": "Reference to the DOM element or Vue component for positioning",
+              "value": {
+                "kind": "expression",
+                "type": "VueNodeElement"
+              }
+            },
+            {
+              "name": "position",
+              "description": "Position relative to the target element",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerPosition"
+              },
+              "default": "PopperContainerPosition.AUTO"
+            },
+            {
+              "name": "fixedPositioning",
+              "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "arrow",
+              "description": "Indicates if container should have additional arrow, pointing at target element\nCan be just a boolean flag, or an object with additional configuration:",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerArrowProp | boolean"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "offset",
+              "description": "Allows to displace a popper container from its target element.",
+              "value": {
+                "kind": "expression",
+                "type": "number[]"
+              },
+              "default": "() => [0, 0]"
+            },
+            {
+              "name": "matchWidth",
+              "description": "Instructs popper container to have the same width as target element.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "modifiers",
+              "description": "Custom set of modifiers. Useful for low-level control over Popper behavior in some really complex use cases.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "null"
+            },
+            {
+              "name": "fallbackPosition",
+              "description": "Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...].\nUseful when not using auto as starting placement.\nhttps://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements",
+              "value": {
+                "kind": "expression",
+                "type": "FallbackPositionProp"
+              },
+              "default": "null"
+            },
+            {
+              "name": "ariaRole",
+              "description": "The aria role assigned to the container. Defaults to null, which means it's not set if nothing is passed.",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerAriaRole"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "position"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/popper-container/popper-container.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "popper-container-mock",
+          "description": "",
+          "attributes": [
+            {
+              "name": "arrow",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainer.props.arrow"
+              }
+            },
+            {
+              "name": "position",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainer.props.position"
+              }
+            },
+            {
+              "name": "popperContent",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'Im a popping card!'"
+            }
+          ],
+          "events": [
+            {
+              "name": "position"
+            }
+          ],
+          "source": {
+            "module": "./src/components/popper-container/__tests__/popper-container-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "profile-picture.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/profile-picture/profile-picture.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "segmented-control.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/segmented-control/segmented-control.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "status.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/status/status.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tab",
+          "description": "",
+          "attributes": [
+            {
+              "name": "name",
+              "required": true,
+              "description": "Name, main identifier, of the tab. You'll use it to set the initial selected tab if needed.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text that will appear as the title of the tab's handle.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Is this tab disabled? When a tab is disabled you can not select it.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "testId",
+              "description": "For testing purposes you can decide which testId your adl-tab instance will have",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'adl-tab'"
+            },
+            {
+              "name": "tabs",
+              "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",
+              "value": {
+                "kind": "expression",
+                "type": "AdlTabApi"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "title"
+            },
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/tabs/components/tab.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tabs",
+          "description": "",
+          "attributes": [
+            {
+              "name": "initialTab",
+              "required": true,
+              "description": "Here you must pass the name of the tab you want to be selected initially.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/tabs/tabs.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tabs.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/tabs/tabs.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tag.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/tag/tag.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "textarea.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/textarea/textarea.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "title-item.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/page-header/components/title-item/title-item.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toggle.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/toggle/toggle.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tooltip-directive-mock",
+          "description": "",
+          "attributes": [
+            {
+              "name": "content",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/tooltip/__tests__/tooltip-directive-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tooltip-mock",
+          "description": "",
+          "attributes": [
+            {
+              "name": "isShown",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTooltip.props.isShown"
+              }
+            },
+            {
+              "name": "content",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/tooltip/__tests__/tooltip-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "tooltip.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/tooltip/tooltip.test.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "typography.test",
+          "description": "",
+          "source": {
+            "module": "./src/components/typography/typography.test.vue",
+            "symbol": "default"
+          }
+        }
+      ]
+    }
+  }
+}