@adyen/bento-vue2 0.8.0 → 0.8.2

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -414,6 +414,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "placeholder",
+              "description": "Text that appears in the form control when it has no value set",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
             {
               "name": "dynamicFiltering",
               "description": "Sets the possibility to type into the textbox.",
@@ -503,6 +512,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "size",
+              "description": "Dropdown input size",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownSize"
+              },
+              "default": "BentoDropdownSize.DEFAULT"
+            },
             {
               "name": "value",
               "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected.",
@@ -681,6 +699,24 @@
               },
               "default": "null"
             },
+            {
+              "name": "withColumnLayout",
+              "description": "If provided, renders the modal's content in a two-column layout an wth dividers separating its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "columnsSize",
+              "description": "If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalColumnLayoutVariant"
+              },
+              "default": "BentoModalColumnLayoutVariant.SMALLER"
+            },
             {
               "name": "isOpen",
               "required": true,
@@ -713,6 +749,12 @@
             {
               "name": "default"
             },
+            {
+              "name": "content-col-1"
+            },
+            {
+              "name": "content-col-2"
+            },
             {
               "name": "content"
             },
@@ -829,8 +871,26 @@
               "default": "null"
             },
             {
-              "name": "buttonHasChevron",
-              "description": "Toggles if a chevron icon should be displayed in the button.\nThe chevron will change depending on the open state of the filter.",
+              "name": "buttonLabel",
+              "description": "Overrides the label of the popover vsibility toggle button text.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarValue"
+              },
+              "default": "null"
+            },
+            {
+              "name": "controlled",
+              "description": "Allows to handle the controls (apply/clear) from outside\nof the component",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -847,8 +907,8 @@
               "default": "false"
             },
             {
-              "name": "disableClearButton",
-              "description": "Disable the \"clear\" button",
+              "name": "disableSecondaryButton",
+              "description": "Disable the secondary button action.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -874,27 +934,12 @@
               }
             },
             {
-              "name": "value",
-              "description": "Current value of the filter",
+              "name": "fitContent",
+              "description": "Sets the size of the container to fit its content",
               "value": {
                 "kind": "expression",
-                "type": "string | string[]"
-              },
-              "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "name": "apply"
-            },
-            {
-              "name": "clear"
-            },
-            {
-              "name": "open"
-            },
-            {
-              "name": "close"
+                "type": "BentoPopover.props.fitContent"
+              }
             }
           ],
           "slots": [
@@ -911,6 +956,15 @@
           "name": "bento-boolean-filter",
           "description": "Example description of the component...",
           "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
             {
               "name": "field",
               "required": true,
@@ -1341,6 +1395,34 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-data-grid",
+          "description": "",
+          "attributes": [
+            {
+              "name": "columns",
+              "required": true,
+              "description": "Column definitions",
+              "value": {
+                "kind": "expression",
+                "type": "BentoColumn[]"
+              }
+            },
+            {
+              "name": "condensed",
+              "description": "Sets the row cells to the condensed padding state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-data-grid",
           "description": "",
@@ -1529,34 +1611,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-data-grid",
-          "description": "",
-          "attributes": [
-            {
-              "name": "columns",
-              "required": true,
-              "description": "Column definitions",
-              "value": {
-                "kind": "expression",
-                "type": "BentoColumn[]"
-              }
-            },
-            {
-              "name": "condensed",
-              "description": "Sets the row cells to the condensed padding state.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-data-grid",
           "description": "",
@@ -1621,6 +1675,61 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-filter",
+          "description": "The Date filter displays a calendar that allows\nto select a single date.",
+          "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateFilterValue"
+              },
+              "default": "null"
+            },
+            {
+              "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 +1766,7 @@
               "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "func"
+                "type": "BentoDatePickerIsDateDisabled"
               },
               "default": "undefined"
             },
@@ -1688,14 +1797,31 @@
               },
               "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",
+              "description": "Allows to render a single date calendar or a range calendar",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatePickerVariant"
+              },
+              "default": "BentoDatePickerVariant.SINGLE_CALENDAR"
             }
           ],
           "source": {
@@ -1703,6 +1829,113 @@
             "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": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateRangeFilterValue"
+              },
+              "default": "null"
+            },
+            {
+              "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": "",
@@ -1775,6 +2008,15 @@
               },
               "default": "undefined"
             },
+            {
+              "name": "inputSize",
+              "description": "Dropdown input size",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdownSize"
+              },
+              "default": "BentoDropdownSize.DEFAULT"
+            },
             {
               "name": "items",
               "required": true,
@@ -2085,6 +2327,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": {
@@ -2123,6 +2374,24 @@
               },
               "default": "false"
             },
+            {
+              "name": "dropdown",
+              "description": "Dropdown props for the small selectable dropdown menu.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputDropdownProps"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "dropdownPosition",
+              "description": "Position of the dropdown before or after input value",
+              "value": {
+                "kind": "expression",
+                "type": "BentoInputFieldElementPosition"
+              },
+              "default": "BentoInputFieldElementPosition.START"
+            },
             {
               "name": "error",
               "description": "Adds error validation class for outlining input-field",
@@ -2132,6 +2401,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",
@@ -2146,9 +2424,9 @@
               "description": "Position of Static Value before or after input value",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldStaticValuePosition"
+                "type": "BentoInputFieldElementPosition"
               },
-              "default": "BentoInputFieldStaticValuePosition.START"
+              "default": "BentoInputFieldElementPosition.START"
             },
             {
               "name": "type",
@@ -2180,10 +2458,7 @@
           ],
           "events": [
             {
-              "name": "escape-pressed"
-            },
-            {
-              "name": "input"
+              "name": "<undefined>"
             }
           ],
           "slots": [
@@ -2215,6 +2490,15 @@
           "name": "bento-input-filter",
           "description": "",
           "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
             {
               "name": "field",
               "required": true,
@@ -2635,15 +2919,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.",
@@ -2661,6 +2936,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": {
@@ -2748,6 +3046,24 @@
               },
               "default": "null"
             },
+            {
+              "name": "withColumnLayout",
+              "description": "If provided, renders the modal's content in a two-column layout an wth dividers separating its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "columnsSize",
+              "description": "If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalColumnLayoutVariant"
+              },
+              "default": "BentoModalColumnLayoutVariant.SMALLER"
+            },
             {
               "name": "actionsLabel",
               "description": "Text label that is displayed left to the action buttons",
@@ -2789,6 +3105,12 @@
             {
               "name": "default"
             },
+            {
+              "name": "content-col-1"
+            },
+            {
+              "name": "content-col-2"
+            },
             {
               "name": "content"
             }
@@ -2847,6 +3169,24 @@
               },
               "default": "null"
             },
+            {
+              "name": "withColumnLayout",
+              "description": "If provided, renders the modal's content in a two-column layout an wth dividers separating its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "columnsSize",
+              "description": "If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalColumnLayoutVariant"
+              },
+              "default": "BentoModalColumnLayoutVariant.SMALLER"
+            },
             {
               "name": "actions",
               "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\nBut you may change the color of 1-st action to red with 'critial' key\nNot more than 3 action buttons can be provided\nOr 2 action buttons and 1 Label for them\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',2\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
@@ -2888,6 +3228,12 @@
             {
               "name": "default"
             },
+            {
+              "name": "content-col-1"
+            },
+            {
+              "name": "content-col-2"
+            },
             {
               "name": "content"
             },
@@ -3134,6 +3480,15 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "small",
+              "description": "Render payment method icon in a smaller size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -3199,6 +3554,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",
@@ -3426,6 +3790,15 @@
           "name": "bento-range-filter",
           "description": "Range filter used in the filter-bar component.",
           "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "string[]"
+              },
+              "default": "null"
+            },
             {
               "name": "field",
               "required": true,
@@ -3486,6 +3859,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",
@@ -3612,6 +3994,15 @@
           "name": "bento-select-filter",
           "description": "The Listbox filter displays a listbox of items\npassed in the \"options.listboxItems\" property.",
           "attributes": [
+            {
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "null"
+            },
             {
               "name": "field",
               "required": true,
@@ -4480,6 +4871,15 @@
                 "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": [
@@ -4533,8 +4933,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"
@@ -4592,66 +5001,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"
             },
@@ -4660,18 +5023,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",
@@ -4683,128 +5046,155 @@
               }
             },
             {
-              "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": [
+            {
+              "name": "<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>"
             }
           ],
           "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/__test__/date-picker-calendar-day-stub.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-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"
+                "type": "DatePickerCalendarPane.props.isDateDisabled"
+              }
+            },
+            {
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPane.props.numberOfMonths"
+              }
+            },
+            {
+              "name": "dateFormData",
+              "description": "Ranges form persistance data",
+              "value": {
+                "kind": "expression",
+                "type": "object"
               },
-              "default": "false"
+              "default": "{\n    startDate: undefined,\n    endDate: undefined\n}"
             },
             {
-              "name": "disabled",
-              "description": "Indicate if a date should be disabled or not",
+              "name": "value",
+              "description": "Selected date",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "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": [
+          "slots": [
             {
-              "name": "<undefined>"
+              "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"
           }
         },
@@ -5204,6 +5594,13 @@
                 "kind": "expression",
                 "type": "BentoDropdown.props.multiple"
               }
+            },
+            {
+              "name": "placeholder",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.placeholder"
+              }
             }
           ],
           "source": {
@@ -5324,6 +5721,14 @@
               "default": "''"
             }
           ],
+          "events": [
+            {
+              "name": "open"
+            },
+            {
+              "name": "close"
+            }
+          ],
           "source": {
             "module": "./src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue",
             "symbol": "default"
@@ -5371,7 +5776,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/summary-grid/components/grid-layout/grid-layout.vue",
+            "module": "./src/components/internal/grid-layout/grid-layout.vue",
             "symbol": "default"
           }
         },
@@ -5671,6 +6076,13 @@
                 "type": "BentoPopover.props.fixedPositioning"
               }
             },
+            {
+              "name": "fitContent",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopover.props.fitContent"
+              }
+            },
             {
               "name": "large",
               "value": {