@telus-uds/components-base 1.1.0 → 1.3.1

package/component-docs.json

@@ -725,6 +725,12 @@
         "trackBorderRadius": "radius",
         "iconSize": "size",
         "iconColor": "color",
+        "labelColor": "color",
+        "labelFontName": "fontName",
+        "labelFontSize": "fontSize",
+        "labelFontWeight": "fontWeight",
+        "labelLineHeight": "lineHeight",
+        "labelMarginLeft": "size",
         "switchSize": "size",
         "switchColor": "color",
         "switchBorderColor": "color",
@@ -732,6 +738,14 @@
         "switchBorderRadius": "radius",
         "switchShadow": "shadow"
       },
+      "ToggleSwitchGroup": {
+        "space": "integer",
+        "direction": "direction",
+        "alignItems": "flexAlign",
+        "justifyContent": "flexJustifyContent",
+        "flexGrow": "integer",
+        "flexShrink": "integer"
+      },
       "Tooltip": {
         "backgroundColor": "color",
         "paddingTop": "size",
@@ -1730,52 +1744,6 @@
             "required": false,
             "description": "Sets right padding using the theme's spacing scale.\n\n@see {@link SpacingValue}"
           },
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Use in tests if the box itself needs to be targetted and no other way of selecting the\nbox is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`)."
-          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -1932,6 +1900,13 @@
             "required": false,
             "description": "Optional semantic HTML tag, to apply to the container on web. Does not change styling.\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
           },
+          "testID": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Use in tests if the box itself needs to be targetted and no other way of selecting the\nbox is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`)."
+          },
           "children": {
             "type": {
               "name": "node"
@@ -1999,7 +1974,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -2007,6 +1982,13 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : undefined",
+              "computed": false
+            },
+            "required": false
+          },
           "children": {
             "type": {
               "name": "union",
@@ -2053,7 +2035,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -3013,59 +2995,6 @@
             "required": false,
             "description": "Whether or not to include gutter at the ends to the left and right of the FlexGrid"
           },
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "dataSet": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
           "xsReverse": {
             "type": {
               "name": "bool"
@@ -3967,7 +3896,7 @@
     },
     "HorizontalScroll": {
       "docs": {
-        "description": "Base component that scrolls horizontally and displays left and right buttons if\nthere is content to the left and the right which can be scrolled to.\n\n@TODO revist `ScrollButton` after IconButton is stable.",
+        "description": "Base component that scrolls horizontally and displays left and right buttons if\nthere is content to the left and the right which can be scrolled to.\n\n@TODO revisit `ScrollButton` after IconButton is stable.",
         "props": {
           "itemPositions": {
             "type": {
@@ -4117,6 +4046,13 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : 'button'",
+              "computed": false
+            },
+            "required": false
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -4223,7 +4159,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -4402,7 +4338,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       },
       "Item": {
@@ -4644,7 +4580,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       },
       "Item": {
@@ -5003,6 +4939,20 @@
             "required": false,
             "description": ""
           },
+          "LinkRouter": {
+            "type": {
+              "name": "elementType"
+            },
+            "required": false,
+            "description": ""
+          },
+          "linkRouterProps": {
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": ""
+          },
           "children": {
             "type": {
               "name": "custom",
@@ -5889,68 +5839,6 @@
       "docs": {
         "description": "A basic form single-choice select component. Use in forms or individually to receive user's input.\n\n## Usage criteria\n- Include a `placeholder` to provide instructions such as \"Please select...\" as an unselectable option (recommended)\n- Use when options are between 7-15 (recommended)\n- For options are 6 and under, use `Radio` groups or `ButtonGroup`.\n- For options 15 and above, look for alternatives (e.g grouping into categories, or input field with auto-complete etc.)\n\n## Controlled component\nIf it is required that the state of the `Select` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `Select`.\nIf the `Select` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `Select` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback. Use the `initialValue` prop to set the\ndefault value for an uncontrolled `Select`.\n\n## Getting feedback for entered values\nUse the `feedback` prop to give the user feedback regarding their selection.\nYou can affirm that the user's selection was correct, or highlight errors that must be corrected, using the `validation` prop.\nKeep feedback text as brief as possible, should be limited to text and links.\n\n## Using a tooltip\nWhen a more in-depth explanation is needed to fill out a `Select` properly, the tooltip prop may be used.\n\n## Grouping options\n`Select` supports option groups. Use a `Select.Group` component to render an `<optgroup>` element with its items.\nNOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.",
         "props": {
-          "label": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "The input label."
-          },
-          "hint": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A short description of the expected input."
-          },
-          "hintPosition": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'inline'",
-                  "computed": false
-                },
-                {
-                  "value": "'below'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
-          },
-          "feedback": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
-          },
-          "tooltip": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
-          },
-          "validation": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'error'",
-                  "computed": false
-                },
-                {
-                  "value": "'success'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Use to visually mark an input as valid or invalid."
-          },
           "initialValue": {
             "type": {
               "name": "string"
@@ -6233,6 +6121,13 @@
         "docs": {
           "description": "`SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.\n\n This component can only be accessed as a name-spaced component: `SideNav.Item`.",
           "props": {
+            "accessibilityRole": {
+              "defaultValue": {
+                "value": "'link'",
+                "computed": false
+              },
+              "required": false
+            },
             "children": {
               "type": {
                 "name": "node"
@@ -6343,7 +6238,7 @@
             }
           },
           "attributes": {
-            "acceptsRNA11yProps": true
+            "acceptsRNA11yProps": false
           }
         }
       },
@@ -6625,59 +6520,6 @@
             "required": false,
             "description": "Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction."
           },
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "dataSet": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -6741,11 +6583,6 @@
                       "name": "bool",
                       "description": "By default, the divider is a horizontal line the full width of its parent.\nWith `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.",
                       "required": false
-                    },
-                    "testID": {
-                      "name": "string",
-                      "description": "@ignore\nIn tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,\nno accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.",
-                      "required": false
                     }
                   }
                 }
@@ -7309,110 +7146,7 @@
         }
       }
     },
-    "ToggleSwitch": {
-      "docs": {
-        "description": "",
-        "props": {
-          "accessibilityRole": {
-            "defaultValue": {
-              "value": "'switch'",
-              "computed": false
-            },
-            "required": false
-          },
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "borderColor": "color",
-                "borderWidth": "border",
-                "borderRadius": "radius",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBackgroundColor": "color",
-                "backgroundColor": "color",
-                "opacity": "opacity",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "paddingTop": "size",
-                "paddingBottom": "size",
-                "shadow": "shadow",
-                "alignSelf": "flexAlign",
-                "icon": "icon",
-                "width": "size",
-                "trackBorderWidth": "border",
-                "trackBorderColor": "color",
-                "trackBorderRadius": "radius",
-                "iconSize": "size",
-                "iconColor": "color",
-                "switchSize": "size",
-                "switchColor": "color",
-                "switchBorderColor": "color",
-                "switchBorderWidth": "border",
-                "switchBorderRadius": "radius",
-                "switchShadow": "shadow"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "value": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If this is a \"controlled\" component and a parent handles its selected state,\ntells the switch if it is on (true) or off (false)."
-          },
-          "initialValue": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If this is an \"uncontrolled\" component that handles its own selected state,\noptionally tells the switch if it should default to on (true) or off (false)."
-          },
-          "onChange": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Function called when the switch is toggled, with one boolean argument that is the\nnew position of the switch, on (true) or off (false). For \"controlled\" components,\nthis should always be passed and used to control the state of the switch."
-          },
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If passed, the switch does not respond to user input and may recieve different\ntheme tokens if the theme supports inactive appearance."
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "Tooltip": {
+    "Tooltip": {
       "docs": {
         "description": "Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label\nto help a user fill it in, or as a standalone component.\n\nBy default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach\na tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).\n\n### Positioning\nBy default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.\nYou may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.\n\n### Usage criteria\n- You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).\n- Tooltips may also be useful when vertical space is an issue.",
         "props": {
@@ -7694,6 +7428,13 @@
             "required": false,
             "description": "Optional semantic HTML tag, to apply to the text on web. Does not change styling.\n\n`tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
           },
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "heading === true ? 'header' : undefined",
+              "computed": false
+            },
+            "required": false
+          },
           "block": {
             "defaultValue": {
               "value": "false",
@@ -7822,7 +7563,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -7925,6 +7666,38 @@
       "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",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
           "inactive": {
             "type": {
               "name": "bool"
@@ -7985,6 +7758,38 @@
       "docs": {
         "description": "`ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.\nButtonLink is a block-level component and should not be used inline.",
         "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",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
           "inactive": {
             "type": {
               "name": "bool"
@@ -8666,87 +8471,106 @@
             "required": false,
             "description": ""
           },
-          "onPress": {
+          "tokens": {
             "type": {
-              "name": "func"
+              "name": "custom",
+              "raw": "getTokensPropType('ChevronLink', 'Link')"
             },
             "required": false,
             "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "Link": {
+      "docs": {
+        "description": "",
+        "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "'link'",
+              "computed": false
+            },
+            "required": false
           },
-          "onPressIn": {
+          "variant": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "required": false
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "LinkBase": {
+      "docs": {
+        "description": "Renders a pressable text link, with optional icon. This is rendered as a block element\nonly (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.\n\n## Current limitations\n\n- Not yet integrated with widely-used Telus navigation packages. This will probably\n  require adding a `navigate` prop that aliases onPress so this can be passed to\n  router's Link components' `Component` or `as` props but this needs testing\n  as part of https://github.com/telus/universal-design-system/issues/24\n\n- Doesn't work inline e.g. in paragraphs. Support for inline links in native and\n  web was implemented in https://github.com/telus/universal-design-system/pull/233\n  but removed and will need to be restored at some point. When inline link support\n  is restored, icons in inline links on Android will be slightly off-centre\n  vertically (see )\n\n- Doesn't support :visited styles on web. Support for :visited styles was\n  implemented in https://github.com/telus/universal-design-system/pull/234 but\n  dropped in favour of investigating if a full-featured CSS-in-JS package could or\n  should be used more widely (e.g. styled components)",
+        "props": {
+          "iconPosition": {
+            "defaultValue": {
+              "value": "icon ? 'left' : undefined",
+              "computed": false
+            },
             "type": {
-              "name": "func"
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
+                }
+              ]
             },
             "required": false,
-            "description": ""
+            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
           },
-          "onPressOut": {
+          "tokens": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
             "type": {
-              "name": "func"
+              "name": "custom",
+              "raw": {
+                "color": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBorderOutline": "borderStyle",
+                "borderRadius": "radius",
+                "blockFontName": "fontName",
+                "blockFontWeight": "fontWeight",
+                "blockFontSize": "fontSize",
+                "blockLineHeight": "lineHeight",
+                "icon": "icon",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "alignSelf": "flexAlign"
+              }
             },
             "required": false,
             "description": ""
           },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "hrefAttrs": {
-            "type": {
-              "name": "shape",
-              "value": {
-                "download": {
-                  "name": "string",
-                  "required": false
-                },
-                "rel": {
-                  "name": "string",
-                  "required": false
-                },
-                "target": {
-                  "name": "enum",
-                  "value": [
-                    {
-                      "value": "'_self'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_blank'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_parent'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_top'",
-                      "computed": false
-                    }
-                  ],
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
-          },
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": "getTokensPropType('ChevronLink', 'Link')"
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "'link'",
+              "computed": false
             },
-            "required": false,
-            "description": ""
+            "required": false
           },
           "variant": {
             "type": {
@@ -8805,93 +8629,6 @@
             "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."
           },
-          "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 Link."
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": true
-        }
-      }
-    },
-    "Link": {
-      "docs": {
-        "description": "",
-        "props": {
-          "variant": {
-            "defaultValue": {
-              "value": "{}",
-              "computed": false
-            },
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressOut": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
           "hrefAttrs": {
             "type": {
               "name": "shape",
@@ -8930,478 +8667,44 @@
             },
             "required": false,
             "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
-          },
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "color": "color",
-                "textLine": "textLine",
-                "textLineStyle": "textLineStyle",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBorderOutline": "borderStyle",
-                "borderRadius": "radius",
-                "blockFontName": "fontName",
-                "blockFontWeight": "fontWeight",
-                "blockFontSize": "fontSize",
-                "blockLineHeight": "lineHeight",
-                "icon": "icon",
-                "iconSize": "size",
-                "iconSpace": "integer",
-                "iconTranslateX": "size",
-                "iconTranslateY": "size",
-                "alignSelf": "flexAlign"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "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
-                }
-              }
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "TextButton": {
+      "docs": {
+        "description": "`TextButton` is a button that looks like a Link. It uses the same theming and variants as\nLink but has the accessibility role of a `Button`. It should be used for actions that\ntake place on the current page, or for navigation within an app.",
+        "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "'button'",
+              "computed": false
             },
-            "required": false,
-            "description": "Optional variant that may be passed down to the link's icon if there is one"
+            "required": false
           },
-          "icon": {
+          "onPress": {
             "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."
-          },
-          "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 Link."
+            "required": true,
+            "description": ""
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
-    "LinkBase": {
+    "RadioGroup": {
       "docs": {
-        "description": "Renders a pressable text link, with optional icon. This is rendered as a block element\nonly (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.\n\n## Current limitations\n\n- Not yet integrated with widely-used Telus navigation packages. This will probably\n  require adding a `navigate` prop that aliases onPress so this can be passed to\n  router's Link components' `Component` or `as` props but this needs testing\n  as part of https://github.com/telus/universal-design-system/issues/24\n\n- Doesn't work inline e.g. in paragraphs. Support for inline links in native and\n  web was implemented in https://github.com/telus/universal-design-system/pull/233\n  but removed and will need to be restored at some point. When inline link support\n  is restored, icons in inline links on Android will be slightly off-centre\n  vertically (see )\n\n- Doesn't support :visited styles on web. Support for :visited styles was\n  implemented in https://github.com/telus/universal-design-system/pull/234 but\n  dropped in favour of investigating if a full-featured CSS-in-JS package could or\n  should be used more widely (e.g. styled components)",
+        "description": "A group of Radios that behave as a radio group. Use when users select a single choice from mutually\nexclusive options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Radio in the group:\n\n - `label`: main text passed to Radio's `label` prop\n - `id`: identifier used to store which Radio is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nRadioGroup accepts all the common accessibility props, but also sets accessibility role `'radiogroup'`\nand controls the accessibility state of children like Radio and Feedback based on current state.\n\n@example\n```jsx\n<RadioGroup\n  initialCheckedId=\"radio1\"\n  items={[\n    { label: 'Radio 1', id: 'radio1' },\n    { label: 'Radio 2', id: 'radio2' },\n    { label: 'Radio 3', id: 'radio3' }\n  ]}\n  legend=\"Radios\"\n  hint=\"Choose one option\"\n/>\n```",
         "props": {
-          "iconPosition": {
+          "items": {
             "defaultValue": {
-              "value": "icon ? 'left' : undefined",
-              "computed": false
-            },
-            "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 Link."
-          },
-          "tokens": {
-            "defaultValue": {
-              "value": "{}",
-              "computed": false
-            },
-            "type": {
-              "name": "custom",
-              "raw": {
-                "color": "color",
-                "textLine": "textLine",
-                "textLineStyle": "textLineStyle",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBorderOutline": "borderStyle",
-                "borderRadius": "radius",
-                "blockFontName": "fontName",
-                "blockFontWeight": "fontWeight",
-                "blockFontSize": "fontSize",
-                "blockLineHeight": "lineHeight",
-                "icon": "icon",
-                "iconSize": "size",
-                "iconSpace": "integer",
-                "iconTranslateX": "size",
-                "iconTranslateY": "size",
-                "alignSelf": "flexAlign"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressOut": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "hrefAttrs": {
-            "type": {
-              "name": "shape",
-              "value": {
-                "download": {
-                  "name": "string",
-                  "required": false
-                },
-                "rel": {
-                  "name": "string",
-                  "required": false
-                },
-                "target": {
-                  "name": "enum",
-                  "value": [
-                    {
-                      "value": "'_self'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_blank'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_parent'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_top'",
-                      "computed": false
-                    }
-                  ],
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "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"
-          },
-          "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."
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": true
-        }
-      }
-    },
-    "TextButton": {
-      "docs": {
-        "description": "`TextButton` is a button that looks like a Link. It uses the same theming and variants as\nLink but has the accessibility role of a `Button`. It should be used for actions that\ntake place on the current page, or for navigation within an app.",
-        "props": {
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": true,
-            "description": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressOut": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "hrefAttrs": {
-            "type": {
-              "name": "shape",
-              "value": {
-                "download": {
-                  "name": "string",
-                  "required": false
-                },
-                "rel": {
-                  "name": "string",
-                  "required": false
-                },
-                "target": {
-                  "name": "enum",
-                  "value": [
-                    {
-                      "value": "'_self'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_blank'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_parent'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_top'",
-                      "computed": false
-                    }
-                  ],
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
-          },
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "color": "color",
-                "textLine": "textLine",
-                "textLineStyle": "textLineStyle",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBorderOutline": "borderStyle",
-                "borderRadius": "radius",
-                "blockFontName": "fontName",
-                "blockFontWeight": "fontWeight",
-                "blockFontSize": "fontSize",
-                "blockLineHeight": "lineHeight",
-                "icon": "icon",
-                "iconSize": "size",
-                "iconSpace": "integer",
-                "iconTranslateX": "size",
-                "iconTranslateY": "size",
-                "alignSelf": "flexAlign"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "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"
-          },
-          "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."
-          },
-          "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 Link."
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": true
-        }
-      }
-    },
-    "RadioGroup": {
-      "docs": {
-        "description": "A group of Radios that behave as a radio group. Use when users select a single choice from mutually\nexclusive options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Radio in the group:\n\n - `label`: main text passed to Radio's `label` prop\n - `id`: identifier used to store which Radio is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nRadioGroup accepts all the common accessibility props, but also sets accessibility role `'radiogroup'`\nand controls the accessibility state of children like Radio and Feedback based on current state.\n\n@example\n```jsx\n<RadioGroup\n  initialCheckedId=\"radio1\"\n  items={[\n    { label: 'Radio 1', id: 'radio1' },\n    { label: 'Radio 2', id: 'radio2' },\n    { label: 'Radio 3', id: 'radio3' }\n  ]}\n  legend=\"Radios\"\n  hint=\"Choose one option\"\n/>\n```",
-        "props": {
-          "items": {
-            "defaultValue": {
-              "value": "[]",
+              "value": "[]",
               "computed": false
             },
             "type": {
@@ -9803,59 +9106,6 @@
       "docs": {
         "description": "StackWrap is an alternative to StackView where the spaced items are allowed to wrap.\n\nAs well as providing space between the items, StackWrap provides `gap` space between\nwrapped lines of items. By default, this `gap` is the same as the gap between spaced items.\nIf a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.",
         "props": {
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "dataSet": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -9994,14 +9244,112 @@
               ]
             },
             "required": false,
-            "description": "Optional semantic HTML tag, to apply to the container on web. Does not change styling.\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
+            "description": "Optional semantic HTML tag, to apply to the container on web. Does not change styling.\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children\nwrapped in a component. If necessary, children may be wrapped in one React Fragment."
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "TextInput": {
+      "docs": {
+        "description": "A basic text input component. Use in forms or individually to receive user's input.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\n\n## Controlled component\nIf it is required that the state of the `TextInput` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextInput`.\nIf the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextInput` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\nNOTE: In order to support more advanced usages all additional props will be passed down to the React Native's\n`TextInput` component. See <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native documentation</a> for\nsupported props and <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native Web documentation</a> for\ntheir implementation on the web.",
+        "props": {
+          "variant": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
           },
-          "children": {
+          "value": {
             "type": {
-              "name": "node"
+              "name": "string"
             },
             "required": false,
-            "description": "A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children\nwrapped in a component. If necessary, children may be wrapped in one React Fragment."
+            "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
+          },
+          "initialValue": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
+          },
+          "inactive": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Disables all user interactions with the input."
+          },
+          "readOnly": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Makes it impossible to change the input's value."
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "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."
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "backgroundColor": "color",
+                "color": "color",
+                "borderWidth": "border",
+                "borderColor": "color",
+                "borderRadius": "radius",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "outerBackgroundColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight",
+                "icon": "icon",
+                "iconSize": "size",
+                "iconColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
           }
         },
         "attributes": {
@@ -10009,9 +9357,9 @@
         }
       }
     },
-    "TextInput": {
+    "TextArea": {
       "docs": {
-        "description": "A basic text input component. Use in forms or individually to receive user's input.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\n\n## Controlled component\nIf it is required that the state of the `TextInput` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextInput`.\nIf the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextInput` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\nNOTE: In order to support more advanced usages all additional props will be passed down to the React Native's\n`TextInput` component. See <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native documentation</a> for\nsupported props and <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native Web documentation</a> for\ntheir implementation on the web.",
+        "description": "Use to collect long-form information such as product feedback or support queries.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\nThe `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.\n\n## Controlled component\nIf it is required that the state of the `TextArea` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextArea`.\nIf the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextArea` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\n## Getting feedback for entered values\nUse the `feedback` prop to give the user feedback regarding their input.\nYou can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.\nKeep feedback text as brief as possible, should be limited to text and links.\n\n## Supplying a hint\nUse the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,\nor an indicator that the field is optional.\nIt is a more usable and accessible option than the HTML `placeholder` attribute.",
         "props": {
           "variant": {
             "defaultValue": {
@@ -10038,146 +9386,281 @@
             "required": false,
             "description": ""
           },
-          "label": {
+          "value": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "The input label."
+            "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
           },
-          "hint": {
+          "initialValue": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "A short description of the expected input."
+            "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
           },
-          "hintPosition": {
+          "inactive": {
             "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'inline'",
-                  "computed": false
-                },
-                {
-                  "value": "'below'",
-                  "computed": false
-                }
-              ]
+              "name": "bool"
             },
             "required": false,
-            "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
+            "description": "Disables all user interactions with the input."
           },
-          "feedback": {
+          "readOnly": {
             "type": {
-              "name": "string"
+              "name": "bool"
             },
             "required": false,
-            "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
+            "description": "Makes it impossible to change the input's value."
           },
-          "tooltip": {
+          "onChange": {
             "type": {
-              "name": "string"
+              "name": "func"
             },
             "required": false,
-            "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
+            "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."
           },
-          "validation": {
+          "tokens": {
             "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'error'",
-                  "computed": false
-                },
-                {
-                  "value": "'success'",
-                  "computed": false
-                }
-              ]
+              "name": "custom",
+              "raw": "getTokensPropType('TextArea', 'TextInput')"
             },
             "required": false,
-            "description": "Use to visually mark an input as valid or invalid."
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "ToggleSwitch": {
+      "docs": {
+        "description": "",
+        "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "'switch'",
+              "computed": false
+            },
+            "required": false
+          },
+          "accessibilityLabel": {
+            "defaultValue": {
+              "value": "label",
+              "computed": true
+            },
+            "required": false
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "shadow": "shadow",
+                "alignSelf": "flexAlign",
+                "icon": "icon",
+                "width": "size",
+                "trackBorderWidth": "border",
+                "trackBorderColor": "color",
+                "trackBorderRadius": "radius",
+                "iconSize": "size",
+                "iconColor": "color",
+                "labelColor": "color",
+                "labelFontName": "fontName",
+                "labelFontSize": "fontSize",
+                "labelFontWeight": "fontWeight",
+                "labelLineHeight": "lineHeight",
+                "labelMarginLeft": "size",
+                "switchSize": "size",
+                "switchColor": "color",
+                "switchBorderColor": "color",
+                "switchBorderWidth": "border",
+                "switchBorderRadius": "radius",
+                "switchShadow": "shadow"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
           },
           "value": {
             "type": {
-              "name": "string"
+              "name": "bool"
             },
             "required": false,
-            "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
+            "description": "If this is a \"controlled\" component and a parent handles its selected state,\ntells the switch if it is on (true) or off (false)."
           },
           "initialValue": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If this is an \"uncontrolled\" component that handles its own selected state,\noptionally tells the switch if it should default to on (true) or off (false)."
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Function called when the switch is toggled, with one boolean argument that is the\nnew position of the switch, on (true) or off (false). For \"controlled\" components,\nthis should always be passed and used to control the state of the switch."
+          },
+          "id": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Input ID."
+          },
+          "label": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
+            "description": "An optional label."
           },
           "inactive": {
             "type": {
               "name": "bool"
             },
             "required": false,
-            "description": "Disables all user interactions with the input."
+            "description": "If passed, the switch does not respond to user input and may recieve different\ntheme tokens if the theme supports inactive appearance."
           },
-          "readOnly": {
+          "tooltip": {
             "type": {
-              "name": "bool"
+              "name": "string"
             },
             "required": false,
-            "description": "Makes it impossible to change the input's value."
+            "description": "Content of an optional Tooltip. If set, a tooltip button will be shown next to the label."
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "ToggleSwitchGroup": {
+      "docs": {
+        "description": "",
+        "props": {
+          "items": {
+            "defaultValue": {
+              "value": "[]",
+              "computed": false
+            },
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": {
+                  "label": {
+                    "name": "string",
+                    "description": "The text displayed to the user on the label.",
+                    "required": true
+                  },
+                  "accessibilityLabel": {
+                    "name": "string",
+                    "description": "An optional accessibility label may be passed to each ToggleSwitch\nand will be applied as normal for a React Native accessibilityLabel prop.",
+                    "required": false
+                  },
+                  "id": {
+                    "name": "string",
+                    "description": "An optional unique string may be provided to identify this option,\nwhich will be used in code and passed to any onChange function.\nIf not provided, the label is used.",
+                    "required": false
+                  },
+                  "ref": {
+                    "name": "custom",
+                    "raw": "ABBPropTypes.ref()",
+                    "description": "An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "required": false,
+            "description": "The options a user may select"
           },
-          "onChange": {
+          "maxValues": {
+            "defaultValue": {
+              "value": "1",
+              "computed": false
+            },
             "type": {
-              "name": "func"
+              "name": "number"
             },
             "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."
+            "description": "The maximum number of items a user may select at once. Defaults to 1 and behaves\nlike radio buttons. To have no limit and allow any number of selections, pass `null`."
+          },
+          "readOnly": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "required": false
+          },
+          "inactive": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "required": false
+          },
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "maxValues === 1\n? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups\n: Platform.select({ web: 'group', default: 'none' })",
+              "computed": false
+            },
+            "required": false
           },
           "tokens": {
             "type": {
               "name": "custom",
               "raw": {
-                "backgroundColor": "color",
-                "color": "color",
-                "borderWidth": "border",
-                "borderColor": "color",
-                "borderRadius": "radius",
-                "paddingTop": "size",
-                "paddingBottom": "size",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "outerBackgroundColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderColor": "color",
-                "fontName": "fontName",
-                "fontWeight": "fontWeight",
-                "fontSize": "fontSize",
-                "lineHeight": "lineHeight",
-                "icon": "icon",
-                "iconSize": "size",
-                "iconColor": "color"
+                "space": "integer",
+                "direction": "direction",
+                "alignItems": "flexAlign",
+                "justifyContent": "flexJustifyContent",
+                "flexGrow": "integer",
+                "flexShrink": "integer"
               }
             },
             "required": false,
             "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "TextArea": {
-      "docs": {
-        "description": "Use to collect long-form information such as product feedback or support queries.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\nThe `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.\n\n## Controlled component\nIf it is required that the state of the `TextArea` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextArea`.\nIf the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextArea` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\n## Getting feedback for entered values\nUse the `feedback` prop to give the user feedback regarding their input.\nYou can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.\nKeep feedback text as brief as possible, should be limited to text and links.\n\n## Supplying a hint\nUse the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,\nor an indicator that the field is optional.\nIt is a more usable and accessible option than the HTML `placeholder` attribute.",
-        "props": {
+          },
           "variant": {
-            "defaultValue": {
-              "value": "{}",
-              "computed": false
-            },
             "type": {
               "name": "objectOf",
               "value": {
@@ -10198,110 +9681,120 @@
             "required": false,
             "description": ""
           },
-          "label": {
+          "onChange": {
             "type": {
-              "name": "string"
+              "name": "func"
             },
             "required": false,
-            "description": "The input label."
+            "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`."
           },
-          "hint": {
+          "values": {
             "type": {
-              "name": "string"
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
             },
             "required": false,
-            "description": "A short description of the expected input."
+            "description": "If the selected item(s) in the toggle switch group 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 ToggleSwitchGroup a \"controlled\" component that\nexpects its state to be handled via `onChange` and so doesn't handle it itself."
           },
-          "hintPosition": {
+          "initialValues": {
             "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'inline'",
-                  "computed": false
-                },
-                {
-                  "value": "'below'",
-                  "computed": false
-                }
-              ]
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
             },
             "required": false,
-            "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
+            "description": "If `values` is not passed, making the ToggleSwitchGroup 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."
           },
-          "feedback": {
+          "hint": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
+            "description": "Optional additional text giving more detail to help a user make a choice."
           },
           "tooltip": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
-          },
-          "validation": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'error'",
-                  "computed": false
-                },
-                {
-                  "value": "'success'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Use to visually mark an input as valid or invalid."
+            "description": "Optional tooltip text content to include alongside the legend and hint."
           },
-          "value": {
+          "feedback": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
+            "description": "If provided, a Feedback element is rendered containing this text."
           },
-          "initialValue": {
+          "legend": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
-          },
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "Disables all user interactions with the input."
-          },
-          "readOnly": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "Makes it impossible to change the input's value."
+            "description": "Main text used to describe this group, used in Fieldset's Legend element."
           },
-          "onChange": {
+          "toggleSwitchTokens": {
             "type": {
-              "name": "func"
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "shadow": "shadow",
+                "alignSelf": "flexAlign",
+                "icon": "icon",
+                "width": "size",
+                "trackBorderWidth": "border",
+                "trackBorderColor": "color",
+                "trackBorderRadius": "radius",
+                "iconSize": "size",
+                "iconColor": "color",
+                "labelColor": "color",
+                "labelFontName": "fontName",
+                "labelFontSize": "fontSize",
+                "labelFontWeight": "fontWeight",
+                "labelLineHeight": "lineHeight",
+                "labelMarginLeft": "size",
+                "switchSize": "size",
+                "switchColor": "color",
+                "switchBorderColor": "color",
+                "switchBorderWidth": "border",
+                "switchBorderRadius": "radius",
+                "switchShadow": "shadow"
+              }
             },
             "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."
+            "description": "Toggle switch token overrides."
           },
-          "tokens": {
+          "validation": {
             "type": {
-              "name": "custom",
-              "raw": "getTokensPropType('TextArea', 'TextInput')"
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'error'",
+                  "computed": false
+                },
+                {
+                  "value": "'success'",
+                  "computed": false
+                }
+              ]
             },
             "required": false,
-            "description": ""
+            "description": "Current validation status of the group, passed to the feedback element if there is one."
           }
         },
         "attributes": {