@adyen/bento-vue2 1.74.0 → 1.75.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.74.0",
+  "version": "1.75.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4578,6 +4578,15 @@
               },
               "default": "undefined"
             },
+            {
+              "name": "hasActiveFilters",
+              "description": "If there are any active filters.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "hasDraggableColumns",
               "description": "Toggle the columns draggable events.",
@@ -5133,6 +5142,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-selection-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-selection-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid-static-icon",
           "description": "",
@@ -5812,6 +5829,56 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "decorative-checkbox",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Setting this property to true will disable the checkbox in your form.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "indeterminate",
+              "required": false,
+              "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"
+            },
+            {
+              "name": "checked",
+              "required": false,
+              "description": "Setting this to true will show the checkbox as checked",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "allSelected",
+              "required": false,
+              "description": "Setting this to true will show the checkbox as having all items selected, which shows the double checkmark icon",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/decorative-checkbox/decorative-checkbox.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "dialog-page",
           "description": "",
@@ -6236,253 +6303,294 @@
           "description": "",
           "attributes": [
             {
-              "name": "enableValueLabelPair",
-              "required": false,
-              "description": "Enables value/label value handling. When `true`, the component expects and emits value/label\npair objects instead of primitive values.\n\nThis affects both the `value` prop and the `input` event payload.\n\n- **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n- **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n\nThis is particularly useful when a selected item's label is not available in the `items` prop,\nallowing the component to display the correct label for values loaded from external sources.",
+              "name": "items",
+              "description": "The option elements to populate the avatar dropdown with.\nIt must be an array of {@see BentoAvatarListboxOptions }",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
-            },
+                "type": "BentoAvatarListboxOptions"
+              },
+              "default": "() => []"
+            }
+          ],
+          "events": [
             {
-              "name": "virtualScroll",
-              "required": false,
-              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownVirtulisationOptions"
-              }
+              "name": "input",
+              "description": "Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model."
             },
             {
-              "name": "value",
-              "required": false,
-              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxSelectedValue"
-              }
+              "name": "show-more",
+              "description": "Emitted when:\n- `lazyLoad` is `automatic` and the scroll meets the end of the list\n- `lazyload` is `button` and the button is clicked"
             },
             {
-              "name": "staticCategories",
-              "required": false,
-              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "name": "open",
+              "description": "Emitted when the dropdown is opened."
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-base-textbox",
+          "description": "",
+          "attributes": [
+            {
+              "name": "additionalItemsSelected",
+              "description": "The number of additional items that have been selected in the dropdown.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "number | string"
+              },
+              "default": "0"
             },
             {
-              "name": "size",
-              "required": false,
+              "name": "alwaysComboboxIsInput",
+              "description": "If the combobox DOM element should be an `input` element.",
               "value": {
                 "kind": "expression",
-                "type": "union"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "showSlotContentInMultiple",
-              "required": false,
-              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
+              "name": "ariaControls",
+              "required": true,
+              "description": "Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "search",
-              "required": false,
-              "description": "Dropdown search options and events.",
+              "name": "ariaExpanded",
+              "required": true,
+              "description": "Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownSearchOptions"
+                "type": "Booleanish"
               }
             },
             {
-              "name": "multiple",
-              "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
+              "name": "ariaLabel",
+              "description": "If no label element is used then the aria-label is be set should be set.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "lazyLoadType",
-              "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "name": "ariaLabelledby",
+              "description": "Corresponds to the label's id that labels the textbox element.",
               "value": {
                 "kind": "expression",
-                "type": "union"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "componentLoading",
-              "required": false,
-              "description": "Indicates that dropdown items are loading",
+              "name": "debounceTime",
+              "description": "Custom debounce time for the user type event.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "number"
+              },
+              "default": "300"
             },
             {
-              "name": "loading",
-              "required": false,
-              "description": "Indicates if new options are lazy loading.",
+              "name": "disabled",
+              "description": "Disables any textbox functionality",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "isOptionDisabled",
-              "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
+              "name": "displayValue",
+              "description": "Selected option's label",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "hasMoreItems",
-              "required": false,
-              "description": "Indicates whether there are more items to load",
+              "name": "dynamicFiltering",
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "error",
-              "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
+              "name": "isInvalid",
+              "description": "Marks the textbox as invalid, rendering an error state",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "dynamicFiltering",
-              "required": false,
-              "description": "Sets the possibility to type into the textbox.",
+              "name": "multiple",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "emptyState",
-              "required": false,
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "name": "open",
+              "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "condensed",
-              "required": false,
-              "description": "Renders the dropdown with a condensed style.",
+              "name": "readonly",
+              "description": "Sets the dropdown to readonly state",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "ariaLabel",
-              "required": false,
+              "name": "value",
+              "description": "The input value",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "''"
             },
             {
-              "name": "description",
-              "required": false,
-              "description": "If set, displays a description text for the input.",
+              "name": "selectedValueItem",
+              "description": "The selected value's list box item.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "BentoListboxOptionItem | Array<BentoListboxOptionItem>"
+              },
+              "default": "undefined"
             },
             {
-              "name": "disabled",
-              "required": false,
-              "description": "If true, disables user interaction with the field.",
+              "name": "showSlotContentInMultiple",
+              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              }
+              },
+              "default": "false"
             },
             {
-              "name": "errorMessage",
-              "required": false,
-              "description": "If set, displays an error message and applies error styling to the field.",
+              "name": "size",
+              "description": "Dropdown size",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
-            },
+                "type": "BentoDropdownSize | `${BentoDropdownSize}`"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
             {
-              "name": "label",
-              "required": false,
-              "description": "The text label displayed for the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
+              "name": "<undefined>"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
             },
             {
-              "name": "optional",
-              "required": false,
-              "description": "If true, indicates that the field is optional.",
+              "name": "icon"
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-click-outside-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "items",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoDropdown.props.items"
               }
             },
             {
-              "name": "placeholder",
-              "required": false,
-              "description": "The placeholder text displayed when the field is empty.",
+              "name": "multiple",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDropdown.props.multiple"
               }
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/__tests__/dropdown-click-outside-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-country",
+          "description": "",
+          "attributes": [
             {
-              "name": "readonly",
-              "required": false,
-              "description": "If true, makes the field's value readonly, preventing user modification.",
+              "name": "items",
+              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCountryListboxOptions }\n * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n * @property {BentoCountryCode | string} value.value - Country code of the option",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "BentoCountryListboxOptions"
+              },
+              "default": "() => []"
             },
             {
-              "name": "required",
-              "required": false,
-              "description": "If true, indicates that the field is required.",
+              "name": "variant",
+              "description": "Which label variant to display.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "BentoCountryVariant | `${BentoCountryVariant}`"
+              },
+              "default": "BentoCountryVariant.CUSTOM"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model."
             },
             {
-              "name": "tooltipText",
-              "required": false,
-              "description": "If set, displays an info icon with this tooltip message next to the label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
+              "name": "show-more",
+              "description": "Emitted when:\n- `lazyLoad` is `automatic` and the scroll meets the end of the list\n- `lazyload` is `button` and the button is clicked"
             },
+            {
+              "name": "open",
+              "description": "Emitted when the dropdown is opened."
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-currency",
+          "description": "",
+          "attributes": [
             {
               "name": "items",
-              "required": false,
-              "description": "The option elements to populate the avatar dropdown with.\nIt must be an array of {@see BentoAvatarListboxOptions }",
+              "description": "The option elements to populate the currency dropdown with.\nIt must be an array of {@see BentoCurrencyListboxOptions }",
               "value": {
                 "kind": "expression",
-                "type": "BentoAvatarListboxOptions"
+                "type": "BentoCurrencyListboxOptions"
               },
               "default": "() => []"
             }
@@ -6502,12 +6610,12 @@
             }
           ],
           "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue",
+            "module": "./src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "dropdown-base-textbox",
+          "name": "dropdown-default-textbox",
           "description": "",
           "attributes": [
             {
@@ -6519,15 +6627,6 @@
               },
               "default": "0"
             },
-            {
-              "name": "alwaysComboboxIsInput",
-              "description": "If the combobox DOM element should be an `input` element.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "ariaControls",
               "required": true,
@@ -6564,9 +6663,18 @@
               },
               "default": "null"
             },
+            {
+              "name": "condensed",
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "debounceTime",
-              "description": "Custom debounce time for the user type event.",
+              "description": "Custom debounce time. Default: 300",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -6593,7 +6701,7 @@
             },
             {
               "name": "dynamicFiltering",
-              "description": "Sets the possibility to type into the textbox.",
+              "description": "Sets the possibility to type into the textbox",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6609,14 +6717,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "multiple",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "open",
               "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
@@ -6635,15 +6735,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "value",
-              "description": "The input value",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "''"
-            },
             {
               "name": "selectedValueItem",
               "description": "The selected value's list box item.",
@@ -6663,601 +6754,93 @@
               "default": "false"
             },
             {
-              "name": "size",
-              "description": "Dropdown size",
+              "name": "value",
+              "description": "The input value",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownSize | `${BentoDropdownSize}`"
+                "type": "string"
               },
-              "default": "null"
+              "default": "''"
+            },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
             {
-              "name": "<undefined>"
+              "name": "clear",
+              "description": "Emitted on clearing the input."
+            },
+            {
+              "name": "close",
+              "description": "Emitted on click, space and enter user events. It will open the dropdown."
+            },
+            {
+              "name": "input",
+              "description": "Emitted on input event."
+            },
+            {
+              "name": "keydown",
+              "description": "Emitted on keydown event."
+            },
+            {
+              "name": "open",
+              "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
             }
           ],
           "slots": [
             {
-              "name": "default"
-            },
-            {
-              "name": "icon"
+              "name": "innerSlot"
             }
           ],
           "source": {
-            "module": "./src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue",
+            "module": "./src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "dropdown-click-outside-stub",
+          "name": "dropdown-lazy-load-stub",
           "description": "",
-          "attributes": [
-            {
-              "name": "items",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdown.props.items"
-              }
-            },
-            {
-              "name": "multiple",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdown.props.multiple"
-              }
-            }
-          ],
           "source": {
-            "module": "./src/components/dropdown/__tests__/dropdown-click-outside-stub.vue",
+            "module": "./src/components/dropdown/__tests__/dropdown-lazy-load-stub.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "dropdown-country",
+          "name": "dropdown-options-container",
           "description": "",
           "attributes": [
             {
-              "name": "items",
-              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCountryListboxOptions }\n * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n * @property {BentoCountryCode | string} value.value - Country code of the option",
+              "name": "ariaLabel",
+              "description": "Defines a string value that labels an interactive element.",
               "value": {
                 "kind": "expression",
-                "type": "BentoCountryListboxOptions"
+                "type": "string"
               },
-              "default": "() => []"
+              "default": "null"
             },
             {
-              "name": "variant",
-              "description": "Which label variant to display.",
+              "name": "componentLoading",
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
-                "type": "BentoCountryVariant | `${BentoCountryVariant}`"
+                "type": "boolean"
               },
-              "default": "BentoCountryVariant.CUSTOM"
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
-              "description": "Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model."
+              "default": "false"
             },
             {
-              "name": "show-more",
-              "description": "Emitted when:\n- `lazyLoad` is `automatic` and the scroll meets the end of the list\n- `lazyload` is `button` and the button is clicked"
-            },
-            {
-              "name": "open",
-              "description": "Emitted when the dropdown is opened."
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-currency",
-          "description": "",
-          "attributes": [
-            {
-              "name": "enableValueLabelPair",
-              "required": false,
-              "description": "Enables value/label value handling. When `true`, the component expects and emits value/label\npair objects instead of primitive values.\n\nThis affects both the `value` prop and the `input` event payload.\n\n- **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n- **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n\nThis is particularly useful when a selected item's label is not available in the `items` prop,\nallowing the component to display the correct label for values loaded from external sources.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "virtualScroll",
-              "required": false,
-              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownVirtulisationOptions"
-              }
-            },
-            {
-              "name": "value",
-              "required": false,
-              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxSelectedValue"
-              }
-            },
-            {
-              "name": "staticCategories",
-              "required": false,
-              "description": "If enabled, dropdown will display non-selectable, static categories",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "size",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
-            {
-              "name": "showSlotContentInMultiple",
-              "required": false,
-              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "search",
-              "required": false,
-              "description": "Dropdown search options and events.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownSearchOptions"
-              }
-            },
-            {
-              "name": "multiple",
-              "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "lazyLoadType",
-              "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
-            {
-              "name": "componentLoading",
-              "required": false,
-              "description": "Indicates that dropdown items are loading",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "loading",
-              "required": false,
-              "description": "Indicates if new options are lazy loading.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "isOptionDisabled",
-              "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
-              }
-            },
-            {
-              "name": "hasMoreItems",
-              "required": false,
-              "description": "Indicates whether there are more items to load",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "error",
-              "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "dynamicFiltering",
-              "required": false,
-              "description": "Sets the possibility to type into the textbox.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "emptyState",
-              "required": false,
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
-              }
-            },
-            {
-              "name": "condensed",
-              "required": false,
-              "description": "Renders the dropdown with a condensed style.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "ariaLabel",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "description",
-              "required": false,
-              "description": "If set, displays a description text for the input.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "disabled",
-              "required": false,
-              "description": "If true, disables user interaction with the field.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "errorMessage",
-              "required": false,
-              "description": "If set, displays an error message and applies error styling to the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": false,
-              "description": "The text label displayed for the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "optional",
-              "required": false,
-              "description": "If true, indicates that the field is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "placeholder",
-              "required": false,
-              "description": "The placeholder text displayed when the field is empty.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "readonly",
-              "required": false,
-              "description": "If true, makes the field's value readonly, preventing user modification.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "required",
-              "required": false,
-              "description": "If true, indicates that the field is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "If set, displays an info icon with this tooltip message next to the label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "items",
-              "required": false,
-              "description": "The option elements to populate the currency dropdown with.\nIt must be an array of {@see BentoCurrencyListboxOptions }",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCurrencyListboxOptions"
-              },
-              "default": "() => []"
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
-              "description": "Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model."
-            },
-            {
-              "name": "show-more",
-              "description": "Emitted when:\n- `lazyLoad` is `automatic` and the scroll meets the end of the list\n- `lazyload` is `button` and the button is clicked"
-            },
-            {
-              "name": "open",
-              "description": "Emitted when the dropdown is opened."
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-default-textbox",
-          "description": "",
-          "attributes": [
-            {
-              "name": "additionalItemsSelected",
-              "description": "The number of additional items that have been selected in the dropdown.",
-              "value": {
-                "kind": "expression",
-                "type": "number | string"
-              },
-              "default": "0"
-            },
-            {
-              "name": "ariaControls",
-              "required": true,
-              "description": "Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "ariaExpanded",
-              "required": true,
-              "description": "Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.",
-              "value": {
-                "kind": "expression",
-                "type": "Booleanish"
-              }
-            },
-            {
-              "name": "ariaLabel",
-              "description": "If no label element is used then the aria-label is be set should be set.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "ariaLabelledby",
-              "description": "Corresponds to the label's id that labels the textbox element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "condensed",
-              "description": "Renders the dropdown with a condensed style.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "debounceTime",
-              "description": "Custom debounce time. Default: 300",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
-            },
-            {
-              "name": "disabled",
-              "description": "Disables any textbox functionality",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "displayValue",
-              "description": "Selected option's label",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "dynamicFiltering",
-              "description": "Sets the possibility to type into the textbox",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "isInvalid",
-              "description": "Marks the textbox as invalid, rendering an error state",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "open",
-              "description": "Indicates if the dropdown is open so that\nthe respective event can be emitted",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "readonly",
-              "description": "Sets the dropdown to readonly state",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "selectedValueItem",
-              "description": "The selected value's list box item.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxOptionItem | Array<BentoListboxOptionItem>"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "showSlotContentInMultiple",
-              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "value",
-              "description": "The input value",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "''"
-            },
-            {
-              "name": "multiple",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "events": [
-            {
-              "name": "clear",
-              "description": "Emitted on clearing the input."
-            },
-            {
-              "name": "close",
-              "description": "Emitted on click, space and enter user events. It will open the dropdown."
-            },
-            {
-              "name": "input",
-              "description": "Emitted on input event."
-            },
-            {
-              "name": "keydown",
-              "description": "Emitted on keydown event."
-            },
-            {
-              "name": "open",
-              "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
-            }
-          ],
-          "slots": [
-            {
-              "name": "innerSlot"
-            }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-lazy-load-stub",
-          "description": "",
-          "source": {
-            "module": "./src/components/dropdown/__tests__/dropdown-lazy-load-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-options-container",
-          "description": "",
-          "attributes": [
-            {
-              "name": "ariaLabel",
-              "description": "Defines a string value that labels an interactive element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "componentLoading",
-              "description": "Indicates that dropdown items are loading",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "emptyState",
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
-              },
-              "default": "undefined"
+              "name": "emptyState",
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownEmptyStateProps"
+              },
+              "default": "undefined"
             },
             {
               "name": "disabled",
@@ -7452,254 +7035,12 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "dropdown-payment-method",
-          "description": "",
-          "attributes": [
-            {
-              "name": "enableValueLabelPair",
-              "required": false,
-              "description": "Enables value/label value handling. When `true`, the component expects and emits value/label\npair objects instead of primitive values.\n\nThis affects both the `value` prop and the `input` event payload.\n\n- **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n- **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n\nThis is particularly useful when a selected item's label is not available in the `items` prop,\nallowing the component to display the correct label for values loaded from external sources.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "virtualScroll",
-              "required": false,
-              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownVirtulisationOptions"
-              }
-            },
-            {
-              "name": "value",
-              "required": false,
-              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxSelectedValue"
-              }
-            },
-            {
-              "name": "staticCategories",
-              "required": false,
-              "description": "If enabled, dropdown will display non-selectable, static categories",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "size",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
-            {
-              "name": "showSlotContentInMultiple",
-              "required": false,
-              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "search",
-              "required": false,
-              "description": "Dropdown search options and events.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownSearchOptions"
-              }
-            },
-            {
-              "name": "multiple",
-              "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "lazyLoadType",
-              "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
-            {
-              "name": "componentLoading",
-              "required": false,
-              "description": "Indicates that dropdown items are loading",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "loading",
-              "required": false,
-              "description": "Indicates if new options are lazy loading.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "isOptionDisabled",
-              "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
-              }
-            },
-            {
-              "name": "hasMoreItems",
-              "required": false,
-              "description": "Indicates whether there are more items to load",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "error",
-              "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "dynamicFiltering",
-              "required": false,
-              "description": "Sets the possibility to type into the textbox.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "emptyState",
-              "required": false,
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
-              }
-            },
-            {
-              "name": "condensed",
-              "required": false,
-              "description": "Renders the dropdown with a condensed style.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "ariaLabel",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "description",
-              "required": false,
-              "description": "If set, displays a description text for the input.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "disabled",
-              "required": false,
-              "description": "If true, disables user interaction with the field.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "errorMessage",
-              "required": false,
-              "description": "If set, displays an error message and applies error styling to the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": false,
-              "description": "The text label displayed for the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "optional",
-              "required": false,
-              "description": "If true, indicates that the field is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "placeholder",
-              "required": false,
-              "description": "The placeholder text displayed when the field is empty.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "readonly",
-              "required": false,
-              "description": "If true, makes the field's value readonly, preventing user modification.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "required",
-              "required": false,
-              "description": "If true, indicates that the field is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "If set, displays an info icon with this tooltip message next to the label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
+        {
+          "name": "dropdown-payment-method",
+          "description": "",
+          "attributes": [
             {
               "name": "items",
-              "required": false,
               "description": "The option elements to populate the payment method dropdown with.\nIt must be an array of {@see BentoPaymentMethodListboxOptions }",
               "value": {
                 "kind": "expression",
@@ -7908,260 +7249,18 @@
               "name": "open",
               "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
             }
-          ],
-          "source": {
-            "module": "./src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown-tag",
-          "description": "",
-          "attributes": [
-            {
-              "name": "enableValueLabelPair",
-              "required": false,
-              "description": "Enables value/label value handling. When `true`, the component expects and emits value/label\npair objects instead of primitive values.\n\nThis affects both the `value` prop and the `input` event payload.\n\n- **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n- **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n\nThis is particularly useful when a selected item's label is not available in the `items` prop,\nallowing the component to display the correct label for values loaded from external sources.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "virtualScroll",
-              "required": false,
-              "description": "Enables virtual scrolling if set to true or by providing an object with itemHeight function.\nThe itemHeight function is used to calculate the height of rendered item given it's index.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownVirtulisationOptions"
-              }
-            },
-            {
-              "name": "value",
-              "required": false,
-              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxSelectedValue"
-              }
-            },
-            {
-              "name": "staticCategories",
-              "required": false,
-              "description": "If enabled, dropdown will display non-selectable, static categories",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "size",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
-            {
-              "name": "showSlotContentInMultiple",
-              "required": false,
-              "description": "Toggles whether to use the slot content select items shown in the textbox in multiple mode.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "search",
-              "required": false,
-              "description": "Dropdown search options and events.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownSearchOptions"
-              }
-            },
-            {
-              "name": "multiple",
-              "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "lazyLoadType",
-              "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
-            {
-              "name": "componentLoading",
-              "required": false,
-              "description": "Indicates that dropdown items are loading",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "loading",
-              "required": false,
-              "description": "Indicates if new options are lazy loading.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "isOptionDisabled",
-              "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
-              }
-            },
-            {
-              "name": "hasMoreItems",
-              "required": false,
-              "description": "Indicates whether there are more items to load",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "error",
-              "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "dynamicFiltering",
-              "required": false,
-              "description": "Sets the possibility to type into the textbox.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "emptyState",
-              "required": false,
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
-              }
-            },
-            {
-              "name": "condensed",
-              "required": false,
-              "description": "Renders the dropdown with a condensed style.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "ariaLabel",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "description",
-              "required": false,
-              "description": "If set, displays a description text for the input.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "disabled",
-              "required": false,
-              "description": "If true, disables user interaction with the field.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "errorMessage",
-              "required": false,
-              "description": "If set, displays an error message and applies error styling to the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": false,
-              "description": "The text label displayed for the field.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "optional",
-              "required": false,
-              "description": "If true, indicates that the field is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "placeholder",
-              "required": false,
-              "description": "The placeholder text displayed when the field is empty.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "readonly",
-              "required": false,
-              "description": "If true, makes the field's value readonly, preventing user modification.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "required",
-              "required": false,
-              "description": "If true, indicates that the field is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "If set, displays an info icon with this tooltip message next to the label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
+          ],
+          "source": {
+            "module": "./src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown-tag",
+          "description": "",
+          "attributes": [
             {
               "name": "items",
-              "required": false,
               "description": "The option elements to populate the tag dropdown with.\nIt must be an array of {@see BentoTagListboxOptions }",
               "value": {
                 "kind": "expression",
@@ -9032,25 +8131,169 @@
           "name": "filter-bar-custom-filter-sub-component-single-value-example",
           "description": "",
           "attributes": [
+            {
+              "name": "value",
+              "required": true,
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "CustomValue"
+              }
+            },
+            {
+              "name": "options",
+              "required": false,
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
+              "value": {
+                "kind": "expression",
+                "type": "CustomOptions"
+              }
+            },
+            {
+              "name": "onlySlot",
+              "required": false,
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "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": "defaultValue",
+              "required": false,
+              "description": "Default value of the filter to reset to.",
               "value": {
                 "kind": "expression",
-                "type": "any"
+                "type": "CustomValue"
               },
               "default": "null"
             },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the filter from being interacted with.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "update",
+              "description": "Used in the Filter Bar"
+            },
+            {
+              "name": "input",
+              "description": "Used in the All filters modal"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-single-value-example.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-custom-filter-sub-component-with-popover-example",
+          "description": "",
+          "attributes": [
+            {
+              "name": "value",
+              "required": true,
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "CustomValue"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "options",
+              "required": false,
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
+              "value": {
+                "kind": "expression",
+                "type": "CustomOptions"
+              }
+            },
             {
               "name": "onlySlot",
+              "required": false,
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
               "value": {
                 "kind": "expression",
-                "type": "any"
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "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": "defaultValue",
+              "required": false,
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "CustomValue"
               },
-              "default": "false"
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the filter from being interacted with.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "update",
+              "description": "Used in the Filter Bar"
+            },
+            {
+              "name": "input",
+              "description": "Used in the All filters modal"
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-single-value-example.vue",
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-with-popover-example.vue",
             "symbol": "default"
           }
         },
@@ -10112,29 +9355,29 @@
           "description": "",
           "attributes": [
             {
-              "name": "ariaHidden",
+              "name": "tooltipText",
               "required": false,
-              "description": "Indicates whether the element is exposed to an accessibility API.",
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "true"
+              "default": "null"
             },
             {
-              "name": "ariaLabel",
+              "name": "required",
               "required": false,
-              "description": "Text that labels an the input element",
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             },
             {
-              "name": "condensed",
+              "name": "readonly",
               "required": false,
-              "description": "Reduces height of the input",
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -10142,9 +9385,19 @@
               "default": "false"
             },
             {
-              "name": "disabled",
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "optional",
               "required": false,
-              "description": "Disables the possibility of changing value in the input-field",
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -10152,29 +9405,29 @@
               "default": "false"
             },
             {
-              "name": "dropdown",
+              "name": "label",
               "required": false,
-              "description": "Dropdown props for the small selectable dropdown menu.\nProperties supported:\n\n - `aria-label`: Text that labels the dropdown element\n - `dynamicFiltering`: Enables dynamic filtering\n - `items`: List of available items\n - `readonly`: Sets the dropdown in read-only mode\n - `value`: Selected value of the dropdown",
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputDropdownProps"
+                "type": "string"
               },
-              "default": "undefined"
+              "default": "''"
             },
             {
-              "name": "dropdownPosition",
+              "name": "errorMessage",
               "required": false,
-              "description": "Position of the dropdown before or after input value",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "string"
               },
-              "default": "BentoInputFieldElementPosition.START"
+              "default": "null"
             },
             {
-              "name": "error",
+              "name": "disabled",
               "required": false,
-              "description": "Adds error validation class for outlining input-field.",
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -10182,39 +9435,39 @@
               "default": "false"
             },
             {
-              "name": "errorMessage",
+              "name": "description",
               "required": false,
-              "description": "Renders input-field with an error state and the error message beneath the input box",
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "null"
+              "default": "''"
             },
             {
-              "name": "optional",
+              "name": "ariaHidden",
               "required": false,
-              "description": "Highlights the dropdown is optional.",
+              "description": "Indicates whether the element is exposed to an accessibility API.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "false"
+              "default": "true"
             },
             {
-              "name": "placeholder",
+              "name": "ariaLabel",
               "required": false,
-              "description": "Text displayed as the placeholder of the input-field",
+              "description": "Text that labels an the input element",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "''"
+              "default": "undefined"
             },
             {
-              "name": "required",
+              "name": "condensed",
               "required": false,
-              "description": "When present, indicates that the user must specify a value for the input before the owning form can be submitted.\nThe `required` attribute is supported by input types like `text`, `search`, and `number`.",
+              "description": "Reduces height of the input",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -10222,9 +9475,29 @@
               "default": "false"
             },
             {
-              "name": "readonly",
+              "name": "dropdown",
+              "required": false,
+              "description": "Dropdown props for the small selectable dropdown menu.\nProperties supported:\n\n - `aria-label`: Text that labels the dropdown element\n - `dynamicFiltering`: Enables dynamic filtering\n - `items`: List of available items\n - `readonly`: Sets the dropdown in read-only mode\n - `value`: Selected value of the dropdown",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputDropdownProps"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "dropdownPosition",
+              "required": false,
+              "description": "Position of the dropdown before or after input value",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoInputFieldElementPosition.START"
+            },
+            {
+              "name": "error",
               "required": false,
-              "description": "Setting this property to true will set the input field to read only state.",
+              "description": "Adds error validation class for outlining input-field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -10257,19 +9530,9 @@
               "description": "Position of Static Value before or after input value",
               "value": {
                 "kind": "expression",
-                "type": "union"
-              },
-              "default": "BentoInputFieldElementPosition.START"
-            },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
-              "default": "null"
+              "default": "BentoInputFieldElementPosition.START"
             },
             {
               "name": "type",
@@ -10373,69 +9636,99 @@
           "description": "",
           "attributes": [
             {
-              "name": "condensed",
+              "name": "tooltipText",
               "required": false,
-              "description": "Reduces height of the input",
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "string"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "name": "debounceTime",
+              "name": "required",
               "required": false,
-              "description": "The debounce time in milliseconds for running validation and emitting the `input` event after the user has stopped typing.\nThis helps to avoid excessive validation checks on every keystroke. Defaults to `500`.",
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "boolean"
               },
-              "default": "DEBOUNCE_DURATION"
+              "default": "false"
             },
             {
-              "name": "disabled",
+              "name": "readonly",
               "required": false,
-              "description": "Disables the possibility of changing value in the input-field",
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "boolean"
               },
               "default": "false"
             },
             {
-              "name": "disableValidation",
+              "name": "placeholder",
               "required": false,
-              "description": "Performs real-time validations over the input value. Default: `false`.\nDisabling the option (set to `true`) will not run pre-defined validations or custom validations defined in the `validation` field.",
+              "description": "The placeholder text displayed when the field is empty.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "optional",
+              "required": false,
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
             },
+            {
+              "name": "label",
+              "required": false,
+              "description": "The text label displayed for the field.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
             {
               "name": "errorMessage",
               "required": false,
-              "description": "Renders input-field with an error state and the error message beneath the input box",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "string"
               },
               "default": "null"
             },
             {
-              "name": "placeholder",
+              "name": "disabled",
               "required": false,
-              "description": "Text displayed as the placeholder of the input-field",
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "boolean"
               },
-              "default": "''"
+              "default": "false"
             },
             {
-              "name": "readonly",
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "condensed",
               "required": false,
-              "description": "Setting this property to true will set the input field to read only state.",
+              "description": "Reduces height of the input",
               "value": {
                 "kind": "expression",
                 "type": "TSIndexedAccessType"
@@ -10443,24 +9736,34 @@
               "default": "false"
             },
             {
-              "name": "value",
+              "name": "debounceTime",
               "required": false,
-              "description": "Text displayed as the value of the input-field",
+              "description": "The debounce time in milliseconds for running validation and emitting the `input` event after the user has stopped typing.\nThis helps to avoid excessive validation checks on every keystroke. Defaults to `500`.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "number"
               },
-              "default": "undefined"
+              "default": "DEBOUNCE_DURATION"
             },
             {
-              "name": "label",
+              "name": "disableValidation",
               "required": false,
-              "description": "Label to be shown with the input field",
+              "description": "Performs real-time validations over the input value. Default: `false`.\nDisabling the option (set to `true`) will not run pre-defined validations or custom validations defined in the `validation` field.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "Text displayed as the value of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "undefined"
             },
             {
               "name": "validation",
@@ -10505,6 +9808,14 @@
               "description": "Emits an `input` event whenever the value in the input is changed."
             }
           ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "description"
+            }
+          ],
           "source": {
             "module": "./src/components/input-field-password/input-field-password.vue",
             "symbol": "default"
@@ -11122,46 +10433,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "listbox-decorative-checkbox",
-          "description": "",
-          "attributes": [
-            {
-              "name": "disabled",
-              "required": false,
-              "description": "Setting this property to true will disable the checkbox in your form.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "indeterminate",
-              "required": false,
-              "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"
-            },
-            {
-              "name": "checked",
-              "required": false,
-              "description": "Setting this to true will show the checkbox as checked",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/listbox/components/listbox-multi-select/components/listbox-decorative-checkbox/listbox-decorative-checkbox.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "listbox-multi-select",
           "description": "",
@@ -14741,8 +14012,9 @@
           "description": "",
           "attributes": [
             {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the label.",
+              "name": "tooltipText",
+              "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -14750,8 +14022,9 @@
               "default": "null"
             },
             {
-              "name": "disabled",
-              "description": "If set to true, renders all cards in the group in a disabled state.",
+              "name": "required",
+              "required": false,
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -14759,115 +14032,136 @@
               "default": "false"
             },
             {
-              "name": "errorMessage",
-              "description": "Renders all cards in an error state with an error message.",
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
             },
             {
-              "name": "formId",
-              "description": "The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.",
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "null"
+              }
             },
             {
-              "name": "hideLabel",
-              "description": "Shows/hides the group label.",
+              "name": "optional",
+              "required": false,
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
             },
             {
               "name": "label",
-              "required": true,
-              "description": "Label of the group. Required for accessibility purposes, even if it's not shown",
+              "required": false,
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "null"
             },
             {
-              "name": "layout",
-              "description": "The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.",
+              "name": "errorMessage",
+              "required": false,
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectionCardGroupLayout"
+                "type": "string"
               },
-              "default": "'vertical'"
+              "default": "null"
             },
             {
-              "name": "items",
-              "required": true,
-              "description": "The selection card group's items.",
+              "name": "disabled",
+              "required": false,
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
-                "type": "Array<BentoSelectionCardItem>"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "itemsPerRow",
-              "description": "Sets the responsive number of items rendered in each row.",
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectionCardGroupItemsPerRow"
+                "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
-              "name": "modelValue",
-              "description": "Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.\nDefaults to no value selected.",
+              "name": "formId",
+              "required": false,
+              "description": "The form id the selection card group is associated with. Defaults to null, as a selection card group can also be\nused standalone.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectionCardModelValue"
+                "type": "string"
               },
               "default": "null"
             },
             {
-              "name": "optional",
-              "description": "Indicates the field is optional.",
+              "name": "hideLabel",
+              "required": false,
+              "description": "Shows/hides the group label.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "name": "required",
-              "description": "Indicates the field is required.",
+              "name": "layout",
+              "required": false,
+              "description": "The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoSelectionCardGroupLayout"
               },
-              "default": "false"
+              "default": "'vertical'"
             },
             {
-              "name": "tooltipText",
-              "description": "Tooltip message.",
+              "name": "items",
+              "required": true,
+              "description": "The selection card group's items.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "Array"
+              }
+            },
+            {
+              "name": "itemsPerRow",
+              "required": false,
+              "description": "Sets the responsive number of items rendered in each row.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectionCardGroupItemsPerRow"
               },
-              "default": "null"
+              "default": "undefined"
             },
             {
-              "name": "readonly",
-              "description": "If set to true, renders all cards in the group in a readonly state.",
+              "name": "modelValue",
+              "required": false,
+              "description": "Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoSelectionCardModelValue"
               },
-              "default": "false"
+              "default": "null"
             },
             {
               "name": "variant",
+              "required": false,
               "description": "Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.",
               "value": {
                 "kind": "expression",