@telus-uds/components-base 1.83.0 → 1.85.0

package/lib/Tooltip/Tooltip.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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -19,8 +19,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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectTooltipStyles = _ref => {
   let {
@@ -118,7 +116,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     content,
@@ -131,9 +129,9 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     nativeID,
     ...rest
   } = _ref6;
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const arrowRef = (0, _react.useRef)();
-  const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const arrowRef = _react.default.useRef();
+  const [tooltipDimensions, setTooltipDimensions] = _react.default.useState(null);
   const positions = {
     auto: undefined,
     // Auto needs to specifically bet set to undefined
@@ -203,7 +201,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       });
     }
   };
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (!isOpen) {
       setTooltipDimensions(null);
     }

package/lib/Tooltip/Tooltip.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 _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
@@ -21,8 +21,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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectTooltipStyles = _ref => {
   let {
@@ -147,7 +145,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     content,
@@ -160,12 +158,12 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     nativeID,
     ...rest
   } = _ref6;
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const controlRef = (0, _react.useRef)();
-  const [controlLayout, setControlLayout] = (0, _react.useState)(null);
-  const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
-  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(_Dimensions.default.get('window'));
-  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)(null);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const controlRef = _react.default.useRef();
+  const [controlLayout, setControlLayout] = _react.default.useState(null);
+  const [tooltipDimensions, setTooltipDimensions] = _react.default.useState(null);
+  const [windowDimensions, setWindowDimensions] = _react.default.useState(_Dimensions.default.get('window'));
+  const [tooltipPosition, setTooltipPosition] = _react.default.useState(null);
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
     copy
@@ -175,7 +173,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     arrowWidth,
     arrowOffset
   } = themeTokens;
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     const subscription = _Dimensions.default.addEventListener('change', _ref7 => {
       let {
         window
@@ -221,7 +219,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       });
     }
   };
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (isOpen) {
       controlRef.current.measureInWindow((x, y, width, height) => {
         setControlLayout({
@@ -237,10 +235,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       setTooltipPosition(null);
     }
   }, [isOpen]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     setIsOpen(false);
   }, [windowDimensions]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
       return;
     }

package/lib/TooltipButton/TooltipButton.js

@@ -45,7 +45,7 @@ const selectIconTokens = _ref2 => {
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = _ref3 => {
+const TooltipButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     pressableState,
     tokens,
@@ -61,6 +61,7 @@ const TooltipButton = _ref3 => {
       margin: -themeTokens.outerBorderWidth
     }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
       children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -69,7 +70,8 @@ const TooltipButton = _ref3 => {
       })
     })
   });
-};
+});
+TooltipButton.displayName = 'TooltipButton';
 const staticStyles = _StyleSheet.default.create({
   bubblePointerEvents: {
     ..._Platform.default.select({

package/lib/Typography/Typography.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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -14,8 +14,6 @@ var _utils2 = require("../utils");
 var _ViewportProvider = require("../ViewportProvider");
 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; }
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
@@ -49,7 +47,7 @@ const selectTextStyles = (_ref, themeOptions) => {
 };
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,

package/lib/Validator/Validator.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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -16,8 +16,6 @@ var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 var _ThemeProvider = require("../ThemeProvider");
 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.inputSupportsProps]);
 const selectCodeTextInputTokens = _ref => {
   let {
@@ -30,7 +28,7 @@ const selectCodeTextInputTokens = _ref => {
     icon: null
   };
 };
-const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
@@ -39,18 +37,18 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     variant = {},
     ...rest
   } = _ref2;
-  const defaultRef = (0, _react.useRef)();
+  const defaultRef = _react.default.useRef();
   const codeRef = ref ?? defaultRef;
   const {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [individualCodes, setIndividualCodes] = (0, _react.useState)({});
-  const [text, setText] = (0, _react.useState)(value);
+  const [individualCodes, setIndividualCodes] = _react.default.useState({});
+  const [text, setText] = _react.default.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
   const sufixValidation = 'Validation';
-  const [isHover, setIsHover] = (0, _react.useState)(false);
+  const [isHover, setIsHover] = _react.default.useState(false);
   const handleMouseOver = () => {
     setIsHover(true);
   };
@@ -60,11 +58,11 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = (0, _react.useMemo)(() => {
+  const [codeReferences, singleCodes] = _react.default.useMemo(() => {
     const codes = [];
     const valueCodes = {};
     for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      codes[prefix + i] = /*#__PURE__*/(0, _react.createRef)();
+      codes[prefix + i] = /*#__PURE__*/_react.default.createRef();
       valueCodes[prefix + i] = '';
       valueCodes[prefix + i + sufixValidation] = '';
     }
@@ -144,13 +142,13 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     }
     return components;
   };
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     /* eslint-disable no-unused-expressions */
     if (Number(value).toString() !== 'NaN') setText(value);
   }, [value]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
       codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
@@ -158,7 +156,7 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   }, [text]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     const handlePasteCode = event => {
       setText('');
       const clipBoardText = event.clipboardData.getData('text');

package/lib/ViewportProvider/ViewportProvider.js

@@ -4,15 +4,13 @@ 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 _systemConstants = require("@telus-uds/system-constants");
 var _useViewport = require("./useViewport");
 var _useViewportListener = _interopRequireDefault(require("./useViewportListener"));
 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; }
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
  */const ViewportProvider = _ref => {
@@ -21,7 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
   } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = (0, _react.useState)(_systemConstants.viewports.keys[0]);
+  const [viewport, setViewport] = _react.default.useState(_systemConstants.viewports.keys[0]);
   (0, _useViewportListener.default)(setViewport);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useViewport.ViewportContext.Provider, {
     value: viewport,

package/lib/index.js

@@ -11,6 +11,7 @@ var _exportNames = {
   Badge: true,
   Card: true,
   PressableCardBase: true,
+  CardGroup: true,
   Listbox: true,
   Checkbox: true,
   CheckboxCard: true,
@@ -132,6 +133,12 @@ Object.defineProperty(exports, "Card", {
     return _Card.default;
   }
 });
+Object.defineProperty(exports, "CardGroup", {
+  enumerable: true,
+  get: function () {
+    return _CardGroup.default;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -534,6 +541,7 @@ Object.keys(_Button).forEach(function (key) {
   });
 });
 var _Card = _interopRequireWildcard(require("./Card"));
+var _CardGroup = _interopRequireDefault(require("./CardGroup"));
 var _Carousel = require("./Carousel");
 Object.keys(_Carousel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/BaseView/BaseView.js

@@ -4,19 +4,17 @@ 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../../ThemeProvider");
 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; }
 /**
  * Identical to React Native's View and supporting all the same props, but with:
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
- */const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const BaseView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     style,

package/lib/utils/children.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapStringsInText = exports.unpackFragment = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _A11yText = _interopRequireDefault(require("../A11yText"));
 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; }
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples
  * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
@@ -46,10 +44,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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);
+  if (_react.default.Children.count(child) > 1) return _react.default.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 === null || child === void 0 ? void 0 : child.type) === _react.default.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;
@@ -93,7 +91,7 @@ const wrapChild = (child, wrappedText) => {
  */
 const wrapStringsInText = function (children) {
   let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const childrenArray = unpackFragment(_react.Children.toArray(children));
+  const childrenArray = unpackFragment(_react.default.Children.toArray(children));
 
   // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>

package/lib/utils/withLinkRouter.js

@@ -4,13 +4,11 @@ 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 _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
 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; }
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
  * This may be used to provide custom wrappers for integrations with third party libraries.
@@ -26,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @example A LinkRouter component to be used with link-like components might look like:
  *
  * ```jsx
- * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ * const LinkLinkRouter = React.forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
  *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
  *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
  * })
@@ -39,7 +37,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
  */const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  const wrappedComponent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     let {
       LinkRouter,
       linkRouterProps,

package/lib-module/A11yInfoProvider/index.js

@@ -1,17 +1,17 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
 import Platform from "react-native-web/dist/exports/Platform";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ScreenReaderContext = /*#__PURE__*/createContext(false);
-const ReducedMotionContext = /*#__PURE__*/createContext(false);
+const ScreenReaderContext = /*#__PURE__*/React.createContext(false);
+const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
 const A11yInfoProvider = _ref => {
   let {
     children
   } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-  useEffect(() => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false);
+  React.useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
@@ -53,8 +53,8 @@ A11yInfoProvider.propTypes = {
 };
 export default A11yInfoProvider;
 export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext);
-  const reduceMotionEnabled = useContext(ReducedMotionContext);
+  const screenReaderEnabled = React.useContext(ScreenReaderContext);
+  const reduceMotionEnabled = React.useContext(ReducedMotionContext);
   return {
     reduceMotionEnabled,
     screenReaderEnabled

package/lib-module/A11yText/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 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";
@@ -13,7 +13,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = /*#__PURE__*/forwardRef((_ref, ref) => {
+const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
     heading,

package/lib-module/ActivityIndicator/Spinner.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
 import { useA11yInfo } from '../A11yInfoProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,7 +21,7 @@ const bezierProps = {
 };
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -8,7 +8,7 @@ import { useA11yInfo } from '../A11yInfoProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ea = MIN_EMPTY_ANGLE / 2;
 const sa = MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,

package/lib-module/Autocomplete/Autocomplete.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -87,7 +86,7 @@ const highlight = function () {
     return [...acc, item];
   }, []);
 };
-const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _ref3;
   let {
     children,
@@ -122,23 +121,23 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const isControlled = value !== undefined;
 
   // We need to store current items for uncontrolled usage
-  const [currentItems, setCurrentItems] = useState(initialItems);
-  const [otherItems, setOtherItems] = useState(items);
+  const [currentItems, setCurrentItems] = React.useState(initialItems);
+  const [otherItems, setOtherItems] = React.useState(items);
 
   // We need to store the current value as well to be able to highlight it
-  const [currentValue, setCurrentValue] = useState(value ?? initialValue);
+  const [currentValue, setCurrentValue] = React.useState(value ?? initialValue);
   const inputTokens = {
     paddingLeft: INPUT_LEFT_PADDING
   };
 
   // Setting up the overlay
-  const openOverlayRef = useRef();
-  const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
-  const [isFocused, setisFocused] = useState(false);
-  const [sourceLayout, setSourceLayout] = useState(null);
+  const openOverlayRef = React.useRef();
+  const [isExpanded, setIsExpanded] = React.useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
+  const [isFocused, setisFocused] = React.useState(false);
+  const [sourceLayout, setSourceLayout] = React.useState(null);
 
   // When it's nested, selected value
-  const [nestedSelectedValue, setNestedSelectedValue] = useState(null);
+  const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null);
   const {
     supportsProps,
     ...selectedProps
@@ -160,7 +159,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
     }
   });
-  const targetRef = useRef(null);
+  const targetRef = React.useRef(null);
   // We limit the number of suggestions displayed to avoid huge lists
   // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
   // within that height, which will unlock similar behaviour for `AutoComplete` as well
@@ -173,7 +172,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     copy
   });
   // Tracking input width changes to resize the listbox overlay accordingly
-  const [inputWidth, setInputWidth] = useState();
+  const [inputWidth, setInputWidth] = React.useState();
   useSafeLayoutEffect(() => {
     if (Platform.OS === 'web') {
       const updateInputWidth = () => {
@@ -248,7 +247,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
    * within the list, if doesn't exist the nested item is added to the top of the list,
    * the nested item is added with an id equal "0"
    */
-  useEffect(() => {
+  React.useEffect(() => {
     if (nestedSelectedValue && !items.find(item => item.id === 0)) {
       const tmpItems = [...items];
       tmpItems.unshift({

package/lib-module/Autocomplete/Loading.js

@@ -6,12 +6,13 @@ import Box from '../Box';
 import StackView from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Loading = _ref => {
+const Loading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     label
   } = _ref;
   return /*#__PURE__*/_jsx(Box, {
     space: 3,
+    ref: ref,
     children: /*#__PURE__*/_jsxs(StackView, {
       direction: "row",
       space: 2,
@@ -27,7 +28,8 @@ const Loading = _ref => {
       })]
     })
   });
-};
+});
+Loading.displayName = 'Loading';
 Loading.propTypes = {
   label: PropTypes.string
 };

package/lib-module/Autocomplete/Suggestions.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import A11yText from '../A11yText';
 import Typography from '../Typography';
@@ -7,7 +7,7 @@ import Listbox from '../Listbox';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Suggestions = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Suggestions = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     hasResults,
     items = [],

package/lib-module/Badge/Badge.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
@@ -66,7 +66,7 @@ const getTypographyVariant = _ref5 => {
     size: fontSizeMapping[fontSize]
   };
 };
-const Badge = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,