@telus-uds/components-base 1.83.0 → 1.85.0

package/lib-module/ProductCard/ProductCard.js

@@ -35,7 +35,7 @@ const selectProductCardTokens = _ref => {
     paddingVertical
   };
 };
-const ProductCard = _ref2 => {
+const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _getCopy;
   let {
     copy = 'en',
@@ -102,6 +102,7 @@ const ProductCard = _ref2 => {
   return /*#__PURE__*/_jsxs(View, {
     ...selectProps(rest),
     style: [selectProductCardTokens(themeTokens), staticStyles.container],
+    ref: ref,
     children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.imageContainer,
       children: /*#__PURE__*/_jsx(Image, {
@@ -173,7 +174,7 @@ const ProductCard = _ref2 => {
       })
     })]
   });
-};
+});
 ProductCard.displayName = 'ProductCard';
 
 // If a language dictionary entry is provided, it must contain every key

package/lib-module/ProductCardGroup/ProductCardGroup.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils';
@@ -6,13 +6,13 @@ import ProductCard from '../ProductCard';
 import { StackWrap } from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
-const ProductCardGroup = _ref => {
+const ProductCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     productCards,
     maxSelection = 1,
     ...rest
   } = _ref;
-  const [selectedCardIds, setSelectedCardIds] = useState([]);
+  const [selectedCardIds, setSelectedCardIds] = React.useState([]);
   const handleSelect = id => {
     const isAlreadySelected = selectedCardIds.includes(id);
     let updatedSelectedCardIds;
@@ -27,6 +27,7 @@ const ProductCardGroup = _ref => {
   };
   return /*#__PURE__*/_jsx(View, {
     ...selectProps(rest),
+    ref: ref,
     children: /*#__PURE__*/_jsx(StackWrap, {
       direction: {
         xs: 'column',
@@ -46,7 +47,7 @@ const ProductCardGroup = _ref => {
       })
     })
   });
-};
+});
 ProductCardGroup.displayName = 'ProductCardGroup';
 ProductCardGroup.propTypes = {
   ...selectedSystemPropTypes,

package/lib-module/Progress/Progress.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 { useThemeTokens } from '../ThemeProvider';
@@ -51,7 +51,7 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,

package/lib-module/Progress/ProgressBar.js

@@ -1,4 +1,4 @@
-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";
@@ -58,7 +58,7 @@ const selectBarStyles = (_ref, percentage) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children = null,
     percentage = 0,

package/lib-module/Progress/ProgressBarBackground.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
-const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;

package/lib-module/QuickLinks/QuickLinks.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
@@ -14,7 +14,7 @@ import QuickLinksCard from './QuickLinksCard';
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
+const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/QuickLinks/QuickLinksCard.js

@@ -11,7 +11,7 @@ import CardBase from '../Card/CardBase';
  * QuickLinksCard theme rather than the Card theme.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksList = _ref => {
+const QuickLinksList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -20,9 +20,11 @@ const QuickLinksList = _ref => {
   const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant);
   return /*#__PURE__*/_jsx(CardBase, {
     tokens: themeTokens,
+    ref: ref,
     children: children
   });
-};
+});
+QuickLinksList.displayName = 'QuickLinksList';
 QuickLinksList.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),
   variant: variantProp.propType,

package/lib-module/QuickLinks/QuickLinksItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, variantProp, withLinkRouter } from '../utils';
 import { useViewport } from '../ViewportProvider';
@@ -12,7 +12,7 @@ import ButtonBase from '../Button/ButtonBase';
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const QuickLinksItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/QuickLinksFeature/QuickLinksFeature.js

@@ -1,6 +1,7 @@
-import React, { forwardRef, Children, cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { StackWrap } from '../StackView';
+import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 
@@ -17,7 +18,7 @@ const isQuickListItem = element => {
  * QuickLinksFeature renders a list of interactive items.
  *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
  */
-const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
+const QuickLinksFeature = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -25,14 +26,17 @@ const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     ...rest
   } = _ref;
+  const viewport = useViewport();
   const {
     stackGap,
     stackJustify,
     stackSpace
-  } = useThemeTokens('QuickLinksFeature', tokens, variant);
-  const items = Children.map(children, child => {
+  } = useThemeTokens('QuickLinksFeature', tokens, variant, {
+    viewport
+  });
+  const items = React.Children.map(children, child => {
     if (isQuickListItem(child)) {
-      return /*#__PURE__*/cloneElement(child, child.props);
+      return /*#__PURE__*/React.cloneElement(child, child.props);
     }
     return null;
   });

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;
     }