@telus-uds/components-base 1.84.0 → 1.85.0

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Image from "react-native-web/dist/exports/Image";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -56,7 +56,7 @@ const selectLinkToken = _ref2 => {
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const QuickLinksFeatureItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -101,25 +101,25 @@ const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
           ...themeTokens,
           contentMaxDimension
         }),
-        children: /*#__PURE__*/_jsxs(StackWrap, {
+        children: /*#__PURE__*/_jsx(StackWrap, {
           direction: contentDirection,
           space: contentSpace,
           gap: gap,
           tokens: {
             alignItems: contentAlignItems
           },
-          children: [/*#__PURE__*/_jsx(View, {
+          children: /*#__PURE__*/_jsxs(View, {
             style: selectImageContainerStyle(contentMaxDimension),
-            children: /*#__PURE__*/_jsx(Image, {
+            children: [/*#__PURE__*/_jsx(Image, {
               accessibilityIgnoresInvertColors: true,
               imageAccessibilityLabel: imageAccessibilityLabel,
               source: imageSource,
               style: selectImageStyle(imageDimension)
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: textStyle,
-            children: children
-          })]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: textStyle,
+              children: children
+            })]
+          })
         })
       });
     }

package/lib-module/Radio/Radio.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -108,7 +108,7 @@ const selectLabelStyles = _ref3 => {
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     checked,
     defaultChecked,

package/lib-module/Radio/RadioButton.js

@@ -1,10 +1,10 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import RadioInput from './RadioInput';
-import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../ThemeProvider';
+import { applyOuterBorder, applyShadowToken, resolveThemeTokens, validateThemeTokens, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,7 +27,38 @@ const selectCheckedStyles = _ref => {
     width: checkedSize
   };
 };
-const selectInputStyles = _ref2 => {
+const selectIconTokens = _ref2 => {
+  let {
+    icon,
+    iconColor,
+    checkedSize
+  } = _ref2;
+  return {
+    icon,
+    color: iconColor,
+    size: checkedSize
+  };
+};
+const selectInputIconStyles = (_ref3, isChecked) => {
+  let {
+    iconBackgroundColor,
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputSize,
+    containerShadow
+  } = _ref3;
+  return {
+    borderColor: inputBorderColor,
+    borderRadius: getBorderRadius(inputSize),
+    borderWidth: inputBorderWidth,
+    backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+    height: inputSize,
+    width: inputSize,
+    ...applyShadowToken(containerShadow)
+  };
+};
+const selectInputStyles = _ref4 => {
   let {
     inputBackgroundColor,
     inputBorderColor,
@@ -35,7 +66,7 @@ const selectInputStyles = _ref2 => {
     inputOutlineColor,
     inputOutlineWidth,
     inputSize
-  } = _ref2;
+  } = _ref4;
   return {
     borderColor: inputBorderColor,
     borderRadius: getBorderRadius(inputSize),
@@ -52,13 +83,13 @@ const selectInputStyles = _ref2 => {
     })
   };
 };
-const selectOuterBorderStyles = _ref3 => {
+const selectOuterBorderStyles = _ref5 => {
   let {
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     inputSize
-  } = _ref3;
+  } = _ref5;
   return {
     ...applyOuterBorder({
       outerBorderColor,
@@ -73,7 +104,7 @@ const selectOuterBorderStyles = _ref3 => {
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
-const RadioButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const RadioButton = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     isChecked,
     tokens,
@@ -84,16 +115,36 @@ const RadioButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
     handleChange,
     name: inputName,
     value,
+    testID = 'Radio-Checked',
     ...rest
-  } = _ref4;
-  const themeTokens = validateThemeTokens(resolveThemeTokens(tokens, {
+  } = _ref6;
+  const radioTokens = useThemeTokens('Radio', tokens, {
+    checked: isChecked
+  });
+  const {
+    icon: IconComponent,
+    ...iconTokens
+  } = selectIconTokens(radioTokens);
+  const themeTokens = validateThemeTokens(resolveThemeTokens(IconComponent ? radioTokens : tokens, {
     checked: isChecked
   }), getTokensSetPropType(tokenKeys), 'RadioButton');
+  const getCheckedInput = checked => {
+    if (!checked) return null;
+    if (!IconComponent) {
+      return /*#__PURE__*/_jsx(View, {
+        style: selectCheckedStyles(themeTokens),
+        testID: testID
+      });
+    }
+    return /*#__PURE__*/_jsx(IconComponent, {
+      ...iconTokens
+    });
+  };
   return /*#__PURE__*/_jsx(View, {
     style: selectOuterBorderStyles(themeTokens),
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)],
+      style: [staticStyles.defaultInputStyles, IconComponent ? selectInputIconStyles(themeTokens, isChecked) : selectInputStyles(themeTokens)],
       testID: "Radio-Input",
       children: [/*#__PURE__*/_jsx(RadioInput, {
         ref: ref,
@@ -105,10 +156,7 @@ const RadioButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
         onChange: handleChange,
         name: inputName,
         value: value
-      }), isChecked && /*#__PURE__*/_jsx(View, {
-        style: selectCheckedStyles(themeTokens),
-        testID: "Radio-Checked"
-      })]
+      }), getCheckedInput(isChecked)]
     })
   });
 });

package/lib-module/Radio/RadioGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useViewport } from '../ViewportProvider';
@@ -59,7 +59,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * />
  * ```
  */
-const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,

package/lib-module/Radio/RadioInput.js

@@ -1,19 +1,19 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * On Web we need to include an actual input but hide it.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const RadioInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+const RadioInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     checked,
     defaultChecked,
-    disabled,
-    id,
-    isControlled,
+    disabled = false,
+    id = null,
+    isControlled = false,
     name,
-    onChange,
+    onChange = () => {},
     value
   } = _ref;
   const handleClick = event => {
@@ -47,14 +47,4 @@ RadioInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
 };
-RadioInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  id: null,
-  isControlled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
 export default RadioInput;

package/lib-module/RadioCard/RadioCard.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
@@ -47,7 +47,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+const RadioCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/RadioCard/RadioCardGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
@@ -60,7 +60,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * />
  * ```
  */
-const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const RadioCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,

package/lib-module/Responsive/Responsive.js

@@ -17,7 +17,7 @@ import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleS
  * is used to hide and show children of `Responsive` within a View.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Responsive = _ref => {
+const Responsive = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     min = 'xs',
     max,
@@ -34,6 +34,7 @@ const Responsive = _ref => {
       inheritedStyles: inheritedStyles,
       min: min,
       max: max,
+      ref: ref,
       children: children
     });
   }
@@ -42,7 +43,7 @@ const Responsive = _ref => {
     max: max,
     children: children
   });
-};
+});
 Responsive.displayName = 'Responsive';
 Responsive.propTypes = {
   /**

package/lib-module/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -24,7 +24,7 @@ function generateResponsiveStyles(min, max) {
   });
   return createMediaQueryStyles(styles, false);
 }
-const ResponsiveWithMediaQueryStyleSheet = _ref => {
+const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     min,
     max,
@@ -48,9 +48,10 @@ const ResponsiveWithMediaQueryStyleSheet = _ref => {
     dataSet: ids.responsive && {
       media: ids.responsive
     },
+    ref: ref,
     children: children
   });
-};
+});
 ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive';
 ResponsiveWithMediaQueryStyleSheet.propTypes = {
   /**

package/lib-module/Search/Search.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
@@ -58,7 +58,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__*/forwardRef((_ref3, ref) => {
+const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,

package/lib-module/Select/Group.js

@@ -2,16 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Group = _ref => {
+const Group = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     label
   } = _ref;
   return /*#__PURE__*/_jsx("optgroup", {
     label: label,
+    ref: ref,
     children: children
   });
-};
+});
+Group.displayName = 'Group';
 export default Group;
 Group.propTypes = {
   children: componentPropType('Item'),

package/lib-module/Select/Item.js

@@ -1,16 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Item = _ref => {
+const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     value
   } = _ref;
   return /*#__PURE__*/_jsx("option", {
     value: value,
+    ref: ref,
     children: children
   });
-};
+});
+Item.displayName = 'Item';
 export default Item;
 Item.propTypes = {
   children: PropTypes.string.isRequired,

package/lib-module/Select/Picker.js

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Picker = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     onChange,

package/lib-module/Select/Picker.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -39,7 +39,7 @@ const selectAndroidContainerStyles = _ref2 => {
     height: rest.height + ANDROID_HEIGHT_OFFSET
   };
 };
-const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     value,
     onChange,
@@ -52,7 +52,7 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   // Ungroup items, since there's no way to support groups on native
-  const flatChildren = Children.toArray(children).flatMap(child => {
+  const flatChildren = React.Children.toArray(children).flatMap(child => {
     if (child.type === Group) {
       return child.props.children;
     }

package/lib-module/Select/Select.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -181,7 +181,7 @@ const selectCustomFeedbackStyles = _ref7 => {
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -205,10 +205,10 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
     onChange,
     readOnly
   });
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);
   const {

package/lib-module/SideNav/Item.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React 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';
@@ -39,7 +39,7 @@ function selectItemStyles(_ref) {
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     itemId,

package/lib-module/SideNav/ItemContent.js

@@ -21,7 +21,7 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = _ref => {
+const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
@@ -30,12 +30,14 @@ const ItemContent = _ref => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
       tokens: typographyTokens,
+      ref: ref,
       children: children
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]
     })]
   });
-};
+});
+ItemContent.displayName = 'ItemContent';
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   children: PropTypes.node

package/lib-module/SideNav/ItemsGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ItemContent from './ItemContent';
 import ExpandCollapse from '../ExpandCollapse';
@@ -16,7 +16,7 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     label,

package/lib-module/SideNav/SideNav.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
 import Item from './Item';
@@ -21,7 +21,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
+const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     variant = {},
@@ -32,7 +32,7 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const themeTokens = useThemeTokens('SideNav', tokens, variant);
-  const [active, setActive] = useState({
+  const [active, setActive] = React.useState({
     groupId: undefined,
     itemId: undefined
   });

package/lib-module/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -51,7 +51,7 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,

package/lib-module/SkipLink/SkipLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -105,7 +105,7 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const SkipLink = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,

package/lib-module/Spacer/Spacer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
@@ -56,7 +56,7 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Spacer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',

package/lib-module/StackView/StackView.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Divider from '../Divider';
@@ -52,7 +52,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
+const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 0,
     divider,

package/lib-module/StackView/StackWrap.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
 import StackWrapBox from './StackWrapBox';
@@ -22,8 +22,8 @@ const exampleGapValue = '1px';
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
-  const [canUseCSSGap, setCanUseCSSGap] = useState(false);
+const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
   const {
     space
   } = props;

package/lib-module/StackView/StackWrapBox.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
@@ -33,7 +33,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     gap = space,

package/lib-module/StackView/StackWrapGap.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StackWrapBox from './StackWrapBox';
 import { a11yProps, getA11yPropsFromHtmlTag, selectSystemProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
@@ -19,7 +19,7 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps]);
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = /*#__PURE__*/forwardRef((_ref, ref) => {
+const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     tokens,