@telus-uds/components-base 1.84.0 → 1.85.0

package/lib/QuickLinksFeature/QuickLinksFeature.js

@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StackView = require("../StackView");
+var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // pass through and type relevant system props - add more sets for interactive components
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const isQuickListItem = element => {
@@ -25,7 +24,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__*/(0, _react.forwardRef)((_ref, ref) => {
+const QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -33,14 +32,17 @@ const QuickLinksFeature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children,
     ...rest
   } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
   const {
     stackGap,
     stackJustify,
     stackSpace
-  } = (0, _ThemeProvider.useThemeTokens)('QuickLinksFeature', tokens, variant);
-  const items = _react.Children.map(children, child => {
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinksFeature', tokens, variant, {
+    viewport
+  });
+  const items = _react.default.Children.map(children, child => {
     if (isQuickListItem(child)) {
-      return /*#__PURE__*/(0, _react.cloneElement)(child, child.props);
+      return /*#__PURE__*/_react.default.cloneElement(child, child.props);
     }
     return null;
   });

package/lib/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -17,8 +17,6 @@ var _Link = require("../Link");
 var _StackView = require("../StackView");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // pass through and type relevant system props - add more sets for interactive components
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
 const selectImageStyle = imageDimension => ({
@@ -63,7 +61,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__*/(0, _react.forwardRef)((_ref3, ref) => {
+const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -108,25 +106,25 @@ const QuickLinksFeatureItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
           ...themeTokens,
           contentMaxDimension
         }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackWrap, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
           direction: contentDirection,
           space: contentSpace,
           gap: gap,
           tokens: {
             alignItems: contentAlignItems
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
             style: selectImageContainerStyle(contentMaxDimension),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
               accessibilityIgnoresInvertColors: true,
               imageAccessibilityLabel: imageAccessibilityLabel,
               source: imageSource,
               style: selectImageStyle(imageDimension)
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-            style: textStyle,
-            children: children
-          })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+              style: textStyle,
+              children: children
+            })]
+          })
         })
       });
     }

package/lib/Radio/Radio.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -16,9 +16,9 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _StackView = _interopRequireDefault(require("../StackView"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -116,7 +116,7 @@ const selectLabelStyles = _ref3 => {
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Radio = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     checked,
     defaultChecked,

package/lib/Radio/RadioButton.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectRadioButtonTokens = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -14,8 +14,6 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 // TODO: roll out a standard approach to token sets
@@ -36,7 +34,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,
+    ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
+  };
+};
+const selectInputStyles = _ref4 => {
   let {
     inputBackgroundColor,
     inputBorderColor,
@@ -44,7 +73,7 @@ const selectInputStyles = _ref2 => {
     inputOutlineColor,
     inputOutlineWidth,
     inputSize
-  } = _ref2;
+  } = _ref4;
   return {
     borderColor: inputBorderColor,
     borderRadius: getBorderRadius(inputSize),
@@ -61,13 +90,13 @@ const selectInputStyles = _ref2 => {
     })
   };
 };
-const selectOuterBorderStyles = _ref3 => {
+const selectOuterBorderStyles = _ref5 => {
   let {
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     inputSize
-  } = _ref3;
+  } = _ref5;
   return {
     ...(0, _ThemeProvider.applyOuterBorder)({
       outerBorderColor,
@@ -82,7 +111,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__*/(0, _react.forwardRef)((_ref4, ref) => {
+const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     isChecked,
     tokens,
@@ -93,16 +122,36 @@ const RadioButton = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     handleChange,
     name: inputName,
     value,
+    testID = 'Radio-Checked',
     ...rest
-  } = _ref4;
-  const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens, {
+  } = _ref6;
+  const radioTokens = (0, _ThemeProvider.useThemeTokens)('Radio', tokens, {
+    checked: isChecked
+  });
+  const {
+    icon: IconComponent,
+    ...iconTokens
+  } = selectIconTokens(radioTokens);
+  const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(IconComponent ? radioTokens : tokens, {
     checked: isChecked
   }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');
+  const getCheckedInput = checked => {
+    if (!checked) return null;
+    if (!IconComponent) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectCheckedStyles(themeTokens),
+        testID: testID
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      ...iconTokens
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)],
+      style: [staticStyles.defaultInputStyles, IconComponent ? selectInputIconStyles(themeTokens, isChecked) : selectInputStyles(themeTokens)],
       testID: "Radio-Input",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioInput.default, {
         ref: ref,
@@ -114,10 +163,7 @@ const RadioButton = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
         onChange: handleChange,
         name: inputName,
         value: value
-      }), isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectCheckedStyles(themeTokens),
-        testID: "Radio-Checked"
-      })]
+      }), getCheckedInput(isChecked)]
     })
   });
 });

package/lib/Radio/RadioGroup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _ViewportProvider = require("../ViewportProvider");
@@ -15,8 +15,6 @@ var _Radio = _interopRequireDefault(require("./Radio"));
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
@@ -68,7 +66,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * />
  * ```
  */
-const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const RadioGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,

package/lib/Radio/RadioInput.js

@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * On Web we need to include an actual input but hide it.
- */const RadioInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const RadioInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     checked,
     defaultChecked,
-    disabled,
-    id,
-    isControlled,
+    disabled = false,
+    id = null,
+    isControlled = false,
     name,
-    onChange,
+    onChange = () => {},
     value
   } = _ref;
   const handleClick = event => {
@@ -54,15 +52,5 @@ RadioInput.propTypes = {
   onChange: _propTypes.default.func,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
 };
-RadioInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  id: null,
-  isControlled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
 var _default = RadioInput;
 exports.default = _default;

package/lib/RadioCard/RadioCard.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -15,9 +15,9 @@ var _Card = require("../Card");
 var _StackView = _interopRequireDefault(require("../StackView"));
 var _RadioButton = _interopRequireWildcard(require("../Radio/RadioButton"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
 /**
@@ -55,7 +55,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * 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__*/(0, _react.forwardRef)((_ref, ref) => {
+const RadioCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib/RadioCard/RadioCardGroup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
@@ -13,9 +13,9 @@ var _StackView = _interopRequireWildcard(require("../StackView"));
 var _RadioCard = _interopRequireDefault(require("./RadioCard"));
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
@@ -69,7 +69,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * />
  * ```
  */
-const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,

package/lib/Responsive/Responsive.js

@@ -22,7 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
  * is used to hide and show children of `Responsive` within a View.
- */const Responsive = _ref => {
+ */const Responsive = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     min = 'xs',
     max,
@@ -39,6 +39,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       inheritedStyles: inheritedStyles,
       min: min,
       max: max,
+      ref: ref,
       children: children
     });
   }
@@ -47,7 +48,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     max: max,
     children: children
   });
-};
+});
 Responsive.displayName = 'Responsive';
 Responsive.propTypes = {
   /**

package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js

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

package/lib/Search/Search.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
@@ -15,8 +15,6 @@ var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
 const selectInputTokens = _ref => {
@@ -67,7 +65,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__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,

package/lib/Select/Group.js

@@ -9,16 +9,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Group = _ref => {
+const Group = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     label
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
     label: label,
+    ref: ref,
     children: children
   });
-};
+});
+Group.displayName = 'Group';
 var _default = Group;
 exports.default = _default;
 Group.propTypes = {

package/lib/Select/Item.js

@@ -8,16 +8,18 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Item = _ref => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     value
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
     value: value,
+    ref: ref,
     children: children
   });
-};
+});
+Item.displayName = 'Item';
 var _default = Item;
 exports.default = _default;
 Item.propTypes = {

package/lib/Select/Picker.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     value,
     onChange,

package/lib/Select/Picker.native.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -14,8 +14,6 @@ var _Group = _interopRequireDefault(require("./Group"));
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 const selectAndroidInputStyles = _ref => {
   let {
@@ -46,7 +44,7 @@ const selectAndroidContainerStyles = _ref2 => {
     height: rest.height + _constants.ANDROID_HEIGHT_OFFSET
   };
 };
-const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     value,
     onChange,
@@ -59,7 +57,7 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     ...rest
   } = _ref3;
   // Ungroup items, since there's no way to support groups on native
-  const flatChildren = _react.Children.toArray(children).flatMap(child => {
+  const flatChildren = _react.default.Children.toArray(children).flatMap(child => {
     if (child.type === _Group.default) {
       return child.props.children;
     }

package/lib/Select/Select.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -16,8 +16,6 @@ var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
@@ -189,7 +187,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__*/(0, _react.forwardRef)((_ref8, ref) => {
+const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -213,10 +211,10 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
     onChange,
     readOnly
   });
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isFocused, setIsFocused] = _react.default.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = _react.default.useState(false);
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);
   const {