@telus-uds/components-base 2.3.0 → 2.5.0

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -25,30 +25,14 @@ const {
   Col,
   Row
 } = FlexGrid;
-const selectSubTitleTokens = _ref => {
-  let {
-    subtitleColor
-  } = _ref;
-  return {
-    color: subtitleColor
-  };
-};
-const selectDividerTokens = _ref2 => {
-  let {
-    dividerColor
-  } = _ref2;
-  return {
-    color: dividerColor
-  };
-};
-const selectHeaderTokens = _ref3 => {
+const selectHeaderTokens = _ref => {
   let {
     contentMarginLeft,
     contentMarginRight,
     contentMarginTop,
     contentPaddingLeft,
     contentPaddingRight
-  } = _ref3;
+  } = _ref;
   return {
     marginLeft: contentMarginLeft,
     marginRight: contentMarginRight,
@@ -58,14 +42,14 @@ const selectHeaderTokens = _ref3 => {
     flexGrow: 1
   };
 };
-const selectControlsTokens = _ref4 => {
+const selectControlsTokens = _ref2 => {
   let {
     contentMarginBottom,
     contentMarginLeft,
     contentMarginRight,
     contentPaddingLeft,
     contentPaddingRight
-  } = _ref4;
+  } = _ref2;
   return {
     marginBottom: contentMarginBottom,
     marginLeft: contentMarginLeft,
@@ -80,7 +64,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
 });
 const TOTAL_COLUMNS = 12;
 const MAX_ITEMS_THRESHOLD = 12;
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -102,7 +86,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     rowLimit = 12,
     dictionary = defaultDictionary,
     ...rest
-  } = _ref5;
+  } = _ref3;
   const viewport = useViewport();
   const {
     currentValues,
@@ -117,23 +101,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
   const [maxWidth, setMaxWidth] = React.useState(false);
-  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
-  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
-  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const isSelected = currentValues.length > 0;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  React.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
-  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,
@@ -147,6 +114,20 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     subHeaderLineHeight,
     minHeight,
     minWidth,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelColor,
+    labelLineHeight,
+    labelPaddingTop,
+    labelPaddingBottom,
+    labelPaddingLeft,
+    labelPaddingRight,
+    buttonBorderColor,
+    buttonIconSize,
+    buttonIconPadding,
+    subtitleColor,
+    dividerColor,
     ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
@@ -155,6 +136,36 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }, {
     viewport
   });
+  const dropdownTokens = {
+    borderColor: buttonBorderColor,
+    iconSize: buttonIconSize,
+    iconPadding: buttonIconPadding,
+    lineHeight: labelLineHeight,
+    fontName: labelFontName,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    color: labelColor,
+    paddingTop: labelPaddingTop,
+    paddingBottom: labelPaddingBottom,
+    paddingLeft: labelPaddingLeft,
+    paddingRight: labelPaddingRight
+  };
+  const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
+  const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
+  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
+  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
+  const isSelected = currentValues.length > 0;
+  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
+  React.useEffect(() => {
+    if (colSize === 1) return setMaxWidth(false);
+    return colSize === 2 && setMaxWidth(true);
+  }, [colSize]);
+  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -166,7 +177,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     currentValues
   }]);
   const handleChange = event => {
-    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
+    if (pressHandlers.onPress) pressHandlers?.onPress(event);
     if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
@@ -213,7 +224,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const subeHeaderStyles = applyTextStyles({
     fontSize: subHeaderFontSize,
     fontWeight: subHeaderFontWeight,
-    fontColor: selectSubTitleTokens(themeTokens)
+    fontColor: subtitleColor
   });
   const {
     overlaidPosition,
@@ -299,7 +310,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   });
   const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
-      tokens: selectDividerTokens(themeTokens),
+      tokens: {
+        color: dividerColor
+      },
       space: 4
     }) : /*#__PURE__*/_jsx(Spacer, {
       space: 4

package/lib/Notification/Notification.js

@@ -66,11 +66,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
 const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
   maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
   minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  paddingRight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingRight,
-  paddingLeft: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingLeft
+  paddingRight: themeTokens?.containerPaddingRight,
+  paddingLeft: themeTokens?.containerPaddingLeft
 });
 const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
-  var _themeOptions$content, _themeOptions$content2, _themeOptions$content3, _themeOptions$content4, _themeOptions$content5;
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -98,19 +97,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
         xs: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
         },
         md: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
         },
         lg: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
         },
         sm: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
         },
         xl: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
         }
       })
     }
@@ -290,6 +289,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     dictionary,
     copy
   });
+
+  // TODO: Remove this once the system style variant is deprecated
+  const isSystemEnabled = system || variant?.style?.includes('system');
   const {
     themeOptions
   } = useTheme();
@@ -298,10 +300,10 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = themeOptions;
   const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
   const themeTokens = useTokens('Notification', tokens, variant, {
-    system,
+    system: isSystemEnabled,
     viewport
   });
-  const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
   const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -323,9 +325,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, system);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
   }
   if (isDismissed) {
     return null;
@@ -343,7 +345,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
   const onDismissPress = () => {
     setIsDismissed(true);
-    onDismiss === null || onDismiss === void 0 || onDismiss();
+    onDismiss?.();
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/OrderedList/OrderedList.js

@@ -16,9 +16,8 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = React.useMemo(() => {
     const addVariantAndTokensToProps = (child, i, isLastChild) => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         index: start + i,
         isLastChild,

package/lib/Pagination/usePagination.js

@@ -16,14 +16,13 @@ function usePagination(_ref) {
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
   const getItemProps = index => {
-    var _items$index;
     const {
       onPress,
       href,
       hrefAttrs,
       variant,
       tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
+    } = items[index]?.props ?? {};
     return {
       onPress,
       href,

package/lib/PriceLockup/utils/renderFootnoteContent.js

@@ -42,13 +42,13 @@ const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomTex
           bottomTextMarginTop
         }),
         children: [renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
-      }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+      }), footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
         style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+    }), footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib/PriceLockup/utils/renderFootnoteLinks.js

@@ -11,7 +11,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
   } = _ref;
   // This is used to apply the proper line height when there is 4 or more footnote links
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
-  const lineHeight = (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  const lineHeight = footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -20,7 +20,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
     fontSize: footnoteLinkFontSize
   };
 };
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
   tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
   content: footnoteLinks,
   onClick: onClickFootnote

package/lib/PriceLockup/utils/renderPrice.js

@@ -66,13 +66,13 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
       }), rateText ? /*#__PURE__*/_jsx(Text, {
         style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
         children: renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)
-      }) : null, !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
+      }) : null, !bottomText && footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
         style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+    }), !bottomText && footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib/ProductCard/ProductCard.js

@@ -35,7 +35,6 @@ const selectProductCardTokens = _ref => {
   };
 };
 const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _getCopy;
   let {
     copy = 'en',
     dictionary = defaultDictionary,
@@ -102,7 +101,7 @@ const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectProps(rest),
     style: [selectProductCardTokens(themeTokens), staticStyles.container],
     ref: ref,
-    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
+    children: [image?.src ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.imageContainer,
       children: /*#__PURE__*/_jsx(Image, {
         source: image.src,
@@ -146,7 +145,7 @@ const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
               ...getCopy('primaryPrice'),
               size: "small",
               ratePosition: "bottom"
-            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/_jsx(PriceLockup, {
+            }), getCopy('secondaryPrice')?.price ? /*#__PURE__*/_jsx(PriceLockup, {
               ...getCopy('secondaryPrice'),
               size: "small",
               ratePosition: "bottom"

package/lib/Progress/ProgressBarBackground.js

@@ -12,9 +12,9 @@ const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   let source = null;
   // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
-  if (variant !== null && variant !== void 0 && variant.inactive || (variant === null || variant === void 0 ? void 0 : variant.style) === INACTIVE_VARIANT) {
+  if (variant?.inactive || variant?.style === INACTIVE_VARIANT) {
     source = inactiveBackground;
-  } else if (variant !== null && variant !== void 0 && variant.negative || (variant === null || variant === void 0 ? void 0 : variant.style) === NEGATIVE_VARIANT) {
+  } else if (variant?.negative || variant?.style === NEGATIVE_VARIANT) {
     source = negativeBackground;
   } else {
     return null;

package/lib/QuickLinksFeature/QuickLinksFeature.js

@@ -9,8 +9,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const isQuickListItem = element => {
-  var _element$type, _element$type2;
-  const elementName = (element === null || element === void 0 || (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 || (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  const elementName = element?.type?.displayName || element?.type?.name;
   return Boolean(elementName.match(/QuickLinksFeatureItem/));
 };
 

package/lib/Radio/Radio.js

@@ -145,7 +145,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   };
   const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a radio is the Space key
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
+    if (event?.key === ' ') handleChange(event);
   };
   const uniqueId = useUniqueId('radio');
   const inputId = id ?? uniqueId;

package/lib/Search/Search.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
@@ -7,6 +8,7 @@ import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
+import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
@@ -33,7 +35,7 @@ const selectInputTokens = _ref => {
     paddingRight: paddingWithButtons
   };
 };
-const selectButtonTokens = tokens => selectTokens('Button', tokens);
+const selectButtonTokens = tokens => selectTokens('SearchButton', tokens);
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -44,6 +46,26 @@ const selectIconTokens = _ref2 => {
     size: iconSize
   };
 };
+const selectBorderTokens = _ref3 => {
+  let {
+    borderWidth,
+    mobileBorderWidth,
+    ...tokens
+  } = _ref3;
+  return {
+    borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
+    ...tokens
+  };
+};
+const modifyButtonTokens = tokens => {
+  const modifiedTokens = {
+    ...tokens
+  };
+  if (Platform.OS !== 'web') {
+    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor;
+  }
+  return modifiedTokens;
+};
 
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
@@ -58,7 +80,7 @@ const selectIconTokens = _ref2 => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     initialValue,
     value,
@@ -73,9 +95,10 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     variant,
     nativeSubmitBtnID,
+    searchIconPosition = 'right',
     dataSet,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const {
     currentValue = '',
     setValue
@@ -112,10 +135,9 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   };
   const handleClear = event => {
-    var _ref$current;
     setValue('', event);
-    onClear === null || onClear === void 0 || onClear('', event);
-    ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+    onClear?.('', event);
+    ref?.current?.focus();
   };
   const handleFocus = event => {
     if (onFocus !== undefined) onFocus(event);
@@ -139,8 +161,8 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       testID: testID,
       ...selectInputProps(rest),
       ref: ref,
-      tokens: appearances => selectInputTokens({
-        searchTokens: getThemeTokens(appearances),
+      tokens: pressableStates => selectInputTokens({
+        searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
         buttonTokens,
         buttonsGapSize,
         isEmpty
@@ -155,16 +177,17 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
       accessibilityLabel: a11yLabelText,
+      direction: searchIconPosition,
       buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
         onPress: handleClear,
-        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        tokens: pressableStates => modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates))),
         children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
           ...selectIconTokens(getButtonTokens(buttonState))
         })
-      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
+      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
@@ -180,7 +203,14 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             priority: 'high'
           }))
         })
-      }, "submit")]
+      }, "submit-right") : /*#__PURE__*/_jsx(Icon, {
+        icon: SubmitButtonIcon,
+        testID: "iconLeft",
+        tokens: {
+          color: themeTokens.iconLeftColor,
+          size: themeTokens.iconLeftSize
+        }
+      }, "submitIcon"))]
     })
   });
 });

package/lib/Select/Picker.js

@@ -39,8 +39,8 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       style: style,
       onMouseOver: onMouseOver,
       onMouseOut: () => {
-        onMouseOut === null || onMouseOut === void 0 || onMouseOut();
-        onClose === null || onClose === void 0 || onClose();
+        onMouseOut?.();
+        onClose?.();
       },
       onFocus: onFocus,
       onBlur: onBlur,

package/lib/Select/Picker.native.js

@@ -5,7 +5,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
 import { a11yProps, componentPropType } from '../utils';
 import Group from './Group';
-import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
+import { ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING, ALLOW_FONT_SCALING, ADJUSTS_FONT_SIZE_TO_FIT, MAX_FONT_SIZE_MULTIPLIER } from './constants';
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,8 +34,7 @@ const selectAndroidContainerStyles = _ref2 => {
     paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingBottom: ANDROID_DEFAULT_PADDING,
-    paddingTop: ANDROID_DEFAULT_PADDING,
-    height: rest.height + ANDROID_HEIGHT_OFFSET
+    paddingTop: ANDROID_DEFAULT_PADDING
   };
 };
 const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
@@ -94,7 +93,12 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       inputIOS: style,
       inputAndroid: selectAndroidInputStyles(style)
     },
-    placeholder: placeholder !== undefined ? placeholder : {}
+    placeholder: placeholder !== undefined ? placeholder : {},
+    textInputProps: {
+      allowFontScaling: ALLOW_FONT_SCALING,
+      adjustFontSizeToFit: ADJUSTS_FONT_SIZE_TO_FIT,
+      maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER
+    }
   });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {

package/lib/Select/constants.js

@@ -1,5 +1,7 @@
 // Because Android
 export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
-export const ANDROID_HEIGHT_OFFSET = 12;
 export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
-export const ANDROID_DEFAULT_PADDING = 0;
+export const ANDROID_DEFAULT_PADDING = 0;
+export const ALLOW_FONT_SCALING = true;
+export const ADJUSTS_FONT_SIZE_TO_FIT = true;
+export const MAX_FONT_SIZE_MULTIPLIER = 3;

package/lib/StackView/StackWrap.js

@@ -6,10 +6,7 @@ import StackWrapGap from './StackWrapGap';
 
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
 import { jsx as _jsx } from "react/jsx-runtime";
-const cssSupports = (property, value) => {
-  var _window$CSS;
-  return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
-};
+const cssSupports = (property, value) => Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.CSS?.supports === 'function' && window.CSS.supports(property, value);
 
 // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.

package/lib/StackView/getStackedContent.js

@@ -109,12 +109,11 @@ const getStackedContent = (children, _ref) => {
  * @returns {ReactChildren}
  */
 const unpackFragment = child => {
-  var _child$props;
   // If this level is a set of top-level siblings rather than one child, check each in turn
   if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment);
 
   // When a fragment is found, unpack its children to the top level and check them
-  if ((child === null || child === void 0 ? void 0 : child.type) === React.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
+  if (child?.type === React.Fragment) return unpackFragment(child.props?.children);
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;

package/lib/StepTracker/StepTracker.js

@@ -112,8 +112,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : getCopy('stepTrackerLabel');
   const getStepLabel = index => {
     if (themeTokens.showStepLabel) {
-      var _getCopy;
-      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
+      return getCopy(index + 1)?.stepLabel.replace('%{stepNumber}', index + 1);
     }
     return '';
   };

package/lib/TabBar/TabBar.js

@@ -68,7 +68,7 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const themeTokens = useThemeTokens('TabBar', tokens, variant);
   const handlePress = itemId => {
     setIsSelected(itemId);
-    onChange === null || onChange === void 0 || onChange(itemId);
+    onChange?.(itemId);
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/Tabs/Tabs.js

@@ -25,7 +25,7 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
   }
 };
 const getStackViewTokens = variant => {
-  const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
+  const equalWidth = variant?.equalWidth;
   return Platform.select({
     web: {
       justifyContent: equalWidth ? 'space-evenly' : 'flex-start',