@adyen/bento-vue2 0.7.0 → 0.8.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -641,6 +641,90 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "base-modal",
+          "description": "",
+          "attributes": [
+            {
+              "name": "modalRole",
+              "description": "Defines whether the modal will be an alert modal",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "BentoModalRole.DIALOG"
+            },
+            {
+              "name": "isDismissible",
+              "required": true,
+              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "hideCloseButton",
+              "required": true,
+              "description": "Hides a cross icon on the right side of the title",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "isOpen",
+              "required": true,
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "size",
+              "description": "Sets the width of the modal",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalSize"
+              },
+              "default": "BentoModalSize.SMALL"
+            },
+            {
+              "name": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "content"
+            },
+            {
+              "name": "actions"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/components/base-modal/base-modal.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-alert",
           "description": "An Alert component is used to display a persistent\nnotification containing information important to the user",
@@ -744,6 +828,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "buttonHasChevron",
+              "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"
+              },
+              "default": "false"
+            },
             {
               "name": "disableApplyButton",
               "description": "Disable the \"apply\" button",
@@ -1610,6 +1703,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-divider",
+          "description": "",
+          "source": {
+            "module": "./src/components/divider/divider.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-dropdown-avatar",
           "description": "A Avatar Dropdown showing a selectable list of countries.",
@@ -1854,11 +1955,24 @@
                 "type": "boolean"
               },
               "default": "false"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "click"
+              "name": "isFilterOpen",
+              "description": "Signifies if the filter is open or closed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "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"
+              },
+              "default": "false"
             }
           ],
           "slots": [
@@ -1949,7 +2063,7 @@
               "description": "JavaScript \"Date\" object for when the content was last updated",
               "value": {
                 "kind": "expression",
-                "type": "date"
+                "type": "date|number"
               },
               "default": "null"
             }
@@ -2568,21 +2682,21 @@
           }
         },
         {
-          "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",
+          "name": "bento-modal",
+          "description": "Modal is a window that appear over any other page content and focus user attention exclusively on one task or piece of information at the moment.",
           "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.",
+              "name": "variant",
+              "description": "Choose between default or dialog versions of modal",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoModalVariant"
               },
-              "default": "null"
+              "default": "BentoModalVariant.DEFAULT"
             },
             {
-              "name": "hasNext",
-              "description": "Use to determine if the pager has a \"next page\".",
+              "name": "isDismissible",
+              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2590,8 +2704,8 @@
               "default": "null"
             },
             {
-              "name": "hidePageSize",
-              "description": "Toggles the visibility of the \"results per page\" part of the pagination component.",
+              "name": "isOpen",
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2599,171 +2713,152 @@
               "default": "false"
             },
             {
-              "name": "page",
-              "description": "The current page number of the pager.",
+              "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',2\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "BentoButtonActionsList"
               },
-              "default": "1"
+              "default": "null"
+            },
+            {
+              "name": "hideCloseButton",
+              "description": "Hides a cross icon on the right side of the title",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
               "name": "size",
-              "description": "The size of the items the pager is paging through.",
+              "description": "Sets the width of the modal",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "BentoModalSize"
               },
-              "default": "20"
+              "default": "BentoModalSize.SMALL"
             },
             {
-              "name": "totalCount",
-              "description": "The total number of items the pager is paging through.",
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "string"
               },
               "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "name": "navigate"
             },
             {
-              "name": "items-page"
+              "name": "actionsLabel",
+              "description": "Text label that is displayed left to the action buttons",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "update:page"
+              "name": "destructiveActions",
+              "description": "If passed - sets first button color to red",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "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.",
+              "name": "dialogType",
+              "description": "Changes the visual styling of action buttons",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "BentoModalDialogType"
               },
-              "default": "1"
+              "default": "BentoModalDialogType.CONFIRMATION"
             },
             {
-              "name": "totalPages",
-              "description": "The total number of items the pager is paging through.",
+              "name": "content",
+              "description": "Text that will be displayed in the content section of Modal",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "string"
               },
               "default": "null"
             }
           ],
-          "events": [
+          "slots": [
             {
-              "name": "page-selected"
+              "name": "default"
+            },
+            {
+              "name": "content"
             }
           ],
           "source": {
-            "module": "./src/components/pagination/components/pagination-context/pagination-context.vue",
+            "module": "./src/components/modal/modal.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-pagination-context-results-per-page",
+          "name": "bento-modal-default",
           "description": "",
           "attributes": [
             {
-              "name": "itemsPerPage",
-              "description": "The amount of items the pager is paging through.",
+              "name": "isOpen",
+              "required": true,
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
               "value": {
                 "kind": "expression",
-                "type": "number"
-              },
-              "default": "DEFAULT_NUMBER_OF_RESULTS"
+                "type": "boolean"
+              }
             },
             {
-              "name": "totalCount",
-              "description": "The total number of items the pager is paging through.",
+              "name": "isDismissible",
+              "required": true,
+              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
               "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-payment-method",
-          "description": "A payment method type component to display the type's icon and label.",
-          "attributes": [
+                "type": "boolean"
+              }
+            },
             {
-              "name": "type",
-              "description": "The type of payment method to display.",
+              "name": "hideCloseButton",
+              "description": "Hides a cross icon on the right side of the title",
               "value": {
                 "kind": "expression",
-                "type": "BentoPaymentMethodType"
+                "type": "boolean"
               },
-              "default": "BentoPaymentMethodType.UNKNOWNCARD"
+              "default": "false"
             },
             {
-              "name": "label",
+              "name": "size",
               "required": true,
-              "description": "The label describing to the payment method icon.",
+              "description": "Sets the width of the modal",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoModalSize"
               }
-            }
-          ],
-          "source": {
-            "module": "./src/components/payment-method/payment-method.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```",
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
               "value": {
                 "kind": "expression",
-                "type": "BentoButtonActionsList"
+                "type": "string"
               },
               "default": "null"
             },
             {
-              "name": "actionsLayout",
-              "description": "Defines the layout in which the button actions is presented.\nIt can be one of:",
+              "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": "BentoButtonActionsLayout"
+                "type": "BentoButtonActionsList"
               },
-              "default": "BentoButtonActionsLayout.BUTTONS_END"
+              "default": "null"
             },
             {
-              "name": "ariaLabel",
-              "description": "Defines a string value that provides an accessible name for the popover.",
+              "name": "actionsLabel",
+              "description": "Text label that is displayed left to the action buttons",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2771,8 +2866,8 @@
               "default": "null"
             },
             {
-              "name": "divider",
-              "description": "Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.",
+              "name": "destructiveActions",
+              "description": "If passed - sets first button color to red",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2780,35 +2875,125 @@
               "default": "false"
             },
             {
-              "name": "disableFocusTrap",
-              "description": "Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.",
+              "name": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
             },
             {
-              "name": "dismissible",
-              "description": "Adds a \"dismiss\" icon that triggers the \"dismiss\" event.",
+              "name": "content"
+            },
+            {
+              "name": "actions"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/components/modal-default/modal-default.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-modal-dialog",
+          "description": "",
+          "attributes": [
+            {
+              "name": "isOpen",
+              "required": true,
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "isDismissible",
+              "required": true,
+              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
+              }
+            },
+            {
+              "name": "dialogType",
+              "required": true,
+              "description": "Sets different action buttons styling and appearance",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalDialogType"
+              }
+            },
+            {
+              "name": "content",
+              "required": true,
+              "description": "Text that is displayed in the content section of modal",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "actions",
+              "description": "List of actions that will be used to render the buttons.\nOnly 1 action button is allowed for Modal Dialog\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```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "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",
+              "name": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/components/modal-dialog/modal-dialog.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": "large",
-              "description": "Displays the popover in a large size.",
+              "name": "hasNext",
+              "description": "Use to determine if the pager has a \"next page\".",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "hidePageSize",
+              "description": "Toggles the visibility of the \"results per page\" part of the pagination component.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2816,26 +3001,180 @@
               "default": "false"
             },
             {
-              "name": "modifiers",
-              "description": "Custom set of modifiers. Useful for low-level control over Popper behavior in some really complex use cases.",
+              "name": "page",
+              "description": "The current page number of the pager.",
               "value": {
                 "kind": "expression",
-                "type": "array"
+                "type": "number"
+              },
+              "default": "1"
+            },
+            {
+              "name": "size",
+              "description": "The size of the items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "20"
+            },
+            {
+              "name": "totalCount",
+              "description": "The total number of items the pager is paging through.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
               },
               "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "navigate"
             },
             {
-              "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'",
+              "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": "BentoPopoverPositions"
+                "type": "number"
               },
-              "default": "BentoPopoverPositions.TOP"
+              "default": "1"
             },
             {
-              "name": "small",
-              "description": "Displays the popover in a small size.",
+              "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-payment-method",
+          "description": "A payment method type component to display the type's icon and label.",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "The type of payment method to display.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPaymentMethodType"
+              },
+              "default": "BentoPaymentMethodType.UNKNOWNCARD"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "The label describing to the payment method icon.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/payment-method/payment-method.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": "divider",
+              "description": "Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2843,130 +3182,666 @@
               "default": "false"
             },
             {
-              "name": "title",
-              "description": "Indicates the title you want to give the popover.",
+              "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": "open",
+              "description": "Toggles the popover open and closed",
+              "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"
+              }
+            },
+            {
+              "name": "withoutSpace",
+              "description": "Displays the popover without padding.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "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-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};",
+          "attributes": [
+            {
+              "name": "items",
+              "required": true,
+              "description": "The checkbox group's items.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoRadioGroupItems"
+              }
+            },
+            {
+              "name": "variant",
+              "description": "The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoRadioGroupVariant"
+              },
+              "default": "BentoRadioGroupVariant.VERTICAL"
+            },
+            {
+              "name": "formId",
+              "description": "The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "description": "If set to true, renders all checkboxes in the group in a disabled state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "The name associated with the group. Required for accessibility purposes.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "selectedValue",
+              "description": "Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\nDefaults to no value selected.",
+              "value": {
+                "kind": "expression",
+                "type": "number|string"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/radio-group/radio-group.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-range-filter",
+          "description": "Range filter used in the filter-bar component.",
+          "attributes": [
+            {
+              "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": "() => ['', '']"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/range-filter/range-filter.vue",
+            "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": "value",
+              "description": "Text displayed as the value being searched",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "escape-pressed"
+            },
+            {
+              "name": "input"
+            },
+            {
+              "name": "clear"
+            }
+          ],
+          "source": {
+            "module": "./src/components/search-bar/search-bar.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-select-avatar-filter",
+          "description": "The Select Avatar filter displays a listbox of avatar items\npassed in the \"options.listboxItems\" property.",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectAvatarFilterOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-avatar-filter/select-avatar-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-select-country-filter",
+          "description": "The Select Country filter displays a listbox of country items\npassed in the \"options.listboxItems\" property.",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the 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}.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectCountryFilterOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-select-country-filter",
+          "description": "The Select Country filter displays a listbox of country items\npassed in the \"options.listboxItems\" property.",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectCurrencyFilterOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-select-country-filter",
+          "description": "The Select Tag filter displays a listbox of tag items\npassed in the \"options.listboxItems\" property.",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the tag filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectTagFilterOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-select-filter",
+          "description": "The Listbox filter displays a listbox of items\npassed in the \"options.listboxItems\" property.",
+          "attributes": [
+            {
+              "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": "options",
+              "description": "List of options that are needed to setup the 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.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectFilterOptions"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/select-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-select-payment-method-filter",
+          "description": "The Select Payment Method filter displays a listbox of country items\npassed in the \"options.listboxItems\" property to be used in the FilterBar component.",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the payment method 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 BentoSelectPaymentMethodFilterOptions}",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectPaymentMethodFilterOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-payment-method-filter/select-payment-method-filter.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-structured-list",
+          "description": "This is a list used to display pairs of information in a clear and organized manner.\n`BentoStructureListItem` should be used to pass the label/value pairs to the list.",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/structured-list/structured-list.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-structured-list-item",
+          "description": "This is an item of the `BentoStructuredList` meant to be used only with that component.\nIt consists of a label/value pair, and also the optional copy and search modifiers.",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label to display for the value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "copy",
+              "description": "Text to copy when the user clicks `Copy` icon",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "null"
+              "default": "undefined"
             },
             {
-              "name": "targetElement",
-              "required": true,
-              "description": "Popover's target element.\nThe popover will position itself relatively to target element, in specified position.",
+              "name": "search",
+              "description": "Function to trigger when user clicks `Search` icon",
               "value": {
                 "kind": "expression",
-                "type": "PopperContainer.props?.targetElement.type"
-              }
+                "type": "(event: Event) => void"
+              },
+              "default": "undefined"
             },
             {
-              "name": "withoutSpace",
-              "description": "Displays the popover without padding.",
+              "name": "searchTooltip",
+              "description": "Text to display when the user hovers over `Search` icon",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
-            }
-          ],
-          "events": [
-            {
-              "name": "dismiss"
+              "default": "undefined"
             }
           ],
           "slots": [
-            {
-              "name": "image"
-            },
-            {
-              "name": "headerIcon"
-            },
             {
               "name": "default"
             }
           ],
           "source": {
-            "module": "./src/components/popover/popover.vue",
+            "module": "./src/components/structured-list/components/structered-list-item/structured-list-item.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-popover-dismiss-button",
-          "description": "",
+          "name": "bento-summary-grid",
+          "description": "A summary grid component that displays a collection items.",
           "attributes": [
             {
-              "name": "onImage",
+              "name": "columnWidth",
+              "description": "Sets the responsive columns widths values for 1 of the 3 rows.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoSummaryGridColumnWidth"
               },
-              "default": "false"
+              "default": "null"
             }
           ],
-          "events": [
+          "slots": [
             {
-              "name": "click"
+              "name": "default"
             }
           ],
           "source": {
-            "module": "./src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue",
+            "module": "./src/components/summary-grid/summary-grid.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-popover-image",
-          "description": "",
+          "name": "bento-summary-grid-item-amount",
+          "description": "Summary grid item component used to display financial data, such as currency values and monetary amounts",
           "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",
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             },
             {
-              "name": "alt",
+              "name": "label",
               "required": true,
-              "description": "Explanatory text for the image",
+              "description": "Amount to be shown as the main value",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
-            }
-          ],
-          "source": {
-            "module": "./src/components/popover/components/popover-image/popover-image.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "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 sub label' },\n                ]\"\n                :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n             />\n    `\n};",
-          "attributes": [
+            },
             {
-              "name": "items",
-              "required": true,
-              "description": "The checkbox group's items.",
+              "name": "secondaryLabel",
+              "description": "Adds additional label next to amount content",
               "value": {
                 "kind": "expression",
-                "type": "BentoRadioGroupItems"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "variant",
-              "description": "The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.",
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
               "value": {
                 "kind": "expression",
-                "type": "BentoRadioGroupVariant"
-              },
-              "default": "BentoRadioGroupVariant.VERTICAL"
+                "type": "string"
+              }
             },
             {
-              "name": "formId",
-              "description": "The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.",
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2974,8 +3849,8 @@
               "default": "null"
             },
             {
-              "name": "disabled",
-              "description": "If set to true, renders all checkboxes in the group in a disabled state.",
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2983,320 +3858,310 @@
               "default": "false"
             },
             {
-              "name": "label",
-              "required": true,
-              "description": "The name associated with the group. Required for accessibility purposes.",
+              "name": "trendDirection",
+              "description": "Defines the direction (color) of the trend label",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
             },
             {
-              "name": "selectedValue",
-              "description": "Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\nDefaults to no value selected.",
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
               "value": {
                 "kind": "expression",
-                "type": "number|string"
+                "type": "string"
               },
               "default": "null"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "input"
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
             }
           ],
           "source": {
-            "module": "./src/components/radio-group/radio-group.vue",
+            "module": "./src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-range-filter",
-          "description": "Range filter used in the filter-bar component.",
+          "name": "bento-summary-grid-item-custom",
+          "description": "A summary bar item is a piece of information to be displayed in `bento-summary-bar` component",
           "attributes": [
             {
-              "name": "field",
-              "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             },
             {
-              "name": "label",
-              "required": true,
-              "description": "Label text to be displayed",
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Current value of the filter",
-              "value": {
-                "kind": "expression",
-                "type": "string[]"
               },
-              "default": "() => ['', '']"
-            }
-          ],
-          "events": [
-            {
-              "name": "update"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/range-filter/range-filter.vue",
-            "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": [
+              "default": "null"
+            },
             {
-              "name": "inputFieldAriaLabel",
+              "name": "title",
               "required": true,
-              "description": "Text that labels an the search bar input element",
+              "description": "Text used as a title",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "debounceTime",
-              "description": "Custom debounce time. Default: 300",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
-            },
-            {
-              "name": "value",
-              "description": "Text displayed as the value being searched",
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             }
           ],
           "events": [
             {
-              "name": "escape-pressed"
-            },
-            {
-              "name": "input"
-            },
+              "name": "copy-to-clipboard"
+            }
+          ],
+          "slots": [
             {
-              "name": "clear"
+              "name": "default"
             }
           ],
           "source": {
-            "module": "./src/components/search-bar/search-bar.vue",
+            "module": "./src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-select-avatar-filter",
-          "description": "The Select Avatar filter displays a listbox of avatar items\npassed in the \"options.listboxItems\" property.",
+          "name": "bento-summary-grid-item-numeric",
+          "description": "Summary grid item component used to display any numeric information",
           "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}",
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectAvatarFilterOptions"
+                "type": "string"
               },
               "default": "undefined"
-            }
-          ],
-          "events": [
-            {
-              "name": "update"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-avatar-filter/select-avatar-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-select-country-filter",
-          "description": "The Select Country filter displays a listbox of country items\npassed in the \"options.listboxItems\" property.",
-          "attributes": [
+            },
             {
-              "name": "options",
-              "description": "List of options that are needed to setup the 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}.",
+              "name": "label",
+              "required": true,
+              "description": "Amount to be shown as the main value",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCountryFilterOptions"
-              },
-              "default": "undefined"
-            }
-          ],
-          "events": [
+                "type": "string"
+              }
+            },
             {
-              "name": "update"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-select-country-filter",
-          "description": "The Select Country filter displays a listbox of country items\npassed in the \"options.listboxItems\" property.",
-          "attributes": [
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
-              "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "string"
               },
-              "default": "undefined"
-            }
-          ],
-          "events": [
-            {
-              "name": "update"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-select-country-filter",
-          "description": "The Select Tag filter displays a listbox of tag items\npassed in the \"options.listboxItems\" property.",
-          "attributes": [
+              "default": "null"
+            },
             {
-              "name": "options",
-              "description": "List of options that are needed to setup the tag filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}",
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectTagFilterOptions"
+                "type": "boolean"
               },
-              "default": "undefined"
-            }
-          ],
-          "events": [
+              "default": "false"
+            },
             {
-              "name": "update"
+              "name": "trendDirection",
+              "description": "Defines the direction (color) of the trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
+            {
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue",
+            "module": "./src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-select-filter",
-          "description": "The Listbox filter displays a listbox of items\npassed in the \"options.listboxItems\" property.",
+          "name": "bento-summary-grid-item-percentage",
+          "description": "Summary grid item component used to display any percentage information",
           "attributes": [
             {
-              "name": "field",
+              "name": "label",
               "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "description": "Amount to be shown as the main value",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "label",
+              "name": "title",
               "required": true,
-              "description": "Label text to be displayed",
+              "description": "Text used as a title",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "options",
-              "description": "List of options that are needed to setup the 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.",
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectFilterOptions"
+                "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
-              "name": "value",
-              "description": "Current value of the filter",
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxSelectedValue"
+                "type": "string"
               },
               "default": "undefined"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "update"
-            }
-          ],
-          "slots": [
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/select-filter/select-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-select-payment-method-filter",
-          "description": "The Select Payment Method filter displays a listbox of country items\npassed in the \"options.listboxItems\" property to be used in the FilterBar component.",
-          "attributes": [
+              "name": "trendDirection",
+              "description": "Defines the direction (color) of the trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
             {
-              "name": "options",
-              "description": "List of options that are needed to setup the payment method 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 BentoSelectPaymentMethodFilterOptions}",
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectPaymentMethodFilterOptions"
+                "type": "string"
               },
               "default": "undefined"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "update"
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-payment-method-filter/select-payment-method-filter.vue",
+            "module": "./src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.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.",
+          "name": "bento-summary-grid-item-text",
+          "description": "Summary grid item component used to display text only. Can be used for references, IDs or any other text data.",
           "attributes": [
             {
-              "name": "variant",
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
               "required": true,
+              "description": "Amount to be shown as the main value",
               "value": {
                 "kind": "expression",
-                "type": "BentoStatusVariant"
+                "type": "string"
               }
-            }
-          ],
-          "slots": [
+            },
             {
-              "name": "default"
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
-            "module": "./src/components/status/status.vue",
+            "module": "./src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue",
             "symbol": "default"
           }
         },
@@ -3397,6 +4262,9 @@
             },
             {
               "name": "subLabel"
+            },
+            {
+              "name": "description"
             }
           ],
           "source": {
@@ -3600,6 +4468,30 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "copy",
+          "description": "An internal button component that copies text to the user's clipboard.",
+          "attributes": [
+            {
+              "name": "text",
+              "required": true,
+              "description": "Defines the string that will get copied to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/copy/copy.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid-columns",
           "description": "",
@@ -4445,6 +5337,44 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "grid-layout",
+          "description": "Component used to render the grid layout in the bento-summary-grid. For internal use only",
+          "attributes": [
+            {
+              "name": "columnWidth",
+              "value": {
+                "kind": "expression",
+                "type": "GridLayoutColumnWidths"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "col-1"
+            },
+            {
+              "name": "col-2"
+            },
+            {
+              "name": "col-3"
+            },
+            {
+              "name": "col-4"
+            },
+            {
+              "name": "col-5"
+            },
+            {
+              "name": "col-6"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/grid-layout/grid-layout.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "input-field.test",
           "description": "",
@@ -5049,6 +5979,9 @@
             },
             {
               "name": "subLabel"
+            },
+            {
+              "name": "description"
             }
           ],
           "source": {
@@ -5106,6 +6039,93 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "summary-grid-item",
+          "description": "A summary bar item is a piece of information to be displayed in `bento-summary-bar` component",
+          "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "itemType",
+              "description": "Applies styling based on content type",
+              "value": {
+                "kind": "expression",
+                "type": "SummaryGridItemType"
+              },
+              "default": "SummaryGridItemType.CUSTOM"
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
+            },
+            {
+              "name": "trendDirection",
+              "description": "Defines the color of trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
+            {
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tab",
           "description": "",