@telus-uds/components-base 1.12.1 → 1.14.1

package/component-docs.json

@@ -29,6 +29,9 @@
         "paddingBottom": "size",
         "width": "size",
         "minWidth": "size",
+        "iconSize": "size",
+        "iconSpace": "integer",
+        "icon": "icon",
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
@@ -87,7 +90,35 @@
         "showPreviousNextNavigation": "show",
         "showPanelNavigation": "show",
         "spaceBetweenSlideAndPreviousNextNavigation": "size",
-        "spaceBetweenSlideAndPanelNavigation": "size"
+        "spaceBetweenSlideAndPanelNavigation": "size",
+        "thumbnailBorderColor": "color",
+        "thumbnailBorderRadius": "radius",
+        "thumbnailBorderWidth": "border",
+        "thumbnailContainerPaddingTop": "size",
+        "thumbnailMargin": "size",
+        "thumbnailPadding": "size",
+        "thumbnailSelectedBorderColor": "color",
+        "thumbnailSelectedBorderWidth": "border",
+        "thumbnailSize": "size"
+      },
+      "CarouselTabsPanelItem": {
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "borderBottomColor": "color",
+        "borderBottomWidth": "border",
+        "borderBottomStyle": "borderStyle",
+        "flex": "integer",
+        "alignItems": "flexAlign",
+        "justifyContent": "flexJustifyContent",
+        "color": "color",
+        "fontSize": "fontSize",
+        "fontScaleCap": "fontSize",
+        "lineHeight": "lineHeight",
+        "letterSpacing": "letterSpacing",
+        "fontWeight": "fontWeight",
+        "fontName": "fontName"
       },
       "Checkbox": {
         "containerBackgroundColor": "color",
@@ -617,6 +648,17 @@
         "showStepName": "show",
         "showStepTrackerLabel": "show"
       },
+      "SkipLink": {
+        "backgroundColor": "color",
+        "color": "color",
+        "outlineColor": "color",
+        "outlineOffset": "border",
+        "outlineStyle": "borderStyle",
+        "outlineWidth": "border",
+        "paddingHorizontal": "size",
+        "paddingVertical": "size",
+        "borderRadius": "radius"
+      },
       "Tabs": {
         "nextIcon": "icon",
         "previousIcon": "icon",
@@ -900,6 +942,43 @@
           "type": "state"
         }
       },
+      "CarouselTabsPanelItem": {
+        "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"
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "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"
+        }
+      },
       "Checkbox": {
         "checked": {
           "description": "Corresponds to a selected state for a checkbox or radio",
@@ -1554,6 +1633,15 @@
           ],
           "type": "state"
         }
+      },
+      "SkipLink": {
+        "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"
+        }
       }
     }
   },
@@ -4611,7 +4699,7 @@
             },
             "icon": {
               "type": {
-                "name": "func"
+                "name": "elementType"
               },
               "required": false,
               "description": "Renders side item icon"
@@ -4782,7 +4870,7 @@
             },
             "icon": {
               "type": {
-                "name": "func"
+                "name": "elementType"
               },
               "required": false,
               "description": "Renders side item icon"
@@ -4875,7 +4963,7 @@
           },
           "icon": {
             "type": {
-              "name": "func"
+              "name": "elementType"
             },
             "required": false,
             "description": "Renders side item icon"
@@ -6769,6 +6857,69 @@
         }
       }
     },
+    "SkipLink": {
+      "docs": {
+        "description": "A generic Skip link component, unstyled by default.\nA Skip link component help keyboard-only users, screen reader users to skip\nsections and navigate to the content they want.\n\n## Component API\n\nFor common uses, pass a `href` that is a # link to a DOM id that can be skipped to (web only).\n\nThe element with this ID should be focusable, e.g. `<Box nativeID=\"skip-target\" focusable>`.\n\nOther custom behaviour may be set by passing an `onPress` function, and routers may be integrated\nin the same way as other navigation-related components by passing a `LinkRouter`; but a # anchor\nhref on web and/or a `targetRef` for cross-platform applications is the recommended approach.\n\n## Visible styling\n\nWhen focused, the skip link shows as a visible element similar to a simplified ButtonLink using\nUDS theming. The `tokens` prop may be used to override these styles.\n\nTo control the background of a skip link, the following tokens can be used:\n\n- `backgroundColor`\n*\nIn order to control the color of the skip link text, the following tokens can be used:\n\n- `color`\n\n### Padding\n\nThe following padding tokens can be used:\n\n- `paddingHorizontal`\n- `paddingVertical`\n\n### Outline\n\nThe following tokens to control the outline:\n\n- `outlineColor`\n- `outlineOffset`\n- `outlineStyle`\n- `outlineWidth`\n\n## Usability and A11y guidelines\n\n- The skip link component is visually hidden until a keyboard press activates it.\n- Usually, you should place the skip link immediately after the opening <body> tag.\n- This lets users bypass top-level navigation links and jump to the main content on a page.\n- Also consider using SkipLink before a complex feature containing many focusable elements.\n\n## Accessibility\n\nSkip link supports all the common a11y and link props.",
+        "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "The text content shown or read out when the SkipLink is focused, usually a string."
+          },
+          "href": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "The target to skip to. Usually an anchor link to a section id (e.g. href=\"#main-section\")."
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "backgroundColor": "color",
+                "color": "color",
+                "outlineColor": "color",
+                "outlineOffset": "border",
+                "outlineStyle": "borderStyle",
+                "outlineWidth": "border",
+                "paddingHorizontal": "size",
+                "paddingVertical": "size",
+                "borderRadius": "radius"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Spacer": {
       "docs": {
         "description": "An empty element used to create a gap between components that is sized according to the theme spacing scale,\npassing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.\n\n## Simple spacing\n\nFor most simple uses, pass a number to Spacer's `space` prop referring to an index in the theme's\nspacing scale. For example, for a spacer of the theme's smallest non-zero spacing size:\n\n```jsx\n<Spacer space={1} />\n```\n\n## Responsive spacing\n\nDifferent spacing scale sizes may be chosen for different viewports by passing `space` a {@link SpacingObject}\nusing keys for the viewports at and above which certain spacing indexes should apply.\n\nThis can be useful when a Spacer is inside a layout with a shape that changes between viewports.\n\nFor example, a spacer might need no width below 'md' viewport because the items it separates will be on separate lines,\nbut may need a visible size above that viewport, and a wider size at the highest viewport:\n\n```jsx\n<Spacer space={{ xs: 0, md: 2, xl: 3 }} />\n```\n\nNote that themes may also define viewport-specific behaviour for indexes on the spacing scale. These viewport\nprops should only be used where necessary to achieve a certain responsive layoutm and shouldn't be used to replace\nor deviate from responsive spacing behaviour in a theme that is intended to apply universally.\n\n## More options\n\nSee `useSpacingScale` hook for more options that may be used with the `space` prop.\n\n## Accessibility\n\nSpacer has no content and is ignored by tools such as screen readers. Use `Divider` for\nseparations between elements that may be treated as semantically meaningful on web.",
@@ -7496,11 +7647,16 @@
                 "forceAbsoluteFontSizing": {
                   "name": "bool",
                   "required": false
+                },
+                "contentMaxWidth": {
+                  "name": "custom",
+                  "raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
+                  "required": false
                 }
               }
             },
             "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)"
+            "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"
           },
           "children": {
             "type": {
@@ -7999,6 +8155,9 @@
                 "paddingBottom": "size",
                 "width": "size",
                 "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
@@ -8037,6 +8196,59 @@
             "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",
@@ -8138,6 +8350,27 @@
             "required": false,
             "description": "If true, the buttons cannot be interacted with, elements are set as `disabled` and if the\ntheme supports `inactive` appearances rules, these are applied."
           },
+          "hintPosition": {
+            "defaultValue": {
+              "value": "'inline'",
+              "computed": false
+            },
+            "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."
+          },
           "accessibilityRole": {
             "defaultValue": {
               "value": "maxValues === 1\n? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups\n: Platform.select({ web: 'group', default: 'none' })",
@@ -8311,6 +8544,9 @@
                 "paddingBottom": "size",
                 "width": "size",
                 "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
@@ -8349,35 +8585,88 @@
             "required": false,
             "description": "Function called when the button is pressed. Required unless the button has a href."
           },
-          "variant": {
+          "iconProps": {
             "type": {
-              "name": "objectOf",
+              "name": "exact",
               "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
+                "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": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
+            "description": "Optional variant that may be passed down to the link's icon if there is one"
           },
-          "onPressOut": {
+          "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": ""
+          },
+          "onPressIn": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": ""
+          },
+          "onPressOut": {
             "type": {
               "name": "func"
             },
@@ -8523,6 +8812,13 @@
             "required": false,
             "description": "Minimal part of slide width must be swiped for changing index.\nOtherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index"
           },
+          "title": {
+            "defaultValue": {
+              "value": "'carousel'",
+              "computed": false
+            },
+            "required": false
+          },
           "springConfig": {
             "defaultValue": {
               "value": "undefined",
@@ -8534,9 +8830,37 @@
             "required": false,
             "description": "Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration"
           },
+          "thumbnails": {
+            "defaultValue": {
+              "value": "undefined",
+              "computed": true
+            },
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": {
+                  "accessibilityLabel": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "alt": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "src": {
+                    "name": "string",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "required": false,
+            "description": "An array of objects containing information on the thumbnails to be rendered as navigation panel"
+          },
           "panelNavigation": {
             "defaultValue": {
-              "value": "<CarouselStepTracker />",
+              "value": "thumbnails ? (\n  <CarouselThumbnailNavigation thumbnails={thumbnails} />\n) : (\n  <CarouselStepTracker />\n)",
               "computed": false
             },
             "type": {
@@ -8634,27 +8958,23 @@
             "required": false,
             "description": "HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that\nassistive technology tools know to intepret the carousel as a list.\n\nNote that if the immediate Carousel children do not all render as `'li'` elements,\nthis should be changed (e.g. pass tag=\"div\") because only 'li' is a valid child of 'ul'."
           },
-          "accessibilityRole": {
+          "accessibilityLabel": {
             "defaultValue": {
-              "value": "'adjustable'",
-              "computed": false
+              "value": "title",
+              "computed": true
             },
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "Provide custom accessibilityRole for Carousel container"
+            "description": "Provide custom accessibilityLabel for Carousel container"
           },
-          "accessibilityLabel": {
+          "accessibilityLiveRegion": {
             "defaultValue": {
-              "value": "'carousel'",
+              "value": "'polite'",
               "computed": false
             },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Provide custom accessibilityLabel for Carousel container"
+            "required": false
           },
           "tokens": {
             "type": {
@@ -8665,7 +8985,16 @@
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
-                "spaceBetweenSlideAndPanelNavigation": "size"
+                "spaceBetweenSlideAndPanelNavigation": "size",
+                "thumbnailBorderColor": "color",
+                "thumbnailBorderRadius": "radius",
+                "thumbnailBorderWidth": "border",
+                "thumbnailContainerPaddingTop": "size",
+                "thumbnailMargin": "size",
+                "thumbnailPadding": "size",
+                "thumbnailSelectedBorderColor": "color",
+                "thumbnailSelectedBorderWidth": "border",
+                "thumbnailSize": "size"
               }
             },
             "required": false,
@@ -8717,6 +9046,20 @@
             "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"
           },
+          "skipLinkHref": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
+          },
+          "refocus": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
+          },
           "onAnimationStart": {
             "type": {
               "name": "func"
@@ -8759,6 +9102,13 @@
             },
             "required": false,
             "description": "Use this to override the default text for panel navigation"
+          },
+          "accessibilityRole": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Provide custom accessibilityRole for Carousel container"
           }
         },
         "attributes": {
@@ -8882,18 +9232,379 @@
                       "name": "node"
                     }
                   },
-                  {
-                    "name": "node"
-                  }
-                ]
-              },
-              "required": true,
-              "description": "Content of the slide"
-            }
+                  {
+                    "name": "node"
+                  }
+                ]
+              },
+              "required": true,
+              "description": "Content of the slide"
+            }
+          },
+          "attributes": {
+            "acceptsRNA11yProps": false
+          }
+        }
+      }
+    },
+    "CarouselTabs": {
+      "docs": {
+        "description": "",
+        "props": {
+          "refocus": {
+            "defaultValue": {
+              "value": "true",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
+          },
+          "items": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": {
+                  "title": {
+                    "name": "string",
+                    "required": true
+                  },
+                  "content": {
+                    "name": "node",
+                    "required": true
+                  }
+                }
+              }
+            },
+            "required": false,
+            "description": "An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself"
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "nextIcon": "icon",
+                "previousIcon": "icon",
+                "showPreviousNextNavigation": "show",
+                "showPanelNavigation": "show",
+                "spaceBetweenSlideAndPreviousNextNavigation": "size",
+                "spaceBetweenSlideAndPanelNavigation": "size",
+                "thumbnailBorderColor": "color",
+                "thumbnailBorderRadius": "radius",
+                "thumbnailBorderWidth": "border",
+                "thumbnailContainerPaddingTop": "size",
+                "thumbnailMargin": "size",
+                "thumbnailPadding": "size",
+                "thumbnailSelectedBorderColor": "color",
+                "thumbnailSelectedBorderWidth": "border",
+                "thumbnailSize": "size"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "arrayOf",
+                  "value": {
+                    "name": "node"
+                  }
+                },
+                {
+                  "name": "node"
+                }
+              ]
+            },
+            "required": true,
+            "description": "Slides to render in Carousel. Wrap individual slides in `Carousel.Item`"
+          },
+          "itemLabel": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Lowercase language-appropriate user-facing description of what each Carousel slide represents.\nThis is used when generating item labels. For example, if a carousel contains offers,\npass itemLabel=\"summer offer\" (or copy=\"fr\" and an appropriate French translation) to genereate\naccessible labels such as \"Summer offer 1 of 3\" and \"Show summer offer 2 of 3\"."
+          },
+          "previousNextNavigationPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'inside'",
+                  "computed": false
+                },
+                {
+                  "value": "'outside'",
+                  "computed": false
+                },
+                {
+                  "value": "'edge'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "`inside` renders the previous and next buttons inside the slide\n`outside` renders the previous and next buttons outside the slide\n`edge` renders the previous and next buttons at the edge of the slide"
+          },
+          "previousNextIconSize": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'default'",
+                  "computed": false
+                },
+                {
+                  "value": "'small'",
+                  "computed": false
+                },
+                {
+                  "value": "'large'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Defines the size of the `IconButton` which is being used to render next and previous buttons"
+          },
+          "springConfig": {
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": "Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration"
+          },
+          "thumbnails": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": {
+                  "accessibilityLabel": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "alt": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "src": {
+                    "name": "string",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "required": false,
+            "description": "An array of objects containing information on the thumbnails to be rendered as navigation panel"
+          },
+          "minDistanceForAction": {
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "Minimal part of slide width must be swiped for changing index.\nOtherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index"
+          },
+          "minDistanceToCapture": {
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "Initiate animation after swipe this distance."
+          },
+          "onIndexChanged": {
+            "type": {
+              "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"
+          },
+          "skipLinkHref": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
+          },
+          "panelNavigation": {
+            "type": {
+              "name": "element"
+            },
+            "required": false,
+            "description": "Use this to render a custom panel navigation element instead of the default StepTracker's based navigation\nYou can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:\n- activeIndex: index of current slide\n- totalItems: total number of slides\nUse it as follows:\n```js\n   <Carousel\n     panelNavigation={<CustomPanelNavigation />}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```"
+          },
+          "onAnimationStart": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "When slide animation start\nThis function is also provided with a parameter indicating the current slide index before animation starts\nUse it as follows:\n```js\n   const onAnimationStartCallback = React.useCallback((currentIndex) => {\n     console.log(currentIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onAnimationStart={onAnimationStartCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues"
+          },
+          "onAnimationEnd": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "When slide animation end with parameter of current index (after animation ends)\nThis function is also provided with a parameter indicating the updated slide index after animation ends\nUse it as follows:\n```js\n   const onAnimationEndCallback = React.useCallback((changedIndex) => {\n     console.log(changedIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onAnimationEnd={onAnimationEndCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues"
+          },
+          "panelNavigationTextDictionary": {
+            "type": {
+              "name": "shape",
+              "value": {
+                "en": {
+                  "name": "shape",
+                  "value": {
+                    "stepTrackerLabel": {
+                      "name": "string",
+                      "required": true
+                    }
+                  },
+                  "required": false
+                },
+                "fr": {
+                  "name": "shape",
+                  "value": {
+                    "stepTrackerLabel": {
+                      "name": "string",
+                      "required": true
+                    }
+                  },
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Use this to override the default text for panel navigation"
           },
-          "attributes": {
-            "acceptsRNA11yProps": false
+          "accessibilityRole": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Provide custom accessibilityRole for Carousel container"
+          },
+          "accessibilityLabel": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Provide custom accessibilityLabel for Carousel container"
+          },
+          "tag": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'h1'",
+                  "computed": false
+                },
+                {
+                  "value": "'h2'",
+                  "computed": false
+                },
+                {
+                  "value": "'h3'",
+                  "computed": false
+                },
+                {
+                  "value": "'h4'",
+                  "computed": false
+                },
+                {
+                  "value": "'h5'",
+                  "computed": false
+                },
+                {
+                  "value": "'h6'",
+                  "computed": false
+                },
+                {
+                  "value": "'article'",
+                  "computed": false
+                },
+                {
+                  "value": "'aside'",
+                  "computed": false
+                },
+                {
+                  "value": "'blockquote'",
+                  "computed": false
+                },
+                {
+                  "value": "'footer'",
+                  "computed": false
+                },
+                {
+                  "value": "'figure'",
+                  "computed": false
+                },
+                {
+                  "value": "'form'",
+                  "computed": false
+                },
+                {
+                  "value": "'header'",
+                  "computed": false
+                },
+                {
+                  "value": "'ul'",
+                  "computed": false
+                },
+                {
+                  "value": "'li'",
+                  "computed": false
+                },
+                {
+                  "value": "'main'",
+                  "computed": false
+                },
+                {
+                  "value": "'nav'",
+                  "computed": false
+                },
+                {
+                  "value": "'section'",
+                  "computed": false
+                },
+                {
+                  "value": "'label'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that\nassistive technology tools know to intepret the carousel as a list.\n\nNote that if the immediate Carousel children do not all render as `'li'` elements,\nthis should be changed (e.g. pass tag=\"div\") because only 'li' is a valid child of 'ul'."
           }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -8901,6 +9612,17 @@
       "docs": {
         "description": "",
         "props": {
+          "refocus": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": ""
+          },
           "children": {
             "type": {
               "name": "arrayOf",
@@ -8918,30 +9640,23 @@
             "required": true,
             "description": ""
           },
-          "totalItems": {
-            "type": {
-              "name": "number"
-            },
-            "required": true,
-            "description": ""
-          },
-          "width": {
+          "goTo": {
             "type": {
-              "name": "number"
+              "name": "func"
             },
             "required": true,
             "description": ""
           },
-          "goTo": {
+          "getCopyWithPlaceholders": {
             "type": {
               "name": "func"
             },
             "required": true,
             "description": ""
           },
-          "getCopyWithPlaceholders": {
+          "itemLabel": {
             "type": {
-              "name": "func"
+              "name": "string"
             },
             "required": true,
             "description": ""
@@ -8955,11 +9670,34 @@
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
-                "spaceBetweenSlideAndPanelNavigation": "size"
+                "spaceBetweenSlideAndPanelNavigation": "size",
+                "thumbnailBorderColor": "color",
+                "thumbnailBorderRadius": "radius",
+                "thumbnailBorderWidth": "border",
+                "thumbnailContainerPaddingTop": "size",
+                "thumbnailMargin": "size",
+                "thumbnailPadding": "size",
+                "thumbnailSelectedBorderColor": "color",
+                "thumbnailSelectedBorderWidth": "border",
+                "thumbnailSize": "size"
               }
             },
             "required": false,
             "description": ""
+          },
+          "totalItems": {
+            "type": {
+              "name": "number"
+            },
+            "required": true,
+            "description": ""
+          },
+          "width": {
+            "type": {
+              "name": "number"
+            },
+            "required": true,
+            "description": ""
           }
         },
         "attributes": {
@@ -9004,6 +9742,27 @@
             "required": false,
             "description": "Array of objects containing specifics for each Checkbox to be rendered in the group."
           },
+          "hintPosition": {
+            "defaultValue": {
+              "value": "'inline'",
+              "computed": false
+            },
+            "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."
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -9324,7 +10083,7 @@
           },
           "icon": {
             "type": {
-              "name": "func"
+              "name": "elementType"
             },
             "required": false,
             "description": "A valid UDS icon component imported from a UDS palette."
@@ -9571,7 +10330,7 @@
           },
           "icon": {
             "type": {
-              "name": "func"
+              "name": "elementType"
             },
             "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."
@@ -9703,6 +10462,27 @@
             "required": false,
             "description": "Array of objects containing specifics for each Radio to be rendered in the group."
           },
+          "hintPosition": {
+            "defaultValue": {
+              "value": "'inline'",
+              "computed": false
+            },
+            "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."
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -9922,6 +10702,27 @@
             "required": false,
             "description": "Array of objects containing specifics for each RadioCard to be rendered in the group."
           },
+          "hintPosition": {
+            "defaultValue": {
+              "value": "'inline'",
+              "computed": false
+            },
+            "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."
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -10691,6 +11492,27 @@
             },
             "required": false
           },
+          "hintPosition": {
+            "defaultValue": {
+              "value": "'inline'",
+              "computed": false
+            },
+            "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."
+          },
           "accessibilityRole": {
             "defaultValue": {
               "value": "maxValues === 1\n? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups\n: Platform.select({ web: 'group', default: 'none' })",