@adyen/bento-vue2 1.72.0 → 1.74.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.72.0",
+  "version": "1.74.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -515,6 +515,169 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "base-filter",
+          "description": "",
+          "attributes": [
+            {
+              "name": "appliedFiltersCount",
+              "required": false,
+              "description": "Total count of applied filters",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "buttonLabel",
+              "required": false,
+              "description": "Overrides the label of the popover visibility toggle button text.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "buttonSecondaryLabel",
+              "required": false,
+              "description": "Sets the secondary label text of the popover visibility toggle button text.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the filter from being interacted with.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "defaultValue",
+              "required": false,
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "Value"
+              },
+              "default": "null"
+            },
+            {
+              "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": "controlled",
+              "required": false,
+              "description": "Allows to handle the controls (apply/clear) from outside\nof the component",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disableApplyButton",
+              "required": false,
+              "description": "Disable the \"apply\" button",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disableSecondaryButton",
+              "required": false,
+              "description": "Disable the secondary button action.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "Field"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "fitContent",
+              "required": false,
+              "description": "Sets the size of the container to fit its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "tooltipText",
+              "required": false,
+              "description": "Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "tooltipPosition",
+              "required": false,
+              "description": "Position the tooltip should take if space is available.",
+              "value": {
+                "kind": "expression",
+                "type": "TSLiteralType"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "The current value of the filter, used for v-model.",
+              "value": {
+                "kind": "expression",
+                "type": "Value"
+              },
+              "default": "undefined"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/base-filter/base-filter.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "base-filter-button",
           "description": "A filter button used as a base to extend all sorts of filter buttons.\nUsed in the bento-filter-bar and all-filter-modals components.",
@@ -720,155 +883,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-base-filter",
-          "description": "",
-          "attributes": [
-            {
-              "name": "appliedFiltersCount",
-              "description": "Total count of applied filters",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              },
-              "default": "null"
-            },
-            {
-              "name": "buttonLabel",
-              "description": "Overrides the label of the popover visibility toggle button text.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "buttonSecondaryLabel",
-              "description": "Sets the secondary label text of the popover visibility toggle button text.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the filter from being interacted with.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "defaultValue",
-              "description": "Default value of the filter to reset to.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoFilterBarValue"
-              },
-              "default": "null"
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "controlled",
-              "description": "Allows to handle the controls (apply/clear) from outside\nof the component",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "disableApplyButton",
-              "description": "Disable the \"apply\" button",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "disableSecondaryButton",
-              "description": "Disable the secondary button action.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "field",
-              "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": true,
-              "description": "Label text to be displayed",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "fitContent",
-              "description": "Sets the size of the container to fit its content",
-              "value": {
-                "kind": "expression",
-                "type": "BentoPopover.props.fitContent"
-              }
-            },
-            {
-              "name": "tooltipText",
-              "description": "Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "tooltipPosition",
-              "description": "Position the tooltip should take if space is available.",
-              "value": {
-                "kind": "expression",
-                "type": "`${BentoTooltipPosition}`"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "value",
-              "description": "The current value of the filter, used for v-model.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoFilterBarValue"
-              },
-              "default": "undefined"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/base-filter/base-filter.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-boolean-filter",
           "description": "Example description of the component...",
@@ -1066,68 +1080,31 @@
           "name": "bento-checkbox-group-slot-stub",
           "description": "",
           "attributes": [
-            {
-              "name": "items",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCheckboxGroup.props.items"
-              }
-            },
-            {
-              "name": "label",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCheckboxGroup.props.label"
-              }
-            },
-            {
-              "name": "modelValue",
-              "value": {
-                "kind": "expression",
-                "type": "Array<number | string | null>"
-              },
-              "default": "() => []"
-            }
-          ],
-          "source": {
-            "module": "./src/components/checkbox/components/checkbox-group/__tests__/bento-checkbox-group-slot-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-country",
-          "description": "A component to display a country's label.\nThe label comes in four variates: iso code, country name, phone number code or capital city.",
-          "attributes": [
-            {
-              "name": "code",
-              "description": "Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).",
+            {
+              "name": "items",
               "value": {
                 "kind": "expression",
-                "type": "BentoCountryCode | `${BentoCountryCode}`"
-              },
-              "default": "BentoCountryCode.UNKNOWN"
+                "type": "BentoCheckboxGroup.props.items"
+              }
             },
             {
               "name": "label",
-              "description": "Custom label text.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
+                "type": "BentoCheckboxGroup.props.label"
+              }
             },
             {
-              "name": "variant",
-              "description": "Which label variant to display.",
+              "name": "modelValue",
               "value": {
                 "kind": "expression",
-                "type": "BentoCountryVariant | `${BentoCountryVariant}`"
+                "type": "Array<number | string | null>"
               },
-              "default": "BentoCountryVariant.NAME"
+              "default": "() => []"
             }
           ],
           "source": {
-            "module": "./src/components/country/country.vue",
+            "module": "./src/components/checkbox/components/checkbox-group/__tests__/bento-checkbox-group-slot-stub.vue",
             "symbol": "default"
           }
         },
@@ -1141,7 +1118,7 @@
               "description": "Column definitions",
               "value": {
                 "kind": "expression",
-                "type": "BentoColumn[]"
+                "type": "Array<BentoColumn>"
               }
             },
             {
@@ -1285,147 +1262,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-date-picker",
-          "description": "Date picker selector.",
-          "attributes": [
-            {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "disabled",
-              "description": "Disables dropdown functionality.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "errorMessage",
-              "description": "Displays component in an error state with an error message",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "firstDayOfWeek",
-              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
-              "value": {
-                "kind": "expression",
-                "type": "Calendar.props.firstDayOfWeek"
-              }
-            },
-            {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
-              "value": {
-                "kind": "expression",
-                "type": "Calendar.props.isDateDisabled"
-              }
-            },
-            {
-              "name": "min",
-              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
-              "value": {
-                "kind": "expression",
-                "type": "Calendar.props.min"
-              }
-            },
-            {
-              "name": "max",
-              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
-              "value": {
-                "kind": "expression",
-                "type": "Calendar.props.max"
-              }
-            },
-            {
-              "name": "label",
-              "description": "Text that is displayed as a label above the element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "optional",
-              "description": "Highlights the dropdown is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "readonly",
-              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "required",
-              "description": "Highlights the dropdown is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "tooltipText",
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "value",
-              "description": "Selected date",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDatePickerValue"
-              },
-              "default": "null"
-            },
-            {
-              "name": "variant",
-              "description": "The type of calendar to display. Defaults to showing days.",
-              "value": {
-                "kind": "expression",
-                "type": "`${BentoDatePickerVariant}`"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "defaultDisplayMonth",
-              "description": "Default start date for the calendar pane",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            }
-          ],
-          "source": {
-            "module": "./src/components/date-picker/date-picker.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-date-range-filter",
           "description": "The Date filter displays a calendar that allows\nto select a single date.",
@@ -1770,7 +1606,7 @@
               "description": "The `input` value.\nProviding an empty array will select no options.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxValue[]"
+                "type": "Array<BentoListboxValue>"
               },
               "default": "() => []"
             },
@@ -1953,43 +1789,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-loading-indicator",
-          "description": "",
-          "attributes": [
-            {
-              "name": "small",
-              "description": "Displays the loading indicator in a small size",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "large",
-              "description": "Displays the loading indicator in a large size",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "inverse",
-              "description": "Displays the loading indicator in a white variant",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/loading-indicator/loading-indicator.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-popover-dismiss-button",
           "description": "",
@@ -2059,7 +1858,7 @@
               "description": "Default value of the filter to reset to.",
               "value": {
                 "kind": "expression",
-                "type": "string[]"
+                "type": "Array<string>"
               },
               "default": "null"
             },
@@ -2086,7 +1885,7 @@
               "description": "Current value of the filter",
               "value": {
                 "kind": "expression",
-                "type": "string[]"
+                "type": "Array<string>"
               },
               "default": "() => ['', '']"
             },
@@ -2289,135 +2088,67 @@
               "default": "null"
             },
             {
-              "name": "status",
-              "description": "Modifier that changes the color of the timeline icon",
-              "value": {
-                "kind": "expression",
-                "type": "`${BentoTimelineStatus}`"
-              },
-              "default": "'black'"
-            },
-            {
-              "name": "tag",
-              "description": "Tag props that will be passed down to inner tag component",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTimelineTagProps"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "timestamp",
-              "required": true,
-              "description": "Main timestamp of the event. Used for timegap detection.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTimelineTimestamp"
-              }
-            },
-            {
-              "name": "title",
-              "description": "Title of the event",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTimelineItemTitle | string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "type",
-              "description": "Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "'milestone'"
-            },
-            {
-              "name": "variant",
-              "description": "Variant for the timeline item",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTimelineItemVariant | `${BentoTimelineItemVariant}`"
-              },
-              "default": "null"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/timeline/components/timeline-item/timeline-item.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-toggle",
-          "description": "A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle",
-          "attributes": [
-            {
-              "name": "ariaLabel",
-              "description": "Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label",
+              "name": "status",
+              "description": "Modifier that changes the color of the timeline icon",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "`${BentoTimelineStatus}`"
               },
-              "default": "undefined"
+              "default": "'black'"
             },
             {
-              "name": "disabled",
-              "description": "Disable the toggle (optional)",
+              "name": "tag",
+              "description": "Tag props that will be passed down to inner tag component",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoTimelineTagProps"
               },
-              "default": "false"
+              "default": "undefined"
             },
             {
-              "name": "labelPosition",
-              "description": "Position of the label relative to the toggle (optional)",
+              "name": "timestamp",
+              "required": true,
+              "description": "Main timestamp of the event. Used for timegap detection.",
               "value": {
                 "kind": "expression",
-                "type": "BentoToggleLabelPosition | `${BentoToggleLabelPosition}`"
-              },
-              "default": "BentoToggleLabelPosition.BEFORE"
+                "type": "BentoTimelineTimestamp"
+              }
             },
             {
-              "name": "readonly",
-              "description": "Setting this property to true will set the toggle to read only state.",
+              "name": "title",
+              "description": "Title of the event",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoTimelineItemTitle | string"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "name": "value",
-              "description": "Indicates if the switch is \"on\" or \"off\"",
+              "name": "type",
+              "description": "Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
-            }
-          ],
-          "events": [
+              "default": "'milestone'"
+            },
             {
-              "name": "input"
+              "name": "variant",
+              "description": "Variant for the timeline item",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTimelineItemVariant | `${BentoTimelineItemVariant}`"
+              },
+              "default": "null"
             }
           ],
           "slots": [
             {
               "name": "default"
-            },
-            {
-              "name": "description"
             }
           ],
           "source": {
-            "module": "./src/components/toggle/toggle.vue",
+            "module": "./src/components/timeline/components/timeline-item/timeline-item.vue",
             "symbol": "default"
           }
         },
@@ -3073,7 +2804,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/internal/calendar/components/calendar-year/components/calendar-year-month.vue/calendar-year-month.vue",
+            "module": "./src/components/internal/calendar/components/calendar-year/components/calendar-year-month/calendar-year-month.vue",
             "symbol": "default"
           }
         },
@@ -3124,7 +2855,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/internal/calendar/components/calendar-year/components/calendar-year-month.vue/__test__/calendar-year-month-stub.vue",
+            "module": "./src/components/internal/calendar/components/calendar-year/components/calendar-year-month/__test__/calendar-year-month-stub.vue",
             "symbol": "default"
           }
         },
@@ -3887,6 +3618,46 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "country",
+          "description": "",
+          "attributes": [
+            {
+              "name": "code",
+              "required": false,
+              "description": "Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCountryCode.UNKNOWN"
+            },
+            {
+              "name": "label",
+              "required": false,
+              "description": "Custom label text.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Which label variant to display.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCountryVariant.NAME"
+            }
+          ],
+          "source": {
+            "module": "./src/components/country/country.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "currency",
           "description": "",
@@ -4089,7 +3860,7 @@
               "description": "Column definitions using 'key' to relate to data object.",
               "value": {
                 "kind": "expression",
-                "type": "BentoColumn[]"
+                "type": "Array<BentoColumn>"
               }
             },
             {
@@ -4232,7 +4003,7 @@
               "description": "Highlighted items",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
+                "type": "Array<BentoDatagridDataItemId>"
               },
               "default": "() => []"
             },
@@ -4292,7 +4063,7 @@
             },
             {
               "name": "selectableAcrossPages",
-              "description": "Adds an extra option when selecting all items that allows user to select items in other pages too.",
+              "description": "Adds an extra option when selecting all items that allows user to select items in other pages too.\nNeeds pagination.totalCount to be set.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4349,7 +4120,7 @@
               "description": "Selected items",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
+                "type": "Array<BentoDatagridDataItemId>"
               },
               "default": "() => []"
             },
@@ -4376,7 +4147,7 @@
               "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridSortByColumn[]"
+                "type": "Array<BentoDatagridSortByColumn>"
               },
               "default": "() => []"
             },
@@ -4450,7 +4221,7 @@
               "description": "The columns sets including",
               "value": {
                 "kind": "expression",
-                "type": "DataGridCellColumnSet[]"
+                "type": "Array<DataGridCellColumnSet>"
               }
             },
             {
@@ -4581,7 +4352,7 @@
               "description": "The IDs of the rows this cell controls to show / hide them.",
               "value": {
                 "kind": "expression",
-                "type": "string[]"
+                "type": "Array<string>"
               },
               "default": "() => []"
             },
@@ -4625,7 +4396,7 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
+                "type": "Array<BentoDatagridDataItemId>"
               }
             }
           ],
@@ -4795,7 +4566,7 @@
               "description": "Column definitions using 'key' to relate to data object.",
               "value": {
                 "kind": "expression",
-                "type": "BentoColumn[]"
+                "type": "Array<BentoColumn>"
               }
             },
             {
@@ -4938,7 +4709,7 @@
               "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridSortByColumn[]"
+                "type": "Array<BentoDatagridSortByColumn>"
               },
               "default": "() => []"
             },
@@ -5085,7 +4856,7 @@
               "description": "The columns sets including",
               "value": {
                 "kind": "expression",
-                "type": "DataGridCellColumnSet[]"
+                "type": "Array<DataGridCellColumnSet>"
               }
             },
             {
@@ -5165,7 +4936,7 @@
               "description": "Highlighted row IDs.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
+                "type": "Array<BentoDatagridDataItemId>"
               },
               "default": "() => []"
             },
@@ -5301,7 +5072,7 @@
               "description": "The array of IDs for the selected rows.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
+                "type": "Array<BentoDatagridDataItemId>"
               }
             },
             {
@@ -5476,21 +5247,183 @@
           }
         },
         {
-          "name": "data-grid.test",
+          "name": "date",
           "description": "",
+          "attributes": [
+            {
+              "name": "date",
+              "required": false,
+              "description": "The date to format. The data can be supplied as:\n- a Date object.\n- a number of milliseconds elapsed since the epoch.\n- a date string e.g. '2023-07-31T10:55:22+02:00'.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "format",
+              "required": false,
+              "description": "The string format of the date to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD"
+            },
+            {
+              "name": "disableTypography",
+              "required": false,
+              "description": "Disable the default typography for the component. Only use this when the component is inside another typography",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
           "source": {
-            "module": "./src/components/data-grid/data-grid.test.vue",
+            "module": "./src/components/date/date.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "date",
+          "name": "date-picker",
           "description": "",
           "attributes": [
             {
-              "name": "date",
+              "name": "tooltipText",
+              "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "required",
+              "required": false,
+              "description": "If true, indicates that the field is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "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": "undefined"
+            },
+            {
+              "name": "errorMessage",
+              "required": false,
+              "description": "If set, displays an error message and applies error styling to the field.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "If true, disables user interaction with the field.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "defaultDisplayMonth",
+              "required": false,
+              "description": "Default start date for the calendar pane.\nExpected format: YYYY-MM-DD",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "firstDayOfWeek",
+              "required": false,
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatePickerFirstDayOfWeek"
+              },
+              "default": "1"
+            },
+            {
+              "name": "isDateDisabled",
+              "required": false,
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatePickerIsDateDisabled"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "min",
+              "required": false,
+              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "max",
               "required": false,
-              "description": "The date to format. The data can be supplied as:\n- a Date object.\n- a number of milliseconds elapsed since the epoch.\n- a date string e.g. '2023-07-31T10:55:22+02:00'.",
+              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -5498,28 +5431,28 @@
               "default": "null"
             },
             {
-              "name": "format",
+              "name": "value",
               "required": false,
-              "description": "The string format of the date to be displayed",
+              "description": "Selected date",
               "value": {
                 "kind": "expression",
                 "type": "union"
               },
-              "default": "BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD"
+              "default": "null"
             },
             {
-              "name": "disableTypography",
+              "name": "variant",
               "required": false,
-              "description": "Disable the default typography for the component. Only use this when the component is inside another typography",
+              "description": "The type of calendar to display. Defaults to showing days.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "TSLiteralType"
               },
-              "default": "false"
+              "default": "undefined"
             }
           ],
           "source": {
-            "module": "./src/components/date/date.vue",
+            "module": "./src/components/date-picker/date-picker.vue",
             "symbol": "default"
           }
         },
@@ -5528,26 +5461,29 @@
           "description": "",
           "attributes": [
             {
-              "name": "allowTimeInput",
-              "description": "Allows user to enter time values in the form",
+              "name": "tooltipText",
+              "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "name": "required",
+              "required": false,
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             },
             {
-              "name": "disabled",
-              "description": "Disables dropdown functionality.",
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5555,8 +5491,9 @@
               "default": "false"
             },
             {
-              "name": "errorMessage",
-              "description": "Displays component in an error state with an error message",
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5564,32 +5501,49 @@
               "default": "null"
             },
             {
-              "name": "firstDayOfWeek",
-              "description": "Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "name": "optional",
+              "required": false,
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.firstDayOfWeek"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "granularities",
-              "description": "A list of available granularities.\nIf present, the date picker will display a segmented control to change granularity.",
+              "name": "label",
+              "required": false,
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.granularities"
-              }
+                "type": "string"
+              },
+              "default": "undefined"
             },
             {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
+              "name": "errorMessage",
+              "required": false,
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.isDateDisabled"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "label",
-              "description": "Text that is displayed as a label above the element.",
+              "name": "disabled",
+              "required": false,
+              "description": "If true, disables user interaction with the field.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5597,110 +5551,126 @@
               "default": "undefined"
             },
             {
-              "name": "showEndDateOnOpen",
-              "description": "Upon opening date range picker, end date's month will be pre-selected.",
+              "name": "allowTimeInput",
+              "required": false,
+              "description": "Allows user to enter time values in the form",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "false"
+              }
             },
             {
-              "name": "optional",
-              "description": "Highlights the dropdown is optional.",
+              "name": "firstDayOfWeek",
+              "required": false,
+              "description": "Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "union"
               },
-              "default": "false"
+              "default": "1"
             },
             {
-              "name": "readonly",
-              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.",
+              "name": "granularities",
+              "required": false,
+              "description": "A list of available granularities.\nIf present, the date picker will display a segmented control to change granularity.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "Array"
+              }
             },
             {
-              "name": "required",
-              "description": "Highlights the dropdown is required.",
+              "name": "isDateDisabled",
+              "required": false,
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoDateRangePickerIsDateDisabled"
               },
-              "default": "false"
+              "default": "undefined"
             },
             {
-              "name": "tooltipText",
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
+              "name": "showEndDateOnOpen",
+              "required": false,
+              "description": "Upon opening date range picker, end date's month will be pre-selected.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
             },
             {
               "name": "quickSelectRanges",
-              "description": "Enables the range selector.\nIf provided, must be an array that sets the custom range dropdown items. Items are of the structure:\n`label` - label of custom range item.\n`value` - a unique key of the custom range item.\n`data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.",
+              "required": false,
+              "description": "Enables the range selector.\nIf provided, must be an array that sets the custom range dropdown items.",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendarRangeSelectorItems"
+                "type": "BentoDateRangePickerQuickSelectRanges"
               },
               "default": "undefined"
             },
             {
               "name": "maxRange",
+              "required": false,
               "description": "Set a maximum number of dates to be selectable by the range.",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.maxRange"
-              }
+                "type": "number"
+              },
+              "default": "null"
             },
             {
               "name": "min",
+              "required": false,
               "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.min"
-              }
+                "type": "Date"
+              },
+              "default": "null"
             },
             {
               "name": "max",
+              "required": false,
               "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.max"
-              }
+                "type": "Date"
+              },
+              "default": "null"
             },
             {
               "name": "numberOfMonths",
+              "required": false,
               "description": "Number of months rendered on pane",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.numberOfMonths"
-              }
+                "type": "number"
+              },
+              "default": "undefined"
             },
             {
               "name": "value",
+              "required": false,
               "description": "Selected date",
               "value": {
                 "kind": "expression",
-                "type": "DateRangePickerCalendar.props.value"
-              }
+                "type": "union"
+              },
+              "default": "null"
             },
             {
               "name": "variant",
+              "required": false,
               "description": "The type of calendar to display. Defaults to showing days.",
               "value": {
                 "kind": "expression",
-                "type": "`${BentoDateRangePickerVariant}`"
+                "type": "TSLiteralType"
               },
               "default": "undefined"
             },
             {
               "name": "hasActions",
+              "required": false,
               "description": "Enables the date picker selection to persist until it is explicitly applied.\nDisplays a set of buttons: Apply and Cancel.",
               "value": {
                 "kind": "expression",
@@ -5938,23 +5908,113 @@
               "default": "false"
             },
             {
-              "name": "variant",
+              "name": "variant",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoDividerVariant}`"
+              },
+              "default": "'horizontal'"
+            }
+          ],
+          "source": {
+            "module": "./src/components/divider/__tests__/divider-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "dropdown",
+          "description": "",
+          "attributes": [
+            {
+              "name": "tooltipText",
+              "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "required",
+              "required": false,
+              "description": "If true, indicates that the field is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "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": "If set, displays an error message and applies error styling to the field.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "If true, disables user interaction with the field.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
-                "type": "`${BentoDividerVariant}`"
+                "type": "string"
               },
-              "default": "'horizontal'"
-            }
-          ],
-          "source": {
-            "module": "./src/components/divider/__tests__/divider-mock.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "dropdown",
-          "description": "",
-          "attributes": [
+              "default": "null"
+            },
             {
               "name": "ariaLabel",
               "required": false,
@@ -5984,16 +6044,6 @@
               },
               "default": "undefined"
             },
-            {
-              "name": "disabled",
-              "required": false,
-              "description": "Disables dropdown functionality.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "dynamicFiltering",
               "required": false,
@@ -6014,26 +6064,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "errorMessage",
-              "required": false,
-              "description": "Highlights the dropdown in an erroneous state with an error message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "description",
-              "required": false,
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
             {
               "name": "hasMoreItems",
               "required": false,
@@ -6064,16 +6094,6 @@
               },
               "default": "() => []"
             },
-            {
-              "name": "label",
-              "required": false,
-              "description": "Text that is displayed as a label above the element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
             {
               "name": "loading",
               "required": false,
@@ -6114,46 +6134,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "optional",
-              "required": false,
-              "description": "Highlights the dropdown is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "placeholder",
-              "required": false,
-              "description": "Text that appears in the form control when it has no value set",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "readonly",
-              "required": false,
-              "description": "Sets the dropdown to readonly state",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "required",
-              "required": false,
-              "description": "Highlights the dropdown is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "search",
               "required": false,
@@ -6193,16 +6173,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
             {
               "name": "value",
               "required": false,
@@ -6242,6 +6212,10 @@
             {
               "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."
             }
           ],
           "slots": [
@@ -6288,15 +6262,6 @@
                 "type": "BentoListboxSelectedValue"
               }
             },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
             {
               "name": "staticCategories",
               "required": false,
@@ -6333,170 +6298,179 @@
               }
             },
             {
-              "name": "required",
+              "name": "multiple",
               "required": false,
-              "description": "Highlights the dropdown is required.",
+              "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "readonly",
+              "name": "lazyLoadType",
               "required": false,
-              "description": "Sets the dropdown to readonly state",
+              "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": "boolean"
+                "type": "union"
               }
             },
             {
-              "name": "placeholder",
+              "name": "componentLoading",
               "required": false,
-              "description": "Text that appears in the form control when it has no value set",
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               }
             },
             {
-              "name": "optional",
+              "name": "loading",
               "required": false,
-              "description": "Highlights the dropdown is optional.",
+              "description": "Indicates if new options are lazy loading.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "multiple",
+              "name": "isOptionDisabled",
               "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
+              "description": "Function that dertermines which options are disabled from interaction.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoListboxIsOptionDisabled"
               }
             },
             {
-              "name": "lazyLoadType",
+              "name": "hasMoreItems",
               "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "boolean"
               }
             },
             {
-              "name": "componentLoading",
+              "name": "error",
               "required": false,
-              "description": "Indicates that dropdown items are loading",
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "loading",
+              "name": "dynamicFiltering",
               "required": false,
-              "description": "Indicates if new options are lazy loading.",
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "label",
+              "name": "emptyState",
               "required": false,
-              "description": "Text that is displayed as a label above the element.",
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDropdownEmptyStateProps"
               }
             },
             {
-              "name": "isOptionDisabled",
+              "name": "condensed",
               "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
+              "description": "Renders the dropdown with a condensed style.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
+                "type": "boolean"
               }
             },
             {
-              "name": "hasMoreItems",
+              "name": "ariaLabel",
               "required": false,
-              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
               "name": "description",
               "required": false,
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "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": "Highlights the dropdown in an erroneous state with an error message.",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "error",
+              "name": "label",
               "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "dynamicFiltering",
+              "name": "optional",
               "required": false,
-              "description": "Sets the possibility to type into the textbox.",
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "disabled",
+              "name": "placeholder",
               "required": false,
-              "description": "Disables dropdown functionality.",
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "emptyState",
+              "name": "readonly",
               "required": false,
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
+                "type": "boolean"
               }
             },
             {
-              "name": "condensed",
+              "name": "required",
               "required": false,
-              "description": "Renders the dropdown with a condensed style.",
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "ariaLabel",
+              "name": "tooltipText",
               "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -6516,7 +6490,15 @@
           "events": [
             {
               "name": "input",
-              "description": "Emitted when an item is selected"
+              "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": {
@@ -6667,7 +6649,7 @@
               "description": "The selected value's list box item.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxOptionItem | BentoListboxOptionItem[]"
+                "type": "BentoListboxOptionItem | Array<BentoListboxOptionItem>"
               },
               "default": "undefined"
             },
@@ -6758,7 +6740,15 @@
           "events": [
             {
               "name": "input",
-              "description": "Emitted when an item is selected"
+              "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": {
@@ -6797,15 +6787,6 @@
                 "type": "BentoListboxSelectedValue"
               }
             },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
             {
               "name": "staticCategories",
               "required": false,
@@ -6842,170 +6823,179 @@
               }
             },
             {
-              "name": "required",
+              "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": "Highlights the dropdown is required.",
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "readonly",
+              "name": "loading",
               "required": false,
-              "description": "Sets the dropdown to readonly state",
+              "description": "Indicates if new options are lazy loading.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "placeholder",
+              "name": "isOptionDisabled",
               "required": false,
-              "description": "Text that appears in the form control when it has no value set",
+              "description": "Function that dertermines which options are disabled from interaction.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoListboxIsOptionDisabled"
               }
             },
             {
-              "name": "optional",
+              "name": "hasMoreItems",
               "required": false,
-              "description": "Highlights the dropdown is optional.",
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "multiple",
+              "name": "error",
               "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "lazyLoadType",
+              "name": "dynamicFiltering",
               "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "boolean"
               }
             },
             {
-              "name": "componentLoading",
+              "name": "emptyState",
               "required": false,
-              "description": "Indicates that dropdown items are loading",
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoDropdownEmptyStateProps"
               }
             },
             {
-              "name": "loading",
+              "name": "condensed",
               "required": false,
-              "description": "Indicates if new options are lazy loading.",
+              "description": "Renders the dropdown with a condensed style.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "label",
+              "name": "ariaLabel",
               "required": false,
-              "description": "Text that is displayed as a label above the element.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "isOptionDisabled",
+              "name": "description",
               "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
+                "type": "string"
               }
             },
             {
-              "name": "hasMoreItems",
+              "name": "disabled",
               "required": false,
-              "description": "Indicates whether there are more items to load",
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "description",
+              "name": "errorMessage",
               "required": false,
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "errorMessage",
+              "name": "label",
               "required": false,
-              "description": "Highlights the dropdown in an erroneous state with an error message.",
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "error",
+              "name": "optional",
               "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "dynamicFiltering",
+              "name": "placeholder",
               "required": false,
-              "description": "Sets the possibility to type into the textbox.",
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "disabled",
+              "name": "readonly",
               "required": false,
-              "description": "Disables dropdown functionality.",
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "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",
+              "name": "required",
               "required": false,
-              "description": "Renders the dropdown with a condensed style.",
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "ariaLabel",
+              "name": "tooltipText",
               "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7025,7 +7015,15 @@
           "events": [
             {
               "name": "input",
-              "description": "Emitted when an item is selected"
+              "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": {
@@ -7159,7 +7157,7 @@
               "description": "The selected value's list box item.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxOptionItem | BentoListboxOptionItem[]"
+                "type": "BentoListboxOptionItem | Array<BentoListboxOptionItem>"
               },
               "default": "undefined"
             },
@@ -7485,15 +7483,6 @@
                 "type": "BentoListboxSelectedValue"
               }
             },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
             {
               "name": "staticCategories",
               "required": false,
@@ -7530,170 +7519,179 @@
               }
             },
             {
-              "name": "required",
+              "name": "multiple",
               "required": false,
-              "description": "Highlights the dropdown is required.",
+              "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "readonly",
+              "name": "lazyLoadType",
               "required": false,
-              "description": "Sets the dropdown to readonly state",
+              "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": "boolean"
+                "type": "union"
               }
             },
             {
-              "name": "placeholder",
+              "name": "componentLoading",
               "required": false,
-              "description": "Text that appears in the form control when it has no value set",
+              "description": "Indicates that dropdown items are loading",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               }
             },
             {
-              "name": "optional",
+              "name": "loading",
               "required": false,
-              "description": "Highlights the dropdown is optional.",
+              "description": "Indicates if new options are lazy loading.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "multiple",
+              "name": "isOptionDisabled",
               "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
+              "description": "Function that dertermines which options are disabled from interaction.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoListboxIsOptionDisabled"
               }
             },
             {
-              "name": "lazyLoadType",
+              "name": "hasMoreItems",
               "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "boolean"
               }
             },
             {
-              "name": "componentLoading",
+              "name": "error",
               "required": false,
-              "description": "Indicates that dropdown items are loading",
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "loading",
+              "name": "dynamicFiltering",
               "required": false,
-              "description": "Indicates if new options are lazy loading.",
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "label",
+              "name": "emptyState",
               "required": false,
-              "description": "Text that is displayed as a label above the element.",
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDropdownEmptyStateProps"
               }
             },
             {
-              "name": "isOptionDisabled",
+              "name": "condensed",
               "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
+              "description": "Renders the dropdown with a condensed style.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
+                "type": "boolean"
               }
             },
             {
-              "name": "hasMoreItems",
+              "name": "ariaLabel",
               "required": false,
-              "description": "Indicates whether there are more items to load",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
               "name": "description",
               "required": false,
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "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": "Highlights the dropdown in an erroneous state with an error message.",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "error",
+              "name": "label",
               "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "dynamicFiltering",
+              "name": "optional",
               "required": false,
-              "description": "Sets the possibility to type into the textbox.",
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "disabled",
+              "name": "placeholder",
               "required": false,
-              "description": "Disables dropdown functionality.",
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "emptyState",
+              "name": "readonly",
               "required": false,
-              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDropdownEmptyStateProps"
+                "type": "boolean"
               }
             },
             {
-              "name": "condensed",
+              "name": "required",
               "required": false,
-              "description": "Renders the dropdown with a condensed style.",
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "ariaLabel",
+              "name": "tooltipText",
               "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7713,7 +7711,15 @@
           "events": [
             {
               "name": "input",
-              "description": "Emitted when an item is selected"
+              "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": {
@@ -7939,15 +7945,6 @@
                 "type": "BentoListboxSelectedValue"
               }
             },
-            {
-              "name": "tooltipText",
-              "required": false,
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
             {
               "name": "staticCategories",
               "required": false,
@@ -7984,170 +7981,179 @@
               }
             },
             {
-              "name": "required",
+              "name": "multiple",
               "required": false,
-              "description": "Highlights the dropdown is required.",
+              "description": "If enabled, the user will be able to select multiple items.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "readonly",
+              "name": "lazyLoadType",
               "required": false,
-              "description": "Sets the dropdown to readonly state",
+              "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": "placeholder",
+              "name": "loading",
               "required": false,
-              "description": "Text that appears in the form control when it has no value set",
+              "description": "Indicates if new options are lazy loading.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               }
             },
             {
-              "name": "optional",
+              "name": "isOptionDisabled",
               "required": false,
-              "description": "Highlights the dropdown is optional.",
+              "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": "multiple",
+              "name": "error",
               "required": false,
-              "description": "If enabled, the user will be able to select multiple items.",
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "lazyLoadType",
+              "name": "dynamicFiltering",
               "required": false,
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "description": "Sets the possibility to type into the textbox.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "boolean"
               }
             },
             {
-              "name": "componentLoading",
+              "name": "emptyState",
               "required": false,
-              "description": "Indicates that dropdown items are loading",
+              "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoDropdownEmptyStateProps"
               }
             },
             {
-              "name": "loading",
+              "name": "condensed",
               "required": false,
-              "description": "Indicates if new options are lazy loading.",
+              "description": "Renders the dropdown with a condensed style.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "label",
+              "name": "ariaLabel",
               "required": false,
-              "description": "Text that is displayed as a label above the element.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "isOptionDisabled",
+              "name": "description",
               "required": false,
-              "description": "Function that dertermines which options are disabled from interaction.",
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
+                "type": "string"
               }
             },
             {
-              "name": "hasMoreItems",
+              "name": "disabled",
               "required": false,
-              "description": "Indicates whether there are more items to load",
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "description",
+              "name": "errorMessage",
               "required": false,
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "errorMessage",
+              "name": "label",
               "required": false,
-              "description": "Highlights the dropdown in an erroneous state with an error message.",
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               }
             },
             {
-              "name": "error",
+              "name": "optional",
               "required": false,
-              "description": "Highlights the dropdown in an erroneous state.",
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "dynamicFiltering",
+              "name": "placeholder",
               "required": false,
-              "description": "Sets the possibility to type into the textbox.",
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "name": "disabled",
+              "name": "readonly",
               "required": false,
-              "description": "Disables dropdown functionality.",
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "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",
+              "name": "required",
               "required": false,
-              "description": "Renders the dropdown with a condensed style.",
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             },
             {
-              "name": "ariaLabel",
+              "name": "tooltipText",
               "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -8167,7 +8173,15 @@
           "events": [
             {
               "name": "input",
-              "description": "Emitted when an item is selected"
+              "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": {
@@ -8972,6 +8986,82 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "filter-bar-custom-filter-sub-component-multiple-value",
+          "description": "",
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-multiple-value.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-custom-filter-sub-component-multiple-value-example",
+          "description": "",
+          "attributes": [
+            {
+              "name": "defaultValue",
+              "value": {
+                "kind": "expression",
+                "type": "any"
+              },
+              "default": "null"
+            },
+            {
+              "name": "value",
+              "value": {
+                "kind": "expression",
+                "type": "any"
+              },
+              "default": "() => ({\n    first: false,\n    second: false,\n})"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-multiple-value-example.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-custom-filter-sub-component-single-value",
+          "description": "",
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-single-value.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-custom-filter-sub-component-single-value-example",
+          "description": "",
+          "attributes": [
+            {
+              "name": "defaultValue",
+              "value": {
+                "kind": "expression",
+                "type": "any"
+              },
+              "default": "null"
+            },
+            {
+              "name": "onlySlot",
+              "value": {
+                "kind": "expression",
+                "type": "any"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filter-sub-component-single-value-example.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-custom-filters-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-custom-filters-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "filter-bar-toast-stub",
           "description": "",
@@ -9221,6 +9311,15 @@
                 "type": "BentoFormLayoutFieldTipTypeOption"
               },
               "default": "'highlight'"
+            },
+            {
+              "name": "id",
+              "description": "Unique identifier to the form field. Used for accessibility.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
@@ -9236,6 +9335,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "form-layout-field-tip-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/form-layout/__tests__/form-layout-field-tip-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "form-layout-group",
           "description": "",
@@ -10407,15 +10514,6 @@
           "name": "input-field-phone-number",
           "description": "",
           "attributes": [
-            {
-              "name": "value",
-              "required": false,
-              "description": "The current value of the field.",
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              }
-            },
             {
               "name": "tooltipText",
               "required": false,
@@ -10488,6 +10586,16 @@
                 "type": "boolean"
               }
             },
+            {
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "countries",
               "required": false,
@@ -10534,6 +10642,15 @@
                 "kind": "expression",
                 "type": "CountryCode"
               }
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "The current value of the field.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
             }
           ],
           "events": [
@@ -11197,7 +11314,7 @@
               "description": "List of selected items.\nProviding an empty array will select no options.",
               "value": {
                 "kind": "expression",
-                "type": "BentoListboxValue[]"
+                "type": "Array<BentoListboxValue>"
               },
               "default": "() => []"
             },
@@ -11332,6 +11449,46 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "loading-indicator",
+          "description": "",
+          "attributes": [
+            {
+              "name": "small",
+              "required": false,
+              "description": "Displays the loading indicator in a small size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "large",
+              "required": false,
+              "description": "Displays the loading indicator in a large size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "inverse",
+              "required": false,
+              "description": "Displays the loading indicator in a white variant",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/loading-indicator/loading-indicator.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "menu",
           "description": "",
@@ -11558,7 +11715,7 @@
               "description": "The data to be displayed in the list",
               "value": {
                 "kind": "expression",
-                "type": "BentoMenuItem[]"
+                "type": "Array<BentoMenuItem>"
               }
             },
             {
@@ -13073,7 +13230,7 @@
               "description": "Custom set of middleware. Useful for low-level control over Popper behavior in some really complex use cases.",
               "value": {
                 "kind": "expression",
-                "type": "Middleware[]"
+                "type": "Array<Middleware>"
               },
               "default": "null"
             },
@@ -13082,7 +13239,7 @@
               "description": "Allows to displace a popper container from its target element.",
               "value": {
                 "kind": "expression",
-                "type": "number[]"
+                "type": "Array<number>"
               },
               "default": "() => [0, 0]"
             },
@@ -13348,24 +13505,74 @@
               "name": "default"
             },
             {
-              "name": "description"
+              "name": "description"
+            },
+            {
+              "name": "content"
+            }
+          ],
+          "source": {
+            "module": "./src/components/radio-group/components/radio-button/radio-button.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "radio-group",
+          "description": "",
+          "attributes": [
+            {
+              "name": "tooltipText",
+              "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "required",
+              "required": false,
+              "description": "If true, indicates that the field is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "optional",
+              "required": false,
+              "description": "If true, indicates that the field is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "content"
-            }
-          ],
-          "source": {
-            "module": "./src/components/radio-group/components/radio-button/radio-button.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "radio-group",
-          "description": "",
-          "attributes": [
-            {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the label.",
+              "name": "errorMessage",
+              "required": false,
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -13374,7 +13581,8 @@
             },
             {
               "name": "disabled",
-              "description": "If set to true, renders all bento-radio-buttons in the group in a disabled state.",
+              "required": false,
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -13382,8 +13590,9 @@
               "default": "false"
             },
             {
-              "name": "errorMessage",
-              "description": "If passed as a prop, all bento-radio-buttons in an error state and renders the string beneath the buttons.",
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -13392,15 +13601,17 @@
             },
             {
               "name": "formId",
+              "required": false,
               "description": "The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "null"
             },
             {
               "name": "hasError",
+              "required": false,
               "description": "If set to true, renders all bento-radio-buttons in the group in an error state.",
               "value": {
                 "kind": "expression",
@@ -13410,17 +13621,18 @@
             },
             {
               "name": "hideLabel",
+              "required": false,
               "description": "Shows/hides the group label.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "union"
               },
               "default": "null"
             },
             {
               "name": "items",
               "required": true,
-              "description": "The radio group's items.",
+              "description": "The radio group's items.\nRequired.",
               "value": {
                 "kind": "expression",
                 "type": "BentoRadioGroupItems"
@@ -13429,7 +13641,7 @@
             {
               "name": "label",
               "required": true,
-              "description": "The name associated with the group. Required for accessibility purposes.",
+              "description": "The name associated with the group. Required for accessibility purposes.\nRequired.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -13437,55 +13649,21 @@
             },
             {
               "name": "modelValue",
+              "required": false,
               "description": "Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\nDefaults to no value selected.",
               "value": {
                 "kind": "expression",
-                "type": "BentoRadioGroupValue"
-              },
-              "default": "null"
-            },
-            {
-              "name": "optional",
-              "description": "Indicates the field is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "readonly",
-              "description": "If set to true, renders all bento-radio-button in the group in a readonly state.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "required",
-              "description": "Indicates the field is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "tooltipText",
-              "description": "Tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "null"
             },
             {
               "name": "variant",
+              "required": false,
               "description": "The radio group's layout. It can be vertical or horizontal. Defaults to vertical.",
               "value": {
                 "kind": "expression",
-                "type": "BentoRadioGroupVariant | `${BentoRadioGroupVariant}`"
+                "type": "union"
               },
               "default": "BentoRadioGroupVariant.VERTICAL"
             }
@@ -14178,6 +14356,16 @@
               },
               "default": "null"
             },
+            {
+              "name": "tooltipText",
+              "required": false,
+              "description": "Renders tooltip text if provided",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "truncate",
               "required": false,
@@ -14621,7 +14809,7 @@
               "description": "The selection card group's items.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectionCardItem[]"
+                "type": "Array<BentoSelectionCardItem>"
               }
             },
             {
@@ -15133,7 +15321,7 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "BentoMenuItem[]"
+                "type": "Array<BentoMenuItem>"
               }
             },
             {
@@ -16207,44 +16395,49 @@
           "description": "",
           "attributes": [
             {
-              "name": "ariaLabel",
-              "description": "Text that labels an the input element",
+              "name": "tooltipText",
+              "required": false,
+              "description": "If set, displays an info icon with this tooltip message next to the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
-              "name": "characterLimit",
-              "description": "Text that shows number of characters in textarea",
+              "name": "required",
+              "required": false,
+              "description": "If true, indicates that the field is required.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             },
             {
-              "name": "description",
-              "description": "Text displayed as the help text of the textarea",
+              "name": "readonly",
+              "required": false,
+              "description": "If true, makes the field's value readonly, preventing user modification.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "''"
+              "default": "false"
             },
             {
-              "name": "disabled",
-              "description": "Disables the possibility of changing value in the textarea",
+              "name": "placeholder",
+              "required": false,
+              "description": "The placeholder text displayed when the field is empty.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "''"
             },
             {
-              "name": "clearable",
-              "description": "If set to true, shows a button to clear all the text",
+              "name": "optional",
+              "required": false,
+              "description": "If true, indicates that the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -16252,8 +16445,9 @@
               "default": "false"
             },
             {
-              "name": "errorMessage",
-              "description": "Adds error text",
+              "name": "label",
+              "required": false,
+              "description": "The text label displayed for the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -16261,17 +16455,9 @@
               "default": "''"
             },
             {
-              "name": "height",
-              "description": "Sets the height of the textarea, e.g 200px OR 20vh",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "label",
-              "description": "Text displayed as the label of the textarea",
+              "name": "errorMessage",
+              "required": false,
+              "description": "If set, displays an error message and applies error styling to the field.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -16279,8 +16465,9 @@
               "default": "''"
             },
             {
-              "name": "optional",
-              "description": "Highlights the textarea is optional.",
+              "name": "disabled",
+              "required": false,
+              "description": "If true, disables user interaction with the field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -16288,8 +16475,9 @@
               "default": "false"
             },
             {
-              "name": "placeholder",
-              "description": "Text displayed as the placeholder of the textarea",
+              "name": "description",
+              "required": false,
+              "description": "If set, displays a description text for the input.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -16297,26 +16485,29 @@
               "default": "''"
             },
             {
-              "name": "readonly",
-              "description": "Set the textarea to read only state.",
+              "name": "ariaLabel",
+              "required": false,
+              "description": "Text that labels the input element",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "undefined"
             },
             {
-              "name": "resizable",
-              "description": "Indicates the possibility of resize the textarea",
+              "name": "characterLimit",
+              "required": false,
+              "description": "Text that shows number of characters in textarea",
               "value": {
                 "kind": "expression",
-                "type": "BentoTextareaResizeOption | `${BentoTextareaResizeOption}`"
+                "type": "number"
               },
-              "default": "BentoTextareaResizeOption.BOTH"
+              "default": "undefined"
             },
             {
-              "name": "required",
-              "description": "Highlights the textarea is required.",
+              "name": "clearable",
+              "required": false,
+              "description": "If set to true, shows a button to clear all the text",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -16324,16 +16515,28 @@
               "default": "false"
             },
             {
-              "name": "tooltipText",
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
+              "name": "height",
+              "required": false,
+              "description": "Sets the height of the textarea, e.g 200px OR 20vh",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "null"
             },
+            {
+              "name": "resizable",
+              "required": false,
+              "description": "Indicates the possibility of resize the textarea.\nAccepts the Enum or the string literal version.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "'both'"
+            },
             {
               "name": "value",
+              "required": false,
               "description": "Text displayed as the value of the textarea",
               "value": {
                 "kind": "expression",
@@ -16397,7 +16600,7 @@
               "name": "items",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItemParams[]"
+                "type": "Array<BentoToastItemParams>"
               },
               "default": "() => []"
             }
@@ -16459,6 +16662,74 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "toggle",
+          "description": "",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "description": "Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "description": "Disable the toggle (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "labelPosition",
+              "description": "Position of the label relative to the toggle (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "BentoToggleLabelPosition | `${BentoToggleLabelPosition}`"
+              },
+              "default": "BentoToggleLabelPosition.BEFORE"
+            },
+            {
+              "name": "readonly",
+              "description": "Setting this property to true will set the toggle to read only state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "description": "Indicates if the switch is \"on\" or \"off\"",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "description"
+            }
+          ],
+          "source": {
+            "module": "./src/components/toggle/toggle.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "toggle-button",
           "description": "",
@@ -16531,7 +16802,7 @@
         },
         {
           "name": "tooltip",
-          "description": "Tooltip container, to be used internally to render the tooltip container where the text is shown.",
+          "description": "",
           "attributes": [
             {
               "name": "id",
@@ -16638,7 +16909,7 @@
               "description": "The steps configuration for the tutorial.",
               "value": {
                 "kind": "expression",
-                "type": "BentoTutorialStep[]"
+                "type": "Array<BentoTutorialStep>"
               }
             },
             {