@telus-uds/components-base 3.0.0 → 3.2.0

package/CHANGELOG.md

@@ -1,12 +1,48 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 31 Jan 2025 20:49:19 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Feb 2025 18:59:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.2.0
+
+Fri, 14 Feb 2025 18:59:39 GMT
+
+### Minor changes
+
+- `Link`: refactoring component for koodo brand (Mauricio.BatresMontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.2.0
+
+### Patches
+
+- `Notification`: fix system variant (guillermo.peitzner@telus.com)
+- `Typography`: add default value in text-align (sergio.ramirez@telus.com)
+- `Modal`: Added space below the title when content is passed as a child. (Mauricio.BatresMontejo@telus.com)
+
+## 3.1.0
+
+Mon, 10 Feb 2025 17:36:47 GMT
+
+### Minor changes
+
+- `TabsItem`: Add new tokens & design (sergio.ramirez@telus.com)
+- `Listbox`: Include export type members for component. (jaime.tuyuc@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.1.0
+
+### Patches
+
+- `Notification`: remove flex 1 as it was breaking notification on IOS (kristina.kirpichnikova@telus.com)
+- Carousel: may throw a runtime error regarding `outline` property (shahzaibkhalidmalik@outlook.com)
+- `Modal`: fix conditional platform rendering (guillermo.peitzner@telus.com)
+- `ChevronLink`: fix icon resize on IOS after font size increase (kristina.kirpichnikova@telus.com)
+- `ExpandCollapse`: Fix when have another ExpandCollapse nested (Mauricio.BatresMontejo@telus.com)
+- `LinkBase`: fix icon alignment (guillermo.peitzner@telus.com)
+- `TextInputBase`: fix rendering on mobile devices and default value rendering (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: add token to modify icon color background (Mauricio.BatresMontejo@telus.com)
+
 ## 3.0.0
 
-Fri, 31 Jan 2025 20:49:19 GMT
+Fri, 31 Jan 2025 20:53:28 GMT
 
 ### Major changes
 

package/lib/cjs/Carousel/Carousel.js

@@ -41,12 +41,7 @@ const staticStyles = _StyleSheet.default.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0,
-    ..._Platform.default.select({
-      web: {
-        outline: 'none'
-      }
-    })
+    left: 0
   },
   animationControlButton: {
     position: 'absolute',
@@ -752,7 +747,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         refocus: refocus,
         width: containerLayout.width,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-          style: [staticStyles.root],
+          style: [staticStyles.root, {
+            ...(_Platform.default.OS === 'web' ? {
+              outline: 'none'
+            } : {})
+          }],
           onLayout: onContainerLayout,
           ref: ref,
           ...systemProps,

package/lib/cjs/ExpandCollapse/Panel.js

@@ -9,6 +9,8 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Control = _interopRequireDefault(require("./Control"));
@@ -127,7 +129,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     expanded: isExpanded
   });
   const handleControlPress = event => {
-    onToggle(panelId, event);
+    onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
   };
   const onContainerLayout = event => {
@@ -149,7 +151,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
   const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
   const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: selectContentPanelStyles(themeTokens),
+    style: [selectContentPanelStyles(themeTokens), staticStyles.panelContainer],
     accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: selectTextStyles(themeTokens),
@@ -158,7 +160,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     }) : children
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
-    style: themeTokens,
+    style: [themeTokens, staticStyles.container],
     accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlPanelStyles(themeTokens),
@@ -178,7 +180,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.ScrollView, {
       ref: animatedRef,
       style: animatedStyles,
       ...focusabilityProps,
@@ -187,12 +189,22 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         style: {
           ..._Platform.default.select({
             default: {
-              flex: 1
+              flex: 1,
+              overflow: 'hidden'
             },
-            web: {}
+            web: {
+              overflow: 'hidden'
+            }
           })
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
+          children: children
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+          onContentSizeChange: (_, height) => {
+            setContainerHeight(height);
+          },
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
           children: children
@@ -202,6 +214,16 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
   });
 });
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
+  panelContainer: {
+    flexGrow: 1,
+    alignSelf: 'stretch'
+  }
+});
 ExpandCollapsePanel.propTypes = {
   ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,

package/lib/cjs/Icon/Icon.js

@@ -7,6 +7,7 @@ exports.iconComponentPropTypes = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _useWindowDimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/useWindowDimensions"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -23,7 +24,10 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
-  const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
+  const {
+    fontScale
+  } = (0, _useWindowDimensions.default)();
+  const size = scalesWithText ? themeTokens.size * fontScale : themeTokens.size;
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
     title: accessibilityLabel,
     size: size,

package/lib/cjs/Link/LinkBase.js

@@ -103,7 +103,7 @@ const selectIconTokens = _ref5 => {
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
+  const translateY = iconTranslateY && iconTranslateY !== 0 ? iconTranslateY : blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,

package/lib/cjs/List/ListItemMark.js

@@ -51,10 +51,12 @@ const selectBulletPositioningStyles = _ref3 => {
 const selectBulletContainerStyles = _ref4 => {
   let {
     itemBulletContainerWidth,
+    itemBulletContainerHeight,
     itemBulletContainerAlign
   } = _ref4;
   return {
     width: itemBulletContainerWidth,
+    height: itemBulletContainerHeight,
     alignItems: itemBulletContainerAlign
   };
 };
@@ -76,10 +78,11 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: sideItemContainerStyles,
+      style: [sideItemContainerStyles, bulletContainerStyles],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
         size: iconSize || iconTokens.size,
         color: iconColor || iconTokens.color
@@ -101,7 +104,8 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: bulletIcon,
         tokens: {
-          color: bulletColor
+          color: bulletColor,
+          size: themeTokens.itemIconSize
         }
       })
     })

package/lib/cjs/Modal/Modal.js

@@ -230,12 +230,10 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
-            children: _Platform.default !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+            children: _Platform.default.OS !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
               style: selectScrollViewStyles,
               children: children
-            }) : {
-              children
-            }
+            }) : children
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {

package/lib/cjs/Modal/ModalContent.js

@@ -135,7 +135,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           },
           children: subHeading
         })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
         space: 3
       })]
     }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -112,6 +112,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     headerFontColor,
     headerFontSize,
     buttonDirection,
+    buttonIconBackgroundColor,
     headerFontWeight,
     headerLineHeight,
     subHeaderFontWeight,
@@ -155,7 +156,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     paddingTop: labelPaddingTop,
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
-    paddingRight: labelPaddingRight
+    paddingRight: labelPaddingRight,
+    iconBackground: buttonIconBackgroundColor
   };
   const getButtonDropdownTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/cjs/Notification/Notification.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 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 _systemConstants = require("@telus-uds/system-constants");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -71,12 +71,12 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+  width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -90,7 +90,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
     styles: containerStyles
   } = _utils.StyleSheet.create({
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
@@ -102,22 +102,9 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...(0, _utils.createMediaQueryStyles)({
-        xs: {
-          maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
-        },
-        md: {
-          maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
-        },
-        lg: {
-          maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
-        },
-        sm: {
-          maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
-        },
-        xl: {
-          maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
-        }
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && {
+        alignSelf: 'center'
       })
     }
   });
@@ -182,17 +169,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' || _Platform.default.OS === 'android' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerStyles(themeTokens)
     }
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && {
+        alignSelf: 'center'
+      })
     }
   },
   staticContentContainerStyles: {
@@ -310,7 +299,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
   const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -332,7 +321,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
   } else {
     notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
   }

package/lib/cjs/Tabs/TabsItem.js

@@ -68,7 +68,9 @@ const selectContainerStyles = _ref3 => {
     borderWidth = 0,
     borderRadius,
     paddingHorizontal = 0,
-    paddingVertical = 0
+    paddingVertical = 0,
+    marginHorizontal = 0,
+    marginVertical = 0
   } = _ref3;
   return {
     backgroundColor,
@@ -76,7 +78,9 @@ const selectContainerStyles = _ref3 => {
     borderWidth,
     borderRadius,
     paddingHorizontal: paddingHorizontal - borderWidth,
-    paddingVertical: paddingVertical - borderWidth
+    paddingVertical: paddingVertical - borderWidth,
+    marginHorizontal,
+    marginVertical
   };
 };
 

package/lib/cjs/TextInput/TextInputBase.js

@@ -370,32 +370,6 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     ...themeTokens,
     height
   }, themeOptions, inactive, type, buttons?.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
-  const {
-    minHeight = 0,
-    maxHeight = Infinity
-  } = nativeInputStyle;
-  const [inputHeight, setInputHeight] = _react.default.useState(minHeight || 0);
-
-  /* get the new height between the limits and update 
-  the state with the new height */
-  const measureHeightWeb = _react.default.useCallback(() => {
-    const el = inputRef.current;
-    const scrollHeight = el.scrollHeight || 0;
-    let newHeight = Math.max(scrollHeight, minHeight);
-    newHeight = Math.min(newHeight, maxHeight);
-    setInputHeight(newHeight);
-  }, [inputRef, minHeight, maxHeight]);
-
-  /* restores the height and the value first to then 
-  calculate the height correctly */
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web' && inputRef.current) {
-      const el = inputRef.current;
-      el.style.height = 'auto';
-      el.value = currentValue;
-      measureHeightWeb();
-    }
-  }, [currentValue, measureHeightWeb, inputRef]);
   const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
@@ -415,10 +389,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       ref: inputRef,
       keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric ? 'numeric' : undefined,
-      style: {
-        ...nativeInputStyle,
-        height: Math.max(inputHeight, minHeight)
-      },
+      style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/Typography/Typography.js

@@ -69,7 +69,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     tag = typeof heading === 'string' ? heading : undefined,
     accessibilityRole = heading === true ? 'header' : undefined,
     block = false,
-    align = undefined,
+    align = _Platform.default.OS === 'web' ? 'inherit' : undefined,
     tokens,
     dataSet,
     strikeThrough = false,

package/lib/esm/Carousel/Carousel.js

@@ -34,12 +34,7 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0,
-    ...Platform.select({
-      web: {
-        outline: 'none'
-      }
-    })
+    left: 0
   },
   animationControlButton: {
     position: 'absolute',
@@ -745,7 +740,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         refocus: refocus,
         width: containerLayout.width,
         children: [/*#__PURE__*/_jsxs(View, {
-          style: [staticStyles.root],
+          style: [staticStyles.root, {
+            ...(Platform.OS === 'web' ? {
+              outline: 'none'
+            } : {})
+          }],
           onLayout: onContainerLayout,
           ref: ref,
           ...systemProps,

package/lib/esm/ExpandCollapse/Panel.js

@@ -3,6 +3,8 @@ import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import ExpandCollapseControl from './Control';
@@ -120,7 +122,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     expanded: isExpanded
   });
   const handleControlPress = event => {
-    onToggle(panelId, event);
+    onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
   };
   const onContainerLayout = event => {
@@ -142,7 +144,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
   const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/_jsx(View, {
-    style: selectContentPanelStyles(themeTokens),
+    style: [selectContentPanelStyles(themeTokens), staticStyles.panelContainer],
     accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       style: selectTextStyles(themeTokens),
@@ -151,7 +153,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }) : children
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
-    style: themeTokens,
+    style: [themeTokens, staticStyles.container],
     accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/_jsx(View, {
       style: selectControlPanelStyles(themeTokens),
@@ -171,7 +173,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }
-    }), /*#__PURE__*/_jsx(Animated.View, {
+    }), /*#__PURE__*/_jsx(Animated.ScrollView, {
       ref: animatedRef,
       style: animatedStyles,
       ...focusabilityProps,
@@ -180,12 +182,22 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         style: {
           ...Platform.select({
             default: {
-              flex: 1
+              flex: 1,
+              overflow: 'hidden'
             },
-            web: {}
+            web: {
+              overflow: 'hidden'
+            }
           })
         },
-        children: /*#__PURE__*/_jsx(View, {
+        children: Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
+          style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
+          children: children
+        }) : /*#__PURE__*/_jsx(ScrollView, {
+          onContentSizeChange: (_, height) => {
+            setContainerHeight(height);
+          },
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
           children: children
@@ -195,6 +207,16 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   });
 });
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
+  panelContainer: {
+    flexGrow: 1,
+    alignSelf: 'stretch'
+  }
+});
 ExpandCollapsePanel.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,

package/lib/esm/Icon/Icon.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
+import useWindowDimensions from "react-native-web/dist/exports/useWindowDimensions";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, scaleWithText, variantProp } from '../utils';
+import { getTokensPropType, variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -16,7 +17,10 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataSet
   } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
-  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
+  const {
+    fontScale
+  } = useWindowDimensions();
+  const size = scalesWithText ? themeTokens.size * fontScale : themeTokens.size;
   const iconContent = /*#__PURE__*/_jsx(IconComponent, {
     title: accessibilityLabel,
     size: size,

package/lib/esm/Link/LinkBase.js

@@ -96,7 +96,7 @@ const selectIconTokens = _ref5 => {
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
+  const translateY = iconTranslateY && iconTranslateY !== 0 ? iconTranslateY : blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,

package/lib/esm/List/ListItemMark.js

@@ -44,10 +44,12 @@ const selectBulletPositioningStyles = _ref3 => {
 const selectBulletContainerStyles = _ref4 => {
   let {
     itemBulletContainerWidth,
+    itemBulletContainerHeight,
     itemBulletContainerAlign
   } = _ref4;
   return {
     width: itemBulletContainerWidth,
+    height: itemBulletContainerHeight,
     alignItems: itemBulletContainerAlign
   };
 };
@@ -69,10 +71,11 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/_jsx(View, {
-      style: sideItemContainerStyles,
+      style: [sideItemContainerStyles, bulletContainerStyles],
       children: /*#__PURE__*/_jsx(IconComponent, {
         size: iconSize || iconTokens.size,
         color: iconColor || iconTokens.color
@@ -94,7 +97,8 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/_jsx(Icon, {
         icon: bulletIcon,
         tokens: {
-          color: bulletColor
+          color: bulletColor,
+          size: themeTokens.itemIconSize
         }
       })
     })

package/lib/esm/Modal/Modal.js

@@ -223,12 +223,10 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
-            children: Platform !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+            children: Platform.OS !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
               style: selectScrollViewStyles,
               children: children
-            }) : {
-              children
-            }
+            }) : children
           })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {