@telus-uds/components-base 1.18.1 → 1.20.0

package/component-docs.json

@@ -7,7 +7,8 @@
         "color": "color"
       },
       "Box": {
-        "backgroundColor": "color"
+        "backgroundColor": "color",
+        "gradient": "gradient"
       },
       "Button": {
         "borderColor": "color",
@@ -35,6 +36,44 @@
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
+        "outerBackgroundColor": "color",
+        "textLine": "textLine",
+        "textLineStyle": "textLineStyle"
+      },
+      "ButtonDropdown": {
+        "icon": "icon",
+        "iconPosition": "position",
+        "iconSpace": "integer",
+        "iconSize": "size",
+        "iconColor": "color",
+        "iconPadding": "size",
+        "iconAlignSelf": "flexAlign",
+        "iconTranslateX": "size",
+        "iconTranslateY": "size",
+        "iconBackground": "color",
+        "iconBorderRadius": "radius",
+        "borderColor": "color",
+        "borderWidth": "border",
+        "borderRadius": "radius",
+        "shadow": "shadow",
+        "fontSize": "fontSize",
+        "color": "color",
+        "lineHeight": "lineHeight",
+        "textAlign": "flexJustifyContent",
+        "alignSelf": "flexAlign",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "backgroundColor": "color",
+        "opacity": "opacity",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "width": "size",
+        "minWidth": "size",
+        "outerBorderColor": "color",
+        "outerBorderWidth": "border",
+        "outerBorderGap": "size",
         "outerBackgroundColor": "color"
       },
       "ButtonGroup": {
@@ -85,6 +124,7 @@
         "shadow": "shadow"
       },
       "Carousel": {
+        "backgroundColor": "color",
         "nextIcon": "icon",
         "previousIcon": "icon",
         "showPreviousNextNavigation": "show",
@@ -403,7 +443,8 @@
         "iconSize": "size",
         "iconDisplace": "size",
         "width": "size",
-        "textAlign": "flexJustifyContent"
+        "textAlign": "flexJustifyContent",
+        "displayLabel": "show"
       },
       "Progress": {
         "backgroundColor": "color",
@@ -821,6 +862,10 @@
         "borderWidth": "border",
         "borderColor": "color",
         "borderRadius": "radius",
+        "buttonSize": "size",
+        "buttonsGap": "size",
+        "buttonsPaddingRight": "size",
+        "clearButtonIcon": "icon",
         "paddingTop": "size",
         "paddingBottom": "size",
         "paddingLeft": "size",
@@ -967,15 +1012,64 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "inactive": {
+          "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
+          "values": [
+            true
+          ],
           "type": "state"
         },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
+      "ButtonDropdown": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
           "values": [
@@ -996,6 +1090,13 @@
             true
           ],
           "type": "state"
+        },
+        "open": {
+          "description": "Applies when a ButtonDropdown is open.",
+          "values": [
+            true
+          ],
+          "type": "state"
         }
       },
       "ButtonGroupItem": {
@@ -1004,14 +1105,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1041,14 +1148,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1091,14 +1204,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "inactive": {
           "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
@@ -1114,7 +1233,10 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       },
       "ExpandCollapseControl": {
@@ -1130,14 +1252,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
@@ -1172,14 +1300,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1195,14 +1329,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1218,14 +1358,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1284,14 +1430,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1314,14 +1466,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1344,6 +1502,13 @@
           ],
           "description": "Determines which way does the button navigate in Pagination's context",
           "type": "state"
+        },
+        "compact": {
+          "values": [
+            true
+          ],
+          "description": "Determines if the \"Next\" and \"Previous\" labels should be omitted",
+          "type": "state"
         }
       },
       "ProgressBar": {
@@ -1361,14 +1526,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1397,14 +1568,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "inactive": {
           "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
@@ -1440,14 +1617,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "inactive": {
           "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
@@ -1463,10 +1646,13 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "focus": {
-          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "description": "Focus states for some input elements are well supported across web, RN, ios and android",
           "values": [
             true
           ],
@@ -1486,14 +1672,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1524,10 +1716,13 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "focus": {
-          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "description": "Focus states for some input elements are well supported across web, RN, ios and android",
           "values": [
             true
           ],
@@ -1570,7 +1765,10 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       },
       "SideNavItemGroup": {
@@ -1608,14 +1806,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1638,14 +1842,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1683,17 +1893,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
-        "focus": {
-          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+        "inactive": {
+          "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
           "values": [
             true
           ],
           "type": "state"
         },
-        "inactive": {
-          "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
+        "focus": {
+          "description": "Focus states for some input elements are well supported across web, RN, ios and android",
           "values": [
             true
           ],
@@ -1706,14 +1919,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1743,14 +1962,20 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "hover": {
           "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -1766,7 +1991,10 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       }
     }
@@ -2124,6 +2352,10 @@
                 "forceAbsoluteFontSizing": {
                   "name": "bool",
                   "required": false
+                },
+                "forceZIndex": {
+                  "name": "bool",
+                  "required": false
                 }
               }
             },
@@ -2291,7 +2523,8 @@
             "type": {
               "name": "custom",
               "raw": {
-                "backgroundColor": "color"
+                "backgroundColor": "color",
+                "gradient": "gradient"
               }
             },
             "required": false,
@@ -5237,101 +5470,307 @@
         }
       }
     },
-    "Notification": {
+    "MultiSelectFilter": {
       "docs": {
-        "description": "A banner that highlights important messages:\n- Status message to show there is an error or outage of services\n- Confirmation message in response to user action\n- Account information letting the user know they have almost used all their data\n\n## Usage criteria\n- Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs\n- Show notifications before the content that the message is related to, otherwise show at the top of the main content\n- Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport\n- When showing multiple notifications, show them in order of importance from top to bottom\n- Use variants to visually show the type of message contained within the Notification.\n- The icon and colour will indicate meaning and importance\n\n### Variants\n- Use `variant.style` to set the visual style of the notification\n- Use `dismissible` prop to enable dismissible functionality\n- Use `system` prop to set the visual style of the notification and denote an announcement from the system or application\n\n### When to use the system prop?\n- Use `system` to show system-based messages coming from the application\n- Don’t use `system` when the message is in response to user action\n\n## Variants\n\n#### Success\nUse the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.\n\n#### Warning\nUse the warning variant to provide feedback of a warning; users would still be able to proceed forward.\nThe message will include an icon to indicate meaning and importance.\n\n#### Error\nUse the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.\n\n#### Dismissible\nDismissible notifications should only be used for default or success notifications where there is no action needed from the user.\nIf the information is passive then it should be dismissible as indicated by an interactive close button on the far right.\nIf the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.\n\nUse the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.\n\nPlease note:\n\n- Default and Success variants are dismissible\n- Error and Warning variants are not dismissible\n\n#### System message\nUse full-width `Notifications` to show system-based messages coming from the application, not in response to user action.\nShow system notifications at the top of the page, below the navigation, and expands the full-width of the viewport",
+        "description": "",
         "props": {
-          "copy": {
+          "id": {
             "defaultValue": {
-              "value": "'en'",
+              "value": "label",
+              "computed": true
+            },
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "An optional unique string may be provided to identify the ButtonDropdown.\nIf not provided, the label is used."
+          },
+          "items": {
+            "defaultValue": {
+              "value": "[]",
               "computed": false
             },
             "type": {
-              "name": "union",
-              "value": [
-                {
-                  "name": "enum",
-                  "value": [
-                    {
-                      "value": "'en'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'fr'",
-                      "computed": false
-                    }
-                  ]
-                },
-                {
-                  "name": "shape",
-                  "value": {
-                    "dismiss": {
-                      "name": "string",
-                      "required": false
-                    }
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": {
+                  "label": {
+                    "name": "string",
+                    "description": "The text displayed to the user with a checkbox, describing this option.",
+                    "required": true
+                  },
+                  "id": {
+                    "name": "string",
+                    "description": "An optional unique string may be provided to identify this option.\nIf not provided, the label is used.",
+                    "required": false
                   }
                 }
-              ]
+              }
             },
             "required": false,
-            "description": "Select English or French copy for the accessible label of the dismiss button."
+            "description": "The options a user may select."
           },
-          "children": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
             "type": {
-              "name": "union",
+              "name": "enum",
               "value": [
                 {
-                  "name": "string"
-                },
-                {
-                  "name": "node"
+                  "value": "'en'",
+                  "computed": false
                 },
                 {
-                  "name": "func"
+                  "value": "'fr'",
+                  "computed": false
                 }
               ]
             },
             "required": false,
-            "description": "Content of the `Notification`."
+            "description": "Select English or French copy for the accessible label."
           },
-          "system": {
+          "readOnly": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
             "type": {
-              "name": "bool"
+              "name": "string"
             },
             "required": false,
-            "description": "Use `system` prop to set the visual style of the notification and denote an announcement from the system or application"
+            "description": "If true, the ButtonDropdown cannot be selected by the user and simply show their current state."
           },
-          "dismissible": {
+          "inactive": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
             "type": {
-              "name": "bool"
+              "name": "string"
             },
             "required": false,
-            "description": "Use the `dismissible` prop to allow users to dismiss the Notification at any time."
+            "description": "If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is\nset as `disabled` and if the theme supports `inactive` appearances rules, these\nare applied."
           },
-          "tokens": {
+          "rowLimit": {
+            "defaultValue": {
+              "value": "12",
+              "computed": false
+            },
             "type": {
-              "name": "custom",
-              "raw": {
-                "backgroundColor": "color",
-                "borderBottomWidth": "border",
-                "borderTopWidth": "border",
-                "borderLeftWidth": "border",
-                "borderRightWidth": "border",
-                "borderColor": "color",
-                "borderRadius": "radius",
-                "paddingTop": "size",
-                "paddingBottom": "size",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "color": "color",
-                "fontSize": "fontSize",
-                "lineHeight": "lineHeight",
-                "fontName": "fontName",
-                "fontWeight": "fontWeight",
-                "icon": "icon",
-                "iconColor": "color",
-                "iconSize": "size",
-                "iconGap": "size",
+              "name": "number"
+            },
+            "required": false,
+            "description": "Sets the maximum number of items in one column. If number of items are more\nthan the `rowLimit`, they will be rendered in 2 columns."
+          },
+          "label": {
+            "type": {
+              "name": "string"
+            },
+            "required": true,
+            "description": "The text displayed to the user in a ButtonDropdown."
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": "Sets the variant for ButtonDropdown element."
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "icon": "icon",
+                "iconPosition": "position",
+                "iconSpace": "integer",
+                "iconSize": "size",
+                "iconColor": "color",
+                "iconPadding": "size",
+                "iconAlignSelf": "flexAlign",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "iconBackground": "color",
+                "iconBorderRadius": "radius",
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "shadow": "shadow",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textAlign": "flexJustifyContent",
+                "alignSelf": "flexAlign",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "width": "size",
+                "minWidth": "size",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": "Sets the tokens for ButtonDropdown element."
+          },
+          "values": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            },
+            "required": false,
+            "description": "If the selected item(s) in the checkbox group(s) are to be controlled externally by\na parent component, pass an array of strings as well as an `onChange` handler.\nPassing an array for \"values\" makes the MultiSelectFilter a \"controlled\" component that\nexpects its state to be handled via `onChange` and so doesn't handle it itself."
+          },
+          "initialValues": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            },
+            "required": false,
+            "description": "If `values` is not passed, making the MultiSelectFilter an \"uncontrolled\" component\nmanaging its own selected state, a default set of selections may be provided.\nChanging the `initialValues` does not change the user's selections."
+          },
+          "maxValues": {
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "If provided, sets a maximum number of items a user may select at once."
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "If provided, this function is called when the current selection is changed\nand is passed an array of the `id`s of all currently selected `items`."
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "Notification": {
+      "docs": {
+        "description": "A banner that highlights important messages:\n- Status message to show there is an error or outage of services\n- Confirmation message in response to user action\n- Account information letting the user know they have almost used all their data\n\n## Usage criteria\n- Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs\n- Show notifications before the content that the message is related to, otherwise show at the top of the main content\n- Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport\n- When showing multiple notifications, show them in order of importance from top to bottom\n- Use variants to visually show the type of message contained within the Notification.\n- The icon and colour will indicate meaning and importance\n\n### Variants\n- Use `variant.style` to set the visual style of the notification\n- Use `dismissible` prop to enable dismissible functionality\n- Use `system` prop to set the visual style of the notification and denote an announcement from the system or application\n\n### When to use the system prop?\n- Use `system` to show system-based messages coming from the application\n- Don’t use `system` when the message is in response to user action\n\n## Variants\n\n#### Success\nUse the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.\n\n#### Warning\nUse the warning variant to provide feedback of a warning; users would still be able to proceed forward.\nThe message will include an icon to indicate meaning and importance.\n\n#### Error\nUse the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.\n\n#### Dismissible\nDismissible notifications should only be used for default or success notifications where there is no action needed from the user.\nIf the information is passive then it should be dismissible as indicated by an interactive close button on the far right.\nIf the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.\n\nUse the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.\n\nPlease note:\n\n- Default and Success variants are dismissible\n- Error and Warning variants are not dismissible\n\n#### System message\nUse full-width `Notifications` to show system-based messages coming from the application, not in response to user action.\nShow system notifications at the top of the page, below the navigation, and expands the full-width of the viewport",
+        "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "enum",
+                  "value": [
+                    {
+                      "value": "'en'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'fr'",
+                      "computed": false
+                    }
+                  ]
+                },
+                {
+                  "name": "shape",
+                  "value": {
+                    "dismiss": {
+                      "name": "string",
+                      "required": false
+                    }
+                  }
+                }
+              ]
+            },
+            "required": false,
+            "description": "Select English or French copy for the accessible label of the dismiss button."
+          },
+          "children": {
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "node"
+                },
+                {
+                  "name": "func"
+                }
+              ]
+            },
+            "required": false,
+            "description": "Content of the `Notification`."
+          },
+          "system": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Use `system` prop to set the visual style of the notification and denote an announcement from the system or application"
+          },
+          "dismissible": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Use the `dismissible` prop to allow users to dismiss the Notification at any time."
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "backgroundColor": "color",
+                "borderBottomWidth": "border",
+                "borderTopWidth": "border",
+                "borderLeftWidth": "border",
+                "borderRightWidth": "border",
+                "borderColor": "color",
+                "borderRadius": "radius",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "color": "color",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "icon": "icon",
+                "iconColor": "color",
+                "iconSize": "size",
+                "iconGap": "size",
                 "dismissIcon": "icon",
                 "dismissIconColor": "color",
                 "dismissIconSize": "size",
@@ -5496,7 +5935,8 @@
                 "iconSize": "size",
                 "iconDisplace": "size",
                 "width": "size",
-                "textAlign": "flexJustifyContent"
+                "textAlign": "flexJustifyContent",
+                "displayLabel": "show"
               }
             },
             "required": false,
@@ -6409,6 +6849,81 @@
         }
       }
     },
+    "Responsive": {
+      "docs": {
+        "description": "Responsive conditionally renders children based on whether the viewport matches the provided\nmin and max viewports.\n\nIn SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and\nduring first hydration on the client side; then if the viewport is not `xs`, it re-renders\nafter hydration. This may cause a layout shift on devices other than the narrowest.",
+        "props": {
+          "min": {
+            "defaultValue": {
+              "value": "'xs'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'xs'",
+                  "computed": false
+                },
+                {
+                  "value": "'sm'",
+                  "computed": false
+                },
+                {
+                  "value": "'md'",
+                  "computed": false
+                },
+                {
+                  "value": "'lg'",
+                  "computed": false
+                },
+                {
+                  "value": "'xl'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "max": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'sm'",
+                  "computed": false
+                },
+                {
+                  "value": "'md'",
+                  "computed": false
+                },
+                {
+                  "value": "'lg'",
+                  "computed": false
+                },
+                {
+                  "value": "'xl'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Search": {
       "docs": {
         "description": "The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.\nUse `Search` to feature autocomplete interactions.\n\nThis component includes a clear button, which will appear as text is entered and pressing it will\ncause the input's internal state value to be set to an empty string.\n\nThis component may only be used as uncontrolled, as the search value is managed within an internal state.\nYou can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.\n\nUse the following props to supply additional accessibility labels for the input - `accessibilityLabel`,\nclear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.",
@@ -7985,7 +8500,7 @@
         "props": {
           "themeOptions": {
             "defaultValue": {
-              "value": "{ forceAbsoluteFontSizing: true }",
+              "value": "{ forceAbsoluteFontSizing: true, forceZIndex: true }",
               "computed": false
             },
             "type": {
@@ -7995,6 +8510,10 @@
                   "name": "bool",
                   "required": false
                 },
+                "forceZIndex": {
+                  "name": "bool",
+                  "required": false
+                },
                 "contentMaxWidth": {
                   "name": "custom",
                   "raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
@@ -8003,7 +8522,7 @@
               }
             },
             "required": false,
-            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n  such as Footnote and Notification to avoid content to stretch width more then the page's width"
+            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n  such as Footnote and Notification to avoid content to stretch width more then the page's width\n- `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`\n  and when true, sets zIndex to be `0` (the default from `react-native-web`)"
           },
           "children": {
             "type": {
@@ -8611,36 +9130,247 @@
                 {
                   "value": "'right'",
                   "computed": false
-                },
-                {
-                  "value": "'center'",
-                  "computed": false
-                },
-                {
-                  "value": "'justify'",
-                  "computed": false
+                },
+                {
+                  "value": "'center'",
+                  "computed": false
+                },
+                {
+                  "value": "'justify'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Works the same as css text-align, note that RN doesn't support \"start\" or \"end\" (see https://reactnative.dev/docs/text-style-props#textalign)\nJustify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)"
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textTransform": "textTransform",
+                "fontScaleCap": "fontSize",
+                "letterSpacing": "letterSpacing"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "heading": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'h1'",
+                  "computed": false
+                },
+                {
+                  "value": "'h2'",
+                  "computed": false
+                },
+                {
+                  "value": "'h3'",
+                  "computed": false
+                },
+                {
+                  "value": "'h4'",
+                  "computed": false
+                },
+                {
+                  "value": "'h5'",
+                  "computed": false
+                },
+                {
+                  "value": "'h6'",
+                  "computed": false
+                },
+                {
+                  "value": "true",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.\n\nDoes not affect styling: <Typography heading=\"h2\"> will render a <h2> that looks like plain text.\nUse both `heading` and `variant` props to render semantic headings that look like headings.\n\nIn native apps, if this is `true` or any html heading tag string and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "Same children allowed as a React Native <Text> node"
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "ViewportProvider": {
+      "docs": {
+        "description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
+        "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "Button": {
+      "docs": {
+        "description": "",
+        "props": {
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "shadow": "shadow",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textAlign": "flexJustifyContent",
+                "alignSelf": "flexAlign",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "width": "size",
+                "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "inactive": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Alias for `inactive`"
+          },
+          "children": {
+            "type": {
+              "name": "custom",
+              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
+            },
+            "required": false,
+            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
+          },
+          "onPress": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Function called when the button is pressed. Required unless the button has a href."
+          },
+          "iconProps": {
+            "type": {
+              "name": "exact",
+              "value": {
+                "variant": {
+                  "name": "custom",
+                  "raw": "variantProp.propType",
+                  "required": false
+                },
+                "tokens": {
+                  "name": "custom",
+                  "raw": "getTokensPropType('Icon')",
+                  "required": false
+                },
+                "accessibilityLabel": {
+                  "name": "string",
+                  "description": "Descriptive label used in web SVG title tag for accessibility",
+                  "required": false
+                },
+                "scalesWithText": {
+                  "name": "bool",
+                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Optional variant that may be passed down to the link's icon if there is one"
+          },
+          "iconPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
                 }
               ]
             },
             "required": false,
-            "description": "Works the same as css text-align, note that RN doesn't support \"start\" or \"end\" (see https://reactnative.dev/docs/text-style-props#textalign)\nJustify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)"
+            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
           },
-          "tokens": {
+          "icon": {
             "type": {
-              "name": "custom",
-              "raw": {
-                "fontName": "fontName",
-                "fontWeight": "fontWeight",
-                "fontSize": "fontSize",
-                "color": "color",
-                "lineHeight": "lineHeight",
-                "textTransform": "textTransform",
-                "fontScaleCap": "fontSize",
-                "letterSpacing": "letterSpacing"
-              }
+              "name": "func"
             },
             "required": false,
-            "description": ""
+            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
           },
           "variant": {
             "type": {
@@ -8662,78 +9392,61 @@
             },
             "required": false,
             "description": ""
-          },
-          "heading": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'h1'",
-                  "computed": false
-                },
-                {
-                  "value": "'h2'",
-                  "computed": false
-                },
-                {
-                  "value": "'h3'",
-                  "computed": false
-                },
-                {
-                  "value": "'h4'",
-                  "computed": false
-                },
-                {
-                  "value": "'h5'",
-                  "computed": false
-                },
-                {
-                  "value": "'h6'",
-                  "computed": false
-                },
-                {
-                  "value": "true",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.\n\nDoes not affect styling: <Typography heading=\"h2\"> will render a <h2> that looks like plain text.\nUse both `heading` and `variant` props to render semantic headings that look like headings.\n\nIn native apps, if this is `true` or any html heading tag string and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
-          },
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": false,
-            "description": "Same children allowed as a React Native <Text> node"
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": false
+          "acceptsRNA11yProps": true
         }
       }
     },
-    "ViewportProvider": {
+    "ButtonDropdown": {
       "docs": {
-        "description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
+        "description": "",
         "props": {
+          "inactive": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
+          },
+          "readOnly": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "required": false
+          },
           "children": {
+            "defaultValue": {
+              "value": "null",
+              "computed": false
+            },
             "type": {
-              "name": "node"
+              "name": "custom",
+              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
             },
-            "required": true,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "Button": {
-      "docs": {
-        "description": "",
-        "props": {
+            "required": false,
+            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
+          },
+          "onBlur": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "onBlur handler"
+          },
+          "onFocus": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "onFocus handler"
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -8763,19 +9476,14 @@
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
               }
             },
             "required": false,
             "description": ""
           },
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
-          },
           "disabled": {
             "type": {
               "name": "bool"
@@ -8783,14 +9491,6 @@
             "required": false,
             "description": "Alias for `inactive`"
           },
-          "children": {
-            "type": {
-              "name": "custom",
-              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
-            },
-            "required": false,
-            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
-          },
           "onPress": {
             "type": {
               "name": "func"
@@ -8871,6 +9571,34 @@
             },
             "required": false,
             "description": ""
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Callback called when a controlled ButtonDropdown gets interacted with."
+          },
+          "value": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "`value` prop is being used to set the 'open' state of ButtonDropdown. Use it for\n controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`."
+          },
+          "initialValue": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Use `initialValue` to provide the initial value for an uncontrolled version."
+          },
+          "label": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "The label of ButtonDropdown."
           }
         },
         "attributes": {
@@ -9152,7 +9880,9 @@
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
               }
             },
             "required": false,
@@ -9571,17 +10301,6 @@
             "required": false,
             "description": "HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that\nassistive technology tools know to intepret the carousel as a list.\n\nNote that if the immediate Carousel children do not all render as `'li'` elements,\nthis should be changed (e.g. pass tag=\"div\") because only 'li' is a valid child of 'ul'."
           },
-          "accessibilityLabel": {
-            "defaultValue": {
-              "value": "title",
-              "computed": true
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Provide custom accessibilityLabel for Carousel container"
-          },
           "accessibilityLiveRegion": {
             "defaultValue": {
               "value": "'polite'",
@@ -9593,6 +10312,7 @@
             "type": {
               "name": "custom",
               "raw": {
+                "backgroundColor": "color",
                 "nextIcon": "icon",
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
@@ -9658,7 +10378,7 @@
               "name": "func"
             },
             "required": false,
-            "description": "Called when active index changed\nThis function is also provided with a parameter indicating changed index (either 1, or -1)\nUse it as follows:\n```js\n   const onIndexChangedCallback = React.useCallback((changedIndex) => {\n     console.log(changedIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onIndexChanged={onIndexChangedCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues"
+            "description": "Called when active index changed\nThis function is also provided with a parameter indicating changed index (either 1, or -1)\nUse it as follows:\n```js\n   const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {\n     console.log(changedIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onIndexChanged={onIndexChangedCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues"
           },
           "skipLinkHref": {
             "type": {
@@ -9728,6 +10448,13 @@
             },
             "required": false,
             "description": "Provide custom accessibilityRole for Carousel container"
+          },
+          "accessibilityLabel": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Provide custom accessibilityLabel for Carousel container"
           }
         },
         "attributes": {
@@ -9827,6 +10554,27 @@
               "required": false,
               "description": "Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees\nthe Carousel as a list of items.\n\nCarousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either\n`Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML."
             },
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
+              },
+              "required": false,
+              "description": ""
+            },
             "elementIndex": {
               "type": {
                 "name": "number"
@@ -9858,6 +10606,13 @@
               },
               "required": true,
               "description": "Content of the slide"
+            },
+            "setContentBackgroundColor": {
+              "type": {
+                "name": "func"
+              },
+              "required": false,
+              "description": "Function to set carousel content background color when slide is being display"
             }
           },
           "attributes": {
@@ -9905,6 +10660,7 @@
             "type": {
               "name": "custom",
               "raw": {
+                "backgroundColor": "color",
                 "nextIcon": "icon",
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
@@ -10064,7 +10820,7 @@
               "name": "func"
             },
             "required": false,
-            "description": "Called when active index changed\nThis function is also provided with a parameter indicating changed index (either 1, or -1)\nUse it as follows:\n```js\n   const onIndexChangedCallback = React.useCallback((changedIndex) => {\n     console.log(changedIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onIndexChanged={onIndexChangedCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues"
+            "description": "Called when active index changed\nThis function is also provided with a parameter indicating changed index (either 1, or -1)\nUse it as follows:\n```js\n   const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {\n     console.log(changedIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onIndexChanged={onIndexChangedCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues"
           },
           "skipLinkHref": {
             "type": {
@@ -10297,6 +11053,7 @@
             "type": {
               "name": "custom",
               "raw": {
+                "backgroundColor": "color",
                 "nextIcon": "icon",
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
@@ -11757,6 +12514,10 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "buttonSize": "size",
+                "buttonsGap": "size",
+                "buttonsPaddingRight": "size",
+                "clearButtonIcon": "icon",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",
@@ -11846,6 +12607,13 @@
             "required": false,
             "description": "Use to react upon input's value changes. Required when the `value` prop is set.\nWill receive the input's value as an argument."
           },
+          "onClear": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed."
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -11855,6 +12623,10 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "buttonSize": "size",
+                "buttonsGap": "size",
+                "buttonsPaddingRight": "size",
+                "clearButtonIcon": "icon",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",
@@ -12310,6 +13082,38 @@
           "acceptsRNA11yProps": false
         }
       }
+    },
+    "BaseView": {
+      "docs": {
+        "description": "Identical to React Native's View and supporting all the same props, but with:\n - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts",
+        "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": ""
+          },
+          "style": {
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "object"
+                },
+                {
+                  "name": "array"
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
     }
   }
 }