@adyen/bento-vue2 0.7.1 → 0.8.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -837,6 +837,15 @@
               },
               "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",
@@ -873,6 +882,14 @@
                 "type": "string"
               }
             },
+            {
+              "name": "fitContent",
+              "description": "Sets the size of the container to fit its content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopover.props.fitContent"
+              }
+            },
             {
               "name": "value",
               "description": "Current value of the filter",
@@ -1621,6 +1638,52 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-filter",
+          "description": "The Date filter displays a calendar that allows\nto select a single date.",
+          "attributes": [
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateFilterOptions"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateFilterValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/date-filter/date-filter.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-date-picker",
           "description": "Date picker selector.",
@@ -1657,7 +1720,7 @@
               "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "func"
+                "type": "BentoDatePickerIsDateDisabled"
               },
               "default": "undefined"
             },
@@ -1688,14 +1751,30 @@
               },
               "default": "false"
             },
+            {
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPane.props.numberOfMonths"
+              }
+            },
             {
               "name": "value",
               "description": "Selected date",
               "value": {
                 "kind": "expression",
-                "type": "date"
+                "type": "BentoDatePickerValue"
               },
               "default": "null"
+            },
+            {
+              "name": "variant",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatePickerVariant"
+              },
+              "default": "BentoDatePickerVariant.SINGLE_CALENDAR"
             }
           ],
           "source": {
@@ -1703,6 +1782,112 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-picker-calendar-pane",
+          "description": "Handles the calendar logic to change visible months for Single calendar\nand Range calendar, as well as the selection logic for range.\nAll the processing necessary for the calendar to select dates",
+          "attributes": [
+            {
+              "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": "DatePickerCalendar.props.firstDayOfWeek"
+              }
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendar.props.isDateDisabled"
+              }
+            },
+            {
+              "name": "isRange",
+              "description": "Enables the Date Range calendar",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendar.props.isRange"
+              }
+            },
+            {
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "3"
+            },
+            {
+              "name": "value",
+              "description": "Selected date. Can be a single Date or a DatePickerCalendarPaneRangeDate\ninstance that contains startDate and endDate attributes.",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPaneValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar-pane/date-picker-calendar-pane.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-date-range-filter",
+          "description": "The Date filter displays a calendar that allows\nto select a single date.",
+          "attributes": [
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateRangeFilterOptions"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateRangeFilterValue"
+              },
+              "default": "() => ({ startDate: undefined, endDate: undefined })"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/date-range-filter/date-range-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-divider",
+          "description": "",
+          "source": {
+            "module": "./src/components/divider/divider.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-dropdown-avatar",
           "description": "A Avatar Dropdown showing a selectable list of countries.",
@@ -2077,6 +2262,15 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "tooltipPosition",
+              "description": "Position the tooltip should take if space is available. Defaults to 'auto'",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerPosition"
+              },
+              "default": "PopperContainerPosition.AUTO"
             }
           ],
           "source": {
@@ -2124,6 +2318,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
             {
               "name": "staticValue",
               "description": "Static text that displayed before or after input value\nApplicable to the Static Value variant",
@@ -2627,15 +2830,6 @@
                 "type": "BentoMenuItem[]"
               }
             },
-            {
-              "name": "tertiaryButton",
-              "description": "Displays the menu button in its ghost variant",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "menuPosition",
               "description": "The position of where the menu should open.",
@@ -2653,6 +2847,29 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "menuWidth",
+              "description": "Sets a custom width for the menu popover.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "button",
+              "description": "Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoMenuButtonProps"
+              },
+              "default": "() => ({\n    variant: BentoButtonVariant.SECONDARY,\n})"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
             }
           ],
           "source": {
@@ -3126,6 +3343,15 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "small",
+              "description": "Render payment method icon in a smaller size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -3191,6 +3417,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "fitContent",
+              "description": "Sets the size of the container to fit its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "fixedPositioning",
               "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
@@ -3200,6 +3435,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "open",
+              "description": "Toggles the popover open and closed",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "large",
               "description": "Displays the popover in a large size.",
@@ -3469,6 +3713,15 @@
               },
               "default": "300"
             },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
             {
               "name": "value",
               "description": "Text displayed as the value being searched",
@@ -3695,35 +3948,489 @@
           }
         },
         {
-          "name": "bento-tag",
-          "description": "",
+          "name": "bento-structured-list",
+          "description": "This is a list used to display pairs of information in a clear and organized manner.\n`BentoStructureListItem` should be used to pass the label/value pairs to the list.",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/structured-list/structured-list.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-structured-list-item",
+          "description": "This is an item of the `BentoStructuredList` meant to be used only with that component.\nIt consists of a label/value pair, and also the optional copy and search modifiers.",
           "attributes": [
             {
               "name": "label",
-              "description": "The label text content of the Tag.",
+              "required": true,
+              "description": "Label to display for the value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "copy",
+              "description": "Text to copy when the user clicks `Copy` icon",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "null"
+              "default": "undefined"
             },
             {
-              "name": "variant",
-              "description": "The variant variant of tag",
+              "name": "search",
+              "description": "Function to trigger when user clicks `Search` icon",
               "value": {
                 "kind": "expression",
-                "type": "BentoTagVariant"
+                "type": "(event: Event) => void"
               },
-              "default": "BentoTagVariant.GREY"
+              "default": "undefined"
             },
             {
-              "name": "truncate",
-              "description": "The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".",
+              "name": "searchTooltip",
+              "description": "Text to display when the user hovers over `Search` icon",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "string"
               },
-              "default": "null"
+              "default": "undefined"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/structured-list/components/structered-list-item/structured-list-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-summary-grid",
+          "description": "A summary grid component that displays a collection items.",
+          "attributes": [
+            {
+              "name": "columnWidth",
+              "description": "Sets the responsive columns widths values for 1 of the 3 rows.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridColumnWidth"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/summary-grid.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-summary-grid-item-amount",
+          "description": "Summary grid item component used to display financial data, such as currency values and monetary amounts",
+          "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Amount to be shown as the main value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "secondaryLabel",
+              "description": "Adds additional label next to amount content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "trendDirection",
+              "description": "Defines the direction (color) of the trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
+            {
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-summary-grid-item-custom",
+          "description": "A summary bar item is a piece of information to be displayed in `bento-summary-bar` component",
+          "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "copy-to-clipboard"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-summary-grid-item-numeric",
+          "description": "Summary grid item component used to display any numeric information",
+          "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Amount to be shown as the main value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "trendDirection",
+              "description": "Defines the direction (color) of the trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
+            {
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-summary-grid-item-percentage",
+          "description": "Summary grid item component used to display any percentage information",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "Amount to be shown as the main value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "trendDirection",
+              "description": "Defines the direction (color) of the trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
+            {
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-summary-grid-item-text",
+          "description": "Summary grid item component used to display text only. Can be used for references, IDs or any other text data.",
+          "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Amount to be shown as the main value",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-tag",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The label text content of the Tag.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "variant",
+              "description": "The variant variant of tag",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTagVariant"
+              },
+              "default": "BentoTagVariant.GREY"
+            },
+            {
+              "name": "truncate",
+              "description": "The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
             }
           ],
           "source": {
@@ -3997,6 +4704,39 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "copy",
+          "description": "An internal button component that copies text to the user's clipboard.",
+          "attributes": [
+            {
+              "name": "text",
+              "required": true,
+              "description": "Defines the string that will get copied to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "tooltipPosition",
+              "description": "Position the tooltip should take if space is available. Defaults to 'top'",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerPosition"
+              },
+              "default": "PopperContainerPosition.TOP"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/copy/copy.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid-columns",
           "description": "",
@@ -4038,8 +4778,17 @@
               "default": "true"
             },
             {
-              "name": "hasContextualMenuEnabled",
-              "description": "Toggles if the contextual menu is enabled",
+              "name": "hasColumnPanel",
+              "description": "Signifies if the column panel is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasFirstColumnPanelRightAligned",
+              "description": "If set to true, aligns the first column panel to the right of its button.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4097,66 +4846,20 @@
           "description": "Date picker calendar that displays all the days of a given month\nand allows to move back and forth the visible month with the Next\nand Previous buttons",
           "attributes": [
             {
-              "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": "DatePickerCalendarFirstDayOfWeek"
-              },
-              "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
-            },
-            {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
-              "value": {
-                "kind": "expression",
-                "type": "func"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "month",
-              "required": true,
-              "description": "Month of the year to be displayed in the calendar",
-              "value": {
-                "kind": "expression",
-                "type": "date"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Selected date",
+              "name": "endDate",
+              "description": "end of the selected range",
               "value": {
                 "kind": "expression",
                 "type": "date"
               },
-              "default": "undefined"
-            }
-          ],
-          "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar/date-picker-calendar.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "date-picker-calendar-container",
-          "description": "Handles the popover logic and displays the month, date, and range containers\naccording to the type of Date picker variation.",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables dropdown functionality",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+              "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": "number"
+                "type": "DatePickerCalendarFirstDayOfWeek"
               },
               "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
             },
@@ -4165,18 +4868,18 @@
               "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "func"
+                "type": "DatePickerCalendarIsDateDisabled"
               },
               "default": "undefined"
             },
             {
-              "name": "label",
-              "description": "Text that is displayed as a label above the element.",
+              "name": "isRange",
+              "description": "Indicates if the calendar is part of a range date picker or a sigle date picker",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             },
             {
               "name": "month",
@@ -4188,69 +4891,73 @@
               }
             },
             {
-              "name": "open",
-              "required": true,
-              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "name": "position",
+              "description": "When rendering multiple calendars, this property allows to render the\nNext and Previous calendar buttons to the right, left or not at all\ndepending on the position: Unique (only 1), First, Middle or Last",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "DatePickerCalendarPosition"
+              },
+              "default": "DatePickerCalendarPosition.UNIQUE"
             },
             {
-              "name": "value",
-              "description": "Selected date",
+              "name": "startDate",
+              "description": "start of the selected range",
               "value": {
                 "kind": "expression",
                 "type": "date"
               },
-              "default": "undefined"
-            },
+              "default": "null"
+            }
+          ],
+          "events": [
             {
-              "name": "targetElement",
-              "required": true,
-              "description": "Reference to the DOM element or Vue component for positioning\nthe Dropdown container.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoPopover.props.targetElement.type"
-              }
+              "name": "<undefined>"
             }
           ],
           "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar-container/date-picker-calendar-container.vue",
+            "module": "./src/components/date-picker/components/date-picker-calendar/date-picker-calendar.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "date-picker-calendar-container-stub",
-          "description": "",
+          "name": "date-picker-calendar-day",
+          "description": "Handles the styles and states of the individual dates of the calendar.",
           "attributes": [
             {
-              "name": "month",
+              "name": "day",
+              "required": true,
+              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.month"
+                "type": "date"
               }
             },
             {
-              "name": "open",
+              "name": "disabled",
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.open"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "disabled",
+              "name": "selected",
+              "description": "Changes the state of the calendar day to selected.",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.disabled"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "value",
+              "name": "variant",
+              "description": "When the day is selected, this indicates if the selection is a single date or part of a range.\nIf it's a range it can be at the beginning, middle or end of the selection.",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.value"
-              }
+                "type": "DatePickerCalendarDayVariant"
+              },
+              "default": "DatePickerCalendarDayVariant.SINGLE"
             }
           ],
           "events": [
@@ -4259,57 +4966,76 @@
             }
           ],
           "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar-container/__test__/date-picker-calendar-container-stub.vue",
+            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/date-picker-calendar-day.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "date-picker-calendar-day",
-          "description": "Handles the styles and states of the individual dates of the calendar.",
+          "name": "date-picker-calendar-day-stub",
+          "description": "",
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/__test__/date-picker-calendar-day-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-range",
+          "description": "Calendar for range dates. Contains the logic to handle the range forms.",
           "attributes": [
             {
-              "name": "day",
-              "required": true,
-              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
+              "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": "date"
+                "type": "DatePickerCalendarPane.props.firstDayOfWeek"
               }
             },
             {
-              "name": "selected",
-              "description": "Changes the state of the calendar day to selected.",
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "DatePickerCalendarPane.props.isDateDisabled"
+              }
             },
             {
-              "name": "disabled",
-              "description": "Indicate if a date should be disabled or not",
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "DatePickerCalendarPane.props.numberOfMonths"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPaneValue"
               },
-              "default": "false"
+              "default": "undefined"
             }
           ],
-          "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/date-picker-calendar-day.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "date-picker-calendar-day-stub",
-          "description": "",
           "events": [
             {
-              "name": "<undefined>"
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "title"
+            },
+            {
+              "name": "actions"
             }
           ],
           "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/__test__/date-picker-calendar-day-stub.vue",
+            "module": "./src/components/date-picker/components/date-picker-calendar-range/date-picker-calendar-range.vue",
             "symbol": "default"
           }
         },
@@ -4847,12 +5573,32 @@
           "description": "Component used to render the grid layout in the bento-summary-grid. For internal use only",
           "attributes": [
             {
-              "name": "items",
-              "required": true,
+              "name": "columnWidth",
               "value": {
                 "kind": "expression",
-                "type": "GridLayoutItem[]"
-              }
+                "type": "GridLayoutColumnWidths"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "col-1"
+            },
+            {
+              "name": "col-2"
+            },
+            {
+              "name": "col-3"
+            },
+            {
+              "name": "col-4"
+            },
+            {
+              "name": "col-5"
+            },
+            {
+              "name": "col-6"
             }
           ],
           "source": {
@@ -5156,6 +5902,13 @@
                 "type": "BentoPopover.props.fixedPositioning"
               }
             },
+            {
+              "name": "fitContent",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopover.props.fitContent"
+              }
+            },
             {
               "name": "large",
               "value": {
@@ -5524,6 +6277,93 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "summary-grid-item",
+          "description": "A summary bar item is a piece of information to be displayed in `bento-summary-bar` component",
+          "attributes": [
+            {
+              "name": "copy",
+              "description": "Text to copy to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "itemType",
+              "description": "Applies styling based on content type",
+              "value": {
+                "kind": "expression",
+                "type": "SummaryGridItemType"
+              },
+              "default": "SummaryGridItemType.CUSTOM"
+            },
+            {
+              "name": "infoIconTooltipText",
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Text used as a title",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "fitContent",
+              "description": "The width of `summary-grid-item` fits its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the `summary-grid-item` text content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemSize"
+              },
+              "default": "BentoSummaryGridItemSize.SMALL"
+            },
+            {
+              "name": "trendDirection",
+              "description": "Defines the color of trend label",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSummaryGridItemTrendDirection"
+              },
+              "default": "BentoSummaryGridItemTrendDirection.POSITIVE"
+            },
+            {
+              "name": "trend",
+              "description": "Shows colored trend label next to text content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tab",
           "description": "",