@telus-uds/components-base 1.48.0 → 1.50.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 06 Jun 2023 20:37:42 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Jun 2023 00:01:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.50.0
+
+Wed, 14 Jun 2023 00:01:25 GMT
+
+### Minor changes
+
+- Datepicker refactor (srikanthkhari@gmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.32.0
+
+### Patches
+
+- Allow dynamic swap of `defaultTheme` passed to `ThemeProvider` (shahzaibkhalidmalik@outlook.com)
+
+## 1.49.0
+
+Fri, 09 Jun 2023 00:28:33 GMT
+
+### Minor changes
+
+- refactored SideNav component for alignment to design intentions (kyle.king2@telus.com)
+- Fixed bullet alignment within ListItemBase (wlsdud194@hotmail.com)
+- expand collpase mini variant introduced (akshay.pandey1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.31.0
+
 ## 1.48.0
 
-Tue, 06 Jun 2023 20:37:42 GMT
+Tue, 06 Jun 2023 20:46:12 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -547,12 +547,6 @@
         "calendarMonthCaptionFontWeight": "fontWeight",
         "calendarMonthCaptionLineHeight": "lineHeight",
         "calendarMonthCaptionPaddingBottom": "size",
-        "dateInputBorderColor": "color",
-        "dateInputBorderRadius": "radius",
-        "dateInputFocusBorderColor": "color",
-        "dateInputHoverBorderColor": "color",
-        "dateInputInsideBorderColor": "color",
-        "dateInputInsideColor": "color",
         "dateInputStrokeColor": "color",
         "dayPickerWeekHeaderColor": "color",
         "dayPickerWeekHeaderFontName": "fontName",
@@ -594,7 +588,12 @@
         "paddingBottom": "size",
         "borderWidth": "border",
         "borderColor": "color",
-        "backgroundColor": "color"
+        "backgroundColor": "color",
+        "borderTopLeftRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "textLine": "textLine"
       },
       "ExpandCollapseMiniControl": {
         "size": "size",
@@ -628,20 +627,6 @@
         "expandDividerColor": "color",
         "expandDividerWidth": "size"
       },
-      "ExpandCollapseMiniPanel": {
-        "expandDuration": "duration",
-        "collapseDuration": "duration",
-        "contentPaddingLeft": "size",
-        "contentPaddingRight": "size",
-        "contentPaddingTop": "size",
-        "contentPaddingBottom": "size",
-        "marginBottom": "size",
-        "borderColor": "color",
-        "borderRadius": "radius",
-        "borderWidth": "border",
-        "expandDividerColor": "color",
-        "expandDividerWidth": "size"
-      },
       "Feedback": {
         "backgroundColor": "color",
         "borderColor": "color",
@@ -2692,6 +2677,16 @@
           "platforms": [
             "rn"
           ]
+        },
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       },
       "SideNavItemGroup": {
@@ -3361,13 +3356,6 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
-            "isMiniExpandCollapse": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "required": false
-            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -3472,7 +3460,12 @@
                   "paddingBottom": "size",
                   "borderWidth": "border",
                   "borderColor": "color",
-                  "backgroundColor": "color"
+                  "backgroundColor": "color",
+                  "borderTopLeftRadius": "radius",
+                  "borderBottomLeftRadius": "radius",
+                  "borderTopRightRadius": "radius",
+                  "borderBottomRightRadius": "radius",
+                  "textLine": "textLine"
                 }
               },
               "required": false,
@@ -4306,13 +4299,6 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
-            "isMiniExpandCollapse": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "required": false
-            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -4417,7 +4403,12 @@
                   "paddingBottom": "size",
                   "borderWidth": "border",
                   "borderColor": "color",
-                  "backgroundColor": "color"
+                  "backgroundColor": "color",
+                  "borderTopLeftRadius": "radius",
+                  "borderBottomLeftRadius": "radius",
+                  "borderTopRightRadius": "radius",
+                  "borderBottomRightRadius": "radius",
+                  "textLine": "textLine"
                 }
               },
               "required": false,
@@ -10092,6 +10083,10 @@
                     "themeTokensVersion": {
                       "name": "string",
                       "required": true
+                    },
+                    "name": {
+                      "name": "string",
+                      "required": true
                     }
                   },
                   "required": true

package/lib/ExpandCollapse/Control.js

@@ -11,6 +11,8 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -32,25 +34,34 @@ function selectContainerStyles(_ref) {
     backgroundColor,
     borderColor,
     borderWidth,
-    borderStyle,
+    borderStyle = 'solid',
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
     verticalAlign,
-    iconPosition
+    iconPosition,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius
   } = _ref;
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
   };
 } // TODO: use stack / spacer when available
@@ -69,6 +80,16 @@ function selectIconContainerStyles(_ref2) {
   };
 }
 
+function selectTextContainerStyles(_ref3) {
+  let {
+    textLine
+  } = _ref3;
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  };
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -76,7 +97,7 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
@@ -84,10 +105,9 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     tokens,
     accessibilityRole = 'button',
     variant,
-    isMiniExpandCollapse = false,
     ...rest
-  } = _ref3;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
+  } = _ref4;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
@@ -96,12 +116,12 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     }
   });
 
-  const getControlState = _ref4 => {
+  const getControlState = _ref5 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref4;
+    } = _ref5;
     return {
       pressed,
       hover: hovered,
@@ -112,7 +132,11 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
 
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
 
-  const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
+  const getPressableStyle = pressableState => ({ ...selectContainerStyles(getControlTokens(pressableState)),
+    ...(_Platform.default.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
@@ -129,7 +153,10 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
           style: selectIconContainerStyles(themeTokens),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
           })
-        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectTextContainerStyles(themeTokens),
+          children: typeof children === 'function' ? children(getControlState(pressableState)) : children
+        })]
       });
     }
   });

package/lib/ExpandCollapse/Panel.js

@@ -70,7 +70,6 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
-    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -81,7 +80,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       expanded: isExpanded
     }
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -117,7 +116,6 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
-      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: {

package/lib/List/ListItemBase.js

@@ -23,6 +23,8 @@ var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
+var _ThemeProvider = require("../ThemeProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,12 +81,29 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
+  const {
+    iconMarginTop,
+    itemIconSize
+  } = themeTokens;
+  let adjustedIconMarginTop = iconMarginTop;
+  const {
+    fontSize,
+    lineHeight: lineHeightRatio
+  } = (0, _ThemeProvider.useThemeTokens)('Typography', {}, {
+    size: 'h4',
+    bold: true
+  });
+
+  if (title) {
+    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
+  }
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
    * and custom margin and padding, otherwise just adds a margin to the bottom
    */
 
+
   const getContainerStyle = () => {
     if (isLastItem) {
       return undefined;
@@ -112,11 +131,11 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       style: [{
         flex: 1,
         flexDirection: 'row'
-      }, !title && {
-        alignItems: 'center'
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
-        tokens: tokens,
+        tokens: { ...tokens,
+          iconMarginTop: adjustedIconMarginTop
+        },
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize

package/lib/SideNav/Item.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
@@ -94,16 +96,22 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 
   const getAppearanceState = _ref3 => {
     let {
-      hovered
+      hovered,
+      focused
     } = _ref3;
     return {
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
     };
   };
 
-  const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
+  const getPressableStyle = pressableState => ({ ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+    ...(_Platform.default.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,

package/lib/SideNav/ItemContent.js

@@ -42,9 +42,10 @@ const ItemContent = _ref => {
     children,
     tokens
   } = _ref;
+  const typographyTokens = (0, _utils.selectTokens)('Typography', tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      tokens: (0, _utils.selectTokens)('Typography', tokens),
+      tokens: typographyTokens,
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]

package/lib/SideNav/ItemsGroup.js

@@ -61,7 +61,17 @@ const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
 
-  const getPanelTokens = appearance => (0, _utils.selectTokens)('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
+  const getPanelTokens = appearance => {
+    const {
+      panelBorderColor,
+      ...itemsGroupTokens
+    } = getGroupTokens(getAppearance(appearance));
+    const groupTokens = { ...itemsGroupTokens,
+      borderWidth: 0,
+      marginBottom: 0
+    };
+    return (0, _utils.selectTokens)('ExpandCollapsePanel', groupTokens);
+  };
 
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
 

package/lib/TextInput/TextInput.js

@@ -62,21 +62,23 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+      nativeID: nativeID,
+      ...supportsProps,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps
+        });
+      }
+    }), rest.children]
   });
 });
 TextInput.displayName = 'TextInput';

package/lib/ThemeProvider/ThemeProvider.js

@@ -45,6 +45,11 @@ const ThemeProvider = _ref => {
     themeOptions = {}
   } = _ref;
   const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  (0, _react.useEffect)(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme);
+    }
+  }, [theme.metadata.name, defaultTheme]);
   const appliedThemeOptions = { ...defaultThemeOptions,
     ...themeOptions
   }; // Validate the theme tokens version on every render.
@@ -67,7 +72,8 @@ ThemeProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
   defaultTheme: _propTypes.default.shape({
     metadata: _propTypes.default.shape({
-      themeTokensVersion: _propTypes.default.string.isRequired
+      themeTokensVersion: _propTypes.default.string.isRequired,
+      name: _propTypes.default.string.isRequired
     }).isRequired
   }).isRequired,
 

package/lib-module/ExpandCollapse/Control.js

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
@@ -14,25 +15,34 @@ function selectContainerStyles(_ref) {
     backgroundColor,
     borderColor,
     borderWidth,
-    borderStyle,
+    borderStyle = 'solid',
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
     verticalAlign,
-    iconPosition
+    iconPosition,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius
   } = _ref;
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   };
 } // TODO: use stack / spacer when available
@@ -51,6 +61,16 @@ function selectIconContainerStyles(_ref2) {
   };
 }
 
+function selectTextContainerStyles(_ref3) {
+  let {
+    textLine
+  } = _ref3;
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  };
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -58,7 +78,7 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
@@ -66,10 +86,9 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     tokens,
     accessibilityRole = 'button',
     variant,
-    isMiniExpandCollapse = false,
     ...rest
-  } = _ref3;
-  const getTokens = useThemeTokensCallback(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
+  } = _ref4;
+  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
@@ -78,12 +97,12 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     }
   });
 
-  const getControlState = _ref4 => {
+  const getControlState = _ref5 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref4;
+    } = _ref5;
     return {
       pressed,
       hover: hovered,
@@ -94,7 +113,11 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
 
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
 
-  const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
+  const getPressableStyle = pressableState => ({ ...selectContainerStyles(getControlTokens(pressableState)),
+    ...(Platform.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
@@ -111,7 +134,10 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
           style: selectIconContainerStyles(themeTokens),
           children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
           })
-        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectTextContainerStyles(themeTokens),
+          children: typeof children === 'function' ? children(getControlState(pressableState)) : children
+        })]
       });
     }
   });

package/lib-module/ExpandCollapse/Panel.js

@@ -48,7 +48,6 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children,
     tokens,
     variant,
-    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -59,7 +58,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       expanded: isExpanded
     }
   });
-  const themeTokens = useThemeTokens(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -95,7 +94,6 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
-      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {

package/lib-module/List/ListItemBase.js

@@ -7,6 +7,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import ListItemContent from './ListItemContent';
 import ListItemMark from './ListItemMark';
 import Typography from '../Typography';
+import { useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -57,12 +58,29 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
+  const {
+    iconMarginTop,
+    itemIconSize
+  } = themeTokens;
+  let adjustedIconMarginTop = iconMarginTop;
+  const {
+    fontSize,
+    lineHeight: lineHeightRatio
+  } = useThemeTokens('Typography', {}, {
+    size: 'h4',
+    bold: true
+  });
+
+  if (title) {
+    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
+  }
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
    * and custom margin and padding, otherwise just adds a margin to the bottom
    */
 
+
   const getContainerStyle = () => {
     if (isLastItem) {
       return undefined;
@@ -90,11 +108,11 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       style: [{
         flex: 1,
         flexDirection: 'row'
-      }, !title && {
-        alignItems: 'center'
       }],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
-        tokens: tokens,
+        tokens: { ...tokens,
+          iconMarginTop: adjustedIconMarginTop
+        },
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize

package/lib-module/SideNav/Item.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
@@ -73,16 +74,22 @@ const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
 
   const getAppearanceState = _ref3 => {
     let {
-      hovered
+      hovered,
+      focused
     } = _ref3;
     return {
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
     };
   };
 
-  const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
+  const getPressableStyle = pressableState => ({ ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+    ...(Platform.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,

package/lib-module/SideNav/ItemContent.js

@@ -26,9 +26,10 @@ const ItemContent = _ref => {
     children,
     tokens
   } = _ref;
+  const typographyTokens = selectTokens('Typography', tokens);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
-      tokens: selectTokens('Typography', tokens),
+      tokens: typographyTokens,
       children: children
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]

package/lib-module/SideNav/ItemsGroup.js

@@ -42,7 +42,17 @@ const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
 
-  const getPanelTokens = appearance => selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
+  const getPanelTokens = appearance => {
+    const {
+      panelBorderColor,
+      ...itemsGroupTokens
+    } = getGroupTokens(getAppearance(appearance));
+    const groupTokens = { ...itemsGroupTokens,
+      borderWidth: 0,
+      marginBottom: 0
+    };
+    return selectTokens('ExpandCollapsePanel', groupTokens);
+  };
 
   const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
 

package/lib-module/TextInput/TextInput.js

@@ -5,6 +5,8 @@ import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
@@ -42,21 +44,23 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/_jsx(TextInputBase, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputSupports, {
+      nativeID: nativeID,
+      ...supportsProps,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/_jsx(TextInputBase, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps
+        });
+      }
+    }), rest.children]
   });
 });
 TextInput.displayName = 'TextInput';

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { validateThemeTokensVersion } from './utils';
 import responsiveProps from '../utils/props/responsiveProps';
@@ -24,6 +24,11 @@ const ThemeProvider = _ref => {
     themeOptions = {}
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme);
+  useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme);
+    }
+  }, [theme.metadata.name, defaultTheme]);
   const appliedThemeOptions = { ...defaultThemeOptions,
     ...themeOptions
   }; // Validate the theme tokens version on every render.
@@ -46,7 +51,8 @@ ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
     metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
 

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.30.0",
+    "@telus-uds/system-theme-tokens": "^2.32.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.48.0"
+  "version": "1.50.0"
 }

package/src/Card/CardBase.jsx

@@ -42,7 +42,6 @@ const selectStyles = ({
 const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
   const props = selectProps(rest)
-
   return (
     <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
       {children}

package/src/ExpandCollapse/Control.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Pressable, View } from 'react-native'
+import { Pressable, View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
@@ -11,25 +11,34 @@ function selectContainerStyles({
   backgroundColor,
   borderColor,
   borderWidth,
-  borderStyle,
+  borderStyle = 'solid',
   paddingLeft,
   paddingRight,
   paddingTop,
   paddingBottom,
   justifyContent,
   verticalAlign,
-  iconPosition
+  iconPosition,
+  borderTopRightRadius,
+  borderBottomRightRadius,
+  borderTopLeftRadius,
+  borderBottomLeftRadius
 }) {
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   }
 }
@@ -43,6 +52,13 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
+function selectTextContainerStyles({ textLine }) {
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  }
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -52,23 +68,10 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = forwardRef(
   (
-    {
-      onPress,
-      isExpanded,
-      children,
-      tokens,
-      accessibilityRole = 'button',
-      variant,
-      isMiniExpandCollapse = false,
-      ...rest
-    },
+    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
     ref
   ) => {
-    const getTokens = useThemeTokensCallback(
-      isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl',
-      tokens,
-      variant
-    )
+    const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
 
     const selectedProps = selectProps({
       accessibilityRole,
@@ -86,14 +89,15 @@ const ExpandCollapseControl = forwardRef(
       expanded: isExpanded
     })
     const getControlTokens = (pressableState) => getTokens(getControlState(pressableState))
-    const getPressableStyle = (pressableState) =>
-      selectContainerStyles(getControlTokens(pressableState))
+    const getPressableStyle = (pressableState) => ({
+      ...selectContainerStyles(getControlTokens(pressableState)),
+      ...(Platform.OS === 'web' ? { outline: 'none' } : {})
+    })
 
     return (
       <Pressable ref={ref} {...selectedProps} onPress={onPress} style={getPressableStyle}>
         {(pressableState) => {
           const { icon: IconComponent, ...themeTokens } = getControlTokens(pressableState)
-
           return (
             <>
               {IconComponent && (
@@ -101,9 +105,11 @@ const ExpandCollapseControl = forwardRef(
                   <IconComponent {...selectIconTokens(themeTokens)} />
                 </View>
               )}
-              {typeof children === 'function'
-                ? children(getControlState(pressableState))
-                : children}
+              <View style={selectTextContainerStyles(themeTokens)}>
+                {typeof children === 'function'
+                  ? children(getControlState(pressableState))
+                  : children}
+              </View>
             </>
           )
         }}

package/src/ExpandCollapse/Panel.jsx

@@ -51,7 +51,6 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
-      isMiniExpandCollapse = false,
       controlRef,
       ...rest
     },
@@ -68,14 +67,9 @@ const ExpandCollapsePanel = forwardRef(
       }
     })
 
-    const themeTokens = useThemeTokens(
-      isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel',
-      tokens,
-      variant,
-      {
-        expanded: isExpanded
-      }
-    )
+    const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+      expanded: isExpanded
+    })
 
     const handleControlPress = (event) => {
       onToggle(panelId, event)
@@ -106,7 +100,6 @@ const ExpandCollapsePanel = forwardRef(
           variant={variant}
           onPress={handleControlPress}
           ref={controlRef}
-          isMiniExpandCollapse={isMiniExpandCollapse}
         >
           {control}
         </ExpandCollapseControl>

package/src/Link/LinkBase.jsx

@@ -126,6 +126,7 @@ const LinkBase = forwardRef(
   ) => {
     const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+
     const selectedProps = selectProps({
       accessibilityRole,
       href,

package/src/List/ListItemBase.jsx

@@ -6,6 +6,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
 import Typography from '../Typography'
+import { useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -43,7 +44,16 @@ const ListItemBase = forwardRef(
 
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
-
+    const { iconMarginTop, itemIconSize } = themeTokens
+    let adjustedIconMarginTop = iconMarginTop
+    const { fontSize, lineHeight: lineHeightRatio } = useThemeTokens(
+      'Typography',
+      {},
+      { size: 'h4', bold: true }
+    )
+    if (title) {
+      adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2
+    }
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
      * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -76,11 +86,15 @@ const ListItemBase = forwardRef(
               {
                 flex: 1,
                 flexDirection: 'row'
-              },
-              !title && { alignItems: 'center' }
+              }
             ]}
           >
-            <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
+            <ListItemMark
+              tokens={{ ...tokens, iconMarginTop: adjustedIconMarginTop }}
+              icon={icon}
+              iconColor={iconColor}
+              iconSize={iconSize}
+            />
             <View style={staticStyles.titleAndContentContainer}>
               {Boolean(title) && (
                 <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>

package/src/SideNav/Item.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Pressable } from 'react-native'
+import { Pressable, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import {
   a11yProps,
@@ -76,13 +76,16 @@ const Item = forwardRef(
     })
 
     const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant)
-    const getAppearanceState = ({ hovered }) => ({
+    const getAppearanceState = ({ hovered, focused }) => ({
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
+    })
+    const getPressableStyle = (pressableState) => ({
+      ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+      ...(Platform.OS === 'web' ? { outline: 'none' } : {})
     })
-    const getPressableStyle = (pressableState) =>
-      selectItemStyles(getTokens(getAppearanceState(pressableState)))
 
     return (
       <Pressable

package/src/SideNav/ItemContent.jsx

@@ -19,12 +19,16 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = ({ children, tokens }) => (
-  <>
-    <Typography tokens={selectTokens('Typography', tokens)}>{children}</Typography>
-    <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
-  </>
-)
+const ItemContent = ({ children, tokens }) => {
+  const typographyTokens = selectTokens('Typography', tokens)
+
+  return (
+    <>
+      <Typography tokens={typographyTokens}>{children}</Typography>
+      <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
+    </>
+  )
+}
 
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),

package/src/SideNav/ItemsGroup.jsx

@@ -37,8 +37,15 @@ const ItemsGroup = forwardRef(
     const getItemAppearance = (appearance) => ({ ...getAppearance(appearance), type: 'parent' })
 
     const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant)
-    const getPanelTokens = (appearance) =>
-      selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)))
+    const getPanelTokens = (appearance) => {
+      const { panelBorderColor, ...itemsGroupTokens } = getGroupTokens(getAppearance(appearance))
+      const groupTokens = {
+        ...itemsGroupTokens,
+        borderWidth: 0,
+        marginBottom: 0
+      }
+      return selectTokens('ExpandCollapsePanel', groupTokens)
+    }
 
     const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant)
     const getControlTokens = (appearance) =>
@@ -49,6 +56,7 @@ const ItemsGroup = forwardRef(
 
     const controlContent = (controlState) => {
       const currentItemTokens = getItemTokens(getItemAppearance(controlState))
+
       return <ItemContent tokens={currentItemTokens}>{label}</ItemContent>
     }
 

package/src/SideNav/SideNav.jsx

@@ -56,6 +56,7 @@ const SideNav = forwardRef(
               onItemPress(...args)
               if (onPress) onPress(...args)
             }
+
             return (
               <Item
                 {...item.props}
@@ -78,6 +79,7 @@ const SideNav = forwardRef(
               const { groupId = `group-${index}` } = child.props
               const isGroupActive = active.itemId !== undefined && active.groupId === groupId
               const handleToggle = (event) => onToggle(groupId, event)
+
               return (
                 <ItemsGroup
                   {...child.props}

package/src/TextInput/TextInput.jsx

@@ -52,11 +52,14 @@ const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref)
   }
 
   return (
-    <InputSupports nativeID={nativeID} {...supportsProps}>
-      {({ inputId, ...propsFromInputSupports }) => (
-        <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
-      )}
-    </InputSupports>
+    <>
+      <InputSupports nativeID={nativeID} {...supportsProps}>
+        {({ inputId, ...propsFromInputSupports }) => (
+          <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
+        )}
+      </InputSupports>
+      {rest.children}
+    </>
   )
 })
 TextInput.displayName = 'TextInput'

package/src/ThemeProvider/ThemeProvider.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { validateThemeTokensVersion } from './utils'
 import responsiveProps from '../utils/props/responsiveProps'
@@ -22,6 +22,12 @@ const defaultThemeOptions = {
 const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
   const [theme, setTheme] = useState(defaultTheme)
 
+  useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme)
+    }
+  }, [theme.metadata.name, defaultTheme])
+
   const appliedThemeOptions = { ...defaultThemeOptions, ...themeOptions }
 
   // Validate the theme tokens version on every render.
@@ -42,7 +48,8 @@ ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
     metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
   /**

package/src/utils/a11y/semantics.js

@@ -23,7 +23,7 @@ import { Platform } from 'react-native'
  */
 // Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
 // eslint-disable-next-line prettier/prettier
-const rolesToTags = /** @type {const} */ ({
+const rolesToTags = /** @type {const} */ {
   article: 'article',
   banner: 'header',
   blockquote: 'blockquote',
@@ -45,7 +45,7 @@ const rolesToTags = /** @type {const} */ ({
   // Add special cases that are in RNW's function logic but not in its mapping object
   label: 'label'
   // eslint-disable-next-line prettier/prettier
-})
+}
 
 // Invert React Native Web's mapping, so a tag gets the role that gets that tag
 export const tagsToRoles = Object.fromEntries(
@@ -57,7 +57,7 @@ export const tagsToRoles = Object.fromEntries(
  * to headings on web but without the expectation of a hierarchy of headings within one screen.
  */
 // eslint-disable-next-line prettier/prettier
-export const headingTags = /** @type {const} */ (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+export const headingTags = /** @type {const} */ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
 /**
  * @typedef {typeof headingTags[number]} HeadingTag
  */
@@ -81,7 +81,7 @@ export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags]
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
 // eslint-disable-next-line prettier/prettier
-export const layoutTags = /** @type {const} */ ([
+export const layoutTags = /** @type {const} */ [
   ...headingTags,
   'article',
   'aside',
@@ -97,7 +97,7 @@ export const layoutTags = /** @type {const} */ ([
   'section',
   'label'
   // eslint-disable-next-line prettier/prettier
-])
+]
 /**
  * @typedef {typeof layoutTags[number]} LayoutTag
  */
@@ -108,7 +108,7 @@ export const layoutTags = /** @type {const} */ ([
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
 // eslint-disable-next-line prettier/prettier
-export const textTags = /** @type {const} */ ([
+export const textTags = /** @type {const} */ [
   ...headingTags,
   'blockquote',
   'code',
@@ -119,7 +119,7 @@ export const textTags = /** @type {const} */ ([
   'strong',
   'label'
   // eslint-disable-next-line prettier/prettier
-])
+]
 /**
  * @typedef {typeof layoutTags[number]} TextTag
  */