@telus-uds/components-base 1.8.0 → 1.8.3

package/component-docs.json

@@ -1550,6 +1550,23 @@
     }
   },
   "components": {
+    "A11yInfoProvider": {
+      "docs": {
+        "description": "",
+        "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "A11yText": {
       "docs": {
         "description": "A11yText is a zero-size invisible element that adds text to be read by screen readers.\n\nIt should be used to add selectable screen-reader-only text to the main document flow,\nas a sibling to blocks of text like paragraphs and interactive elements like buttons.",
@@ -1574,6 +1591,233 @@
         }
       }
     },
+    "Accordion": {
+      "docs": {
+        "description": "'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time",
+        "props": {
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderStyle": "borderStyle"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "func"
+                },
+                {
+                  "name": "node"
+                }
+              ]
+            },
+            "required": true,
+            "description": "ExpandCollapse usually takes a render function to which it passes an object with properties\n{ openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and\nonToggle (function) will usually be passed to `<ExpandCollapse.Panel>`"
+          },
+          "maxOpen": {
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "If set, enforces a specific maximum number of open items, closing already-open items when new\nitems are opened. By default, any number of items may be open at once."
+          },
+          "open": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            },
+            "required": false,
+            "description": "If passed, the item or items that are expanded will be controlled by a parent component"
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Function called when which panels are currently open changes. Necessary if `open` is passed."
+          },
+          "initialOpen": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            },
+            "required": false,
+            "description": "Allows items with specified ids to be open by default on first load. Should not be used with `open`."
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      },
+      "Panel": {
+        "docs": {
+          "description": "An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens\nand closes the collapsible children when pressed.\n\nExpects `openIds` and `onToggle` props from the `ExpandCollapse` render function and a unique\n`panelId` that matches the ids passed to the `<ExpandCollapse>`.\n\nThe panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required\nby the chosen accessibility props for a particular accessibility tools).",
+          "props": {
+            "openIds": {
+              "defaultValue": {
+                "value": "[]",
+                "computed": false
+              },
+              "type": {
+                "name": "arrayOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "string"
+                    }
+                  ]
+                }
+              },
+              "required": false,
+              "description": "Array of the ids of currently open groups"
+            },
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
+              },
+              "required": false,
+              "description": ""
+            },
+            "tokens": {
+              "type": {
+                "name": "custom",
+                "raw": {
+                  "expandDuration": "duration",
+                  "collapseDuration": "duration",
+                  "contentPaddingLeft": "size",
+                  "contentPaddingRight": "size",
+                  "contentPaddingTop": "size",
+                  "contentPaddingBottom": "size"
+                }
+              },
+              "required": false,
+              "description": ""
+            },
+            "panelId": {
+              "type": {
+                "name": "string"
+              },
+              "required": true,
+              "description": "Unique name by which the ExpandCollapse controls this element."
+            },
+            "onToggle": {
+              "type": {
+                "name": "func"
+              },
+              "required": true,
+              "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
+            },
+            "onPress": {
+              "type": {
+                "name": "func"
+              },
+              "required": false,
+              "description": "Optional function to call on pressing the panel's control, in addition to opening or closing the panel."
+            },
+            "children": {
+              "type": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "func"
+                  },
+                  {
+                    "name": "node"
+                  }
+                ]
+              },
+              "required": false,
+              "description": "ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any\nsingle React element or a render function which takes this group's isExpanded state, onToggle function and panelId"
+            },
+            "control": {
+              "type": {
+                "name": "custom",
+                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+              },
+              "required": false,
+              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+            },
+            "controlTokens": {
+              "type": {
+                "name": "custom",
+                "raw": {
+                  "icon": "icon",
+                  "iconColor": "color",
+                  "iconSize": "size",
+                  "iconGap": "size",
+                  "iconPosition": "position",
+                  "verticalAlign": "verticalAlign",
+                  "justifyContent": "flexJustifyContent",
+                  "paddingLeft": "size",
+                  "paddingRight": "size",
+                  "paddingTop": "size",
+                  "paddingBottom": "size",
+                  "borderWidth": "border",
+                  "borderColor": "color",
+                  "backgroundColor": "color"
+                }
+              },
+              "required": false,
+              "description": "Optional theme token overrides that may be passed to the ExpandCollapseControl element."
+            }
+          },
+          "attributes": {
+            "acceptsRNA11yProps": false
+          }
+        }
+      }
+    },
     "ActivityIndicator": {
       "docs": {
         "description": "`ActivityIndicator` renders a visual loading state.\nIt does not handle positioning or layout of that visual loader.",
@@ -1624,6 +1868,31 @@
         }
       }
     },
+    "BaseProvider": {
+      "docs": {
+        "description": "",
+        "props": {
+          "defaultTheme": {
+            "type": {
+              "name": "custom",
+              "raw": "ThemeProvider.propTypes?.defaultTheme"
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Box": {
       "docs": {
         "description": "A layout utility component. Use Box to create space (padding) around content.\n\n## Spacing\n\nFor most simple uses, pass a number to Box's `space` prop referring to an index in the theme's\nspacing scale. For example, for a box with the theme's smallest non-zero amount of padding on all sides:\n\n```jsx\n<Box space={1}>\n```\n\n#### Targetting specific sides\n\nBox allows spacing value props to be assigned to any side or all sides using the following props:\n\n- `space` sets the default for all sides, which is overridden by other props below\n- `horizontal` sets defaults for `left` and `right` (overriding `space` there if it is set)\n- `vertical` sets defaults for `top` and `bottom` (overriding `space` there if it is set)\n- `left` sets the left side padding, inside the box's bounds\n- `right` sets the right side padding, inside the box's bounds\n- `top` sets the top side padding, inside the box's bounds\n- `bottom` sets the bottom side padding, inside the box's bounds\n\nBox only controls spacing within its bounds. If space is needed around a box outside of its bounds,\nuse `Spacer`, `StackView` or wrap the `Box` inside another `Box`.\n\n#### Viewport-specific spacing\n\nResponsive behaviours may be set by passing any of the above props an object keyed by viewports.\n\nFor example, if a theme's spacing scale is [0, 4, 8...], this below will have padding of 4px on top,\nbottom, and right, and its left padding will be 0px on xs, sm and md viewports and 8px on lg and xl viewports:\n\n```jsx\n<Box space={1} left={{ xs: 0, lg: 2 }} />`\n```\n\n#### Subtracting from spacing\n\nA parent may sometimes need to reduce the spacing size on one or more sides of a `Box` by some variable.\nFor example, the parent may have a border on one side and want to reduce the spacing of a child box\nby the width of that border on that side. This can be achieved using the `subtract` option of the\nspacing object, for example:\n\n```jsx\n<Box space={2} left={{ space: 2, options: { subtract: themeTokens.borderWidthLeft } }} />`\n```\n\nSee `useSpacingScale` hook for other spacing value options and documentation.\n\n## Theming\n\nBox is intended for layout, so minimal theming is supported. Use components like `Card` for\nmore sophisticated theming.\n\n## Scroll\n\nIf passed, the box will be scrollable. If an object is passed, it will be passed to React Native's\n`ScrollView` component as props.\n\nWhen building native iOS and Android apps, it is important to remember to ensure any screen containing\ntext content is inside a scrollable box, as screens are not scrollable by default and even very\nshort text will require scrolling on small devices at the highest accessibility text scaling settings.",
@@ -1934,82 +2203,9 @@
       "docs": {
         "description": "A basic card component, unstyled by default.\n\n## Component API\n\n### Background\n\nIn order to control the background of a card, the following tokens are currently\nsupported:\n\n- `backgroundColor`\n\n### Border\n\nThe following border tokens can be used:\n\n- `borderColor`\n- `borderRadius`\n- `borderWidth`\n\n### Padding\n\nPlease use the following tokens to control the padding:\n\n- `paddingBottom`\n- `paddingLeft`\n- `paddingRight`\n- `paddingTop`\n\nNote that various viewport sizes are supported as well.\n\n### Shadow\n\nFeel free to use the following properties within the `shadow` token:\n\n- `inset`: boolean\n- `color`: string\n- `offsetX`: number\n- `offsetY`: number\n- `blur`: number\n- `spread`: number\n\n## Accessibility\n\nCard supports all the common a11y props. Please remember that by marking a card as `accessible`\nyou automatically make inaccessible its children, which may or may not be appropriate\ndepending on what you are trying to achieve.",
         "props": {
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": false,
-            "description": ""
-          },
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "flex": "integer",
-                "backgroundColor": "color",
-                "borderColor": "color",
-                "borderRadius": "radius",
-                "borderWidth": "border",
-                "paddingBottom": "size",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "paddingTop": "size",
-                "minWidth": "size",
-                "shadow": "shadow"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "PressableCardBase": {
-      "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",
-              "value": [
-                {
-                  "name": "func"
-                },
-                {
-                  "name": "node"
-                }
-              ]
+          "children": {
+            "type": {
+              "name": "node"
             },
             "required": false,
             "description": ""
@@ -2017,7 +2213,19 @@
           "tokens": {
             "type": {
               "name": "custom",
-              "raw": "getTokensSetPropType(tokenKeys, { requireAll: true, allowFunction: true })"
+              "raw": {
+                "flex": "integer",
+                "backgroundColor": "color",
+                "borderColor": "color",
+                "borderRadius": "radius",
+                "borderWidth": "border",
+                "paddingBottom": "size",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "minWidth": "size",
+                "shadow": "shadow"
+              }
             },
             "required": false,
             "description": ""
@@ -2251,252 +2459,25 @@
                   },
                   {
                     "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "ExpandCollapse": {
-      "docs": {
-        "description": "Flexible base component for lists where some or all items are collapsible headers.\n\nPass a render function as `children` which takes and passes `openIds` and `onToggle` props to\n<ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be\nnested (they do not need to be direct children), and non-interactive items may be included too.",
-        "props": {
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "borderColor": "color",
-                "borderWidth": "border",
-                "borderStyle": "borderStyle"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "children": {
-            "type": {
-              "name": "union",
-              "value": [
-                {
-                  "name": "func"
-                },
-                {
-                  "name": "node"
-                }
-              ]
-            },
-            "required": true,
-            "description": "ExpandCollapse usually takes a render function to which it passes an object with properties\n{ openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and\nonToggle (function) will usually be passed to `<ExpandCollapse.Panel>`"
-          },
-          "maxOpen": {
-            "type": {
-              "name": "number"
-            },
-            "required": false,
-            "description": "If set, enforces a specific maximum number of open items, closing already-open items when new\nitems are opened. By default, any number of items may be open at once."
-          },
-          "open": {
-            "type": {
-              "name": "arrayOf",
-              "value": {
-                "name": "string"
-              }
-            },
-            "required": false,
-            "description": "If passed, the item or items that are expanded will be controlled by a parent component"
-          },
-          "onChange": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Function called when which panels are currently open changes. Necessary if `open` is passed."
-          },
-          "initialOpen": {
-            "type": {
-              "name": "arrayOf",
-              "value": {
-                "name": "string"
-              }
-            },
-            "required": false,
-            "description": "Allows items with specified ids to be open by default on first load. Should not be used with `open`."
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      },
-      "Panel": {
-        "docs": {
-          "description": "An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens\nand closes the collapsible children when pressed.\n\nExpects `openIds` and `onToggle` props from the `ExpandCollapse` render function and a unique\n`panelId` that matches the ids passed to the `<ExpandCollapse>`.\n\nThe panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required\nby the chosen accessibility props for a particular accessibility tools).",
-          "props": {
-            "openIds": {
-              "defaultValue": {
-                "value": "[]",
-                "computed": false
-              },
-              "type": {
-                "name": "arrayOf",
-                "value": {
-                  "name": "union",
-                  "value": [
-                    {
-                      "name": "number"
-                    },
-                    {
-                      "name": "string"
-                    }
-                  ]
-                }
-              },
-              "required": false,
-              "description": "Array of the ids of currently open groups"
-            },
-            "variant": {
-              "type": {
-                "name": "objectOf",
-                "value": {
-                  "name": "union",
-                  "value": [
-                    {
-                      "name": "string"
-                    },
-                    {
-                      "name": "number"
-                    },
-                    {
-                      "name": "bool"
-                    }
-                  ]
-                }
-              },
-              "required": false,
-              "description": ""
-            },
-            "tokens": {
-              "type": {
-                "name": "custom",
-                "raw": {
-                  "expandDuration": "duration",
-                  "collapseDuration": "duration",
-                  "contentPaddingLeft": "size",
-                  "contentPaddingRight": "size",
-                  "contentPaddingTop": "size",
-                  "contentPaddingBottom": "size"
-                }
-              },
-              "required": false,
-              "description": ""
-            },
-            "panelId": {
-              "type": {
-                "name": "string"
-              },
-              "required": true,
-              "description": "Unique name by which the ExpandCollapse controls this element."
-            },
-            "onToggle": {
-              "type": {
-                "name": "func"
-              },
-              "required": true,
-              "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
-            },
-            "onPress": {
-              "type": {
-                "name": "func"
-              },
-              "required": false,
-              "description": "Optional function to call on pressing the panel's control, in addition to opening or closing the panel."
-            },
-            "children": {
-              "type": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "func"
-                  },
-                  {
-                    "name": "node"
-                  }
-                ]
-              },
-              "required": false,
-              "description": "ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any\nsingle React element or a render function which takes this group's isExpanded state, onToggle function and panelId"
-            },
-            "control": {
-              "type": {
-                "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
-              },
-              "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
-            },
-            "controlTokens": {
-              "type": {
-                "name": "custom",
-                "raw": {
-                  "icon": "icon",
-                  "iconColor": "color",
-                  "iconSize": "size",
-                  "iconGap": "size",
-                  "iconPosition": "position",
-                  "verticalAlign": "verticalAlign",
-                  "justifyContent": "flexJustifyContent",
-                  "paddingLeft": "size",
-                  "paddingRight": "size",
-                  "paddingTop": "size",
-                  "paddingBottom": "size",
-                  "borderWidth": "border",
-                  "borderColor": "color",
-                  "backgroundColor": "color"
-                }
-              },
-              "required": false,
-              "description": "Optional theme token overrides that may be passed to the ExpandCollapseControl element."
-            }
-          },
-          "attributes": {
-            "acceptsRNA11yProps": false
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
           }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
         }
       }
     },
-    "Accordion": {
+    "ExpandCollapse": {
       "docs": {
-        "description": "'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time",
+        "description": "Flexible base component for lists where some or all items are collapsible headers.\n\nPass a render function as `children` which takes and passes `openIds` and `onToggle` props to\n<ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be\nnested (they do not need to be direct children), and non-interactive items may be included too.",
         "props": {
           "variant": {
             "type": {
@@ -4333,6 +4314,13 @@
       "docs": {
         "description": "An unordered List component has a child a ListItem that\nallows icon, dividers and customized typography",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "Platform.select({ web: 'list', default: undefined })",
+              "computed": true
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -4404,6 +4392,13 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
+            "accessibilityRole": {
+              "defaultValue": {
+                "value": "Platform.select({ web: 'listitem', default: undefined })",
+                "computed": true
+              },
+              "required": false
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -4486,95 +4481,17 @@
         }
       }
     },
-    "ListItem": {
-      "docs": {
-        "description": "ListItem is responsible for rendering icon or a bullet as side item",
-        "props": {
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "iconMarginTop": "size",
-                "itemFontWeight": "fontWeight",
-                "itemFontSize": "fontSize",
-                "itemLineHeight": "lineHeight",
-                "itemFontName": "fontName",
-                "interItemMargin": "size",
-                "interItemMarginWithDivider": "size",
-                "dividerColor": "color",
-                "dividerSize": "border",
-                "itemBulletContainerWidth": "size",
-                "itemBulletContainerAlign": "textAlign",
-                "itemBulletWidth": "size",
-                "itemBulletHeight": "size",
-                "itemBulletColor": "color",
-                "itemIconSize": "size",
-                "itemIconColor": "color",
-                "listGutter": "size"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": true,
-            "description": ""
-          },
-          "icon": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Renders side item icon"
-          },
-          "iconColor": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Will set display icon color"
-          },
-          "iconSize": {
-            "type": {
-              "name": "number"
-            },
-            "required": false,
-            "description": "Allow the user define the icon size if not defined the theme's file"
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
     "ListBase": {
       "docs": {
         "description": "An unordered List component has a child a ListItem that\nallows icon, dividers and customized typography",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "Platform.select({ web: 'list', default: undefined })",
+              "computed": true
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -4646,6 +4563,13 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
+            "accessibilityRole": {
+              "defaultValue": {
+                "value": "Platform.select({ web: 'listitem', default: undefined })",
+                "computed": true
+              },
+              "required": false
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -4728,6 +4652,98 @@
         }
       }
     },
+    "ListItem": {
+      "docs": {
+        "description": "ListItem is responsible for rendering icon or a bullet as side item",
+        "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "Platform.select({ web: 'listitem', default: undefined })",
+              "computed": true
+            },
+            "required": false
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "iconMarginTop": "size",
+                "itemFontWeight": "fontWeight",
+                "itemFontSize": "fontSize",
+                "itemLineHeight": "lineHeight",
+                "itemFontName": "fontName",
+                "interItemMargin": "size",
+                "interItemMarginWithDivider": "size",
+                "dividerColor": "color",
+                "dividerSize": "border",
+                "itemBulletContainerWidth": "size",
+                "itemBulletContainerAlign": "textAlign",
+                "itemBulletWidth": "size",
+                "itemBulletHeight": "size",
+                "itemBulletColor": "color",
+                "itemIconSize": "size",
+                "itemIconColor": "color",
+                "listGutter": "size"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          },
+          "icon": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Renders side item icon"
+          },
+          "iconColor": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Will set display icon color"
+          },
+          "iconSize": {
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "Allow the user define the icon size if not defined the theme's file"
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Modal": {
       "docs": {
         "description": "A modal window is a secondary window that opens on top of the main one.\nUsers have to interact with it before they can carry out their task and return to the main window.\nUse to reveal additional information to a user after they have performed an explicit interaction.\nThey are a strongly discouraged pattern; it's preferred to have all relevant information within a page,\nand irrelevant information either linked externally or omitted.\n\n- Must only appear after a customer interaction, not on page load or any other circumstance\n- Open a modal based on explicit customer action e.g. clicking on a button/link/form field\n- Only one modal should be \"current\" at any time\n- Read [WebAIM's documentation](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) to create accessible modals\n- Don’t use modals to reinforce or repeat information already available in the parent page or view\n- Don’t use modals consecutively",
@@ -5285,6 +5301,67 @@
         }
       }
     },
+    "PressableCardBase": {
+      "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",
+              "value": [
+                {
+                  "name": "func"
+                },
+                {
+                  "name": "node"
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": "getTokensSetPropType(tokenKeys, { requireAll: true, allowFunction: true })"
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Progress": {
       "docs": {
         "description": "The `Progress` is a container for displaying one or several `ProgressBar`s.\n\n## Props\n\n- Use `children` prop to pass one or multiple `ProgressBar`s. Note that in case of stacked progress bars\n  each next will be displayed on top of the previous one.\n\n## Tokens\n\n- Use the following tokens to customize the appearance:\n  - `backgroundColor` for the background color of the progress container,\n  - `borderColor` to control the color of the border,\n  - `borderRadius` for the rounded corners,\n  - `borderWidth` to change the border width.\n  - `height` to control the height of the progress bars displayed within the progress bar container.\n\n## Variants\n\n- Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your\n  progress bar container narrower.\n\n## Usability and A11y guidelines\n\n`Progress` component accepts the standard accessibility properties, however it's more important to make sure\nits children (instances of `ProgressBar`) receive the accessibility properties specific to the `progressbar`\nrole.",
@@ -5830,6 +5907,13 @@
             "required": false,
             "description": "Triggered when the clear button is pressed."
           },
+          "onFocus": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Triggered when the search input is focused."
+          },
           "accessibilityLabel": {
             "type": {
               "name": "string"
@@ -7250,6 +7334,42 @@
         }
       }
     },
+    "ThemeProvider": {
+      "docs": {
+        "description": "",
+        "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          },
+          "defaultTheme": {
+            "type": {
+              "name": "shape",
+              "value": {
+                "metadata": {
+                  "name": "shape",
+                  "value": {
+                    "themeTokensVersion": {
+                      "name": "string",
+                      "required": true
+                    }
+                  },
+                  "required": true
+                }
+              }
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "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.",
@@ -7652,215 +7772,45 @@
                 {
                   "value": "true",
                   "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.\n\nDoes not affect styling: <Typography heading=\"h2\"> will render a <h2> that looks like plain text.\nUse both `heading` and `variant` props to render semantic headings that look like headings.\n\nIn native apps, if this is `true` or any html heading tag string and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
-          },
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": false,
-            "description": "Same children allowed as a React Native <Text> node"
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "A11yInfoProvider": {
-      "docs": {
-        "description": "",
-        "props": {
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": true,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "BaseProvider": {
-      "docs": {
-        "description": "",
-        "props": {
-          "defaultTheme": {
-            "type": {
-              "name": "custom",
-              "raw": "ThemeProvider.propTypes?.defaultTheme"
-            },
-            "required": false,
-            "description": ""
-          },
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": true,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "ViewportProvider": {
-      "docs": {
-        "description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
-        "props": {
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": true,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "ThemeProvider": {
-      "docs": {
-        "description": "",
-        "props": {
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": true,
-            "description": ""
-          },
-          "defaultTheme": {
-            "type": {
-              "name": "shape",
-              "value": {
-                "metadata": {
-                  "name": "shape",
-                  "value": {
-                    "themeTokensVersion": {
-                      "name": "string",
-                      "required": true
-                    }
-                  },
-                  "required": true
-                }
-              }
-            },
-            "required": true,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
-    "Button": {
-      "docs": {
-        "description": "",
-        "props": {
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "borderColor": "color",
-                "borderWidth": "border",
-                "borderRadius": "radius",
-                "shadow": "shadow",
-                "fontSize": "fontSize",
-                "color": "color",
-                "lineHeight": "lineHeight",
-                "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
-                "fontName": "fontName",
-                "fontWeight": "fontWeight",
-                "backgroundColor": "color",
-                "opacity": "opacity",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "paddingTop": "size",
-                "paddingBottom": "size",
-                "width": "size",
-                "minWidth": "size",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "Alias for `inactive`"
-          },
-          "children": {
-            "type": {
-              "name": "custom",
-              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
-            },
-            "required": false,
-            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
-          },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Function called when the button is pressed. Required unless the button has a href."
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
+                }
+              ]
+            },
+            "required": false,
+            "description": "Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.\n\nDoes not affect styling: <Typography heading=\"h2\"> will render a <h2> that looks like plain text.\nUse both `heading` and `variant` props to render semantic headings that look like headings.\n\nIn native apps, if this is `true` or any html heading tag string and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
+          },
+          "children": {
+            "type": {
+              "name": "node"
             },
             "required": false,
+            "description": "Same children allowed as a React Native <Text> node"
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
+    "ViewportProvider": {
+      "docs": {
+        "description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
+        "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
             "description": ""
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
-    "ButtonLink": {
+    "Button": {
       "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.",
+        "description": "",
         "props": {
           "tokens": {
             "type": {
@@ -7943,66 +7893,6 @@
             },
             "required": false,
             "description": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressOut": {
-            "type": {
-              "name": "func"
-            },
-            "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": ""
           }
         },
         "attributes": {
@@ -8230,6 +8120,158 @@
         }
       }
     },
+    "ButtonLink": {
+      "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"
+            },
+            "required": false,
+            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Alias for `inactive`"
+          },
+          "children": {
+            "type": {
+              "name": "custom",
+              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
+            },
+            "required": false,
+            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
+          },
+          "onPress": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Function called when the button is pressed. Required unless the button has a href."
+          },
+          "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"
+            },
+            "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": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": true
+        }
+      }
+    },
     "CheckboxGroup": {
       "docs": {
         "description": "A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Checkbox in the group:\n\n - `label`: main text passed to CheckboxGroup's `label` prop\n - `id`: identifier used to store which CheckboxGroup 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 CheckboxGroup 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\nCheckboxGroup accepts all the common accessibility props, and controls the accessibility state\nof children like Checkbox and Feedback based on current state.\n\n@example\n```jsx\n<CheckboxGroup\n  initialCheckedId=\"check1\"\n  items={[\n    { label: 'Checkbox 1', id: 'check1' },\n    { label: 'Checkbox 2', id: 'check2' },\n    { label: 'Checkbox 3', id: 'check3' }\n  ]}\n  legend=\"Checkboxes\"\n  hint=\"Choose from these options\"\n/>\n```",
@@ -9511,9 +9553,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": {
@@ -9579,6 +9621,8 @@
             "type": {
               "name": "custom",
               "raw": {
+                "minLines": "integer",
+                "maxLines": "integer",
                 "backgroundColor": "color",
                 "color": "color",
                 "borderWidth": "border",
@@ -9609,9 +9653,9 @@
         }
       }
     },
-    "TextArea": {
+    "TextInput": {
       "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.",
+        "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": {
@@ -9677,8 +9721,6 @@
             "type": {
               "name": "custom",
               "raw": {
-                "minLines": "integer",
-                "maxLines": "integer",
                 "backgroundColor": "color",
                 "color": "color",
                 "borderWidth": "border",