@telus-uds/components-base 1.19.0 → 1.21.0

package/component-docs.json

@@ -7,7 +7,8 @@
         "color": "color"
       },
       "Box": {
-        "backgroundColor": "color"
+        "backgroundColor": "color",
+        "gradient": "gradient"
       },
       "Button": {
         "borderColor": "color",
@@ -39,6 +40,42 @@
         "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": {
         "space": "integer",
         "fieldSpace": "integer",
@@ -87,6 +124,7 @@
         "shadow": "shadow"
       },
       "Carousel": {
+        "backgroundColor": "color",
         "nextIcon": "icon",
         "previousIcon": "icon",
         "showPreviousNextNavigation": "show",
@@ -827,6 +865,7 @@
         "buttonSize": "size",
         "buttonsGap": "size",
         "buttonsPaddingRight": "size",
+        "clearButtonIcon": "icon",
         "paddingTop": "size",
         "paddingBottom": "size",
         "paddingLeft": "size",
@@ -973,14 +1012,63 @@
           "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.",
@@ -1002,6 +1090,13 @@
             true
           ],
           "type": "state"
+        },
+        "open": {
+          "description": "Applies when a ButtonDropdown is open.",
+          "values": [
+            true
+          ],
+          "type": "state"
         }
       },
       "ButtonGroupItem": {
@@ -1010,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.",
@@ -1047,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.",
@@ -1097,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.",
@@ -1120,7 +1233,10 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       },
       "ExpandCollapseControl": {
@@ -1136,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",
@@ -1178,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.",
@@ -1201,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.",
@@ -1224,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.",
@@ -1290,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.",
@@ -1320,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.",
@@ -1374,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.",
@@ -1410,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.",
@@ -1453,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.",
@@ -1476,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
           ],
@@ -1499,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.",
@@ -1537,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
           ],
@@ -1583,7 +1765,10 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       },
       "SideNavItemGroup": {
@@ -1621,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.",
@@ -1651,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.",
@@ -1696,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
           ],
@@ -1719,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.",
@@ -1756,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.",
@@ -1779,7 +1991,10 @@
           "values": [
             true
           ],
-          "type": "state"
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       }
     }
@@ -2137,6 +2352,10 @@
                 "forceAbsoluteFontSizing": {
                   "name": "bool",
                   "required": false
+                },
+                "forceZIndex": {
+                  "name": "bool",
+                  "required": false
                 }
               }
             },
@@ -2304,7 +2523,8 @@
             "type": {
               "name": "custom",
               "raw": {
-                "backgroundColor": "color"
+                "backgroundColor": "color",
+                "gradient": "gradient"
               }
             },
             "required": false,
@@ -5250,111 +5470,317 @@
         }
       }
     },
-    "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",
-                "dismissIcon": "icon",
-                "dismissIconColor": "color",
-                "dismissIconSize": "size",
-                "dismissButtonGap": "size"
-              }
+              "name": "number"
             },
             "required": false,
-            "description": ""
+            "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."
           },
-          "variant": {
+          "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",
+                "dismissButtonGap": "size"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
             "type": {
               "name": "objectOf",
               "value": {
@@ -8074,7 +8500,7 @@
         "props": {
           "themeOptions": {
             "defaultValue": {
-              "value": "{ forceAbsoluteFontSizing: true }",
+              "value": "{}",
               "computed": false
             },
             "type": {
@@ -8084,6 +8510,14 @@
                   "name": "bool",
                   "required": false
                 },
+                "forceZIndex": {
+                  "name": "bool",
+                  "required": false
+                },
+                "enableHelmetSSR": {
+                  "name": "bool",
+                  "required": false
+                },
                 "contentMaxWidth": {
                   "name": "custom",
                   "raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
@@ -8092,7 +8526,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`)\n- `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be\n  disabled unless a web app has been specifically configured to stop React Helmet accumulating\n  instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet"
           },
           "children": {
             "type": {
@@ -8969,6 +9403,213 @@
         }
       }
     },
+    "ButtonDropdown": {
+      "docs": {
+        "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": "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```"
+          },
+          "onBlur": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "onBlur handler"
+          },
+          "onFocus": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "onFocus handler"
+          },
+          "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": ""
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Alias for `inactive`"
+          },
+          "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": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
+          },
+          "icon": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "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": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "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": {
+          "acceptsRNA11yProps": true
+        }
+      }
+    },
     "ButtonGroup": {
       "docs": {
         "description": "",
@@ -9675,6 +10316,7 @@
             "type": {
               "name": "custom",
               "raw": {
+                "backgroundColor": "color",
                 "nextIcon": "icon",
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
@@ -9740,7 +10382,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": {
@@ -9916,6 +10558,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"
@@ -9947,6 +10610,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": {
@@ -9994,6 +10664,7 @@
             "type": {
               "name": "custom",
               "raw": {
+                "backgroundColor": "color",
                 "nextIcon": "icon",
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
@@ -10153,7 +10824,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": {
@@ -10386,6 +11057,7 @@
             "type": {
               "name": "custom",
               "raw": {
+                "backgroundColor": "color",
                 "nextIcon": "icon",
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
@@ -11849,6 +12521,7 @@
                 "buttonSize": "size",
                 "buttonsGap": "size",
                 "buttonsPaddingRight": "size",
+                "clearButtonIcon": "icon",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",
@@ -11938,6 +12611,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",
@@ -11950,6 +12630,7 @@
                 "buttonSize": "size",
                 "buttonsGap": "size",
                 "buttonsPaddingRight": "size",
+                "clearButtonIcon": "icon",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",
@@ -12405,6 +13086,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
+        }
+      }
     }
   }
 }