@telus-uds/components-base 2.5.0 → 3.1.0

package/lib/{Carousel → esm/Carousel}/Carousel.js

@@ -20,7 +20,7 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
-import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL } from './Constants';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, HERO_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -61,13 +61,19 @@ const selectControlButtonPositionStyles = _ref => {
     positionProperty = getDynamicPositionProperty(),
     spaceBetweenSlideAndButton,
     enablePeeking,
-    enableDisplayMultipleItemsPerSlide
+    enableDisplayMultipleItemsPerSlide,
+    enableHero,
+    viewport
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
     styles[positionProperty] = -1 * (buttonWidth / 2);
   } else if (positionVariant === 'inside') {
-    styles[positionProperty] = 0;
+    if (enableHero && viewport === 'xl') {
+      styles[positionProperty] = HERO_POSITION_OFFSET;
+    } else {
+      styles[positionProperty] = DEFAULT_POSITION_OFFSET;
+    }
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0;
@@ -77,7 +83,7 @@ const selectControlButtonPositionStyles = _ref => {
   }
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -97,7 +103,9 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide
+      enableDisplayMultipleItemsPerSlide,
+      enableHero,
+      viewport
     })
   };
 };
@@ -138,6 +146,35 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   }
   return childrenArray.length;
 };
+const selectRootContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      alignItems: 'center'
+    };
+  }
+  return {};
+};
+const selectMainContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      width: '100%',
+      maxWidth: 1200
+    };
+  }
+  return {};
+};
+const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
+  let marginTop = 0;
+  let marginHorizontal = 0;
+  if (enableHero && tabs) {
+    marginTop = -tabsPanelHeight;
+    marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN;
+  }
+  return {
+    marginTop,
+    marginHorizontal
+  };
+};
 
 /**
  * Calculates the final width of the carousel container for displacement purposes based on various conditions.
@@ -279,6 +316,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     springConfig = undefined,
     thumbnails = undefined,
     enableDisplayMultipleItemsPerSlide = false,
+    enableHero = false,
     panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
     }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
@@ -330,7 +368,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [containerLayout, setContainerLayout] = React.useState({
     x: 0,
     y: 0,
-    width: 0
+    width: 0,
+    height: 0
   });
   const containerLayoutRef = React.useRef(containerLayout);
   const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
@@ -483,6 +522,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
+  const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0);
   React.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
@@ -534,13 +574,17 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
+  const onTabsPanelLayout = event => {
+    setTabsPanelHeight(event.nativeEvent.layout.height);
+  };
   const onContainerLayout = _ref6 => {
     let {
       nativeEvent: {
         layout: {
           x,
           y,
-          width
+          width,
+          height
         }
       }
     } = _ref6;
@@ -548,7 +592,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       ...prevState,
       x,
       y,
-      width
+      width,
+      height
     }));
   };
   const onPreviousNextNavigationButtonLayout = _ref7 => {
@@ -680,107 +725,120 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
-  return /*#__PURE__*/_jsxs(CarouselProvider, {
-    activeIndex: activeIndex,
-    goTo: goTo,
-    getCopyWithPlaceholders: getCopyWithPlaceholders,
-    itemLabel: itemLabel,
-    totalItems: totalItems,
-    themeTokens: themeTokens,
-    firstFocusRef: firstFocusRef,
-    refocus: refocus,
-    width: containerLayout.width,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.root, {
-        ...Platform.select({
-          web: {
-            outline: 'none'
-          }
-        })
-      }],
-      onLayout: onContainerLayout,
-      ref: ref,
-      ...systemProps,
-      ...containerProps,
-      children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
-          positionVariant: previousNextNavigationPosition,
-          buttonWidth: previousNextNavigationButtonWidth,
-          positionProperty: getDynamicPositionProperty(),
-          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-          enablePeeking,
-          enableDisplayMultipleItemsPerSlide
-        })],
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: isCarouselPlaying ? pauseIcon : playIcon,
-          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
-          variant: previousNextIconButtonVariants,
-          onPress: onAnimationControlButtonPress
-        })
-      }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide),
-        testID: "previous-button-container",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onLayout: onPreviousNextNavigationButtonLayout,
-          icon: previousIcon,
-          onPress: goToPrev,
-          variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
-          tokens: selectIconStyles(themeTokens)
-        })
-      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
-        ref: firstFocusRef,
-        href: skipLinkHref,
-        children: getCopyWithPlaceholders('skipLink')
-      }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText
-      // Read the current slide position to screen readers on slide.
-      // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
-      , {
-        accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
-        text: getCopyWithPlaceholders('stepTrackerLabel')
-      }), /*#__PURE__*/_jsx(View, {
-        style: selectContainerStyles(containerLayout.width),
-        children: /*#__PURE__*/_jsx(Animated.View, {
-          style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
-            transform: [{
-              translateX: pan.x
-            }, {
-              translateY: pan.y
-            }]
-          }]),
-          ...panResponder.panHandlers,
-          ...getA11yPropsFromHtmlTag(tag),
-          // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
-          // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
-          accessibilityLiveRegion: accessibilityLiveRegion,
-          children: childrenArray.map((element, index) => {
-            const hidden = !isAnimating && index !== activeIndex;
-            const clonedElement = /*#__PURE__*/React.cloneElement(element, {
-              elementIndex: index,
-              hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+  return /*#__PURE__*/_jsx(View, {
+    style: selectRootContainerStyles(enableHero, viewport),
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectMainContainerStyles(enableHero, viewport),
+      children: /*#__PURE__*/_jsxs(CarouselProvider, {
+        activeIndex: activeIndex,
+        goTo: goTo,
+        getCopyWithPlaceholders: getCopyWithPlaceholders,
+        itemLabel: itemLabel,
+        totalItems: totalItems,
+        themeTokens: themeTokens,
+        firstFocusRef: firstFocusRef,
+        refocus: refocus,
+        width: containerLayout.width,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [staticStyles.root, {
+            ...(Platform.OS === 'web' ? {
+              outline: 'none'
+            } : {})
+          }],
+          onLayout: onContainerLayout,
+          ref: ref,
+          ...systemProps,
+          ...containerProps,
+          children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
+            style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
+              positionVariant: previousNextNavigationPosition,
+              buttonWidth: previousNextNavigationButtonWidth,
+              positionProperty: getDynamicPositionProperty(),
+              spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
               enablePeeking,
-              peekingProps: getPeekingProps(viewport),
               enableDisplayMultipleItemsPerSlide,
+              enableHero,
               viewport
-            });
-            return /*#__PURE__*/_jsx(React.Fragment, {
-              children: clonedElement
-            }, index.toFixed(2));
-          })
-        })
-      }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide),
-        testID: "next-button-container",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onLayout: onPreviousNextNavigationButtonLayout,
-          icon: nextIcon,
-          onPress: goToNext,
-          variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
-          tokens: selectIconStyles(themeTokens)
-        })
-      }) : null]
-    }), showPanelNavigation ? activePanelNavigation : null]
+            })],
+            children: /*#__PURE__*/_jsx(IconButton, {
+              icon: isCarouselPlaying ? pauseIcon : playIcon,
+              accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
+              variant: previousNextIconButtonVariants,
+              onPress: onAnimationControlButtonPress
+            })
+          }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            testID: "previous-button-container",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onLayout: onPreviousNextNavigationButtonLayout,
+              icon: previousIcon,
+              onPress: goToPrev,
+              variant: previousNextIconButtonVariants,
+              accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+              tokens: selectIconStyles(themeTokens)
+            })
+          }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
+            ref: firstFocusRef,
+            href: skipLinkHref,
+            children: getCopyWithPlaceholders('skipLink')
+          }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText
+          // Read the current slide position to screen readers on slide.
+          // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+          , {
+            accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
+            text: getCopyWithPlaceholders('stepTrackerLabel')
+          }), /*#__PURE__*/_jsx(View, {
+            style: selectContainerStyles(containerLayout.width),
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
+                transform: [{
+                  translateX: pan.x
+                }, {
+                  translateY: pan.y
+                }]
+              }]),
+              ...panResponder.panHandlers,
+              ...getA11yPropsFromHtmlTag(tag),
+              // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
+              // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
+              accessibilityLiveRegion: accessibilityLiveRegion,
+              children: childrenArray.map((element, index) => {
+                const hidden = !isAnimating && index !== activeIndex;
+                const clonedElement = /*#__PURE__*/React.cloneElement(element, {
+                  elementIndex: index,
+                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  enablePeeking,
+                  peekingProps: getPeekingProps(viewport),
+                  enableDisplayMultipleItemsPerSlide,
+                  viewport,
+                  backgroundColor: element.props.backgroundColor,
+                  enableHero,
+                  tabsPanelHeight
+                });
+                return /*#__PURE__*/_jsx(React.Fragment, {
+                  children: clonedElement
+                }, index.toFixed(2));
+              })
+            })
+          }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            testID: "next-button-container",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onLayout: onPreviousNextNavigationButtonLayout,
+              icon: nextIcon,
+              onPress: goToNext,
+              variant: previousNextIconButtonVariants,
+              accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+              tokens: selectIconStyles(themeTokens)
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport),
+          onLayout: tabs && onTabsPanelLayout,
+          children: showPanelNavigation ? activePanelNavigation : null
+        })]
+      })
+    })
   });
 });
 Carousel.propTypes = {

package/lib/{Carousel → esm/Carousel}/CarouselItem/CarouselItem.js

@@ -5,7 +5,8 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
 import { useCarousel } from '../CarouselContext';
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants';
-import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '../../Box';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyle = _ref => {
   let {
@@ -84,12 +85,14 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     peekingProps,
     enableDisplayMultipleItemsPerSlide,
     viewport,
+    backgroundColor,
+    enableHero,
+    tabsPanelHeight,
     ...rest
   } = _ref2;
   const {
     width,
-    activeIndex,
-    height
+    activeIndex
   } = useCarousel();
   const selectedProps = selectProps({
     ...rest,
@@ -101,7 +104,6 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       width,
       elementIndex,
       hidden,
-      height,
       enablePeeking,
       enableDisplayMultipleItemsPerSlide,
       viewport,
@@ -110,7 +112,18 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
-    children: children
+    children: /*#__PURE__*/_jsxs(Box, {
+      variant: {
+        background: backgroundColor
+      },
+      space: 0,
+      flex: 1,
+      children: [children, enableHero && /*#__PURE__*/_jsx(View, {
+        style: {
+          height: tabsPanelHeight
+        }
+      })]
+    })
   });
 });
 CarouselItem.propTypes = {
@@ -155,7 +168,11 @@ CarouselItem.propTypes = {
     peekingLastSpace: PropTypes.number,
     peekingMiddleSpace: PropTypes.number,
     peekingGap: PropTypes.number
-  })
+  }),
+  /**
+   * Background color of the slide. It supports Box background variant colors.
+   */
+  backgroundColor: PropTypes.string
 };
 CarouselItem.displayName = 'Carousel.Item';
 export default CarouselItem;

package/lib/esm/Carousel/Constants.js

@@ -0,0 +1,7 @@
+export const ITEMS_PER_VIEWPORT_MD = 2;
+export const ITEMS_PER_VIEWPORT_LG_XL = 3;
+export const GAP_BETWEEN_ITEMS = 16;
+export const HERO_POSITION_OFFSET = 20;
+export const DEFAULT_POSITION_OFFSET = 0;
+export const LARGE_VIEWPORT_MARGIN = 40;
+export const DEFAULT_VIEWPORT_MARGIN = 10;

package/lib/{ExpandCollapse → 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/{Icon → 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/{Link → 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/{Modal → 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, {

package/lib/{MultiSelectFilter → esm/MultiSelectFilter}/MultiSelectFilter.js

@@ -105,6 +105,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     headerFontColor,
     headerFontSize,
     buttonDirection,
+    buttonIconBackgroundColor,
     headerFontWeight,
     headerLineHeight,
     subHeaderFontWeight,
@@ -148,7 +149,8 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingTop: labelPaddingTop,
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
-    paddingRight: labelPaddingRight
+    paddingRight: labelPaddingRight,
+    iconBackground: buttonIconBackgroundColor
   };
   const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/{Notification → esm/Notification}/Notification.js

@@ -181,7 +181,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',

package/lib/{Tabs → esm/Tabs}/TabsItem.js

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