@telus-uds/components-base 1.83.0 → 1.85.0

package/lib/Listbox/GroupControl.js

@@ -25,7 +25,7 @@ const styles = _StyleSheet.default.create({
     boxSizing: 'border-box'
   }
 });
-const GroupControl = _ref => {
+const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     expanded,
     pressed,
@@ -79,6 +79,7 @@ const GroupControl = _ref => {
       paddingTop: groupPaddingTop - groupBorderWidth,
       paddingBottom: groupPaddingBottom - groupBorderWidth
     }],
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
@@ -94,7 +95,8 @@ const GroupControl = _ref => {
       }
     })]
   });
-};
+});
+GroupControl.displayName = 'GroupControl';
 GroupControl.propTypes = {
   id: _propTypes.default.string,
   expanded: _propTypes.default.bool,

package/lib/Listbox/Listbox.js

@@ -27,7 +27,7 @@ const styles = _StyleSheet.default.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -42,7 +42,7 @@ const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = (0, _react.useState)(defaultSelectedId);
+  const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
   const {
     minHeight,
     minWidth
@@ -50,10 +50,10 @@ const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
-  const itemRefs = (0, _react.useRef)([]);
+  const itemRefs = _react.default.useRef([]);
   if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
-  const handleKeydown = (0, _react.useCallback)(event => {
+  const [focusedIndex, setFocusedIndex] = _react.default.useState(0);
+  const handleKeydown = _react.default.useCallback(event => {
     const nextItemRef = itemRefs.current[focusedIndex + 1];
     const prevItemRef = itemRefs.current[focusedIndex - 1];
     if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
@@ -85,7 +85,7 @@ const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
       window.addEventListener('click', onClose);
       window.addEventListener('keydown', handleKeydown);

package/lib/Listbox/ListboxContext.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useListboxContext = exports.ListboxContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-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; }
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ListboxContext = /*#__PURE__*/_react.default.createContext({});
 exports.ListboxContext = ListboxContext;
-const useListboxContext = () => (0, _react.useContext)(ListboxContext);
+const useListboxContext = () => _react.default.useContext(ListboxContext);
 exports.useListboxContext = useListboxContext;

package/lib/Listbox/ListboxGroup.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 _ListboxContext = require("./ListboxContext");
 var _GroupControl = _interopRequireDefault(require("./GroupControl"));
 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; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 
 const styles = _StyleSheet.default.create({
@@ -36,7 +34,7 @@ const getAccessibilityRole = () => _Platform.default.select({
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     id,
     label,

package/lib/Listbox/ListboxItem.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"));
@@ -13,10 +13,6 @@ var _PressableItem = _interopRequireDefault(require("./PressableItem"));
 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; }
-/* eslint-disable react/require-default-props */
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 const styles = _StyleSheet.default.create({
   itemContainer: {
@@ -30,7 +26,7 @@ const styles = _StyleSheet.default.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     href,
     label,

package/lib/Listbox/ListboxOverlay.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"));
@@ -14,10 +14,6 @@ var _ThemeProvider = require("../ThemeProvider");
 var _Card = _interopRequireDefault(require("../Card"));
 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; }
-/* eslint-disable react/require-default-props */
-
 const staticStyles = _StyleSheet.default.create({
   positioner: {
     flex: 1,
@@ -34,7 +30,7 @@ const staticStyles = _StyleSheet.default.create({
 });
 const paddingVertical = 0;
 const paddingHorizontal = 0;
-const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     isReady = false,

package/lib/Listbox/PressableItem.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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -12,10 +12,6 @@ var _utils = require("../utils");
 var _ListboxContext = require("./ListboxContext");
 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; }
-/* eslint-disable react/require-default-props */
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 const getItemStyles = _ref => {
   let {
@@ -60,7 +56,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     href,

package/lib/Modal/Modal.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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -22,8 +22,6 @@ var _ModalContent = _interopRequireDefault(require("./ModalContent"));
 var _WebModal = _interopRequireDefault(require("./WebModal"));
 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 selectContainerStyles = _ref => {
   let {
@@ -105,7 +103,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     isOpen,
@@ -154,9 +152,9 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const showCloseButton = closeButton !== null;
 
   // These refs are used to manage focus in the web modal container
-  const focusTrapRef = (0, _react.useRef)(null);
-  const closeButtonRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
+  const focusTrapRef = _react.default.useRef(null);
+  const closeButtonRef = _react.default.useRef(null);
+  _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
       const handleFocus = () => {
         // If the focus is on the last item of the web modal container, move it to the close button

package/lib/Modal/ModalContent.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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -18,9 +18,7 @@ var _ThemeProvider = require("../ThemeProvider");
 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; }
-const ModalContent = _ref => {
+const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     heading,
     headingLevel = 'h3',
@@ -47,8 +45,8 @@ const ModalContent = _ref => {
   } = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport
   });
-  const [scrollContainerHeight, setScrollContainerHeight] = (0, _react.useState)(0);
-  const [scrollContentHeight, setScrollContentHeight] = (0, _react.useState)(0);
+  const [scrollContainerHeight, setScrollContainerHeight] = _react.default.useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = _react.default.useState(0);
   const handleContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -99,6 +97,7 @@ const ModalContent = _ref => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: styles.modalContent,
+    ref: ref,
     children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: headingStyles,
       children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -153,7 +152,8 @@ const ModalContent = _ref => {
       }) : null]
     })]
   });
-};
+});
+ModalContent.displayName = 'ModalContent';
 const styles = _StyleSheet.default.create({
   modalContent: {
     flex: 1,

package/lib/Modal/WebModal.js

@@ -8,6 +8,7 @@ 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"));
+var _Portal = _interopRequireDefault(require("../Portal"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,20 +22,26 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = _ref => {
+const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: staticStyles.container,
-    ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.content,
-      children: children
+      style: staticStyles.container,
+      ...selectProps(rest),
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: staticStyles.content,
+        role: "dialog",
+        "aria-modal": true,
+        children: children
+      })
     })
   });
-};
+});
+WebModal.displayName = 'WebModal';
 WebModal.propTypes = {
   ...selectedSystemPropTypes,
   // children to be rendered within the modal
@@ -59,14 +66,16 @@ const staticStyles = _StyleSheet.default.create({
     minHeight: 0,
     minWidth: 0,
     padding: 0,
-    textDecoration: 'none',
-    zIndex: 1
+    textDecorationLine: 'none',
+    zIndex: 1000
   },
   content: {
     flex: 1,
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: 0
+    flexBasis: 0,
+    zIndex: 1000,
+    display: 'flex'
   }
 });
 var _default = WebModal;

package/lib/MultiSelectFilter/ModalOverlay.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"));
@@ -17,8 +17,6 @@ var _Card = _interopRequireDefault(require("../Card"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 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 staticStyles = _StyleSheet.default.create({
   positioner: {
     flex: 1,
@@ -62,7 +60,7 @@ const selectPaddingContainerStyles = _ref2 => {
     paddingRight
   };
 };
-const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     isReady = false,

package/lib/MultiSelectFilter/MultiSelectFilter.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"));
@@ -25,8 +25,6 @@ var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 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 {
   Col,
   Row
@@ -53,7 +51,7 @@ const selectDividerToknes = _ref2 => {
     weight
   };
 };
-const MultiSelectFilter = _ref3 => {
+const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -86,9 +84,9 @@ const MultiSelectFilter = _ref3 => {
     onChange,
     readOnly
   });
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues ?? []);
-  const [maxWidth, setMaxWidth] = (0, _react.useState)(false);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const [checkedIds, setCheckedIds] = _react.default.useState(currentValues ?? []);
+  const [maxWidth, setMaxWidth] = _react.default.useState(false);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
@@ -101,11 +99,11 @@ const MultiSelectFilter = _ref3 => {
   const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
   const isSelected = currentValues.length > 0;
   const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (colSize === 1) return setMaxWidth(false);
     return colSize === 2 && setMaxWidth(true);
   }, [colSize]);
-  (0, _react.useEffect)(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  _react.default.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,
@@ -208,6 +206,7 @@ const MultiSelectFilter = _ref3 => {
     }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
       isOpen: isOpen,
       onClose: onClose,
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           tokens: {
@@ -295,6 +294,7 @@ const MultiSelectFilter = _ref3 => {
       copy: copy,
       isReady: isReady,
       onLayout: onTargetLayout,
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: styles.textContainerStyle,
@@ -372,7 +372,7 @@ const MultiSelectFilter = _ref3 => {
       })]
     })]
   });
-};
+});
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 const styles = _StyleSheet.default.create({
   textContainerStyle: {

package/lib/Notification/Notification.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 _dictionary = _interopRequireDefault(require("./dictionary"));
 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; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectContainerStyles = tokens => ({
   ...tokens
@@ -276,7 +274,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => (
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     system,
@@ -286,7 +284,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     variant,
     ...rest
   } = _ref6;
-  const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
+  const [isDismissed, setIsDismissed] = _react.default.useState(false);
   const viewport = (0, _ViewportProvider.useViewport)();
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
@@ -304,7 +302,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     viewport
   });
   const maxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-  const notificationComponentRef = (0, _react.useRef)({
+  const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
     contentContainerStyles: {},
     staticContentContainerStyles: {},
@@ -314,7 +312,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     selectIconPropsStyles: {},
     selectDismissIconPropsStyles: {}
   });
-  const mediaIdsRef = (0, _react.useRef)({
+  const mediaIdsRef = _react.default.useRef({
     containerIds: {},
     contentContainerIds: {},
     staticContentContainerIds: {},

package/lib/OrderedList/Item.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"));
@@ -15,8 +15,6 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 var _ItemBase = _interopRequireDefault(require("./ItemBase"));
 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.htmlAttrs, _utils.viewProps]);
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
@@ -71,13 +69,13 @@ const selectItemContentStyles = (_ref3, isLastChild) => {
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     index,
     isLastChild,
     title,
-    tokens,
+    tokens = {},
     variant,
     ...rest
   } = _ref4;
@@ -153,17 +151,13 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: (0, _utils.getTokensPropType)('List'),
+  tokens: (0, _utils.getTokensPropType)('OrderedList'),
   /**
    * Item variant
    */
   variant: _utils.variantProp.propType
 };
 Item.displayName = 'OrderedListItem';
-Item.defaultProps = {
-  title: undefined,
-  tokens: {}
-};
 var _default = Item;
 exports.default = _default;
 const staticStyles = _StyleSheet.default.create({

package/lib/OrderedList/ItemBase.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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 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; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 
 const getAccessibilityRole = () => _Platform.default.select({
@@ -20,7 +18,7 @@ const getAccessibilityRole = () => _Platform.default.select({
   android: 'none',
   web: 'listitem'
 });
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     style,